/* arcade.css — v2 arcade screens: title/attract, quiz, HUD, the canvas fight
   stage, boards, splashes, results, how-to. Ported from v1 style.css (same
   palette/fonts/glow); the DOM-sprite arena rules are gone — fights render on
   the .fight-stage canvas now. base.css owns the shell/cabinet/shared bits. */

/* ── title / attract screen ─────────────────────────────────────────────── */
.title-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(min(900px, 100vh - 120px) - 96px);   /* fill the screen so the menu centers vertically */
  gap:clamp(10px,2vh,20px);
}
/* the boxer penguin */
.tux {
  width:clamp(100px,20vw,150px); height:auto;
  filter:drop-shadow(0 0 14px rgba(52,214,230,.45)) drop-shadow(0 6px 6px rgba(0,0,0,.5));
}
/* fighting bob. The penguin is centre-anchored with translate(-50%,-50%) (see
   .title-hero .tux), so the keyframes MUST carry that base translate or the bob
   flings it out of the logo. Reduced-motion falls back to the static transform. */
@keyframes tuxbob {
  0%,100% { transform:translate(-50%,-50%) translateY(0)    rotate(-2deg); }
  50%     { transform:translate(-50%,-50%) translateY(-8px) rotate(2deg); }
}
body.fx-reduced .title-hero .tux { animation:none; }

/* logo + boxer penguin as ONE mark: the penguin tucks into the top-right notch
   of the wordmark (right of DISTRO's end, above FIGHTER) with a strong negative
   margin so it overlaps the letters and reads as part of the logo, not a
   separate floating penguin. */
/* the fighter EMERGES from the wordmark (Street-Fighter-style lockup): the penguin
   overlaps the right end of the letters and stands in front (z-index). It overlaps
   more than it sticks out, but still sticks out — so the flex box wraps the true
   visual extent (wordmark + overhang) and the WHOLE lockup auto-centres as one unit.
   Requires the trimmed wordmark box above. */
/* three-layer depth lockup: DISTRO (back) → penguin (middle) → FIGHTER (front). The
   penguin tucks BEHIND FIGHTER's letters but sits IN FRONT of DISTRO, so it reads as
   emerging from between the two words. isolation:isolate scopes these z-indexes to the
   hero (flex items with z-index:auto don't trap their descendants, so the two <pre>s
   and the penguin all stack in this one context). */
.title-hero { display:flex; align-items:center; justify-content:center; position:relative; isolation:isolate; }
/* penguin sits in the MIDDLE of the logo (over FIGHTER's H / DISTRO's S–T), absolutely
   positioned so the wordmark alone centres and the penguin overlays its centre. Raised
   into the DISTRO row so the gloves clear FIGHTER; the feet dip behind FIGHTER's H
   (front layer, z-index 3 > penguin's 2). left/top place its CENTRE. */
.title-hero .tux { position:absolute; z-index:2; margin:0; left:51%; top:42%; transform:translate(-50%,-50%); animation:tuxbob 1.8s ease-in-out infinite; }
.title-art .art-distro  { position:relative; z-index:1; }   /* back layer */
.title-art .art-fighter { position:relative; z-index:3; }   /* front layer, over the penguin */
/* width:fit-content makes .title-art shrink-wrap to the widest line (FIGHTER); the
   block <pre>s (was inline-block, which left phantom width) centre the shorter DISTRO
   inside it. Without this the box ran ~170px past the glyphs and the penguin floated
   in dead space instead of nesting into the letters. */
.title-art { text-align:center; width:fit-content; }
.title-art .art {
  font-family:var(--pixel); padding:0;   /* Press Start 2P — matches the OG wordmark */
  display:block; line-height:1; letter-spacing:1px;
  font-size:clamp(30px,9.5vw,66px);
}
.art-distro  { color:var(--blu); text-shadow:0 0 7px rgba(90,140,255,.95),0 0 16px rgba(90,140,255,.55); }
.art-fighter { color:var(--red); margin-top:.2em;
  text-shadow:0 0 7px rgba(255,77,86,.95),0 0 16px rgba(255,77,86,.55); }

