/* ============================================================
   BOREDOM KILLER ARCADE — "The Cabinet"
   A 1983 arcade cabinet rendered in CSS.
   Palette: warm CRT phosphor (amber primary) on bezel purple-black.
   ============================================================ */

:root{
  /* Cabinet & screen */
  --void:#0d0a14;
  --bezel:#171122;
  --screen:#0a0810;
  --panel:#1e1630;
  --panel-hi:#2a1f42;
  --line:#382a52;

  /* Phosphor accents */
  --amber:#ffb02e;
  --magenta:#ff3d8b;
  --cyan:#4fe3e8;
  --lime:#5ef38c;
  --violet:#a86bff;
  --red:#ff5347;

  /* Type */
  --cream:#f4ecdd;
  --dim:#9184b0;
  --faint:#6a5d88;

  /* Per-page accent, overridden by each game */
  --ac:var(--amber);

  --px:'Press Start 2P',monospace;
  --hud:'VT323',monospace;
  --body:'Space Grotesk',system-ui,sans-serif;

  --bevel:inset -3px -3px 0 rgba(0,0,0,.45), inset 3px 3px 0 rgba(255,255,255,.07);
  --bevel-in:inset 3px 3px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.05);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  /* cabinet vinyl: faint diagonal sideart */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(168,107,255,.10), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 9px);
  background-attachment:fixed;
}

/* ---------- CRT overlay: the signature ---------- */
.crt-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt-overlay::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 165% 130% at 50% 50%, transparent 68%, rgba(0,0,0,.38) 100%);
}
.crt-overlay::before{
  content:'';position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.035), transparent);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{0%{top:-140px}100%{top:100%}}

/* ---------- Links & focus ---------- */
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- Marquee header (cabinet topper) ---------- */
.marquee{
  position:relative;
  background:linear-gradient(180deg,var(--panel-hi),var(--bezel));
  border-bottom:2px solid var(--line);
  box-shadow:0 4px 0 rgba(0,0,0,.5), 0 0 40px rgba(255,176,46,.07);
}
.marquee-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 18px;flex-wrap:wrap;
}
.logo{
  font-family:var(--px);font-size:.72rem;line-height:1.5;
  color:var(--amber);text-decoration:none;letter-spacing:.5px;
  text-shadow:0 0 12px rgba(255,176,46,.55), 2px 2px 0 rgba(0,0,0,.6);
}
.logo:hover{text-decoration:none;color:#ffc75a}
.logo .b{color:var(--magenta);text-shadow:0 0 12px rgba(255,61,139,.5),2px 2px 0 rgba(0,0,0,.6)}

.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav a{
  font-family:var(--px);font-size:.5rem;padding:9px 12px;
  color:var(--dim);background:var(--panel);border:2px solid var(--line);
  box-shadow:var(--bevel);transition:color .15s,border-color .15s,transform .1s;
}
.nav a:hover{color:var(--cream);border-color:var(--faint);text-decoration:none}
.nav a:active{transform:translate(1px,1px)}
.nav a[aria-current="page"]{color:var(--amber);border-color:var(--amber)}
.nav a.coin{color:#ffd76a;border-color:rgba(255,176,46,.45);background:rgba(255,176,46,.08)}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 18px 40px}
.wrap-narrow{max-width:800px;margin:0 auto;padding:22px 18px 40px}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:44px 18px 26px;position:relative}
.hero h1{
  font-family:var(--px);font-size:clamp(1.05rem,3.6vw,2rem);line-height:1.55;
  color:var(--cream);text-shadow:3px 3px 0 var(--magenta), 6px 6px 0 rgba(0,0,0,.45);
  letter-spacing:1px;
}
.hero .sub{
  font-family:var(--hud);font-size:1.35rem;color:var(--cyan);
  margin-top:16px;letter-spacing:1px;
}
.coinline{
  font-family:var(--px);font-size:.55rem;color:var(--amber);margin-top:14px;
  animation:blink 1.4s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
/* Badge stays readable at all times — pulses brightness, never hides */
@keyframes pulse-badge{0%,49%{opacity:1}50%,100%{opacity:.72}}

/* ---------- Category sections (index) ---------- */
.cat{margin-bottom:38px}
.cat-head{
  display:flex;align-items:center;gap:14px;margin-bottom:16px;
}
.cat-head h2{
  font-family:var(--px);font-size:.72rem;color:var(--ck,var(--amber));
  text-shadow:2px 2px 0 rgba(0,0,0,.6);white-space:nowrap;letter-spacing:1px;
}
.cat-head .rule{flex:1;height:2px;background:linear-gradient(90deg,var(--ck,var(--amber)),transparent)}
.cat-head .count{font-family:var(--hud);font-size:1.1rem;color:var(--faint)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:14px;
}

/* ---------- Game card = mini cabinet marquee ---------- */
.card{
  display:flex;flex-direction:column;
  background:var(--panel);border:2px solid var(--line);
  box-shadow:var(--bevel);
  color:var(--cream);text-decoration:none;
  transition:transform .16s ease, border-color .16s, box-shadow .16s;
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--ac);
  box-shadow:var(--bevel), 0 8px 0 rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--ac) 30%, transparent);
  text-decoration:none;
}
.card:focus-visible{transform:translateY(-4px);border-color:var(--ac)}
.card .screen{
  height:88px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;line-height:1;
  background:
    radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 68%),
    var(--screen);
  border-bottom:2px solid var(--line);
  position:relative;
}
.card .screen::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
}
.card .meta{padding:12px 13px 14px}
.card h3{
  font-family:var(--px);font-size:.6rem;line-height:1.5;
  color:var(--ac);margin-bottom:7px;text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.card p{font-size:.83rem;color:var(--dim);line-height:1.5}
.card .tag{
  position:absolute;top:8px;right:8px;z-index:1;
  font-family:var(--px);font-size:.42rem;padding:4px 7px;
  background:rgba(0,0,0,.6);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);
}
.card .new{
  position:absolute;top:8px;left:8px;z-index:1;
  font-family:var(--px);font-size:.42rem;padding:4px 7px;
  background:var(--magenta);color:#fff;animation:pulse-badge 1.6s steps(1) infinite;
}

