*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#cfd4da;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:28px 32px}#title h1{font-size:20px;font-weight:600;letter-spacing:.12em;color:#e8ecef;text-shadow:0 1px 8px rgba(0,0,0,.8)}#title p{margin-top:6px;font-size:12px;letter-spacing:.06em;color:#8d959e}#legend{position:absolute;right:32px;bottom:44px;text-align:right}#legend-toggle{padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#080a0e9e;color:#8d959e;font-size:11.5px;letter-spacing:.08em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s,border-color .2s}#legend-toggle:hover{color:#e8ecef;border-color:#ffffff59}#legend.open #legend-toggle{color:#e8ecef}#legend-body{display:none;width:300px;margin-top:10px;padding:16px 18px;text-align:left;background:#080a0e9e;border:1px solid rgba(255,255,255,.08);border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#legend.open #legend-body{display:block}.legend-item{display:flex;align-items:center;gap:10px;margin-bottom:10px}.legend-item:last-child{margin-bottom:0}.legend-item svg{width:60px;height:16px;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}.legend-item strong{display:block;font-size:12px;color:#e8ecef}.legend-item span{display:block;font-size:10.5px;line-height:1.5;color:#8d959e}#status{align-self:flex-end;font-size:10px;letter-spacing:.08em;color:#59616a}#loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000;transition:opacity .7s ease}#loading.done{opacity:0;pointer-events:none}#loading p{font-size:12px;letter-spacing:.14em;color:#6b747d}#loading .spinner{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#ffffff8c;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#combo-toggle{position:absolute;bottom:44px;left:32px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#080a0e9e;color:#8d959e;font-size:11.5px;letter-spacing:.08em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s,border-color .2s,box-shadow .2s}#combo-toggle:hover{color:#e8ecef;border-color:#ffffff59}#combo-toggle.on{color:#ffd75e;border-color:#ffd75e99;box-shadow:0 0 14px #ffbe3c40}#hit-flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 55% 55%,rgba(255,240,210,.5),transparent 65%);opacity:0;z-index:5}#hit-flash.hit{animation:hit-flash-anim .28s ease-out}@keyframes hit-flash-anim{0%{opacity:.55}to{opacity:0}}#combo{position:absolute;top:24%;right:6%;text-align:right;transform:rotate(-5deg) skew(-6deg);font-style:italic;font-weight:900;-webkit-user-select:none;user-select:none}#combo[hidden]{display:none}#combo-num{display:block;font-size:84px;line-height:.95;color:#fff;-webkit-text-stroke:2px rgba(0,0,0,.8);text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 26px rgba(255,255,255,.35)}#combo-num.pop{animation:combo-pop .14s ease-out}@keyframes combo-pop{0%{transform:scale(1.35)}to{transform:scale(1)}}.combo-hits{display:block;font-size:22px;letter-spacing:.34em;color:#ffd75e;text-shadow:0 2px 0 rgba(0,0,0,.6)}#combo-best{display:block;margin-top:6px;font-size:11px;font-style:normal;letter-spacing:.2em;color:#8d959e}#combo.t1 #combo-num{color:#ffe98a}#combo.t2 #combo-num{color:#ffc44d;text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 30px rgba(255,180,60,.55)}#combo.t3 #combo-num{color:#ff8a3d;text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 34px rgba(255,120,40,.6)}#combo.t4 #combo-num{color:#ff4d4d;text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 40px rgba(255,60,60,.7)}#announce{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.announce-text{position:absolute;font-size:54px;font-weight:900;font-style:italic;letter-spacing:.06em;color:#ffe98a;-webkit-text-stroke:2px rgba(0,0,0,.85);text-shadow:0 5px 0 rgba(0,0,0,.5),0 0 34px rgba(255,200,80,.6);transform:rotate(-4deg);animation:announce-anim 1.1s ease-out forwards}.announce-text.break{color:#9fb4c8;text-shadow:0 5px 0 rgba(0,0,0,.5),0 0 24px rgba(140,180,220,.5)}@keyframes announce-anim{0%{transform:rotate(-4deg) scale(2.2);opacity:0}12%{transform:rotate(-4deg) scale(1);opacity:1}75%{opacity:1}to{transform:rotate(-4deg) scale(.96);opacity:0}}#fallback-notice{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#05070a;text-align:center;z-index:10}#fallback-notice[hidden]{display:none}#fallback-notice h2{font-size:18px;margin-bottom:12px;color:#e8ecef}#fallback-notice p{font-size:13px;color:#8d959e}#help-button{position:absolute;top:28px;right:32px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#080a0e9e;color:#aeb6bf;font-size:16px;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .2s,border-color .2s}#help-button:hover{color:#fff;border-color:#fff6}#modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20}#modal[hidden]{display:none}#modal-card{max-width:480px;margin:20px;padding:28px 32px;background:#0c0f14f5;border:1px solid rgba(255,255,255,.1);border-radius:14px}#modal-card h2{font-size:17px;letter-spacing:.1em;color:#e8ecef;margin-bottom:14px}#modal-card p{font-size:13px;line-height:1.9;color:#b9c0c7;margin-bottom:12px}#modal-card strong{color:#e8ecef;font-weight:600}#modal-card p.fine{font-size:11px;line-height:1.7;color:#79828b;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}#modal-close{margin-top:6px;padding:8px 22px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#cfd4da;font-size:13px;cursor:pointer}#modal-close:hover{background:#ffffff14}@media(max-width:720px){#hud{padding:18px 16px}#title h1{font-size:16px}#title p{font-size:10.5px}#legend{right:12px;bottom:12px}#legend-toggle{padding:6px 12px;font-size:10.5px}#legend-body{width:auto;min-width:240px;padding:8px 10px}#legend.open #legend-body{display:flex;justify-content:space-around;align-items:center;gap:6px}.legend-item{margin:0;flex-direction:column;gap:3px}.legend-item svg{width:44px;height:12px}.legend-item strong{font-size:10px;white-space:nowrap}.legend-item span{display:none}#help-button{top:18px;right:16px}#status{display:none}#combo-toggle{bottom:84px;left:16px;padding:6px 12px;font-size:10.5px}#combo{top:18%;right:16px}#combo-num{font-size:56px}.combo-hits{font-size:16px}.announce-text{font-size:30px}#modal-card{max-height:82vh;overflow-y:auto;padding:20px 22px}#modal-card p{font-size:12px;line-height:1.75}}