/* Bolt Creative home: a live ASCII arcade behind a project carousel.
   The Tab Hammer pages and 404 keep using /styles.css. */
:root {
  --bg: #040917;
  --panel: rgba(6, 15, 40, 0.72);
  --panel-solid: #071232;
  --line: rgba(86, 136, 255, 0.26);
  --line-hi: rgba(120, 165, 255, 0.55);
  --blue: #2f6bff;
  --blue-2: #77a3ff;
  --ice: #d7e4ff;
  --ink: #e8eefc;
  --muted: #7d90c0;
  --orange: #ff7a1a;
  --amber: #ffb24a;
  --orange-ink: #1b0a00;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --bar-h: 130px;
  --logo-h: 100px;
  --foot-h: 14px; /* breathing room below the carousel */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--ink); font: 13px/1.55 var(--mono); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── background arcade ── */
#stage { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
#screen { display: block; cursor: none; touch-action: none; }
/* a held finger on the game is a thumb on a stick, not a text selection or a callout */
#screen { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.play { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#screen:focus { outline: none; }
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
              radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.45)); }
.nogl { color: var(--muted); padding: 40px; text-align: center; }

/* ── top bar ── */
.bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: var(--bar-h); padding: 0 22px;
  display: flex; align-items: center; gap: 24px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: block; height: var(--logo-h); flex: none; }
.logo { height: 100%; width: auto; display: block; }
.logo .i, .logo .c { fill: #fff; }
.logo .g { fill: transparent; }

/* the score: centered on the window, level with the control strip */
.hud { position: fixed; z-index: 6; top: 14px; left: 50%; height: 44px; display: flex; align-items: center; gap: 22px; margin: 0; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, -12px); transition: opacity .4s .25s, transform .5s .25s var(--ease); pointer-events: none; }
body.play .hud { opacity: 1; transform: translate(-50%, 0); }
.hud div { display: flex; gap: 8px; align-items: baseline; }
.hud dt { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.hud dd { margin: 0; font-size: 15px; font-weight: 500; }
.hud .ships { color: var(--orange); letter-spacing: .2em; }

/* ── the control strip: top-right on every screen, in both modes ──
   The Work/Play switch, one slot that changes with the mode (? in Work, pause/resume in Play),
   and settings. The switch is first and the strip never changes width, so nothing moves when
   you flip it. */
.strip { position: fixed; z-index: 7; top: 14px; right: 14px; display: flex; align-items: center; gap: 4px; padding: 4px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: rgba(4, 10, 28, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s; }
body.play .strip { border-color: rgba(255, 122, 26, .6); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; }
.toggle .lab { color: var(--muted); transition: color .3s; }
.toggle .track { position: relative; width: 58px; height: 24px; border-radius: 999px; background: rgba(47, 107, 255, .22); border: 1px solid var(--line-hi); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-2);
  transition: transform .45s var(--ease), background .3s; display: grid; place-items: center; font-size: 10px; color: var(--bg); font-weight: 800; }
.toggle .lab-w { color: var(--ink); }
body.play .toggle .lab-w { color: var(--muted); }
body.play .toggle .lab-p { color: var(--orange); }
body.play .toggle .track { background: rgba(255, 122, 26, .2); border-color: rgba(255, 122, 26, .6); }
body.play .toggle .knob { transform: translateX(34px); background: var(--orange); }
.toggle:hover .track { border-color: var(--orange); }
.strip .round { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-hi); display: grid; place-items: center; color: var(--ink); font-weight: 700; transition: border-color .2s, color .2s, background .2s; }
.strip .round:hover, .strip .round[aria-expanded="true"], .strip .round.on { border-color: var(--orange); color: var(--orange); background: rgba(255, 122, 26, .12); }
.strip .round svg { width: 15px; height: 15px; display: block; }
.strip-sep { width: 1px; height: 22px; background: var(--line); }

/* ── the dim behind settings and the How-to-play card: fades in whenever either is open.
   It never takes clicks: a press outside settings closes it (main.js), and a click on the
   game while the card shows resumes play. The strip stays above it. ── */
