:root {
  --bg: #161512; --panel: #262421; --panel2: #302e2b; --line: #3d3a36; --text: #ecebe9; --muted: #a09d98;
  --accent: #81b64c; --accent-h: #94c95f; --danger: #e5604a;
  --sq-l: #ebecd0; --sq-d: #739552;
  --bs: min(calc(100vw - 16px), 640px);
  --r: 12px; --top: #0f0e0c; --btn-h: #3a3733; --on-accent: #10200a; --clock-on-bg: #f1f0ee; --clock-on: #161512; --dot: rgba(20, 85, 30, .5);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --glow: 0 8px 30px rgba(0, 0, 0, .5); --gap: 0px; --board-bg: transparent; --bg-image: none;
  color-scheme: dark;
}
/* три странные темы: всё перекрашивается переменными, плюс пара тематических деталей */
@property --sq-d { syntax: '<color>'; inherits: true; initial-value: #739552; }
html[data-theme="neon"] {
  --bg: #0b0014; --panel: #150a2b; --panel2: #231049; --line: #4b1d8f; --text: #e8fff9; --muted: #8fb9c9;
  --accent: #00ffd0; --accent-h: #5cffe0; --danger: #ff2e6a; --on-accent: #02161a;
  --top: #060010; --btn-h: #34187a; --clock-on-bg: #00ffd0; --clock-on: #02161a; --dot: rgba(255, 255, 255, .75);
  --sq-l: #ff6ec7; --sq-d: #2f6fed;
  --font: "Courier New", Consolas, monospace;
  --glow: 0 0 40px rgba(255, 46, 151, .55), 0 0 90px rgba(0, 255, 208, .25);
  --bg-image: linear-gradient(rgba(0, 255, 208, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 208, .07) 1px, transparent 1px);
  --r: 4px;
}
html[data-theme="neon"] body { background-size: 32px 32px; }
html[data-theme="neon"] .top h1 { color: #00ffd0; text-shadow: 0 0 10px #00ffd0, 0 0 22px #00ffd0; }
html[data-theme="candy"] {
  --bg: #ffe3f1; --panel: #ffffff; --panel2: #ffd0e8; --line: #ffb3d9; --text: #4a1f3d; --muted: #a05a86;
  --accent: #ff4f9a; --accent-h: #ff78b3; --danger: #e0244f; --on-accent: #ffffff;
  --top: #ff8cc6; --btn-h: #ffb8dc; --clock-on-bg: #ff4f9a; --clock-on: #ffffff; --dot: rgba(255, 79, 154, .6);
  --sq-l: #fff3b0; --sq-d: #7fe0ff;
  --font: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive;
  --glow: 0 10px 0 #ff9ecb, 0 18px 30px rgba(255, 79, 154, .35); --gap: 4px; --board-bg: #ff9ecb; --r: 26px;
  color-scheme: light;
}
html[data-theme="candy"] .c { border-radius: 30%; }
html[data-theme="candy"] #board { border-radius: 24px; }
html[data-theme="candy"] .top h1 { color: #fff; text-shadow: 0 2px 0 #ff4f9a; }
html[data-theme="candy"] .top .sub { color: #fff; }
html[data-theme="lava"] {
  --bg: #140603; --panel: #2a0f08; --panel2: #3d170c; --line: #6b2a14; --text: #ffe6d2; --muted: #c99a80;
  --accent: #ff7a1a; --accent-h: #ffa04d; --danger: #ff3b1f; --on-accent: #200800;
  --top: #0b0301; --btn-h: #5a2512; --clock-on-bg: #ff7a1a; --clock-on: #200800; --dot: rgba(255, 200, 120, .75);
  --sq-l: #8a4524; --sq-d: #3a1608;
  --font: Georgia, "Times New Roman", serif;
  --glow: 0 0 50px rgba(255, 90, 20, .5), 0 0 120px rgba(255, 60, 0, .25);
  --bg-image: radial-gradient(ellipse at 50% 120%, rgba(255, 90, 20, .35), transparent 60%); --r: 8px;
  animation: lava 4s ease-in-out infinite; /* тёмные клетки светятся как остывающая лава */
}
@keyframes lava { 0%, 100% { --sq-d: #3a1608; } 50% { --sq-d: #7d2c0b; } }
html[data-theme="lava"] .b { color: #120804; text-shadow: 0 0 3px #ffb070, 0 0 7px #ff7a1a; }


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); background-image: var(--bg-image); background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom); }
button, select, input { font: inherit; color: inherit; }

.top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--top); border-bottom: 1px solid var(--line); }
.top .logo { font-size: 24px; line-height: 1; }
.top h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.top .sub { color: var(--muted); font-size: 13px; margin-left: auto; }
.btn { appearance: none; border: 0; border-radius: 8px; padding: 10px 14px; background: var(--panel2); cursor: pointer; font-weight: 600; transition: background .15s, transform .05s; }
.btn:hover { background: var(--btn-h); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-h); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.card { background: var(--panel); border-radius: var(--r); padding: 14px; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 10px; font-weight: 700; }