/* ---------- Game page: the CRT console ---------- */
.console{
  background:var(--bezel);border:2px solid var(--line);
  box-shadow:var(--bevel), 0 10px 0 rgba(0,0,0,.35);
  padding:16px;margin-bottom:22px;
}
.console-head{text-align:center;margin-bottom:14px}
.console-head h1{
  font-family:var(--px);font-size:clamp(.78rem,2.6vw,1.15rem);line-height:1.5;
  color:var(--ac);text-shadow:2px 2px 0 rgba(0,0,0,.65), 0 0 20px color-mix(in srgb,var(--ac) 40%,transparent);
}
.console-head .tagline{font-family:var(--hud);font-size:1.15rem;color:var(--dim);margin-top:8px}

/* HUD readout strip */
.hud{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--screen);border:2px solid var(--line);box-shadow:var(--bevel-in);
  padding:9px 12px;margin-bottom:12px;
}
.hud .stat{font-family:var(--hud);font-size:1.3rem;line-height:1;color:var(--dim);letter-spacing:1px}
.hud .stat b{color:var(--ac);font-weight:400}
.hud .stat.best b{color:var(--cyan)}

/* Play surface */
.stage{
  position:relative;background:var(--screen);
  border:2px solid var(--line);box-shadow:var(--bevel-in);
  overflow:hidden;
}
.stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
canvas.cv{display:block;width:100%;height:auto;touch-action:none}

/* Overlay shown on start / pause / game over */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,8,16,.9);text-align:center;padding:20px;
}
.overlay[hidden]{display:none}
.overlay h2{font-family:var(--px);font-size:.9rem;color:var(--ac);line-height:1.6;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.overlay p{font-family:var(--hud);font-size:1.3rem;color:var(--dim);max-width:34ch}
.overlay .big{font-family:var(--px);font-size:1.5rem;color:var(--cream);text-shadow:0 0 22px color-mix(in srgb,var(--ac) 60%,transparent)}

/* ---------- Controls ---------- */
.controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.btn{
  font-family:var(--px);font-size:.58rem;line-height:1.5;
  padding:12px 18px;cursor:pointer;
  background:var(--panel);color:var(--cream);
  border:2px solid var(--line);box-shadow:var(--bevel);
  transition:color .15s,border-color .15s,transform .08s;
}
.btn:hover{color:var(--ac);border-color:var(--ac)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--bevel-in)}
.btn.primary{background:var(--ac);color:#14101f;border-color:var(--ac);font-weight:700}
.btn.primary:hover{filter:brightness(1.12);color:#14101f}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Option rows (difficulty / mode selectors) */
.opts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:12px}
.opts .lbl{font-family:var(--px);font-size:.5rem;color:var(--faint);margin-right:2px}
.opt{
  font-family:var(--px);font-size:.5rem;padding:8px 11px;cursor:pointer;
  background:var(--panel);color:var(--dim);border:2px solid var(--line);box-shadow:var(--bevel);
  transition:color .15s,border-color .15s;
}
.opt:hover{color:var(--cream)}
.opt[aria-pressed="true"]{color:var(--ac);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--panel))}

/* D-pad for touch */
.dpad{
  display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);
  gap:6px;justify-content:center;margin-top:14px;
}
.dpad button{
  background:var(--panel);border:2px solid var(--line);box-shadow:var(--bevel);
  color:var(--cream);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.dpad button:active{transform:translate(2px,2px);box-shadow:var(--bevel-in);color:var(--ac)}
.dpad .sp{visibility:hidden}
@media(hover:hover) and (pointer:fine){.dpad{display:none}}

/* ---------- Toast / floating score ---------- */
.toast{
  position:fixed;top:42%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--px);font-size:1.4rem;color:var(--amber);
  pointer-events:none;z-index:8000;
  text-shadow:0 0 22px rgba(255,176,46,.7), 3px 3px 0 rgba(0,0,0,.7);
  animation:toastUp .9s ease forwards;
}
@keyframes toastUp{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}
  25%{transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(1.25)}
}
.shake{animation:shake .28s ease}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}
  60%{transform:translate(-3px,-3px)}80%{transform:translate(3px,3px)}
}

/* ---------- Prose / SEO content blocks ---------- */
.prose{margin-top:30px}
.prose section{
  background:var(--panel);border:2px solid var(--line);box-shadow:var(--bevel);
  padding:20px 22px;margin-bottom:16px;
}
.prose h1{
  font-family:var(--px);font-size:.92rem;color:var(--ac);
  margin-bottom:16px;line-height:1.6;text-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.prose h2{
  font-family:var(--px);font-size:.68rem;color:var(--ac);
  margin-bottom:14px;line-height:1.6;text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.prose h3{
  font-family:var(--px);font-size:.55rem;color:var(--cream);
  margin:16px 0 8px;line-height:1.6;
}
.prose p{color:var(--dim);margin-bottom:11px}
.prose ul,.prose ol{color:var(--dim);margin:0 0 11px 20px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--cream)}
.prose kbd{
  font-family:var(--hud);font-size:1.05rem;padding:2px 8px;
  background:var(--screen);border:2px solid var(--line);box-shadow:var(--bevel);
  color:var(--cyan);white-space:nowrap;
}
.prose table{width:100%;border-collapse:collapse;margin-bottom:12px}
.prose th,.prose td{
  text-align:left;padding:9px 11px;border:1px solid var(--line);
  color:var(--dim);font-size:.9rem;
}
.prose th{font-family:var(--px);font-size:.48rem;color:var(--cream);background:var(--panel-hi)}

/* ---------- Related games ---------- */
.related{margin-top:26px}
.related h2{font-family:var(--px);font-size:.68rem;color:var(--amber);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--px);font-size:.5rem;padding:10px 13px;
  background:var(--panel);border:2px solid var(--line);box-shadow:var(--bevel);
  color:var(--dim);transition:color .15s,border-color .15s;
}
.chip:hover{color:var(--amber);border-color:var(--amber);text-decoration:none}

