/* Neon Night: the 80s layer (design-system/battlevs-design-system-80s, bundle.css "Neon Night", 7 Oct 2026), mapped
   onto our own class names. Loaded last on every page, so this one sheet carries the look: pixel type for short
   labels, neon edges, a synthwave horizon behind the store's first screen, display sizes tuned for Unbounded, and the
   wordmark kept in Gabarito. Colours come from /ds/tokens.css. Look only: no layout, journey or agent-contract change. */

/* The wordmark stays put whatever the display face */
.logo,.logo .vs{font-family:var(--font-brand)!important} /* beats the pages' own logo rules, which set the whole font */

/* Pixel type: short uppercase labels, badges, counts and board coordinates only, never sentences */
.overline,.badge,.sh-cap,.sh-item .tag,.g11 .hd,.scroll-cue{font-family:var(--font-pixel);letter-spacing:.05em}
.badge{font-weight:400}
.overline{color:var(--human-text)}

/* Headlines: a soft pink glow, sizes tuned for Unbounded (it runs wide) */
.kicker,.ltitle h1,.featured h2,.fun-over h2{text-shadow:0 0 28px rgba(255,79,184,.35)}
.kicker{font-weight:800;font-size:clamp(26px,3.7cqi,42px);line-height:1.14;max-width:19em}
.kicker strong{font-weight:800}
@media (min-width:900px){.kicker{max-width:26em}} /* laptop: two lines, not three, so the first screen still fits */
.featured h2{font-weight:800;font-size:clamp(28px,4.2cqi,44px);line-height:1.04}
.ltitle h1{font-weight:800;font-size:clamp(32px,5.4cqi,50px);line-height:1.06}
.sechead h2{font-weight:700;font-size:clamp(20px,2.7cqi,27px);line-height:1.2}
.card h3{font-weight:700;letter-spacing:-.01em}
header.topbar .gametitle .big{font-weight:800;font-size:18px}
.marquee .big{font-weight:800}
.panel h2,.setup h2{font-weight:700}

/* Neon edges: the featured game, the scoreboard and each board's frame; a thin violet edge on cards */
.featured,.sb-card,.wrap > section.panel.pink{box-shadow:var(--glow-neon)}
.card{box-shadow:0 0 0 1px var(--line-1),var(--shadow-lift)}
.card:not(.soon):not(.submit):hover{box-shadow:0 0 0 2px var(--line-2),0 0 32px -12px var(--agent)}
.sh-side{box-shadow:1px 0 0 var(--line-1)}
@media (prefers-reduced-motion:reduce){.card:not(.soon):not(.submit):hover{box-shadow:0 0 0 2px var(--line-2)}}

/* The synthwave horizon: a pink glow rising behind the store's first screen */
.first{position:relative}
.first::before{content:"";position:absolute;inset:-24px -16px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 45% at 50% 100%,rgba(255,79,184,.16),transparent 70%)}

/* The turn line: Unbounded is wide, so a step smaller (the design system's turn bar: 16px, 700) */
.turnbar .turn{font-weight:700;font-size:16px;line-height:21px}
@media (max-width:420px){.turnbar .turn{font-size:15px;line-height:20px}}

/* ======================================================================
   The arcade layer (Lewis, 7 Oct 2026: bring back the live Dice Clash's 80s touches, on every board).
   --font-arcade (Press Start 2P) is for the big moments only: countdowns, GAME OVER, scores. Short labels use
   --font-pixel (Silkscreen). Sentences, buttons and the turn line stay readable; the turn line gets a blinking ▶.
   Look only: no text, id or agent-contract change. Reduced motion gets the still versions.
   ====================================================================== */

/* The synthwave stage behind the boards: one soft sun and a slow horizon grid (Andrew, 7 Oct 2026: calm during play,
   so no scanlines and no square-grid textures behind or inside the panels; the "updating" stripes stay) */
