/* The home page: one screen. The sign up top (Nashtendo Solid, built from its parts) on an old set full of
   static, a shelf of cartridges, and a console along the bottom with the slot. Drop a cartridge in and the set
   grows to the whole screen and plays the game, with its name as the title card; then the game's site loads. */
@font-face { font-family: 'Nashtendo Solid'; src: url(../fonts/nashtendo-solid.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(../fonts/bricolage-grotesque.woff2) format('woff2'); font-weight: 300 720; font-stretch: 85% 100%; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url(../fonts/martian-mono.woff2) format('woff2'); font-weight: 400 600; font-stretch: 75% 100%; font-display: swap; }

/* black and light: the colour comes from the sign, the cartridges and the games */
:root {
  color-scheme: dark;
  --bg: #050507; --ink: #f4f4f6; --muted: #a9a9b3;
  --sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ns: 'Nashtendo Solid', var(--sans);
  --gut: clamp(16px, 4vw, 56px);
  --band: clamp(62px, 9vh, 86px);
  --cw: clamp(100px, 10.4vw, 156px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.mono { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; }
a { color: inherit; }

/* the room: the line, the sign, the shelf, the console (one column: the set and the screen lie over the rows above the console) */
.room { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.room > * { grid-column: 1; }
.haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 30% at 50% 38%, rgba(143, 91, 255, .16), transparent 72%), radial-gradient(28% 22% at 24% 38%, rgba(31, 209, 255, .12), transparent 72%), radial-gradient(28% 22% at 76% 38%, rgba(255, 90, 118, .12), transparent 72%); }
.by { grid-row: 1; position: relative; z-index: 3; margin: 0; padding: clamp(16px, 2.4vw, 30px) max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); padding-top: max(clamp(16px, 2.4vw, 30px), env(safe-area-inset-top, 0px)); }
.sign { grid-row: 2; position: relative; z-index: 2; display: grid; place-items: center; min-height: 0; padding-inline: var(--gut); }
/* the webfont wordmark: what you see before the parts arrive, and if they never do */
.mark { margin: 0; font: 400 min(12.4vw, 168px)/1 var(--ns); white-space: nowrap; background: linear-gradient(90deg, #5af3c3, #1fd1ff 12%, #4a7dff 24%, #8f5bff 36%, #c64dff 47%, #e64cc3 58%, #ff5a76 69%, #ff7f4f 80%, #ff9a3c 90%, #ffd04a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(143, 91, 255, .45)); }
.js .mark { opacity: 0; animation: fallback 0s 3s forwards; }
.lit .mark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); animation: none; }
@keyframes fallback { to { opacity: 1; } }
.titles { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.tt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; transition: transform .75s cubic-bezier(.6, 0, .2, 1); }
.tt.off { visibility: hidden; }
.tt .lt { pointer-events: auto; cursor: pointer; }
.cl, .pg { transition: opacity .16s; }
.pg { opacity: 0; }
.pc { transform-box: fill-box; transform-origin: 50% 50%; }

/* the set: one screen the size of everything above the console. At rest only a window of it shows, behind the
   sign, full of static; when a cartridge goes in it opens to the whole screen and plays the game */
.tv { grid-row: 1 / 4; position: relative; z-index: 1; overflow: hidden; background: #060608; clip-path: inset(var(--tv-t, 14%) var(--tv-r, 6%) var(--tv-b, 42%) var(--tv-l, 6%) round var(--tv-round, 30px)); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); }
.room.playing .tv { z-index: 5; clip-path: inset(0 0 0 0 round 0); }
.static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; transition: opacity .35s; }
.room.holding .static { opacity: .62; }
.room.fed .static { opacity: 0; }
.tv::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--g2, transparent); mix-blend-mode: color; opacity: 0; transition: opacity .35s; }
.room.holding .tv::after { opacity: .55; }
.room.fed .tv::after { opacity: 0; }
.scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.roll { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(255, 255, 255, .055), transparent); transform: translateY(-100%); animation: roll 7s linear infinite; }
@keyframes roll { to { transform: translateY(460%); } }
/* the glass over the window: a lip of light round the edge, the corners falling into shadow, a sheen up top */
.glass { position: absolute; z-index: 4; pointer-events: none; top: var(--tv-t, 14%); right: var(--tv-r, 6%); bottom: var(--tv-b, 42%); left: var(--tv-l, 6%); border-radius: var(--tv-round, 30px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 0 90px rgba(0, 0, 0, .9); background: radial-gradient(70% 45% at 30% 0%, rgba(255, 255, 255, .07), transparent 70%); transition: top .75s cubic-bezier(.7, 0, .2, 1), right .75s cubic-bezier(.7, 0, .2, 1), bottom .75s cubic-bezier(.7, 0, .2, 1), left .75s cubic-bezier(.7, 0, .2, 1), border-radius .75s; }
/* the static over the whole screen: no window edge, and darker toward the shelf so the cartridges stand clear */
.tv.full { --tv-round: 0px; }
.tv.full .glass { box-shadow: inset 0 0 200px rgba(0, 0, 0, .9); background: radial-gradient(70% 40% at 50% 0%, rgba(255, 255, 255, .05), transparent 70%), linear-gradient(transparent 52%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .7)); }
.room.playing .glass { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 220px rgba(0, 0, 0, .85); background: none; }
/* the game, on the set */
.feed { position: absolute; inset: 0; z-index: 2; opacity: 0; filter: saturate(1.15) contrast(1.06); }
.room.fed .feed { opacity: 1; animation: crtOn .6s cubic-bezier(.3, .7, .3, 1) both, flicker 5s steps(1) .6s infinite; transform-origin: 50% var(--oy, 40%); }
.feed > * { position: absolute; display: block; }
.feed .bg { inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(30px) saturate(1.3) brightness(.5); transition: filter 1.6s; }
.feed .bg.dim { filter: blur(30px) saturate(.6) brightness(.16); } /* under hair: its roots */
.feed .fg { left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); box-shadow: 0 0 120px rgba(0, 0, 0, .8); }
.feed .full, .feed canvas { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a shade behind the title card, so the name reads over a bright game */
.feed::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 17% at 50% var(--cy, 72%), rgba(0, 0, 0, .7), transparent 85%); }
.feed .art { opacity: 0; transition: opacity .8s; }
.feed .art.on { opacity: 1; }
@keyframes crtOn { 0% { transform: scale(0, .004); filter: brightness(5); } 35% { transform: scale(1, .004); filter: brightness(5); } 70% { transform: scale(1, 1); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
@keyframes flicker { 0%, 100% { filter: none; } 48% { filter: brightness(1.06); } 50% { filter: brightness(.94); } 52% { filter: none; } }

/* the shelf of cartridges: each one a box, seen from just above the shelf */
.shelf { grid-row: 3; position: relative; display: flex; justify-content: center; gap: clamp(12px, 1.8vw, 26px); padding: 0 max(var(--gut), env(safe-area-inset-right, 0px)) clamp(30px, 6.5vh, 68px) max(var(--gut), env(safe-area-inset-left, 0px)); }
.cart { --d: calc(var(--cw) * .25); --h: calc(var(--cw) * 92 / 132); position: relative; z-index: 2; flex: none; display: block; width: var(--cw); text-decoration: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; perspective: 640px; perspective-origin: calc(50% + var(--px, 0px)) var(--py, -110%); transition: translate .55s cubic-bezier(.3, 1.35, .5, 1), rotate .4s, filter .3s, perspective-origin .45s; }
.c3 { position: relative; display: block; transform-style: preserve-3d; transform: translateY(var(--ly, 0px)) translateZ(var(--lz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.c3 > .front { display: block; width: 100%; height: auto; overflow: visible; transform: translateZ(calc(var(--d) / 2)); }
.f { position: absolute; display: block; backface-visibility: hidden; }
.top, .bot { left: 0; width: 100%; height: var(--d); top: calc(50% - var(--d) / 2); }
.top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); border-radius: 3px 3px 0 0; background: linear-gradient(color-mix(in srgb, var(--s2) 60%, #000), color-mix(in srgb, var(--s1) 78%, #fff)); }
.bot { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: repeating-linear-gradient(90deg, #e2bf68 0 2px, #8e6c24 2px 3px, transparent 3px 6px) 50% 50% / 76% 46% no-repeat, linear-gradient(#0d0d11, #1c1c22); }
.lf, .rt { top: 0; height: 100%; width: var(--d); left: calc(50% - var(--d) / 2); background: linear-gradient(color-mix(in srgb, var(--s1) 62%, #000), color-mix(in srgb, var(--s2) 62%, #000)); }
.lf { transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2)); }
.rt { transform: rotateY(90deg) translateZ(calc(var(--cw) / 2)); }
.bk { top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 3% 3% 0 0; background: color-mix(in srgb, var(--s2) 75%, #000); }
/* a sheen that follows the light as the cartridge turns */
.glare { position: absolute; inset: 0; pointer-events: none; transform: translateZ(calc(var(--d) / 2 + .5px)); border-radius: 3% 3% 0 0; background: radial-gradient(55% 60% at var(--gx, 28%) var(--gy, 6%), rgba(255, 255, 255, .26), transparent 72%); opacity: var(--go, .55); transition: opacity .3s; }
.shade { position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); transition: transform .45s, opacity .45s; }
.cart:hover .shade { transform: scale(.86); opacity: .55; }
.cart:focus-visible { outline: none; }
:root[data-from="s-na.sh"] .cart[href="https://s-na.sh"] { display: none; }
.cart:focus-visible .front { outline: 2px solid var(--g2); outline-offset: 4px; border-radius: 6px; }
.cart.held { z-index: 9; cursor: grabbing; transition: none; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px color-mix(in srgb, var(--g2) 45%, transparent)); }
.cart.held .c3 { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.cart.held .shade, .cart.going .shade, .cart.in .shade { opacity: 0; }
.cart.going { z-index: 9; transition: translate .3s cubic-bezier(.2, .7, .3, 1), rotate .3s, clip-path .3s, perspective-origin .3s; }
.cart.in { z-index: 7; transition: translate .34s cubic-bezier(.6, 0, .9, .5), clip-path .34s cubic-bezier(.6, 0, .9, .5); }
.cart.going .c3, .cart.in .c3 { transform: none; }
.cart.going .glare, .cart.in .glare { opacity: .3; }

/* the console: a dark edge along the bottom, the slot in the middle */
.console { grid-row: 4; position: relative; z-index: 6; /* over the set too: the dock stays in front of the game */ height: calc(var(--band) + env(safe-area-inset-bottom, 0px)); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 8px), linear-gradient(#25252d, #131318 55%, #0b0b0f); border-top: 1px solid rgba(255, 255, 255, .14); }
/* its top runs back from the edge, like a desk seen from just above */
.console::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(#17171d, #2b2b34); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }
.console::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); height: 60px; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
/* the dock: a raised housing on the top, its front face and the slot in its top behind a sprung lid */
.dock { position: absolute; z-index: 1; left: 50%; bottom: calc(100% - 1px); width: calc(var(--cw) + 70px); height: 34px; transform: translateX(-50%); }
.dock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25px; background: linear-gradient(#3a3a46, #272730); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.dock::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(#22222a, #141419); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px rgba(0, 0, 0, .6); }
.slot { position: absolute; z-index: 1; left: 50%; top: 6px; width: calc(var(--cw) + 18px); height: 15px; transform: translateX(-50%); overflow: hidden; border-radius: 3px; background: linear-gradient(#000 0 50%, #1c1c22); box-shadow: inset 0 5px 7px #000, 0 1px 0 rgba(255, 255, 255, .22); perspective: 90px; }
.flap { position: absolute; inset: 1px 2px; border-radius: 2px; transform-origin: 50% 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px), linear-gradient(#43434f, #26262e); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .35s; }
.console.ready .flap { transform: rotateX(-28deg); }
.console.armed .flap { transform: rotateX(-62deg); }
.console.on .flap { transform: rotateX(-88deg); opacity: 0; transition-duration: .12s; }
/* its light: a rim round the slot, a beam up out of it while a cartridge is over it */
.rim { position: absolute; z-index: 2; left: 50%; top: 5px; width: calc(var(--cw) + 20px); height: 17px; transform: translateX(-50%); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 1px var(--g2, #fff), 0 0 18px var(--g2, #fff); opacity: 0; transition: opacity .25s; }
.beam { position: absolute; left: 12%; right: 12%; bottom: 22px; height: 180px; pointer-events: none; background: radial-gradient(30% 90% at 50% 100%, rgba(255, 255, 255, .28), transparent), linear-gradient(to top, color-mix(in srgb, var(--g2, #fff) 50%, transparent), transparent); clip-path: polygon(8% 100%, 92% 100%, 100% 0, 0 0); opacity: 0; transition: opacity .25s; }
/* with a cartridge in the hand, the slot calls for it: a pool of its light on the desk, the beam, arrows falling in,
   the rim beating and the label lit, all the stronger the nearer it comes (--near, 0 to 1, from the drag); the
   cartridges left on the shelf step back */
.pool { position: absolute; z-index: 0; left: 50%; top: 12px; width: calc(var(--cw) * 3.4); height: 84px; margin: -42px 0 0 calc(var(--cw) * -1.7); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2, #fff) 75%, transparent), transparent); opacity: 0; transition: opacity .3s; }
.call { position: absolute; z-index: 2; left: 50%; bottom: 30px; width: 30px; height: 78px; margin-left: -15px; pointer-events: none; opacity: 0; transition: opacity .25s; }
.call b { position: absolute; left: 4px; top: 0; width: 22px; height: 22px; border: solid var(--g1, #fff); border-width: 0 4px 4px 0; border-radius: 3px; filter: drop-shadow(0 0 4px var(--g2, #fff)) drop-shadow(0 0 10px var(--g2, #fff)); opacity: 0; animation: call 1.2s cubic-bezier(.5, 0, .8, .6) infinite; }
.call b:nth-child(2) { animation-delay: .4s; }
.call b:nth-child(3) { animation-delay: .8s; }
@keyframes call { 0% { opacity: 0; transform: translateY(-6px) rotate(45deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(50px) rotate(45deg); } }
@keyframes beckon { 50% { box-shadow: 0 0 0 2px var(--g1, #fff), 0 0 34px var(--g2, #fff); } }
.console.ready .rim { opacity: calc(.6 + .4 * var(--near, 0)); animation: beckon 1.1s ease-in-out infinite; }
.console.ready .pool { opacity: calc(.5 + .5 * var(--near, 0)); }
.console.ready .beam { opacity: calc(.4 + .6 * var(--near, 0)); }
.console.ready .call { opacity: 1; }
.console.ready .ins { opacity: 1; color: var(--g1, #fff); text-shadow: 0 0 10px var(--g2, #fff); }
.room.holding .cart:not(.held):not(.going):not(.in) { filter: brightness(.45) saturate(.6); }
/* over the slot: wide open, full beam; once in, just the rim */
.console.armed .rim, .console.on .rim { opacity: 1; animation: none; }
.console.armed .beam { opacity: 1; }
.console.armed .call, .console.on .call, .console.on .pool, .console.on .beam { opacity: 0; }
.console.on .ins { opacity: .75; color: inherit; text-shadow: none; }
/* the moment it goes in: a burst of light out of the slot, a ring across the top, the dust kicked up */
.burst { position: absolute; z-index: 3; left: 50%; top: 13px; width: 260px; height: 120px; margin: -60px 0 0 -130px; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--g2, #fff) 80%, transparent) 35%, transparent); opacity: 0; transform: scale(.2, .1); }
.ring { position: absolute; z-index: 0; left: 50%; top: 14px; width: 300px; height: 40px; margin: -20px 0 0 -150px; pointer-events: none; border-radius: 50%; border: 2px solid var(--g2, #fff); opacity: 0; }
.console.pop .burst { animation: burst .55s cubic-bezier(.2, .8, .3, 1); }
.console.pop .ring { animation: ring .7s cubic-bezier(.2, .8, .3, 1); }
.console.pop .led { animation: ledflash .5s steps(2) 2; }
@keyframes burst { 0% { opacity: 0; transform: scale(.2, .1); } 12% { opacity: 1; transform: scale(.9, .7); } 100% { opacity: 0; transform: scale(1.6, 1.3); } }
@keyframes ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6, 2); } }
@keyframes ledflash { 50% { background: #fff; } }
.dust { position: absolute; z-index: 3; left: 50%; top: 10px; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; pointer-events: none; background: color-mix(in srgb, var(--g2, #fff) 55%, #fff); box-shadow: 0 0 6px var(--g2, #fff); animation: dust .7s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes dust { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.ins { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; opacity: .75; transition: color .3s, text-shadow .3s, opacity .3s; }
.pwr { position: absolute; left: max(var(--gut), env(safe-area-inset-left, 0px)); top: 22px; display: flex; align-items: center; gap: 10px; font-size: 9.5px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #3b1515; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); transition: background .2s, box-shadow .2s; }
.console.on .led { background: var(--g2); box-shadow: 0 0 10px var(--g2), 0 0 3px #fff; }
/* the sound switch, on the right of the console */
.snd { position: absolute; right: max(var(--gut), env(safe-area-inset-right, 0px)); top: 14px; display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 2px; border: 0; background: none; font-size: 9.5px; cursor: pointer; }
.snd i { position: relative; width: 22px; height: 12px; border-radius: 6px; background: #121216; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .1); }
.snd i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #55555f; transition: transform .2s, background .2s; }
.snd[aria-pressed="true"] i::after { transform: translateX(10px); background: #d6d6dd; }
.snd:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
/* the room takes the knock */
.room.thud { animation: thud .32s ease-out; }
@keyframes thud { 18% { transform: translate(0, 7px) rotate(.25deg); } 42% { transform: translate(0, -3px) rotate(-.15deg); } 68% { transform: translate(0, 1.5px); } }

/* on the screen: the loading bar under the title card, and the way out */
.screen { grid-row: 1 / 4; position: relative; z-index: 8; pointer-events: none; }
.screen[hidden] { display: none; }
.scr-ui { position: absolute; left: 0; right: 0; top: var(--ty, 70%); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-inline: 16px; pointer-events: auto; }
.load { display: flex; align-items: center; gap: 14px; margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(5, 5, 7, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); }
.load i { display: block; width: min(260px, 46vw); height: 12px; padding: 2px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px; }
.load b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); }
.screen.boot .load b { animation: fill var(--load, 2.1s) steps(18) .7s forwards; }
@keyframes fill { to { width: 100%; } }
.go-row { display: none; flex-wrap: wrap; justify-content: center; gap: 12px; }
.screen.stuck .load { display: none; }
/* a game that's coming soon (data-soon): no Press start; a stamp comes down instead, and then it ejects itself */
.soon-stamp { display: none; margin: 0; padding: 9px 20px 8px; border: 3px solid var(--g2); border-radius: 8px; color: var(--g1); background: rgba(5, 5, 7, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 800 clamp(20px, 3.2vw, 30px)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 34px color-mix(in srgb, var(--g2) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--g2) 30%, transparent); transform: rotate(-7deg); }
.screen.soon .load { display: none; }
.screen.soon .soon-stamp { display: inline-block; animation: stamp .42s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.6); } 55% { opacity: 1; } 100% { transform: rotate(-7deg) scale(1); } }
.screen.stuck .go-row { display: flex; animation: blinkIn .5s steps(2) both; }
@keyframes blinkIn { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: .2; } 100% { opacity: 1; } }
.start, .eject { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; font: 620 18px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; }
.start { color: #0b0b10; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); box-shadow: 0 0 34px color-mix(in srgb, var(--g2) 60%, transparent); border: 0; transition: transform .25s, box-shadow .25s; }
.start:hover { transform: translateY(-2px); box-shadow: 0 0 50px color-mix(in srgb, var(--g2) 80%, transparent); }
.eject { color: var(--ink); background: rgba(5, 5, 7, .55); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eject:hover { border-color: rgba(255, 255, 255, .6); }
.start:focus-visible, .eject:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 640px) {
  :root { --cw: calc((100vw - 2 * max(16px, 4vw) - 28px) / 3); --band: 64px; }
  .shelf { display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 26px 14px; }
  /* five cartridges (opened from s-na.sh): three, then two in the middle */
  :root[data-from="s-na.sh"] .shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 12px; }
  .pwr, .snd { font-size: 0; gap: 0; }
  .tv:not(.full), .tv:not(.full) .glass { --tv-round: 22px; }
}
/* narrow and short too (a small phone on its side): one row of smaller cartridges, so the sign keeps its room */
@media (max-width: 640px) and (max-height: 520px) {
  :root { --cw: calc((100vw - 2 * max(16px, 4vw) - 60px) / 6); }
  .shelf { display: flex; gap: 12px; }
}
/* a tall screen: the game fills it */
@media (max-aspect-ratio: 4/5) { .feed .fg { left: 0; width: 100%; object-fit: cover; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cart, .c3, .cart.going, .cart.in, .tv, .glass, .tt { transition: none !important; }
  .room.fed .feed, .room.thud, .screen.stuck .go-row, .screen.soon .soon-stamp, .roll, .console.pop .burst, .console.pop .ring, .dust { animation: none !important; }
  .flap { transition: none; }
  .call b { animation: none; opacity: 1; transform: rotate(45deg); }
  .call b:nth-child(2) { top: 18px; } .call b:nth-child(3) { top: 36px; }
  .console.ready .rim { animation: none; }
  .screen.boot .load b { animation-duration: .01s; animation-delay: 0s; }
}

/* the byline's name goes to the About page */
.by a { text-decoration: none; transition: color .2s; }
.by a:hover, .by a:focus-visible { color: var(--ink); }
/* the font, to take home: on the byline's row, at the right, to its own page; on hover it takes the sign's spectrum and the arrow nudges on */
.by { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.font-dl { white-space: nowrap; }
.font-dl .dl { display: inline-block; font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: 0; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.by .font-dl:hover, .by .font-dl:focus-visible { background: linear-gradient(90deg, #5af3c3, #1fd1ff 20%, #8f5bff 45%, #e64cc3 65%, #ff9a3c 85%, #ffd04a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.font-dl:hover .dl, .font-dl:focus-visible .dl { transform: translateX(3px); color: #ffd04a; } /* an inline-block isn't painted by the link's gradient, so it takes the spectrum's last colour */
@media (max-width: 520px) { .font-dl .w { display: none; } }
@media (prefers-reduced-motion: reduce) { .font-dl .dl { transition: none; } }