:root {
  --bg: #060816;
  --panel: rgba(12, 18, 42, 0.86);
  --line: rgba(105, 226, 255, 0.24);
  --text: #ebf7ff;
  --muted: #8ba4c9;
  --cyan: #66f5ff;
  --pink: #ff5ad9;
  --lime: #73ff9f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at top, #0d1236, var(--bg) 55%); color: var(--text); }
.shell { max-width: 1240px; margin: 0 auto; padding: 24px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 0 40px rgba(42, 212, 255, 0.08); }
.hero, .topgrid, .gamewrap { display: grid; gap: 18px; }
.hero { grid-template-columns: 1fr auto; align-items: center; padding: 24px; margin-bottom: 18px; }
.topgrid { grid-template-columns: 1.4fr 1fr; margin-bottom: 18px; }
.stats, .actions, .boardpanel, .sidepanel { padding: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stats span { display:block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.stats strong { display:block; margin-top: 6px; font-size: 18px; }
.gamewrap { grid-template-columns: 420px 1fr; align-items: start; }
.board { width: 360px; height: 720px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; background: rgba(0,0,0,0.35); padding: 8px; border-radius: 18px; border: 1px solid rgba(102,245,255,0.2); margin: 0 auto; }
.cell { border-radius: 8px; background: rgba(255,255,255,0.03); transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.cell.filled { transform: translateY(0); box-shadow: inset 0 0 12px rgba(255,255,255,0.18), 0 0 10px currentColor; }
.cell.c1 { color: #66f5ff; background: rgba(102,245,255,0.34); }
.cell.c2 { color: #ffe066; background: rgba(255,224,102,0.34); }
.cell.c3 { color: #ff5ad9; background: rgba(255,90,217,0.34); }
.cell.c4 { color: #73ff9f; background: rgba(115,255,159,0.34); }
.cell.c5 { color: #ff8a5b; background: rgba(255,138,91,0.34); }
.cell.c6 { color: #8f9cff; background: rgba(143,156,255,0.34); }
.cell.c7 { color: #d2a8ff; background: rgba(210,168,255,0.34); }
.button { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(102,245,255,0.3); background: linear-gradient(180deg, rgba(102,245,255,0.18), rgba(102,245,255,0.08)); color: var(--text); cursor: pointer; }
.button.ghost { background: transparent; }
.button.accent { border-color: rgba(255,90,217,0.35); background: linear-gradient(180deg, rgba(255,90,217,0.18), rgba(255,90,217,0.08)); }
.actions { display: grid; gap: 12px; }
#status, .finalboard { margin: 0; min-height: 100px; white-space: pre-wrap; color: var(--muted); background: rgba(0,0,0,0.22); padding: 12px; border-radius: 12px; }
.leaderboard { padding-left: 18px; margin: 0 0 20px; }
.leaderboard li { margin: 8px 0; color: var(--muted); }
.hud { display:flex; justify-content: space-between; margin-bottom: 12px; color: var(--muted); }
.eyebrow { margin: 0; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; }
h1 { margin: 8px 0 10px; font-size: 42px; }
.lede, .controls-note { color: var(--muted); }
@media (max-width: 980px) { .topgrid, .gamewrap, .hero, .stats { grid-template-columns: 1fr; } .board { width: min(92vw, 360px); height: min(184vw, 720px); } }