*{box-sizing:border-box}
:root{
  --bg:#070b14;
  --bg2:#0b1222;
  --panel:rgba(16,25,44,.72);
  --panel-strong:rgba(16,25,44,.88);
  --line:rgba(148,163,184,.28);
  --text:#e5ecff;
  --muted:#a9b5d6;
  --accent:#60a5fa;
  --danger:#ef4444;
  --ok:#8b5cf6;
}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 78% -10%,rgba(59,130,246,.2),transparent 60%),
    radial-gradient(900px 520px at 8% 0%,rgba(139,92,246,.2),transparent 62%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
.app{max-width:980px;margin:0 auto;padding:24px 18px 30px}
h1{margin:0 0 14px;font-size:26px;font-weight:800;letter-spacing:.2px;color:#f5f8ff}
.board-wrap{
  width:min(96vw,760px);
  aspect-ratio:9/10;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:rgba(9,15,28,.78);
  box-shadow:0 28px 56px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(4px);
}
#boardCanvas{display:block;width:100%;height:100%;touch-action:none}
.control-bar{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(96vw,760px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
.pill-btn{
  height:38px;
  border:none;
  border-radius:999px;
  padding:0 16px;
  background:linear-gradient(180deg,#1f3a69,#16315f);
  color:#eff6ff;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px rgba(30,64,175,.35);
}
.engine-btn{min-width:88px}
.engine-btn.on{background:linear-gradient(180deg,#0f766e,#0f5d56);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px rgba(20,184,166,.32)}
.engine-btn.off{background:linear-gradient(180deg,#374151,#1f2937);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(17,24,39,.4)}
.sound-btn{min-width:88px}
.sound-btn.on{background:linear-gradient(180deg,#166534,#14532d);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px rgba(34,197,94,.28)}
.sound-btn.off{background:linear-gradient(180deg,#374151,#1f2937);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(17,24,39,.4)}
.pill-btn:hover{filter:brightness(1.06)}
.ai-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.4);
  background:radial-gradient(circle at 35% 30%,#e2e8f0,#8b98ad 68%,#64748b 100%);
  cursor:pointer;
  transition:all .2s ease;
}
.ai-dot:hover{transform:translateY(-1px)}
.ai-black{
  border-color:rgba(71,85,105,.72);
  background:radial-gradient(circle at 35% 30%,#cbd5e1,#334155 62%,#020617 100%);
  box-shadow:0 0 0 1px rgba(30,41,59,.24),0 4px 12px rgba(2,6,23,.4);
}
.ai-white{
  border-color:rgba(226,232,240,.9);
  background:radial-gradient(circle at 35% 30%,#ffffff,#e5e7eb 62%,#cbd5e1 100%);
  box-shadow:0 0 0 1px rgba(226,232,240,.25),0 4px 12px rgba(148,163,184,.22);
}
.ai-black.active{
  border-color:rgba(241,245,249,.98);
  background:radial-gradient(circle at 35% 30%,#f8fafc,#0f172a 58%,#000000 100%);
  box-shadow:0 0 0 4px rgba(148,163,184,.35),0 0 20px rgba(148,163,184,.92),0 0 46px rgba(15,23,42,.82),inset 0 0 0 1px rgba(255,255,255,.4);
  transform:translateY(-1px) scale(1.05);
}
.ai-white.active{
  border-color:rgba(255,255,255,.98);
  background:radial-gradient(circle at 35% 30%,#ffffff,#f3f4f6 58%,#d1d5db 100%);
  box-shadow:0 0 0 4px rgba(226,232,240,.42),0 0 20px rgba(248,250,252,.95),0 0 46px rgba(203,213,225,.72),inset 0 0 0 1px rgba(255,255,255,.55);
  transform:translateY(-1px) scale(1.05);
}
.icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.4);
  color:#dbe7ff;
  font-size:20px;
  line-height:1;
  background:linear-gradient(180deg,rgba(30,41,59,.86),rgba(15,23,42,.86));
  cursor:pointer;
}
.icon-btn:hover{border-color:rgba(96,165,250,.72);box-shadow:0 0 0 2px rgba(96,165,250,.16)}
.meta-row{
  width:min(96vw,760px);
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.turn-chip{
  padding:8px 12px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--line);
  color:#e8edff;
  font-weight:600;
}
.engine-status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--line);
  color:#dbe7ff;
  font-weight:600;
}
.engine-label{color:#a9b5d6;font-weight:500}
.engine-power{color:#34d399}
.engine-run{color:#93c5fd}
.engine-status.off .engine-power{color:#f87171}
.engine-status.off .engine-run{color:#fca5a5}
.engine-status.running{box-shadow:0 0 0 2px rgba(52,211,153,.18)}
.movetime-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
}
#movetime{
  width:104px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel-strong);
  color:#e8edff;
  padding:0 10px;
}
.status{
  width:min(96vw,760px);
  margin-top:10px;
  min-height:36px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--line);
  color:#dbe7ff;
}
.eval-wrap{
  width:min(96vw,760px);
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(9,15,28,.58);
  backdrop-filter:blur(6px);
  padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
#evalCanvas{
  width:100%;
  height:190px;
  display:block;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(37,47,71,.35),rgba(10,15,29,.46));
}
@media (max-width:860px){
  .control-bar{gap:10px;overflow-x:auto}
  .meta-row{flex-direction:column;align-items:flex-start}
  #evalCanvas{height:170px}
}