.scrim { position: fixed; inset: 0; z-index: 6; background: rgba(4, 9, 23, .6); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
body:has(.settings.open) .scrim, body:has(.howto.open) .scrim { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }

/* ── settings: slides in from the right, under the strip (a sheet up from the bottom on phones) ──
   main.js toggles .open; closed, it waits off-screen, hidden and inert */
.settings { position: fixed; z-index: 8; top: 66px; right: 14px; width: 300px; box-sizing: border-box; padding: 14px 16px 16px; display: grid; gap: 12px;
  border: 1px solid var(--line-hi); border-radius: 10px; background: rgba(7, 18, 50, .97); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  visibility: hidden; opacity: 0; transform: translateX(calc(100% + 24px));
  transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s; }
.settings.open { visibility: visible; opacity: 1; transform: none; transition: transform .45s var(--ease), opacity .25s, visibility 0s; }
.settings .head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.settings .head button { font-size: 18px; line-height: 1; padding: 2px 6px; color: var(--muted); }
.settings .row { display: grid; gap: 6px; }
.settings .row > span { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.seg { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.seg button { flex: 1; padding: 7px 0; border-radius: 4px; font-size: 12px; color: var(--ice); transition: background .2s, color .2s; }
.seg button:hover { background: rgba(47, 107, 255, .2); }
.seg button[aria-pressed="true"] { background: var(--orange); color: var(--orange-ink); font-weight: 700; }
.seg button:disabled { opacity: .35; cursor: default; background: none; }

/* ── how to play: shown from ? in Work, on pause in Play, and the first time Play starts ── */
.howto { position: fixed; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow: auto; box-sizing: border-box;
  padding: 24px 26px 20px; display: grid; gap: 16px; border: 1px solid var(--line-hi); border-radius: 12px; background: rgba(7, 18, 50, .97);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
  /* the arcade toggles .open: it rises and fades in; closed, it's hidden and inert */
  visibility: hidden; opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.97);
  transition: transform .4s var(--ease), opacity .3s, visibility 0s .4s; }
.howto.open { visibility: visible; opacity: 1; transform: translate(-50%, -50%); transition: transform .4s var(--ease), opacity .3s, visibility 0s; }
.howto .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.howto h2 { margin: 0; font-size: 20px; font-weight: 800; }
.howto .paused { font-size: 11px; letter-spacing: .16em; color: var(--orange); font-weight: 700; margin-right: 10px; }
.howto .paused[hidden] { display: none; }
.howto .sub { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.howto .intro { margin: 0; font-size: 12.5px; color: var(--ice); }
.howto .body { display: flex; gap: 24px; align-items: center; }
.howto svg { flex: none; width: 230px; height: 210px; }
.howto dl { flex: 1; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; font-size: 12.5px; color: var(--ice); }
.howto dt { display: flex; gap: 4px; font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.howto dd { margin: 0; }
.howto kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--line-hi); border-bottom-width: 3px; border-radius: 5px;
  font: 700 12px var(--mono); color: var(--ink); background: rgba(4, 10, 28, .9); text-transform: none; }
.howto .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.howto .go { padding: 9px 16px; border-radius: 3px; background: var(--orange); color: var(--orange-ink); font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.howto .go:hover { background: var(--amber); }
/* a touchscreen gets the thumbs, not the keys */
.howto .touch { display: none; }
@media (pointer: coarse) { .howto .keys { display: none; } .howto .touch { display: flex; } }
/* the touch body is its sub-heading over the thumbs */
.howto .body.touch { flex-direction: column; align-items: stretch; gap: 12px; }
@media (max-width: 560px) { .howto .body { flex-direction: column; } }
@media (max-height: 500px) {
  .howto { padding: 14px 20px 12px; gap: 10px; }
  .howto svg { width: 150px; height: 137px; }
  .howto dl { gap: 6px 12px; font-size: 12px; }
  .howto kbd { min-width: 22px; height: 22px; font-size: 11px; }
  .howto .foot { padding-top: 10px; }
}

/* ── shared bits ── */
.kicker { font-size: 11px; color: var(--blue-2); letter-spacing: .1em; text-transform: uppercase; }
.kicker .sep { color: var(--orange); }
.desc { margin: 0; color: var(--muted); max-width: 64ch; font-size: 12.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--ice); }
.tags span::before { content: "[ "; color: var(--orange); }
.tags span::after { content: " ]"; color: var(--orange); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } }

/* ── carousel ──
   Every card has the same box (image + title bar), so the centered card and
   its neighbours share one vertical center and nothing shifts as they swap.
   carousel.js sets each card's transform every frame from one spring-driven
   position; there are no CSS transitions on the cards to fight with. */
.car { position: fixed; z-index: 3; inset: calc(var(--bar-h) + 8px) 0 var(--foot-h); display: grid; grid-template-rows: minmax(0, 1fr) auto var(--details-h) minmax(0, 1fr); pointer-events: none;
  --details-h: 180px;
  --bar2-h: 52px;
  --cw: min(52vw, calc((100dvh - var(--bar-h) - var(--foot-h) - 240px - var(--bar2-h)) * 1.5)); }
/* The stage is exactly one card tall (plus room for its corner brackets) and
   the details sit right under it in a fixed-height row, so the card never moves
   when a project's details are longer or shorter; the two 1fr rows center the pair. */
.c-stage { grid-row: 2; height: calc(var(--cw) / 1.5 + var(--bar2-h) + 32px); position: relative; min-height: 0; transition: transform .8s var(--ease), opacity .5s; animation: rise .7s var(--ease) backwards .08s; }
.c-track { position: absolute; inset: 0; touch-action: pan-y; }
/* Every card's image bottom sits on one baseline, and cards scale around that
   edge: images line up along the bottom, the center card's title bar hangs
   below the line, and a taller image would grow upward. The baseline is set so
   the centered card (image + bar) is centered in the stage. */
.c-stage { --baseline: calc(50% + var(--cw) / 3 - var(--bar2-h) / 2); }
.c-card { position: absolute; left: 50%; top: var(--baseline); width: var(--cw); transform-origin: 50% calc(100% - var(--bar2-h)); pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none;
  transform: translate(-50%, calc(-100% + var(--bar2-h))); will-change: transform, opacity; }
.c-card.center { cursor: default; }
.c-track.dragging .c-card { cursor: grabbing; }
/* Side cards are just their ASCII image: the title bar keeps its space (so the
   image sits where it will when centered) but draws nothing. */
.c-in { border-radius: 4px; overflow: hidden; border: 1px solid transparent;
  transition: border-color .35s, background-color .35s, box-shadow .35s; }
.c-card .im { border-radius: 4px; transition: border-radius .35s; }
.c-card.center .c-in { border-color: var(--line-hi); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); }
.c-card.center .im { border-radius: 0; }
.c-card .im::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(120, 165, 255, .4); border-radius: inherit; pointer-events: none; transition: opacity .35s; }
.c-card.center .im::after { opacity: 0; }
.c-card .bar2 { transition: opacity .3s, background-color .35s, border-color .35s; }
.c-card:not(.center) .bar2 { opacity: 0; background: transparent; border-top-color: transparent; }
.c-card .im { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg); position: relative; }
.c-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.c-card .asc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.car.no-resolve .c-card .asc { display: none; }
/* A live card face (live-sheet.js): the shader's canvas over the fallback
   image, the name lockup over it, all under the ASCII. The lockup is sized off
   the card's width so it keeps the portfolio header's proportions. */
