*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.challenge-card{text-align:center}:root{--bg: #0f172a;--card: #111827;--muted: #94a3b8;--text: #f1f5f9;--accent: #22c55e;--accent-2: #60a5fa;--danger: #ef4444;--hint: #ffcc00;--cell-font: clamp(1.05rem, 2.6vw, 1.6rem);--game-font: "Cambria Math", Cambria, "Times New Roman", serif}@media (max-width: 600px){:root{--cell-font: clamp(1rem, 5.5vw, 1.45rem)}}body{background:linear-gradient(180deg,#0b1222,var(--bg));color:var(--text);min-height:100dvh}@keyframes sudoku-goodflash{0%{background:#b8f5b3}to{background:transparent}}@keyframes sudoku-badflash{0%{background:#ffd8d8}to{background:transparent}}.sudoku td.goodNumber .cell-inner{animation:sudoku-goodflash .35s ease}.sudoku td.mistakeNumber .cell-inner{animation:sudoku-badflash .35s ease}.app-header{text-align:center;padding:16px}.app-header h1{margin:0 0 4px;font-weight:800;font-size:1.5rem}.subtitle{margin:0;color:var(--muted);font-size:.9rem}.sudoku{width:100%;table-layout:fixed;border-collapse:collapse;max-width:500px;margin:0 auto}.sudoku[data-n="4"]{max-width:360px}.sudoku col{width:auto}.app{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:12px;max-width:1200px;margin:0 auto}.left{display:flex;flex-direction:column;align-items:center}.left>.card,.left>.timer,.left>.numpad{width:100%}@media (max-width: 768px){.app{display:flex;flex-direction:column;gap:12px}.left,.right{display:contents}.card:has(#challengeLabel){order:10}.timer{order:20}.status.card{order:30}.toolbar.card{order:40}.card:has(#gridTable){order:50}.numpad.card{order:60}.coach.card{order:70}.tips.card{order:80}}@supports not (selector(:has(*))){@media (max-width: 768px){.left,.right{display:contents}.challenge-card{order:10}.timer{order:20}.status.card{order:30}.toolbar.card{order:40}.board-card{order:50}.numpad.card{order:60}.coach.card{order:70}.tips.card{order:80}}}.card{background:var(--card);border:1px solid #334155;border-radius:12px;padding:12px;box-shadow:0 4px 20px #00000040}select,button{background:#0b1020;color:var(--text);border:1px solid #334155;border-radius:10px;padding:10px 14px;font-size:1rem;cursor:pointer}button.primary{background:var(--accent);color:#0b1020;border-color:transparent;font-weight:700}button.primary:hover{filter:brightness(1.1)}button.toggly[aria-pressed=true]{background:var(--accent-2);color:#0b1020;font-weight:700}button:disabled{opacity:.55;cursor:not-allowed}button.danger{background:var(--danger);border-color:transparent;color:#fff}button.danger:hover{filter:brightness(1.1)}#clearProgress{font-size:.82rem;padding:.35rem .6rem;border-radius:.5rem;line-height:1.1;opacity:.95;margin-top:6px}.toolbar{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;column-gap:8px;row-gap:6px;align-items:center;padding:10px}.toolbar .row{display:contents;margin:0}.toolbar label,.toolbar select,.toolbar button{font-size:.85rem;line-height:1.1;white-space:nowrap}.toolbar button,.toolbar select{padding:.32rem .55rem;border-radius:.5rem;width:auto;min-width:0;justify-self:start}.toolbar button.primary,.toolbar button.danger{font-weight:700}@media (max-width: 600px){.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px;padding:10px}.toolbar .row{display:contents}.toolbar select,.toolbar button{font-size:.85rem;padding:.34rem .6rem;border-radius:.5rem;line-height:1.1;flex:0 0 auto}}@media (max-width: 420px){.toolbar{column-gap:6px;row-gap:4px}.toolbar select,.toolbar button{font-size:.8rem;padding:.28rem .5rem}}table.sudoku{width:100%;max-width:500px;margin:10px auto;border-collapse:collapse;background:#fff;border:4px solid #24242e;box-shadow:0 6px 20px #e8e9e7eb;table-layout:fixed;border-radius:12px}@media (max-width: 600px){table.sudoku{max-width:100%}}.sudoku td.cell{position:relative;text-align:center;vertical-align:middle;border:1px solid #ccc;user-select:none;padding:0}.sudoku td.cell .cell-inner{width:100%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--cell-font);font-variant-numeric:lining-nums tabular-nums;font-family:var(--game-font);color:#000;background:#fff}.sudoku td.prefilled .cell-inner{background:#f0f0f0}.sudoku td.selected .cell-inner{background:#d2e4f6}.sudoku td.sameNumber .cell-inner{background:#5da7f6}.sudoku td.goodNumber .cell-inner{background:#d1fadf!important;outline:2px solid rgba(34,197,94,.35)}.sudoku td.mistakeNumber .cell-inner{background:#f69292}.sudoku td.mistakeNumber{color:red!important;border:2px solid #ff0000}.sudoku td.box-right{border-right:3px solid #000!important}.sudoku td.box-bottom{border-bottom:3px solid #000!important}.notes{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:.62rem;color:#444;font-family:var(--game-font)}.notes.small{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.note{display:flex;justify-content:center;align-items:center;line-height:2}.numpad{display:flex;justify-content:center}.numpad .keys{display:flex;justify-content:center;align-items:stretch;flex-wrap:nowrap;gap:6px;width:100%;padding:6px 8px;overflow:hidden}.numpad .keys>button{flex:1 1 0;min-width:0;padding:8px 0;font-family:inherit;font-weight:700;background:#fff;color:#000;border:2px solid #000;border-radius:8px;box-shadow:2px 2px #555;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .06s ease,box-shadow .06s ease,background .12s ease,opacity .12s ease}.numpad .keys>button:hover{background:#f5f5f5}.numpad .digit{font-size:clamp(.98rem,4.2vw,1.1rem);line-height:1.1;color:#1f59d1;font-family:var(--game-font);font-variant-numeric:lining-nums tabular-nums}.numpad .remain{font-size:clamp(.7rem,2.2vw,.8rem);line-height:2;letter-spacing:.01em;color:var(--muted);font-family:var(--game-font)}.numpad .keys>button.active{background:#cfe1ff;border-color:#1f2937;box-shadow:2px 2px #1f2937}.numpad .keys>button.exhausted{opacity:.45}.numpad .keys>button.exhausted .digit,.numpad .keys>button.exhausted .remain{color:#6b7280}@media (max-width: 360px){.numpad .keys{gap:5px}.numpad .keys>button{padding:7px 0}}.coach h2,.status h2,.tips h2{margin:6px 0 10px;font-size:1.1rem}.stats{display:grid;gap:6px;font-size:1rem}.stats div{display:flex;justify-content:space-between;color:var(--muted)}.app-footer{text-align:center;padding:8px 12px 24px;color:var(--muted);font-size:.85rem}.game-over{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.game-over .overlay-box{background:#1e293b;border-radius:16px;padding:40px 30px;max-width:460px;width:100%;text-align:center;box-shadow:0 6px 22px #0000008c;animation:popIn .4s ease}@keyframes popIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.game-over h2{margin:0 0 24px;font-size:2.4rem;font-weight:800;color:var(--accent)}.game-over p{margin:12px 0;font-size:1.3rem;color:var(--text)}.game-over strong{color:var(--hint);font-size:1.6rem}.game-over .buttons{margin-top:32px;display:flex;justify-content:center;gap:20px}.game-over button{padding:14px 28px;font-size:1.1rem;font-weight:700;border-radius:10px;cursor:pointer;border:none;min-width:140px}.game-over button#nextChallenge{background:var(--accent);color:#0b1020}.game-over button#quitGame{background:var(--danger);color:#fff}.game-over button:hover{filter:brightness(1.1)}.sudoku td.hint-highlight .cell-inner{background:#fff3b0!important}.sudoku td.hint-highlight{outline:3px solid var(--hint);animation:pulse .8s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}table.sudoku[data-n="4"]{max-width:320px}@media (max-width: 600px){table.sudoku[data-n="4"]{max-width:260px}}.timer{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin:8px 0;text-align:center}.timer-clock{font-variant-numeric:tabular-nums;font-weight:600;font-size:clamp(.9rem,1.3vw,1.05rem);line-height:1;letter-spacing:.01em;color:var(--muted)}.timer-actions button{font-size:.8rem;padding:.3rem .55rem;border-radius:.5rem}.timer-actions button[hidden]{display:none!important}#bestTime{font-variant-numeric:tabular-nums;font-weight:600;font-size:clamp(.8rem,1.2vw,.9rem);color:var(--muted);opacity:.95}@media (max-width: 420px){.timer-clock{font-size:.85rem}.timer-actions button{font-size:.75rem;padding:.25rem .45rem}}@media (prefers-reduced-motion: reduce){.sudoku td.goodNumber .cell-inner,.sudoku td.mistakeNumber .cell-inner,.sudoku td.hint-highlight{animation:none!important}}
