/* ---------- the games: cartridges on a plank, what I'm playing now in a handheld ---------- */
.games { position: relative; z-index: 1; max-width: var(--board-width); margin: 0 auto; padding: 0 var(--gutter) var(--section-gap); font-size: var(--board-type); }
.games .tape-title { margin-bottom: 1em; display: inline-block; }

.gm { --paper: #fbf8ef; --biro: #1e2f55; --osd: #7dff9a; }
.gm-stage { position: relative; font-size: 1.45em; padding-top: 14.2em; }
.gm-plank { position: relative; width: min(41.4em, 100%); aspect-ratio: 889 / 103; }
.gm-plank img.wood { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 1.1em 1em rgba(20,10,0,.5)) drop-shadow(0 .15em .2em rgba(20,10,0,.35)); }
.gm-row { position: absolute; left: 3%; right: 3%; bottom: 33%; z-index: 2; display: flex; align-items: flex-end; gap: .7em; }
.gm-carts { display: flex; align-items: flex-end; gap: .7em; min-width: 0; }

/* a cartridge: its plastic is the cover's colour (set from games.js; grey until then) */
.gm-cart { --shell: #b5b2a9; --shell-d: #96938b; --edge: #ece7d8;
  position: relative; flex: none; width: 6.6em; height: 7.5em; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  transition: transform .22s ease; filter: drop-shadow(0 .25em .25em rgba(20,10,0,.35)); }
