/* GAME.X shared styles — game.x/, /checkers/, /checkers/download/ (linked RELATIVELY so the
   navigate.st/bns/game.x/ gateway path works too). Theme: data-theme="dark|light" on <html>. */
:root{
  /* Official Bitcoin Cash brand palette (whybitcoincash.com) */
  --bch-green:#0AC18E;
  --bch-black:#000000;
  --bch-white:#F8FDFF;
  --bch-slate:#253A49;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
/* Dark (BCH black bg, white type, green accent) */
:root[data-theme="dark"]{
  --bg:var(--bch-black);
  --panel:#0e0e0e;
  --line:rgba(248,253,255,.10);
  --txt:var(--bch-white);
  --dim:#7a8388;
  --wm-a:var(--bch-white);
  --wm-b:var(--bch-green);
  --glow:rgba(10,193,142,.55);
  --glow-soft:rgba(10,193,142,.22);
  --bg-blob-a:rgba(10,193,142,.14);
  --bg-blob-b:rgba(248,253,255,.03);
}
/* Light (BCH white bg, black type, green accent) */
:root[data-theme="light"]{
  --bg:var(--bch-white);
  --panel:#ffffff;
  --line:rgba(37,58,73,.14);
  --txt:var(--bch-black);
  --dim:var(--bch-slate);
  --wm-a:var(--bch-black);
  --wm-b:var(--bch-green);
  --glow:rgba(10,193,142,.35);
  --glow-soft:rgba(10,193,142,.14);
  --bg-blob-a:rgba(10,193,142,.10);
  --bg-blob-b:rgba(37,58,73,.03);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:var(--mono);min-height:100vh;overflow-x:hidden}
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--bg-blob-a), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, var(--bg-blob-b), transparent 60%),
    var(--bg);
  padding:44px 20px 96px;
  transition:background-color .2s ease, color .2s ease;
}
/* faint CRT scanlines only in dark */
:root[data-theme="dark"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.wrap{max-width:960px;margin:0 auto;position:relative;z-index:3}

.theme-toggle{
  position:fixed;top:16px;right:16px;z-index:10;
  background:transparent;color:var(--dim);border:1px solid var(--line);
  padding:7px 12px;border-radius:6px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:.15s;
}
.theme-toggle:hover{color:var(--bch-green);border-color:var(--bch-green)}

header{margin-bottom:56px;padding-top:18px}
.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand-mark{width:64px;height:64px;flex:0 0 64px}
.logo{
  font-weight:900;font-size:clamp(56px,11vw,120px);letter-spacing:.02em;
  line-height:.9;color:var(--wm-a);
}
.logo .dot{color:var(--wm-b)}
.logo .x{
  color:var(--wm-b);
  text-shadow:0 0 8px var(--glow),0 0 24px var(--glow-soft);
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--wm-b);opacity:.95;
  padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:4px;
}
.kicker .bmark{width:16px;height:16px;flex:0 0 16px}

.tagline{
  margin-top:22px;max-width:640px;
  font-size:clamp(18px,2.2vw,22px);line-height:1.5;
  color:var(--txt);opacity:.92;
  font-family:var(--sans);
}
.tagline b{color:var(--wm-b);font-weight:600}

/* Section labels */
.section-label{
  display:flex;align-items:center;gap:14px;
  margin:64px 0 22px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--wm-b);font-weight:700;
}
.section-label::before{
  content:"";width:24px;height:1px;background:var(--wm-b);opacity:.5;
}
.section-label::after{
  content:"";flex:1;height:1px;background:var(--line);
}

/* --- GAMES section --- */
.games{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.game-card{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border:1px solid var(--line);background:var(--panel);border-radius:6px;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.game-card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:var(--wm-b);
}
.game-card:hover{border-color:var(--wm-b);transform:translateY(-2px);box-shadow:0 8px 24px var(--glow-soft)}
.game-card .avatar{width:72px;height:72px;flex:0 0 72px;border-radius:8px;overflow:hidden}
.game-card .body{flex:1;min-width:0}
.game-card .title{
  font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.02em;
  color:var(--txt);margin-bottom:6px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.game-card .badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  padding:3px 8px;border-radius:3px;
  background:var(--wm-b);color:var(--bch-black);
}
.game-card .desc{
  font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--txt);opacity:.85;
  margin-bottom:8px;
}
.game-card .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);
}
.game-card .meta .canonical{color:var(--wm-b)}
/* Placeholder card (SDK / coming-soon) */
.game-card.placeholder{opacity:.55;border-style:dashed;cursor:default}
.game-card.placeholder:hover{transform:none;border-color:var(--line);box-shadow:none}
.game-card.placeholder .avatar{opacity:.5}

/* --- Feature grid (existing 3-up) --- */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  border:1px solid var(--line);background:var(--panel);
  padding:22px 22px 20px;border-radius:6px;
  position:relative;overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--wm-b);transform:translateY(-2px)}
