:root{--color-bg: oklch(17% .012 260);--color-panel: oklch(21% .014 260);--color-panel-2: oklch(25% .016 260);--color-line: oklch(30% .014 260);--color-text: oklch(93% .01 260);--color-dim: oklch(65% .015 260);--color-pass: oklch(72% .17 155);--color-strike: oklch(62% .19 25);--color-accent: oklch(80% .14 85);--color-card: oklch(96% .01 90);--color-card-ink: oklch(20% .01 260);--suit-spade: oklch(30% .02 260);--suit-heart: oklch(55% .2 25);--suit-diamond: oklch(52% .16 250);--suit-club: oklch(52% .14 155);--font-ui: "Inter", -apple-system, sans-serif;--font-num: "JetBrains Mono", ui-monospace, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--radius-card: 9px;--radius-ui: 10px;--dur-tap: 90ms;--dur-judge: .22s;--dur-count: .6s;--dur-tier: .45s;--ease-out: cubic-bezier(.22,.61,.36,1);--ease-in-out: cubic-bezier(.45,0,.25,1)}@media(prefers-reduced-motion:reduce){:root{--dur-tap: 0ms;--dur-judge: .15s;--dur-count: .15s;--dur-tier: .15s}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;overflow-x:clip}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);font-size:15px;line-height:1.45;overflow-x:clip}#app{max-width:480px;margin:0 auto;min-height:100dvh;padding:var(--space-4) var(--space-4) var(--space-5);display:flex;flex-direction:column}h1,h2,h3{font-weight:600;font-style:normal;margin:0;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}h1{font-size:22px}h2{font-size:17px}h3{font-size:15px}p{margin:0}em,i{font-style:normal}.label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-dim);font-weight:600}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.dim{color:var(--color-dim)}.hint{color:var(--color-dim);font-size:14px}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;align-items:center;gap:var(--space-2)}.grow{flex:1 1 auto}.center{text-align:center}.panel{background:var(--color-panel);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-4)}.rule{height:1px;background:var(--color-line);border:0;margin:0}.btn{appearance:none;font:inherit;font-weight:600;color:var(--color-text);background:var(--color-panel-2);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-3) var(--space-4);min-height:44px;cursor:pointer;transition:transform var(--dur-tap) var(--ease-out),background-color var(--dur-tap) var(--ease-out),border-color var(--dur-tap) var(--ease-out),opacity var(--dur-tap) var(--ease-out)}.btn:hover:not(:disabled){background:var(--color-line)}.btn:focus-visible{outline:2px solid var(--color-pass);outline-offset:2px;animation:none}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn[data-state=loading]{opacity:.7;cursor:progress;pointer-events:none}.btn[data-state=error]{border-color:var(--color-strike);color:var(--color-strike)}.btn[data-state=success]{border-color:var(--color-pass);color:var(--color-pass)}.btn--primary{background:var(--color-pass);border-color:var(--color-pass);color:var(--color-bg);font-size:17px}.btn--primary:hover:not(:disabled){filter:brightness(1.08)}.btn--primary:focus-visible{outline-color:var(--color-text)}.btn--primary[data-state=error]{background:var(--color-strike);border-color:var(--color-strike);color:var(--color-bg)}.btn--quiet{background:none;border-color:transparent;color:var(--color-dim);font-weight:500;min-height:36px;padding:var(--space-2) var(--space-3)}.btn--quiet:hover:not(:disabled){background:var(--color-panel);color:var(--color-text)}.btn--wide{width:100%}.link{color:var(--color-accent);background:none;border:0;font:inherit;padding:var(--space-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}.link:hover{color:var(--color-accent);text-decoration-thickness:2px}.link:focus-visible{outline:2px solid var(--color-pass);outline-offset:2px}.link:active{transform:scale(.98)}.link:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}.link[data-state=loading]{opacity:.7;cursor:progress;pointer-events:none}.link[data-state=error]{color:var(--color-strike)}.link[data-state=success]{color:var(--color-pass)}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%);background:var(--color-panel-2);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-2) var(--space-4);font-size:14px;animation:toast-in var(--dur-judge) var(--ease-out)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.cardRow{display:flex;gap:var(--space-2);flex-wrap:wrap}.card{position:relative;width:var(--card-w);aspect-ratio:5 / 7;flex:0 0 auto;background:var(--color-card);color:var(--color-card-ink);border-radius:var(--radius-card);transition:opacity var(--dur-judge) var(--ease-out),box-shadow var(--dur-judge) var(--ease-out)}.card--sm{--card-w: 54px}.card--md{--card-w: 74px}.card--lg{--card-w: 96px}.card[data-suit=s]{--suit-color: var(--suit-spade)}.card[data-suit=h]{--suit-color: var(--suit-heart)}.card[data-suit=d]{--suit-color: var(--suit-diamond)}.card[data-suit=c]{--suit-color: var(--suit-club)}.card__corner{position:absolute;top:calc(var(--card-w) * .07);left:calc(var(--card-w) * .07);width:calc(var(--card-w) * .26);display:flex;flex-direction:column;align-items:center;gap:calc(var(--card-w) * .02);color:var(--suit-color);line-height:1}.card__rank{font-size:calc(var(--card-w) * .26);font-weight:700;text-align:center;width:100%}.card__suit{width:calc(var(--card-w) * .17);height:calc(var(--card-w) * .17);display:block}.card__pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--suit-color);pointer-events:none}.card__pipSvg{width:calc(var(--card-w) * .42);height:calc(var(--card-w) * .42);display:block}.card--dim{opacity:.35}.card--hit{box-shadow:0 0 0 2px var(--color-pass)}.card--flip{animation:card-flip var(--dur-judge) var(--ease-out) var(--flip-delay, 0ms) both}@keyframes card-flip{0%{transform:rotateY(90deg);opacity:0}to{transform:rotateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.card--flip{animation:card-fade var(--dur-judge) var(--ease-out) both}@keyframes card-fade{0%{opacity:0}to{opacity:1}}}.cardEmpty{color:var(--color-dim);font-size:14px;padding:var(--space-3) 0}.rangeGrid{width:100%}.rangeGrid__head{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;list-style:none;padding:var(--space-1) 0}.rangeGrid__head::-webkit-details-marker{display:none}.rangeGrid__head:hover .rangeGrid__name{color:var(--color-text)}.rangeGrid__head:focus-visible{outline:2px solid var(--color-pass);outline-offset:2px;border-radius:var(--radius-ui)}.rangeGrid__head:active{transform:scale(.99)}.rangeGrid[aria-disabled=true] .rangeGrid__head{opacity:.45;cursor:not-allowed;pointer-events:none}.rangeGrid[data-state=loading] .rangeGrid__head{opacity:.7;cursor:progress;pointer-events:none}.rangeGrid[data-state=error] .rangeGrid__name{color:var(--color-strike)}.rangeGrid[data-state=success] .rangeGrid__name{color:var(--color-pass)}.rangeGrid__name{font-weight:600;font-size:16px;overflow-wrap:anywhere;min-width:0}.rangeGrid__pct{margin-left:auto;font-size:13px}.rangeGrid__head:after{content:"";width:7px;height:7px;border-right:1.5px solid var(--color-dim);border-bottom:1.5px solid var(--color-dim);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dur-tap) var(--ease-out)}.rangeGrid[open] .rangeGrid__head:after{transform:rotate(225deg) translate(-1px,-1px)}.rangeGrid__body{display:grid;grid-template-columns:repeat(13,1fr);gap:1px;margin-top:var(--space-2);width:100%;max-width:260px;aspect-ratio:1}.gridCell{background:var(--color-panel-2);border-radius:1px}.gridCell--on{background:var(--color-pass)}.gridCell--mark{box-shadow:inset 0 0 0 1.5px var(--color-accent)}.screen{display:flex;flex-direction:column;gap:var(--space-5);flex:1 1 auto;min-height:0}.screen__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-2)}body[data-state=Home] .stack{margin-block:auto}.appTitle{font-size:26px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}.appTagline{color:var(--color-dim);font-size:14px}.navRow{display:flex;gap:var(--space-2)}.navRow .btn{flex:1 1 0}.topbar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-line)}.topbar__timer{font-family:var(--font-num);font-size:17px;font-variant-numeric:tabular-nums}.topbar__timer[data-low=true]{color:var(--color-strike)}.strikes{display:flex;gap:var(--space-1)}.strike{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--color-line);background:none;transition:transform var(--dur-judge) var(--ease-out),background-color var(--dur-judge) var(--ease-out)}.strike[data-on=true]{background:var(--color-strike);border-color:var(--color-strike)}.strike[data-fresh=true]{animation:strike-fill var(--dur-judge) var(--ease-out)}@keyframes strike-fill{0%{transform:scale(.4)}to{transform:scale(1)}}.tierBadge{font-family:var(--font-num);font-size:13px;font-weight:700;color:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius-ui);padding:1px var(--space-2);justify-self:end}.tierBadge--up{animation:tier-pop var(--dur-tier) var(--ease-out)}@keyframes tier-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}.tierBadge{position:relative}.tierBadge--up:after{content:"";position:absolute;inset:-4px;border:2px solid var(--color-accent);border-radius:calc(var(--radius-ui) + 4px);animation:ring-out var(--dur-tier) var(--ease-out) both;pointer-events:none}.topbar__score{font-family:var(--font-num);font-size:15px;font-variant-numeric:tabular-nums}.section{display:flex;flex-direction:column;gap:var(--space-2)}.problem{display:flex;flex-direction:column;gap:var(--space-4);flex:1 1 auto;min-height:0;overflow-y:auto}body[data-state="Run.Problem"] #app{height:100dvh;overflow:hidden}body[data-state="Run.Problem"] .screen{gap:var(--space-4)}.problem--ranges{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"board board" "villain you";gap:var(--space-3) var(--space-4);align-content:start}.section--villain{grid-area:villain}.section--you{grid-area:you}.section--board{grid-area:board}.problem--ranges .rangeGrid__body{max-width:min(100%,22vh)}.problem--ranges .rangeGrid__name{font-size:14px}.problem--ranges .rangeGrid__head{min-height:42px;align-items:flex-start}.answerBar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex:0 0 auto}.question{font-size:17px;font-weight:600}.guess{font-family:var(--font-num);font-size:44px;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.guess[data-empty=true]{color:var(--color-dim)}.guess__unit{font-size:26px;color:var(--color-dim)}.guess--shake{animation:guess-shake var(--dur-judge) var(--ease-in-out)}@keyframes guess-shake{0%{transform:translate(0)}25%{transform:translate(-6px)}60%{transform:translate(6px)}to{transform:translate(0)}}.keypad{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);background:var(--color-panel);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-2)}.key{font-family:var(--font-num);font-size:20px;font-weight:600;min-height:48px}.key--enter{font-family:var(--font-ui);font-size:15px}.judge{display:flex;flex-direction:column;gap:var(--space-4)}.judge__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.judge__stat{display:flex;flex-direction:column;gap:var(--space-1)}.judge__value{font-family:var(--font-num);font-size:26px;font-variant-numeric:tabular-nums}.judge__value--off{color:var(--color-dim)}.judge__result{display:flex;align-items:baseline;gap:var(--space-3)}.resultBadge{font-size:20px;font-weight:700;letter-spacing:.06em;animation:badge-in var(--dur-judge) var(--ease-out) both}.resultBadge[data-pass=true]{color:var(--color-pass)}.resultBadge[data-pass=false]{color:var(--color-strike)}@keyframes badge-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.scoreFloat{font-family:var(--font-num);font-size:17px;color:var(--color-pass);animation:score-float var(--dur-count) var(--ease-out) both}@keyframes score-float{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.recap{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start}.recap__side{display:flex;flex-direction:column;gap:var(--space-1)}.recap__name{font-size:14px;font-weight:600}.recap--ranges{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"board board" "villain you";gap:var(--space-3) var(--space-4)}.tierScreen{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-6)}.tierScreen__head{font-size:22px;font-weight:700;overflow-wrap:anywhere;min-width:0}@keyframes ring-out{0%{transform:scale(.6);opacity:1}to{transform:scale(1.15);opacity:0}}.summaryScore{display:flex;align-items:baseline;gap:var(--space-3)}.summaryScore__num{font-family:var(--font-num);font-size:44px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.bestMark{color:var(--color-accent);font-size:14px;font-weight:700;position:relative}.bestMark:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--color-accent);transform-origin:left;animation:underline-draw var(--dur-tier) var(--ease-out) both}@keyframes underline-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.statRow{display:flex;gap:var(--space-5);flex-wrap:wrap}.stat{display:flex;flex-direction:column;gap:var(--space-1)}.stat__value{font-family:var(--font-num);font-size:20px;font-variant-numeric:tabular-nums}.stat__value--text{font-family:var(--font-ui);font-weight:600}.missList{display:flex;flex-direction:column;gap:1px}.missRow{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:center;background:var(--color-panel);border:0;border-radius:var(--radius-ui);padding:var(--space-2) var(--space-3);font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;min-height:44px}.missRow:hover{background:var(--color-panel-2)}.missRow:focus-visible{outline:2px solid var(--color-pass);outline-offset:2px}.missRow:active{transform:scale(.995)}.missRow:disabled{opacity:.45;cursor:not-allowed}.missRow[data-state=loading]{opacity:.7;cursor:progress;pointer-events:none}.missRow[data-state=error]{box-shadow:inset 2px 0 0 var(--color-strike)}.missRow[data-state=success]{box-shadow:inset 2px 0 0 var(--color-pass)}.missRow__label{font-size:14px}.missRow__nums{font-family:var(--font-num);font-size:14px;color:var(--color-dim)}.runList{display:flex;gap:var(--space-2);flex-wrap:wrap}.runChip{font-family:var(--font-num);font-size:13px;background:var(--color-panel);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-1) var(--space-2)}.table{display:grid;gap:1px;font-size:14px}.table--tiers{grid-template-columns:auto 1fr auto}.table--heat{grid-template-columns:1fr auto auto}.table__cell{padding:var(--space-2) var(--space-3);background:var(--color-panel)}.table__cell--head{background:none;color:var(--color-dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding-bottom:var(--space-1)}.table__cell--num{font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right}.locked{position:relative}.locked__veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg);opacity:.82;border-radius:var(--radius-ui)}.locked__inner{filter:blur(3px);pointer-events:none;user-select:none}.settingRow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}.settingRow:last-child{border-bottom:0}.toggle{appearance:none;font:inherit;cursor:pointer;background:var(--color-panel-2);color:var(--color-text);border:1px solid var(--color-line);border-radius:var(--radius-ui);padding:var(--space-2) var(--space-4);min-height:44px;min-width:72px}.toggle[aria-pressed=true]{border-color:var(--color-pass);color:var(--color-pass)}.toggle:hover{background:var(--color-line)}.toggle:focus-visible{outline:2px solid var(--color-pass);outline-offset:2px}.toggle:active{transform:scale(.96)}.toggle:disabled{opacity:.45;cursor:not-allowed}.toggle[data-state=loading]{opacity:.7;cursor:progress;pointer-events:none}.toggle[data-state=error]{border-color:var(--color-strike);color:var(--color-strike)}.toggle[data-state=success]{border-color:var(--color-pass);color:var(--color-pass)}@media(max-width:420px){.card--md{--card-w: 58px}.card--lg{--card-w: 76px}.guess,.summaryScore__num{font-size:38px}#app{padding:var(--space-3) var(--space-4) var(--space-4)}body[data-state="Run.Problem"] .problem{gap:var(--space-3)}body[data-state="Run.Problem"] .section{gap:var(--space-1)}.key{min-height:44px;font-size:18px}.keypad{gap:var(--space-1)}.rangeGrid__body{max-width:176px}}.judge__value[data-weight="400"]{font-weight:400}.judge__value[data-weight="500"]{font-weight:500}.judge__value[data-weight="600"]{font-weight:600;color:var(--color-text)}.judge__value[data-weight="700"]{font-weight:700;color:var(--color-strike)}@media(prefers-reduced-motion:reduce){@keyframes reduced-fade{0%{opacity:0}to{opacity:1}}.strike[data-fresh=true],.resultBadge,.scoreFloat,.tierBadge--up,.guess--shake,.toast{animation:reduced-fade .15s var(--ease-out) both}.tierBadge--up:after{animation:none;opacity:1;transform:none}.bestMark:after{animation:none}.btn:active:not(:disabled),.link:active,.toggle:active,.missRow:active,.rangeGrid__head:active{transform:none}}.settingRow__note{display:block;font-size:13px;color:var(--color-dim);margin-top:var(--space-1)}.settingRow>span:first-child{min-width:0}