/* ==========================================================================
   FANWARD ARCADE : shared theme + shell
   One file skins the whole arcade. Change the tokens in :root to re-brand.

   LOOK: matched to the main Fanward site (home.fanward.com), not a standalone
   retro arcade. Bangers over Rajdhani, indigo-black with purple and violet,
   radial sunburst backdrop, skewed parallelogram buttons, 3px corners.
   Palette values below are lifted directly from the site's own :root block so
   the two surfaces stay in sync.

   Arcade character is carried by layout and motion (badges, cabinet tiles,
   INSERT COIN, the blink) rather than by 8-bit pastiche.

   HOUSE RULE: every class name below is used by the 15 games in games/.
   You can restyle any of them freely. Do not rename or delete them.
   ========================================================================== */

/* ---------- Fanward type (self-hosted, see fonts/LICENSE.md) ---------- */
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Straight from home.fanward.com ---- */
  --bg:       #080816;
  --bg2:      #0e0e26;
  --panel:    #12122e;
  --panel-2:  #1a1a3e;
  --line:     #2c2c63;
  --ink:      #f0f0ff;
  --muted:    #8b8ba8;

  --accent:   #9333ea; /* purple       : primary   */
  --accent-2: #818cf8; /* blue-light   : secondary */
  --pop:      #c084fc; /* purple-light : highlight */
  --blue:     #3730a3;
  --blue-mid: #4338ca;

  /* Score / win / lose. Not defined site-side, tuned to sit with the palette. */
  --gold:     #fbbf24;
  --good:     #4ade80;
  --bad:      #f87171;

  /* Play area interior. Sits a touch darker than --bg so the board reads as
     recessed inside its frame. Games reference this via FA.C.board. */
  --board:    #06060f;

  --radius:    3px;
  --radius-sm: 3px;
  --px:        1px;
  --shadow:    0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(147,51,234,.18);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.45);
  --glow:      0 0 24px rgba(147,51,234,.45);

  --font-display: "Bangers", "Rajdhani", system-ui, sans-serif;
  --font:         "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --mono:         ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

/* Base colour lives on html, not just body. body's background is
   attachment:fixed, which anchors it to the viewport, so on a page taller than
   one screen anything below the fold would otherwise fall through to white. */
html { background: var(--bg); }

