:root{--ink:#262626;--soft:#8c8c8c;--faint:#c9c9c9;--line:#0000000e;--box:#00000021;--fill:#00000009;--bg:#fff;--board:min(calc(100vw - 48px), 400px);--cell:calc(var(--board) / 9);--ease:cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%}body{color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none;font-family:Pretendard Variable,Pretendard,-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif}.page{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 72px) 24px calc(env(safe-area-inset-bottom) + 40px);flex-direction:column;align-items:center;display:flex}.head{width:var(--board);text-align:center;min-height:80px}.level{color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:14px;font-size:22px;font-weight:500;line-height:1}.line{color:#4a4a4a;letter-spacing:-.01em;word-break:keep-all;font-size:14px;font-weight:400;line-height:1.75}.line span{opacity:0;filter:blur(4px);animation:ink .9s var(--ease) forwards}.line.out{animation:.45s forwards fade-out}@keyframes ink{to{opacity:1;filter:blur()}}@keyframes fade-out{to{opacity:0;filter:blur(3px)}}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;padding-bottom:48px;display:flex}.frame{width:var(--board);border:1px solid #d6d6d6;border-radius:16px;position:relative}.board{border-radius:16px;grid-template-columns:repeat(9,1fr);display:grid;position:relative;overflow:hidden}.cell{aspect-ratio:1;font-size:calc(var(--cell) * .46);font-variant-numeric:tabular-nums;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .35s var(--ease), color .35s var(--ease);justify-content:center;align-items:center;font-weight:400;line-height:1;display:flex}.cell.c2,.cell.c5{border-right-color:var(--box)}.cell.c8{border-right:0}.cell.r2,.cell.r5{border-bottom-color:var(--box)}.cell.r8{border-bottom:0}.cell.given{cursor:default;color:var(--ink)}.cell.mine{color:var(--soft);font-weight:300}.cell.sel{background:var(--fill)}.cell.bad{color:var(--faint)}.cell.given.bad{color:var(--ink)}.cell.hint{box-shadow:inset 0 0 0 1.5px var(--ink);animation:1.6s ease-in-out infinite hint-breathe}@keyframes hint-breathe{50%{box-shadow:inset 0 0 0 1.5px #00000026}}.cell .d{display:inline-block}.board.pre .d{opacity:0}.cell .d.drop{animation:drop .45s var(--ease)}@keyframes drop{0%{opacity:0;filter:blur(3px);transform:scale(1.35)}}.picker{z-index:5;transform-origin:var(--ox,50%) var(--oy,0);animation:pop-in .32s var(--ease);background:#ffffffe0;border:1px solid #e3e3e3;border-radius:18px;grid-template-rows:repeat(3,44px);grid-template-columns:repeat(3,44px);grid-auto-rows:34px;padding:5px;display:grid;position:fixed;box-shadow:0 10px 28px #00000012}.picker[hidden]{display:none}.picker.out{pointer-events:none;animation:.18s forwards pop-out}@keyframes pop-in{0%{opacity:0;transform:scale(.86)}}@keyframes pop-out{to{opacity:0;transform:scale(.94)}}.picker button{font:inherit;color:#3d3d3d;font-variant-numeric:tabular-nums;cursor:pointer;opacity:0;animation:num-in .4s var(--ease) forwards;background:0 0;border:0;border-radius:50%;font-size:17px;font-weight:400;transition:background-color .2s}@keyframes num-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1}}.picker button:active,.picker button.on{background:#0000000d}.picker .erase{color:var(--soft);letter-spacing:.02em;border-radius:12px;grid-column:1/-1;font-size:11px}.hint-btn{right:calc(env(safe-area-inset-right) + 24px);bottom:calc(env(safe-area-inset-bottom) + 28px);z-index:4;color:#fff;width:36px;height:36px;font:inherit;cursor:pointer;transition:transform .2s var(--ease), opacity .2s ease;background:#111;border:0;border-radius:50%;font-size:17px;font-weight:600;line-height:36px;position:fixed}.hint-btn:active{opacity:.8;transform:scale(.9)}.veil{z-index:10;background:var(--bg);cursor:pointer;justify-content:center;align-items:center;padding:0 40px;display:flex;position:fixed;inset:0}.veil[hidden]{display:none}.veil.out{animation:.6s forwards veil-out}@keyframes veil-out{to{opacity:0}}.veil-line{color:#3a3a3a;text-align:center;word-break:keep-all;max-width:300px;font-size:15px;line-height:1.8}.veil-line span{opacity:0;filter:blur(4px);animation:ink .9s var(--ease) forwards}.veil-tap{left:50%;bottom:calc(env(safe-area-inset-bottom) + 56px);background:var(--soft);border-radius:50%;width:5px;height:5px;margin-left:-2.5px;animation:1.8s ease-in-out infinite tap-breathe;position:absolute}@keyframes tap-breathe{50%{opacity:.2}}.hint-btn.spot{z-index:11;pointer-events:none;animation:1.6s ease-in-out infinite spot}@keyframes spot{50%{box-shadow:0 0 0 8px #00000014}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:10ms!important;animation-delay:0s!important}}
