/* Shared retro-arcade accents for The Steal Playbook inner pages.
   Loaded AFTER each page's inline styles + cite.css so it can layer retro
   flourishes (CRT scanlines, mono labels, blocky buttons) onto the dark palette
   without touching game logic. The landing (index.html) has its own retro hero
   and does not load this file. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=Chakra+Petch:wght@400;500;600&display=swap');

:root{
  /* Set 1 — 8-bit arcade type, applied across every game page */
  --serif: "Silkscreen", ui-monospace, "Courier New", monospace;      /* sub-headers */
  --sans: "Chakra Petch", system-ui, -apple-system, sans-serif;       /* body / reveals */
  --mono: "Chakra Petch", system-ui, -apple-system, sans-serif;       /* labels / UI */
  --pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;  /* arcade display */
  --btn-shadow: rgba(0,0,0,.55);
}

/* No italics anywhere, em/cite render upright (emphasis stays via the existing color/weight styles) */
em, cite, i, address, q, dfn, var{ font-style: normal; }

/* Page-wide CRT scanlines, static, subtle, never blocks input.
   z-index sits below the citation popover (z 60/61) so popovers stay crisp. */
body::after{
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  opacity:.42; mix-blend-mode:multiply;
}

/* Arcade section headers, a blinking status light + mono label at the top of each
   section (intro eyebrows, "How to play", reveal kickers, "Game over"). Applied
   site-wide so every game's section tops read like an arcade briefing. */
.kicker, .how-tag, .go-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono) !important;
  font-size:13px; letter-spacing:.18em; line-height:1.35;
  text-transform:uppercase; font-weight:700;
  color:var(--amber-deep) !important;
}
.kicker::before, .how-tag::before, .go-tag::before{
  content:""; flex:0 0 auto; width:8px; height:8px; margin-top:1px;
  background:var(--amber); box-shadow:0 0 8px var(--amber);
  animation:k9blip 1.1s steps(1) infinite;
}
@keyframes k9blip{ 50%{opacity:.2} }

/* ---- Shared arcade "mission briefing" panel (how-to-play / objective) ---- */
.briefing{border:1.5px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;margin-bottom:14px}
.brief-bar{display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:linear-gradient(90deg, rgba(255,59,78,.22), rgba(255,59,78,0) 70%);
  border-bottom:1.5px solid var(--line);
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:700}
.brief-bar .blip{width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 9px var(--amber);animation:blip 1.1s steps(1) infinite}
@keyframes blip{50%{opacity:.25}}
.brief-body{padding:14px 15px 15px}
.brief-obj{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.28;margin:0 0 14px}
.brief-obj b{color:var(--amber-deep)}
.vs{display:flex;align-items:stretch;gap:9px;margin:0 0 13px}
.side{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;
  display:flex;flex-direction:column;gap:2px;background:#0e0e1a}
.side.you{border-color:rgba(255,59,78,.5)}
.side.them{border-color:rgba(77,139,255,.5)}
.side-tag{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.side-pct{font-family:var(--mono);font-size:29px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.side.you .side-pct{color:var(--amber-deep)} .side.them .side-pct{color:var(--teal-deep)}
.side-sub{font-size:13px;color:var(--muted)}
.vs-mark{align-self:center;font-family:var(--mono);font-weight:800;font-size:13px;color:var(--muted);flex:0 0 auto}
.brief-taunt{font-family:var(--serif);font-size:14.5px;line-height:1.45;color:var(--ink);margin:0}
.brief-how{font-family:var(--mono);font-size:13px;line-height:1.55;letter-spacing:.01em;color:var(--muted);
  border-top:1px solid var(--line);margin:12px 0 0;padding-top:11px}
.brief-how b{color:var(--ink)}

/* ---- Shared arcade "STAGE CLEAR" reveal payoff ---- */
.stageclear{border:1.5px solid var(--amber);border-radius:12px;overflow:hidden;margin:0 0 22px;
  background:linear-gradient(180deg, rgba(255,59,78,.14), var(--card))}
.stageclear.lost{border-color:var(--line);background:linear-gradient(180deg, rgba(77,139,255,.10), var(--card))}
.sc-banner{text-align:center;font-family:var(--mono);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;font-size:clamp(19px,5.5vw,27px);color:var(--amber-deep);
  padding:18px 14px 4px;text-shadow:0 0 20px rgba(255,59,78,.55)}
.stageclear.lost .sc-banner{color:var(--teal-deep);text-shadow:0 0 18px rgba(77,139,255,.45)}
.sc-stat{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 14px 2px;flex-wrap:wrap}
.sc-col{display:flex;flex-direction:column;align-items:center;gap:3px}
.sc-num{font-family:var(--mono);font-weight:800;font-size:clamp(20px,6.5vw,32px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.sc-num.win{color:var(--amber-deep)}
.stageclear.lost .sc-num.win{color:var(--teal-deep)}
.sc-lab{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-arrow{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--amber)}
.stageclear.lost .sc-arrow{color:var(--teal)}
.sc-line{text-align:center;font-size:13px;color:var(--muted);margin:8px 18px 14px;line-height:1.45}
.sc-diff{display:block;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-bottom:14px}

/* Persistent home link (top of every game page, all screens) */
.homelink{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);
  text-decoration:none;margin:0 0 20px;transition:color .12s ease}
.homelink:hover{color:var(--amber-deep)}

/* Move-to-move nav on reveal screens */
.movenav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px;
  border-top:1px solid var(--line);padding-top:20px}
.movenav .grow{flex:1 1 0;min-width:0}

/* Blocky, pressable retro buttons */
.btn{
  font-family:var(--mono) !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700 !important;
  border-radius:4px !important;
  box-shadow:3px 3px 0 var(--btn-shadow);
  transition:transform .1s ease, box-shadow .1s ease !important;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--btn-shadow); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--btn-shadow); }

/* Set 1: 8-bit display font for the STAGE CLEAR arcade banner */
.sc-banner{ font-family:var(--pixel) !important; font-size:clamp(14px,4.2vw,21px) !important;
  letter-spacing:.04em !important; line-height:1.4 !important; }

/* Silkscreen headings render large, tighten the big game headline */
h1{ font-size:clamp(21px,5.2vw,33px) !important; line-height:1.26 !important; }
/* Big reveal term (.name), size to fit and wrap long words on-screen */
.name{ font-size:clamp(22px,6.2vw,37px) !important; line-height:1.22 !important; overflow-wrap:anywhere; }

/* Long-form sentences (objective, taunt, book pull-quotes) read in Chakra Petch,
   not pixel Silkscreen. Pixel stays for short titles/terms only. */
.brief-obj, .how-obj, .brief-taunt, .pull{ font-family:var(--sans) !important; line-height:1.4 !important; }

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
  .btn:hover,.btn:active{ transform:none }
  .kicker::before, .how-tag::before, .go-tag::before{ animation:none }
}