:root {
  --bg: #090b10;
  --stroke: rgba(255,255,255,0.09);
  --text: #f5f7fb;
  --muted: #9aa4b2;
  --accent: #c7a46a;
  --coord: rgba(232, 237, 246, 0.84);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Manrope,system-ui,sans-serif; }
body { overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 20% 0%, rgba(125,140,255,.12), transparent 40%), radial-gradient(circle at 80% 100%, rgba(199,164,106,.09), transparent 40%); pointer-events:none; }
.orb { position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(110px); opacity:.17; pointer-events:none; }
.orb-a { background:#6677ff; top:-160px; left:-140px; }
.orb-b { background:#c7a46a; bottom:-180px; right:-120px; }
.app-shell { width:min(1500px, 94vw); margin:0 auto; padding:22px 0 28px; position:relative; z-index:1; }
.glass { background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border:1px solid var(--stroke); box-shadow:0 18px 60px rgba(0,0,0,.34); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-radius:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#d8bd8e,#876839); color:#111; font-size:24px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.brand-title { font-weight:700; letter-spacing:.2px; }
.brand-subtitle { font-size:12px; color:var(--muted); margin-top:2px; }
.status-pill { color:#dce4f0; font-size:13px; padding:9px 12px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.03); }
.status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:#76e2a0; box-shadow:0 0 14px #76e2a0; margin-right:7px; }
.avatar { width:40px; height:40px; border-radius:50%; border:1px solid var(--stroke); background:#171c26; color:#fff; font-weight:700; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr); gap:22px; margin-top:22px; }
.board-panel, .coach-panel { border-radius:28px; padding:26px; }
.panel-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.eyebrow, .insight-label { font-size:11px; letter-spacing:.18em; color:var(--accent); font-weight:700; }
h1 { margin:7px 0 0; font-family:"Playfair Display",serif; font-size:clamp(28px,3.1vw,48px); line-height:1.05; font-weight:600; }
.turn-badge { font-size:13px; color:#e8edf6; border:1px solid rgba(199,164,106,.34); background:rgba(199,164,106,.08); border-radius:999px; padding:10px 13px; }
.board-wrap { width:min(76vh, 760px); max-width:100%; margin:0 auto; position:relative; }
.board-shell {
  position:relative;
  z-index:2;
  width:100%;
  padding-left:28px;
  padding-bottom:28px;
}
.board-main {
  width:100%;
  aspect-ratio:1;
}
.ranks {
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:calc(100% - 28px);
  display:grid;
  grid-template-rows:repeat(8,1fr);
  align-items:center;
  justify-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--coord);
  user-select:none;
}
.files {
  position:absolute;
  left:28px;
  bottom:0;
  width:calc(100% - 28px);
  height:22px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  align-items:center;
  justify-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--coord);
  user-select:none;
}
.board { width:100%; height:100%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.15); box-shadow:0 34px 90px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,255,255,.06); position:relative; background:#2f333a; }
.square { display:grid; place-items:center; font-size:clamp(32px,4.6vw,66px); user-select:none; cursor:pointer; position:relative; transition:filter .16s ease, transform .16s ease; }
.square.light { background:linear-gradient(145deg,#e2d0b3,#cdb187); }
.square.dark { background:linear-gradient(145deg,#9a744d,#7b5939); }
.square:hover { filter:brightness(1.08); }
.square.selected::after { content:""; position:absolute; inset:7px; border:3px solid rgba(125,140,255,.9); border-radius:12px; box-shadow:0 0 22px rgba(125,140,255,.5); }
.square.last::after { content:""; position:absolute; inset:0; background:rgba(234,210,118,.22); }

.square.legal::before { content:""; width:18%; aspect-ratio:1; border-radius:50%; background:rgba(22,24,31,.34); position:absolute; z-index:1; }
.square.capture::before { content:""; position:absolute; inset:8px; border:4px solid rgba(127,36,36,.48); border-radius:50%; z-index:1; }
.square.disabled { cursor:default; }
.turn-badge.thinking { border-color:rgba(118,226,160,.35); background:rgba(118,226,160,.08); }
.piece { width:78%; height:78%; display:block; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(0,0,0,.24)); position:relative; z-index:2; pointer-events:none; }
.board-glow { position:absolute; inset:8% 3% 14% 8%; background:rgba(199,164,106,.14); filter:blur(48px); z-index:1; }
.controls { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; justify-content:center; }
.btn { border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.035); color:#e9edf5; padding:11px 16px; font-weight:600; cursor:pointer; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); background:rgba(255,255,255,.065); }
.btn-primary { background:linear-gradient(135deg,#e4c38b,#b78d4e); color:#15110b; border-color:transparent; }
.coach-panel { display:flex; flex-direction:column; min-height:640px; }
.coach-head { display:flex; align-items:center; gap:12px; }
.coach-avatar { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; font-family:"Playfair Display",serif; font-size:24px; color:#18130d; background:linear-gradient(145deg,#ead2a5,#a67d45); }
.coach-name { font-weight:700; }
.coach-state { color:var(--muted); font-size:12px; margin-top:3px; }
.coach-message { margin-top:25px; padding:24px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid var(--stroke); min-height:180px; position:relative; }
.quote-mark { font-family:Georgia,serif; font-size:62px; color:rgba(199,164,106,.35); line-height:.7; }
.coach-message p { font-size:17px; line-height:1.68; margin:8px 0 0; color:#edf1f7; }
.insight-card { margin-top:16px; padding:18px; border-radius:18px; background:rgba(9,12,18,.43); border:1px solid var(--stroke); }
.insight-title { margin-top:7px; font-weight:700; }
.progress { height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:14px; }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#e8d1a8); border-radius:inherit; }
.insight-meta { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:12px; }
.history-block { margin-top:18px; flex:1; }
.history-title { font-weight:700; margin-bottom:10px; }
.history-empty { color:var(--muted); font-size:13px; line-height:1.6; }
.move-row { display:flex; justify-content:space-between; gap:8px; padding:9px 11px; margin-bottom:7px; border-radius:10px; background:rgba(255,255,255,.035); color:#dfe5ee; font-size:13px; }
.voice-btn { margin-top:18px; width:100%; border:1px solid rgba(125,140,255,.28); background:rgba(125,140,255,.08); color:#dfe3ff; border-radius:14px; padding:13px; font-weight:700; cursor:pointer; }
.footer-note { text-align:center; color:#737d8a; font-size:12px; margin-top:16px; }
@media (max-width: 1020px) { .hero-grid { grid-template-columns:1fr; } .coach-panel { min-height:auto; } .board-wrap { width:min(90vw,720px); } }
@media (max-width: 620px) {
  .app-shell { width:96vw; padding-top:10px; }
  .topbar { border-radius:16px; }
  .status-pill { display:none; }
  .board-panel,.coach-panel { padding:16px; border-radius:20px; }
  .panel-head { flex-direction:column; }
  .turn-badge { align-self:flex-start; }
  .brand-subtitle { display:none; }
  .board-shell { padding-left:22px; padding-bottom:22px; }
  .ranks { width:18px; height:calc(100% - 22px); font-size:10px; }
  .files { left:22px; width:calc(100% - 22px); height:18px; font-size:10px; }
}

.game-setup { display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; padding:14px; border:1px solid var(--stroke); border-radius:16px; background:rgba(255,255,255,.025); }
.setup-group { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.setup-label { font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.setup-label.compact { margin-left:5px; }
.segmented { display:flex; padding:3px; border:1px solid var(--stroke); border-radius:11px; background:rgba(0,0,0,.2); }
.segment { border:0; border-radius:8px; padding:8px 11px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.segment.active { background:var(--accent); color:#17110a; }
.time-select { border:1px solid var(--stroke); border-radius:10px; background:#171b23; color:var(--text); padding:8px 10px; font:inherit; }
.time-select.small { min-width:78px; }
.chess-clock { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px; margin:0 auto 18px; width:min(76vh,760px); max-width:100%; }
.clock-side { appearance:none; color:var(--text); font:inherit; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; padding:13px 15px; border:1px solid var(--stroke); border-radius:15px; background:rgba(255,255,255,.03); opacity:.57; transition:.2s ease; cursor:default; }
.clock-side.active { opacity:1; border-color:rgba(118,226,160,.72); background:linear-gradient(135deg,rgba(64,185,111,.3),rgba(35,116,72,.18)); box-shadow:0 0 26px rgba(75,210,130,.16); }
.clock-side.active:not(:disabled) { cursor:pointer; }
.clock-side.active:not(:disabled):hover { transform:translateY(-1px); border-color:rgba(138,244,180,.9); background:linear-gradient(135deg,rgba(74,205,126,.38),rgba(38,137,82,.23)); }
.clock-side.confirm-ready { animation:clock-ready 1.25s ease-in-out infinite; }
.clock-side.flagged { opacity:1; border-color:rgba(255,95,95,.7); background:rgba(255,70,70,.1); }
.clock-side:disabled { color:var(--text); }
.clock-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.clock-player { color:var(--muted); font-size:12px; font-weight:700; }
.clock-side.active .clock-player { color:#eafff1; }
.clock-action { color:var(--muted); font-size:10px; font-weight:650; }
.clock-side.active .clock-action { color:#c9f5d8; }
.clock-time { font-variant-numeric:tabular-nums; font-size:clamp(22px,3vw,34px); letter-spacing:.04em; }
.clock-divider { display:grid; place-items:center; color:var(--muted); font-size:11px; font-weight:800; }
@keyframes clock-ready { 0%,100%{box-shadow:0 0 20px rgba(75,210,130,.12)} 50%{box-shadow:0 0 34px rgba(75,210,130,.3)} }
@media (max-width:620px){ .game-setup{align-items:stretch}.setup-group{width:100%;justify-content:space-between}.chess-clock{gap:6px}.clock-side{padding:10px;flex-direction:column;align-items:flex-start}.clock-time{font-size:24px}.clock-divider{font-size:9px} }