:root{--bg:#f4f1ea;--paper:#fffdf8;--ink:#1f2a44;--line:#c9c3b5;--box-line:#1f2a44;--player:#2f6fde;--note:#7a7f8c;--muted:#5d6475;--wash:#e8edf7;--highlight:#dce8ff;--selected:#b9d0ff;--same:#c9dbff;--gold:#ffd37a;--wrong:#c93434;--wrong-bg:#fbe0dc;--btn:#fff;--btn-edge:#d9d3c4;--btn-active:#1f2a44;--btn-active-ink:#fff;--shadow:0 1px 0 #1f2a4414, 0 2px 8px #1f2a440f;--radius:6px;--cell:40px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#14182a;--paper:#1b2036;--ink:#e8e4d8;--line:#353b55;--box-line:#b9b4a6;--player:#82abff;--note:#9aa0b4;--muted:#a6abbd;--wash:#20273f;--highlight:#26324f;--selected:#34477a;--same:#2d3d66;--gold:#b98e2e;--wrong:#ff8a80;--wrong-bg:#4a2228;--btn:#222842;--btn-edge:#343b5a;--btn-active:#e8e4d8;--btn-active-ink:#14182a;--shadow:0 2px 8px #0000004d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;overflow:hidden}#game{position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--player);outline-offset:2px}.screen{box-sizing:border-box;padding:calc(8px + env(safe-area-inset-top,0px)) 4px max(34px, env(safe-area-inset-bottom,0px));flex-direction:column;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.screen[hidden]{display:none}.muted{color:var(--muted);margin:0}#picker{padding-top:calc(60px + env(safe-area-inset-top,0px));gap:14px}.pick-head{text-align:center}.title{letter-spacing:.5px;margin:0 0 4px;font-size:32px;font-weight:800}.streak{align-items:center;gap:8px;font-size:17px;font-weight:600;display:flex}.streak svg{fill:#e8833a;width:26px;height:26px}.streak.up svg{animation:.9s ease-in-out 3 flicker}.cards{grid-template-columns:1fr 1fr;gap:10px;width:min(100%,440px);display:grid}.card{border:1px solid var(--btn-edge);background:var(--btn);min-height:92px;box-shadow:var(--shadow);text-align:left;border-radius:12px;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;display:flex}.card .tier{font-size:19px;font-weight:700}.card .state{color:var(--muted);font-size:14px}.card.done{border-color:var(--gold)}.card .mini-stars{color:#e2a21a;letter-spacing:2px;font-size:16px}.card.first{outline:3px solid var(--player);outline-offset:1px}.practice{width:min(100%,440px);color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px;font-size:14px;display:flex}.practice p{text-align:center;width:100%;margin:0}.practice button{border:1px solid var(--btn-edge);border-radius:var(--radius);background:var(--btn);min-height:44px;padding:0 14px}.toggle{border:1px solid var(--btn-edge);background:var(--btn);border-radius:999px;min-height:44px;padding:0 16px;font-size:14px}.calendar{grid-template-columns:repeat(7,34px);justify-content:center;gap:4px;font-size:11px;display:grid}.calendar .month{text-align:center;color:var(--muted);grid-column:1/-1;font-size:13px;font-weight:600}.calendar .dow{text-align:center;color:var(--muted)}.day{background:var(--paper);border:1px solid var(--line);box-sizing:border-box;height:34px;color:var(--muted);border-radius:6px;place-items:start center;padding-top:2px;display:grid;position:relative}.day.solved{background:var(--highlight);color:var(--ink)}.day.today{border:2px solid var(--player)}.day .dots{justify-content:center;gap:2px;display:flex;position:absolute;bottom:4px;left:0;right:0}.day .dots i{background:var(--player);border-radius:50%;width:5px;height:5px}.day.new-solve{animation:.5s ease-out pop}.col{width:calc(var(--cell) * 9 + 14px);flex-direction:column;flex:1 0 auto;align-items:center;gap:8px;display:flex}.col .grid{margin-top:auto}.col .pad{margin-bottom:auto}.bar{align-items:center;gap:6px;width:100%;height:48px;display:flex}.icon-btn{background:0 0;border:0;border-radius:12px;place-items:center;width:44px;height:44px;padding:0;display:grid}.icon-btn svg{fill:currentColor;width:28px;height:28px}.bar-text{flex-direction:column;line-height:1.2;display:flex}.bar-title{font-size:17px;font-weight:700}.bar-stats{color:var(--muted);font-variant-numeric:tabular-nums;gap:12px;font-size:15px;display:flex}.mistakes.bump{color:var(--wrong);animation:.3s shake}.grid{background:var(--box-line);border-radius:var(--radius);touch-action:manipulation;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;transition:filter .2s;display:grid}html[data-playora-paused] .grid{filter:blur(10px)}.box{grid-template-columns:repeat(3, var(--cell));grid-auto-rows:var(--cell);background:var(--line);gap:1px;display:grid}.box:first-child{border-top-left-radius:4px;overflow:hidden}.box:nth-child(3){border-top-right-radius:4px;overflow:hidden}.box:nth-child(7){border-bottom-left-radius:4px;overflow:hidden}.box:nth-child(9){border-bottom-right-radius:4px;overflow:hidden}.cell{background:var(--paper);cursor:pointer;font-variant-numeric:tabular-nums;place-items:center;display:grid;position:relative}.cell .v{font-size:calc(var(--cell) * .64);font-weight:500;line-height:1}.cell.given .v{font-weight:700}.cell.user .v{color:var(--player)}.cell .notes{font-size:calc(var(--cell) * .27);color:var(--note);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);place-items:center;font-weight:600;line-height:1;display:grid;position:absolute;inset:1px}.cell.peer{background:var(--wash)}.cell.same{background:var(--same)}.cell.sel{background:var(--selected)}.cell.wrong{background:var(--wrong-bg)}.cell.wrong .v{color:var(--wrong);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:2px}.notes .same-note{color:var(--player)}.cell.area{background:var(--highlight)}.cell.pattern:after,.cell.target:after,.cell.pulse:after{content:"";pointer-events:none;border-radius:3px;position:absolute;inset:1px}.cell.pattern:after{border:2px dashed var(--player)}.cell.target:after,.cell.pulse:after{border:3px solid var(--player);animation:1s ease-in-out infinite pulse}.cell.pop .v{animation:.12s ease-out place}.cell.shake{animation:.3s shake}.cell.sweep{animation:.45s ease-out both sweep}.cell.ripple{animation:.5s ease-out both ripple}.tip{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;min-height:44px;margin:0;font-size:16px;line-height:1.35;display:flex}.tip button{border:1px solid var(--btn-edge);background:var(--btn);border-radius:999px;min-height:40px;padding:0 14px;font-weight:600}.pad{flex-direction:column;gap:8px;width:100%;display:flex}.digits{grid-template-columns:repeat(9,1fr);gap:4px;display:grid}.digit{border:1px solid var(--btn-edge);border-radius:var(--radius);background:var(--btn);height:58px;box-shadow:var(--shadow);color:var(--player);font-variant-numeric:tabular-nums;padding:0;font-size:28px;font-weight:600;position:relative}.digit small{color:var(--muted);font-size:10px;font-weight:500;position:absolute;bottom:2px;right:3px}.digit:active,.tool:active{transform:translateY(1px)}.digit.brush{background:var(--btn-active);color:var(--btn-active-ink)}.digit.done{opacity:.35}.digit.pulse{animation:1s ease-in-out infinite pulse-btn}.notes-on .digit{color:var(--note);font-size:20px}.pad.two-row .digits{grid-template-columns:repeat(10,1fr);gap:6px}.pad.two-row .digit{grid-column:span 2;height:48px}.pad.two-row .digit:nth-child(6){grid-column:2/span 2}.tools{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.tool{border:1px solid var(--btn-edge);border-radius:var(--radius);background:var(--btn);flex-direction:column;justify-content:center;align-items:center;gap:2px;height:52px;padding:0;font-size:13px;display:flex}.tool svg{fill:currentColor;width:22px;height:22px}.tool b{font-weight:700}.tool[aria-pressed=true]{background:var(--btn-active);color:var(--btn-active-ink)}.tool:disabled{opacity:.4;cursor:default}.badge:empty{display:none}.results{background:color-mix(in srgb, var(--bg) 88%, transparent);padding-top:calc(60px + env(safe-area-inset-top,0px));justify-content:flex-start}.card-big{box-sizing:border-box;background:var(--paper);border:1px solid var(--btn-edge);width:min(100%,400px);box-shadow:var(--shadow);border-radius:16px;flex-direction:column;align-items:center;gap:10px;padding:18px 14px;animation:.3s ease-out rise;display:flex}.res-title{margin:0;font-size:34px}.stars{gap:8px;display:flex}.stars svg{width:44px;height:44px;fill:var(--line)}.stars svg.on{fill:#f0b429;animation:.4s cubic-bezier(.3,1.6,.5,1) both drop}.res-time{font-variant-numeric:tabular-nums;margin:0;font-size:22px;font-weight:700}.res-time em{color:var(--player);margin-left:8px;font-size:13px;font-style:normal;font-weight:600}.res-score{font-variant-numeric:tabular-nums;grid-template-columns:auto auto;gap:2px 18px;margin:0;font-size:15px;display:grid}.res-score dt{color:var(--muted)}.res-score dd{text-align:right;margin:0}.res-score .total{color:var(--ink);font-size:18px;font-weight:800}.res-actions{gap:8px;width:100%;margin-top:4px;display:flex}.res-actions button{flex:1}.primary,.secondary{border-radius:999px;min-height:52px;font-size:18px;font-weight:700}.primary{background:var(--btn-active);color:var(--btn-active-ink);border:0}.secondary{border:1px solid var(--btn-edge);background:var(--btn)}@media (width>=720px) and (height<=920px){.results{justify-content:safe center}.card-big{grid-template-columns:1fr 1fr;grid-template-areas:"tier streak""title calendar""stars calendar""time calendar""score calendar""actions actions";place-items:center;gap:8px 28px;width:min(100%,720px);display:grid}#res-tier{grid-area:tier}.res-title{grid-area:title}.stars{grid-area:stars}.res-time{grid-area:time}.res-score{grid-area:score}#res-streak{grid-area:streak}#res-calendar{grid-area:calendar;align-self:start}.res-actions{flex-direction:row;grid-area:actions}.res-actions button{flex:1}}@media (height<=700px){.calendar{grid-template-columns:repeat(7,28px);gap:3px}.day{height:28px}}@media (height<=760px){.calendar .other-week{display:none}.card-big{gap:8px;padding:14px 12px}.res-title{font-size:30px}.stars svg{width:38px;height:38px}}@media (height<=480px){.results{padding-top:calc(52px + env(safe-area-inset-top,0px))}.res-score dt:not(.total),.res-score dd:not(.total),#res-tier{display:none}.res-title{font-size:24px}.stars svg{width:30px;height:30px}.card-big{row-gap:4px}}#play.landscape{justify-content:safe center;padding-right:112px}#play.landscape .col{grid-template-columns:calc(var(--cell) * 9 + 14px) var(--panel);flex:none;grid-template-rows:auto auto auto 1fr;align-items:start;gap:8px 16px;width:auto;display:grid}#play.landscape .bar{grid-area:1/2}#play.landscape .grid{grid-area:1/1/span 4;margin:0}#play.landscape .tip{grid-area:2/2}#play.landscape .pad{grid-area:3/2;margin:0}@keyframes place{0%{transform:scale(.8)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes sweep{0%{background:var(--paper)}40%{background:var(--gold)}to{background:var(--paper)}}@keyframes ripple{0%{background:var(--paper);transform:scale(1)}40%{background:var(--gold);transform:scale(.9)}to{background:var(--paper);transform:scale(1)}}@keyframes pulse{50%{opacity:.25}}@keyframes pulse-btn{50%{box-shadow:0 0 0 4px var(--player)}}@keyframes drop{0%{opacity:0;transform:translateY(-30px)scale(1.4)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}@keyframes pop{50%{transform:scale(1.2)}}@keyframes flicker{50%{transform:scale(1.2)rotate(-6deg)}}@media (prefers-reduced-motion:reduce){.cell.shake,.mistakes.bump{animation:none}.cell.target:after,.cell.pulse:after,.digit.pulse{animation-duration:2s}}