body {
  background:
    /* the site's signature sunburst rays behind everything */
    repeating-conic-gradient(from 0deg at 50% 32%,
      rgba(147,51,234,.075) 0deg 3deg, transparent 3deg 9deg),
    radial-gradient(1000px 620px at 50% 6%, rgba(147,51,234,.22), transparent 62%),
    radial-gradient(900px 560px at 50% 100%, rgba(55,48,163,.24), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 58%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The halftone dot grain that used to sit over everything is gone: against
   the painted game art it read as a retro pixel filter rather than as print
   grain, which is exactly the look the arcade moved away from. */
/* Prevent scroll-bounce / pull-to-refresh while playing games */
/* A game page locks the viewport so a swipe steers instead of scrolling the
   document. It used to do that with overflow:hidden and touch-action:none on
   the body, which also meant that when a board DID overrun a short phone the
   content below it was simply unreachable: no scrollbar, no thumb-drag, no
   way to see the Play button. Vertical panning is allowed here and refused on
   the board itself, so dragging the play area still steers and dragging
   anywhere else can always reach the rest of the page. */
body.game { overflow-x: hidden; touch-action: pan-y; overscroll-behavior-y: contain;
            user-select: none; -webkit-user-select: none; }
body.game .board-wrap { touch-action: none; }
body.game .overlay { touch-action: none; }

a { color: inherit; text-decoration: none; }

/* Canvases scale SMOOTHLY. image-rendering: pixelated made sense when the
   games were flat vector shapes; with painted plates and drawn sprites it
   chunked every upscaled frame into retro pixels. Browser default bilinear is
   what the art wants. */
canvas { display: block; touch-action: none; }

/* ---------- Shared top bar ---------- */
.bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(8,8,22,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .brand {
  /* An h1, not a div. Every game page was shipping without a heading at all:
     the only h1 used to live on the start card, and removing those cards took
     it with them. The game's name is already here and visible, so it is the
     honest heading. margin is zeroed because h1 brings its own. */
  margin: 0;
  font-weight: inherit;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Chevron mark echoing the site's crest silhouette */
.bar .brand .logo {
  width: 20px; height: 22px;
  display: inline-block;
  background: linear-gradient(160deg, var(--pop), var(--accent) 45%, var(--blue));
  clip-path: polygon(50% 0%, 100% 30%, 100% 72%, 50% 100%, 0% 72%, 0% 30%);
  filter: drop-shadow(0 0 8px rgba(147,51,234,.7));
}
.bar .spacer { flex: 1; }

.pill {
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(147,51,234,.10);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.pill:hover { border-color: var(--accent); color: var(--pop); background: rgba(147,51,234,.18); }

/* Back chevron drawn in CSS so it never depends on a font having the glyph. */
.ico-back {
  width: 0; height: 0;
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid currentColor;
  margin-right: 9px;
  vertical-align: 0;
}

/* ---------- Buttons: the site's skewed parallelogram ----------
   The slant lives on a ::before plate rather than on the button itself.
   Skewing the element would skew its label too, and the 15 games put bare
   text inside .btn, so there is no inner element to counter-rotate. */
.btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: none;
  padding: 13px 28px;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--accent), var(--blue-mid));
  box-shadow: 0 6px 20px rgba(147,51,234,.42);
  transform: skewX(-12deg);
  transition: box-shadow .16s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:hover::before { box-shadow: 0 8px 26px rgba(147,51,234,.62); }
.btn:active { transform: translateY(2px); }
.btn.alt::before { background: linear-gradient(120deg, var(--blue-mid), var(--accent-2)); }
.btn.ghost { color: var(--ink); }
.btn.ghost::before {
  background: transparent;
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn.ghost:hover::before { background: rgba(147,51,234,.16); }

/* ---------- Generic game stage ---------- */
.stage {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 16px;
}
.hud {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 9px 18px;
  min-width: 96px;
  text-align: center;
}
.stat .k {
  font-family: var(--font);
  font-weight: 700;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.stat .v {
  font-family: var(--font-display);
  font-size: 26px; line-height: 1.1; color: var(--ink);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.stat .v.gold { color: var(--gold); text-shadow: 0 0 14px rgba(251,191,36,.5); }

.board-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--glow);
  background: #06060f;
}

/* ---------- Begin / Pause / End ---------- */
.gamectl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gbtn {
  font-family: var(--font); font-weight: 800;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; cursor: pointer; user-select: none;
  padding: 12px 22px; min-height: 44px; border: 0; border-radius: 10px;
  background: linear-gradient(120deg, var(--accent), #6d28d9);
  box-shadow: 0 6px 18px rgba(147,51,234,.38);
  transition: filter .15s ease, opacity .15s ease;
}
.gbtn:hover:not(:disabled) { filter: brightness(1.14); }
.gbtn:active:not(:disabled) { transform: translateY(1px); }
.gbtn.ghost {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.gbtn:disabled { opacity: .35; cursor: default; }
.gbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 560px) { .gbtn { padding: 11px 16px; font-size: 12px; } }

/* ---------- The rules panel, beside the board ----------
   Always on, never over the game. .stage keeps its own column layout
   untouched; this row simply sits it next to the panel. */
/* No row wrapper any more. The board keeps the whole width and stays centred;
   the panel is pinned to the right edge and costs the board nothing. */
/* Both side rails share everything but which half they sit in. */
.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 300px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0 0 16px;
}
/* Before JS measures the gap, park them in sensible corners rather than at 0. */
.rail-right { right: 20px; }
.rail-left  { left: 20px; }

.rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(147,51,234,.20), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
  position: sticky; top: 0; z-index: 1;
  backdrop-filter: blur(6px);
}
.rail-mark {
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
.rail-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: .05em; color: var(--ink);
  text-transform: uppercase;
}
.rail-body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.rail-body .goal { color: var(--ink); font-size: 14.5px; line-height: 1.55; margin: 0; }
.rail-body p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.rail-body .ctl {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); padding: 10px 12px;
  font-size: 13.5px; color: var(--ink); line-height: 1.7;
}
.rail-body .ctl b { color: var(--accent); font-weight: 800; }
.rail-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.rail-body li { color: var(--muted); font-size: 13.5px; line-height: 1.5; padding-left: 15px; position: relative; }
.rail-body li::before { content: "•"; color: var(--accent); position: absolute; left: 0; }

/* the "?" pill flashes the panel rather than opening a copy of it */
.rail.flash { animation: railflash .9s ease; }
@keyframes railflash {
  0%, 100% { box-shadow: var(--shadow-sm); border-color: var(--line); }
  30%      { box-shadow: 0 0 0 3px rgba(147,51,234,.55); border-color: var(--accent); }
}

/* Character and option pickers, in the left rail. */
.rail-body .pickrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rail-body .pick {
  flex: 1 1 110px; max-width: 130px;
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--panel-2); padding: 8px 6px 7px;
  cursor: pointer; text-align: center; color: var(--muted);
  font-family: var(--font); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.rail-body .pick img { width: 100%; border-radius: 8px; display: block; margin-bottom: 6px; }
.rail-body .pick:hover { transform: translateY(-2px); }
.rail-body .pick.on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 2px rgba(147,51,234,.25); }

/* No side columns to have on a narrow screen, so both rails drop back into the
   page under the board. That is the scroll. */
@media (max-width: 1000px) {
  .rail {
    position: static; transform: none;
    width: auto; max-width: 520px; max-height: none;
    margin: 4px auto 0;
  }
  .rail-right { margin-bottom: 22px; }
}

/* ---------- How to Play ----------
   Device-aware instructions. A phone user being told to press SPACE learns
   nothing, and a desktop user being told to swipe learns less, so each game
   writes both and the device picks. Anything marked .kb-only disappears where
   the pointer is coarse; .touch-only disappears where it is fine. */
/* The help pill reads "? How" where there is room and just "?" where there is
   not. It cost thirty pixels of bar, which put twelve of fifteen game titles
   back into an ellipsis the moment it was added. */
.wide-only { display: none; }
@media (min-width: 561px) { .wide-only { display: inline; } }

.touch-only { display: none; }
@media (hover: none), (pointer: coarse) {
  .kb-only { display: none !important; }
  .touch-only { display: revert; }
}

.helpback {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(4,4,12,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .16s ease;
}
.helpback.hidden { opacity: 0; pointer-events: none; }
.helpcard {
  max-width: 460px; width: 100%; max-height: 86vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow), var(--glow);
  padding: 24px 22px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.helpcard h2 {
  font-family: var(--font-display); font-size: 26px; letter-spacing: .04em;
  color: var(--ink); margin: 0;
}
.helpcard p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 40ch; }
.helpcard .goal { color: var(--ink); font-size: 16px; }
.helpcard .ctl {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); padding: 12px 14px;
  font-size: 14px; color: var(--ink); line-height: 1.8;
}
.helpcard .ctl b { color: var(--accent); font-weight: 800; }
.helpcard ul { margin: 0; padding: 0; list-style: none; }
.helpcard li { color: var(--muted); font-size: 14px; line-height: 1.65; }
.helpcard li::before { content: "•"; color: var(--accent); margin-right: 8px; }
@media (max-width: 560px) {
  .helpcard { padding: 20px 16px 22px; gap: 11px; }
  .helpcard h2 { font-size: 23px; }
  .helpcard p, .helpcard .ctl, .helpcard li { font-size: 13.5px; }
}

