:root{
  --bg:#111111;
  --light:#f0d9b5;
  --dark:#b58863;
  --accent:#2b7a78;
  --muted:#666;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:10px}
#app{width:100%;max-width:720px}
#topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
#turn{font-weight:600;color:var(--muted)}
#controls button{margin-left:6px;padding:8px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:white;font-weight:600}
#controls button.active{background:var(--accent);color:white;border-color:transparent}
#boardWrap{background:linear-gradient(180deg,#ffffff, #eee);padding:8px;border-radius:12px;display:flex;justify-content:center}
canvas{width:100%;height:auto;max-width:640px;border-radius:8px;touch-action:none}
#footer{margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:420px){
  #controls button{padding:8px;font-size:13px}
  #footer{font-size:11px}
}