:root{
  --bg:#0d1117; --bg2:#141b24; --panel:#171f29; --panel2:#1e2833;
  --line:#2b3644; --line2:#3a4757;
  --ink:#e8edf3; --ink2:#a7b4c4; --ink3:#6d7d90;
  --brass:#d8a657; --brass2:#f0c07a;
  --red:#e06c63; --green:#7fbf7f; --blue:#6ba6d6; --violet:#a98fd1;
  --light:#b9ae94; --dark:#6f7f6d;
  --fog:#2a3441;
  --sq:min(9vw,66px);
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, #1b2735 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #1a2230 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:650;letter-spacing:-.01em;line-height:1.25}
a{color:var(--brass2)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- chrome ---------- */
header{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,27,36,.95),rgba(13,17,23,.7));
  position:sticky;top:0;z-index:40;backdrop-filter:blur(8px)
}
.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.brand .glyph{font-size:26px;filter:drop-shadow(0 0 12px rgba(216,166,87,.35))}
.brand b{color:var(--brass)}
.tabs{display:flex;gap:4px;margin-left:auto;background:var(--panel);padding:4px;border-radius:999px;border:1px solid var(--line)}
.tabs button{
  background:none;border:0;color:var(--ink2);font:inherit;font-size:14px;font-weight:600;
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:.15s
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--brass);color:#22190a}

main{max-width:1280px;margin:0 auto;padding:22px}
.view[hidden]{display:none}

/* ---------- play layout ---------- */
.play{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start}
@media(max-width:1040px){.play{grid-template-columns:1fr}}

.boardwrap{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)
}

/* the referee's voice */
.crier{
  display:flex;align-items:center;gap:12px;min-height:56px;margin-bottom:14px;padding:12px 16px;
  background:linear-gradient(90deg,rgba(216,166,87,.10),transparent);
  border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:8px
}
.crier .who{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--brass);font-weight:700;white-space:nowrap}
.crier .say{font-size:17px;font-weight:600}
.crier .say.quiet{color:var(--ink3);font-weight:400;font-style:italic}
.crier.flash{animation:flash .5s}
@keyframes flash{0%{background:rgba(216,166,87,.3)}100%{background:linear-gradient(90deg,rgba(216,166,87,.10),transparent)}}

