:root {
  --bg-top: #eef4ff;
  --bg-bottom: #cedcf8;
  --panel-bg: rgba(255, 255, 255, 0.86);
  --board-bg: #3268d8;
  --cell-bg: #264ca7;
  --text: #1c2b49;
  --muted: #586a91;
  --red: #e15252;
  --yellow: #f2c94c;
  --shadow: 0 24px 56px rgba(40, 63, 118, 0.2);
  --board-size: min(68vh, 58vw, 760px);
  --panel-width: min(34vw, 420px);
  --gap: clamp(6px, 0.8vw, 10px);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 14% 12%, rgba(255,255,255,.65), transparent 36%), linear-gradient(155deg, var(--bg-top), var(--bg-bottom));
}
.page {
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, var(--panel-width)) minmax(320px, var(--board-size));
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(12px, 2.2vw, 24px);
}
.panel {
  background: var(--panel-bg);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.heading h1 { margin: 0 0 8px; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: .95; }
.heading p { margin: 0; color: var(--muted); }
.stats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { background: rgba(232,239,254,.86); border: 1px solid rgba(255,255,255,.65); border-radius: 12px; padding: 10px 12px; text-align: center; }
.label { display:block; text-transform: uppercase; font-size: .74rem; color: #61739c; letter-spacing: .06em; }
.stat-card strong { display:block; margin-top: 3px; font-size: clamp(1.1rem, 1.8vw, 1.7rem); }
.primary-btn { width:100%; margin-top: 14px; border:0; border-radius:12px; padding:11px 14px; background:#4c6fdf; color:#fff; font-weight:700; cursor:pointer; }
.primary-btn:hover { background:#3f5fc3; }
.board-wrap { width: min(100%, var(--board-size)); }
.board {
  width:100%; aspect-ratio: 7 / 6; padding: var(--gap); border-radius: 20px; background: var(--board-bg);
  display:grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--gap);
  box-shadow: var(--shadow);
}
.cell {
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 52%), var(--cell-bg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
  cursor: pointer;
}
.cell.r { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 52%), var(--red); }
.cell.y { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 52%), var(--yellow); }
.cell:disabled { cursor: not-allowed; opacity: .96; }
@media (max-width: 980px) {
  body { overflow: auto; }
  .page { height:auto; min-height:100vh; grid-template-columns:1fr; justify-items:center; gap:14px; padding:14px; }
  .panel, .board-wrap { width:min(92vw, 560px); }
}
@media (max-width: 560px) { .stats { grid-template-columns:1fr; } }