:root{--bg:#302e2b;--panel:#262522;--fg:#eceae6;--muted:#a19e98;--light:#ebecd0;--dark:#739552;--accent:#81b64c;--accent-low:#45753c;--sel:#f5f68288}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif}
header{text-align:center;padding:16px}
header h1{margin:0;font-size:2rem;letter-spacing:.02em}
header p{margin:4px 0 0;color:var(--muted)}
main{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:0 16px 32px}
.panel{background:var(--panel);border-radius:12px;padding:16px;width:260px;display:flex;flex-direction:column;gap:10px}
.panel h2{margin:0;font-size:1.1rem}
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
select,button{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid #4b4845;background:#3c3a37;color:var(--fg)}
button{background:var(--accent);border:none;cursor:pointer;font-weight:800;color:#fff;box-shadow:0 4px 0 var(--accent-low);transition:transform .08s,box-shadow .08s,filter .15s;text-shadow:0 1px 0 #0003}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-low)}
#vdesc{margin:0;font-size:.85rem;color:var(--muted);min-height:3em}
#boardwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
#status{font-weight:600;min-height:1.5em}
#board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(92vw,600px);aspect-ratio:1;border-radius:4px;overflow:hidden;box-shadow:0 10px 30px #0007}
.sq{position:relative;min-width:0;min-height:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:min(8.5vw,50px);cursor:pointer;user-select:none;line-height:1}
.sq.l{background:var(--light)}.sq.d{background:var(--dark)}
.sq.hill{box-shadow:inset 0 0 0 3px #ffffffaa}
.sq.last{background-image:linear-gradient(#f5f68280,#f5f68280)}
.sq.pre{background-image:linear-gradient(#d2462e8c,#d2462e8c)}
.sq.sel{background-image:linear-gradient(var(--sel),var(--sel))}
.sq.check{background-image:radial-gradient(#ff3b3bcc,transparent 70%)}
.sq.tgt::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#0002}
.sq.tgt.cap::after{width:84%;height:84%;background:none;border:6px solid #0002}
.pc.w{color:#fff;text-shadow:0 0 2px #000,0 0 1px #000,0 1px 2px #000}
.pc.b{color:#111;text-shadow:0 0 1px #fff8}
.coord{position:absolute;font-size:11px;font-weight:700;color:#0008;left:3px;bottom:2px}
.sq.l .coord{color:var(--dark)}.sq.d .coord{color:var(--light)}
#moves{margin:0;padding-left:28px;max-height:380px;overflow:auto;font-family:ui-monospace,monospace;font-size:.85rem;columns:2}
#checks{color:var(--muted);font-size:.9rem}
#promo{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;gap:8px}
#promo[hidden]{display:none}
#promo button{font-size:40px;width:72px;height:72px;background:var(--light);color:#111}

a{color:var(--accent)}
header h1{font-weight:800}
.panel{box-shadow:0 2px 0 #0003}