.board{
  display:grid;grid-template-columns:repeat(8,var(--sq));grid-template-rows:repeat(8,var(--sq));
  border-radius:8px;overflow:hidden;border:1px solid #0a0d11;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 40px -20px #000;
  margin:0 auto;position:relative;user-select:none;touch-action:manipulation
}
.board.shake{animation:shake .34s}
@keyframes shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
}
.sq{
  position:relative;display:grid;place-items:center;cursor:pointer;
  font-size:calc(var(--sq)*.78);line-height:1
}
.sq.l{background:var(--light)} .sq.d{background:var(--dark)}
/* squares you cannot see are literally fogged */
.sq.fog::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(20,27,36,.55) 0 6px,rgba(20,27,36,.42) 6px 12px);
  backdrop-filter:blur(1px)
}
.sq .coord{position:absolute;font-size:9px;font-weight:700;opacity:.45;color:#12161c}
.sq .coord.f{right:3px;bottom:1px} .sq .coord.r{left:3px;top:1px}

.piece{position:relative;z-index:2;text-shadow:0 2px 3px rgba(0,0,0,.5);pointer-events:none}
.piece.w{color:#fdfcf8} .piece.b{color:#232a31}
.piece.ghost{opacity:.42;z-index:1}          /* x-ray / heatmap reveal */

.sq.sel{box-shadow:inset 0 0 0 4px var(--brass)}
.sq.target::before{
  content:"";position:absolute;width:26%;height:26%;border-radius:50%;
  background:rgba(216,166,87,.62);z-index:3
}
/* a pawn try is a shot into the dark: a ring, not a promise */
.sq.trytarget::before{
  content:"";position:absolute;width:52%;height:52%;border-radius:50%;
  border:3px dashed rgba(216,166,87,.72);z-index:3
}
.sq.lastcap{box-shadow:inset 0 0 0 3px var(--red)}
.sq.checked{background:radial-gradient(circle,#c0473f 10%,transparent 72%),var(--dark)}
.sq .mark{position:absolute;z-index:4;font-size:calc(var(--sq)*.42);font-weight:800;pointer-events:none}
.sq .mark.q{color:var(--blue)} .sq .mark.x{color:var(--red)} .sq .mark.o{color:var(--green)}
.sq .heat{position:absolute;inset:0;z-index:1;background:var(--violet);pointer-events:none}

/* ---------- side panel ---------- */
.side{display:flex;flex-direction:column;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.card h3{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink3);margin-bottom:11px}

.row{display:flex;gap:8px;flex-wrap:wrap}
button.btn{
  flex:1;min-width:0;background:var(--panel2);color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.14s
}
button.btn:hover:not(:disabled){border-color:var(--brass);color:var(--brass2);transform:translateY(-1px)}
button.btn:disabled{opacity:.38;cursor:not-allowed}
button.btn.primary{background:var(--brass);color:#22190a;border-color:var(--brass)}
button.btn.primary:hover:not(:disabled){background:var(--brass2);color:#22190a}
button.btn.danger:hover:not(:disabled){border-color:var(--red);color:var(--red)}

select{
  width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:9px 10px;font:inherit;font-size:14px;cursor:pointer
}
label.field{display:block;margin-bottom:10px}
label.field span{display:block;font-size:12px;color:var(--ink3);margin-bottom:5px}
label.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);cursor:pointer;padding:3px 0}
label.check input{accent-color:var(--brass);width:15px;height:15px;cursor:pointer}

/* intel readouts */
.intel{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}
.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.stat .v small{font-size:12px;color:var(--ink3);font-weight:500}

/* the log */
.log{max-height:290px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.log::-webkit-scrollbar{width:7px}
.log::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.log .e{display:flex;gap:9px;padding:5px 7px;border-radius:5px}
.log .e .n{color:var(--ink3);font-size:11.5px;min-width:26px;text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.log .e.cap{background:rgba(224,108,99,.10);color:#f0a49d}
.log .e.chk{background:rgba(107,166,214,.10);color:#a5cbe8}
.log .e.ill{background:rgba(169,143,209,.10);color:#c6b3e2}
.log .e.try{background:rgba(127,191,127,.10);color:#a8d6a8}
.log .e.sys{color:var(--ink3);font-style:italic}
.log .e.big{background:rgba(216,166,87,.14);color:var(--brass2);font-weight:650}

/* ---------- overlay ---------- */
.overlay{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(6,9,13,.82);backdrop-filter:blur(5px)
}
.overlay[hidden]{display:none}
.modal{
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:30px 34px;
  text-align:center;max-width:440px;box-shadow:0 30px 80px -20px #000
}
.modal .big{font-size:46px;margin-bottom:8px}
.modal h2{font-size:25px;margin-bottom:8px}
.modal p{color:var(--ink2);margin-bottom:20px}
.promo{display:flex;gap:10px;justify-content:center;margin-top:6px}
.promo button{
  font-size:38px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  width:70px;height:70px;cursor:pointer;color:var(--ink);transition:.14s
}
.promo button:hover{border-color:var(--brass);transform:translateY(-2px)}

/* ---------- prose (learn / engine) ---------- */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:27px;margin:44px 0 12px;color:var(--brass2)}
.prose h2:first-child{margin-top:8px}
.prose h3{font-size:17px;margin:26px 0 7px}
.prose p{color:var(--ink2);margin-bottom:14px}
.prose ul,.prose ol{color:var(--ink2);margin:0 0 14px 22px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink);font-weight:650}
.prose .lede{font-size:18.5px;color:var(--ink);border-left:3px solid var(--brass);padding-left:16px;margin-bottom:26px}
.prose .aside{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 18px;margin:20px 0}
.prose .aside p:last-child{margin-bottom:0}
.prose .aside .tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--brass);font-weight:700;display:block;margin-bottom:6px}

.say{color:var(--brass2);font-weight:600}
.quiet{color:var(--ink3);font-style:italic}

/* the referee's phrasebook */
.phrase{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:18px 0}
.phrase dt{color:var(--brass2);font-weight:600;white-space:nowrap}
.phrase dd{color:var(--ink2)}

/* demo diagrams */
.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px;margin:22px 0}
.demo{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.demo .mini{--sq:26px;display:grid;grid-template-columns:repeat(8,26px);grid-template-rows:repeat(8,26px);
  margin:0 auto 11px;border-radius:5px;overflow:hidden;border:1px solid #0a0d11}
.demo .mini .sq{font-size:19px;cursor:default}
.demo .cap{font-size:12.5px;color:var(--ink3);text-align:center;min-height:36px}
.demo .cap b{color:var(--brass2);display:block;font-size:13.5px;margin-bottom:2px}
.demo button{
  width:100%;margin-top:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink2);
  border-radius:7px;padding:7px;font:inherit;font-size:12.5px;cursor:pointer
}
.demo button:hover{border-color:var(--brass);color:var(--brass2)}

footer{text-align:center;color:var(--ink3);font-size:12.5px;padding:40px 20px}