:root{--bg:#eef0ea;--ink:#1d2623;--mut:#5d6b66;--panel:#fbfaf5;--line:#d3d8cf;--lt:#ebe5d3;--dk:#5f7f78;--acc:#d9a521;--wp:#fff;--bp:#1a1f1d;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121715;--ink:#e6ebe7;--mut:#93a39c;--panel:#1b2220;--line:#2f3a36;--lt:#d8d2bf;--dk:#4d6b65}}
:root[data-theme="dark"]{--bg:#121715;--ink:#e6ebe7;--mut:#93a39c;--panel:#1b2220;--line:#2f3a36;--lt:#d8d2bf;--dk:#4d6b65}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:980px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start}
h1{font:600 28px Georgia,"Times New Roman",serif;margin:0 0 4px;letter-spacing:.01em}
.bw{--bs:min(94vw,76vh,560px);width:var(--bs);position:relative}
#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:var(--bs);height:var(--bs);border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px var(--ink)}
.sq{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.sq.l{background:var(--lt)}.sq.d{background:var(--dk)}
.sq.last::before{content:"";position:absolute;inset:0;background:rgba(217,165,33,.38)}
.sq.sel::before{content:"";position:absolute;inset:0;background:rgba(217,165,33,.7)}
.sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(205,50,40,.9),rgba(205,50,40,0) 72%)}
.sq.tgt::after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(20,30,28,.35)}
.sq.cap::after{content:"";position:absolute;inset:4%;border-radius:50%;border:5px solid rgba(20,30,28,.35)}
.pc{position:relative;z-index:1;font-size:calc(var(--bs) * .1);line-height:1;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",serif}
.pc.w{color:var(--wp);text-shadow:0 0 1px #000,0 0 1px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.pc.b{color:var(--bp);text-shadow:0 0 1px rgba(255,255,255,.35)}
.co{position:absolute;font-size:calc(var(--bs) * .022 + 5px);font-weight:600;z-index:2;pointer-events:none;opacity:.8}
.sq.l .co{color:var(--dk)}.sq.d .co{color:var(--lt)}
.co.f{right:3px;bottom:1px}.co.r{left:3px;top:1px}
aside{flex:1 1 280px;max-width:420px;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
#status{font-weight:600;font-size:18px;min-height:27px}
#status.end{color:#b3372c}
.row{display:flex;gap:8px;flex-wrap:wrap}
select,button{font:inherit;padding:8px 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
button.p{background:var(--ink);color:var(--bg);border-color:var(--ink)}
select:focus-visible,button:focus-visible,.sq:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
aside label{font-size:14px;color:var(--mut);display:flex;flex-direction:column;gap:3px;flex:1 1 120px}
#moves{max-height:240px;overflow-y:auto;display:grid;grid-template-columns:2.2em 1fr 1fr;gap:2px 8px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:10px;font-size:15px}
#moves .n{color:var(--mut)}
#moves:empty::before{content:"Moves appear here.";color:var(--mut);grid-column:1/-1}
#promo{position:absolute;inset:0;background:rgba(10,15,13,.6);display:none;align-items:center;justify-content:center;z-index:5;border-radius:4px}
#promo.on{display:flex}
#promo div{background:var(--panel);padding:12px;border-radius:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
#promo button{font-size:34px;padding:4px 12px;line-height:1.1}
@media (prefers-reduced-motion:no-preference){.sq.sel::before{transition:background .1s}}
[hidden]{display:none!important}
#lobby{max-width:460px;margin:0 auto;padding:40px 20px;text-align:center}
#lobby .knight{font-size:72px;line-height:1;color:var(--dk)}
#lobby h1{font-size:40px;margin:8px 0 4px}
.sub{color:var(--mut);margin:0 0 28px}
#lobby fieldset{border:0;margin:0 0 22px;padding:0}
#lobby legend{color:var(--mut);font-size:14px;margin:0 auto 8px;padding:0}
.seg{display:flex;gap:8px;justify-content:center}
.opt{flex:1;position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:block;padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.opt input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opt input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px}
button.big{width:100%;padding:14px;font-size:18px;margin-top:6px}