/* Azleem Chess — design system.
   Tokens drive two themes (dark default + light via [data-theme="light"]).
   Only surfaces/ink/lines flip; the indigo accent + semantic colors are shared. */
:root{
  color-scheme:dark;
  /* surfaces */
  --bg:#0c0f16; --bg-2:#080a10; --card:#141a23; --card-2:#1a2230;
  --ink:#e7edf5; --muted:#8a97a9; --line:#232c3a; --line-2:#2f3a4b;
  /* brand accent (indigo) */
  --accent:#6d78f0; --accent-hover:#8b93f6; --accent-ink:#ffffff; --accent-soft:rgba(109,120,240,.15);
  /* semantic */
  --win:#34d399; --loss:#f87171; --draw:#8a97a9; --blunder:#f87171; --mistake:#fbbf24;
  /* board (kept consistent across themes) */
  --sq-light:#e8edf5; --sq-dark:#6b81a6; --sel:#f6c945; --tgt:rgba(109,120,240,.55); --last:rgba(246,201,69,.34);
  /* eval bar (white fill on a dark track — standard, both themes) */
  --eval-track:#090c11; --eval-fill:#eef2f7; --eval-ink:#090c11;
  /* depth */
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.40);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --ring:0 0 0 3px var(--accent-soft);
  --radius:15px; --radius-sm:10px;
  --glow:radial-gradient(900px 460px at 50% -160px,rgba(109,120,240,.16),transparent 70%);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f5fb; --bg-2:#e7ecf6; --card:#ffffff; --card-2:#f6f8fd;
  --ink:#182031; --muted:#5b6676; --line:#e4e9f2; --line-2:#d2dae8;
  --accent:#5a5fe6; --accent-hover:#4a4fd8; --accent-ink:#ffffff; --accent-soft:rgba(90,95,230,.11);
  --win:#059669; --loss:#dc2626; --draw:#5b6676; --blunder:#dc2626; --mistake:#d97706;
  --sq-light:#eef2f8; --sq-dark:#8098c1; --sel:#eab308; --tgt:rgba(90,95,230,.42); --last:rgba(234,179,8,.30);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.10);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --glow:radial-gradient(900px 460px at 50% -160px,rgba(90,95,230,.10),transparent 70%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}
/* soft accent glow up top for a bit of life — sits behind everything */
body::before{content:"";position:fixed;inset:0;background:var(--glow);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:20px 18px 64px}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* ---- header ---- */
header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 2px 18px}
header h1{font-size:21px;margin:0;letter-spacing:-.02em;font-weight:750;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 72%,var(--muted)));
  -webkit-background-clip:text;background-clip:text}
header .sub{color:var(--muted);font-size:13px}
.spacer{flex:1}
#status{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .3s ease}
.pad{padding:16px 18px}
.hdr{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---- forms ---- */
label{display:block;font-size:12px;color:var(--muted);margin:8px 0 5px;font-weight:500}
input,select{width:100%;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;font-family:inherit;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .3s ease}
input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---- buttons ---- */
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--radius-sm);
  padding:9px 14px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:550;min-width:40px;
  transition:border-color .16s,background-color .16s,color .16s,transform .06s,box-shadow .16s}
