*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--c-bg:#f0f4ff;--c-surface:#fff;--c-border:#a8bcd4;--c-border-box:#1a2e5a;--c-primary:#2563eb;--c-primary-h:#1d4ed8;--c-text:#1e293b;--c-text-muted:#64748b;--c-prefilled:#e8edf8;--c-selected:#60a5fa;--c-highlighted:#e0eaff;--c-same-digit:#dbeafe;--c-conflict:#fee2e2;--c-conflict-val:#dc2626;--c-wrong:#ffedd5;--c-wrong-val:#c2410c;--c-note:#475569;--c-complete:#15803d;--c-disabled:#94a3b8;--cell-size:min(calc((100vw - 2rem) / 9), 56px);--board-size:calc(var(--cell-size) * 9);--note-size:calc(var(--cell-size) / 3.8);color:var(--c-text);background:var(--c-bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px}html,body,#root{width:100%;height:100%;overflow-x:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:disabled{cursor:default;opacity:.4}.app{flex-direction:column;align-items:center;gap:.5rem;min-height:100%;padding:.5rem 1rem 1.5rem;display:flex}.app__header{width:100%;max-width:var(--board-size);align-items:center;gap:.5rem;display:flex}.app__title-block{flex-direction:column;flex:none;gap:.1rem;display:flex}.app__title{color:var(--c-primary);letter-spacing:-.02em;font-size:1.4rem;font-weight:700;line-height:1}.app__puzzle-info{align-items:center;gap:.35rem;display:flex}.app__puzzle-id{color:var(--c-text-muted);font-size:.85rem;font-weight:600}.app__header-actions{gap:.25rem;margin-left:auto;display:flex}.game-area,.side-panel{flex-direction:column;align-items:center;gap:.5rem;width:100%;display:flex}.app__board{flex:none}.board-wrap{line-height:0;display:inline-block;position:relative}.board-pause-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2.5px solid var(--c-border-box);background:#0f172abf;border-radius:0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.board-pause-label{color:#fff;letter-spacing:.05em;text-transform:uppercase;font-size:1.5rem;font-weight:800}.board{grid-template-columns:repeat(9, var(--cell-size));grid-template-rows:repeat(9, var(--cell-size));border:2.5px solid var(--c-border-box);outline:2.5px solid var(--c-border-box);display:grid}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid var(--c-border);cursor:pointer;background:var(--c-surface);justify-content:center;align-items:center;transition:background .1s;display:flex;position:relative}.cell:nth-child(9n+3),.cell:nth-child(9n+6){border-right:2.5px solid var(--c-border-box)}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2.5px solid var(--c-border-box)}.cell--prefilled{background:var(--c-prefilled)}.cell--selected{background:var(--c-selected)!important}.cell--highlighted{background:var(--c-highlighted)}.cell--same-digit{background:var(--c-same-digit)}.board[data-shade="0"] .cell:not([data-cands*="0"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="1"] .cell:not([data-cands*="1"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="2"] .cell:not([data-cands*="2"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="3"] .cell:not([data-cands*="3"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="4"] .cell:not([data-cands*="4"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="5"] .cell:not([data-cands*="5"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="6"] .cell:not([data-cands*="6"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="7"] .cell:not([data-cands*="7"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong),.board[data-shade="8"] .cell:not([data-cands*="8"]):not(.cell--selected):not(.cell--conflict):not(.cell--wrong){background:#cdd8ec}.cell--conflict .cell__value{color:var(--c-conflict-val)}.cell--conflict{background:var(--c-conflict)}.cell--wrong{background:var(--c-wrong)}.cell--wrong .cell__value{color:var(--c-wrong-val)}.cell__value{font-size:calc(var(--cell-size) * .52);color:var(--c-primary);font-weight:600;line-height:1}.cell--prefilled .cell__value{color:var(--c-text);font-weight:700}.cell__notes{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:1px;display:grid}.cell__note{font-size:calc(var(--cell-size) * .26);color:#0000;justify-content:center;align-items:center;font-weight:500;line-height:1;display:flex}.cell__note--visible{color:var(--c-note)}.controls-row{width:100%;max-width:var(--board-size);justify-content:center;gap:.5rem;display:flex}.toggle-group{border:1.5px solid var(--c-primary);border-radius:8px;display:flex;overflow:hidden}.toggle-btn{color:var(--c-primary);letter-spacing:.01em;background:0 0;padding:.35rem .75rem;font-size:.78rem;font-weight:600;transition:background .15s,color .15s}.toggle-btn+.toggle-btn{border-left:1.5px solid var(--c-primary)}.toggle-btn--active{background:var(--c-primary);color:#fff}.digit-pad{width:100%;max-width:var(--board-size);grid-template-columns:repeat(5,1fr);gap:.4rem;display:grid}.digit-btn{aspect-ratio:1;background:var(--c-surface);border:1.5px solid var(--c-border);color:var(--c-text);touch-action:manipulation;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:.2rem 0 .25rem;transition:background .1s,transform .1s;display:flex}.digit-btn:active:not(:disabled){background:var(--c-highlighted);transform:scale(.93)}.digit-btn__num{font-size:calc(var(--cell-size) * .42);font-weight:700;line-height:1}.digit-btn__pips{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.pip{width:calc(var(--cell-size) * .085);height:calc(var(--cell-size) * .085);background:var(--c-border);border-radius:50%}.pip--filled{background:var(--c-primary)}.digit-btn--complete{opacity:.25}.digit-btn--erase{color:var(--c-conflict-val);font-size:calc(var(--cell-size) * .36);background:#fef2f2;border-color:#fca5a5;gap:0;padding:0}.timer{flex:1;justify-content:center;align-items:center;gap:.4rem;display:flex}.timer__display{font-variant-numeric:tabular-nums;color:var(--c-text);font-size:1.1rem;font-weight:700}.timer__btn{background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:50%;justify-content:center;align-items:center;width:1.8rem;height:1.8rem;font-size:.9rem;display:flex}.btn{border-radius:8px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;transition:background .15s}.btn--primary{background:var(--c-primary);color:#fff}.btn--primary:hover{background:var(--c-primary-h)}.btn--secondary{background:var(--c-surface);border:1.5px solid var(--c-border);color:var(--c-text)}.btn--danger{background:var(--c-conflict-val);color:#fff}.btn--danger:hover{background:#b91c1c}.btn--icon{background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:8px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;font-size:1.15rem;display:flex}.btn--icon:hover:not(:disabled){background:var(--c-highlighted)}.check-row{width:100%;max-width:var(--board-size);gap:.4rem;display:flex}.check-btn{background:var(--c-surface);border:1.5px solid var(--c-border);color:var(--c-text);touch-action:manipulation;border-radius:8px;flex:1;padding:.5rem .25rem;font-size:.78rem;font-weight:600;transition:background .15s}.check-btn:hover:not(:disabled){background:var(--c-highlighted)}.check-btn--cell{border-color:var(--c-primary);color:var(--c-primary)}.check-btn--puzzle{color:#b45309;border-color:#f59e0b}.selector-overlay{z-index:100;background:#00000073;align-items:flex-end;display:flex;position:fixed;inset:0}.selector-panel{background:var(--c-surface);border-radius:18px 18px 0 0;flex-direction:column;width:100%;max-height:85vh;display:flex;overflow:hidden}.selector-header{border-bottom:1px solid var(--c-border);align-items:center;gap:.5rem;padding:1rem 1rem .5rem;display:flex}.selector-title{flex:1;font-size:1.1rem;font-weight:700}.selector-close{background:var(--c-bg);width:2rem;height:2rem;color:var(--c-text-muted);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex}.selector-filters{scrollbar-width:none;flex-shrink:0;gap:.3rem;padding:.6rem 1rem;display:flex;overflow-x:auto}.selector-filters::-webkit-scrollbar{display:none}.filter-btn{white-space:nowrap;background:var(--c-bg);border:1.5px solid var(--c-border);color:var(--c-text-muted);border-radius:20px;flex-shrink:0;padding:.3rem .7rem;font-size:.78rem;font-weight:600}.filter-btn--active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.selector-list{flex-direction:column;flex:1;gap:.3rem;padding:.5rem;display:flex;overflow-y:auto}.puzzle-item{background:var(--c-bg);border:1.5px solid var(--c-border);text-align:left;border-radius:10px;align-items:center;gap:.5rem;padding:.6rem .8rem;transition:background .1s;display:flex}.puzzle-item:hover{background:var(--c-highlighted)}.puzzle-item--current{border-color:var(--c-primary);background:var(--c-selected)}.puzzle-item--done .puzzle-item__id{color:var(--c-text-muted)}.puzzle-item__id{color:var(--c-text);flex:1;font-size:.82rem;font-weight:600}.puzzle-item__diff{border-radius:12px;padding:.15rem .5rem;font-size:.75rem;font-weight:700}.diff--easy{color:#15803d;background:#dcfce7}.diff--medium{color:#92400e;background:#fef9c3}.diff--hard{color:#b91c1c;background:#fee2e2}.diff--hard-1{color:#9d174d;background:#fce7f3}.diff--hard-2{color:#6d28d9;background:#ede9fe}.diff--hard-3{color:#c7d2fe;background:#1e1b4b}.puzzle-item__status{flex-direction:column;align-items:flex-end;gap:.1rem;min-width:4.5rem;display:flex}.status-active{color:var(--c-primary);font-size:.68rem;font-weight:600}.status-done{color:var(--c-complete);font-size:.68rem;font-weight:600}.completion-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.completion-modal{background:var(--c-surface);text-align:center;border-radius:18px;flex-direction:column;gap:.6rem;width:100%;max-width:320px;padding:2rem 1.5rem;display:flex;box-shadow:0 20px 60px #00000040}.completion-emoji{font-size:3rem}.completion-title{color:var(--c-text);font-size:1.4rem;font-weight:800}.completion-time{color:var(--c-text-muted);font-size:1rem}.completion-best{color:var(--c-complete);font-size:.9rem;font-weight:700}.completion-prev{color:var(--c-text-muted);font-size:.85rem}.completion-actions{gap:.5rem;margin-top:.5rem;display:flex}.completion-actions .btn{flex:1}.confirm-overlay{z-index:300;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.confirm-modal{background:var(--c-surface);text-align:center;border-radius:14px;flex-direction:column;gap:.75rem;width:100%;max-width:280px;padding:1.5rem;display:flex;box-shadow:0 16px 48px #00000040}.confirm-modal__text{color:var(--c-text);font-size:1rem;font-weight:700}.confirm-modal__warn{color:var(--c-text-muted);font-size:.82rem}.confirm-actions{gap:.5rem;margin-top:.25rem;display:flex}.confirm-actions .btn{flex:1}@media (width>=600px){:root{--cell-size:min(calc((100vmin - 12rem) / 9), 64px);--side-w:calc(var(--cell-size) * 3 + .8rem)}.app{flex-direction:column;align-items:center;gap:1rem;padding:1.5rem}.app__header{max-width:calc(var(--board-size) + 1rem + var(--side-w))}.app__title{font-size:1.6rem}.app__puzzle-id{font-size:.9rem}.game-area{flex-direction:row;align-items:flex-start;gap:1rem;width:auto}.side-panel{width:var(--side-w);flex-shrink:0;align-items:stretch}.controls-row{flex-direction:column;gap:.4rem;width:100%;max-width:none}.toggle-group{width:100%}.toggle-btn{text-align:center;flex:1}.digit-pad{grid-template-columns:repeat(3,1fr);gap:.4rem;width:100%;max-width:none}.digit-btn--erase{aspect-ratio:auto;height:calc(var(--cell-size) * .55);grid-column:1/-1}.selector-overlay{justify-content:center;align-items:center}.selector-panel{border-radius:16px;max-width:480px;max-height:80vh}}
