:root{
  --bg:#1c1f26; --panel:#262a33; --panel2:#2e333e; --text:#e8e6e0; --muted:#9aa0ab;
  --accent:#d4a34f; --wood1:#e0b96a; --wood2:#c99b4a; --line:#5a4420;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; min-height:100vh; align-items:flex-start; justify-content:center;
  gap:24px; padding:24px; flex-wrap:wrap;
}
#sidebar{
  width:280px; background:var(--panel); border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
h1{font-size:22px; letter-spacing:1px; color:var(--accent); text-align:center;}
label{font-size:12px; color:var(--muted); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
select,input[type=number]{
  width:100%; background:var(--panel2); color:var(--text); border:1px solid #3a4050;
  border-radius:8px; padding:8px 10px; font-size:14px;
}
.row{display:flex; gap:8px;}
.row>div{flex:1;}
button{
  background:var(--panel2); color:var(--text); border:1px solid #3a4050; border-radius:8px;
  padding:9px 12px; font-size:14px; cursor:pointer; transition:background .15s;
}
button:hover:not(:disabled){background:#3a4050;}
button:disabled{opacity:.4; cursor:default;}
button.primary{background:var(--accent); color:#1c1f26; border:none; font-weight:600;}
button.primary:hover:not(:disabled){background:#e2b45e;}
#status{
  background:var(--panel2); border-radius:8px; padding:10px 12px; font-size:14px;
  min-height:42px; display:flex; align-items:center; line-height:1.35;
}
.caps{display:flex; justify-content:space-between; background:var(--panel2); border-radius:8px; padding:10px 12px; font-size:13px;}
.caps b{font-size:15px;}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;}
.dot.b{background:#111;border:1px solid #555;}
.dot.w{background:#f5f5f5;border:1px solid #999;}
#boardwrap{position:relative;}
canvas{border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.5); display:block; cursor:pointer;}
#thinking{
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,.65); color:#ffd97a;
  padding:5px 12px; border-radius:20px; font-size:12px; display:none;
}
.hidden{display:none !important;}
.btnrow{display:flex; gap:8px;}
.btnrow button{flex:1;}
small.hint{color:var(--muted); font-size:11px; line-height:1.4;}