:root{
  --bg:#08111f;
  --panel:rgba(15,29,49,.78);
  --border:rgba(148,163,184,.18);
  --text:#edf4ff;
  --muted:#91a4bb;
  --accent:#57c7a2;
  --danger:#f07474;
  --wood:#c89458;
  --ink:#17202a;
  --grid:#533a25;
  --surface:rgba(15,29,49,.85);
  --glass:rgba(15,29,49,.65);
}

*{box-sizing:border-box}

body{
  margin:0;min-height:100vh;
  background:radial-gradient(circle at 10% 0,#19385a 0,transparent 34%),linear-gradient(135deg,#08111f,#0d1726 55%,#111827);
  color:var(--text);font:15px Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
}

/* ── Glass / Surface Layers ─────────────────────────────── */
.glass-panel{
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.25),0 4px 8px rgba(0,0,0,.12);
}

.glass-panel-dark{background:rgba(6,12,20,.85)}

/* ── Card Styles (for sidebar sections) ─────────────────── */
.card{
  padding:16px;
}

/* ── Input Styles ─────────────────────────────────────── */
.glass-input{
  background:#ffffff0d;border:1px solid var(--border);border-radius:9px;
  color:var(--text);color-scheme:dark;padding:6px 12px;font-size:14px;
  font-family:inherit;outline:none;cursor:pointer;
}

.glass-input:focus{border-color:var(--accent)}

/* ── Buttons ────────────────────────────────────────────── */
.glass-btn{
  padding:10px 14px;border:1px solid var(--border);border-radius:9px;
  background:#ffffff0d;color:var(--text);font:inherit;cursor:pointer;
  transition:background-color .2s,box-shadow .2s,color .2s;
}

.glass-btn:hover:not(:disabled){
  border-color:var(--accent);
  background:#57c7a21c;
  box-shadow:0 0 16px rgba(87,199,162,.15);
}

.glass-btn:disabled{cursor:not-allowed;opacity:.4}

.primary{
  width:100%;background:var(--accent);color:#062018;border-color:transparent;
  font-weight:700;padding:12px 16px;border-radius:9px;
  transition:transform .2s,box-shadow .2s;
}

.primary:hover:not(:disabled){
  transform:scale(1.02);
  box-shadow:0 4px 16px rgba(87,199,162,.35);
}

.danger{color:#fecaca;border-color:rgba(240,116,116,.3)}

/* ── Layout ─────────────────────────────────────────────── */
.site-header.glass-panel{
  padding:12px 24px;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--border);
}

.brand{font-size:20px;font-weight:700;color:var(--text)}

.nav a{color:var(--muted);text-decoration:none;margin-right:20px;font-size:14px}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--accent)}

.container{max-width:1200px;margin:0 auto;padding:24px 16px}

.play-layout{display:flex;gap:24px;align-items:flex-start}

.game-panel{flex:1;min-height:50vh}
.sidebar{width:320px;flex-shrink:0}

.panel-heading{padding:16px 20px;border-bottom:1px solid var(--border)}
.eyebrow{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}

.status-bar.glass-panel{
  padding:8px 16px;display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted)
}

.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}

.score-display{display:flex;justify-content:space-between;padding:12px 16px}
.score-item{text-align:center}
.score-label{font-size:12px;color:var(--muted)}
.score-value{font-size:24px;font-weight:700;color:var(--text)}

.button-row{display:flex;gap:8px;padding:12px 16px}

.move-history{list-style:none;padding:0;margin:0}
.move-history li{padding:6px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)}
.move-history li:last-child{border-bottom:none}

/* ── Connection Status ──────────────────────────────────── */
.connection{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:rgba(255,255,255,.03);border-radius:999px;font-size:12px;color:var(--muted);
}

.connection.online{color:#57c7a2;background:rgba(87,199,162,.1)}
.connection.offline{color:#f07474;background:rgba(240,116,116,.1)}

/* ── Toasts ─────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{
  background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);
  border-radius:10px;padding:10px 16px;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.3);
}

/* ── AI Coach Panel ─────────────────────────────────────── */
.ai-coach{
  position:relative;top:12px;left:12px;z-index:50;
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;max-width:320px;
}

.ai-robot{font-size:28px;margin-bottom:6px;display:block}
.speech-bubble{position:relative}
.speech-bubble::before{
  content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  border-top:7px solid var(--glass);border-left:4px solid transparent;border-right:4px solid var(--glass);
}

/* ── Game Container ─────────────────────────────────────── */
.game-container{position:relative;padding:16px}
#go-board{display:block;margin:0 auto;cursor:pointer}
#go-board svg{width:100%;height:auto}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:768px){
  .play-layout{flex-direction:column;gap:12px}
  .sidebar{width:100%}
  .game-panel{min-height:auto;padding:12px}
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}