:root{--cream: #fffaf0;--cream-dim: rgba(255, 250, 240, .74);--sun: #ffd45e;--sun-deep: #f29b2c;--coral: #ff7a6b;--sea: #1aa6b7;--sea-deep: #0b3b5c;--ink: #0d2a3f;--glass: rgba(9, 40, 62, .58);--glass-line: rgba(255, 250, 240, .22);--danger: #ff4a3a;--jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;--num: "Fredoka", "Zen Maru Gothic", system-ui, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--spring: cubic-bezier(.34, 1.56, .64, 1);--p0: #ff7a6b;--p1: #4fc3ff;--p2: #9be15d;--p3: #c58bff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b3b5c;overflow:hidden}body{font-family:var(--jp);color:var(--cream);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#app{position:fixed;inset:0}#gl{position:absolute;inset:0;width:100%;height:100%;display:block}button{font-family:inherit;color:inherit;cursor:pointer}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.7em;padding:0 .45em;margin:0 .18em;border-radius:.45em;border:1px solid rgba(255,250,240,.45);border-bottom-width:2px;font-family:var(--num);font-size:.78em;font-weight:600;letter-spacing:.02em;background:#ffffff1a}.touch-only,body.touch .desk-only,body.touch .kbd{display:none}body.touch .touch-only{display:inline}.eyebrow{margin:0 0 .4em;font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.32em;color:var(--sun);text-shadow:0 1px 8px rgba(5,25,40,.85)}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}.screen.show{opacity:1;pointer-events:auto}.hidden{display:none!important}#loading{background:radial-gradient(120% 90% at 50% 110%,#2ec4c0,#1478a0 40%,#0a2f4c);gap:26px;transition:opacity .5s var(--ease),filter .6s var(--ease)}#loading:not(.show){filter:blur(8px)}.load-isle{display:flex;gap:10px;align-items:flex-end;height:40px}.load-isle i{width:30px;height:22px;border-radius:50% 50% 8px 8px;background:linear-gradient(180deg,#9be15d 0 40%,#f6e2b0 40% 55%,#8a7f78 55%);animation:bob 1.4s ease-in-out infinite}.load-isle i:nth-child(2){animation-delay:.18s;height:30px}.load-isle i:nth-child(3){animation-delay:.36s}.load-text{font-size:13px;letter-spacing:.2em;color:var(--cream-dim)}.load-bar{width:180px;height:3px;border-radius:3px;background:#ffffff26;overflow:hidden}.load-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4ee6d6,#fffaf0);transition:width .4s var(--ease)}@keyframes bob{0%,to{translate:0 0}50%{translate:0 -6px}}#title{justify-content:flex-end;padding-bottom:7vh;background:linear-gradient(180deg,#04162473,#04162400 32% 58%,#04162499)}.logo{position:absolute;top:5vh;left:0;right:0;margin:0;display:flex;flex-direction:column;align-items:center}.logo-word{position:relative;display:block;filter:drop-shadow(0 12px 28px rgba(0,40,70,.45));font-weight:900;font-size:clamp(64px,13vw,156px);line-height:1;letter-spacing:.02em}.logo-word b{display:block;filter:drop-shadow(0 6px 0 rgba(8,60,90,.45))}.logo-word i{display:block;font-style:normal;background:linear-gradient(180deg,#fffdf6 20%,#fff0c0 62%,#ffcf6e);-webkit-background-clip:text;background-clip:text;color:transparent}.logo-word b:first-child{clip-path:polygon(0 0,100% 0,100% 18%,74% 32%,79% 52%,61% 66%,66% 100%,0 100%);animation:logoIn .9s var(--spring) both .2s}.logo-word b.sunk{position:absolute;inset:0;clip-path:polygon(100% 18%,74% 32%,79% 52%,61% 66%,66% 100%,100% 100%);transform-origin:70% 60%;animation:logoIn .9s var(--spring) both .2s,logoSink 5.2s var(--ease) infinite 1.4s}@keyframes logoIn{0%{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}@keyframes logoSink{0%,55%{transform:none;filter:drop-shadow(0 6px 0 rgba(8,60,90,.45))}62%{transform:translate(2px,1px) rotate(1deg)}66%{transform:translate(-2px) rotate(-1deg)}70%{transform:translate(1px,4px) rotate(3deg)}82%{transform:translate(10px,38px) rotate(9deg);opacity:0}83%{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}.logo-sub{margin-top:-.12em;font-weight:900;font-size:clamp(30px,5.4vw,64px);letter-spacing:.32em;padding-left:.32em;color:var(--cream);text-shadow:0 4px 0 rgba(8,60,90,.4),0 10px 26px rgba(0,40,70,.5);animation:logoIn .9s var(--spring) both .45s}.logo-en{margin-top:.7em;padding-left:.6em;font-family:var(--num);font-weight:600;letter-spacing:.6em;font-size:13px;color:var(--sun);text-shadow:0 1px 8px rgba(5,25,40,.9);animation:logoIn .9s var(--ease) both .7s}.tagline{margin:0 0 22px;font-size:clamp(14px,1.7vw,17px);letter-spacing:.12em;line-height:1.8;text-align:center;text-shadow:0 1px 10px rgba(5,25,40,.9)}.start{padding:14px 30px;border-radius:999px;border:1px solid rgba(255,240,200,.6);background:linear-gradient(180deg,#ffdc785c,#ff965a38);font-size:16px;font-weight:700;letter-spacing:.12em;animation:ping 2.2s ease-out infinite;backdrop-filter:blur(6px)}@keyframes ping{0%{box-shadow:0 0 #ffd45e8c}to{box-shadow:0 0 0 22px #ffd45e00}}.records{display:flex;gap:12px;margin-top:18px}.records:empty{display:none}.records .r{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--num);font-size:11px;color:var(--cream-dim)}.st{display:flex;gap:1px}.st i{width:10px;height:10px;background:#ffffff40;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.st i.on{background:var(--sun)}.title-sound{position:absolute;top:18px;right:18px;padding:8px 14px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);font-size:12px}.title-foot{position:absolute;bottom:14px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:10.5px;color:#fffaf09e;gap:12px}#select{justify-content:space-between;padding:5vh 0 4vh;background:linear-gradient(180deg,#04162480,#04162400 22% 50%,#041624a8)}.select-head{text-align:center}.select-head h2{margin:0;font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:.08em;text-shadow:0 2px 16px rgba(5,25,40,.8)}.select-tip{display:inline-block;margin:10px 0 0;padding:5px 14px;border-radius:999px;font-size:12.5px;color:var(--cream);background:#09283e9e;backdrop-filter:blur(6px)}.select-bottom{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.slots{display:flex;gap:12px;padding:0 16px;flex-wrap:wrap;justify-content:center}.slot{position:relative;width:168px;padding:12px 12px 10px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .3s var(--spring),border-color .3s}.slot .tag{position:absolute;top:-10px;left:12px;padding:2px 10px;border-radius:999px;font-family:var(--num);font-weight:700;font-size:12px;color:#08283c;background:var(--pc, var(--sun))}.slot .face{width:64px;height:64px;border-radius:50%;background:#ffffff1f center/cover no-repeat;border:3px solid var(--pc, var(--sun));box-shadow:0 0 18px color-mix(in srgb,var(--pc) 60%,transparent)}.slot .face.zoom{background-size:260%;background-position:50% 12%}.slot .nm{font-weight:900;font-size:17px;letter-spacing:.06em;white-space:nowrap;display:flex;align-items:center;gap:8px}.slot .nm i{font-style:normal;opacity:.55;font-size:13px;cursor:pointer}.slot .dev{font-size:11px;color:var(--cream-dim)}.slot.empty{opacity:.62;border-style:dashed}.slot.empty .face{border-style:dashed;border-color:#fffaf059;box-shadow:none;display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:26px;color:var(--cream-dim)}.slot.pop{transform:scale(1.06)}.select-isles{display:flex;gap:8px;padding:0 16px;flex-wrap:wrap;justify-content:center}.isle{min-width:104px;padding:7px 12px 6px;border-radius:12px;border:1px solid var(--glass-line);background:#09283e73;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;transition:transform .25s var(--spring),border-color .2s,background .2s}.isle b{font-family:var(--num);font-size:11px;letter-spacing:.14em;color:var(--sun)}.isle.on{transform:translateY(-3px);border-color:var(--sun);background:#ffd45e2e;box-shadow:0 6px 18px #ffd45e40}.isle.locked{opacity:.35}.select-foot{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--cream-dim);flex-wrap:wrap;justify-content:center}.primary{padding:13px 28px;border-radius:999px;border:none;background:linear-gradient(180deg,#ffe7a0,#ffc25e);color:#3a2a18;font-size:16px;font-weight:900;letter-spacing:.08em;box-shadow:0 6px #c47a2e,0 10px 26px #ffb45a66;transition:transform .15s var(--spring),box-shadow .15s}.primary .kbd{border-color:#3a2a1866;background:#ffffff73}.primary:hover,.primary:focus-visible{transform:translateY(-2px);outline:none}.primary:active{transform:translateY(4px);box-shadow:0 2px #c47a2e,0 4px 12px #ffb45a66}#hud{position:absolute;inset:0;pointer-events:none}.hud-left{position:absolute;top:16px;left:20px}.hud-score .lbl{font-family:var(--num);font-size:11px;letter-spacing:.3em;color:var(--sun);text-shadow:0 1px 6px rgba(5,25,40,.8)}.hud-score .num{font-family:var(--num);font-weight:700;font-size:38px;line-height:1;text-shadow:0 2px 12px rgba(5,25,40,.8);transition:transform .15s var(--spring)}.hud-score .num.bump{transform:scale(1.15)}.hud-score .hi{font-family:var(--num);font-size:12px;color:var(--cream-dim);margin-top:2px;text-shadow:0 1px 6px rgba(5,25,40,.8)}.hud-center{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.clock{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--glass);backdrop-filter:blur(8px)}.clock svg{position:absolute;inset:0;transform:rotate(-90deg)}.clock .track{fill:none;stroke:#ffffff24;stroke-width:3.4}.clock .fill{fill:none;stroke:var(--sun);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke .3s}.clock span{font-family:var(--num);font-weight:700;font-size:25px;letter-spacing:.02em;text-shadow:0 2px 8px rgba(5,25,40,.6)}.clock.hurry .fill{stroke:var(--danger)}.clock.hurry span{color:#ffd0c8;animation:tickPulse 1s ease-in-out infinite}.clock b{position:absolute;bottom:-8px;font-family:var(--num);font-size:14px;font-weight:700;color:var(--danger);opacity:0;text-shadow:0 1px 6px rgba(5,25,40,.8)}.clock b.good{color:#8df08a}.clock b.show{animation:penalty 1.2s var(--ease)}@keyframes penalty{0%{opacity:0;transform:translateY(-6px) scale(.6)}15%{opacity:1;transform:translateY(4px) scale(1.25)}70%{opacity:1;transform:translateY(8px) scale(1)}to{opacity:0;transform:translateY(14px)}}@keyframes tickPulse{50%{transform:scale(1.12)}}.clock.shake{animation:clockShake .4s}@keyframes clockShake{20%{transform:translate(-4px) rotate(-4deg)}40%{transform:translate(4px) rotate(4deg)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}#hud-stage{white-space:nowrap;font-family:var(--num);font-size:11px;letter-spacing:.18em;color:var(--cream);padding:3px 12px;border-radius:999px;background:#09283e80}.hud-right{position:absolute;top:16px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.foes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:220px;padding:8px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(8px)}.foes i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--fc, #ff8fa0) 13% 100%);box-shadow:inset -2px -3px #00000029;transition:transform .4s var(--spring),opacity .4s,filter .4s}.foes i.gone{opacity:.22;transform:scale(.6) translateY(4px);filter:grayscale(1)}.foes i.reserve{background:transparent;box-shadow:inset 0 0 0 2px var(--fc, #ff8fa0);opacity:.55}.foes i.doomed{animation:doomed .3s ease-in-out infinite alternate}@keyframes doomed{to{transform:translateY(-3px) scale(1.1);box-shadow:0 0 10px var(--danger)}}#floaters{position:absolute;inset:0;overflow:hidden}.floater{position:absolute;left:0;top:0;font-family:var(--num);font-weight:700;font-size:18px;white-space:nowrap;text-shadow:0 2px 0 rgba(8,50,80,.6),0 0 12px rgba(5,25,40,.6);will-change:transform,opacity}.floater.big{font-size:30px;color:#fff3b8}.floater.huge{font-size:46px;color:#fff;text-shadow:0 3px 0 #e2505a,0 0 24px rgba(255,140,120,.9)}.floater.small{font-size:14px;color:var(--cream-dim)}.floater.jp{font-family:var(--jp);font-weight:900}.floater.bad{color:#ffb4a8}.floater.good{color:#9dff8a}.floater.alert{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ff4a3a;color:#fff;font-family:var(--jp);font-weight:900;font-size:30px;text-shadow:none;box-shadow:0 0 0 4px #ffffffe6,0 6px 22px #ff3c2899;animation:alertPulse .35s ease-in-out infinite alternate}@keyframes alertPulse{to{box-shadow:0 0 0 7px #fff9,0 6px 30px #ff3c28e6}}.floater.tip{font-family:var(--jp);font-size:14px;font-weight:700;padding:5px 12px;border-radius:999px;background:#09283ec7;border:1px solid rgba(255,212,94,.6);color:var(--sun);text-shadow:none}.floater.count{font-size:24px;padding:2px 12px 3px;border-radius:999px;background:#ff4a3ae0;color:#fff;text-shadow:none;box-shadow:0 4px 14px #ff4a3a73}.floater.count.self{background:#ffaa1eeb}.floater.count.big-no{background:#5a687ae6;font-size:16px}#banner{white-space:nowrap;position:absolute;left:50%;top:24%;transform:translate(-50%,-50%) scale(.8);text-align:center;opacity:0;transition:opacity .3s,transform .4s var(--spring)}#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#banner b{display:block;font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:.1em;text-shadow:0 3px 0 rgba(8,50,80,.55),0 0 30px rgba(255,200,120,.7)}#banner small{display:block;margin-top:4px;font-size:14px;letter-spacing:.14em;color:var(--cream);text-shadow:0 1px 8px rgba(5,25,40,.9)}#banner.danger b{color:#ffd2c8;text-shadow:0 3px 0 #a82a2a,0 0 30px rgba(255,80,60,.8)}#help{position:absolute;left:50%;bottom:18px;transform:translate(-50%);display:flex;gap:18px;padding:9px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);font-size:12.5px;white-space:nowrap;transition:opacity .8s;backdrop-filter:blur(8px)}#help.fade{opacity:0}body.touch #help{display:none}#intro{pointer-events:none!important}.intro-card{text-align:center}.intro-num{font-family:var(--num);font-weight:600;font-size:14px;letter-spacing:.5em;color:var(--sun);text-shadow:0 1px 8px rgba(5,25,40,.9)}.intro-name{margin:6px 0 2px;font-size:clamp(36px,6vw,68px);font-weight:900;letter-spacing:.12em;text-shadow:0 4px 0 rgba(8,50,80,.5),0 0 34px rgba(0,30,50,.6)}.intro-en{font-family:var(--num);font-size:13px;letter-spacing:.5em;color:var(--cream-dim)}.intro-hint{margin-top:18px;display:inline-block;padding:8px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);font-size:15px;letter-spacing:.06em}#intro.show .intro-name{animation:introIn .8s var(--spring) both}#intro.show .intro-hint{animation:introIn .8s var(--ease) both .25s}@keyframes introIn{0%{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}.card{min-width:min(420px,92vw);padding:26px 30px 24px;border-radius:26px;background:#09283eb8;border:1px solid var(--glass-line);backdrop-filter:blur(14px);text-align:center;box-shadow:0 30px 80px #00142880}.card h2{margin:0 0 14px;font-size:clamp(26px,3.6vw,36px);font-weight:900;letter-spacing:.08em}.screen.show .card{animation:cardIn .6s var(--spring) both}@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}.menu{display:flex;flex-direction:column;gap:10px;align-items:stretch}.menu button:not(.primary),.again{padding:11px 22px;border-radius:999px;border:1px solid var(--glass-line);background:#ffffff0f;font-size:14px;font-weight:700}.res-tip{margin:-6px 0 14px;font-size:14px;color:var(--sun)}.res-tip:empty{display:none}.res-stars{display:flex;justify-content:center;gap:18px;margin:4px 0 16px}.rs{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;font-size:12px;line-height:1.4;color:var(--cream-dim)}.rs i{width:54px;height:54px;background:#ffffff29;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:background .3s,transform .5s var(--spring)}.rs.on i{background:radial-gradient(circle at 40% 35%,#fffbe6,#ffd45e 45%,#f29b2c);transform:scale(1.12) rotate(-8deg);filter:drop-shadow(0 0 12px rgba(255,212,94,.9))}.rs.on span{color:var(--cream)}.rs b{color:var(--sun)}.stats{display:grid;grid-template-columns:1fr auto;gap:6px 26px;margin:0 auto 18px;max-width:320px;text-align:left;font-size:14px}.stats dt{color:var(--cream-dim)}.stats dd{margin:0;font-family:var(--num);font-weight:600;text-align:right}.stats .total{margin-top:6px;padding-top:8px;border-top:1px solid var(--glass-line);font-size:18px;color:var(--cream)}.stats dd.total{font-size:24px;color:var(--sun)}.new{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:var(--coral);color:#fff;font-family:var(--num);font-size:11px;vertical-align:2px;animation:tickPulse .9s ease-in-out infinite}.res-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}#touch{position:absolute;inset:0;display:none;pointer-events:none}body.touch.playing #touch{display:block;pointer-events:auto}.stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#09283e4d;opacity:0;transition:opacity .2s}.stick.on{opacity:1}.knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fffaf0d9}.tbtn{position:absolute;width:86px;height:86px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#09283e73;font-size:18px;font-weight:900;backdrop-filter:blur(6px)}.tbtn.cut{right:26px;bottom:34px;background:#ff7a6b8c}.tbtn.jump{right:124px;bottom:22px;width:70px;height:70px;font-size:15px}.tbtn.on{transform:scale(.92);background:#ffd45e99}.tpause{position:absolute;top:112px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);display:flex;gap:5px;align-items:center;justify-content:center}.tpause i{width:4px;height:14px;border-radius:2px;background:var(--cream)}#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .5s}#flash.on{opacity:.5;transition:none}@media(max-width:720px){.logo{top:9vh}.title-sound{top:12px;right:12px;padding:6px 10px;font-size:11px}body.touch.solo .slot:not(:first-child){display:none}.hud-score .num{font-size:28px}.clock{width:66px;height:66px}.clock span{font-size:19px}.foes{max-width:120px}.foes i{width:14px;height:14px}.slot{width:140px}}@media(prefers-reduced-motion:reduce){.logo-word b.sunk{animation:logoIn .9s var(--spring) both .2s}}