:root{--ws-bg:#f7f6f2;--ws-surface-1:#fbfaf7;--ws-surface-2:#f1f1eb;--ws-surface-3:#e9e8e2;--ws-ink:#353630;--ws-ink-2:#6c6d65;--ws-muted:#8a8b82;--ws-line:#e2e2da;--ws-line-strong:#b9b8ae;--ws-alpha-1:#3536300d;--ws-alpha-2:#35363014;--ws-alpha-3:#35363029;--clay:#d97757;--clay-deep:#c6613f;--clay-soft:#d9775724;--ws-font-content:"Newsreader", "Noto Serif SC", "Songti SC", Georgia, serif;--ws-font-ui:"Inter", "Source Han Sans SC", "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;--ws-radius-chip:6px;--ws-radius-btn:8px;--ws-radius-card:12px;--ws-radius-glass:14px;--ws-shadow-card:0 1px 2px #393b2d0a, 0 8px 24px -8px #393b2d14;--ws-shadow-pop:0 2px 6px #393b2d0f, 0 16px 40px -12px #393b2d2e;--ws-glass-bg:#f7f7f3b8;--ws-glass-blur:blur(14px) saturate(1.3);--ws-dur-1:.12s;--ws-dur-2:.16s;--ws-dur-3:.24s;--ws-ease-out:cubic-bezier(.165, .84, .44, 1);--ws-ease-swift:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--ws-bg);color:var(--ws-ink);font:14px/1.5 var(--ws-font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:2px solid var(--ws-alpha-3);outline-offset:2px}.glass{background:var(--ws-glass-bg);-webkit-backdrop-filter:var(--ws-glass-blur);backdrop-filter:var(--ws-glass-blur);box-shadow:inset 0 1px 0 #ffffffb3, var(--ws-shadow-pop)}.btn{border-radius:var(--ws-radius-btn);min-height:44px;transition:background var(--ws-dur-1) var(--ws-ease-out), transform var(--ws-dur-1) var(--ws-ease-out);border:0;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:16px;display:inline-flex}.btn:active{transform:scale(.98)}.btn.primary{background:var(--ws-ink);color:var(--ws-bg)}.btn.primary:active{background:#24251f}.btn.secondary{background:var(--ws-surface-1);border:1px solid var(--ws-line)}.btn.ghost{color:var(--ws-ink-2);background:0 0}.btn.ghost:active{background:var(--ws-alpha-1)}.btn.block{width:100%}.btn.small{min-height:36px;padding:0 12px;font-size:14px}.icon-btn{border-radius:var(--ws-radius-btn);background:0 0;border:0;flex:none;place-items:center;width:40px;height:40px;display:grid}.icon-btn:active{background:var(--ws-alpha-2)}.icon-btn.off{color:var(--ws-muted)}.card{background:var(--ws-surface-1);border:1px solid var(--ws-line);border-radius:var(--ws-radius-card)}.home{max-width:520px;padding:max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;margin:0 auto;display:flex}.home-head{justify-content:space-between;align-items:flex-start;padding-top:16px;display:flex}.brand h1{font:400 32px/1.2 var(--ws-font-content);letter-spacing:.02em;margin:0}.brand p{color:var(--ws-ink-2);margin:4px 0 0;font-size:13px}.continue{text-align:left;box-shadow:var(--ws-shadow-card);background:var(--ws-surface-1);border-color:#0000;align-items:center;gap:12px;padding:16px;display:flex}.continue svg{flex:none}.continue-main{flex-direction:column;flex:1;min-width:0;display:flex}.continue-label{color:var(--clay-deep);font-size:12px}.continue-name{white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.continue-meta{color:var(--ws-ink-2);flex-direction:column;align-items:flex-end;font-size:12px;display:flex}.mini-hearts{color:var(--clay);letter-spacing:1px}.mini-hearts i{color:#c9c8bf;font-style:normal}.seg{background:var(--ws-surface-2);border-radius:var(--ws-radius-input,10px);grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.seg button{border-radius:var(--ws-radius-btn);min-height:40px;color:var(--ws-ink-2);font-variant-numeric:tabular-nums;transition:background var(--ws-dur-2) var(--ws-ease-out);background:0 0;border:0;font-size:16px}.seg button.on{background:var(--ws-surface-1);color:var(--ws-ink);box-shadow:var(--ws-shadow-card)}.presets h2{font:400 14px/1.5 var(--ws-font-ui);color:var(--ws-ink-2);margin:8px 0}.preset-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.preset{text-align:left;grid-template-rows:auto auto;grid-template-columns:48px 1fr;align-items:center;column-gap:12px;padding:12px;display:grid}.preset:active{background:var(--ws-surface-3)}.thumb{border-radius:var(--ws-radius-chip);background:var(--ws-surface-2);grid-row:span 2;place-items:center;width:48px;height:48px;display:grid;overflow:hidden}.thumb svg{width:40px;height:40px;fill:var(--ws-ink)}.preset:not(.done) .thumb:after{content:"?";font:22px var(--ws-font-content);color:var(--ws-muted);position:absolute}.preset:not(.done) .thumb{position:relative}.preset-name{font-size:16px}.preset-status{color:var(--ws-ink-2);font-size:12px}.preset.done .preset-status{color:var(--clay-deep)}.home>.btn.ghost{align-self:center}.game{flex-direction:column;min-height:100dvh;display:flex}.topbar{z-index:5;margin:max(8px, env(safe-area-inset-top)) 8px 0;border-radius:var(--ws-radius-glass);align-items:center;gap:4px;padding:4px;display:flex;position:sticky;top:0}.title{flex-direction:column;flex:1;min-width:0;line-height:1.25;display:flex}.title strong{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:500;overflow:hidden}.progress{color:var(--ws-ink-2);font-variant-numeric:tabular-nums;font-size:12px}.hearts{gap:2px;padding:0 4px;display:flex}.heart{transition:opacity var(--ws-dur-3) var(--ws-ease-out);display:grid}.heart.lost{opacity:.7}.heart.break{animation:heart-break .42s var(--ws-ease-out)}@keyframes heart-break{0%{transform:scale(1)}30%{transform:scale(1.25)rotate(-8deg)}60%{transform:scale(.9)rotate(6deg)}to{transform:scale(1)}}.stage{flex:1;place-items:center;padding:12px 12px 96px;display:grid}.board{--cell:32px;--rowclue:60px;--colclue:60px;--fs:14px;grid-template-columns:var(--rowclue) calc(var(--cell) * var(--n) + 3px);grid-template-rows:var(--colclue) calc(var(--cell) * var(--n) + 3px);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:grid}.corner{border-radius:var(--ws-radius-chip)}.col-clues{grid-template-columns:repeat(var(--n), var(--cell));padding:0 1.5px;display:grid}.row-clues{grid-template-rows:repeat(var(--n), var(--cell));padding:1.5px 0;display:grid}.clue{color:var(--ws-ink);font-size:var(--fs);transition:color var(--ws-dur-2) var(--ws-ease-out), background var(--ws-dur-2) var(--ws-ease-out);line-height:1;display:flex}.clue.col{justify-content:flex-end;align-items:center;gap:calc(var(--cell) * .16);border-radius:6px 6px 0 0;flex-direction:column;padding-bottom:6px}.clue.row{justify-content:flex-end;align-items:center;gap:calc(var(--cell) * .2);border-radius:6px 0 0 6px;padding-right:8px}.clue.hot{background:var(--clay-soft)}.clue.done{color:var(--ws-muted)}.clue.done span{text-decoration:line-through;-webkit-text-decoration-color:var(--ws-alpha-3);text-decoration-color:var(--ws-alpha-3)}.cells{grid-template-columns:repeat(var(--n), var(--cell));grid-template-rows:repeat(var(--n), var(--cell));border:1.5px solid var(--ws-ink-2);background:var(--ws-surface-1);touch-action:none;border-radius:4px;display:grid;position:relative;overflow:hidden}.cell{border-right:1px solid var(--ws-line);border-bottom:1px solid var(--ws-line);position:relative}.cell.lc{border-right:0}.cell.lr{border-bottom:0}.cell.mr{border-right-color:var(--ws-line-strong)}.cell.mb{border-bottom-color:var(--ws-line-strong)}.cell:before{content:"";background:var(--ws-ink);opacity:0;transition:transform var(--ws-dur-2) var(--ws-ease-swift), opacity var(--ws-dur-1) linear;border-radius:2px;position:absolute;inset:1.5px;transform:scale(0)}.cell.on:before{opacity:1;transform:scale(1)}.cell.hinted:before{background:var(--clay-deep)}.cell.x{background:var(--clay-soft)}.cell.x:after{content:"";background:linear-gradient(45deg, transparent calc(50% - 1px), var(--clay) calc(50% - 1px), var(--clay) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--clay) calc(50% - 1px), var(--clay) calc(50% + 1px), transparent calc(50% + 1px));position:absolute;inset:22%}.cell.settled:after{content:"";background:var(--ws-alpha-3);border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}.cell.ghost:before{opacity:1;background:var(--ws-alpha-3);transform:scale(1)}.cell.pop:before{animation:pop var(--ws-dur-3) var(--ws-ease-swift)}@keyframes pop{0%{opacity:.4;background:var(--clay);transform:scale(.4)}60%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}.cell.shake{animation:shake .32s var(--ws-ease-out)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(1px)}}.cells.nudge{animation:nudge .26s var(--ws-ease-out)}@keyframes nudge{0%,to{box-shadow:0 0 #d9775700}40%{box-shadow:0 0 0 4px #d9775740}}.cell.glint:before{animation:glint .36s var(--ws-ease-out) both}@keyframes glint{0%,to{background:var(--ws-ink)}45%{background:var(--clay)}}.cell.wave:before{animation:wave .52s var(--ws-ease-out) both}@keyframes wave{0%{background:var(--ws-ink);transform:scale(1)}40%{background:var(--clay);transform:scale(.82)}to{background:var(--ws-ink);transform:scale(1)}}.board.lost .cells{animation:shake .42s var(--ws-ease-out)}.band,.cursor{pointer-events:none;opacity:0;transition:opacity var(--ws-dur-1) linear;position:absolute;top:0;left:0}.band-r{height:var(--cell);background:var(--ws-alpha-1);right:0}.band-c{width:var(--cell);background:var(--ws-alpha-1);bottom:0}.cursor{width:var(--cell);height:var(--cell);border:2px solid var(--clay);transition:opacity var(--ws-dur-1) linear, transform 60ms linear;border-radius:4px}.cells.tracking .band,.cells.tracking .cursor{opacity:1}.clawd-fab{z-index:6;right:max(16px, env(safe-area-inset-right));bottom:max(20px, env(safe-area-inset-bottom));width:60px;height:60px;transition:transform var(--ws-dur-1) var(--ws-ease-out), opacity var(--ws-dur-2) linear;border:0;border-radius:50%;place-items:center;display:grid;position:fixed}.clawd-fab:active{transform:scale(.94)}.clawd-fab:disabled{opacity:.5;filter:grayscale(.7)}.clawd-fab .clawd{margin-top:2px}.hint-count{background:var(--ws-ink);min-width:22px;height:22px;color:var(--ws-bg);font-variant-numeric:tabular-nums;border-radius:11px;padding:0 6px;font-size:12px;line-height:22px;position:absolute;top:-2px;right:-2px}.clawd .claw-l,.clawd .claw-r{transform-box:fill-box}.clawd .claw-l{transform-origin:100% 100%}.clawd .claw-r{transform-origin:0 100%}.clawd-fab.pinch .claw-l{animation:pinch-l .36s var(--ws-ease-out) 2}.clawd-fab.pinch .claw-r{animation:pinch-r .36s var(--ws-ease-out) 2}@keyframes pinch-l{50%{transform:rotate(-14deg)}}@keyframes pinch-r{50%{transform:rotate(14deg)}}.toast{z-index:7;left:50%;bottom:max(96px, calc(env(safe-area-inset-bottom) + 84px));opacity:0;pointer-events:none;border-radius:var(--ws-radius-glass);white-space:nowrap;transition:opacity var(--ws-dur-2) linear, transform var(--ws-dur-3) var(--ws-ease-swift);padding:8px 16px;font-size:14px;position:fixed;transform:translate(-50%,8px)}.toast.show{opacity:1;transform:translate(-50%)}.result-wrap{z-index:10;padding:16px 16px max(24px, env(safe-area-inset-bottom));opacity:0;transition:opacity var(--ws-dur-3) linear;background:linear-gradient(#0000 40%,#3536301f);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.result-wrap.show{opacity:1}.result{border-radius:var(--ws-radius-glass);text-align:center;width:100%;max-width:420px;transition:transform var(--ws-dur-3) var(--ws-ease-swift);padding:24px 16px 16px;transform:translateY(16px)}.result-wrap.show .result{transform:none}.result h2{font:400 23px/1.3 var(--ws-font-content);margin:4px 0}.result p{color:var(--ws-ink-2);margin:0 0 16px;font-size:14px}.result-icon{place-items:center;display:grid}.actions{flex-direction:column;gap:8px;display:flex}.coach{z-index:8;left:12px;right:88px;bottom:max(20px, env(safe-area-inset-bottom));border-radius:var(--ws-radius-glass);max-width:440px;padding:12px;position:fixed}.coach-text{margin:0 0 8px;font-size:14px;line-height:1.6}.coach-text b{color:var(--clay-deep);font-weight:600}.coach-row{align-items:center;gap:4px;display:flex}.coach-dots{flex:1;gap:4px;display:flex}.coach-dots i{background:var(--ws-alpha-3);border-radius:50%;width:6px;height:6px}.coach-dots i.on{background:var(--ws-ink)}.spot{z-index:1;transition:background-color var(--ws-dur-3) linear;border-radius:6px;position:relative;background-color:var(--clay-soft)!important}.cells.spot{outline:3px solid var(--clay);outline-offset:2px}.clawd-fab.spot{outline:3px solid var(--clay);outline-offset:3px;z-index:9;position:fixed}.hearts.spot{outline:2px solid var(--clay);outline-offset:2px}.game:has(.coach) .stage{padding-bottom:180px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}