/* ---------- Breadcrumb ---------- */
.crumb{font-family:var(--hud);font-size:1.1rem;color:var(--faint);margin-bottom:14px}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--amber)}

/* ---------- Footer ---------- */
footer{
  border-top:2px solid var(--line);background:var(--bezel);
  padding:28px 18px;margin-top:40px;
}
.foot-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.foot-col h3{font-family:var(--px);font-size:.5rem;color:var(--amber);margin-bottom:11px}
.foot-col a{display:block;color:var(--dim);font-size:.86rem;padding:3px 0}
.foot-col a:hover{color:var(--cyan)}
.foot-bottom{
  max-width:1180px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line);
  text-align:center;font-family:var(--hud);font-size:1.05rem;color:var(--faint);
}

/* ---------- Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.mt{margin-top:18px}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .wrap,.wrap-narrow{padding:16px 12px 30px}
  .hero{padding:30px 14px 20px}
  .console{padding:11px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
  .card .screen{height:70px;font-size:1.9rem}
  .card h3{font-size:.52rem}
  .card p{font-size:.76rem}
  .prose section{padding:15px 14px}
  .marquee-inner{padding:10px 12px}
  .nav a{font-size:.44rem;padding:8px 9px}
  .logo{font-size:.58rem}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .crt-overlay::before{display:none}
}

/* ---------- Print ---------- */
@media print{.crt-overlay,.nav,.dpad,.controls{display:none}}

/* ============================================================
   Game boards (DOM-based games)
   ============================================================ */

