*{box-sizing:border-box}:root{--ink: #4a2c1a;--ink-soft: #84634c;--pink: #e8547a;--pink-d: #b23458;--choco: #5a3420;--cream: #fff8f0;--custard: #f7d983;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}html,body{margin:0;height:100%;overflow:hidden;background:#f1e4d6;color:var(--ink);font-family:Zen Maru Gothic,system-ui,-apple-system,Hiragino Maru Gothic ProN,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}[hidden]{display:none!important}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.app.is-shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{0%{transform:translate(0)}10%{transform:translate(-16px,9px) rotate(-1.2deg)}20%{transform:translate(14px,-11px) rotate(1deg)}30%{transform:translate(-11px,7px)}45%{transform:translate(8px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(2px,-1px)}to{transform:translate(0)}}.gl{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.flash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fffdf4 0%,#ffe6a8 40%,rgba(255,170,90,.6) 100%)}.flash[data-kind=gold]{background:radial-gradient(circle at 50% 40%,#fffbe0 0%,#ffe27a 35%,rgba(255,190,40,.55) 100%)}.star{position:absolute;background:linear-gradient(135deg,#fff6c8,#ffcf3a 50%,#d89a00);clip-path:polygon(50% 0,61% 36%,100% 38%,69% 60%,80% 100%,50% 76%,20% 100%,31% 60%,0 38%,39% 36%);filter:drop-shadow(0 0 6px rgba(255,210,80,.9));opacity:0}.slash{position:absolute;left:-10%;right:-10%;top:50%;height:4px;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 70%,rgba(255,255,255,0));box-shadow:0 0 18px 6px #ffffffb3;transform-origin:0 50%;rotate:-8deg}.splats{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.splat{position:absolute;background:radial-gradient(circle at 35% 30%,#fff6d4 0 12%,var(--custard) 34%,#e9c060 100%);border-radius:46% 54% 42% 58%/52% 44% 56% 48%;box-shadow:inset -6px -8px 14px #aa781e59,0 4px 10px #5a3c0a40;opacity:0}.top{position:absolute;left:0;right:0;top:0;padding:calc(var(--sat) + 10px) calc(var(--sar) + 14px) 16px calc(var(--sal) + 14px);text-align:center;pointer-events:none;background:linear-gradient(to bottom,rgba(255,248,240,.92),rgba(255,248,240,.55) 65%,rgba(255,248,240,0))}.top>*{pointer-events:auto}.site-top{position:absolute;left:calc(var(--sal) + 12px);top:calc(var(--sat) + 12px);font-size:13px;font-weight:700;color:var(--ink-soft);text-decoration:none;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.7)}.logo{margin:34px 0 0;font-weight:900;line-height:1;font-size:clamp(28px,8vw,44px);letter-spacing:.02em;display:inline-flex;flex-direction:column;align-items:center}@media (min-width: 560px){.logo{flex-direction:row;gap:6px;margin-top:4px}}.logo-a{font-size:.62em;color:var(--pink);-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 2px 0 var(--pink-d);letter-spacing:.12em;font-style:italic}@media (min-width: 560px){.logo-a{font-size:1em;letter-spacing:.02em}}.logo-b{color:var(--choco);text-shadow:0 2px 0 #fff,0 4px 0 rgba(232,84,122,.25)}.app:not([data-phase=title]):not([data-phase=result]) .logo{font-size:clamp(22px,6vw,34px)}.sound{position:absolute;right:calc(var(--sar) + 12px);top:calc(var(--sat) + 10px)}.sound-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.8);color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 6px #3c281426}.sound-btn svg{width:22px;height:22px}.sound-btn .mute,.sound-btn.is-muted .wave{display:none}.sound-btn.is-muted .mute{display:inline}.sound-panel{position:absolute;right:0;top:48px;width:210px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 8px 24px #3c281438;text-align:left;z-index:5}.vol{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.vol input{flex:1;accent-color:var(--pink)}.mute-btn{margin-top:10px;width:100%;padding:8px;border-radius:10px;background:#f6ebe2;font-size:13px;font-weight:700}.title-panel,.result{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel,.card{pointer-events:auto;position:absolute;left:50%;bottom:calc(var(--sab) + 12px);width:min(94vw,420px);margin-left:calc(min(94vw,420px)/-2);padding:16px 16px 14px;border-radius:24px;background:var(--cream);box-shadow:0 14px 40px #50281447;border:3px solid #fff;text-align:center}@media (min-aspect-ratio: 5/4) and (min-width: 760px){.title-panel,.result{display:flex;align-items:center;justify-content:flex-end;padding:calc(var(--sat) + 90px) calc(var(--sar) + 4vw) calc(var(--sab) + 16px) 0}.panel,.card{position:relative;left:auto;bottom:auto;margin-left:0;width:390px;max-height:100%;overflow-y:auto;padding:22px 22px 18px}}.card{max-height:min(54vh,460px);overflow-y:auto;overscroll-behavior:contain}.result-ad:empty{display:none}@media (min-aspect-ratio: 5/4) and (min-width: 760px){.card{max-height:100%}}.app:not([data-phase=title]) .title-panel{display:none}.lead{display:inline-block;margin:0;padding:5px 14px;border-radius:999px;background:var(--choco);color:#fff;font-weight:900;font-size:clamp(14px,3.8vw,16px);letter-spacing:.03em}.rule{margin:10px 0 4px;font-size:clamp(12.5px,3.4vw,14px);line-height:1.65;font-weight:700;color:var(--ink-soft)}.rule b{color:var(--pink-d)}.pick{margin:10px 0 8px;font-size:13px;font-weight:900;letter-spacing:.16em;color:var(--ink-soft)}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px 10px;border-radius:18px;background:#fff;box-shadow:0 4px #e6d2c2,0 6px 14px #5028141a;border:2px solid #f0e0d2;transition:transform .06s,box-shadow .06s}.mode-btn:active{transform:translateY(3px);box-shadow:0 1px #e6d2c2}.m-name{font-size:clamp(22px,6.4vw,26px);font-weight:900;line-height:1}.m-speed{display:flex;gap:3px;height:10px}.m-speed i{width:14px;height:10px;border-radius:3px;background:var(--pink);transform:skew(-20deg)}.m-note{font-size:11px;font-weight:700;color:var(--ink-soft)}.mode-btn[data-mode=slow] .m-name{color:#2f8f6a}.mode-btn[data-mode=slow] .m-speed i{background:#3fae84}.mode-btn[data-mode=normal] .m-name{color:#c77a12}.mode-btn[data-mode=normal] .m-speed i{background:#f0a030}.mode-btn[data-mode=fast] .m-name{color:var(--pink-d)}.controls{position:absolute;left:0;right:0;bottom:0;padding:26px calc(var(--sar) + 16px) calc(var(--sab) + 14px) calc(var(--sal) + 16px);display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(to top,rgba(255,248,240,.95),rgba(255,248,240,.72) 70%,rgba(255,248,240,0))}.app[data-phase=title] .controls,.app[data-phase=result] .controls{visibility:hidden}.mode-chip{margin:0;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.8);font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--ink-soft)}.inject-btn{position:relative;width:min(88vw,380px);min-height:84px;border-radius:999px;font-size:clamp(25px,7.2vw,31px);font-weight:900;letter-spacing:.08em;color:#fff;background:linear-gradient(to bottom,#ff7fa0,var(--pink));box-shadow:0 7px 0 var(--pink-d),0 14px 24px #b234584d;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .06s,box-shadow .06s,background .2s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.inject-icon{width:26px;height:26px;border-radius:50% 50% 50% 0;rotate:-45deg;background:radial-gradient(circle at 60% 35%,#fff7d8 0 18%,var(--custard) 45%,#e5b84e);box-shadow:0 1px #00000026}.inject-btn.is-on{transform:translateY(6px);box-shadow:0 1px 0 var(--pink-d),0 4px 12px #b234584d;background:linear-gradient(to bottom,#f0577e,#d23c64)}.inject-btn.is-on:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit;border:3px solid rgba(232,84,122,.5);animation:ring .9s ease-out infinite;pointer-events:none}@keyframes ring{0%{opacity:1;transform:scale(.98)}to{opacity:0;transform:scale(1.08)}}.inject-btn:disabled{background:#cdbfb2;box-shadow:0 7px #9d8f82;cursor:default}.inject-btn:disabled .inject-icon{filter:grayscale(.8);opacity:.6}.howto{margin:2px 0 0;font-size:clamp(12px,3.4vw,14px);text-align:center;color:var(--ink-soft);font-weight:700}.key-hint{margin:0;font-size:11px;color:#a88e78;font-weight:700}@media (pointer: coarse){.key-hint{display:none}}.r-kicker{margin:0;font-size:14px;font-weight:900;letter-spacing:.2em;color:var(--tone, var(--ink-soft))}.r-state{margin:4px 0;font-size:clamp(32px,9.5vw,44px);font-weight:900;line-height:1.15;color:var(--tone, var(--ink))}.card[data-tone=low]{--tone: #7b6a5c}.card[data-tone=mid]{--tone: #b07a28}.card[data-tone=good]{--tone: #d0602a}.card[data-tone=great]{--tone: var(--pink-d)}.card[data-tone=perfect] .r-state{background:linear-gradient(100deg,#c98a00,#ffcf3a 40%,#fff3b0 50%,#ffcf3a 60%,#c98a00);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #8a5a00);animation:shine 2.4s linear infinite}.card[data-tone=perfect]{--tone: #b07800}.card[data-tone=perfect]{border:3px solid transparent;background:linear-gradient(var(--cream),var(--cream)) padding-box,linear-gradient(120deg,#c98a00,#ffe27a,#fff6cf,#ffcf3a,#c98a00) border-box;box-shadow:0 0 0 4px #ffd65a59,0 0 40px #ffc83c80,0 14px 40px #3c28144d}@keyframes shine{to{background-position:-220% 0}}.card[data-tone=just]{--tone: #b07800;border:3px solid transparent;background:linear-gradient(#fffaf0,#fff3d6) padding-box,conic-gradient(from var(--spin, 0deg),#c98a00,#fff6cf,#ffcf3a,#ff9ec0,#fff6cf,#c98a00) border-box;box-shadow:0 0 0 5px #ffd65a73,0 0 60px #ffc83cbf,0 14px 40px #3c28144d;animation:spin-border 3s linear infinite}@property --spin{syntax: ""; inherits: false; initial-value: 0deg;}@keyframes spin-border{to{--spin: 360deg}}.card[data-tone=just] .r-kicker{letter-spacing:.08em}.card[data-tone=just] .r-state{font-size:clamp(40px,12vw,56px);background:linear-gradient(100deg,#c98a00,#ffcf3a 30%,#fff8d0 45%,#ffb3cf 55%,#ffcf3a 70%,#c98a00);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #8a5a00);animation:shine 1.8s linear infinite}.r-pct{margin:0;font-weight:900;font-size:clamp(34px,10vw,44px);font-variant-numeric:tabular-nums;line-height:1.1}.r-pct small{font-size:.48em;margin-left:2px}.r-pct .r-label{font-size:13px;letter-spacing:.1em;margin:0 8px 0 0;color:var(--ink-soft);vertical-align:.6em}.r-mode{margin:4px 0 0;font-size:12px;font-weight:700;color:var(--ink-soft)}.r-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-top:12px}.retry-btn,.back-btn{min-height:56px;border-radius:999px;font-size:19px;font-weight:900}.retry-btn{color:#fff;background:linear-gradient(to bottom,#ff7fa0,var(--pink));box-shadow:0 5px 0 var(--pink-d)}.back-btn{font-size:15px;background:#fff;color:var(--ink);box-shadow:0 5px #e2cdbd;border:2px solid #f0e0d2}.retry-btn:active,.back-btn:active{transform:translateY(4px);box-shadow:none}.result-social .social{margin-top:10px}.card.is-boom{background:linear-gradient(to bottom,#3a2016,#1a0d08);border-color:#6a2a14;color:#fff}.card.is-boom .r-kicker{color:#ff9a6a}.card.is-boom .r-state{color:#ffd84a;-webkit-text-stroke:2px #b4280a;paint-order:stroke fill;text-shadow:0 4px 0 #6a1404}.card.is-boom .r-pct .r-label,.card.is-boom .r-mode{color:#d8b8a4}.card.is-boom .r-pct{color:#ffb08a}.card.is-boom .back-btn{background:rgba(255,255,255,.1);color:#fff;border-color:#fff3;box-shadow:0 5px #0006}