:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #eaf0f6;
  background: #121b27;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 10%, #253245 0%, transparent 65%);
}
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.game { width: min(100% - 40px, 460px); margin: 0 auto; padding: 48px 0 24px; }
header { text-align: center; margin-bottom: 30px; }
.eyebrow { font-size: 9px; letter-spacing: 2.3px; color: #a8b8c9; font-weight: 700; }
.brand-light { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffdb7c; margin-right: 8px; box-shadow: 0 0 12px #ffdb7c80; }
h1 { margin: 16px 0 8px; font-size: clamp(42px, 10vw, 58px); font-weight: 750; letter-spacing: -2.5px; line-height: 1.1; }
.title-dot { color: #ffdb7c; }
.subtitle { font-size: 14px; color: #bbc7d4; letter-spacing: 2px; }
.game-panel { padding: 24px; background: #182331; border: 1px solid #344252; border-radius: 24px; box-shadow: 0 24px 64px #0003; }
.dashboard { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.stat-label { display: block; font-size: 11px; color: #aab9ca; letter-spacing: 1px; margin-bottom: 5px; }
.stat-value { display: block; font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.remaining { text-align: right; }
.remaining .stat-value { color: #ffdb7c; font-size: 23px; }
.stat-total { font-size: 13px; color: #aab9ca; font-weight: 400; }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.cell { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid #3b4b5f; border-radius: 12px; background: #263446; position: relative; transition: background 140ms, box-shadow 140ms, transform 100ms; }
.cell::after { content: ""; position: absolute; width: 7px; height: 7px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #54667c; }
.cell.is-on { background: #ffdb7c; border-color: #ffe7a4; box-shadow: 0 0 18px #ffdb7c20, inset 0 1px 0 #fff6; }
.cell.is-on::after { background: #fff5d6; box-shadow: 0 0 12px #fff6; }
.cell:active { transform: scale(.94); }
@media (hover: hover) { .cell:hover { border-color: #d2dfef; } .primary:hover { background: #ffe7a4; } .secondary:hover { background: #2b3a4c; } }
.status { min-height: 54px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-align: center; color: #b3c1d0; line-height: 1.6; }
.status.is-clear { color: #ffdb7c; font-weight: 700; }
.actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.actions button { min-height: 48px; border-radius: 10px; font-size: 13px; font-weight: 650; }
.primary { background: #ffdb7c; color: #222b36; border: 1px solid #ffdb7c; }
.primary span { margin-left: 14px; }
.secondary { background: transparent; color: #d3deea; border: 1px solid #46566a; }
.secondary span { margin-right: 6px; }
.instructions { margin: 26px 5px 0; }
h2 { font-size: 13px; font-weight: 650; margin: 0 0 10px; }
h2 span { color: #ffdb7c; margin-right: 6px; }
.instructions p { color: #acbbcd; font-size: 12px; line-height: 1.9; margin: 0; }
strong { color: #d5dfeb; font-weight: 600; }
.legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; color: #acbbcd; font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend-on { background: #ffdb7c; }
.legend-off { background: #263446; border: 1px solid #54667c; }
.keyboard-note { margin-left: auto; }
footer { text-align: center; color: #8b9aad; font-size: 10px; letter-spacing: 1px; margin-top: 32px; }
@media (max-width: 380px) { .game { width: calc(100% - 24px); padding-top: 28px; } .game-panel { padding: 16px; } .board { gap: 7px; } .cell { border-radius: 9px; } .keyboard-note { width: 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } }