/* ============================================================
   Chessary — shared stylesheet
   Calm, focused, guided. Deep teal accent, warm slate neutrals,
   serif display (Fraunces) + clean body (Public Sans).
   ============================================================ */
:root {
  --bg:#eef1f4; --panel:#fff; --panel-2:#f5f7f9; --ink:#1b2430; --ink-soft:#5a6675; --ink-faint:#8995a4; --line:#dde2e8;
  --accent:#0e7367; --accent-2:#0b5c52; --accent-soft:#d7ece9;
  --good:#1a7f43; --good-soft:#dcf2e3; --warn:#b07d1a; --warn-soft:#f6ecd3; --bad:#b23a30; --bad-soft:#f8ded9;
  --board-l:#e9e3d6; --board-d:#93a0a6; --gold:#d9b84a; --from:#e8d98a; --to:#cdbb55;
  --font-display:"Fraunces",Georgia,serif; --font-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --maxw:980px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0f141a; --panel:#1a222b; --panel-2:#212b35; --ink:#e9eef3; --ink-soft:#9aa7b5; --ink-faint:#6b7784; --line:#2d3842;
  --accent:#5ccabe; --accent-2:#7ad8cc; --accent-soft:#15322f;
  --good:#67cd86; --good-soft:#153721; --warn:#dcac52; --warn-soft:#352b14; --bad:#ef867c; --bad-soft:#3b1e1b;
  --board-l:#b4ab9b; --board-d:#56666d; --gold:#d9b84a; --from:#8a7a34; --to:#b5a043;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f141a; --panel:#1a222b; --panel-2:#212b35; --ink:#e9eef3; --ink-soft:#9aa7b5; --ink-faint:#6b7784; --line:#2d3842;
  --accent:#5ccabe; --accent-2:#7ad8cc; --accent-soft:#15322f;
  --good:#67cd86; --good-soft:#153721; --warn:#dcac52; --warn-soft:#352b14; --bad:#ef867c; --bad-soft:#3b1e1b;
  --board-l:#b4ab9b; --board-d:#56666d; --gold:#d9b84a; --from:#8a7a34; --to:#b5a043;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }

/* ---- top nav ---- */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:18px; padding:12px 16px; }
.brand { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; text-decoration:none; color:var(--ink); }
.brand .dot { color:var(--accent); }
.nav-links { display:flex; gap:4px; margin-left:6px; }
.nav-links a { font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:7px 12px; border-radius:8px; transition:all .15s; }
.nav-links a:hover { color:var(--ink); background:var(--panel-2); }
.nav-links a.active { color:var(--accent); background:var(--accent-soft); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.points-chip { display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:4px 11px; font-size:12.5px; font-weight:600; }
.points-chip .pdot { width:13px;height:13px; border-radius:50%; background:var(--gold); }
.av { width:30px;height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }

@media (max-width:620px){ .nav-links a { padding:7px 9px; font-size:13px; } .brand{ font-size:18px; } }

/* ---- page shell ---- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:28px 16px 72px; }
.page-head { margin-bottom:22px; }
.eyebrow { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 6px; }
h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,5vw,36px); line-height:1.05; margin:0 0 8px; text-wrap:balance; }
h2 { font-family:var(--font-display); font-weight:600; font-size:22px; margin:0 0 6px; }
.sub { color:var(--ink-soft); margin:0; font-size:15px; max-width:60ch; }
.section-title { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:24px 0 10px; }

/* ---- cards ---- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:20px; box-shadow:0 1px 2px rgba(20,30,45,.04); }
.card + .card { margin-top:14px; }
.card h3 { font-size:15px; margin:0 0 10px; }

/* ---- buttons / inputs ---- */
.btn { background:var(--accent); color:#fff; border:none; font-family:inherit; font-size:15px; font-weight:600; padding:12px 22px; border-radius:11px; cursor:pointer; transition:filter .15s, transform .05s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.btn:hover { filter:brightness(1.07); } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.5; cursor:default; }
.btn.block { width:100%; }
.btn.alt { background:transparent; color:var(--accent); border:1.5px solid var(--line); }
.btn.alt:hover { border-color:var(--accent); filter:none; }
.btn.danger { background:transparent; color:var(--bad); border:1.5px solid var(--line); } .btn.danger:hover { border-color:var(--bad); }
input[type=text], input[type=email] { border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:15px; background:var(--panel-2); color:var(--ink); }
input:focus-visible, .btn:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.inrow { display:flex; gap:8px; flex-wrap:wrap; } .inrow input { flex:1 1 200px; min-width:0; }

.status { font-size:13.5px; color:var(--ink-soft); margin:10px 0 0; min-height:18px; }
.status.err { color:var(--bad); } .status.ok { color:var(--good); }
.spinner { display:inline-block; width:14px;height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner { animation:none; } }

.muted { color:var(--ink-soft); } .tiny { font-size:12.5px; } .faint { color:var(--ink-faint); }
.pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:99px; }
.pill-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent); }