.btn:hover:not(:disabled){border-color:var(--line-2);background:var(--card-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:linear-gradient(180deg,var(--accent-hover),var(--accent));border-color:transparent;
  color:var(--accent-ink);font-weight:650;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -6px var(--accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(180deg,var(--accent-hover),var(--accent))}
.btn.wide{flex:1}
.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.iconbtn{min-width:0;padding:8px 10px;line-height:1;font-size:15px}
.row{display:flex;gap:12px}.row>div{flex:1}

/* ---- top nav ---- */
.nav{display:flex;gap:4px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:4px;box-shadow:var(--shadow-sm)}
.navbtn{padding:6px 13px;font-size:13px;min-width:0;border:1px solid transparent;background:transparent}
.navbtn:hover:not(:disabled){background:var(--card-2);border-color:transparent}
.navbtn.active{background:var(--accent-soft);color:var(--accent)}
#whoami{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#logoutBtn{padding:7px 12px;font-size:12.5px;min-width:0}

/* ---- onboarding ---- */
#onboard{max-width:580px;margin:8px auto}

/* ---- games list ---- */
.games{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.game{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);
  border-radius:12px;padding:12px 15px;cursor:pointer;background:var(--card);box-shadow:var(--shadow-sm);
  transition:border-color .16s,transform .1s,box-shadow .16s}
.game:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.game .t{font-weight:600;font-size:14px}
.game .m{color:var(--muted);font-size:12px;margin-top:3px}
.game .res{font-weight:750;font-size:12px;align-self:center;letter-spacing:.02em}
.res.win{color:var(--win)}.res.loss{color:var(--loss)}.res.draw{color:var(--muted)}

/* ---- board stage ---- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:20px;margin-top:16px;align-items:start}
@media(max-width:860px){.stage{grid-template-columns:1fr}.side{grid-column:1/-1}.boardcol{position:static!important}}
.boardcol{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px}
.boardrow{display:flex;gap:11px;align-items:stretch}
.evalwrap{flex:0 0 22px;position:relative;border-radius:7px;overflow:hidden;background:var(--eval-track);border:1px solid var(--line)}
.evalW{position:absolute;left:0;right:0;bottom:0;background:var(--eval-fill);transition:height .3s ease}
.evalW.top{top:0;bottom:auto}
.evalTxt{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:9px;font-weight:800;color:var(--eval-ink);mix-blend-mode:difference;filter:invert(1)}
.boardwrap{flex:1 1 auto;min-width:0}
.board{width:100%;max-width:min(70vh,560px);margin:0 auto;aspect-ratio:1/1;position:relative;
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  user-select:none;touch-action:manipulation}
.sq{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sq.light{background:var(--sq-light)}.sq.dark{background:var(--sq-dark)}
.sq .pc{width:90%;height:90%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.sq .pc[draggable="true"]{cursor:grab}
.sq .pc[draggable="true"]:active{cursor:grabbing}
.sq.last::before{content:"";position:absolute;inset:0;background:var(--last)}
.sq.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--sel);pointer-events:none}
.sq.tgt::after{content:"";position:absolute;top:50%;left:50%;width:28%;height:28%;border-radius:50%;
  background:var(--tgt);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.sq.tgt:has(.pc)::after{width:86%;height:86%;background:transparent;border:3px solid var(--tgt)}
.sq .co{position:absolute;font-size:9px;font-weight:700;color:rgba(0,0,0,.42)}
.sq .co.f{right:2px;bottom:1px}.sq .co.r{left:2px;top:1px}
.controls{display:flex;gap:8px;flex-wrap:wrap;padding:13px 15px}

/* ---- promotion picker ---- */
.promo{position:absolute;z-index:30;display:flex;flex-direction:column;width:12.5%;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.promo button{border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:min(6vw,30px);padding:4px;cursor:pointer}
.promo button:hover{background:var(--accent);color:var(--accent-ink)}
.promo button img{width:100%;height:auto;display:block}

/* ---- side panel ---- */
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.meta .ttl{font-weight:650;font-size:14px}.meta .sub{color:var(--muted);font-size:12px;margin-top:2px}
.report .stat{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.report .body{font-size:13.5px;white-space:pre-wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--line);background:var(--card-2);color:var(--ink);border-radius:8px;
  padding:5px 10px;font-size:12.5px;cursor:pointer;transition:border-color .14s,color .14s}
.chip.blunder{color:var(--blunder);border-color:color-mix(in srgb,var(--blunder) 45%,var(--line))}
.chip.mistake{color:var(--mistake);border-color:color-mix(in srgb,var(--mistake) 45%,var(--line))}
.moves{display:flex;flex-wrap:wrap;gap:5px;max-height:260px;overflow:auto;padding:12px}
.mv{font-variant-numeric:tabular-nums;font-size:12.5px;border:1px solid transparent;background:transparent;
  color:var(--ink);padding:3px 7px;border-radius:7px;cursor:pointer;font-family:inherit;transition:background-color .12s}
.mv .n{color:var(--muted);margin-right:2px}.mv:hover{background:var(--card-2)}
.mv.cur{background:var(--accent);color:var(--accent-ink)}
.mv.blunder{color:var(--blunder)}.mv.mistake{color:var(--mistake)}
.mv.coach{color:var(--accent)}.mv.coach .n{color:var(--accent)}
.var .mv.coach{color:var(--accent)}
.mv.cur.coach{color:var(--accent-ink)}
.answer{margin-top:10px;font-size:13.5px;white-space:pre-wrap}
.askrow{display:flex;gap:8px}.askrow input{flex:1}
.spin{color:var(--accent)}

/* ---- move tree: nested variations ---- */
.var{display:block;margin:3px 0 3px 10px;padding-left:8px;border-left:2px solid var(--line-2)}
.var .mv{font-size:11.5px;color:var(--muted)}
.var .mv.cur{color:var(--accent-ink)}
.var .var{margin-left:8px}

/* ---- "exploring a variation" banner ---- */
.explore-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:color-mix(in srgb,var(--mistake) 12%,var(--card));border:1px solid color-mix(in srgb,var(--mistake) 45%,var(--line));
  color:var(--ink);border-radius:11px;padding:8px 12px;font-size:12.5px;margin-bottom:10px}
.explore-banner .btn{padding:5px 10px;font-size:12.5px;min-width:0}

/* ---- right-click move menu ---- */
.ctxmenu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);overflow:hidden;min-width:150px}
.ctxitem{padding:9px 13px;font-size:13px;cursor:pointer;white-space:nowrap}
.ctxitem:hover{background:var(--accent);color:var(--accent-ink)}

/* ---- clickable coach lines / toast ---- */
.chip.play{cursor:pointer}
.chip.play:hover{border-color:var(--accent);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:11px 17px;box-shadow:var(--shadow);font-size:13px;z-index:80}

/* ---- login / signup ---- */
.auth-card{max-width:430px;margin:44px auto;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.auth-card .hdr{font-size:16px;text-transform:none;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.auth-card label{margin-top:11px}
.auth-err{color:var(--loss);font-size:13px;min-height:18px;margin:2px 0;font-weight:500}
.link{cursor:pointer;text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* ---- daily puzzles ---- */
.puzhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.puzprogress{min-width:200px;flex:0 0 auto}
.progbar{height:8px;border-radius:6px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.progfill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transition:width .35s ease}
.mine-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mine-row .btn{min-width:0}
.verdict{min-height:20px;font-size:13.5px;text-align:center;font-weight:650}
.verdict.good{color:var(--win)}
.verdict.bad{color:var(--mistake)}
.analyze .stat{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.analyze .body{font-size:13.5px}
.chatlog{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto;margin-bottom:8px}
.chatmsg{font-size:13px;padding:8px 11px;border-radius:11px;max-width:92%;white-space:pre-wrap}
.chatmsg.you{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.chatmsg.coach{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:4px}

/* ---- best-move arrow overlay ---- */
.board .arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---- scrollbars ---- */
.moves::-webkit-scrollbar,.chatlog::-webkit-scrollbar{width:9px;height:9px}
.moves::-webkit-scrollbar-thumb,.chatlog::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;
  border:2px solid var(--card)}