:root{--ink:#3b2a20;--cream:#fffbeb;--sun:#fbbf24;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--font:"PingFang SC", "Hiragino Sans GB", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#fde68a}button{color:inherit;cursor:pointer;font-family:inherit}.btn{background:#fff;border:0;border-radius:999px;padding:.55em 1.4em;font-size:18px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 .25em #3b2a2040}.btn:active{transform:translateY(.18em);box-shadow:0 .07em #3b2a2040}.btn.go{background:var(--green);color:#fff}.btn.soft{color:var(--ink);background:#fff;border:3px solid #fcd34d}.btn.big{padding:.6em 1.8em;font-size:24px}.btn.hidden{display:none}.btn.recording{background:var(--red);color:#fff;border-color:var(--red);animation:1s infinite pulse}.home{background:radial-gradient(circle at 20% 0,#fff7d6,#fde68a 60%,#fcd34d);min-height:100vh;padding:24px 16px 48px}.home header{text-align:center}.mascots{justify-content:center;align-items:flex-end;gap:4px;display:flex}.home h1{letter-spacing:.06em;text-shadow:0 3px #fff;margin:6px 0 24px;font-size:clamp(32px,6vw,52px)}.cards{gap:20px;max-width:760px;margin:0 auto;display:grid}.card{background:#fff;border-radius:28px;align-items:center;gap:20px;padding:22px;display:flex;box-shadow:0 8px #b4530940}.card-icon svg{width:120px;height:120px}.card-body{flex:1;min-width:0}.card h2{margin:0;font-size:30px}.card p{color:#92400e;margin:4px 0 8px}.card .meta{color:#a16207;margin-top:12px;font-size:14px}.segs{flex-wrap:wrap;gap:10px;margin-top:14px;display:flex}.stars{color:var(--sun);letter-spacing:2px;margin-bottom:12px;font-size:28px}.stars i,.big-stars i{color:#e7e5e4;font-style:normal}@media (width<=520px){.card{text-align:center;flex-direction:column}.segs{justify-content:center}}.player{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#1f2937;place-items:center;display:grid;position:fixed;inset:0}.host{aspect-ratio:16/9;width:min(100vw,177.778dvh);position:relative}.topbar{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));pointer-events:none;z-index:10;justify-content:space-between;align-items:center;display:flex;position:absolute}.topbar>*{pointer-events:auto}.icon-btn{background:#ffffff8c;border:0;border-radius:50%;width:44px;height:44px;font-size:20px}.loading{color:#fff;font-size:24px;position:absolute}.stage{border-radius:6px;position:absolute;inset:0;overflow:hidden;container-type:size}.stage-svg{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-ui{pointer-events:none;position:absolute;inset:0}.stage-ui>*{pointer-events:auto}.stage.busy .stage-ui{pointer-events:none}.stage.busy .stage-ui *{pointer-events:none!important}.stage-ui .btn{white-space:nowrap;font-size:2.3cqw;position:absolute;transform:translate(-50%,-50%)}.stage-ui .btn:active{transform:translate(-50%,-42%)}.subtitle{opacity:0;pointer-events:none;background:#ffffffed;border-radius:2cqw;max-width:80%;padding:.8cqw 2cqw;font-size:2.4cqw;font-weight:700;line-height:1.45;transition:opacity .2s,transform .2s;position:absolute;bottom:6%;left:50%;transform:translate(-50%,40%);box-shadow:0 .4cqw #00000026}.subtitle.show{opacity:1;transform:translate(-50%)}.subtitle b{margin-right:.8em}.idle{transform-box:fill-box;transform-origin:50% 100%;animation:2.6s ease-in-out infinite breathe}.eye{transform-box:fill-box;transform-origin:50%;animation:4.5s infinite blink}.arm-l,.arm-r{transform-box:fill-box;transition:transform .2s}.arm-l{transform-origin:80% 10%}.arm-r{transform-origin:20% 10%}.arms-up .arm-l{transform:rotate(95deg)}.arms-up .arm-r{transform:rotate(-95deg)}.mouth-open{transform-box:fill-box;transform-origin:50% 0;transition:transform 50ms}.mouth-closed{transition:opacity 50ms}.actor-ring{fill:#0000001f}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015,.985)}}@keyframes blink{0%,94%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.pop-in{transform-box:fill-box;transform-origin:50%;animation:.5s cubic-bezier(.34,1.56,.64,1) both popIn}@keyframes popIn{0%{opacity:0;scale:0}to{opacity:1;scale:1}}.flame{transform-box:fill-box;transform-origin:50% 100%;animation:.4s infinite alternate flicker}@keyframes flicker{to{transform:scale(.85,1.12)}}.balloons{animation:3s ease-in-out infinite float}@keyframes float{50%{translate:0 -14px}}.clock .num{transform-box:fill-box;transform-origin:50%;transition:fill .2s}.clock .num.pulse{fill:#ea580c;animation:.35s numPop}@keyframes numPop{50%{transform:scale(1.5)}}.hand-hour,.hand-min{transition:filter .2s}.glow{filter:drop-shadow(0 0 6px #fde047)drop-shadow(0 0 12px #facc15);animation:1s infinite alternate glowPulse}@keyframes glowPulse{to{filter:drop-shadow(0 0 2px #fde047)drop-shadow(0 0 22px #facc15)}}.tappable{cursor:pointer}.tappable path{animation:1.2s infinite hintFlash}@keyframes hintFlash{50%{stroke:#facc15;stroke-width:7px}}.tap-right path{animation:none;fill:var(--green)!important}.tap-wrong path{fill:#9ca3af!important}.draggable{cursor:grab;touch-action:none}.clock .tick.lit{stroke:#2563eb;stroke-width:7px}.clock .min-label{transition:opacity .3s}.clock .min-label.off{opacity:0}.clock .min-label.pop{transform-box:fill-box;transform-origin:50%;animation:.4s both popIn}.drag-face{cursor:grab;touch-action:none}.draggable path{animation:1.2s infinite hintFlash}.choices{opacity:0;gap:2.4cqw;transition:opacity .25s,transform .25s;display:flex;position:absolute;transform:translate(-50%,-50%)scale(.8)}.choices.in{opacity:1;transform:translate(-50%,-50%)scale(1)}.choices.column{flex-direction:column;gap:1.6cqw}.choice{white-space:nowrap;background:#fff;border:.45cqw solid #fcd34d;border-radius:2cqw;place-items:center;min-width:10cqw;padding:1cqw 2cqw;font-size:3.2cqw;font-weight:900;display:grid;box-shadow:0 .5cqw #b453094d}.choices.big .choice{min-width:13cqw;font-size:4.2cqw}.choice svg{width:12cqw;height:12cqw;display:block}.choice.right{border-color:var(--green);background:#dcfce7}.choice.reveal{animation:.8s 3 pulse}.choice.wrong{border-color:var(--red);opacity:.55;background:#fee2e2;animation:.4s shake}.banner{opacity:0;white-space:nowrap;background:#fff7ed;border:.35cqw solid #fb923c;border-radius:2cqw;padding:.7cqw 2.2cqw;font-size:2.5cqw;font-weight:800;transition:opacity .3s,transform .3s;position:absolute;transform:translate(-50%,-50%)translateY(-1cqw)}.banner.in{opacity:1;transform:translate(-50%,-50%)}.banner b{color:#dc2626;font-size:1.15em}.match{position:absolute;inset:0}.match-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.match-lines line{stroke-width:9px;stroke-linecap:round}.match-lines .ok{stroke:var(--green)}.match-lines .reveal{stroke:#f59e0b;stroke-dasharray:18 14}.match-lines .bad{stroke:var(--red);stroke-dasharray:14 12}.match-card{background:#fff;border:.45cqw solid #fcd34d;border-radius:2cqw;place-items:center;min-width:13cqw;min-height:9cqw;padding:.8cqw;transition:transform .15s,border-color .15s;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 .5cqw #b453094d}.match-card svg{width:10.5cqw;height:10.5cqw;display:block}.match-card.sel{border-color:var(--blue);transform:translate(-50%,-50%)scale(1.08);box-shadow:0 0 0 .6cqw #3b82f64d}.match-card.done{border-color:var(--green)}.match-card.shake{animation:.4s shakeC}.time-label{padding:0 1cqw;font-size:4cqw;font-weight:900}.drag{position:absolute;inset:0}.slot{background:#ffffff73;border:.4cqw dashed #f59e0b;border-radius:2cqw;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%)}.slot:empty{background:0 0;border-color:#0000}.slot span{color:#b45309;font-size:2.2cqw;font-weight:900;position:absolute;top:-2.6cqw}.tile{touch-action:none;cursor:grab;background:#fff;border:.4cqw solid #fcd34d;border-radius:1.8cqw;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 .5cqw #b453094d}.tile.lift{z-index:5;cursor:grabbing;transform:translate(-50%,-50%)scale(1.12);box-shadow:0 1.2cqw 1.5cqw #00000040}.tile.return{transition:left .3s,top .3s}.tile.placed{border-color:var(--green);cursor:default;background:#f0fdf4}.tile.shake{animation:.4s shakeC}.tile.hint{border-color:#f97316;animation:.6s 4 pulse}.num-tile{font-size:3.4cqw;font-weight:900}.num-tile.min{color:#1d4ed8}.banner{text-align:center;line-height:1.5}.act-card{flex-direction:column;align-items:center;gap:.3cqw;display:flex}.act-icon{font-size:3.2cqw;line-height:1}.act-card svg{width:6.5cqw;height:6.5cqw}.act-text{font-size:2cqw;font-weight:800}.dots{gap:1cqw;display:flex;position:absolute;top:4%;left:50%;transform:translate(-50%)}.dots i{background:#ffffffb3;border:.25cqw solid #fff;border-radius:50%;width:1.6cqw;height:1.6cqw;transition:transform .2s}.dots i.now{background:var(--sun);transform:scale(1.35)}.dots i.ok{background:var(--green)}.dots i.meh{background:#fb923c}.chips{gap:1.2cqw;display:flex;position:absolute;transform:translate(-50%,-50%)}.chips span{white-space:nowrap;background:#fff;border:.3cqw dashed #f59e0b;border-radius:999px;padding:.6cqw 1.6cqw;font-size:2.2cqw;font-weight:800}.chips span.lit{border:.3cqw solid var(--green);background:#dcfce7}@keyframes shake{25%{translate:-.6cqw}75%{translate:.6cqw}}@keyframes shakeC{20%{margin-left:-.8cqw}60%{margin-left:.8cqw}}@keyframes pulse{50%{scale:1.1}}.report{background:radial-gradient(circle,#fff7d6,#fcd34d);place-items:center;min-height:100vh;padding:16px;display:grid}.report-card{text-align:center;background:#fff;border-radius:32px;width:min(520px,100%);padding:28px 24px;box-shadow:0 10px #b4530940}.report-card h1{margin:8px 0;font-size:26px}.big-stars{color:var(--sun);letter-spacing:6px;font-size:56px;animation:.6s both popIn}.score{font-size:20px}.qlist{text-align:left;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 20px;padding:0;font-size:14px;list-style:none;display:grid}@media (width<=420px){.qlist{grid-template-columns:1fr}}.qlist li{border-radius:12px;padding:8px 14px;font-weight:700}.qlist .ok{background:#dcfce7}.qlist .meh{background:#ffedd5}.row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.sound-gate{z-index:100;background:var(--green);color:#fff;border:0;border-radius:999px;padding:18px 34px;font-size:22px;font-weight:900;animation:1.2s infinite pulse;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #00000073}.rotate-hint{z-index:50;color:var(--ink);background:#fde68a;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:24px;font-weight:900;display:none;position:fixed;inset:0}.rotate-hint div{font-size:64px;animation:1.6s ease-in-out infinite tilt}@keyframes tilt{50%{transform:rotate(-90deg)}}@media (orientation:portrait) and (width<=820px){.rotate-hint{display:flex}}.seekbar{z-index:8;touch-action:none;cursor:pointer;background:linear-gradient(#0000,#00000040);align-items:center;gap:10px;height:28px;padding:0 10px;display:flex;position:absolute;bottom:0;left:0;right:0}.seekbar .track{background:#ffffff73;border-radius:3px;flex:1;height:6px;transition:height .15s;position:relative}.seekbar.active .track,.seekbar:hover .track{height:10px}.seekbar .fill{background:#fff;border-radius:3px;position:absolute;top:0;bottom:0;left:0}.seekbar .ask{background:var(--sun);border:2px solid #fff;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%}.seekbar .count{color:#fff;text-align:right;text-shadow:0 1px 2px #00000080;min-width:48px;font-size:12px;font-weight:700}