/* Tokens, header, generic controls (chess.com-like dark theme, Manrope, tabular numerals). */
:root{
  --bg:#262421; --panel:#302e2b; --panel2:#3c3a37; --panel3:#484644; --line:#45423f;
  --text:#e8e6e3; --muted:#a09d99; --faint:#78756f;
  --accent:#81b64c; --accent-ink:#0f1a08; --warn:#e6a23c;
  --light-sq:#eeeed2; --dark-sq:#769656; --hl:rgba(255,255,51,.55); --dot:rgba(0,0,0,.18);
  --win:#3ddc84; --loss:#ff5c5c; --draw:#5c8cff; --empty:#4a4744;
  --fake:#c94fe0;
  --premove-w:#ffb020; --premove-b:#35c9ff; /* planned premoves (MagnusFish / LeviFish), drawn dashed */ /* per-side views (B2b): squares a side was shown differently */
  --bubble:#f5f5f0; --bubble-ink:#1c1b19;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --sans:"Manrope",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f1efe9; --panel:#ffffff; --panel2:#ebe8e1; --panel3:#dcd8cf; --line:#d9d5cc;
  --text:#2b2926; --muted:#6b6864; --faint:#9a968f; --empty:#d5d1c8;
  --bubble:#ffffff; --bubble-ink:#1c1b19; color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);font-variant-numeric:tabular-nums;padding-inline:16px;padding-block:0 24px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.note{color:var(--muted);font-size:12px}
select,input[type=range],input[type=number]{font:inherit;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:6px}
.field{display:grid;gap:4px}
.sbtn{padding:5px 8px;border-radius:5px;background:var(--panel2);font-size:12px;font-weight:600}
.sbtn.primary{background:var(--accent);color:var(--accent-ink)}
.sbtn:hover:not(:disabled){filter:brightness(1.1)}
.big{background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;padding:10px;border-radius:6px;width:100%}
.big:hover:not(:disabled){filter:brightness(1.08)}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:4px 9px;border-radius:99px;background:var(--panel2);font-size:12px;font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}
.sw i{width:30px;height:16px;border-radius:99px;background:var(--panel3);position:relative;transition:background .15s;flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw input:checked+i{background:var(--accent)}
.sw input:checked+i::after{left:16px}
.sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.fam{font-size:9px;padding:1px 5px;border-radius:3px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.fam.tom7{background:#3d3562;color:#c9bdfb}.fam.iwc{background:#5a2a5e;color:#f4b5f7}.fam.ccom{background:#2f4f2f;color:#b6f2b6}.fam.sf{background:#1f3f5a;color:#a9d8ff}.fam.fairy{background:#5a4a1c;color:#ffe08a}.fam.misc{background:#4a4744;color:#ddd}

/* header */
.top{display:flex;align-items:center;gap:18px;padding-block:10px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.brand .k{width:26px;height:26px}
.brand .k svg{width:26px;height:26px;display:block}
.badge-backend{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--warn);color:#1c1b19}
.conn{font-size:11px;color:var(--warn);font-weight:700}
.nav{display:flex;gap:4px}
.nav button{padding:6px 12px;border-radius:6px;color:var(--muted);font-weight:600}
.nav button[aria-current="page"]{background:var(--panel2);color:var(--text)}
.langsel{font:inherit;font-size:12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.top .topright{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.top .backsite{text-decoration:none;margin-right:-8px;font-size:13px}
/* the loading screen: the page stays hidden until the first real render (app.mjs boot), so a reload shows no placeholder board */
.booting .top,.booting main{visibility:hidden}
.bootscreen{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);color:var(--muted);font-size:13px;z-index:100;transition:opacity .25s}
.bootscreen .boot-k{width:44px;height:44px;border-radius:50%;border:3px solid var(--panel3);border-top-color:var(--accent);animation:bootspin .8s linear infinite}
body:not(.booting) .bootscreen{opacity:0;pointer-events:none}
@keyframes bootspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bootscreen .boot-k{animation-duration:2.4s}}
/* the public site (PUBLIC_MODE): no admin screens */
.public .nav button[data-screen="tournament"],.public .nav button[data-screen="field"],.public #screen-tournament,.public #screen-field{display:none!important}
.top .spacer{flex:1}
.iconbtn{padding:6px 10px;border-radius:6px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.iconbtn:hover{background:var(--panel2);color:var(--text)}
.iconbtn[aria-pressed="true"]{color:var(--accent)}

/* screens */
.screen{display:none}
.screen.on{display:block}

/* tooltip + toast */
.tip{position:fixed;pointer-events:none;background:#111;color:#eee;border:1px solid #444;border-radius:5px;padding:6px 8px;font:12px var(--mono);z-index:20;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.tip b{color:#f2d98a}
/* avatar images (bots/<Plugin>/sprites/<bot>/avatar.svg): fill the avatar box; the emoji is the fallback */
img.avimg{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111;color:#eee;border:1px solid #444;border-radius:6px;padding:8px 12px;font-size:12px;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.5);max-width:min(90vw,520px)}
.toast.err{border-color:var(--loss)}