.c-card .im { container-type: inline-size; }
.c-card .sheet { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c-card .sheet[hidden] { display: none; }
.c-card.center[data-sheet="run"] .sheet { cursor: crosshair; }
.c-card .face { position: absolute; left: 6cqw; bottom: 6.6cqw; display: flex; flex-direction: column; gap: .9cqw; color: #fff; pointer-events: none; opacity: 0; transition: opacity .4s; }
.c-card .face .nm { font: 300 max(18px, 7.5cqw)/1.1 "Sora", system-ui, sans-serif; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .28); }
.c-card .face .tl { font: 400 max(10px, 2.4cqw)/1.3 "DM Sans", system-ui, sans-serif; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.c-card.resolved .face { opacity: 1; }
.c-card .hint { position: absolute; right: 14px; top: 14px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .85); pointer-events: none; opacity: 0; transition: opacity .4s; }
.c-card.center.resolved[data-sheet="run"] .hint { opacity: 1; }
.c-card .num { position: absolute; left: 12px; top: 10px; font-size: 11px; letter-spacing: .14em; padding: 3px 7px; background: rgba(4, 9, 23, .82); border: 1px solid var(--line); color: var(--orange); transition: opacity .3s; }
.c-card:not(.center) .num { opacity: 0; }
.c-card .bar2 { height: var(--bar2-h); display: flex; align-items: center; gap: 14px; padding: 0 16px; border-top: 1px solid var(--line); background: rgba(7, 18, 50, .68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.c-card .bar2 .t { font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.01em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-card .bar2 .y { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.c-card .dim { position: absolute; inset: 0 0 var(--bar2-h) 0; border-radius: 4px; background: var(--bg); pointer-events: none; opacity: 0; }
.c-card.center::before, .c-card.center::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--orange); z-index: 2; }
.c-card.center::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.c-card.center::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.c-arrow { position: absolute; top: calc(var(--baseline) - var(--cw) / 3); z-index: 300; transform: translateY(-50%); pointer-events: auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-hi); background: rgba(4, 10, 28, .8); backdrop-filter: blur(8px); font-size: 20px; display: grid; place-items: center; transition: border-color .2s, color .2s; }
.c-arrow { touch-action: manipulation; } /* quick repeat taps step cards instead of zooming the page */
@media (hover: hover) { .c-arrow:hover { border-color: var(--orange); color: var(--orange); } }
.c-arrow:active { border-color: var(--orange); color: var(--orange); }
.c-arrow.l { left: calc(50% - var(--cw) / 2 - 23px); }
.c-arrow.r { right: calc(50% - var(--cw) / 2 - 23px); }

.c-foot { grid-row: 3; justify-self: center; width: min(var(--cw), 92vw); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-content: start; transition: transform .7s var(--ease), opacity .45s; }
.c-foot > .kicker, .c-foot > .desc, .c-foot > .tags { grid-column: 1; }
.c-foot.swap > .kicker, .c-foot.swap > .desc, .c-foot.swap > .tags { animation: swapIn .4s var(--ease) backwards; }
.c-foot.swap > .desc { animation-delay: .04s; }
.c-foot.swap > .tags { animation-delay: .08s; }
.c-foot .desc { color: var(--ice); opacity: .82; text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg); }
.c-side { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Text over the lava (a project's details, the footer) lets
   clicks through to it; only the buttons and links inside take them. */
.c-foot a, .c-foot button { pointer-events: auto; }
.c-cta { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 8px 12px; border-radius: 2px; background: var(--orange); color: var(--orange-ink); font-weight: 700; white-space: nowrap; transition: background .2s; }
.c-cta:hover { background: var(--amber); }
.c-cta[hidden], .c-more[hidden] { display: none; }
.c-more { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 7px 12px; border-radius: 2px; border: 1px solid var(--line-hi); background: rgba(4, 10, 28, .7); color: var(--ice); white-space: nowrap; transition: border-color .2s, color .2s; }
.c-more:hover { border-color: var(--orange); color: var(--orange); }
/* The dots sit at the top of the button column, above the project's buttons. */
.c-dots { display: flex; gap: 7px; align-items: center; height: 18px; margin-bottom: 2px; }
.c-dots button { width: 10px; height: 10px; border-radius: 5px; background: rgba(120, 165, 255, .3); transition: background .3s, width .3s var(--ease); }
.c-dots button:hover { background: var(--blue-2); }
.c-dots button[aria-current="true"] { width: 26px; background: var(--orange); }
.noscript { pointer-events: auto; grid-row: 2; align-self: center; justify-self: center; max-width: 60ch; display: grid; gap: 8px; color: var(--ice); }

body.play .c-stage { transform: translateY(70vh) rotate(-3deg) scale(.9); opacity: 0; }
body.play .c-stage .c-card, body.play .c-arrow { pointer-events: none; }
body.play .c-foot { transform: translateY(200%); opacity: 0; }
body.play .c-foot a, body.play .c-foot button { pointer-events: none; }


@media (max-width: 1200px) {
  .hud div:nth-child(5) { display: none; } /* joins: the centered score would reach the strip */
}
@media (max-width: 900px) {
  :root { --bar-h: 88px; --logo-h: 64px; }
  .bar { padding: 0 14px; gap: 12px; }
  /* the score sits right under the control strip (and fades and drops in there, as on desktop) */
  .hud { gap: 12px; top: 62px; left: auto; right: 18px; height: auto; transform: translateY(-12px); }
  body.play .hud { transform: none; }
  .hud div:nth-child(n+4) { display: none; }
  .car { --bar2-h: 44px; --cw: min(80vw, calc((100dvh - var(--bar-h) - var(--foot-h) - 210px - var(--bar2-h)) * 1.5)); }
  /* smaller arrows straddle the card's edges, so phone visitors can see how to move between projects */
  .c-arrow { width: 36px; height: 36px; font-size: 18px; }
  .c-arrow.l { left: calc(50% - var(--cw) / 2 - 18px); }
  .c-arrow.r { right: calc(50% - var(--cw) / 2 - 18px); }
  .car { --details-h: 150px; }
  .c-foot { grid-template-columns: 1fr; }
  .c-side { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
  .c-dots { flex-basis: 100%; }
  .c-foot .tags { display: none; }
  .c-foot .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 520px) {
  :root { --logo-h: 50px; } /* leaves room for the strip beside it */
  .toggle { gap: 7px; padding: 4px 8px; font-size: 10.5px; letter-spacing: .12em; }
  .toggle .track { width: 50px; height: 22px; }
  .toggle .knob { width: 16px; height: 16px; }
  body.play .toggle .knob { transform: translateX(28px); }
  .strip .round { width: 32px; height: 32px; }
  .strip-sep { display: none; }
  .hud div:nth-child(2) { display: none; } /* score and ships; best doesn't fit */
  /* settings come up from the bottom, in thumb reach, over a dimmed page */
  .settings { top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)); gap: 14px;
    border-width: 1px 0 0; border-radius: 18px 18px 0 0; box-shadow: none; transform: translateY(100%); }
  .seg button { padding: 12px 0; font-size: 13px; }
}
/* ── short landscape (phones on their side, short wide windows) ──
   Stacked, the card is sized off the height left after the bar, details and
   footer, which here goes to nothing and collapses it. So the carousel becomes
   a queue (carousel.js): the focused card, sized off the full height, centered
   with its details beside it and the cards ahead waiting small to its left; the
   bar shrinks to make room. Stands alone, since wide phones (926px+) miss the
   900px block above. Up to 720px tall, since below that the stacked card on a
   laptop shrinks under ~360px and squeezes its details into a column a few
   words wide. */
@media (orientation: landscape) and (max-height: 720px) {
  :root { --bar-h: 72px; --logo-h: 52px; }
  .bar { padding: 0 14px; gap: 12px; }
  /* centered and level with the strip, as on desktop: score, ships, wave */
  .hud { gap: 14px; top: 14px; left: 50%; right: auto; height: 44px; transform: translate(-50%, -12px); }
  body.play .hud { transform: translate(-50%, 0); }
  .hud div:nth-child(2), .hud div:nth-child(n+5) { display: none; }
  .hud div:nth-child(4) { display: flex; }
  .car { --car-mode: queue; /* carousel.js lays the cards out as a queue (see there) */
    --bar2-h: 44px; --details-h: auto;
    --cw: min(52vw, calc((100dvh - var(--bar-h) - var(--foot-h) - var(--bar2-h) - 40px) * 1.5));
    inset: var(--bar-h) 14px var(--foot-h);
    grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); align-items: center; }
  .c-stage { grid-row: 1; grid-column: 1; }
  .c-arrow { width: 36px; height: 36px; font-size: 18px; }
  .c-arrow.l { left: calc(50% + var(--qx, 0px) - var(--cw) / 2 - 18px); }
  .c-arrow.r { right: auto; left: calc(50% + var(--qx, 0px) + var(--cw) / 2 - 18px); }
  /* carousel.js moves the dots into the stage, under the first small card in the queue */
  .c-stage > .c-dots { position: absolute; z-index: 300; left: calc(50% + var(--q1, 0px)); top: calc(var(--baseline) - var(--cw) / 3 + var(--bar2-h) / 2 + var(--cw) * .2 + 12px); /* under the small card, which carousel.js centers on the focused one at .6 scale */ transform: translateX(-50%); margin: 0; }
  .c-stage > .c-dots button { pointer-events: auto; }
  body.play .c-stage > .c-dots button { pointer-events: none; }
  .c-card .bar2 .y { display: none; } /* the small card's title needs the bar; the details beside it repeat the year and platforms */
  /* the focused card is centered in the view; its details sit right beside it */
  .c-foot { position: absolute; top: 0; bottom: 0; left: calc(50% + var(--cw) / 2 + 40px); width: min(440px, calc(50% - var(--cw) / 2 - 40px)); align-content: center; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
  .c-side { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
  .c-dots { flex-basis: 100%; }
  .c-foot .desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --bar-h: 52px; --logo-h: 34px; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .c-foot .tags { display: none; }
  .c-foot .desc { -webkit-line-clamp: 3; }
}
/* ── twin sticks (touch, Play): placed by touch-sticks.js; at rest they wait in the bottom corners ── */
.stick { --r: 56px; position: fixed; z-index: 3; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px)); pointer-events: none; opacity: 0; visibility: hidden;
  border: 2px solid var(--c); background: rgba(4, 10, 28, .18); transition: opacity .3s, visibility 0s .3s; }
.stick-l { --c: rgba(119, 163, 255, .55); left: calc(40px + env(safe-area-inset-left, 0px)); }
.stick-r { --c: rgba(255, 122, 26, .6); right: calc(40px + env(safe-area-inset-right, 0px)); }
.stick-r::before { content: ""; position: absolute; inset: calc(var(--r) * .65 - 2px); border-radius: 50%; border: 1px dashed rgba(255, 122, 26, .45); } /* past this ring it fires */
.stick .knob { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * .84); height: calc(var(--r) * .84); margin: calc(var(--r) * -.42) 0 0 calc(var(--r) * -.42);
  border-radius: 50%; background: rgba(215, 228, 255, .18); }
.stick.held .knob { background: var(--c); }
.stick-r.firing .knob { background: var(--orange); }
body.play.sticks .stick { opacity: .5; visibility: visible; transition: opacity .3s .3s, visibility 0s; }
body.play.sticks .stick.held { opacity: .95; transition: none; }
@media (min-width: 600px) and (min-height: 600px) { .stick { --r: 68px; } }
/* each stick says what it does until a thumb first lands on one (the arcade sets .sticks-used) */
.stick::after { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; text-align: center;
  font: 700 11px/1.5 var(--mono); letter-spacing: .14em; transition: opacity .3s; }
.stick-l::after { content: "MOVE"; color: var(--blue-2); }
.stick-r::after { content: "AIM + FIRE"; color: var(--orange); }
body.sticks-used .stick::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .c-stage, .c-foot, .hud, .settings, .howto, .scrim { transition-duration: .01s !important; animation: none !important; }
  .c-foot.swap > * { animation: none !important; }
}