.tag {
  color:var(--ylw); font-family:var(--pixel); font-size:clamp(11px,2.1vw,15px);
  letter-spacing:1px; text-shadow:0 0 10px rgba(255,210,63,.6); margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.tag .tag-sm { display:none; }   /* desktop shows the full tagline; mobile swaps to the short one (below) */
/* press testimonials — the YouTube (Brodie Robertson) and It's FOSS features sit
   side by side between the campaign buttons and the pinned copyright; each card
   links to its source. On narrow screens the row wraps and they stack. */
.features {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:16px; max-width:min(920px,94%); margin:22px auto 27px;
}
.feature {
  flex:1 1 340px; max-width:440px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:15px 20px 16px;
  text-align:center; text-decoration:none; cursor:pointer;
  border:1px solid #2a3340; border-radius:9px; background:rgba(11,17,27,.55);
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.feature:hover, .feature:focus-visible {
  border-color:var(--red); background:rgba(19,26,37,.72); transform:translateY(-2px);
  box-shadow:0 0 22px rgba(255,77,86,.18); outline:none;
}
.feature-eyebrow { font-family:var(--pixel); font-size:9px; letter-spacing:2px; color:var(--mag); }
.feature-quote {
  font-family:var(--mono); font-size:clamp(18px,2.6vw,22px); line-height:1.35; color:#e6edf7;
  font-style:italic; max-width:46ch; text-wrap:balance;
}
.feature-by {
  font-family:var(--pixel); font-size:10px; letter-spacing:1px; color:var(--dim);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;
}
.feature:hover .feature-by, .feature:focus-visible .feature-by { color:#f2f4f6; }
.yt-play { color:#fff; background:#ff3b3b; border-radius:3px; padding:2px 6px; font-size:9px; line-height:1; }
.ig-mark { color:#fff; background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7); border-radius:4px; padding:2px 6px; font-size:9px; line-height:1; }

/* retro copyright footer (Nintendo-style: white + prominent), pinned to the bottom */
.copyright {
  position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-family:var(--pixel); font-size:13px; color:#f2f4f6; line-height:2.2; letter-spacing:1px;
}
/* small, unobtrusive Changelog link under the copyright (regular link colour, not the
   yellow feedback highlight). Opens the public what's-new page. */
.copyright .cl-link { font-family:var(--mono); font-size:11px; letter-spacing:0; line-height:1.5; margin-top:3px; }
.copyright .cl-link a { color:var(--cyan); text-decoration:none; opacity:.72; }
.copyright .cl-link a:hover, .copyright .cl-link a:focus-visible { opacity:1; text-decoration:underline; }

/* ── CHANGELOG page (rendered inside .howto) ────────────────────────────── */
.howto .cl-log { margin:4px 0 0; }
.howto .cl-e { display:grid; grid-template-columns:66px 1fr; gap:4px 18px;
  padding:15px 0; border-top:1px solid #1d2836; }
.howto .cl-e:first-child { border-top:none; }
.howto .cl-date { font-family:var(--pixel); font-size:10px; color:var(--dim);
  letter-spacing:1px; padding-top:4px; white-space:nowrap; }
.howto .cl-title { font-size:17px; color:#eaf0f4; font-weight:bold; line-height:1.4; }
.howto .cl-tag { font-family:var(--pixel); font-size:8px; letter-spacing:1px;
  padding:2px 6px; border-radius:4px; margin-left:9px; vertical-align:middle; white-space:nowrap; }
.howto .cl-tag.arcade { color:var(--cyan); background:rgba(52,214,230,.13); }
.howto .cl-tag.campaign { color:var(--red); background:rgba(255,77,86,.13); }
.howto .cl-tag.site { color:var(--dim); background:rgba(135,150,171,.14); }
.howto .cl-body { font-size:16px; color:var(--ink); margin-top:3px; }
@media(max-width:600px){
  .howto .cl-e { grid-template-columns:1fr; gap:3px; padding:13px 0; }
  .howto .cl-date { padding-top:0; }
}

/* the Start button is the only flashing element on the splash */
button.df.start-pulse { animation:startpulse 1.25s ease-in-out infinite; }
@keyframes startpulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,210,63,0), 0 4px 0 #b8930a inset; transform:translateY(0); }
  50%     { box-shadow:0 0 24px 5px rgba(255,210,63,.6); }
}
body.fx-reduced button.df.start-pulse{ animation:none }

/* short interstitials (ADVANCES, CHAMPION) — HUD pinned at top, the rest centered */
.screen { display:flex; flex-direction:column;
  min-height:calc(min(900px, 100vh - 120px) - 96px); }
.screen-body { flex:1 1 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; }

/* Kung-Fu-style round splash — centered in the full screen (no HUD on this one) */
.round-splash {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(min(900px, 100vh - 120px) - 96px); gap:26px; text-align:center;
  overflow:hidden;   /* the FIGHT! zoom (scale 2.3) must not push a transient horizontal scrollbar on mobile */
}
.rs-round { font-family:var(--pixel); color:var(--ylw); font-size:clamp(26px,7vw,52px);
  letter-spacing:4px; text-shadow:0 0 18px var(--ylw); min-height:1.2em; }
.rs-fight { font-family:var(--pixel); color:var(--red); font-size:clamp(40px,12vw,88px);
  letter-spacing:3px; text-shadow:0 0 26px var(--red); opacity:0; }
.rs-fight.show { animation:fightin .45s ease-out forwards; }
@keyframes fightin { 0%{ transform:scale(2.3); opacity:0; } 60%{ opacity:1; } 100%{ transform:scale(1); opacity:1; } }
body.fx-reduced .rs-fight.show{ animation:none; opacity:1; }
/* the FINAL gets a bigger, gold, extra-glowy treatment */
.round-splash.final .rs-round { color:#ffe27a; font-size:clamp(34px,9vw,64px);
  text-shadow:0 0 26px var(--ylw), 0 0 60px rgba(255,210,63,.5); }
.round-splash.final .rs-fight { color:#ffd23f; text-shadow:0 0 32px var(--ylw); }
.rs-sub { font-family:var(--pixel); color:var(--ylw); font-size:clamp(12px,2.4vw,18px);
  letter-spacing:2px; text-shadow:0 0 14px rgba(255,210,63,.6); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px; }
.btns.big { gap:16px; margin-top:10px; }
.btns.big button.df { font-size:15px; padding:18px 26px; }
.df {
  font-family:var(--pixel); font-size:11px; cursor:pointer;
  color:var(--bg); background:var(--ylw);
  border:none; border-bottom:4px solid #b8930a;
  padding:14px 18px; border-radius:5px;
  transition:transform .05s, filter .1s;
  text-transform:uppercase; letter-spacing:1px;
}
.df:hover { filter:brightness(1.1); }
.df:active { transform:translateY(3px); border-bottom-width:1px; }
.df.ghost { background:transparent; color:var(--cyan); border:2px solid var(--cyan); border-bottom:2px solid var(--cyan); }
.df.ghost:hover { background:rgba(52,214,230,.12); }
.df.ghost.muted { color:var(--dim); border-color:var(--dim); }
.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
a.df.stats-btn, button.df.stats-btn {
  display:inline-block; text-decoration:none; font-family:var(--pixel);
  font-size:14px; color:var(--bg); background:var(--cyan);
  border:none; border-bottom:4px solid #1b8c99; padding:16px 28px; border-radius:5px;
  margin-top:6px; letter-spacing:1px; text-transform:uppercase;
  box-shadow:0 0 20px rgba(52,214,230,.5); transition:transform .05s, filter .1s;
}
a.df.stats-btn:hover, button.df.stats-btn:hover { filter:brightness(1.12); }
a.df.stats-btn:active, button.df.stats-btn:active { transform:translateY(3px); border-bottom-width:1px; }
/* homepage buttons: heavier glyph weight (fake bold with a 1px same-color shadow) */
.title-screen .df { text-shadow:1px 0 0 currentColor; }
.title-screen .df .qm { font-weight:bold; }

/* title-screen campaign entry */
.cta-divider { width:min(420px,80%); border:0; border-top:1px solid #2a3340; margin:18px auto 6px; }
.campaign-row { align-items:center; }
button.df.campaign-btn {
  font-family:var(--pixel); font-size:17px; color:var(--bg); background:var(--ylw);
  border:none; border-bottom:5px solid #b8930a; padding:18px 40px; border-radius:6px;
  letter-spacing:1px; text-transform:uppercase; margin-top:6px;
  box-shadow:0 0 22px rgba(255,210,63,.5); transition:transform .05s, filter .1s;
}
button.df.campaign-btn:hover { filter:brightness(1.1); }
button.df.campaign-btn:active { transform:translateY(3px); border-bottom-width:2px; }
button.df.campaign-resume-btn { background:transparent; color:var(--ylw); border:3px solid var(--ylw); border-bottom:5px solid #b8930a; box-shadow:none; }
button.df.campaign-resume-btn:hover { background:rgba(255,210,63,.12); filter:none; }
a.df.campaign-stats-btn, button.df.campaign-guide-btn {
  background:var(--blu); color:var(--bg); border-bottom-color:#2f55c9;
  box-shadow:0 0 18px rgba(90,140,255,.45);
}
a.df.campaign-stats-btn:hover, button.df.campaign-guide-btn:hover { background:var(--blu); filter:brightness(1.12); }

/* in-screen corners: sound toggle (top-right) + home (top-left) */
.snd-corner {
  position:absolute; top:14px; right:16px; z-index:5; cursor:pointer;
  font-size:18px; line-height:1; background:#0b1420;
  border:2px solid var(--cyan); border-radius:6px; padding:6px 8px;
  box-shadow:0 0 10px rgba(52,214,230,.3);
}
.snd-corner.off { border-color:var(--dim); box-shadow:none; filter:grayscale(1) opacity(.6); }
.home-corner {
  position:absolute; top:14px; left:16px; z-index:5; cursor:pointer;
  font-family:var(--pixel); font-size:11px; line-height:1; background:#0b1420; color:var(--cyan);
  border:2px solid var(--cyan); border-radius:6px; padding:7px 9px;
  box-shadow:0 0 10px rgba(52,214,230,.3); letter-spacing:1px;
}
.home-corner:hover { background:rgba(52,214,230,.12); }
/* CRT mode toggle (df/crt/crt.js) — sits just left of the sound corner */
.crt-corner {
  position:absolute; top:14px; right:64px; z-index:5; cursor:pointer;
  font-family:var(--pixel); font-size:10px; line-height:1; background:#0b1420; color:var(--cyan);
  border:2px solid var(--cyan); border-radius:6px; padding:9px 8px;
  box-shadow:0 0 10px rgba(52,214,230,.3); letter-spacing:1px;
}
.crt-corner:hover { background:rgba(52,214,230,.12); }
.crt-corner.off { border-color:var(--dim); color:var(--dim); box-shadow:none; }

/* ── question card ──────────────────────────────────────────────────────── */
.q-note { color:#7e8c99; font-size:13px; margin-bottom:20px; letter-spacing:.5px; }
.q-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.q-count { font-family:var(--pixel); color:var(--cyan); font-size:12px; letter-spacing:1px;
  text-shadow:0 0 8px rgba(52,214,230,.4); }
.dots { letter-spacing:6px; font-size:24px; line-height:1; }
.dot-on{color:var(--grn)} .dot-off{color:var(--dim)}
.q-title { font-family:var(--pixel); font-size:clamp(12px,2.2vw,16px); color:#fff; margin:0 0 14px; line-height:1.6; }
.options { display:flex; flex-direction:column; gap:11px; margin-top:8px; }
.opt {
  text-align:left; display:flex; gap:13px; align-items:center;
  font-family:var(--mono);
  background:#0c1622; border:2px solid #1e2c3a; color:var(--ink);
  padding:16px 18px; border-radius:6px; cursor:pointer; font-size:26px;
  transition:border-color .1s, background .1s, transform .05s;
}
.opt:hover { border-color:var(--cyan); background:#0e1c2c; }
.opt:focus { outline:none; border-color:var(--ylw); background:#0e1c2c; box-shadow:0 0 0 2px rgba(255,210,63,.35); }
.opt:active { transform:scale(.99); }
.opt.selected { border-color:var(--grn); background:#14331d;
  box-shadow:0 0 0 2px rgba(70,211,106,.6), 0 0 22px rgba(70,211,106,.45);
  animation:optpick .32s ease-out; }
.opt.selected .num { border-color:var(--grn); color:var(--grn); }
@keyframes optpick { 0%{transform:scale(1)} 30%{transform:scale(1.035)} 60%{transform:scale(.995)} 100%{transform:scale(1)} }
.opt .num {
  font-family:var(--pixel); font-size:11px; color:var(--cyan);
  border:2px solid var(--cyan); border-radius:4px; padding:5px 7px; min-width:30px; text-align:center;
}
.q-hint { position:absolute; left:0; right:0; bottom:18px; font-size:16px; text-align:center; color:#7d8b99; }
/* "🤔 Not sure?" expandable explainer under the options (jargon-heavy questions) */
.q-help { margin:14px 0 56px; border:1px solid #2a3340; border-radius:8px; background:rgba(11,17,27,.5); text-align:left; }
.q-help summary { cursor:pointer; padding:11px 16px; color:var(--cyan); font-family:var(--mono); font-size:19px; letter-spacing:.5px; list-style:none; user-select:none; }
.q-help summary::-webkit-details-marker { display:none; }
.q-help .qh-icon { font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.q-help summary:hover, .q-help summary:focus-visible { color:#7fe6f2; outline:none; }
.q-help[open] summary { border-bottom:1px solid #2a3340; }
.q-help-body { padding:13px 16px 15px; color:var(--ink); font-family:var(--mono); font-size:19px; line-height:1.55; }
.q-help-body b { color:var(--ylw); font-weight:bold; }

/* round-2 offer — a prominent "complete your setup" call-to-action (was easy to skip past) */
.r2-offer { margin:6px auto 0; padding:18px 22px;
  border:1px solid var(--cyan); border-radius:10px; background:rgba(52,214,230,.06);
  box-shadow:0 0 24px rgba(52,214,230,.12); }
.r2-cta { font-size:clamp(13px,2vw,15px); line-height:1.55; text-shadow:0 0 10px rgba(255,210,63,.4); text-wrap:balance; }
.r2-why { margin-top:9px; font-family:var(--mono); font-size:17px; line-height:1.5; text-wrap:pretty; }
.r2-why em { color:var(--ink); font-style:italic; }

/* campaign CTA on the results — the Rot-hunt challenge, red-tinted to match the campaign.
   Near full-width, like the why-box / top-matches above it (text stays readable inside). */
.campaign-cta { margin:22px auto 0; padding:18px 22px;
  border:1px solid var(--red); border-radius:10px; background:rgba(255,77,86,.06); box-shadow:0 0 24px rgba(255,77,86,.12); }
.cc-title { font-size:clamp(14px,2.1vw,17px); line-height:1.5; text-shadow:0 0 10px rgba(255,210,63,.4); text-wrap:balance; }
.cc-why { font-family:var(--mono); font-size:17px; line-height:1.5; margin-top:9px; text-wrap:pretty; }
.cc-why b { color:var(--ylw); font-weight:bold; }

/* ── HUD strip ──────────────────────────────────────────────────────────── */
.hud {
  border:2px solid var(--cyan); border-radius:6px; padding:8px 12px; margin:0 0 14px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--pixel); font-size:13px; background:#0b1420;
}
.hud .gt { color:var(--ylw); flex:1 1 auto; min-width:0; }
.hud .st { color:var(--mag); font-size:12px; text-align:right; }
/* HOME + sound are seated INSIDE the bar by mountScreen — flow as flex items */
.hud .home-corner, .hud .snd-corner, .hud .crt-corner { position:static; top:auto; left:auto; right:auto; flex:0 0 auto; box-shadow:none; }

/* ── arena HUD (names + HP, DOM above the canvas) ───────────────────────── */
.arena { padding:8px 0 4px; margin-top:16px; }
.fighters { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.fighter { width:42%; }
/* P1/P2 plates take each fighter's identity color via --pcol (set inline by
   fight.js, readability-guarded); green/blue remain the fallbacks */
.fighter .pill { font-family:var(--pixel); font-size:14px; padding:4px 9px; border-radius:3px; color:#04121a; }
.p1 .pill{ background:var(--pcol, var(--grn));} .p2 .pill{ background:var(--pcol, var(--blu));}
.fighter .name { font-family:var(--pixel); font-size:clamp(14px,3.2vw,22px); margin:0; }
/* P1/P2 pill sits ON THE SAME LINE as the fighter name (owner) — mirrored on P2.
   On mobile the row is too narrow for pill+name, so they stack (owner). */
.idrow { display:flex; align-items:center; gap:10px; margin:10px 0 12px; }
.p2 .idrow { flex-direction:row-reverse; }
@media (max-width: 600px) {
  .tag .tag-lg { display:none; }         /* mobile: short tagline */
  .tag .tag-sm { display:inline; }
  .idrow { flex-direction:column; align-items:flex-start; gap:6px; margin:8px 0 10px; }
  .p2 .idrow { flex-direction:column; align-items:flex-end; }
}
.p1 .name{color:var(--pcol, var(--grn))} .p2 .name{color:var(--pcol, var(--blu)); text-align:right}
.p2 { text-align:right; }
.vs { font-family:var(--pixel); color:var(--ylw); font-size:24px; align-self:center; padding-bottom:22px; }
.hpbar { height:26px; border:2px solid #243240; border-radius:3px; background:#0a0f16; overflow:hidden; display:flex; }
.p2 .hpbar { flex-direction:row-reverse; }
.hpfill { height:100%; transition:width .25s ease; }
body.fx-reduced .hpfill{ transition:none }
.hpnum { font-family:var(--pixel); font-size:24px; margin-top:10px; display:flex; align-items:baseline; gap:12px; }
.p1 .hpnum{ color:var(--ink); justify-content:flex-start; }   /* neutral: the accents live on the pill + name */
/* row-reverse flips the main axis: flex-START pins content to the RIGHT edge
   (flex-end here was a v2 port bug — P2's HP sat at the left of its column) */
.p2 .hpnum{ color:var(--ink); justify-content:flex-start; flex-direction:row-reverse; }
/* floating "−N" damage number, by the HP of whoever just took the hit */
.dmgpop { font-family:var(--pixel); color:var(--red); font-size:20px; opacity:0; text-shadow:0 0 8px rgba(255,77,86,.7); }
.dmgpop.show { animation:dmgpop .55s ease-out forwards; }
@keyframes dmgpop {
  0%   { transform:translateY(-8px) scale(1.5); opacity:0; }
  25%  { opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
body.fx-reduced .dmgpop.show{ animation:none; opacity:1 }

/* ── the canvas fight stage ─────────────────────────────────────────────── */
/* NOTE: no border-radius/overflow:hidden. A rounded clip forces Chrome to composite
   this box as its own GPU layer and SAMPLE it, which re-blurs the pixel art inside —
   square box = the canvas paints straight to the compositor, crisp. */
/* overflow:hidden — stage.js may size the canvas a couple px wider than the
   box (nearest-integer pixel scale, centered crop; kills grain/shimmer) */
.fight-stage { position:relative; margin-top:18px; border:3px solid #11202e;
  box-shadow:inset 0 0 0 2px #0a131c, 0 5px 16px rgba(0,0,0,.45); background:#0c3a22;
  line-height:0; overflow:hidden; }
.fight-canvas { display:block; image-rendering:pixelated; }

/* ── action log (DOM below the canvas) ──────────────────────────────────── */
.action { min-height:66px; margin-top:24px; font-size:15px; line-height:2.2; }
.action .who { font-weight:bold; }
.action .aline { display:block; white-space:nowrap; }   /* one move per line; JS shrinks only on real overflow */
.action .drama { font-family:var(--pixel); font-size:15px; text-align:center; line-height:1.6; padding:6px 0; white-space:nowrap; }
.action .drama.red { color:var(--red); text-shadow:0 0 12px rgba(255,77,86,.5); }
.action .drama.grn { color:var(--grn); text-shadow:0 0 12px rgba(70,211,106,.5); }

/* ── FINAL round flair ──────────────────────────────────────────────────── */
/* title-fight banner pinned above the fighters for the whole final */
.title-fight {
  font-family:var(--pixel); font-size:clamp(11px,2.4vw,16px); letter-spacing:2px;
  text-align:center; color:var(--ylw); text-shadow:0 0 10px rgba(255,210,63,.75);
  margin:2px 0 8px; animation:tfpulse 1.6s ease-in-out infinite;
}
@keyframes tfpulse { 0%,100%{opacity:.62; transform:scale(1)} 50%{opacity:1; transform:scale(1.04)} }
body.fx-reduced .title-fight{ animation:none; opacity:1; }
/* THE FINALISTS (pre-final face-off card) */
.tott { align-items:center; text-align:center; justify-content:center; gap:clamp(12px,2.6vh,26px); }
.tott-head { font-family:var(--pixel); font-size:clamp(16px,3.3vw,24px); letter-spacing:2px; color:var(--ylw); text-shadow:0 0 12px rgba(255,210,63,.6); }
/* top-align the columns so the penguins + names line up regardless of how the path
   wraps (centering made the taller column's fighter float higher). */
.tott-row { display:flex; align-items:flex-start; justify-content:center; gap:clamp(10px,3.5vw,44px); width:100%; }
.tott-col { flex:1 1 0; max-width:42%; display:flex; flex-direction:column; align-items:center; }
.tott-face { width:clamp(104px,22vw,166px); height:auto; image-rendering:auto;
  filter:drop-shadow(0 0 12px rgba(52,214,230,.35)) drop-shadow(0 5px 5px rgba(0,0,0,.5)); }
.tott-name { font-family:var(--pixel); font-size:clamp(13px,3.7vw,29px); color:var(--cyan); text-shadow:0 0 10px rgba(52,214,230,.5); margin:12px 0 8px; line-height:1.2; white-space:nowrap; }
.tott-path { font-family:var(--mono); font-size:clamp(14px,2.7vw,19px); color:#b8c0cc; margin-top:6px; line-height:1.55; }
/* the Punch-Out-style taunt quote under each finalist */
.tott-taunt { font-family:var(--mono); font-size:clamp(13px,2.5vw,18px); color:#d6deea; font-style:italic; margin-top:8px; line-height:1.5; max-width:22ch; margin-left:auto; margin-right:auto; }
/* VS sits at the fighters' vertical middle (row is top-aligned, so nudge it down) */
.tott-vs { font-family:var(--pixel); font-size:clamp(20px,4.4vw,34px); color:var(--ylw); text-shadow:0 0 12px rgba(255,210,63,.6); flex:0 0 auto; margin-top:clamp(36px,8vw,64px); }
.tott-sub { font-family:var(--mono); font-size:clamp(14px,2.6vw,18px); color:var(--mag); letter-spacing:1px; }
.dmg { color:var(--red); font-weight:bold; }
.ko { font-family:var(--pixel); color:var(--red); font-size:18px; text-shadow:0 0 10px var(--red); margin-top:6px; }
.win { font-family:var(--pixel); color:var(--grn); font-size:14px; }

/* round tag on the quick board */
.round-tag { font-family:var(--mono); color:var(--mag); font-size:21px; text-align:center; margin:12px 0 10px; letter-spacing:1px; }
/* champion subtitle */
.champ-sub { font-family:var(--mono); font-size:20px; margin-top:18px; }

/* "X ADVANCES" card — the name + trophy are the focus */
.adv { text-align:center; margin-top:34px; }
.adv-trophy { font-size:62px; line-height:1; filter:drop-shadow(0 0 16px var(--ylw));
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.adv-name { font-family:var(--pixel); color:var(--grn); font-size:clamp(16px,4vw,28px);
  margin-top:18px; text-shadow:0 0 14px rgba(70,211,106,.55); }
.adv-sub { font-family:var(--pixel); color:var(--ylw); font-size:15px; margin-top:12px; letter-spacing:2px; }
.adv.adv-compact { margin-top:16px; }
.adv-compact .adv-trophy { font-size:44px; }
.adv-compact .adv-name { font-size:clamp(15px,3.4vw,23px); margin-top:12px; }
.adv-compact .adv-sub { font-size:13px; margin-top:8px; }
.adv-board { margin-top:14px; }
.adv-board .bmatch.pending { color:var(--dim); }
/* redesigned quarter/semifinal bracket board — big pixel-type rows, brand colours, VS, clear
   hierarchy (the plain .board above is left for the crowded round-of-32/16 quickBoards). */
.mboard { display:flex; flex-direction:column; gap:clamp(9px,2.2vh,18px); width:100%; max-width:600px; margin:16px auto 0; }
.mb-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(8px,2.6vw,22px);
  min-height:clamp(54px,7vh,66px);   /* uniform height: fits a 2-line name; 1-line names center in it */
  padding:clamp(9px,1.4vh,14px) clamp(10px,2.2vw,20px); border:1px solid #253150; border-radius:10px;
  background:rgba(120,150,220,.05); box-shadow:0 0 18px rgba(52,214,230,.05); }
.mb-row.done { border-color:#2f5a42; background:rgba(70,211,106,.06); }
.mb-name { font-family:var(--pixel); font-size:clamp(11px,2.4vw,18px); line-height:1.2; text-align:center;
  color:#cfd8e6; overflow-wrap:break-word;   /* break at spaces first, not mid-word */
  /* always reserve 2 lines and centre — so a pill NEVER resizes when a name wraps or the ✓ is added */
  display:flex; align-items:center; justify-content:center; min-height:2.4em; }
.mb-name.mb-lose { color:var(--dim); opacity:.5; text-decoration:line-through; }
.mb-vs { font-family:var(--pixel); font-size:clamp(10px,1.7vw,14px); color:var(--ylw);
  text-shadow:0 0 8px rgba(255,210,63,.5); }
/* Round of 16 (8 fights): 2 columns on desktop, single column on mobile. Names a touch smaller
   than the QF/SF (narrower 2-col cells) so they fit on one line instead of wrapping. */
.mboard.two { max-width:920px; }
.mboard.two .mb-name { font-size:clamp(9px,1.6vw,13px); }
@media (min-width:720px) {
  .mboard.two { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:clamp(8px,1.5vh,14px) clamp(18px,3vw,34px); }
}
/* Round of 32 (16 fights): 2 compact columns on desktop; single compact column on mobile
   (2-col was too cramped on a phone — names broke mid-word). */
.mboard.compact { max-width:960px; display:grid; grid-template-columns:1fr; align-content:start;
  gap:clamp(4px,.8vh,9px) clamp(10px,2.2vw,24px); }
@media (min-width:720px) { .mboard.compact { grid-template-columns:1fr 1fr; } }
.mboard.compact .mb-row { min-height:clamp(42px,5vh,50px); padding:clamp(4px,.8vh,9px) clamp(8px,1.4vw,13px); border-radius:8px; }
.mboard.compact .mb-name { font-size:clamp(9px,1.9vw,13px); line-height:1.15; }
.mboard.compact .mb-vs { font-size:clamp(8px,1.4vw,11px); }

/* keyboard-centric control legend, PINNED to the bottom of the screen */
.ctrlbar { position:absolute; left:0; right:0; bottom:16px; height:52px; display:flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; flex-wrap:wrap; }
.ctrl-legend { font-family:var(--mono); color:#8090a0; font-size:21px; letter-spacing:1px; }
/* STEP toggle — manual-advance pacing for slower readers; lights green when ON */
.ctrl-step { font-family:var(--mono); font-size:16px; letter-spacing:1px; color:#8090a0;
  background:#0c1622; border:2px solid #2a3a4d; border-radius:8px; padding:6px 12px; cursor:pointer;
  transition:color .1s, border-color .1s, background .1s; }
.ctrl-step:hover, .ctrl-step:focus-visible { border-color:#3d5570; color:#cdd6e4; outline:none; }
.ctrl-step.on { color:#0a0e16; background:var(--grn); border-color:var(--grn); }
/* the "press SPACE…" gate — also pinned to the bottom, same spot every time */
.gatebar { position:absolute; left:0; right:0; bottom:16px; height:52px; display:flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; }
/* pause badge — sits low and does NOT gray out the game (the attack text stays readable) */
.pause-overlay { position:absolute; left:0; right:0; bottom:20%; z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.pause-overlay .po-main { font-family:var(--pixel); color:var(--ylw); font-size:22px;
  background:rgba(6,12,18,.92); border:2px solid rgba(255,210,63,.5); padding:9px 18px; border-radius:6px;
  text-shadow:0 0 12px var(--ylw); }
.pause-overlay .po-sub { font-family:var(--mono); color:var(--cyan); font-size:18px;
  background:rgba(6,12,18,.85); padding:2px 10px; border-radius:4px; }

/* ── boards ─────────────────────────────────────────────────────────────── */
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 18px; margin-top:10px; }
.bmatch { padding:4px 2px; font-size:18px; font-family:var(--mono); }
.bw { color:var(--grn); font-weight:bold; }
.bl { color:var(--dim); }
.bmatch .bl { text-decoration:line-through; }
.bbye-tag { font-family:var(--mono); color:var(--dim); font-size:12px; opacity:.8; }
.bvs { display:none; }
.tick { color:var(--grn); }

/* quick-results board (early rounds) — always 4 columns, equal cells */
.board-screen { display:flex; flex-direction:column;
  min-height:calc(min(900px, 100vh - 120px) - 108px); }
.board-screen .round-tag { margin:8px 0 4px; }
.board-screen .board {
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:max-content;
  align-content:center;
  gap:clamp(16px,2.6vh,30px) clamp(14px,2.4vw,36px);
  margin-top:clamp(10px,1.8vh,22px);
  flex:1 1 auto;
}
.board-screen .bmatch {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(2px,0.8vh,8px); padding:4px 6px; text-align:center; min-width:0;
}
.board-screen .bmatch > div { white-space:nowrap; line-height:1.1; max-width:100%; }
.board-screen .bw, .board-screen .bl, .board-screen .bpend {
  font-size:clamp(14px, min(2.1vw, 2.9vh), 24px); }
.board-screen .bw { text-shadow:0 0 12px rgba(70,211,106,.5); }
.board-screen .bpend { color:var(--dim); opacity:.3; }
@media(max-width:820px){
  .board-screen{ min-height:0; }
  .board-screen .board{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; flex:0 1 auto; }
}
@media(max-width:520px){
  .board-screen .board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .board-screen .bmatch > div{ white-space:normal; }
}

/* champion splash */
.champ-art { font-family:var(--pixel); color:var(--ylw); text-align:center; font-size:clamp(18px,6vw,40px); text-shadow:0 0 16px var(--ylw); }
.trophy { font-size:46px; text-align:center; filter:drop-shadow(0 0 12px var(--ylw));
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }

/* ── DELUXE champion screen ─────────────────────────────────────────────── */
.champ-body { position:relative; align-items:center; justify-content:center; overflow:hidden; gap:clamp(4px,1.2vh,14px); }
.champ-rays { position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(255,210,63,.20), rgba(255,210,63,.05) 32%, transparent 58%); }
.champ-rays::before{ content:""; position:absolute; left:50%; top:45%; width:1300px; height:1300px; margin:-650px 0 0 -650px;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,210,63,.085) 0deg 7deg, transparent 7deg 26deg);
  animation:champrays 44s linear infinite; opacity:.6; }
.champ-word{ position:relative; z-index:2; font-family:var(--pixel); font-size:clamp(26px,8vw,60px); letter-spacing:3px;
  color:var(--ylw); text-shadow:0 0 16px rgba(255,210,63,.6),0 0 44px rgba(255,210,63,.28); text-wrap:balance; }
.champ-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; margin:clamp(4px,1vh,12px) 0; }
.champ-peng{ width:clamp(148px,32vw,232px); height:auto;
  filter:drop-shadow(0 0 24px rgba(255,210,63,.55)) drop-shadow(0 8px 8px rgba(0,0,0,.55));
  animation:champbob 2.4s ease-in-out infinite; }
.champ-name{ position:relative; z-index:2; font-family:var(--pixel); font-size:clamp(18px,5vw,36px); letter-spacing:1px;
  margin-top:16px; text-shadow:0 0 14px currentColor; text-wrap:balance; text-align:center; }
.champ-tag{ position:relative; z-index:2; font-size:clamp(13px,2.4vw,18px); letter-spacing:2px; color:var(--mag); margin-top:8px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--mono); }
.champ-confetti{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.champ-confetti i{ position:absolute; top:-5%; width:8px; height:12px; border-radius:1px; opacity:.92; animation:champfall linear infinite; }
@keyframes champfall{ from{ top:-5%; transform:rotate(0deg); } to{ top:106%; transform:rotate(560deg); } }
@keyframes champbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes champrays{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .champ-confetti{ display:none; } .champ-peng,.champ-rays::before{ animation:none; } }

/* ── result page ────────────────────────────────────────────────────────── */
.result-name { font-family:var(--pixel); font-size:clamp(15px,4vw,26px); color:var(--grn); text-align:center; text-shadow:0 0 14px rgba(70,211,106,.5); }
.kbd-hint { font-family:var(--mono); color:var(--dim); font-size:14px; text-align:center; margin-top:12px; letter-spacing:1px; }
.why-box { border:2px solid #243240; border-radius:6px; padding:14px 16px; margin-top:14px; background:#0b1420; }
.why-box h4 { font-family:var(--pixel); font-size:11px; color:var(--grn); margin:0 0 10px; }
.why-line { margin:7px 0; font-size:15px; }
.why-line .chk { color:var(--grn); font-weight:bold; }
.getit a, .links a { color:var(--cyan); text-decoration:none; word-break:break-all; }
.getit a:hover, .links a:hover { text-decoration:underline; }
.toplist { margin-top:14px; }
.toprow { display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid #18222e; font-size:12px; }
.toprow .rk { font-family:var(--pixel); font-size:10px; color:var(--dim); min-width:22px; }
.toprow .nm { font-weight:bold; min-width:160px; }
.toprow.star .nm { color:var(--ylw); }
.toprow .bl { color:var(--dim); font-size:12px; }
.links { margin-top:18px; font-size:13px; }
.links h4 { font-family:var(--pixel); font-size:11px; color:var(--cyan); }
.links-note { color:var(--dim); margin:6px 0 8px; text-wrap:balance; }
.disclaimer { color:var(--dim); font-size:11px; font-style:italic; margin-top:16px; text-align:center; }
.gameover { font-family:var(--pixel); color:var(--mag); text-align:center; font-size:11px; margin-top:18px; }

/* forum invite CTA (end of both games) */
.forum-invite { border:2px solid var(--mag); border-radius:8px; padding:14px 16px; margin:0 auto 14px;
  text-align:center; background:rgba(224,86,200,.07); }
.fi-title { font-family:var(--pixel); font-size:13px; color:var(--mag); letter-spacing:1px; margin-bottom:8px; }
.fi-body { font-family:var(--mono); font-size:16px; color:var(--ink); line-height:1.5; }
.fi-body a { color:var(--cyan); }

/* rot accent used by the campaign guide */
.rot { color:var(--red); text-shadow:0 0 8px rgba(255,77,86,.5); }

/* ── HOW TO PLAY (the manual) ───────────────────────────────────────────── */
.howto { max-width:680px; margin:0 auto; padding:8px 2px 10px; line-height:1.7; }
.howto .ht-hero { margin-bottom:22px; }
.howto .ht-feedback { max-width:560px; margin:0 auto 22px; padding:10px 14px; text-align:center;
  font-size:16px; color:var(--ink); background:rgba(52,214,230,.08);
  border:1px solid rgba(52,214,230,.35); border-radius:8px; }
.howto .ht-feedback a { color:var(--ylw); text-decoration:none; white-space:nowrap; }
.howto .ht-feedback a:hover { text-decoration:underline; }
.howto .ht-lede { font-size:18px; max-width:520px; margin:10px auto 0; }
.howto .ht-h {
  font-family:var(--pixel); font-size:15px; color:var(--cyan); line-height:1.5;
  margin:30px 0 12px; text-shadow:0 0 10px rgba(52,214,230,.35);
}
.howto .ht-h3 { font-family:var(--pixel); font-size:12px; color:var(--ylw); margin:0 0 10px; }
.howto p { font-size:17px; margin:0 0 12px; }
.howto b { color:#eaf0f4; }
.howto i { color:var(--dim); }
.howto .ht-steps, .howto .ht-list { font-size:17px; margin:0 0 12px; padding-left:22px; }
.howto .ht-steps li { margin:0 0 10px; }
.howto .ht-list li { margin:0 0 6px; }
.howto .ht-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; margin-bottom:6px; }
.howto .ht-faq { margin:0; }
.howto .ht-faq dt { font-size:17px; color:var(--grn); font-weight:bold; margin:16px 0 4px; }
.howto .ht-faq dd { font-size:16px; margin:0; color:var(--ink); }
.howto .ht-foot { margin-top:34px; }
.howto .ht-sign { font-size:16px; margin-top:14px; }
/* inline command / key styling for the manuals */
.howto code, .howto kbd { font-family:var(--mono); font-size:15px; white-space:nowrap; }
.howto code { color:var(--ylw); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:4px; }
.howto kbd { color:#eaf0f4; background:rgba(52,214,230,.10); border:1px solid rgba(52,214,230,.32);
  padding:0 6px; border-radius:5px; }
/* callout box — used for the Rot Hunt / permadeath warnings */
.howto .ht-note { margin:0 0 14px; padding:10px 14px; font-size:16px; border-radius:0 7px 7px 0;
  border-left:3px solid var(--red); background:rgba(255,77,86,.07); color:var(--ink); }
.howto .ht-note.tip { border-left-color:var(--grn); background:rgba(52,230,150,.06); }
/* section heading in the Rot-red for the hunt/boss chapters */
.howto .ht-h.rot { color:var(--red); text-shadow:0 0 10px rgba(255,77,86,.35); }
@media(max-width:600px){
  body { padding-bottom:72px; }   /* keep scroll room under the frame on mobile: lets users scroll
                                     further to lift the lower buttons into comfortable thumb reach */
  .howto .ht-cols { grid-template-columns:1fr; gap:0; }
  .howto .ht-h { font-size:13px; }
  .howto p, .howto .ht-steps, .howto .ht-list, .howto .ht-faq dt { font-size:16px; }
}

/* ── mobile / small-screen layout ───────────────────────────────────────── */
.mbr { display:none; }                       /* mobile-only line break in the quiz header */
@media(max-width:600px){
  /* quiz header on mobile: show just the short title, drop the subtitle + separators */
  .mbr { display:none; }
  .quiz-hud .qsep, .hud-sub { display:none; }
  /* TOP MATCHES / TOP DESKTOPS: stack the description under the name */
  .toprow { flex-wrap:wrap; }
  .toprow .nm { min-width:0; }
  .toprow .bl { flex-basis:100%; margin-top:3px; }
  /* round splash: shrink long round names so they don't overflow */
  .rs-round { font-size:clamp(15px,6vw,24px); letter-spacing:2px; white-space:nowrap; }
  .rs-fight { font-size:clamp(32px,13vw,54px); }
  /* header: drop the ▓▒░ flourishes and shrink so brand + status fit */
  .hudec { display:none; }
  .hud { font-size:11px; padding:7px 9px; gap:8px; flex-wrap:wrap; }  /* wraps: brand row + status/toggles row */
  .hud .gt { white-space:nowrap; }
  .hud .st { font-size:10px; text-align:right; margin-left:auto; }
  .hud .crt-corner { font-size:9px; padding:6px 5px; letter-spacing:0; }
  /* advance/decided list: 2 columns instead of a cramped 4 */
  .adv-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
  .adv-board .bmatch > div { white-space:normal; }
  /* fight play-by-play: the wide pixel font runs off a phone; narrow body font */
  .action { font-family:var(--mono); font-size:18px; }
  /* the title tux yields vertical room on short phone screens */
  .tux { width:clamp(80px,18vw,110px); }
}

/* ── back-a-fighter (optional favorite pick) ─────────────────────────── */
.fav-star { color: #ffd23f; text-shadow: 0 0 8px rgba(255, 210, 63, .55); margin-left: .4em; }
.fav-star.pre { margin-left: 0; margin-right: .4em; }   /* star BEFORE the name on mirrored right-side layouts */
.favpick { padding: 6px 4px 18px; }
.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 6px;
  max-width: 780px;
  margin: 0 auto;
}
.fav-chip { font-size: 11px; padding: 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-chip:hover, .fav-chip:focus-visible { border-color: #ffd23f; color: #ffd23f; }
.fav-note { color: #ffd23f; text-align: center; margin-top: 10px; font-size: 13px; }
.fav-note.win { font-size: 15px; letter-spacing: .5px; }
.fav-down { color: #ff6b6b; font-size: 12px; margin-top: 6px; }
.champ-called { color: #ffd23f; font-size: 12px; margin-top: 8px; letter-spacing: 2px; text-shadow: 0 0 12px rgba(255, 210, 63, .5); }
@media (max-width: 600px) {
  .fav-grid { grid-template-columns: repeat(2, 1fr); }
}

/* winner tick: ALWAYS green, bold and bigger — it inherited the fighter's
   accent before and read faint on dark hues */
.mb-tick {
  color: #35e06a;
  font-weight: bold;
  font-size: 1.2em;
  margin-right: .3em;
  text-shadow: 0 0 10px rgba(53, 224, 106, .65);
}

/* ineligible call-the-winner chips: visible but ghosted (ruled out by the answers) */
.fav-chip.out {
  opacity: .3;
  filter: saturate(.4);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* call-the-winner ON the first full-round board: bold banner + tappable names */
.fav-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin: 6px auto 14px;
}
.fav-invite-hd {
  font-family: var(--pixel);
  color: #ffd23f;
  font-size: clamp(13px, 2.6vw, 17px);
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(255, 210, 63, .55);
}
.fav-invite-sub {
  color: #e7edf6;
  font-size: 14.5px;
}
.fav-invite-fine {
  color: #8090a0;
  font-size: 12px;
}
.mboard.pickable .mb-name[data-t] {
  cursor: pointer;
  padding: 4px 7px;
  margin: -4px -7px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.mboard.pickable .mb-name[data-t]:hover,
.mboard.pickable .mb-name[data-t]:focus-visible {
  border-color: rgba(255, 210, 63, .5);
  background: rgba(255, 210, 63, .07);
}

/* full-round bracket board: anchor to the top so the one-by-one pairing
   reveal doesn't vertically shift the banner and rows (owner) */
.screen-body.board-top { justify-content: flex-start; padding-top: 18px; }

/* guide-page links: title screen block (between the campaign section and the press
   features, after its own divider) + the result-screen link */
.guide-links { text-align:center; margin:16px 0 6px; }
.guide-links .gl-head { font-size:15px; color:var(--ylw); letter-spacing:.04em;
  text-shadow:0 0 10px rgba(255,210,63,.35); }
.guide-links .gl-links { font-family:var(--mono); font-size:25px; margin-top:9px; }
.guide-links .gl-links a { color:var(--cyan); text-decoration:none;
  text-shadow:0 0 8px rgba(52,214,230,.35); }
.guide-links .gl-links a:hover, .guide-links .gl-links a:focus-visible { text-decoration:underline; }
.guide-links .gl-sub { font-family:var(--mono); font-size:18px; margin-top:4px; }
.getit.guide-link { margin-top:4px; }
.getit.guide-link a { color:var(--cyan); }