/* ---- focus (hero weakness) card ---- */
.focus-card { background:var(--accent); color:#fff; border-radius:16px; padding:20px; }
.focus-card .lab { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.82; }
.focus-card .big { font-family:var(--font-display); font-weight:600; font-size:clamp(20px,3vw,26px); margin:5px 0 8px; line-height:1.12; }
.focus-card p { font-size:13.5px; opacity:.93; margin:0 0 14px; max-width:52ch; }
.focus-card .btn { background:#fff; color:var(--accent-2); }

/* ---- stat tiles ---- */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:620px){ .tiles { grid-template-columns:repeat(2,1fr); } }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px; }
.tile .k { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.tile .v { font-family:var(--font-display); font-weight:600; font-size:24px; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px; }
.tile .v small { font-size:13px; font-family:var(--font-body); color:var(--ink-faint); font-weight:600; }
.tile .up { color:var(--good); } .tile .down { color:var(--bad); }

/* ---- lists ---- */
.list { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:2px 15px; }
.lrow { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.lrow:last-child { border-bottom:none; }
.lrow .nm { flex:1; } .lrow .nm small { display:block; color:var(--ink-faint); font-size:12px; }
.res { font-weight:700; font-size:12px; padding:2px 9px; border-radius:6px; }
.res.w { background:var(--good-soft); color:var(--good);} .res.l { background:var(--bad-soft); color:var(--bad);} .res.d { background:var(--warn-soft); color:var(--warn);}

/* ---- meters / skills ---- */
.meter { height:8px; background:var(--panel-2); border-radius:99px; overflow:hidden; } .meter i { display:block; height:100%; border-radius:99px; }
.skill { display:flex; align-items:center; gap:12px; font-size:13.5px; margin-bottom:11px; }
.skill .nm { flex:0 0 110px; } .skill .meter { flex:1; } .skill .sc { flex:0 0 38px; text-align:right; color:var(--ink-faint); font-variant-numeric:tabular-nums; font-size:12.5px; }
.bar { display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--panel-2); } .bar i.w{ background:var(--good);} .bar i.d{ background:var(--warn);} .bar i.l{ background:var(--bad);}

/* ---- board ---- */
.board-shell { display:flex; justify-content:center; }
.board { width:min(100%,360px); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:8px; overflow:hidden; border:1px solid var(--line); user-select:none; }
.sq { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; } .sq.l{ background:var(--board-l);} .sq.d{ background:var(--board-d);}
.sq.from::before,.sq.to::before,.sq.hl::before{ content:""; position:absolute; inset:0; }
.sq.from::before{ background:var(--from); opacity:.6; } .sq.to::before{ background:var(--to); opacity:.65; } .sq.hl::before{ background:var(--gold); opacity:.5; }
.sq.ring::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--accent); opacity:.85; }
.pc { position:relative; z-index:1; font-size:min(8vw,32px); line-height:1; } .pc.w{ color:#fbfbf7; text-shadow:0 0 1px #000,0 1px 2px rgba(0,0,0,.4);} .pc.b{ color:#161f27; }

/* ---- quiz opts ---- */
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { text-align:left; width:100%; background:var(--panel-2); border:1.5px solid var(--line); border-radius:11px; padding:13px 15px; font-family:inherit; font-size:15px; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; display:flex; gap:11px; align-items:flex-start; }
.opt:hover:not(:disabled){ border-color:var(--accent); } .opt:disabled{ cursor:default; }
.opt .t { flex:0 0 22px; height:22px; border-radius:6px; background:var(--line); color:var(--ink); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.opt.correct{ border-color:var(--good); background:var(--good-soft);} .opt.correct .t{ background:var(--good); color:#fff; }
.opt.wrong{ border-color:var(--bad); background:var(--bad-soft);} .opt.wrong .t{ background:var(--bad); color:#fff; }
.opt.dim{ opacity:.55; }
.explain { margin-top:15px; border-top:1px solid var(--line); padding-top:14px; display:none; } .explain.show{ display:block; }
.explain .verdict { font-weight:700; font-size:15px; margin:0 0 8px; } .verdict.vg{ color:var(--good);} .verdict.vb{ color:var(--bad);}
.explain p { font-size:14px; margin:0 0 10px; }
.why-wrong { font-size:13px; color:var(--ink-soft); background:var(--panel-2); border-radius:9px; padding:10px 12px; margin:0 0 12px; } .why-wrong b{ color:var(--ink); }
.principle { font-size:12.5px; color:var(--accent); background:var(--accent-soft); border-radius:9px; padding:9px 12px; font-weight:600; }

/* ---- progress chart ---- */
.chart { width:100%; height:130px; display:block; }

/* ---- clocks / play ---- */
.clock { font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:600; font-size:19px; padding:4px 13px; border-radius:8px; background:var(--panel-2); }
.clock.run { background:var(--accent-soft); color:var(--accent); }
.pbar { display:flex; justify-content:space-between; align-items:center; padding:8px 13px; background:var(--panel); border:1px solid var(--line); border-radius:10px; margin:6px 0; font-size:14px; }
.pbar .who { font-weight:600; } .pbar .who small { color:var(--ink-faint); font-weight:400; }
.banner { text-align:center; padding:14px; border-radius:12px; font-weight:600; margin:12px 0; display:none; } .banner.show{ display:block; }
.banner.win{ background:var(--accent-soft); color:var(--accent);} .banner.loss{ background:var(--bad-soft); color:var(--bad);} .banner.draw{ background:var(--panel-2); color:var(--ink-soft);}

/* ---- insights ---- */
.insights { display:flex; flex-direction:column; gap:10px; }
.insight { border-radius:12px; padding:14px 16px; border-left:4px solid; font-size:14.5px; }
.insight.good{ background:var(--good-soft); border-color:var(--good);} .insight.warn{ background:var(--warn-soft); border-color:var(--warn);} .insight.bad{ background:var(--bad-soft); border-color:var(--bad);} .insight.neutral{ background:var(--panel); border-color:var(--line);}
.insight b { display:block; margin-bottom:3px; }

/* ---- hero (landing part of index) ---- */
.hero { text-align:center; padding:30px 0 14px; }
.hero h1 { font-size:clamp(30px,6vw,46px); }
.hero .lede { font-size:clamp(15px,2.4vw,18px); color:var(--ink-soft); max-width:46ch; margin:12px auto 0; }
.contrast { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; margin:18px 0 8px; font-size:14px; }
.chip { background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:5px 13px; font-weight:600; } .chip.strike{ text-decoration:line-through; color:var(--ink-faint); }

.footer { border-top:1px solid var(--line); margin-top:30px; padding:20px 16px 40px; text-align:center; font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
.footer b { color:var(--ink-soft); }
.disclaimer { font-size:12.5px; color:var(--ink-faint); background:var(--panel); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-top:16px; }

.hide { display:none !important; }
.center { text-align:center; }
.row { display:flex; gap:10px; flex-wrap:wrap; } .row.end{ justify-content:flex-end; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:620px){ .grid-2{ grid-template-columns:1fr; } }