:root,[data-theme=light]{--desk:#e8e0d0;--bg:#f3ede1;--panel:#fbf8f1;--ink:#2c2823;--ink-dim:#8b8377;--line:#ddd4c4;--accent:#2f5f8a;--accent-dim:#1a3d5c;--a:#2f5f8a;--a-bg:rgba(47,95,138,.12);--b:#9a6b2f;--b-bg:rgba(154,107,47,.12);--warn:#9a6b2f;--danger:#a83838;--warn-border:rgba(154,107,47,.5);--danger-border:rgba(168,56,56,.5);--slot-empty:#c4bdb0;--card-shadow:0 8px 32px rgba(0,0,0,.08);--key-top:inset 0 1px 0 rgba(255,255,255,.35);--key-drop:0 2px 0 rgba(0,0,0,.06);--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}[data-theme=dark]{--desk:#1f1c19;--bg:#2a2622;--panel:#34302b;--ink:#e8e0d2;--ink-dim:#9a9286;--line:#44403a;--accent:#7fb0db;--accent-dim:#4a7a9e;--a:#7fb0db;--a-bg:rgba(127,176,219,.12);--b:#c99a5a;--b-bg:rgba(201,154,90,.12);--warn:#c99a5a;--danger:#e07474;--warn-border:rgba(201,154,90,.5);--danger-border:rgba(224,116,116,.5);--slot-empty:#5a544d;--card-shadow:0 8px 32px rgba(0,0,0,.35);--key-top:inset 0 1px 0 rgba(255,255,255,.08);--key-drop:0 2px 0 rgba(0,0,0,.25)}*{-webkit-touch-callout:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:var(--desk);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-align:center;justify-content:center;align-items:center;min-height:100vh;display:flex}#app{max-width:30rem;padding:.8rem 1rem max(1rem, env(safe-area-inset-bottom));background:var(--bg);box-shadow:var(--card-shadow);border-radius:12px;flex-direction:column;gap:.7rem;margin:auto;display:flex}.toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.title-block{text-align:left;flex:auto;min-width:8rem}.game-title{color:var(--ink);letter-spacing:.06em;font-size:max(1.6rem,min(6vw,2.4rem));font-weight:800;line-height:1}.title-a{color:var(--accent)}.title-b{color:var(--b)}.subtitle{letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;margin-top:.15rem;font-size:.62rem}.stats{flex-wrap:wrap;justify-content:flex-end;gap:.35rem;font-size:.68rem;display:flex}.stats .stat{background:var(--panel);border:1px solid var(--line);box-shadow:var(--key-drop);border-radius:4px;padding:.18rem .4rem;line-height:1.1}.stats .stat b{color:var(--accent);font-size:.85rem;display:block}.stats .stat span{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em}.controls{gap:.35rem;display:flex}.tbtn{font-family:var(--font);background:var(--panel);border:1px solid var(--line);color:var(--ink);width:2.1rem;height:2.1rem;box-shadow:var(--key-top), var(--key-drop);border-radius:6px;justify-content:center;align-items:center;font-size:1rem;transition:transform 80ms,box-shadow .12s;display:inline-flex}.tbtn:hover{filter:brightness(.98)}.tbtn:active{transform:scale(.92);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}.tbtn-back{text-decoration:none}#btn-mute.muted{color:var(--ink-dim);border-color:var(--line)}.history{background-color:var(--bg);border:1px solid var(--line);grid-row-gap:0;grid-column-gap:.6rem;border-radius:8px;flex:none;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(2,1fr);grid-auto-flow:column;gap:0 .6rem;padding:.5rem;display:grid;overflow:hidden}.history-row{border-bottom:1px solid var(--line);justify-content:center;align-items:center;gap:.7rem;padding:.35rem 0;animation:.28s cubic-bezier(.2,.8,.2,1) both slideIn;display:flex}.history-row:last-child,.history-row:nth-child(4){border-bottom:none}.history-row.empty{animation:none}.history-row.empty .history-num{color:var(--slot-empty);opacity:.4}.history-num{font-family:var(--font-mono);letter-spacing:.3em;color:var(--ink);padding-left:.3em;font-size:1.5rem}.history-row.win .history-num{color:var(--accent)}.ab-badges{gap:.3rem;display:inline-flex}.badge-ab{border:1.5px solid;border-radius:3px;align-items:center;padding:.1rem .35rem;font-size:.8rem;font-weight:700;animation:.32s cubic-bezier(.2,.8,.2,1) both pop;display:inline-flex;transform:rotate(-3deg)}.badge-a{border-color:var(--a);color:var(--a);background:var(--a-bg)}.badge-b{border-color:var(--b);color:var(--b);background:var(--b-bg)}.badge-ab.zero{opacity:.4}.input-display{justify-content:center;gap:.6rem;padding:.4rem 0;display:flex}.slot{border:none;border-bottom:2px solid var(--line);width:max(2.6rem,min(14vw,3.4rem));height:max(3rem,min(16vw,4rem));font-family:var(--font-mono);color:var(--accent);background:0 0;justify-content:center;align-items:center;font-size:max(1.6rem,min(8vw,2.2rem));display:flex;position:relative}.slot.empty{color:var(--slot-empty)}.slot.cursor{border-bottom-color:var(--accent);animation:.9s step-end infinite caret}.slot.reveal{color:var(--danger);border-bottom-color:var(--danger);animation:none}.keypad{grid-gap:.5rem;grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.key{font-family:var(--font);background:var(--panel);border:1px solid var(--line);color:var(--ink);height:max(2.8rem,min(14vw,3.6rem));box-shadow:var(--key-top), var(--key-drop);border-radius:10px;font-size:max(1.2rem,min(6vw,1.7rem));transition:transform 70ms,box-shadow .12s}.key:hover{filter:brightness(.98)}.key:active{transform:scale(.96);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}.key-back{color:var(--warn);border-color:var(--warn-border);font-size:max(1rem,min(5vw,1.3rem))}.key-fire{letter-spacing:.04em;color:#fff;background:var(--accent);box-shadow:var(--key-top), var(--key-drop);border:none;font-size:max(1rem,min(5vw,1.3rem));font-weight:700}.key-fire:hover{filter:brightness(1.04)}.key-fire:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;filter:grayscale(.6)}.key-fire.ready{animation:.9s ease-in-out infinite alternate chargeGlow}.key-fire.firing{animation:.22s ease-out recoil}.toasts{z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:.4rem;display:flex;position:fixed;top:.6rem;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:var(--card-shadow);border-radius:8px;padding:.5rem .9rem;font-size:.85rem;animation:.25s ease-out both toastIn}.toast.leaving{animation:.3s ease-in forwards toastOut}.overlay{z-index:50;background:rgba(0,0,0,.45);justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.overlay[hidden]{display:none}.win-overlay{overflow:hidden}.win-content{z-index:60;text-align:center;animation:.4s ease-out both pop;position:relative}.win-stamp{color:var(--accent);border:2px solid var(--accent);background:var(--a-bg);letter-spacing:.1em;border-radius:4px;margin-bottom:.6rem;padding:.3rem .8rem;font-size:1.1rem;font-weight:700;display:inline-block;transform:rotate(-6deg)}.win-overlay.celebrate .win-stamp{animation:.45s cubic-bezier(.2,.8,.2,1) both stampPop}.win-splash{pointer-events:none;width:4px;height:4px;margin-left:-2px;position:absolute;top:0;left:50%}.win-splash:before,.win-splash:after{content:"";background:var(--accent);border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.win-splash:before{box-shadow:-18px -8px 0 0 var(--accent), 14px -20px 0 0 var(--accent), -8px 18px 0 0 var(--accent), 22px 12px 0 0 var(--accent)}.win-splash:after{box-shadow:-24px 6px 0 0 var(--accent), 8px -28px 0 0 var(--accent), -20px -16px 0 0 var(--accent), 18px 22px 0 0 var(--accent)}.win-overlay.celebrate .win-splash:before{animation:.55s ease-out both splash}.win-overlay.celebrate .win-splash:after{animation:.55s ease-out 70ms both splash}.win-shoop{color:var(--accent);letter-spacing:.05em;font-size:max(2rem,min(9vw,3.4rem));font-weight:700}.win-result{color:var(--b);margin:.6rem 0 1.2rem;font-size:1.1rem}.lose-content{z-index:60;text-align:center;animation:.4s ease-out both pop;position:relative}.lose-stamp{color:var(--danger);border:2px solid var(--danger);background:var(--bg);letter-spacing:.1em;border-radius:4px;margin-bottom:.6rem;padding:.3rem .8rem;font-size:1.1rem;font-weight:700;display:inline-block;transform:rotate(-6deg)}.lose-overlay.celebrate .lose-stamp{animation:.45s cubic-bezier(.2,.8,.2,1) both stampPop}.lose-shoop{color:var(--danger);letter-spacing:.05em;font-size:max(1.6rem,min(7vw,2.6rem));font-weight:700}.lose-label{color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:.6rem;font-size:.7rem}.lose-result{color:var(--danger);font-family:var(--font-mono);letter-spacing:.3em;margin:.3rem 0 1.2rem;padding-left:.3em;font-size:max(1.8rem,min(8vw,2.6rem))}.confirm-box{background:var(--bg);border:1.5px solid var(--accent);box-shadow:var(--card-shadow);text-align:center;border-radius:10px;max-width:22rem;padding:1.2rem 1.4rem;animation:.25s ease-out both pop}.confirm-msg{color:var(--ink);margin-bottom:1rem;line-height:1.5}.confirm-actions{justify-content:center;gap:.6rem;display:flex}.btn-primary,.btn-ghost{font-family:var(--font);border-radius:8px;padding:.5rem 1.1rem;font-size:1rem}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--key-top), var(--key-drop);border:none;font-weight:700}.btn-primary:hover{filter:brightness(1.04)}.btn-primary:active{transform:scale(.95);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}.btn-ghost{color:var(--ink);border:1px solid var(--line);background:0 0}.btn-ghost:hover{border-color:var(--ink-dim)}.input-display.shake{animation:.32s ease-in-out shake}@keyframes slideIn{0%{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.12)}to{transform:scale(1)}}@keyframes stampPop{0%{opacity:0;transform:scale(.5)rotate(-12deg)}70%{opacity:1;transform:scale(1.12)rotate(-5deg)}to{transform:scale(1)rotate(-6deg)}}@keyframes caret{0%,50%{border-bottom-color:var(--accent)}50.01%,to{border-bottom-color:var(--line)}}@keyframes chargeGlow{0%{box-shadow:0 0 6px var(--accent-dim)}to{box-shadow:0 0 18px var(--accent)}}@keyframes recoil{0%{transform:translateY(0)}40%{transform:translateY(.4rem)scale(.96)}to{transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-.5rem)}40%{transform:translate(.5rem)}60%{transform:translate(-.4rem)}80%{transform:translate(.4rem)}}@keyframes toastIn{0%{opacity:0;transform:translateY(-.6rem)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translateY(-.6rem)}}@keyframes splash{0%{opacity:0;transform:scale(.4)}40%{opacity:.6}to{opacity:0;transform:scale(2.2)}}@media (max-width:360px){#app{padding:.4rem}.history-num{font-size:1.2rem}.keypad{gap:.35rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.win-splash{display:none}}