/* --- 2048 --- */
#board.g2048{display:grid;gap:8px;background:var(--panel-hi);padding:8px;border:2px solid var(--line);box-shadow:var(--bevel-in);margin:0 auto;max-width:420px}
.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:.85rem;background:rgba(0,0,0,.35);color:var(--cream);transition:transform .1s}
.tile[data-v]{animation:pop .16s ease}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.tile[data-v="2"]{background:#3a2f4f}.tile[data-v="4"]{background:#4a3a5f}
.tile[data-v="8"]{background:#7a4a2a;color:#fff}.tile[data-v="16"]{background:#9a5228;color:#fff}
.tile[data-v="32"]{background:#c25a30;color:#fff}.tile[data-v="64"]{background:#e0562a;color:#fff}
.tile[data-v="128"]{background:#ffb02e;color:#14101f;font-size:.72rem}
.tile[data-v="256"]{background:#ffc24d;color:#14101f;font-size:.72rem}
.tile[data-v="512"]{background:#ffd166;color:#14101f;font-size:.72rem}
.tile[data-v="1024"]{background:#5ef38c;color:#14101f;font-size:.58rem}
.tile[data-v="2048"]{background:#4fe3e8;color:#14101f;font-size:.58rem;box-shadow:0 0 22px #4fe3e8}
.tile.big{font-size:.5rem;background:#a86bff;color:#fff}

/* --- Minesweeper --- */
#board.mines{display:grid;gap:2px;margin:0 auto;width:max-content;max-width:100%;overflow:auto}
.ms{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.55rem;cursor:pointer;user-select:none;
  background:var(--panel-hi);border:2px solid var(--line);box-shadow:var(--bevel)}
.ms:hover{background:var(--panel)}
.ms.open{background:var(--screen);box-shadow:var(--bevel-in);cursor:default}
.ms.flag{color:var(--red)}
.ms.mine{background:var(--red);color:#fff}
.ms[data-n="1"]{color:#5a9bff}.ms[data-n="2"]{color:#5ef38c}.ms[data-n="3"]{color:#ff5347}
.ms[data-n="4"]{color:#a86bff}.ms[data-n="5"]{color:#ffb02e}.ms[data-n="6"]{color:#4fe3e8}
.ms[data-n="7"]{color:#ff3d8b}.ms[data-n="8"]{color:#f4ecdd}
@media(max-width:640px){.ms{width:24px;height:24px;font-size:.45rem}}

/* --- Lights Out --- */
#board.lights{display:grid;gap:8px;margin:0 auto;width:max-content}
.lamp{width:60px;height:60px;cursor:pointer;background:var(--screen);
  border:2px solid var(--line);box-shadow:var(--bevel);transition:background .14s,box-shadow .14s}
.lamp.on{background:var(--amber);box-shadow:0 0 20px var(--amber),var(--bevel)}
.lamp.hint{outline:3px dashed var(--cyan);outline-offset:2px}
@media(max-width:640px){.lamp{width:46px;height:46px}}

/* --- Memory --- */
#board.mem{display:grid;gap:8px;margin:0 auto;max-width:440px}
.mcard{aspect-ratio:1;cursor:pointer;position:relative;perspective:600px;background:none;border:0;padding:0}
.mcard .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;border:2px solid var(--line);box-shadow:var(--bevel);
  backface-visibility:hidden;transition:transform .32s}
.mcard .back{background:var(--panel-hi);color:var(--faint);font-family:var(--px);font-size:.7rem}
.mcard .front{background:var(--screen);transform:rotateY(180deg)}
.mcard.flip .back{transform:rotateY(180deg)}
.mcard.flip .front{transform:rotateY(360deg)}
.mcard.done .front{border-color:var(--lime);box-shadow:0 0 16px rgba(94,243,140,.4),var(--bevel)}
@media(max-width:640px){.mcard .face{font-size:1.3rem}}

/* --- Simon --- */
#board.simon{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:330px;margin:0 auto}
.pad{aspect-ratio:1;cursor:pointer;border:3px solid var(--line);box-shadow:var(--bevel);
  opacity:.42;transition:opacity .12s,box-shadow .12s}
.pad.lit{opacity:1}
.pad:nth-child(1){background:#5ef38c}.pad:nth-child(2){background:#ff5347}
.pad:nth-child(3){background:#4fe3e8}.pad:nth-child(4){background:#ffb02e}
.pad.lit{box-shadow:0 0 28px currentColor,var(--bevel)}

/* --- Pattern --- */
#board.pat{display:grid;gap:7px;margin:0 auto;width:max-content}
.pcell{width:56px;height:56px;cursor:pointer;background:var(--panel-hi);
  border:2px solid var(--line);box-shadow:var(--bevel);transition:background .1s}
.pcell.show{background:var(--violet);box-shadow:0 0 18px var(--violet),var(--bevel)}
.pcell.sel{background:var(--cyan);box-shadow:0 0 14px var(--cyan),var(--bevel)}
.pcell.wrong{background:var(--red)}
@media(max-width:640px){.pcell{width:44px;height:44px}}

/* --- Whack --- */
#board.whack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:400px;margin:0 auto}
.hole{aspect-ratio:1;cursor:pointer;background:radial-gradient(ellipse at 50% 78%,#0a0810 38%,var(--panel-hi) 40%);
  border:2px solid var(--line);box-shadow:var(--bevel-in);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-bottom:6px}
.hole .m{font-size:2rem;transform:translateY(115%);transition:transform .12s}
.hole.up .m{transform:translateY(0)}
.hole.hit{background:rgba(94,243,140,.2)}
@media(max-width:640px){.hole .m{font-size:1.5rem}}

/* --- Number Rush --- */
#board.nums{display:grid;gap:6px;margin:0 auto;width:max-content}
.num{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.65rem;cursor:pointer;color:var(--cream);
  background:var(--panel-hi);border:2px solid var(--line);box-shadow:var(--bevel)}
.num:hover{border-color:var(--ac)}
.num.done{opacity:.2;cursor:default}
.num.bad{background:var(--red)}
@media(max-width:640px){.num{width:46px;height:46px;font-size:.55rem}}

/* --- Word Guess --- */
#board .wrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px;max-width:330px;margin-inline:auto}
.wcell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.85rem;background:var(--screen);
  border:2px solid var(--line);box-shadow:var(--bevel)}
.wcell.filled{border-color:var(--faint)}
.wcell.hit{background:var(--lime);color:#14101f;border-color:var(--lime)}
.wcell.near{background:var(--amber);color:#14101f;border-color:var(--amber)}
.wcell.miss{background:var(--panel-hi);color:var(--faint)}
#kb .krow{display:flex;gap:4px;justify-content:center;margin-bottom:5px}
.key{font-family:var(--px);font-size:.48rem;padding:11px 8px;min-width:28px;cursor:pointer;
  background:var(--panel-hi);color:var(--cream);border:2px solid var(--line);box-shadow:var(--bevel)}
.key.wide{min-width:50px;font-size:.4rem}
.key.hit{background:var(--lime);color:#14101f}
.key.near{background:var(--amber);color:#14101f}
.key.miss{background:var(--void);color:var(--faint)}

/* --- Colour Clash / Math Blitz / Scramble shared quiz shell --- */
.quiz-word{font-family:var(--px);font-size:clamp(1.3rem,7vw,2.4rem);margin:26px 0 30px;line-height:1.4}
.quiz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:400px;margin:0 auto}
.quiz-btn{font-family:var(--px);font-size:.62rem;padding:18px 10px;cursor:pointer;
  background:var(--panel-hi);color:var(--cream);border:2px solid var(--line);box-shadow:var(--bevel)}
.quiz-btn:hover{border-color:var(--ac)}
.quiz-btn.right{background:var(--lime);color:#14101f}
.quiz-btn.wrong{background:var(--red);color:#fff}
.scrambled{font-family:var(--px);font-size:clamp(1.1rem,6vw,2rem);letter-spacing:.4em;margin:22px 0;color:var(--ac)}
.answer-in{font-family:var(--px);font-size:1rem;padding:14px;width:100%;max-width:340px;text-align:center;
  background:var(--screen);color:var(--cream);border:2px solid var(--line);box-shadow:var(--bevel-in);
  text-transform:uppercase;letter-spacing:.2em}
.answer-in:focus{border-color:var(--ac);outline:none}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:280px;margin:16px auto 0}
.numpad button{font-family:var(--px);font-size:.75rem;padding:15px 0;cursor:pointer;
  background:var(--panel-hi);color:var(--cream);border:2px solid var(--line);box-shadow:var(--bevel)}
.numpad button:active{transform:translate(2px,2px);box-shadow:var(--bevel-in)}

/* --- Tic Tac Toe --- */
#board.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:320px;margin:0 auto}
.tcell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:1.7rem;cursor:pointer;
  background:var(--panel-hi);border:2px solid var(--line);box-shadow:var(--bevel)}
.tcell:hover:not(.taken){border-color:var(--ac)}
.tcell .x{color:var(--cyan)}.tcell .o{color:var(--magenta)}
.tcell.win{background:rgba(94,243,140,.22);border-color:var(--lime)}

/* --- Connect Four --- */
#board.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--panel-hi);
  padding:10px;border:2px solid var(--line);box-shadow:var(--bevel-in);max-width:430px;margin:0 auto}
.slot{aspect-ratio:1;border-radius:50%;background:var(--screen);box-shadow:var(--bevel-in);cursor:pointer}
.slot.p1{background:var(--red);box-shadow:0 0 12px rgba(255,83,71,.5),var(--bevel)}
.slot.p2{background:var(--amber);box-shadow:0 0 12px rgba(255,176,46,.5),var(--bevel)}
.slot.win{outline:3px solid var(--lime);outline-offset:-4px}
.c4col{cursor:pointer}
.c4col:hover .slot{outline:2px solid color-mix(in srgb,var(--ac) 50%,transparent)}

/* ================= WAVE 2 boards ================= */

/* ---- Sudoku ---- */
.sud{
  display:grid;grid-template-columns:repeat(9,1fr);gap:0;
  width:min(92vw,420px);margin:0 auto;
  border:3px solid var(--ac);background:var(--line);
}
.sud .scell{
  aspect-ratio:1;background:var(--screen);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hud);font-size:1.5rem;color:var(--cyan);
  cursor:pointer;position:relative;padding:0;
}
.sud .scell:nth-child(3n){border-right:2px solid var(--ac)}
.sud .scell:nth-child(9n){border-right:none}
.sud .scell.r3{border-bottom:2px solid var(--ac)}
.sud .scell.given{color:var(--cream);background:var(--panel);cursor:default}
.sud .scell.sel{background:var(--panel-hi);box-shadow:inset 0 0 0 2px var(--ac)}
.sud .scell.peer{background:#160f26}
.sud .scell.same{color:var(--amber)}
.sud .scell.bad{color:var(--red);background:#2a1018}
.sud .notes{
  display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;
  font-size:.52rem;font-family:var(--hud);color:var(--faint);line-height:1;
}
.sud .notes span{display:flex;align-items:center;justify-content:center}
.numpad{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  width:min(92vw,420px);margin:12px auto 0;
}
.numpad button{
  padding:11px 0;background:var(--panel);border:2px solid var(--line);
  color:var(--cream);font-family:var(--hud);font-size:1.35rem;cursor:pointer;
  box-shadow:var(--bevel);
}
.numpad button:hover{background:var(--panel-hi);color:var(--ac)}
.numpad button.done{opacity:.32}

/* ---- Color Sort ---- */
.tubes{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-end;
  padding:10px;min-height:220px;
}
.tube{
  width:44px;background:rgba(255,255,255,.03);
  border:3px solid var(--line);border-top:none;
  border-radius:0 0 10px 10px;display:flex;flex-direction:column-reverse;
  padding:3px;gap:3px;cursor:pointer;transition:transform .12s;
}
.tube.sel{transform:translateY(-14px);border-color:var(--ac)}
.tube.done{border-color:var(--lime)}
.tube .seg{height:30px;box-shadow:var(--bevel)}
.tube .seg.lift{transform:translateY(-6px)}

/* ---- Chimp Test ---- */
.chimp{
  display:grid;gap:6px;width:min(92vw,440px);margin:0 auto;
}
.chimp .ccell{
  aspect-ratio:1;background:transparent;border:none;padding:0;
  font-family:var(--px);font-size:.8rem;color:var(--void);
  display:flex;align-items:center;justify-content:center;
}
.chimp .ccell.on{background:var(--cream);cursor:pointer;box-shadow:var(--bevel)}
.chimp .ccell.hidden{background:var(--panel-hi);color:transparent;cursor:pointer}
.chimp .ccell.gone{background:transparent;box-shadow:none;cursor:default}
.chimp .ccell.wrong{background:var(--red)}

/* ---- Odd One Out ---- */
.odd{display:grid;gap:5px;width:min(88vw,400px);margin:0 auto}
.odd .ocell{aspect-ratio:1;cursor:pointer;border:none;padding:0;box-shadow:var(--bevel)}

/* ---- Rhythm lane buttons ---- */
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.lanes button{
  padding:16px 0;background:var(--panel);border:2px solid var(--line);
  color:var(--cream);font-family:var(--px);font-size:.6rem;cursor:pointer;
  box-shadow:var(--bevel);
}
.lanes button:active{background:var(--ac);color:var(--void)}

/* ---- Hangman ---- */
.hang-wrap{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.hang-side{text-align:center;max-width:100%}
.hang-cat{font-family:var(--px);font-size:.5rem;color:var(--faint);margin-bottom:6px}
.hang-word{
  font-family:var(--hud);font-size:1.9rem;color:var(--ac);
  letter-spacing:.2em;word-break:break-word;line-height:1.3;
}
.kbd{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:16px}
.kbd .key{
  width:36px;height:38px;background:var(--panel);border:2px solid var(--line);
  color:var(--cream);font-family:var(--px);font-size:.52rem;cursor:pointer;
  box-shadow:var(--bevel);
}
.kbd .key:hover:not(:disabled){background:var(--panel-hi);color:var(--ac)}
.kbd .key.good{background:var(--lime);color:var(--void);border-color:var(--lime)}
.kbd .key.bad{background:#2a1018;color:var(--red);opacity:.55}
.kbd .key:disabled{cursor:default}

/* ---- Word Search ---- */
.ws-wrap{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.ws{display:grid;gap:1px;background:var(--line);border:2px solid var(--line);
  touch-action:none;user-select:none;-webkit-user-select:none}
.ws .wsc{
  width:clamp(20px,4.4vw,32px);aspect-ratio:1;background:var(--screen);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hud);font-size:1.05rem;color:var(--cream);cursor:pointer;
}
.ws .wsc.pick{background:var(--ac);color:var(--void)}
.ws .wsc.found{background:var(--panel-hi);color:var(--lime)}
.ws .wsc.hint{box-shadow:inset 0 0 0 2px var(--amber)}
.ws-list{list-style:none;margin:0;padding:0;min-width:120px;text-align:left}
.ws-list li{
  font-family:var(--hud);font-size:1.15rem;color:var(--dim);margin-bottom:3px;
}
.ws-list li.hit{color:var(--lime);text-decoration:line-through;opacity:.65}

/* ---- Reversi ---- */
.rev{
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  width:min(92vw,420px);margin:0 auto;background:var(--line);
  border:3px solid var(--line);
}
.rev .rcell{
  aspect-ratio:1;background:#123322;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.rev .rcell .disc{width:76%;height:76%;border-radius:50%;box-shadow:var(--bevel)}
.rev .rcell .disc.b{background:#14101c}
.rev .rcell .disc.w{background:var(--cream)}
.rev .rcell.legal::after{
  content:'';width:22%;height:22%;border-radius:50%;
  background:var(--ac);opacity:.5;position:absolute;
}
.rev .rcell.last{box-shadow:inset 0 0 0 2px var(--ac)}

/* ---- Gomoku ---- */
.gmk{
  display:grid;grid-template-columns:repeat(15,1fr);gap:0;
  width:min(94vw,460px);margin:0 auto;background:#241a10;
  border:3px solid var(--line);padding:4px;
}
.gmk .gcell{
  aspect-ratio:1;background:transparent;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.gmk .gcell::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,transparent calc(50% - .5px),#6b5335 calc(50% - .5px),#6b5335 calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to bottom,transparent calc(50% - .5px),#6b5335 calc(50% - .5px),#6b5335 calc(50% + .5px),transparent calc(50% + .5px));
}
.gmk .gcell .stone{
  width:84%;height:84%;border-radius:50%;position:relative;z-index:1;
  box-shadow:var(--bevel);
}
.gmk .gcell .stone.b{background:#14101c}
.gmk .gcell .stone.w{background:var(--cream)}
.gmk .gcell.last .stone{box-shadow:0 0 0 2px var(--ac)}
.gmk .gcell.win .stone{box-shadow:0 0 0 3px var(--lime)}

@media (max-width:640px){
  .hang-word{font-size:1.35rem;letter-spacing:.16em}
  .kbd .key{width:30px;height:34px}
  .ws-wrap{gap:10px}
  .tube{width:34px}
  .tube .seg{height:24px}
}

/* ================= Immersive (distraction-free) mode ================= */
/* Scroll-lock the page behind the game so no scrollbar can interrupt play. */
html.fs-active, html.fs-active body{overflow:hidden !important}

.fs-close{
  display:none;
  position:absolute;top:8px;right:8px;z-index:20;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:var(--panel);color:var(--cream);
  border:2px solid var(--line);box-shadow:var(--bevel);
  font-family:var(--px);font-size:.72rem;line-height:1;
}
.fs-close:hover{color:var(--red);border-color:var(--red)}
.fs-close:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.console.immersive{
  position:fixed;inset:0;z-index:9000;
  margin:0;border:none;border-radius:0;max-width:none;
  padding:10px clamp(8px,2vw,24px) 12px;
  background:var(--void);
  display:flex;flex-direction:column;gap:8px;
  overflow:auto;
}
.console.immersive .fs-close{display:block}
.console.immersive .console-head{margin-bottom:0}
.console.immersive .console-head h1{font-size:.62rem}
.console.immersive .tagline{display:none}
.console.immersive .opts{margin-bottom:0}
.console.immersive .hud{margin:0}
.console.immersive .controls{margin-top:6px}

/* The play surface takes every pixel left over. */
.console.immersive .stage{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
}
/* Canvas games: shrink the bezel onto the playfield so the visible border is
   the real boundary. DOM-board games keep a full-width bezel, because their
   content (keyboards, tube racks) has no fixed aspect to hug. */
.console.immersive .stage.stage-canvas{
  width:-moz-fit-content;width:fit-content;max-width:100%;align-self:center;
}
/* DOM boards keep their normal vertical stacking, just centred in the space.
   Canvas stages are left alone so multi-pane layouts (e.g. Block Drop's well
   plus its next/hold panes) stay side by side. */
.console.immersive .stage.stage-dom{
  flex-direction:column;gap:14px;overflow:auto;
}
/* Canvas games keep their aspect ratio while fitting the free space.
   !important is needed because a few stages set inline sizing. */
.console.immersive .stage canvas.cv{
  width:auto !important;height:100% !important;
  max-width:100%;max-height:100%;margin:0 auto;
}
/* DOM-board games centre and scroll internally rather than growing the page. */
.console.immersive .stage > div:not(.overlay){max-height:100%}

@media (max-width:640px){
  .console.immersive{padding:8px 6px 10px}
  .console.immersive .console-head{display:none}
  .fs-close{width:38px;height:38px;top:6px;right:6px}
}
@media (orientation:landscape) and (max-height:520px){
  .console.immersive .console-head{display:none}
  .console.immersive .opts{display:none}
}

/* DOM-board games: grow into the space immersive mode frees up, capped by
   viewport height so the board can never push the controls off screen. */
.console.immersive .sud,
.console.immersive .numpad{width:min(92vw,58vh,560px)}
.console.immersive .rev,
.console.immersive .gmk{width:min(92vw,72vh,600px)}
.console.immersive .chimp,
.console.immersive .odd{width:min(92vw,66vh,560px)}
.console.immersive .ws .wsc{width:clamp(22px,min(5vw,4.4vh),40px)}
.console.immersive .tube{width:54px}
.console.immersive .tube .seg{height:38px}
.console.immersive .kbd .key{width:44px;height:46px;font-size:.6rem}
.console.immersive .hang-word{font-size:2.4rem}
.console.immersive .sud .scell{font-size:2rem}
.console.immersive .kbd{max-width:600px;margin-left:auto;margin-right:auto}
.console.immersive .ws-wrap{justify-content:center}

/* ================= WAVE 3 boards ================= */

/* ---- Pixel Cross (nonogram) ---- */
.nono{display:grid;margin:0 auto;width:-moz-fit-content;width:fit-content;
  user-select:none;-webkit-user-select:none;touch-action:none}
.nono .nclue{
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
  font-family:var(--hud);font-size:.98rem;color:var(--dim);
  padding:2px 5px;background:var(--panel);
}
.nono .nclue.col{flex-direction:column;justify-content:flex-end;align-items:center;gap:1px}
.nono .nclue.done{color:var(--faint);opacity:.45}
.nono .ncell{
  aspect-ratio:1;background:var(--screen);border:1px solid var(--line);
  cursor:pointer;padding:0;position:relative;
}
.nono .ncell.fill{background:var(--ac);border-color:var(--ac)}
.nono .ncell.mark::before,.nono .ncell.mark::after{
  content:'';position:absolute;left:22%;right:22%;top:48%;height:2px;
  background:var(--faint);
}
.nono .ncell.mark::before{transform:rotate(45deg)}
.nono .ncell.mark::after{transform:rotate(-45deg)}
.nono .ncell.b5{border-left-width:2px;border-left-color:var(--ac)}
.nono .ncell.b5r{border-top-width:2px;border-top-color:var(--ac)}
.nono .corner{background:var(--panel)}

/* ---- Regents (star battle) ---- */
.regents{display:grid;margin:0 auto;width:min(92vw,460px);
  border:3px solid var(--line);background:var(--line);gap:1px}
.regents .rgc{
  aspect-ratio:1;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;line-height:1;color:var(--void);
}
.regents .rgc.x::before{content:'×';font-family:var(--hud);font-size:1.4rem;color:rgba(0,0,0,.55)}
.regents .rgc.crown::before{content:'♛';font-size:1.3rem;color:#14101c;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.regents .rgc.bad{box-shadow:inset 0 0 0 3px var(--red)}

/* ---- Pipe Link ---- */
.pipe{display:grid;margin:0 auto;width:min(92vw,440px);
  border:3px solid var(--line);background:#120d1f;gap:2px;
  touch-action:none;user-select:none;-webkit-user-select:none}
.pipe .pc{
  aspect-ratio:1;position:relative;background:var(--screen);
  border:none;padding:0;cursor:pointer;
}
.pipe .pc .dot{
  position:absolute;inset:16%;border-radius:50%;box-shadow:var(--bevel);
}
.pipe .pc .seg{position:absolute;background:currentColor;border-radius:2px}
.pipe .pc .seg.h{top:38%;height:24%;left:0;right:0}
.pipe .pc .seg.v{left:38%;width:24%;top:0;bottom:0}
.pipe .pc .seg.u{left:38%;width:24%;top:0;height:62%}
.pipe .pc .seg.d{left:38%;width:24%;bottom:0;height:62%}
.pipe .pc .seg.l{top:38%;height:24%;left:0;width:62%}
.pipe .pc .seg.r{top:38%;height:24%;right:0;width:62%}

/* ---- Echo (n-back) ---- */
.nback{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  width:min(80vw,330px);margin:0 auto}
.nback .nbc{aspect-ratio:1;background:var(--panel);border:2px solid var(--line);
  box-shadow:var(--bevel-in)}
.nback .nbc.on{background:var(--ac);border-color:var(--ac)}
.nback .nbc.hit{background:var(--lime);border-color:var(--lime)}
.nback .nbc.miss{background:var(--red);border-color:var(--red)}

/* ---- Word Trail ---- */
.wt-wrap{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.wt{display:grid;gap:6px;touch-action:none;user-select:none;-webkit-user-select:none}
.wt .wtc{
  width:clamp(46px,11vw,66px);aspect-ratio:1;
  background:var(--panel);border:2px solid var(--line);box-shadow:var(--bevel);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.78rem;color:var(--cream);cursor:pointer;
}
.wt .wtc.pick{background:var(--ac);color:var(--void);border-color:var(--ac)}
.wt .wtc.good{background:var(--lime);color:var(--void);border-color:var(--lime)}
.wt .wtc.bad{background:var(--red);color:#fff;border-color:var(--red)}
.wt-side{min-width:150px;text-align:left}
.wt-cur{font-family:var(--px);font-size:.72rem;color:var(--ac);min-height:22px;
  margin-bottom:10px;word-break:break-all}
.wt-list{list-style:none;margin:0;padding:0;max-height:270px;overflow:auto}
.wt-list li{font-family:var(--hud);font-size:1.15rem;color:var(--dim);
  display:flex;justify-content:space-between;gap:12px}
.wt-list li span{color:var(--lime)}

/* ---- Cipher Break ---- */
.cryp{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;padding:6px}
.cryp .cw{display:flex;gap:3px}
.cryp .cl{display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;padding:2px}
.cryp .cl.punc{cursor:default}
.cryp .cl .plain{
  font-family:var(--hud);font-size:1.55rem;line-height:1;color:var(--ac);
  min-width:19px;text-align:center;
}
.cryp .cl .code{font-family:var(--px);font-size:.52rem;color:var(--dim)}
.cryp .cl .bar{width:19px;height:2px;background:var(--line)}
.cryp .cl.sel .bar{background:var(--ac);height:3px}
.cryp .cl.sel .plain{color:var(--cream)}
.cryp .cl.same .bar{background:var(--violet)}
.cryp .cl.given .plain{color:var(--lime)}

/* ---- Draughts ---- */
.drt{display:grid;grid-template-columns:repeat(8,1fr);width:min(92vw,440px);
  margin:0 auto;border:3px solid var(--line);gap:0}
.drt .dcell{aspect-ratio:1;border:none;padding:0;position:relative;
  display:flex;align-items:center;justify-content:center}
.drt .dcell.dark{background:#2b1f18;cursor:pointer}
.drt .dcell.light{background:#4a3a2c}
.drt .dcell.sel{box-shadow:inset 0 0 0 3px var(--ac)}
.drt .dcell.move::after{content:'';width:26%;height:26%;border-radius:50%;
  background:var(--ac);opacity:.55;position:absolute}
.drt .dcell.must{box-shadow:inset 0 0 0 3px var(--lime)}
.drt .pc2{width:74%;height:74%;border-radius:50%;box-shadow:var(--bevel);
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.drt .pc2.me{background:var(--cream)}
.drt .pc2.ai{background:#a32544;border:2px solid #ff6b7d;box-shadow:var(--bevel)}
.drt .pc2.king::after{content:'♚';color:var(--amber);font-size:1.1rem}

/* ---- Box Lines (dots and boxes) ---- */
.dab{position:relative;margin:0 auto;touch-action:none}
.dab .dot{position:absolute;width:9px;height:9px;background:var(--cream);
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
.dab .edge{position:absolute;background:var(--panel-hi);cursor:pointer;
  border:none;padding:0;border-radius:3px;transition:background .12s}
.dab .edge:hover{background:var(--faint)}
.dab .edge.on{background:var(--cream);cursor:default}
.dab .edge.mine{background:var(--cyan)}
.dab .edge.theirs{background:var(--magenta)}
.dab .box{position:absolute;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.6rem;pointer-events:none}
.dab .box.mine{background:rgba(79,227,232,.17);color:var(--cyan)}
.dab .box.theirs{background:rgba(255,61,139,.17);color:var(--magenta)}

/* ---- Mancala ---- */
.mnc{display:flex;align-items:stretch;gap:10px;justify-content:center;
  padding:8px;flex-wrap:nowrap}
.mnc .store{
  width:66px;min-height:190px;background:var(--panel);border:3px solid var(--line);
  border-radius:34px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;box-shadow:var(--bevel-in);
}
.mnc .store.mine{border-color:var(--cyan)}
.mnc .store.theirs{border-color:var(--magenta)}
.mnc .rows{display:flex;flex-direction:column;gap:10px;justify-content:center}
.mnc .row{display:flex;gap:8px}
.mnc .pit{
  width:56px;height:56px;border-radius:50%;background:var(--panel);
  border:2px solid var(--line);box-shadow:var(--bevel-in);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hud);font-size:1.5rem;color:var(--cream);padding:0;
}
.mnc .pit.mine{cursor:pointer;border-color:rgba(79,227,232,.5)}
.mnc .pit.mine:hover:not(:disabled){background:var(--panel-hi);border-color:var(--cyan)}
.mnc .pit.empty{color:var(--faint)}
.mnc .pit.sow{background:var(--ac);color:var(--void)}
.mnc .cnt{font-family:var(--hud);font-size:2rem;color:var(--cream)}
.mnc .lbl{font-family:var(--px);font-size:.36rem;color:var(--faint)}

@media (max-width:640px){
  .wt .wtc{width:clamp(38px,14vw,54px);font-size:.62rem}
  .wt-side{min-width:120px}
  .mnc .pit{width:38px;height:38px;font-size:1.1rem}
  .mnc .store{width:46px;min-height:140px}
  .cryp .cl .plain{font-size:1.2rem;min-width:15px}
  .cryp .cl .bar{width:15px}
}

.wt-side h3{
  font-family:var(--px);font-size:.46rem;color:var(--faint);
  margin:0 0 8px;letter-spacing:.06em;
}
.wt-list:empty::after{
  content:'None yet';font-family:var(--hud);font-size:1.1rem;color:var(--faint);
}

/* ================= Promo / ad slots =================
   Class names deliberately avoid the tokens `ad-rail`, `ad-tag` and
   `ad-slot`: those appear verbatim as generic cosmetic filters in
   EasyList, so any visitor with an ad blocker had the side rails and
   the ADVERTISEMENT labels hidden before they could ever see them. */
/* Flex rather than grid fr-units: rails are a fixed 160px and the content
   simply takes what is left. This cannot collapse if one rule fails to load. */
.layout{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  gap:22px;
  width:100%;
}
.layout > main{
  flex:0 1 auto;width:100%;min-width:0;
  /* .wrap/.wrap-narrow carry margin:0 auto. Inside a flex row an auto
     margin eats ALL free space and overrides justify-content, which was
     shoving the rails flush against the viewport edges — the darkest
     part of the CRT vignette, where they read as invisible. */
  margin-left:0;margin-right:0;
}
/* main must not swallow the free space, or the rails get pushed flush
   against the viewport edges — the darkest part of the CRT vignette. */
.promo-rail{
  flex:0 0 var(--rail-w);
  width:var(--rail-w);
  display:flex;flex-direction:column;gap:18px;align-items:center;
  position:sticky;top:84px;padding:8px 0;
}

.promo{
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px),
    var(--panel-hi);
  border:2px dashed var(--faint);
  text-align:center;
  box-sizing:border-box;
}
.promo-label{
  font-family:var(--px);font-size:.4rem;letter-spacing:.14em;
  color:var(--dim);display:block;
}
.promo-pitch{
  font-family:var(--px);font-size:.62rem;color:var(--ac);
  line-height:1.7;display:block;
}
.promo-mail{
  font-family:var(--hud);font-size:1.15rem;color:var(--cream);
  text-decoration:none;border-bottom:1px dotted var(--faint);
  display:inline-block;overflow-wrap:break-word;max-width:100%;
}
.promo-mail:hover{color:var(--cream);border-bottom-color:var(--cream)}

/* Vertical rail unit */
.promo-tall{
  width:var(--rail-w);height:600px;
  flex-direction:column;gap:14px;padding:18px 6px;
}
.promo-tall .promo-pitch{font-size:.5rem}
.promo-tall .promo-mail{font-size:1rem;white-space:nowrap}

/* Horizontal banner */
.promo-wide{
  width:100%;max-width:728px;min-height:90px;
  margin:0 auto 20px;
  flex-direction:column;gap:6px;padding:12px 16px;
}
main > .promo-wide:last-of-type{margin:20px auto 0}

/* Rail width steps down with the viewport so laptops — including 1366px
   screens at 125% OS scaling, which report only ~1092 CSS px — still get
   side ads. Below 980px there is genuinely no room and they drop away. */
:root{--rail-w:160px}
@media (max-width:1439px){
  :root{--rail-w:130px}
  .promo-tall .promo-pitch{font-size:.46rem}
  .promo-tall .promo-mail{font-size:.92rem}
  .layout{gap:18px}
}
@media (max-width:1199px){
  :root{--rail-w:110px}
  .promo-tall{padding:16px 4px;gap:10px}
  .promo-tall .promo-label{font-size:.32rem;letter-spacing:.08em}
  .promo-tall .promo-pitch{font-size:.38rem;line-height:1.8}
  .promo-tall .promo-mail{font-size:.82rem}
  .layout{gap:12px}
}
/* Narrow screens: rather than hiding the side units (which loses inventory and
   makes them look broken), the rails drop out of the flanking position and the
   units reflow into full-width banners — left rail above the content, right
   rail below it. They are visible at every viewport width. */
@media (max-width:979px){
  .layout{flex-direction:column;align-items:stretch;gap:0}
  .promo-rail{
    flex:0 0 auto;width:100%;position:static;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:14px;padding:0 12px;
  }
  .promo-rail-left{order:-1;margin-bottom:18px}
  .promo-rail-right{margin-top:4px}
  .promo-tall{
    width:100%;max-width:728px;height:auto;min-height:84px;
    flex-direction:column;gap:6px;padding:12px 16px;
  }
  .promo-tall .promo-label{font-size:.4rem;letter-spacing:.14em}
  .promo-tall .promo-pitch{font-size:.56rem;line-height:1.7}
  .promo-tall .promo-mail{font-size:1.05rem;white-space:normal}
}
@media (max-width:640px){
  .promo-wide{min-height:76px;padding:10px 12px}
  .promo-wide .promo-pitch{font-size:.52rem}
  .promo-wide .promo-mail{font-size:1rem}
}
@media print{ .promo, .promo-rail{display:none !important} }