.sudoku{user-select:none;max-width:540px;margin:0 auto}.play-bar{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;display:flex}.timer{color:var(--ink-2);font:600 1.08rem/1 var(--font-display);font-variant-numeric:tabular-nums;align-items:center;gap:.3rem;display:inline-flex}.lives{gap:.15rem;line-height:0;display:inline-flex}.lives .heart{color:var(--coral);transition:transform .3s cubic-bezier(.2,1.6,.4,1),color .3s,opacity .3s}.lives .heart.lost{color:var(--line-strong);animation:.5s heart-break;transform:scale(.82)}@keyframes heart-break{0%{color:var(--coral);transform:scale(1.3)}30%{transform:scale(1.3)rotate(-12deg)}60%{transform:scale(.8)rotate(10deg)}}.level-select{background:var(--surface-2);border-radius:14px;gap:.3rem;margin-bottom:.75rem;padding:.25rem;display:flex}.level-select a{color:var(--muted);font:600 .92rem/1.2 var(--font-display);border-radius:11px;flex:1;justify-content:center;align-items:center;padding:.45rem .2rem;text-decoration:none;transition:background .15s,color .15s;display:flex}.level-select a:hover{color:var(--ink)}.level-select a.active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}.board-wrap{position:relative}.board{aspect-ratio:1;background:var(--frame);width:100%;box-shadow:0 6px 0 var(--frame-edge), var(--shadow);touch-action:manipulation;border-radius:20px;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;display:grid}.box{background:var(--box-line);border-radius:13px;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5px;min-width:0;min-height:0;display:grid;overflow:hidden}.cell{background:var(--cell);min-width:0;min-height:0;color:var(--cell-user);font:600 clamp(1.25rem, 6.2vw, 2.05rem) / 1 var(--font-display);cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;justify-content:center;align-items:center;padding:0;transition:background-color .12s;display:flex;position:relative;overflow:hidden}.cell.given{color:var(--cell-ink);font-weight:500}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.selected{background:var(--selected)}.cell.error{background:var(--coral-soft);color:var(--coral)}.cell .val{z-index:1;pointer-events:none;display:inline-block;position:relative}.val.pop{animation:.42s cubic-bezier(.2,1.8,.4,1) pop}.val.shake{animation:.42s shake}@keyframes pop{0%{opacity:.2;transform:scale(.3)}55%{transform:scale(1.32)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)rotate(-6deg)}40%{transform:translate(5px)rotate(5deg)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.cell .wave{z-index:0;pointer-events:none;background:radial-gradient(circle at center, var(--gold) 0%, color-mix(in srgb, var(--gold) 55%, transparent) 55%, transparent 100%);opacity:0;animation:wave .75s ease-out var(--d,0s) both;position:absolute;inset:0}@keyframes wave{0%{opacity:0;transform:scale(.4)}35%{opacity:.95;transform:scale(1.05)}to{opacity:0;transform:scale(1.1)}}.board.won .cell .wave{background:radial-gradient(circle at center, var(--mint) 0%, color-mix(in srgb, var(--mint) 50%, transparent) 60%, transparent 100%)}.board.won .cell{color:var(--cell-ink)}.board.won .cell:not(.given){color:var(--mint-deep)}.notes{width:100%;height:100%;color:var(--note);font:600 clamp(.52rem, 2.3vw, .74rem) / 1 var(--font-body);grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));padding:1px;display:grid}.note{border-radius:4px;justify-content:center;align-items:center;display:flex}.note.hl{background:var(--brand);color:#fff}.combo{z-index:5;color:#fff;font:600 .95rem/1 var(--font-display);pointer-events:none;background:linear-gradient(135deg,#ffb21e,#ff6a2a);border-radius:999px;padding:.3rem .75rem;animation:.5s cubic-bezier(.2,1.8,.4,1) combo;position:absolute;top:-.9rem;right:-.4rem;box-shadow:0 3px #c9501a}.combo b{font-size:1.15rem}@keyframes combo{0%{transform:scale(.4)rotate(-12deg)}60%{transform:scale(1.18)rotate(4deg)}to{transform:scale(1)rotate(0)}}.done-banner{background:var(--mint-soft);color:var(--mint-deep);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.9rem;padding:.7rem .9rem;font-weight:700;display:flex}.numpad{grid-template-columns:repeat(9,1fr);gap:.35rem;margin-top:1rem;display:grid}.num{aspect-ratio:4/5;background:var(--surface);min-width:0;color:var(--brand);cursor:pointer;box-shadow:0 4px 0 var(--line-strong), inset 0 0 0 1px var(--line);-webkit-tap-highlight-color:transparent;border:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.05rem;padding:0;transition:transform 70ms,box-shadow 70ms,background .15s;display:flex;position:relative}.num-d{font:600 clamp(1.3rem, 6vw, 1.8rem) / 1 var(--font-display)}.num-left{min-height:.9rem;color:var(--muted);font:700 clamp(.6rem, 2.4vw, .72rem) / 1 var(--font-body);justify-content:center;align-items:center;display:inline-flex}.num:hover{background:var(--brand-soft)}.num:active{box-shadow:0 1px 0 var(--line-strong), inset 0 0 0 1px var(--line);transform:translateY(3px)}.num.active{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-deep)}.num.active .num-left{color:#fffc}.num.done{background:var(--mint-soft);color:var(--mint-deep);box-shadow:0 2px 0 color-mix(in srgb, var(--mint) 35%, transparent);cursor:default;transform:translateY(2px)}.num.done .num-d{opacity:.55}.num-left.ok{color:var(--mint-deep);animation:.45s cubic-bezier(.2,1.8,.4,1) pop}.numpad.notes-on .num:not(.done){color:var(--ink-2);box-shadow:0 4px 0 var(--line-strong), inset 0 0 0 2px var(--brand-2)}.numpad.notes-on .num-d{font-size:clamp(1rem,4.6vw,1.35rem)}.tools{gap:.4rem;margin-top:.9rem;display:flex}.tool{background:var(--surface-2);color:var(--ink-2);font:600 .8rem/1 var(--font-display);cursor:pointer;box-shadow:0 3px 0 var(--line);-webkit-tap-highlight-color:transparent;border:0;border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:.2rem;padding:.55rem .2rem .5rem;transition:transform 70ms,box-shadow 70ms,background .15s;display:flex;position:relative}.tool:hover{background:var(--surface-3)}.tool:active{box-shadow:0 1px 0 var(--line);transform:translateY(2px)}.tool:disabled{opacity:.45;cursor:default;transform:none}.tool.on{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-deep)}.tool-flag{background:var(--surface-3);color:var(--muted);font:700 .58rem/1 var(--font-body);border-radius:999px;padding:.12rem .32rem;font-style:normal;position:absolute;top:-.35rem;right:.2rem}.tool.on .tool-flag{background:var(--gold);color:#3a2700}.ad-slot{border:2px dashed var(--line-strong);background:var(--surface-2);height:150px;color:var(--muted);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;margin:.4rem 0 1rem;font-weight:700;display:flex}.ad-slot small{font-size:.75rem;font-weight:500}.win-sheet{max-width:430px;padding-top:1.2rem}.win-stars{justify-content:center;align-items:flex-end;gap:.3rem;height:76px;margin-bottom:.2rem;display:flex}.win-star{color:var(--surface-3);opacity:0;display:inline-flex;transform:scale(.2)}.win-star.s1{transform:scale(.2)rotate(-14deg)}.win-star.s3{transform:scale(.2)rotate(14deg)}.win-star.in{opacity:1;animation:.5s cubic-bezier(.2,1.8,.4,1) forwards star-in}.win-star.on{color:var(--gold);filter:drop-shadow(0 3px 0 var(--gold-deep))}.win-star.s2{margin-bottom:.6rem}@keyframes star-in{0%{transform:scale(.2)rotate(-30deg)}60%{transform:scale(1.25)rotate(8deg)}to{transform:scale(1) rotate(var(--r,0deg))}}.win-star.s1.in{--r:-10deg}.win-star.s3.in{--r:10deg}.win-title{font:600 1.9rem/1.1 var(--font-display);margin:.2rem 0 .5rem}.win-meta{flex-wrap:wrap;justify-content:center;gap:.35rem;margin:0 0 1rem;display:flex}.win-xp{background:var(--brand-soft);text-align:left;border-radius:18px;padding:.9rem 1rem 1rem}.xp-total{text-align:center;color:var(--brand);font:600 1.15rem/1 var(--font-display)}.xp-plus{font-variant-numeric:tabular-nums;font-size:2.2rem}.xp-lines{margin:.6rem 0 .8rem;padding:0;list-style:none}.xp-lines li{color:var(--ink-2);opacity:0;justify-content:space-between;padding:.18rem 0;font-size:.92rem;transition:opacity .25s,transform .25s;display:flex;transform:translate(-10px)}.xp-lines li.in{opacity:1;transform:none}.xp-lines b{color:var(--brand);font-family:var(--font-display)}.lvl-head{align-items:center;gap:.5rem;margin-bottom:.4rem;display:flex}.lvl-badge{background:var(--brand);color:#fff;font:700 .85rem/1.1 var(--font-display);border-radius:8px;padding:.2rem .55rem}.lvl-title{color:var(--ink-2);font-size:.92rem;font-weight:700}.lvl-up .lvl-badge{background:var(--gold);color:#3a2700;animation:.5s cubic-bezier(.2,1.8,.4,1) pop}.lvl-up .lvl-title{color:var(--gold-deep)}.win-extras{gap:.5rem;margin-top:.8rem;display:grid}.ribbon{border-radius:14px;justify-content:center;align-items:center;gap:.4rem;margin:0;padding:.55rem .8rem;font-size:.93rem;font-weight:700;animation:.45s cubic-bezier(.2,1.4,.4,1) both sheet-in;display:flex}.ribbon-gold{background:var(--gold-soft);color:var(--gold-deep)}.ribbon-fire{color:#fff;background:linear-gradient(135deg,#ffb21e,#ff6a2a)}.win-badges{gap:.45rem;display:grid}.badge-pop{border:2px solid var(--gold);background:var(--surface);text-align:left;animation:.5s cubic-bezier(.2,1.6,.4,1) both sheet-in;animation-delay:calc(var(--k,0) * .14s);border-radius:14px;align-items:center;gap:.7rem;padding:.55rem .8rem;display:flex}.badge-pop b{font-family:var(--font-display);font-weight:600;display:block}.badge-pop small{color:var(--muted)}.badge-ico{font-size:1.7rem;line-height:1}.win-account{border:2px dashed var(--brand-2);background:var(--surface);border-radius:18px;margin-top:1rem;padding:1rem}.win-account-hook{font:600 1.08rem/1.3 var(--font-display);margin:0 0 .3rem}.win-account-hook b{color:var(--brand)}.win-account-sub{color:var(--muted);margin:0 0 .8rem;font-size:.88rem}.win-lb{text-align:left;margin-top:1rem}.win-lb-title{color:var(--muted);font:600 .88rem/1.2 var(--font-display);margin:0 0 .45rem}.win-note{background:var(--surface-2);color:var(--muted);text-align:center;border-radius:12px;margin:0;padding:.8rem}.wlb-list{border:1px solid var(--line);border-radius:14px;margin:0;padding:0;list-style:none;overflow:hidden}.wlb-list li{border-bottom:1px solid var(--line);align-items:center;gap:.55rem;padding:.45rem .7rem;font-size:.92rem;display:flex}.wlb-list li:last-child{border-bottom:0}.wlb-list li.me{background:var(--brand-soft);font-weight:800}.wlb-list li.wlb-sep{color:var(--muted);justify-content:center;padding:.1rem}.wlb-rank{text-align:center;min-width:1.5rem;font-family:var(--font-display)}.wlb-av{border-radius:50%}.wlb-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.wlb-time{color:var(--brand);font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600}.win-link{color:var(--brand);align-items:center;gap:.25rem;margin-top:.6rem;font-size:.92rem;font-weight:700;text-decoration:none;display:inline-flex}.win-actions{gap:.6rem;margin-top:1.1rem;display:grid}.win-actions .btn+.btn{margin-top:0}@media (width<=400px){.numpad{gap:.25rem}.num{border-radius:10px}.board{border-radius:16px;gap:3px;padding:3px}.box{border-radius:10px}}@media (width<=600px){.play-bar{margin-bottom:.45rem}.level-select{margin-bottom:.55rem}.level-select a{padding:.38rem .2rem}.numpad{margin-top:.75rem}.num{aspect-ratio:5/6}.tools{margin-top:.7rem}}