.gm-cart:hover, .gm-cart:focus-visible, .gm-cart.lifted { transform: translateY(-.6em) rotate(-1deg); outline: none; }
.gm-cart:focus-visible .gm-body { box-shadow: 0 0 0 .12em #f4df57; }
.gm-body { position: absolute; inset: 0; border-radius: .25em 0 .2em .2em;
  background: linear-gradient(100deg, rgba(255,255,255,.18), transparent 30%), linear-gradient(var(--shell), var(--shell-d));
  clip-path: polygon(0 0, calc(100% - .7em) 0, 100% .7em, 100% 100%, 0 100%); box-shadow: inset 0 -.2em 0 rgba(0,0,0,.18); }
.gm-grip { position: absolute; top: 4%; left: 22%; right: 26%; height: 6%; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 .1em, transparent 0 .25em); }
.gm-label { position: absolute; left: 9%; right: 9%; top: 15%; height: 57%; border: .2em solid var(--edge); border-radius: .15em;
  background: #1b1b1d center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.gm-label.wide { background-size: 100% auto; }
.gm-label.blank { display: grid; place-items: center; padding: .3em; background: #2b2f45; color: #f3ede2; font: 700 .55em/1.1 var(--mono); text-align: center; overflow: hidden; }
.gm-ttl { position: absolute; left: 9%; right: 9%; top: 76%; font: 600 .38em/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: left;
  color: rgba(40,38,34,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-arrow { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); border: .3em solid transparent; border-top-color: rgba(0,0,0,.2); border-bottom: 0; }
.gm-cart.on-dark .gm-ttl { color: rgba(255,255,255,.8); }
.gm-cart.flying { position: fixed; z-index: 50; margin: 0; pointer-events: none; transition: none; }
.gm-cart.in { pointer-events: none; transition: none; }

/* the handheld: the telly's blue, the game in its slot showing above */
.gm-hh { position: relative; flex: none; width: 9.4em; padding-top: 3.2em; }
.gm-slot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 0; }
.gm-slot .gm-cart { font-size: .92em; }
.gm-hh-body { position: relative; z-index: 1; padding: .95em .8em 1em; border-radius: .55em .55em 1.9em .55em;
  background: linear-gradient(160deg, #4a5fb0, #34468e 70%);
  box-shadow: inset 0 .12em 0 rgba(255,255,255,.18), inset 0 -.2em 0 rgba(0,0,0,.25), 0 .6em .9em rgba(20,10,0,.45); }
.gm-hh-body::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: .4em; background: #26336a; border-radius: 0 0 .25em .25em; }
.gm-bezel { background: #2b2d33; border-radius: .3em .3em 1em .3em; padding: .65em .7em .6em; }
.gm-led { display: flex; align-items: center; gap: .25em; margin: -.3em 0 .25em -.2em; font: 500 .3em/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #aaa; }
.gm-led i { width: .9em; height: .9em; border-radius: 50%; background: #3a1010; }
.gm-hh.on .gm-led i { background: #ff3b3b; box-shadow: 0 0 .6em #ff3b3b; }
.gm-screen { position: relative; aspect-ratio: 1.26; overflow: hidden; border-radius: 2px; background: #8a9a5b; display: grid; place-items: center; }
.gm-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-screen img.wide { object-fit: contain; background: #111; }
.gm-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px); pointer-events: none; }
.gm-nocart { font: 600 .45em/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3c4526; text-align: center; padding: .5em; }
.gm-boot { position: absolute; inset: 0; display: grid; place-items: center; background: #e8e6d8; z-index: 1; }
.gm-boot b { font: 400 .8em/1 var(--marker); color: var(--biro); animation: gm-drop 1.1s ease-out both; }
@keyframes gm-drop { from { transform: translateY(-3em); } 65%, to { transform: none; } }
.gm-brand { margin: .4em 0 .7em; font: italic 600 .45em/1 var(--mono); letter-spacing: .04em; color: #c8d0ef; }
.gm-brand b { font: 400 1.15em/1 var(--marker); color: #f4df57; font-style: normal; }
.gm-ctrls { display: flex; justify-content: space-between; align-items: center; padding: 0 .15em; }
.gm-dpad { position: relative; width: 2.4em; height: 2.4em; }
.gm-dpad::before, .gm-dpad::after { content: ""; position: absolute; background: #1c1d22; border-radius: .12em; box-shadow: 0 .08em 0 #0d0e10; }
.gm-dpad::before { left: .8em; top: 0; width: .8em; height: 2.4em; }
.gm-dpad::after { top: .8em; left: 0; width: 2.4em; height: .8em; }
.gm-ab { display: flex; gap: .4em; transform: rotate(-25deg); }
.gm-ab button { width: 1.25em; height: 1.25em; padding: 0; border: 0; border-radius: 50%; background: #b3245e; box-shadow: 0 .12em 0 #6e1238;
  font: inherit; color: transparent; overflow: hidden; cursor: pointer; }
.gm-ab button:active { transform: translateY(.08em); box-shadow: 0 .04em 0 #6e1238; }
.gm-ab button:focus-visible { outline: .1em solid #f4df57; outline-offset: .1em; }
.gm-grill { position: absolute; right: .75em; bottom: .65em; display: flex; gap: .2em; transform: rotate(-25deg); }
.gm-grill i { width: .16em; height: 1.05em; border-radius: .1em; background: rgba(0,0,0,.3); }

/* the backlog note, pinned to the cork above the cartridges */
.gm-all { position: absolute; right: 1%; top: 2.6em; width: 7.6em; padding: .7em .7em .6em; z-index: 3; font: 400 .83em/1.05 var(--pen);
  color: #262218; text-decoration: none; background: linear-gradient(175deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%), #f4df57;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 .5em .7em -.4em rgba(30,30,40,.6), 0 1px 2px rgba(0,0,0,.25); transform: rotate(4deg); transition: transform .2s; }
.gm-all b { display: block; font: 400 .85em/1.1 var(--marker); margin-bottom: .25em; }
.gm-all:hover { transform: rotate(1deg) translateY(-.15em); }
.gm-all::after { content: ""; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0, transparent 45%), #d8322a; box-shadow: 0 5px 5px -2px rgba(20,10,0,.55), inset 0 -2px 3px rgba(0,0,0,.35); }
.gm-all[hidden] { display: none; }

/* the notes on a game */
.gm-card { position: relative; z-index: 2; display: flex; gap: 1.2em; max-width: 42em; margin-top: 3.2em; padding: 1em 1.2em 1.1em; background: var(--paper); color: #1f1c17;
  box-shadow: 0 .5em 1em rgba(30,15,0,.35), 0 1px 2px rgba(30,15,0,.3); }
.gm-card[hidden] { display: none; }
.gm-shot { flex: none; width: 11em; align-self: flex-start; }
.gm-shot img { display: block; width: 100%; aspect-ratio: 1.26; object-fit: cover; border: 1px solid rgba(0,0,0,.15); }
.gm-shot.wide img { aspect-ratio: auto; }
.gm-words { min-width: 0; }
.gm-card h3 { margin: 0; font: 400 1.45em/1.1 var(--marker); }
.gm-by { margin: .2em 0 0; font-size: .82em; color: #7a6d58; }
.gm-note { margin: .35em 0 .2em; font: 400 1.6em/1.05 var(--pen); color: var(--biro); }
.gm-facts { margin: .4em 0 0; font-size: .78em; color: #6d6455; }
.gm-facts b { color: #1f1c17; font-weight: 600; }
.gm-tags { display: flex; flex-wrap: wrap; gap: .3em; margin: .5em 0 0; }
.gm-tags span { font-size: .68em; padding: .1em .55em; border: 1px solid #c9bfac; border-radius: 99px; color: #6d6455; }
.gm-go { display: inline-block; margin-top: .8em; padding: .35em .8em; border-radius: 3px; background: #fa5c5c; color: #fff; font: 600 .78em/1.2 var(--mono); text-decoration: none; }
.gm-go:hover { background: #e04848; }

/* games.html: every game, a plank per year */
.gm-years { font-size: 1.45em; margin-top: 1.2em; }
.gm-year { margin-top: 1.6em; }
.gm-year .gm-plank { margin-top: 6.8em; width: 100%; max-width: 41.4em; }
.gm-yr { display: inline-block; font: 400 .9em/1.1 var(--pen); color: #2a2218; background: rgba(238,228,200,.94); padding: .25em .7em; box-shadow: 0 1px 2px rgba(0,0,0,.3); transform: rotate(-1.5deg); }
.gm-years .gm-card { font-size: .69em; }
.gm-empty { font: 400 .9em/1.2 var(--pen); color: #2a2218; }

@media (max-width: 640px) {
  .gm-stage, .gm-years { font-size: .8em; }
  .gm-all { top: 2em; font-size: .95em; }
  .gm-card { flex-direction: column; margin-top: 2em; }
  .gm-years .gm-card { font-size: 1.05em; }
  .gm-shot { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gm-cart, .gm-all { transition: none; } }