:root{--bg:#161512;--panel:#262421;--panel-2:#302e2c;--text:#bababa;--bright:#f0f0f0;--muted:#7a776f;--accent:#d4a537;--accent-2:#b8902e;--accent-rgb:212,165,55;--topbar-bg:#21201d;--topbar-border:#3c3935;--sq-light:#eeeed2;--sq-dark:#769656;
--board-w:min(calc(100vh - 170px),calc(100vw - 420px),600px)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand h1{margin:0;font-size:17px;color:var(--bright)}.tag{margin:0;font-size:12px;color:var(--muted)}
.logo-piece{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#302e2c;color:var(--accent);border:2px solid var(--accent);font-size:18px}
.top-actions{display:flex;gap:8px;align-items:center}
.btn{background:var(--panel-2);border:1px solid #4a4742;color:var(--bright);padding:6px 10px;border-radius:5px;cursor:pointer;font-size:13px;touch-action:manipulation;white-space:nowrap}
.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent-2);border-color:var(--accent);color:#1a1408;font-weight:700}.btn.primary:hover{background:var(--accent)}
.btn.big{font-size:20px;padding:14px;width:100%;margin:10px 0}.btn-icon{padding:4px 9px;font-size:16px}
input,select{background:#1b1a18;color:var(--bright);border:1px solid #4a4742;border-radius:5px;padding:6px 8px;font-size:14px}
.lobby{max-width:560px;margin:16px auto;padding:0 10px;display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--topbar-border);border-radius:8px;padding:14px}.card h2{margin:0 0 10px;font-size:15px;color:var(--bright)}
.field{display:flex;align-items:center;gap:8px}.field input{flex:1}
.seek{display:flex;justify-content:space-between;align-items:center;color:var(--bright);height:34px}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-bottom:8px}.inline{margin-right:12px}
#challenge-box{margin-top:8px}#challenge-link{width:70%}
.layout{display:grid;grid-template-columns:var(--board-w) minmax(260px,360px);gap:16px;justify-content:center;padding:12px}
.pbar{display:flex;justify-content:space-between;align-items:center;height:36px}.pname{color:var(--bright);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock{font:700 20px ui-monospace,monospace;background:var(--panel-2);padding:2px 10px;border-radius:5px;color:var(--muted)}.clock.run{background:#fff;color:#111}.clock.low{background:#c0392b;color:#fff}
.board{width:var(--board-w);height:var(--board-w);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);user-select:none;touch-action:none;border-radius:3px;overflow:hidden}
.sq{position:relative}.sq.l{background:var(--sq-light)}.sq.d{background:var(--sq-dark)}
.sq.last{box-shadow:inset 0 0 0 999px rgba(255,255,0,.35)}.sq.sel{box-shadow:inset 0 0 0 999px rgba(20,85,30,.5)}.sq.check{background:radial-gradient(circle,#ff0000 0%,#e70000aa 30%,transparent 75%)}
.sq img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sq.dot::after{content:"";position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:rgba(20,85,30,.45)}
.sq.cap::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(20,85,30,.45)}
.coord{position:absolute;font-size:10px;font-weight:700;opacity:.7;z-index:1;pointer-events:none}.coord.f{right:2px;bottom:0}.coord.r{left:2px;top:0}
.drag{position:fixed;pointer-events:none;z-index:100}
.side-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.game-label{background:var(--panel);border-radius:6px;padding:8px;color:var(--bright);min-height:36px}
.banner{background:rgba(var(--accent-rgb),.18);border:1px solid var(--accent);color:var(--bright);border-radius:6px;padding:10px;font-weight:700;text-align:center}
.actions{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:860px){.actions{flex-wrap:nowrap;overflow-x:auto;height:36px;gap:4px}.actions .btn{padding:6px 8px;flex:0 0 auto}}
.moves{background:var(--panel);border-radius:6px;padding:6px;height:150px;overflow-y:auto;font-family:ui-monospace,monospace;color:var(--bright)}
.moves .n{color:var(--muted);display:inline-block;width:2.5em}.moves .m{display:inline-block;width:5em}
.chat{background:var(--panel);border-radius:6px;display:flex;flex-direction:column;height:200px}
.chat-log{flex:1;overflow-y:auto;padding:6px;word-wrap:break-word}.chat-log .s{color:var(--muted);font-style:italic}.chat-log b{color:var(--accent)}
.chat-form{display:flex;gap:4px;padding:4px}.chat-form input{flex:1;min-width:0}
.promo{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:150;gap:6px}
.promo img{width:80px;height:80px;background:var(--panel);border-radius:8px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel-2);color:var(--bright);border:1px solid var(--accent);padding:10px 14px;border-radius:6px;z-index:300;max-width:90vw}
.site-menu-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;padding:0;border-radius:6px;cursor:pointer;border:1px solid var(--topbar-border);background:rgba(128,128,128,.08);color:var(--bright)}
.site-menu{position:fixed;inset:0;z-index:200;pointer-events:none}.site-menu.is-open{pointer-events:auto}.site-menu[hidden]{display:none!important}
.site-menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .18s}.site-menu.is-open .site-menu-backdrop{opacity:1}
.site-menu-panel{position:absolute;top:0;right:0;width:min(300px,88vw);height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;padding:.9rem .7rem 1.4rem;background:var(--topbar-bg);border-left:1px solid var(--topbar-border);transform:translateX(100%);transition:transform .2s}
.site-menu.is-open .site-menu-panel{transform:none}
.site-menu-section{margin:.75rem .5rem .3rem;padding-top:.5rem;border-top:1px solid var(--topbar-border);color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase}
.site-menu-link{display:block;padding:.65rem .8rem;border-radius:8px;color:var(--bright);font-weight:600;text-decoration:none}.site-menu-link:hover{background:rgba(128,128,128,.12)}
.site-menu-link.is-current{background:rgba(var(--accent-rgb),.18);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
html.site-menu-open{overflow:hidden}
@media (max-width:860px){:root{--board-w:min(100vw,calc(100dvh - 330px),560px)}
.topbar{padding:6px 10px}.layout{grid-template-columns:1fr;padding:0;gap:6px;justify-items:center}.board-col{width:var(--board-w)}.pbar{padding:0 4px;height:32px}
.side-col{width:100%;padding:0 6px 10px}.moves{height:56px}.chat{height:150px}.game-label{min-height:0;padding:5px 8px}}

a.brand { color: inherit; text-decoration: none; cursor: pointer; }
a.brand:hover h1 { text-decoration: underline; }
.rematch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px;color:var(--bright)}
.match-score{background:var(--panel);border-radius:6px;padding:6px 8px;color:var(--accent);font-weight:700}
.nav{display:flex;align-items:center;gap:4px;height:34px;flex-wrap:nowrap;overflow:hidden}.nav>.btn{flex:0 0 44px}.view-ind{font-size:12px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moves .m{cursor:pointer;border-radius:3px;padding:0 3px}.moves .m:hover{background:rgba(128,128,128,.2)}.moves .m.cur{background:rgba(var(--accent-rgb),.35)}
.disc{background:rgba(224,90,79,.18);border:1px solid #e05a4f;color:var(--bright);border-radius:6px;padding:6px 8px;font-weight:600}
/* Light theme */
html[data-theme=light]{--bg:#f2efe9;--panel:#ffffff;--panel-2:#ece8e1;--text:#3a3833;--bright:#1d1c1a;--muted:#77736b;--topbar-bg:#ffffff;--topbar-border:#d9d4cb}
html[data-theme=light] .logo-piece{background:#fff}
html[data-theme=light] .btn{border-color:#cfc9bf}
html[data-theme=light] input,html[data-theme=light] select{background:#fff;border-color:#cfc9bf}
html[data-theme=light] .clock.run{background:#1d1c1a;color:#fff}
.settings-wrap{position:relative}
.settings-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--topbar-border);border-radius:8px;padding:12px;z-index:200;min-width:190px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.settings-pop label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--bright)}