/* ---------- On-screen controls (FA.controls / FA.dpad) ----------
   Lifted out of MEGAFORM, which had this markup privately, so every game that
   needs buttons on a phone looks like the same machine. */
.controls {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; width: 100%; max-width: 360px; margin-top: 2px;
}
.cbtn {
  height: 56px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink);
  font-size: 22px; font-weight: 800; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.cbtn:active, .cbtn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .cbtn { height: 52px; font-size: 20px; } }

/* ---------- Overlay (start / game over / pause) ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 26px;
  background: rgba(8,8,22,.90);
  backdrop-filter: blur(3px);
  z-index: 10;
  transition: opacity .2s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 54px);
  line-height: 1.05;
  letter-spacing: .03em;
  background: linear-gradient(180deg, #fff 20%, var(--pop) 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.55));
}
.overlay h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.1; letter-spacing: .03em;
  color: var(--pop);
}
.overlay p { color: var(--muted); max-width: 36ch; line-height: 1.6; font-size: 16px; }
.overlay .big {
  font-family: var(--font-display);
  font-size: clamp(46px, 13vw, 84px);
  color: var(--gold);
  line-height: 1;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(251,191,36,.5);
}
.overlay .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.kbd {
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  padding: 4px 9px;
  border-radius: var(--radius);
  color: var(--ink);
  text-transform: uppercase;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(14px);
  background: var(--panel-2);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow), var(--glow);
  color: var(--ink);
  padding: 13px 22px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hint { color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }

/* ---------- Motion ---------- */
@keyframes pop   { 0% { transform: scale(.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,2px)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-4px,3px)} 80%{transform:translate(3px,-2px)} }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }
.shake { animation: shake .32s ease; }
.blink { animation: blink 1.4s ease-in-out infinite; }

