:root {
  --bg: #121318;
  --panel: #1f2129;
  --text: #f2f3f5;
  --muted: #9ba1ad;
  --border: #3a3d48;
  --accent: #8ab4ff;
  --green: #4caf6a;
  --red: #ff6f61;
  --amber: #f2c75c;
  --orange: #ff9f5a;
  --board: 360px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); background: var(--bg);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
body { background: radial-gradient(120% 70% at 50% 0%, #1c2233 0%, var(--bg) 65%); }
#app { height: 100vh; height: 100dvh; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; padding: 10px 12px; gap: 8px; }

.top { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.title { font-weight: 800; font-size: 19px; letter-spacing: 0.2px; white-space: nowrap; }
.chip { background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px;
  font-size: 13px; color: #dfe2e8; white-space: nowrap; }
#level { margin-left: auto; font-weight: 600; }
#level.easy { color: #8fe0a8; }
#level.medium { color: #ffd479; }
#level.hard { color: #ff9a8c; }
.time { font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }

.msg { text-align: center; min-height: 20px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--green); font-weight: 700; }
.msg.bad { color: var(--red); }
.msg.hint { color: var(--amber); }

/* ---------- board ---------- */
.wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.board { width: var(--board); height: var(--board); display: grid; gap: 3px; padding: 3px; background: #4a5165;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: background 0.4s, box-shadow 0.4s; }
.box { display: grid; gap: 1px; background: #2a2e3a; overflow: hidden; border-radius: 2px; }
.box.tl { border-top-left-radius: 9px; }
.box.tr { border-top-right-radius: 9px; }
.box.bl { border-bottom-left-radius: 9px; }
.box.br { border-bottom-right-radius: 9px; }
.cell { position: relative; display: flex; align-items: center; justify-content: center; background: #1a1d26;
  font-size: calc(var(--board) * 0.08); font-weight: 600; color: var(--accent); cursor: pointer; transition: background-color 0.12s; }
.cell.given { color: var(--text); font-weight: 800; }
.cell.hint { color: var(--amber); font-weight: 700; }
.cell.fixed { color: var(--orange); background: #2b2219; }
.cell.peer { background: #212739; }
.cell.same { background: #2c3c60; }
.cell.sel { background: #3a5799; box-shadow: inset 0 0 0 2px #9cc0ff; }
.cell.bad { background-image: linear-gradient(rgba(255, 90, 80, 0.26), rgba(255, 90, 80, 0.26)); }
.cell.bad:not(.given) { color: var(--red); }
@media (hover: hover) { .cell:hover:not(.sel) { filter: brightness(1.18); } }

.notes { position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  font-size: calc(var(--board) * 0.034); font-weight: 600; color: #a9b1c2; line-height: 1; }
.notes span { display: flex; align-items: center; justify-content: center; }

.board.won { background: #3f9a5f; box-shadow: 0 0 0 1px #5fc283, 0 10px 34px rgba(76, 175, 106, 0.35); }
.board.won .cell, .board.over .cell { cursor: default; }
.board.won .cell:not(.given):not(.hint) { color: #8fe0a8; }

/* ---------- number pad + tools ---------- */
.pad { display: flex; gap: 6px; }
.pad button { position: relative; flex: 1; height: clamp(44px, 8.5vh, 62px); border: 0; border-radius: 10px; background: #2a2e3b;
  color: var(--text); font: 700 24px system-ui, sans-serif; cursor: pointer; padding: 0; touch-action: manipulation;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); transition: transform 0.08s, background 0.15s, opacity 0.2s; }
.pad button:active:not(:disabled) { transform: scale(0.94); background: #343a4b; }
.pad button small { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 600; color: var(--muted); }
.pad button.done { opacity: 0.35; }
.pad button:disabled { opacity: 0.3; cursor: default; }
.notes-on .pad button { color: var(--accent); font-size: 19px; background: #232a3d; box-shadow: inset 0 0 0 1px #3a5799; }

.tools { display: flex; gap: 6px; }
.tools button { flex: 1; height: clamp(40px, 7vh, 52px); border: 0; border-radius: 9px; background: var(--panel); color: var(--text);
  font: 600 12px system-ui, sans-serif; cursor: pointer; padding: 0; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background 0.15s; }
.tools button b { font-size: 16px; line-height: 1; font-weight: 400; }
.tools button.on { background: #3a5799; }
.tools button.confirm { background: #6b2c2c; }
.tools button:disabled { opacity: 0.35; cursor: default; }