:root{color-scheme:light;--ink:#174b50;--muted:#6e9090;--coral:#f87860;--coral-dark:#e45b47;--aqua:#11a99e;--cream:#fffdf5;--line:#e2ece7;--shadow:0 16px 50px #255d661c;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#d6efeb;background-image:radial-gradient(ellipse at 20% 10%,#fff7cf 0,transparent 45%),radial-gradient(ellipse at 90% 85%,#91d6d6 0,transparent 55%);color:var(--ink);display:flex;justify-content:center;align-items:center}button,a,input,textarea{font:inherit}button,a{touch-action:manipulation}button{border:0;cursor:pointer;color:inherit}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #1c8f98;outline-offset:4px}[hidden]{display:none!important}
#arena{position:relative;width:100%;max-width:560px;height:100vh;height:100dvh;max-height:1100px;overflow:hidden;isolation:isolate;background:#b8ebe6;box-shadow:0 0 90px #347b7d2b}#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#f7fff04d 0%,transparent 30%,transparent 63%,#dcf2e92b 100%);z-index:1}.topbar{position:absolute;z-index:7;top:calc(15px + var(--safe-top));left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:block;width:105px;height:38px;background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 3px 10px #366c6b08;pointer-events:auto}.brand img{width:100%;height:100%;object-fit:contain;display:block}.topbar-right{display:flex;align-items:center;gap:8px}.version-badge{font-size:10px;font-weight:700;letter-spacing:.03em;background:#ffffffb3;border:1px solid #fff9;border-radius:20px;padding:5px 8px;backdrop-filter:blur(8px)}.icon-button{width:36px;height:36px;border-radius:50%;background:#fffffff0;box-shadow:0 3px 12px #3156590c;display:grid;place-items:center;font-size:19px;font-weight:800;pointer-events:auto}.icon-button:active{transform:scale(.93)}
.screen{position:absolute;inset:0;z-index:5}.welcome{display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(82px + var(--safe-top));pointer-events:none}.welcome-heading{text-align:center;padding:0 20px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.16em;color:#4d8c89;line-height:1.5}.welcome-heading .eyebrow{display:flex;align-items:center;justify-content:center;gap:6px}.little-sun{font-size:18px;line-height:1;color:#ed9d4c;display:inline-block}.welcome h1{font-size:clamp(35px,10vw,49px);font-weight:900;letter-spacing:-.055em;line-height:1.18;margin:8px 0 6px;text-shadow:0 3px 0 #fff5}.welcome h1>span{color:#e67451;margin-right:5px}.welcome-subtitle{font-size:13px;font-weight:500;letter-spacing:.07em;margin:0;color:#427f7e}.welcome-tray{position:relative;pointer-events:auto;background:linear-gradient(165deg,#fffefbf7,#fffdf5f0);border:1px solid #fff;border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -5px 35px #1b72781c;padding:14px 22px calc(11px + var(--safe-bottom));backdrop-filter:blur(16px)}.challenge-note{position:absolute;left:20px;right:20px;top:-35px;margin:0;text-align:center;font-size:11px;line-height:21px;color:#376e70;text-shadow:0 1px 5px #fff;font-weight:600;pointer-events:none}.selection-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}.selection-heading h2{font-size:14px;margin:0;font-weight:800;letter-spacing:.02em}.selection-heading>span{font-size:10px;color:var(--muted)}.character-list{display:flex;gap:8px}.character{flex:1;min-width:0;position:relative;height:74px;border-radius:16px;background:#f0f5eb;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:3px 0 5px;font-size:10px;line-height:15px;font-weight:700;transition:background .15s,border-color .15s,transform .15s}.character:nth-child(2){background:#fff1df}.character:nth-child(3){background:#e7f4f3}.character:nth-child(4){background:#f5ecf5}.character.selected,.character[aria-pressed=true]{border-color:#13a69b;background:#e4f3e6;box-shadow:0 0 0 2px #ffffff,0 3px 12px #198c7f14;transform:translateY(-2px)}.character.selected:after,.character[aria-pressed=true]:after{content:"✓";position:absolute;right:4px;top:4px;background:var(--aqua);color:#fff;width:13px;height:13px;line-height:13px;border-radius:50%;font-size:8px}.partner-portrait{display:block;width:53px;height:53px;background-image:url('assets/partners-v8.png');background-size:200% 200%;background-repeat:no-repeat;flex-shrink:0}.partner-portrait.turtle{background-position:0 0}.partner-portrait.starfish{background-position:100% 0}.partner-portrait.blue{background-position:0 100%}.partner-portrait.purple{background-position:100% 100%}.character-description{text-align:center;font-size:10px;color:#618c82;margin:8px 0 10px;min-height:15px;line-height:1.5}.primary{background:linear-gradient(112deg,#fa936d,#f57460);color:#fff;width:100%;min-height:51px;border-radius:16px;font-size:16px;font-weight:800;letter-spacing:.02em;display:flex;justify-content:center;align-items:center;gap:16px;padding:12px 16px;box-shadow:0 5px 0 #d961491a,0 8px 18px #e4734421;transition:transform .13s,filter .13s}.primary:hover{filter:brightness(1.035)}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #d961491a}.primary:disabled{opacity:.6;filter:saturate(.6)}.start-button{min-height:52px;font-size:17px}.primary>span:last-child:not(:first-child){font-size:21px}.welcome-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;font-size:9px;line-height:18px;color:#79948d}.welcome-meta b{color:#39766d;font-weight:800;margin-left:2px}.text-button{background:transparent;padding:4px;color:#567d77;font-size:12px;font-weight:600}.welcome-meta .text-button{font-size:10px;padding:0}.classic-link{color:#6c8d83;text-decoration:underline;text-decoration-color:#bfd0c4;text-underline-offset:3px;font-size:10px;white-space:nowrap}.classic-link:hover{color:var(--coral-dark)}
.hud{position:absolute;left:17px;right:17px;top:calc(68px + var(--safe-top));z-index:6;display:flex;gap:8px;align-items:center;pointer-events:none}.count-meter,.time-meter{background:#fffdf1ed;border:1px solid #fff8;border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 4px 18px #24636c12}.count-meter{display:flex;align-items:center;gap:7px;padding:6px 12px;min-width:107px}.meter-icon{display:grid;place-items:center;background:#ffe8b2;width:27px;height:27px;border-radius:50%;color:#e8a143;font-size:20px}.count-meter>div>span{display:block;font-size:9px;color:#6b918a;line-height:12px;font-weight:600}.count-meter strong{font-size:25px;font-weight:900;font-variant-numeric:tabular-nums;line-height:29px;letter-spacing:-.04em}.count-meter small{font-size:10px;margin-left:4px;color:#86a09a}.time-meter{flex:1;padding:10px 11px 9px;min-width:0}.time-meter>div:first-child{display:flex;align-items:baseline;gap:3px}.time-meter>div>span{font-size:9px;flex:1;white-space:nowrap;color:#75918b}.time-meter strong{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.time-meter small{font-size:9px;color:#819d93}.progress-track{height:5px;background:#dae9df;border-radius:4px;overflow:hidden;margin-top:5px}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8acdb6,#12a99e);border-radius:4px;transition:width .08s linear}.pause-button{width:34px;height:34px;font-size:17px;flex-shrink:0}.stage-label{position:absolute;top:calc(132px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:5;background:#25767ca6;color:#fff9f0;backdrop-filter:blur(8px);font-size:10px;font-weight:600;white-space:nowrap;letter-spacing:.07em;line-height:25px;border-radius:20px;padding:0 12px;pointer-events:none}.feedback{position:absolute;left:14px;right:14px;top:35%;z-index:6;text-align:center;color:#fff;font-weight:900;font-size:24px;text-shadow:0 2px 4px #0d6962a6,0 0 16px #1f777f7a;pointer-events:none;transition:opacity .2s,transform .2s;white-space:pre-line}.feedback:empty{display:none}.feedback.positive{color:#fffae0}.feedback.negative{color:#fff1dc}.combo{position:absolute;z-index:6;top:calc(171px + var(--safe-top));right:20px;display:flex;align-items:baseline;gap:3px;transform:rotate(7deg);color:#ef6d50;font-weight:900;text-shadow:0 2px 0 #fff,0 -1px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;pointer-events:none}.combo b{font-size:34px;font-style:italic;line-height:1}.combo span{font-size:12px}.instruction{position:absolute;bottom:calc(87px + var(--safe-bottom));left:16px;right:16px;text-align:center;z-index:5;pointer-events:none;font-size:11px;color:#fffaf0;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 5px #0a6b79}.ability{position:absolute;left:50%;bottom:calc(22px + var(--safe-bottom));transform:translateX(-50%);z-index:8;min-width:240px;max-width:calc(100% - 40px);height:56px;padding:6px 13px 6px 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,#fffdf1,#fff6cd);border:2px solid #fffaf0;border-radius:35px;box-shadow:0 4px 0 #36878140,0 8px 24px #0e6d7930;color:#236e66;font-weight:800;font-size:13px;white-space:nowrap}.ability-orb{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;background:linear-gradient(145deg,#8cddd1,#2cb9ac);color:white;border:2px solid #fff;border-radius:50%;font-size:24px;box-shadow:0 2px 7px #2a9a7926}.ability-hint{font-size:9px;font-weight:500;opacity:.65;margin-left:auto}.ability:disabled{background:#f5fff0cf;color:#628f86;box-shadow:0 3px 8px #317f7e13;border-color:#f4fff1b3}.ability:disabled .ability-orb{background:#a6ccc0}.ability:not(:disabled){animation:ability-breathe 1.8s ease-in-out infinite}.ability:active:not(:disabled){transform:translateX(-50%) scale(.96)}
.countdown-screen{z-index:20;display:grid;place-items:center;text-align:center;background:#b2ece02b;backdrop-filter:blur(4px);color:var(--ink)}.countdown-screen>div{transform:translateY(-25px)}.countdown-screen span{font-size:14px;font-weight:700;letter-spacing:.08em}.countdown-screen strong{display:block;font-size:140px;font-weight:900;line-height:1.2;color:#fffdf0;text-shadow:0 6px 0 #0a939c48,0 12px 35px #0a6e7b30;font-variant-numeric:tabular-nums}.countdown-screen p{font-size:12px;font-weight:600}.modal-screen{z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--safe-top)) 22px calc(24px + var(--safe-bottom));background:#195d6494;backdrop-filter:blur(12px);overflow-y:auto;overscroll-behavior:contain}.panel{width:100%;max-width:440px;max-height:100%;overflow-y:auto;position:relative;background:var(--cream);border:1px solid #fff;border-radius:30px;padding:29px 25px 22px;box-shadow:0 18px 75px #113c5b24;text-align:center;scrollbar-width:thin;scrollbar-color:#c3dcd3 transparent}.panel .eyebrow{font-size:9px}.panel h2{font-size:26px;font-weight:900;line-height:1.35;letter-spacing:-.045em;margin:10px 0 8px}.panel>p{font-size:12px;line-height:1.85;color:#7c9990;margin:8px 0 20px}.panel .primary{margin-top:12px}.panel .text-button{margin-top:13px}.panel-mark{width:62px;height:62px;margin:0 auto 20px;border-radius:23px;background:#e4f3df;color:#52a390;display:grid;place-items:center;font-size:31px;font-weight:700;transform:rotate(-5deg)}.secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:45px;border-radius:15px;background:#fffdf8;border:1px solid #cfe1d7;color:#57867a;font-size:13px;font-weight:700;padding:10px;margin-top:11px}.secondary:hover{background:#f2f8ee}.secondary:active{transform:translateY(1px)}.disclaimer{display:block;font-size:9px;line-height:1.85;color:#9da99e;margin-top:17px}.finish-screen{background:#24787870}.result-panel{padding-top:26px}.result-panel>p#result-note{font-size:11px;margin-bottom:10px}.result-score{position:relative;margin:6px auto 17px;max-width:240px;padding:12px 0 9px;background:radial-gradient(ellipse,#fbecc2 0,#fff9e8 60%,transparent 72%);line-height:1}.result-score>strong{font-size:86px;font-weight:900;color:#f17b55;letter-spacing:-.07em;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #fff;display:block}.score-unit{display:block;font-size:11px;color:#ae9a76;margin-top:8px;letter-spacing:.1em}.result-spark{position:absolute;color:#e9bc57;font-size:34px;font-weight:300}.left-spark{left:15px;top:22px;transform:rotate(-12deg)}.right-spark{right:12px;top:53px;font-size:22px}.result-stats{display:flex;border-radius:18px;background:#f1f6eb;padding:14px 0}.result-stats>div{flex:1;border-right:1px solid #dbe6d8}.result-stats>div:last-child{border:0}.result-stats strong{display:block;font-size:20px;line-height:25px;font-weight:800;color:#527b66;font-variant-numeric:tabular-nums}.result-stats span{display:block;font-size:9px;color:#8ca18b;margin-top:3px}.panel>p.record-note{color:#5aa38c;font-weight:700;font-size:11px;margin:12px 0 5px;min-height:0}.panel>p.eligibility{font-size:11px;line-height:1.65;color:#b59c72;margin:8px 0}.eligibility:empty{display:none}.booking{background:#e7f3de;border:1px solid #d0e4be;border-radius:14px;min-height:44px;display:flex;justify-content:center;align-items:center;gap:15px;color:#688c47;font-size:13px;font-weight:800;margin:12px 0 4px;padding:10px}.result-bottom{display:flex;justify-content:center;align-items:center;gap:28px;margin:10px 0 0}.result-bottom .text-button{margin:0}.result-panel>.disclaimer{margin-top:12px}.result-version{font-size:8px;color:#a8b6a7;margin-top:11px;letter-spacing:.06em}.help-panel{text-align:left;padding:28px 24px 22px}.help-panel>.eyebrow,.help-panel>h2,.help-panel>.disclaimer{text-align:center}.how-to{list-style:none;margin:22px 0;padding:0}.how-to li{display:flex;gap:13px;margin:19px 0}.step-number{width:27px;height:27px;border-radius:10px;background:#e5f1e3;color:#6e9b82;font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0}.how-to h3{font-size:13px;margin:3px 0 5px;font-weight:800}.how-to p{font-size:11px;color:#80978c;line-height:1.85;margin:0}.link-label{display:block;text-align:left;font-size:10px;color:#7f998e;font-weight:600;margin:18px 0 7px}#link{display:block;resize:none;width:100%;min-height:84px;border:1px solid #d9e6da;border-radius:13px;background:#f5f8f0;color:#70917e;font-family:system-ui,sans-serif;font-size:11px;line-height:1.65;padding:12px;overflow-wrap:anywhere}.toast{position:absolute;bottom:calc(103px + var(--safe-bottom));left:50%;transform:translateX(-50%);z-index:60;border-radius:20px;background:#154c50ed;color:#fffdf0;box-shadow:0 5px 20px #23626628;padding:10px 16px;max-width:88%;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:none}
@keyframes ability-breathe{0%,100%{box-shadow:0 4px 0 #36878140,0 8px 24px #0e6d7930}50%{box-shadow:0 4px 0 #36878140,0 0 0 6px #fff6cd2b,0 8px 24px #0e6d7930}}
@media(min-width:600px){#arena{height:min(100dvh,1000px);border-left:1px solid #fff8;border-right:1px solid #fff8}.welcome-tray{padding-left:30px;padding-right:30px}.welcome-heading{padding-top:6px}.welcome h1{font-size:49px}.character{height:82px}.partner-portrait{width:60px;height:60px}.selection-heading h2{font-size:16px}.character-description{font-size:11px}.welcome-meta{font-size:10px}.welcome-tray .classic-link{font-size:11px}.panel{max-width:430px}}
@media(max-height:760px){.welcome{padding-top:calc(70px + var(--safe-top))}.welcome h1{font-size:35px;margin-top:5px}.welcome-subtitle{font-size:11px}.welcome-heading .eyebrow{font-size:8px}.welcome-tray{padding-top:11px;padding-bottom:calc(8px + var(--safe-bottom));border-radius:24px 24px 0 0}.character{height:65px;border-radius:13px}.partner-portrait{width:45px;height:45px}.selection-heading{margin-bottom:6px}.selection-heading h2{font-size:13px}.character-description{margin:5px 0 7px;font-size:9px}.start-button{min-height:46px;font-size:16px}.welcome-meta{margin-top:6px}.challenge-note{top:-29px;font-size:10px}.panel{padding:23px 23px 18px;border-radius:25px}.panel h2{font-size:24px}.result-score{margin:2px auto 11px;padding:5px 0}.result-score>strong{font-size:69px}.result-stats{padding:10px 0}.panel>p#result-note{margin-top:4px;margin-bottom:4px}.result-panel>.primary,.result-panel>.secondary{min-height:43px;margin-top:9px}.result-panel>.disclaimer{font-size:8px;margin-top:10px}.result-panel>.result-version{margin-top:7px}.result-panel>.record-note{margin:9px 0 4px}.how-to{margin:16px 0}.how-to li{margin:14px 0}}
@media(max-height:620px){.topbar{top:calc(9px + var(--safe-top));left:16px;right:16px}.brand{width:91px;height:32px}.icon-button{width:31px;height:31px;font-size:16px}.welcome{padding-top:calc(53px + var(--safe-top))}.welcome-heading .eyebrow{display:none}.welcome h1{font-size:30px;margin:6px 0}.welcome-subtitle{font-size:10px}.welcome-tray{padding:9px 18px calc(7px + var(--safe-bottom))}.selection-heading h2{font-size:12px}.character{height:54px}.partner-portrait{width:35px;height:35px}.character{font-size:9px}.character-description{font-size:9px;margin:3px 0 5px}.start-button{min-height:41px;font-size:15px;padding:8px}.welcome-meta{font-size:8px;margin-top:4px}.classic-link,.welcome-meta .text-button{font-size:9px}.challenge-note{font-size:9px;top:-26px}.modal-screen{padding:calc(12px + var(--safe-top)) 17px calc(12px + var(--safe-bottom))}.panel{max-height:100%;padding:20px}.hud{top:calc(52px + var(--safe-top));left:13px;right:13px}.stage-label{top:calc(115px + var(--safe-top))}.ability{bottom:calc(13px + var(--safe-bottom));height:49px}.instruction{bottom:calc(70px + var(--safe-bottom));font-size:10px}.combo{top:calc(150px + var(--safe-top))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.feedback{opacity:0;transform:translateY(7px)}.feedback.show{opacity:1;transform:translateY(0)}.feedback.bad{color:#fff0d8}
.partner-portrait.turtle,.partner-portrait.starfish{background-size:200% 181.818%}.partner-portrait.blue,.partner-portrait.purple{background-size:200% 222.222%}