body:has(main.wrap > .panel.pink) .bgfx{display:block}
body:has(main.wrap > .panel.pink)::before{background-image:none}
main.wrap > .table,#scorecard,.sea,.g10,.bot,.overlay{background-image:none}
body:has(main.wrap > .panel.pink){background:transparent} /* the page colour comes from <html>, so the sun and grid show through */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgfx .sun{position:absolute;left:50%;top:34%;width:min(46vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-linear-gradient(180deg,transparent 0 62%,var(--bg-0) 62% 66%,transparent 66% 70%),linear-gradient(180deg,var(--accent) 0%,#FF9A5C 45%,#FF4FB8 100%);
  -webkit-mask:linear-gradient(180deg,#000 55%,rgba(0,0,0,.15) 100%);mask:linear-gradient(180deg,#000 55%,rgba(0,0,0,.15) 100%);opacity:.16;filter:blur(.3px)}
.bgfx .grid{position:absolute;left:-50%;right:-50%;bottom:0;height:37%;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,79,184,.7) 2px,transparent 2px),linear-gradient(90deg,rgba(255,79,184,.7) 2px,transparent 2px);background-size:70px 70px;
  opacity:.22;animation:arcade-grid 10s linear infinite;-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
@keyframes arcade-grid{to{background-position:0 70px}}

/* The blinking ▶ on your turn, every board (decoration only: hidden from screen readers and from the turn text) */
.turn.mine::after{content:"▶";content:"▶" / "";margin-left:.45em;color:var(--accent);font-size:.8em;animation:arcade-blink 1s steps(1) infinite}
@keyframes arcade-blink{50%{opacity:0}}

/* Dice Clash: the arcade countdown, pixel KEEP / KEPT / AGAIN with a glow, arcade scores */
.count span{font:400 clamp(48px,18vw,112px)/1 var(--font-arcade);letter-spacing:0;color:var(--accent);text-shadow:5px 5px 0 var(--agent),0 0 30px rgba(255,225,77,.55)}
.die::after{font-family:var(--font-pixel);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.die[aria-pressed="true"]::after{color:var(--human-text);text-shadow:0 0 8px var(--human)}
.die.again:not([aria-pressed="true"])::after{text-shadow:0 0 8px var(--accent)}
.strip .sc b,.team-mini b{font-family:var(--font-arcade);font-weight:400;font-size:12px;letter-spacing:0}

/* Rock Paper Scissors: ROCK, PAPER, SCISSORS, SHOOT! in arcade type; arcade scores and match result */
.divider .word.pulse,.divider .word.shoot{font-family:var(--font-arcade);font-weight:400;letter-spacing:0;font-size:clamp(24px,8vw,38px);line-height:1.2}
.divider .word.shoot{font-size:clamp(30px,10vw,46px);text-shadow:4px 4px 0 var(--agent),0 0 24px rgba(255,225,77,.5)}
.beats li{font-family:var(--font-pixel);font-weight:400}
.bar .sc b{font-family:var(--font-arcade);font-weight:400;font-size:13px;letter-spacing:0}
#end-title{font-family:var(--font-arcade);font-weight:400;font-size:clamp(18px,5.6vw,26px);line-height:1.4;letter-spacing:.02em;color:var(--accent);text-shadow:3px 3px 0 var(--agent)}
.overlay .bigscore{font-family:var(--font-arcade);font-weight:400;font-size:34px;line-height:44px}

@media (prefers-reduced-motion:reduce){.bgfx .grid,.turn.mine::after{animation:none}}

/* The board's sound and music switches: one compact row on phones, as on Dice Clash (7 Oct 2026, music on every game) */
@media (max-width:520px){header.topbar .toggles{flex-wrap:nowrap;gap:6px}header.topbar .toggle{min-height:36px;padding:0 10px;font-size:13px;white-space:nowrap}}
header.topbar .toggle[aria-pressed="false"]{color:var(--text-2)}
header.topbar .toggle[aria-pressed="true"]{color:var(--text-1);border-color:var(--text-1)}