/* PHONE TOP BAR. On a 390px screen every game's bar overflowed by 29 to 80
   pixels and pushed the sound pill clean off the right edge, so on the device
   most people play this on there was no way to mute anything.

   The controls keep their full size and the title gives way instead, but by
   SHRINKING rather than by being hidden: a flat rule that hides it takes the
   wordmark off the launcher too, where there is plenty of room for it. */
/* ---------- Phones ----------
   On a phone the start and game-over overlays stop being a lid on the board
   and become a proper modal. They have to: the board only gets whatever the
   bar and HUD leave it, which on a 664px screen is about 320px, and three
   games carry more explanation than that. MEGAFORM's start screen alone is
   1024px of rules. Pinned inside the board it overflowed a container that
   clips, which did not merely look wrong: the Play button stopped being
   hit-testable, so the game read as broken rather than as cramped.

   Held below the top bar so the Arcade link stays reachable, scrollable so
   nothing can ever be out of reach again, and "safe center" so overflowing
   content is pinned to the top and scrolls down instead of being centred
   with its first line cut off above the scroll origin. */
@media (max-width: 560px) {
  body.game .overlay {
    position: fixed;
    inset: 46px 0 0 0;
    border-radius: 0;
    padding: 20px 18px 30px;
    gap: 11px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    justify-content: safe center;
    background: rgba(8,8,22,.965);
  }
  body.game .overlay h1 { font-size: 27px; }
  body.game .overlay h2 { font-size: 23px; }
  body.game .overlay p { font-size: 13.5px; line-height: 1.5; max-width: 34ch; }
  body.game .overlay .big { font-size: 42px; }
  body.game .overlay .row { gap: 10px; }

  /* Phone chrome, tightened. A stat card sized for a desktop row is
     96px wide with 18px of side padding, and DOOR COUNT carries four of
     them: on a 375px screen the fourth wrapped to a second line, the HUD
     cost 139px instead of 64, and the page overran the viewport by 23px it
     had no way to scroll. Everything reclaimed here goes straight into the
     board, because boardH now measures this chrome rather than guessing it. */
  .stage { padding: 12px; gap: 12px; }
  .hud { gap: 8px; }
  .stat { padding: 7px 10px; min-width: 0; flex: 1 1 auto; max-width: 140px; }
  .stat .k { font-size: 9px; letter-spacing: .14em; }
  .stat .v { font-size: 21px; margin-top: 2px; }
  .hint { font-size: 12px; }

  .bar { gap: 8px; padding: 10px 12px; }
  .bar .brand {
    font-size: 18px; gap: 8px;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .bar .brand .logo { flex: 0 0 auto; }
  .pill { font-size: 11px; letter-spacing: .10em; padding: 9px 11px; flex: 0 0 auto; }
}
@media (max-width: 430px) {
  /* Eight of fifteen game titles were being cut off in the bar, because the
     two pills took the width and left the brand 104px. The pills are the
     secondary thing on the bar, so they give the space back. */
  .bar .brand { font-size: 15px; }
  /* one title is simply longer than the others and needs a size of its own */
  .bar .brand.long { font-size: 13px; letter-spacing: .01em; }
  .bar .brand .logo { width: 16px; height: 18px; }
  .bar > .pill { font-size: 10px; letter-spacing: .06em; padding: 8px 9px; }

  /* the back pill's word is redundant sitting next to its own chevron */
  .bar > a.pill { font-size: 0; letter-spacing: 0; padding: 9px 12px; }
  .bar > a.pill .ico-back {
    margin-right: 0;
    border-right-width: 8px; border-top-width: 6px; border-bottom-width: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .shake { animation: none; }
}

/* ---------- Three columns: scores | board | buttons ----------
   Whenever the screen is short for the board it holds, the page becomes:

       [ scores ]   [ THE BOARD ]   [ buttons, status, pad ]

   one screen tall, so all the height goes to the board. The board spans every
   row of the middle column. The right column fills from row 2 down: ::before
   holds row 1 so the stack sits centred between the two 1fr rows rather than
   at the top.

   Two cases turn it on, and arcade.js decides both and sets .sidecols:
     - a phone held sideways (FA.LAND_Q), where the old column stacked Play
       off the bottom of the screen in 14 of 15 games;
     - a TALL board on a short wide screen (a 1366x768 laptop, an iPad held
       sideways), where MEGAFORM's 1:2 well was coming out 210x420 in a screen
       with room for 660.
   The phone-sized type and spacing below stay in the media query, because a
   laptop has the room for the full-size scores and buttons. */
.upright { display: none; }
body.game.sidecols .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr repeat(6, auto) 1fr;
  column-gap: 18px; row-gap: 0;
  align-items: center; justify-items: center;
  padding: 10px 16px;
  min-height: calc(100vh - var(--barh, 52px));
  min-height: calc(100svh - var(--barh, 52px));
}
/* Rails still pinned beside a three-column game: keep the columns clear of
   them (arcade.js measures the rail and writes --railpad). */
body.game.sidecols.railskept .stage {
  padding-left: var(--railpad, 16px); padding-right: var(--railpad, 16px);
}
body.game.sidecols .stage::before { content: ""; grid-column: 3; grid-row: 1; }
body.game.sidecols .stage > * { grid-column: 3; margin: 4px 0; }
/* The board spans the whole middle column, pinned to the top rather than
   centred: on the smallest phones a busy right column (Slide) makes the stage
   taller than the screen, and a centred board would slide down with it. The
   board fills the height anyway, so the two look the same everywhere else. */
body.game.sidecols .stage > .board-wrap {
  grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: start;
}
body.game.sidecols .stage > .hud {
  grid-column: 1; grid-row: 1 / -1; margin: 0;
  flex-direction: column; flex-wrap: nowrap; gap: 8px;
}
body.game.sidecols .gamectl { max-width: 230px; }
body.game.sidecols .hint { max-width: 26ch; }
/* Under 1200px a pinned rail would land on the side columns, so it drops into
   the page under the board, the same fallback as a narrow screen. */
body.railsdown .rail {
  position: static; transform: none;
  width: auto; max-width: 520px; max-height: none;
  margin: 4px auto 0;
}
body.railsdown .rail-right { margin-bottom: 22px; }

@media (orientation: landscape) and (max-height: 560px) {
  .bar { padding: 5px 12px; gap: 8px; }
  .bar .brand {
    font-size: 19px; gap: 8px; flex: 0 1 auto; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .bar .brand .logo { flex: 0 0 auto; width: 16px; height: 18px; }
  .pill { font-size: 11px; letter-spacing: .1em; padding: 0 12px; min-height: 40px; flex: 0 0 auto; }

  body.game.sidecols .stage { column-gap: 16px; padding: 8px 14px; }
  body.game.sidecols .stage > .hud { gap: 6px; }
  body.game .stat { padding: 5px 12px; min-width: 96px; max-width: none; }
  body.game .stat .k { font-size: 10px; letter-spacing: .16em; }
  body.game .stat .v { font-size: 19px; margin-top: 1px; }

  .gamectl { gap: 8px; }
  body.game.sidecols .gamectl { max-width: 220px; }
  .gbtn { padding: 8px 14px; min-height: 40px; font-size: 12px; }
  .controls { gap: 5px; max-width: 100%; }
  .cbtn { height: 46px; font-size: 18px; }
  .controls.dpad {
    grid-auto-flow: row; grid-template-columns: repeat(3, 48px);
    grid-template-areas: ". u ." "l d r"; width: auto;
  }
  .controls.dpad > :nth-child(1) { grid-area: l; }
  .controls.dpad > :nth-child(2) { grid-area: u; }
  .controls.dpad > :nth-child(3) { grid-area: d; }
  .controls.dpad > :nth-child(4) { grid-area: r; }
  .hint { font-size: 12px; line-height: 1.45; }
  body.game.sidecols .hint { max-width: 24ch; }
  .rail { margin-top: 14px; }

  /* The "Play upright" offer, only where it helps: a tall board, a finger. */
  body.tallboard .upright { display: none; }
  @media (pointer: coarse) {
    body.tallboard .upright {
      display: block; margin-top: 4px;
      font-family: var(--font); font-weight: 800; font-size: 11px;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink); background: rgba(147,51,234,.14);
      border: 1px dashed var(--accent); border-radius: 10px;
      min-height: 40px; padding: 8px 12px; cursor: pointer;
    }
  }
}

/* ---------- Finger-sized targets ----------
   Keyed to the pointer, not the width. An iPad is 768-1366 wide, so every
   width rule gave it desktop pills 35px tall, and on a phone the "?" help pill
   was 25x30. 40px is the floor where a thumb stops missing; tablets have the
   room for the full 44. In-game pills (BANSHEE's Ward, the pirates' Hard/Easy)
   are .pill too, so they come along. */
@media (pointer: coarse) {
  .pill { min-height: 40px; min-width: 40px; justify-content: center; }
}
@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .pill { min-height: 44px; min-width: 44px; }
}