.card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:var(--wm-b);
}
.card h3{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--wm-b);margin-bottom:10px;font-weight:700;
}
.card p{
  font-family:var(--sans);
  font-size:14.5px;line-height:1.55;color:var(--txt);opacity:.9;
}
.card .num{
  position:absolute;right:14px;top:12px;
  font-size:34px;font-weight:900;color:var(--wm-b);opacity:.18;
  font-family:var(--mono);
}

.status{
  margin-top:56px;padding:24px 22px;
  border:1px solid var(--line);background:var(--panel);border-radius:6px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.status .blink{
  display:inline-block;width:12px;height:12px;border-radius:2px;
  background:var(--wm-b);box-shadow:0 0 12px var(--glow);
  animation:blink 1.1s steps(2,end) infinite;
}
@keyframes blink{50%{opacity:.2}}
.status .label{color:var(--wm-b);letter-spacing:.25em;text-transform:uppercase;font-size:12px;font-weight:700}
.status .msg{color:var(--txt);opacity:.9;font-family:var(--sans);font-size:15px}

footer{
  margin-top:72px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  color:var(--dim);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
}
footer a{color:var(--wm-b);text-decoration:none;border-bottom:1px dotted var(--wm-b)}
footer a:hover{opacity:.7}
footer .wm{color:var(--txt)}
footer .wm .g{color:var(--wm-b)}
footer .bmark-inline{width:14px;height:14px;vertical-align:-3px;margin-right:4px}

@media(max-width:480px){
  body{padding:28px 16px 60px}
  .brand{gap:10px}
  .brand-mark{width:52px;height:52px;flex:0 0 52px}
  .status{padding:20px 18px}
  .theme-toggle{top:12px;right:12px;padding:6px 10px}
  .game-card{padding:16px;gap:12px}
  .game-card .avatar{width:56px;height:56px;flex:0 0 56px}
}

/* ── Shared additions: product pages (/checkers/, /checkers/download/) ── */
.crumbs{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:28px}
.crumbs a{color:var(--wm-b);text-decoration:none}
.crumbs a:hover{opacity:.75}
.hero{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.hero .avatar{width:112px;height:112px;flex:0 0 112px;border-radius:12px;overflow:hidden}
.hero h1{font-weight:900;font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:.01em;color:var(--wm-a)}
.hero h1 .x{color:var(--wm-b);text-shadow:0 0 8px var(--glow),0 0 24px var(--glow-soft)}
.lead{font-family:var(--sans);font-size:clamp(17px,2vw,20px);line-height:1.55;max-width:680px;opacity:.92;margin-top:10px}
.lead b{color:var(--wm-b);font-weight:600}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:14px 22px;border-radius:6px;border:1px solid var(--wm-b);
  font-family:var(--mono);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:.15s;min-height:48px;
}
.btn.primary{background:var(--wm-b);color:var(--bch-black);box-shadow:0 6px 22px var(--glow-soft)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--glow)}
.btn.ghost{background:transparent;color:var(--wm-b)}
.btn.ghost:hover{background:var(--glow-soft)}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.game-card .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.game-card .actions .btn{padding:9px 14px;font-size:12px;min-height:40px}
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{list-style:none;counter-increment:s;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:18px 18px 16px 58px;position:relative;font-family:var(--sans);font-size:14.5px;line-height:1.55}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;font-family:var(--mono);font-weight:900;font-size:26px;color:var(--wm-b)}
.steps li b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--wm-b);margin-bottom:4px}
.platforms{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.platform{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:22px;position:relative;display:flex;flex-direction:column;gap:12px}
.platform.mine{border-color:var(--wm-b);box-shadow:0 8px 24px var(--glow-soft)}
.platform .you{position:absolute;top:14px;right:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--bch-black);background:var(--wm-b);padding:3px 8px;border-radius:3px;display:none}
.platform.mine .you{display:inline-block}
.platform h2{font-size:16px;letter-spacing:.06em;font-weight:800;display:flex;align-items:center;gap:10px}
.platform p,.platform ol{font-family:var(--sans);font-size:14px;line-height:1.55;opacity:.9}
.platform ol{padding-left:20px}
.platform .soon{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.platform .btn{margin-top:auto}
.faq details{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:16px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.04em}
.faq details p{font-family:var(--sans);font-size:14.5px;line-height:1.6;opacity:.9;margin-top:10px}
@media(max-width:480px){
  .hero{gap:16px}.hero .avatar{width:84px;height:84px;flex:0 0 84px}
  .ctas .btn{flex:1 1 100%}
}
.verify{font-size:12px}
.verify summary{cursor:pointer;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.verify p{margin-top:8px;font-size:12px}
.verify code{display:block;word-break:break-all;font-family:var(--mono);font-size:11px;color:var(--txt);opacity:.85;margin-top:2px}
.gw-note{font-family:var(--sans);font-size:14px;line-height:1.6;opacity:.9;margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:6px;max-width:680px}
.gw-note a{color:var(--wm-b)}