:root{--bg: #fff8f0;--bg-2: #ffeede;--ink: #2e3142;--muted: #8a8fa3;--brand: #5b7cfa;--brand-dark: #3f5fe0;--accent: #ff9f45;--good: #34c77b;--bad: #ff7a7a;--card-w: min(19vw, 21vh, 160px);--card-gap: clamp(6px, 2.4vw, 20px);--op-size: min(19vw, 16vh, 120px);--radius: 28px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 50% 0%,var(--bg-2),var(--bg) 60%);color:var(--ink);font-family:Nunito,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0}.btn3d{--btn-shadow: rgba(0, 0, 0, .22);background:linear-gradient(180deg,#fff,#f1f3fa);border-radius:22px;box-shadow:0 5px 0 var(--btn-shadow),0 10px 18px #0000001f;transition:transform .08s ease,box-shadow .08s ease,filter .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn3d:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--btn-shadow),0 3px 8px #0000001f}.btn3d:disabled{opacity:.45;cursor:default}.screen{height:100dvh;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 12px);gap:10px;overflow:hidden}.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.star-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:8px 16px;font-weight:800;font-size:clamp(16px,4.5vw,22px);box-shadow:0 3px #ecd9c2,0 6px 12px #00000014}.icon-btn{width:56px;height:56px;border-radius:50%;background:#fff;font-size:26px;box-shadow:0 4px #ecd9c2,0 6px 12px #00000014;display:grid;place-items:center}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px #ecd9c2}.home-pet{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0}.monster{display:block;max-width:100%;animation:bob 3.2s ease-in-out infinite}.home-pet .monster{width:min(58vw,30vh,300px);height:auto;max-width:100%;max-height:34vh}@keyframes bob{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}.pet-name{font-size:clamp(18px,5vw,26px);font-weight:800}.pet-bar{width:min(300px,74vw);height:18px;border-radius:999px;background:#f2e4d2;box-shadow:inset 0 2px 5px #00000024;overflow:hidden;margin-top:8px}.pet-bar>i{display:block;height:100%;min-width:10px;border-radius:999px;background:linear-gradient(90deg,#ffd166,#ff9f45);box-shadow:0 0 10px #ff9f45b3;transition:width .5s ease}.pet-hint{font-size:14px;color:var(--muted);font-weight:700}.play-btn{height:clamp(72px,13vw,92px);border-radius:28px;background:linear-gradient(180deg,#7c96ff,var(--brand));--btn-shadow: var(--brand-dark);color:#fff;font-size:clamp(24px,6.5vw,34px);font-weight:900;letter-spacing:2px;width:100%;max-width:520px;margin:0 auto}.stage-row{display:flex;justify-content:center;gap:clamp(8px,2.5vw,18px);flex-wrap:wrap}.stage-btn{width:clamp(58px,14vw,76px);height:clamp(58px,14vw,76px);border-radius:22px;font-size:clamp(26px,7vw,34px);background:#fff;--btn-shadow: #e7d6c0;position:relative}.stage-btn.on{background:linear-gradient(180deg,#ffe6c7,#ffd39e);--btn-shadow: #dd9f4e;outline:4px solid var(--accent);outline-offset:2px}.stage-btn.locked{filter:grayscale(1);opacity:.5}.stage-btn .lock{position:absolute;inset:0;display:grid;place-items:center;font-size:24px}.stage-btn .stars-need{position:absolute;bottom:-2px;right:2px;font-size:11px;font-weight:900;color:#b5793a;background:#fff;border-radius:999px;padding:1px 6px;box-shadow:0 1px 3px #00000026}.game-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dots{display:flex;gap:8px}.dots i{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 3px #0000001f}.dots i.done{background:linear-gradient(180deg,#ffe07a,#ffc02e)}.dots i.now{background:var(--brand);transform:scale(1.25)}.target-badge{align-self:center;display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(24px,6.5vw,40px);line-height:1;color:#c07a2a;background:#fff3e0;border:4px dashed #ffc98a;border-radius:999px;padding:6px 26px 8px}.target-badge .target-icon{font-size:.85em}.game-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;min-height:0;gap:clamp(12px,3vh,40px)}.cards{display:flex;align-items:center;justify-content:center;gap:var(--card-gap)}.card{width:var(--card-w);height:calc(var(--card-w) * 1.3);flex:0 0 auto;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#fff2e2);box-shadow:0 7px #e7d6c0,0 12px 22px #0000001f;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:900;font-size:calc(var(--card-w) * .52);color:var(--ink);transition:width .3s cubic-bezier(.4,0,.2,1),margin .3s cubic-bezier(.4,0,.2,1),transform .16s ease,box-shadow .16s ease,opacity .28s ease}.card .num{white-space:nowrap;padding:0 6px}.card .num.frac{font-size:calc(var(--card-w) * .34);display:flex;flex-direction:column;align-items:center;line-height:1}.card .num.frac b{border-top:3px solid currentColor;margin-top:2px;padding-top:2px}.card.picked{transform:translateY(-12px);box-shadow:0 0 0 6px var(--brand),0 12px #e7d6c0,0 18px 26px #00000024}.card.hint{box-shadow:0 0 0 6px var(--accent),0 7px #e7d6c0,0 12px 22px #0000001f;animation:hintPulse 1.1s ease-in-out infinite}@keyframes hintPulse{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}.card.fresh{animation:pop .36s cubic-bezier(.34,1.56,.64,1)}@keyframes pop{0%{transform:scale(.55)}55%{transform:scale(1.15)}to{transform:scale(1)}}.card.exiting{width:0;margin-inline:calc(var(--card-gap) / -2);opacity:0;transform:scale(.4) translateY(-14px)}.card.win{background:linear-gradient(180deg,#fff7d6,#ffe08a);box-shadow:0 0 0 8px #ffc02e73,0 8px #e7b83c,0 14px 30px #fa06;animation:winCard .7s cubic-bezier(.34,1.56,.64,1)}@keyframes winCard{0%{transform:scale(.7) rotate(-6deg)}60%{transform:scale(1.22) rotate(4deg)}to{transform:scale(1) rotate(0)}}.ops{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3.5vw,30px)}.op{width:var(--op-size);height:var(--op-size);border-radius:50%;color:#fff;font-size:calc(var(--op-size) * .5);font-weight:900;line-height:1;background:linear-gradient(180deg,#b9c0d4,#9aa3bd);--btn-shadow: #7b839c}.op.plus{background:linear-gradient(180deg,#5fdb9a,var(--good));--btn-shadow: #1f9b5c}.op.minus{background:linear-gradient(180deg,#7aa8ff,#4c86f5);--btn-shadow: #2f63c9}.op.times{background:linear-gradient(180deg,#ffbe78,var(--accent));--btn-shadow: #d97a22}.op.divide{background:linear-gradient(180deg,#bda6ff,#9b7bf0);--btn-shadow: #7455cc}.op.on{outline:6px solid rgba(46,49,66,.18);outline-offset:3px;transform:translateY(-6px)}.op.hint{animation:hintPulse 1.1s ease-in-out infinite;outline:6px solid var(--accent);outline-offset:3px}.tools{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,30px)}.tool{min-width:clamp(64px,17vw,92px);height:clamp(56px,12vw,68px);border-radius:20px;background:#fff;--btn-shadow: #e7d6c0;font-size:clamp(20px,5vw,26px);font-weight:800;padding:0 14px;position:relative}.tool .badge{position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff;font-size:13px;font-weight:900;border-radius:999px;padding:2px 8px}.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 14%);transform:translate(-50%);background:#fff;border-radius:22px;padding:14px 24px;font-size:clamp(17px,4.6vw,22px);font-weight:800;box-shadow:0 10px 30px #0000002e;display:flex;align-items:center;gap:10px;max-width:90vw;animation:toastIn .28s cubic-bezier(.34,1.56,.64,1);z-index:40;pointer-events:none}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.shake{animation:shake .42s ease}@keyframes shake{10%,90%{transform:translate(-3px)}20%,80%{transform:translate(5px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.overlay{position:fixed;inset:0;background:#fff8f0db;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fadeIn .25s ease}.sheet{background:#fff;border-radius:36px;box-shadow:0 20px 60px #0000002e,0 6px #ecd9c2;padding:clamp(18px,4vw,36px) clamp(22px,5vw,52px) clamp(22px,5vw,40px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.2vh,18px);max-width:min(92vw,560px);animation:sheetIn .34s cubic-bezier(.34,1.56,.64,1)}@keyframes sheetIn{0%{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay h2{margin:0;font-size:clamp(26px,7vw,40px);font-weight:900}.overlay p{margin:0;color:var(--muted);font-weight:800;font-size:clamp(15px,4vw,19px)}.big-btn{min-width:min(320px,76vw);height:clamp(66px,12vw,82px);border-radius:26px;font-size:clamp(22px,5.6vw,28px);font-weight:900;background:linear-gradient(180deg,#7c96ff,var(--brand));--btn-shadow: var(--brand-dark);color:#fff}.big-btn.ghost{background:#fff;color:var(--ink);--btn-shadow: #e7d6c0}.stars-row{display:flex;gap:10px;font-size:clamp(44px,13vw,72px);line-height:1}.stars-row span{animation:starPop .5s cubic-bezier(.34,1.56,.64,1) backwards}.stars-row span.off{filter:grayscale(1);opacity:.32}@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:45}.confetti i{position:absolute;top:-8vh;width:12px;height:18px;border-radius:3px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}.result{justify-content:center;align-items:center;text-align:center;gap:18px}.result-list{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.result-chip{background:#fff;border-radius:18px;padding:12px 18px;font-weight:800;box-shadow:0 4px #ecd9c2;font-size:clamp(15px,4vw,19px)}.parent{overflow-y:auto;gap:16px}.parent h1{font-size:24px;margin:0;font-weight:900}.parent h2{font-size:17px;margin:0 0 10px;font-weight:900;color:var(--muted)}.panel{background:#fff;border-radius:20px;padding:16px;box-shadow:0 4px #ecd9c2,0 8px 16px #0000000d}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}.stat{background:#fff8f0;border-radius:16px;padding:12px;text-align:center}.stat b{display:block;font-size:26px;font-weight:900;color:var(--brand)}.stat span{font-size:13px;color:var(--muted);font-weight:700}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-weight:800;font-size:16px}.row+.row{border-top:1px solid #f2eadf}.switch{width:62px;height:36px;border-radius:999px;background:#e3dfd8;position:relative;transition:background .2s;flex:0 0 auto}.switch:after{content:"";position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #00000038;transition:transform .2s}.switch.on{background:var(--good)}.switch.on:after{transform:translate(26px)}.weak-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#fff8f0;border-radius:14px;font-weight:800;margin-bottom:8px}.weak-item .nums{font-size:19px;letter-spacing:2px}.weak-item .meta{font-size:12px;color:var(--muted);font-weight:700}.danger{background:#fff0f0;color:#d64545;--btn-shadow: #f0c9c9}.boot{height:100dvh;display:grid;place-items:center;text-align:center;gap:12px;font-weight:800;color:var(--muted)}.target-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5vw,20px);flex-wrap:nowrap}.timer{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;max-width:320px}.timer-track{flex:1 1 auto;min-width:60px;height:14px;border-radius:999px;background:#f2e4d2;box-shadow:inset 0 2px 4px #00000024;overflow:hidden}.timer-track>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7fe3a0,var(--good));transition:width .25s linear}.timer.warn .timer-track>i{background:linear-gradient(90deg,#ffd166,var(--accent))}.timer.danger .timer-track>i{background:linear-gradient(90deg,#ff9f9f,#ff5a5a)}.timer.danger{animation:timerPulse .7s ease-in-out infinite}@keyframes timerPulse{50%{transform:scale(1.06)}}.timer-num{font-weight:900;font-size:clamp(15px,4vw,20px);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.timer.danger .timer-num{color:#e5484d}.clock{font-weight:900;font-size:clamp(15px,4vw,20px);color:var(--muted);font-variant-numeric:tabular-nums;background:#fff;border-radius:999px;padding:5px 14px;box-shadow:0 3px #ecd9c2;white-space:nowrap}.vs-hud{display:flex;align-items:center;gap:8px;flex:1 1 auto;max-width:330px;min-width:0}.vs-chip{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:clamp(13px,3.5vw,17px);background:#fff;border-radius:999px;padding:4px 10px;box-shadow:0 3px #ecd9c2;opacity:.5;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;flex:0 0 auto}.vs-chip b{font-size:1.3em}.vs-chip.on{opacity:1;transform:scale(1.1);box-shadow:0 3px #ecd9c2,0 0 0 3px currentColor}.vs-track{flex:1 1 auto;min-width:40px;height:14px;border-radius:999px;background:#ffe3c6;box-shadow:inset 0 2px 4px #00000024;overflow:hidden}.vs-track>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7c96ff,var(--brand));transition:width .45s cubic-bezier(.34,1.56,.64,1)}.handoff{align-items:center;justify-content:center;text-align:center;gap:clamp(10px,2.5vh,18px);position:relative}.handoff h1{font-size:clamp(26px,7vw,42px);margin:0;font-weight:900}.handoff-quit{position:absolute;top:calc(var(--safe-top) + 12px);left:16px}.handoff-round{font-weight:800;color:var(--muted);font-size:clamp(13px,3.6vw,16px)}.handoff-score{display:flex;align-items:center;gap:16px;font-weight:900;font-size:clamp(22px,6vw,30px)}.handoff-vs{font-size:14px;color:var(--muted)}.handoff .monster{width:min(50vw,26vh,260px);height:auto}.solution{background:#fff8f0;border-radius:20px;padding:12px 16px;display:flex;flex-direction:column;gap:9px;width:100%}.solution-title{font-size:13px;font-weight:800;color:var(--muted);text-align:center}.solution-step{display:flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(16px,4.4vw,22px);font-variant-numeric:tabular-nums;white-space:nowrap}.solution-step .n{width:20px;height:20px;border-radius:50%;background:#ffd9a8;color:#8a5a1a;font-size:12px;display:grid;place-items:center;flex:0 0 auto}.solution-step .eq{flex:1 1 auto}.solution-step .arrow{color:var(--muted)}.solution-step .res{color:var(--brand);min-width:2.2em;text-align:right}.solution-step.final .res{color:#d99b00}.result-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:clamp(20px,5.5vw,28px);line-height:1}.result-dots .miss{filter:grayscale(1);opacity:.5}.winner-row{display:flex;gap:clamp(8px,2.5vw,22px);align-items:stretch;justify-content:center;width:100%;max-width:520px}.winner-card{position:relative;flex:1 1 0;min-width:0;background:#fff;border-radius:26px;padding:16px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px #ecd9c2,0 10px 20px #00000014;transition:transform .3s ease}.winner-card.win{outline:4px solid #ffc02e;outline-offset:2px;transform:translateY(-8px)}.winner-name{font-weight:900;font-size:clamp(14px,3.8vw,18px)}.winner-score{font-weight:900;font-size:clamp(22px,6vw,32px)}.winner-meta{font-size:12px;font-weight:700;color:var(--muted);text-align:center}.crown{position:absolute;top:-24px;font-size:30px;animation:bob 2s ease-in-out infinite}.versus-title{font-size:clamp(22px,6.5vw,34px);margin:0;font-weight:900;text-align:center}.mode-row{display:flex;gap:clamp(8px,2.5vw,16px);justify-content:center;width:100%;max-width:520px;margin:0 auto}.mode-btn{flex:1 1 0;height:clamp(52px,9.5vw,64px);border-radius:22px;background:#fff;--btn-shadow: #e7d6c0;flex-direction:row;gap:7px;color:var(--ink)}.mode-emoji{font-size:clamp(18px,4.6vw,22px);line-height:1}.mode-name{font-size:clamp(13px,3.6vw,16px);font-weight:900}.pet-btn{position:relative;background:none;border:none;padding:0;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease}.pet-btn:active{transform:scale(.96)}.pet-btn-badge{position:absolute;right:0;bottom:10px;width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);border-radius:50%;background:#fff;display:grid;place-items:center;font-size:clamp(17px,4.6vw,22px);box-shadow:0 4px #ecd9c2,0 6px 14px #00000026;animation:bob 2.6s ease-in-out infinite;pointer-events:none}.wardrobe{gap:8px}.wardrobe-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.wardrobe-stage .monster{width:min(58vw,32vh,310px);height:auto}.wardrobe-name{font-size:clamp(15px,4vw,19px);font-weight:900}.wardrobe-next{font-size:clamp(12px,3.2vw,15px);font-weight:800;color:var(--muted)}.slot-row{display:flex;justify-content:center;gap:clamp(6px,2vw,14px)}.slot-btn{width:clamp(46px,12.5vw,62px);height:clamp(46px,12.5vw,62px);border-radius:18px;background:#fff;--btn-shadow: #e7d6c0;font-size:clamp(19px,5.2vw,26px);position:relative}.slot-btn.on{background:linear-gradient(180deg,#ffe6c7,#ffd39e);--btn-shadow: #dd9f4e;outline:4px solid var(--accent);outline-offset:2px}.slot-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 4px #0003}.swatch-row{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:clamp(6px,1.8vw,12px);max-width:560px;margin:0 auto;max-height:38vh}.swatch{position:relative;width:clamp(54px,15vw,76px);height:clamp(54px,15vw,76px);border-radius:18px;background:#fff;box-shadow:0 4px #e7d6c0;display:grid;place-items:center;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease}.swatch:active{transform:translateY(3px);box-shadow:0 1px #e7d6c0}.swatch.on{outline:4px solid var(--brand);outline-offset:1px;transform:translateY(-4px)}.swatch.locked .monster{filter:grayscale(.75) opacity(.45)}.swatch-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:15px;background:#ffffff59}.swatch-lock b{font-size:10px;font-weight:900;color:#b5793a;background:#fff8f0;border-radius:999px;padding:1px 5px;box-shadow:0 1px 3px #0000002e}.swatch-check{position:absolute;right:3px;bottom:3px;width:19px;height:19px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 4px #0003}.wardrobe-hint{margin:0;text-align:center;font-size:clamp(11px,3vw,14px);font-weight:800;color:var(--muted)}@media (max-height: 520px){.screen{gap:6px;padding-top:calc(var(--safe-top) + 6px);padding-bottom:calc(var(--safe-bottom) + 6px)}.icon-btn{width:44px;height:44px;font-size:20px}.tool{height:46px;min-width:56px;font-size:18px}.target-badge{padding:2px 14px;border-width:2px;font-size:14px}.dots i{width:10px;height:10px}.play-btn{height:58px;font-size:22px}.stage-btn{width:52px;height:52px;font-size:24px;border-radius:16px}.home-pet .monster{max-height:26vh}.pet-name{font-size:18px}.pet-hint{font-size:12px}.big-btn{height:54px;font-size:19px;min-width:min(260px,62vw)}.overlay{gap:8px;padding:12px}.overlay h2{font-size:22px}.result{gap:10px}.mode-btn{height:42px;gap:5px}.mode-emoji{font-size:15px}.mode-name{font-size:12px}.handoff h1{font-size:22px}.handoff .monster{width:min(42vw,26vh);height:auto}.timer-track,.vs-track{height:10px}.winner-card{padding:8px 6px}.crown{top:-16px;font-size:22px}.solution{gap:5px;padding:8px 12px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}