:root{--ink:#3b2a24;--sub:#6d665f;--teal:#14a39a;--teal-ink:#0b5552;--paper:#fffaf0;--line:#d9d2c8;--gold:#f6c13b;--danger:#c8287a}html,body{height:100%;color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:#fff;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}#app{position:fixed;inset:0;overflow:hidden}#app.playing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}button{font:inherit;color:inherit;touch-action:manipulation}canvas.pixel{image-rendering:pixelated;image-rendering:crisp-edges}.stage{touch-action:none;position:absolute;top:0;left:0}.songbar{top:6px;left:calc(var(--scene-x,0px) + 14px);width:calc(var(--scene-w,390px) - 28px);pointer-events:none;--done:0%;height:30px;position:absolute}.songbar .staff{height:13px;position:relative}.songbar .staff>i{background:linear-gradient(to right, #3b2a24bf var(--done), #3b2a2440 var(--done));height:1px;position:absolute;left:0;right:0}.songbar .part{box-sizing:border-box;border-left:1.2px solid #3b2a24b3;height:13px;position:absolute;top:0}.songbar .part span{text-align:center;color:#3b2a24bf;text-shadow:0 0 2px #fff,0 0 3px #fff;white-space:nowrap;font-size:9.5px;font-weight:700;position:absolute;top:15px;left:0;right:0}.songbar .marker{background:var(--teal);border:1.2px solid var(--teal-ink);border-radius:50%;width:10px;height:8px;margin-left:-5px;transition:left .2s linear;position:absolute;top:2px;transform:rotate(-20deg)}.banner{left:50%;top:calc(var(--scene-h,520px) * .18);white-space:pre-line;width:max-content;max-width:calc(var(--scene-w,390px) - 32px);box-sizing:border-box;text-align:center;opacity:0;pointer-events:none;background:#ffffffeb;border-radius:999px;padding:8px 16px;font-size:16px;font-weight:800;line-height:1.35;transition:opacity .25s,transform .25s;position:absolute;transform:translate(-50%,-6px);box-shadow:0 2px 10px #3b2a242e}.banner.show{opacity:1;transform:translate(-50%)}.banner.gold{color:#6a4a00;background:linear-gradient(#fff6d0,#ffe58a);font-size:18px}.banner.small{padding:5px 12px;font-size:13px}.banner.boss{top:calc(var(--scene-h,520px) * .18 + 18px);color:#8a1f55;background:#ffecf4f2}.banner.part{color:#8a3a10;background:linear-gradient(#fff0e0,#ffd2a8)}.banner.part.sabi{color:#8a1f55;background:linear-gradient(#ffe6f1,#ffb8d6);font-size:18px}.bossbar{top:40px;left:calc(var(--scene-x,0px) + 40px);width:calc(var(--scene-w,390px) - 80px);pointer-events:none;text-align:center;position:absolute}.bossbar[hidden]{display:none}.bossbar span{color:#8a1f55;text-shadow:0 0 2px #fff,0 0 3px #fff;font-size:11px;font-weight:800;display:block}.bossbar .gauge{background:#3b2a242e;border:1.2px solid #3b2a2499;border-radius:999px;height:7px;margin-top:2px;overflow:hidden}.bossbar .fill{background:linear-gradient(#e0559a,#b8326f);width:100%;height:100%;transition:width .2s linear}.bossbar.tired .fill{background:linear-gradient(#ffe58a,#f6c13b)}.bossbar.odai span{color:var(--teal-ink)}.bossbar.odai .fill{background:linear-gradient(#5fd3c8,#14a39a)}.hint{left:0;right:0;top:calc(var(--scene-h,520px) + 24px);text-align:center;color:var(--teal-ink);opacity:0;pointer-events:none;font-size:15px;font-weight:800;position:absolute}.hint.show{opacity:1;animation:1.2s infinite blink}@keyframes blink{50%{opacity:.45}}.finale{left:var(--scene-x,0px);width:var(--scene-w,390px);top:calc(var(--scene-h,520px) * .07);text-align:center;pointer-events:none;z-index:20;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute}.fin-title{letter-spacing:.04em;color:#ffd23f;text-shadow:2px 0 #7a4f00,-2px 0 #7a4f00,0 2px #7a4f00,0 -2px #7a4f00,2px 2px #7a4f00,-2px 2px #7a4f00,2px -2px #7a4f00,-2px -2px #7a4f00,0 5px #7a4f00,0 7px 10px #3b2a2459;font-size:50px;font-weight:900;line-height:1.1;animation:.55s cubic-bezier(.2,1.6,.4,1) both fin-pop}.finale.down .fin-title{color:#fff;text-shadow:2px 0 #6d665f,-2px 0 #6d665f,0 2px #6d665f,0 -2px #6d665f,0 4px 8px #3b2a244d;font-size:36px;animation:.6s ease-out both fin-drop}.fin-sub,.fin-applause{background:#ffffffe6;border-radius:999px;padding:4px 14px;font-weight:800;animation:.35s ease-out both fin-in;box-shadow:0 2px 8px #3b2a2429}.fin-sub{font-size:15px;animation-delay:.25s}.fin-applause{font-size:16px;animation-delay:.45s}.fin-applause b{font-variant-numeric:tabular-nums;color:var(--teal-ink);font-size:28px}@keyframes fin-pop{0%{opacity:0;transform:scale(.3)rotate(-6deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes fin-drop{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}@keyframes fin-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.fin-title,.finale.down .fin-title,.fin-sub,.fin-applause{animation:none}}.pause{right:12px;bottom:max(12px, env(safe-area-inset-bottom));border:1.5px solid var(--line);z-index:5;background:#fff;border-radius:50%;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;display:flex;position:absolute}.pause[hidden]{display:none}.pause span{background:#8a8580;border-radius:2px;width:4px;height:16px}.overlay{z-index:30;background:#ffffff8c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.ov-box{text-align:center;background:#fff;border-radius:18px;flex-direction:column;gap:10px;width:min(320px,100% - 40px);padding:20px;display:flex;box-shadow:0 2px 14px #3b2a2438}.ov-box b{font-size:19px}.ov-box small{color:var(--sub)}.ov-box button{border:1.5px solid var(--line);background:#fff;border-radius:12px;min-height:48px;font-size:14px}.ov-box button.big{border-color:var(--teal-ink);background:#e3f4f1;font-size:16px;font-weight:800}.lvup-intro{left:var(--scene-x,0px);width:var(--scene-w,390px);top:calc(var(--scene-h,520px) * .12);text-align:center;letter-spacing:.03em;color:#ffd23f;text-shadow:2px 0 #7a4f00,-2px 0 #7a4f00,0 2px #7a4f00,0 -2px #7a4f00,2px 2px #7a4f00,-2px 2px #7a4f00,2px -2px #7a4f00,-2px -2px #7a4f00,0 4px #7a4f00,0 6px 10px #3b2a244d;pointer-events:none;z-index:19;font-size:40px;font-weight:900;animation:.4s cubic-bezier(.2,1.6,.4,1) both fin-pop;position:absolute}.cards{left:50%;bottom:max(8px, env(safe-area-inset-bottom));z-index:20;flex-direction:column;gap:6px;width:min(100% - 12px,560px);display:flex;position:absolute;transform:translate(-50%)}.cards[hidden]{display:none}.cards-head{align-items:center;gap:8px;padding:0 4px;display:flex}.cards-title{text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 9px #fff;flex:1;font-size:21px;font-weight:800;line-height:1.1}.cards-title small{color:var(--sub);margin-top:4px;font-size:11.5px;font-weight:700;display:block}.seat-ring{background:#fffffff2;border-radius:50%;box-shadow:0 1px 4px #3b2a242e}.reroll{border:1.5px solid var(--line);background:#fff;border-radius:24px;height:48px;padding:0 12px;font-size:13px;font-weight:700;line-height:1.15}.reroll:disabled{opacity:.5}.reroll small{color:var(--sub);font-size:10px;font-weight:500;display:block}.card{border:2px solid var(--teal-ink);background:repeating-linear-gradient(to bottom, transparent 0 17px, #3b2a2417 17px 18px) 0 8px / 100% 90px no-repeat, var(--paper);text-align:left;cursor:pointer;border-radius:14px;align-items:center;gap:10px;height:88px;padding:0 10px 0 8px;display:flex;box-shadow:0 2px 6px #3b2a2429}.cards-head{animation:.25s ease-out backwards fin-in}.cards>.card{animation:.3s cubic-bezier(.2,1.3,.4,1) backwards card-in}.cards>.card:nth-child(3){animation-delay:50ms}.cards>.card:nth-child(4){animation-delay:.1s}@keyframes card-in{0%{opacity:0;transform:translateY(40px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.lvup-intro,.cards-head,.cards>.card{animation:none}}.card.rec{border-color:#c99400;box-shadow:0 0 0 3px #f6c13b73,0 2px 6px #3b2a2429}.card:active{transform:scale(.985)}.card-icon{background:#fff;border:1px solid #e3dccf;border-radius:12px;flex:none;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative}.card-icon.tech{color:var(--teal-ink);font-size:18px;font-weight:800}.card-aim{white-space:nowrap;background:var(--teal);color:#fff;border-radius:8px;padding:1px 6px;font-size:10px;font-weight:800;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.card-text{flex:1;min-width:0}.card-main{font-size:16.5px;font-weight:800;line-height:1.25}.card-sub{color:var(--sub);margin-top:4px;font-size:12px}.card-sub .key{text-align:center;border:1px solid #c9c1b5;border-radius:4px;min-width:15px;margin-right:5px;font-size:10px;line-height:14px;display:inline-block}.card-sub em{color:#8a5a00;background:#fdf0c4;border-radius:6px;margin-left:6px;padding:0 5px;font-size:10.5px;font-style:normal;font-weight:700;display:inline-block}.card>canvas:last-child{flex:none}.screen{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:linear-gradient(#fffaf0,#f3f8e8 70%,#e9f3d9);padding:18px 16px 40px;position:absolute;inset:0;overflow-y:auto}.screen>*{max-width:560px;margin-left:auto;margin-right:auto}.screen h1{text-align:center;margin:8px auto 6px;font-size:30px;line-height:1.2}.screen h1 small{color:var(--sub);font-size:14px}.screen h2{margin:6px auto 8px;font-size:22px}.screen h3{color:var(--sub);margin:0 0 8px;font-size:13px}.proto-tag{color:#8a5a00;background:#fdf0c4;border-radius:999px;width:fit-content;margin:0 auto;padding:3px 10px;font-size:11px;font-weight:700}.title-back{margin-top:-10px;margin-bottom:0;font-size:14px}.title-back a{min-height:44px;color:var(--sub);padding:10px 2px;text-decoration:none;display:inline-block}.title-hero{width:min(100%,300px);margin:0 auto 4px;display:block}.title-hero img{aspect-ratio:1;border:3px solid #3b2a24;border-radius:16px;width:100%;height:auto;display:block}.vh{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lead{color:var(--sub);font-size:14px;line-height:1.7}.title .lead{text-align:center}.note{color:var(--sub);text-align:center;font-size:11.5px}.warn{color:var(--danger);font-size:13px}.menu{flex-direction:column;gap:8px;margin-top:14px;display:flex}.menu button,.screen>button{border:1.5px solid var(--line);background:#fff;border-radius:14px;width:100%;min-height:48px;font-size:15px;font-weight:700;display:block}.menu button.big,.screen>button.big{border-color:var(--teal-ink);background:#e3f4f1;min-height:56px;font-size:17px;font-weight:800}.menu button.danger{color:var(--danger);font-size:13px;font-weight:500}.row{margin:0 auto 14px}.row-label{margin:0 0 6px;font-size:13px;font-weight:700}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{border:1.5px solid var(--line);background:#fff;border-radius:10px;flex:auto;min-height:44px;padding:0 10px;font-size:13px}.seg button.on{border-color:var(--teal-ink);background:#e3f4f1;font-weight:800}.song-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.song{border:1.5px solid var(--line);text-align:left;background:#fff;border-radius:12px;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px 10px;display:flex}.venue-row{margin:0 0 8px}.venue-name{color:var(--sub);margin:0 2px 4px;font-size:11.5px;font-weight:800}.venue-row.suite .venue-name{color:#7a4f00}.song.wide{width:100%}.song.on{border-color:var(--teal-ink);background:#e3f4f1}.song.locked{color:var(--sub);background:#f6f3ee;border-style:dashed}.song-name{font-size:14px;font-weight:800}.song-sub{color:var(--sub);font-size:10.5px}.song-boss{color:#8a1f55;font-size:10.5px;font-weight:800}.boss-line{color:#8a1f55;margin-top:4px;font-weight:800}.moments-line{color:var(--teal-ink);margin-top:4px;font-size:13px;font-weight:700}.unlock{color:#6a4a00;background:linear-gradient(#fff6d0,#ffe58a);border-radius:12px;margin-top:12px;padding:10px 12px;font-weight:800}.inst-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.inst{border:1.5px solid var(--line);background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:2px;min-height:88px;padding:6px 2px;display:flex}.inst.on{border-color:var(--teal-ink);background:#e3f4f1}.inst-name{font-size:12px;font-weight:700}.inst-lv{color:var(--sub);font-size:10.5px}.inst.locked{background:#f6f3ee;border-style:dashed}.inst.locked canvas{opacity:.35;filter:grayscale()}.inst.locked .inst-name{color:var(--sub)}.inst-tag{color:#7a4f00;font-size:10px;font-weight:700}.row-note{color:var(--sub);margin:6px 2px 0;font-size:11.5px;line-height:1.5}.newly{background:#e3f4f1;border-radius:14px;margin-top:14px;padding:12px}.newly h3{margin:0 0 8px}.newly-list{flex-wrap:wrap;gap:8px 14px;display:flex}.newly-item{align-items:center;gap:6px;font-weight:700;display:inline-flex}.scores{background:#fff;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.8;box-shadow:0 1px 6px #3b2a241a}.big-num{font-size:15px}.big-num b{font-size:30px}.big-num em,.keiko-body em{color:#8a5a00;background:#fdf0c4;border-radius:8px;margin-left:8px;padding:1px 8px;font-size:12px;font-style:normal;font-weight:800}.keiko{margin-top:14px}.keiko-row{background:#fff;border-radius:12px;align-items:center;gap:10px;margin-bottom:6px;padding:8px 10px;display:flex}.keiko-body{flex:1;min-width:0;font-size:13px}.keiko-body small{color:var(--sub)}.meter{background:#ece6db;border-radius:4px;height:8px;margin:5px 0 3px;overflow:hidden}.meter i{background:linear-gradient(90deg,#f6c13b,#e0a020);height:100%;animation:.9s ease-out grow;display:block}@keyframes grow{0%{width:0}}.lv{color:var(--sub);font-size:12px}.reward{background:#fff6d0;border-radius:14px;margin-top:14px;padding:12px}.thick-grid{grid-template-columns:1fr;gap:10px;display:grid}.thick-cell{background:#fff;border-radius:12px;padding:8px}.thick-name{margin-bottom:4px;font-size:13px;font-weight:700}.thick-cell canvas{border-radius:8px;max-width:100%;display:block}