html,body{margin:0;padding:0;width:100%;height:100%;background:#000;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;font-family:system-ui,sans-serif;color:#fff}#app{position:fixed;inset:0}canvas{display:block;touch-action:none}#info-panel{position:fixed;top:0;left:0;right:0;z-index:50;background:#0a0a14;color:#fff;font-family:system-ui,sans-serif;padding:12px 14px;display:none;flex-direction:row;gap:14px;overflow:hidden;box-sizing:border-box;pointer-events:none}#info-panel .info-empty{color:#777;font-size:16px;align-self:center;margin:auto}#info-panel .ip-cover{flex:0 0 auto;height:min(100%,36vw);aspect-ratio:1 / 1;background:#111;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}#info-panel .ip-cover img{width:100%;height:100%;object-fit:contain;display:block}#info-panel .ip-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}#info-panel .ip-diff{display:flex;align-items:flex-end;gap:clamp(8px,1vw,14px);height:clamp(36px,5vw,62px)}#info-panel .ip-diff__label{height:clamp(22px,3vw,38px);width:auto;transform:translate(15%)}#info-panel .ip-diff__lv{height:clamp(26px,3.6vw,46px);width:auto;margin-left:clamp(2px,.3vw,5px);transform:translateY(50%)}#info-panel .ip-diff__num{height:clamp(36px,5vw,62px);width:auto;transform:translate(-50%,10%)}#info-panel .ip-title{font-size:clamp(15px,1.8vw,22px);font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#info-panel .ip-artist{font-size:clamp(11px,1.2vw,14px);color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#info-panel .ip-bpm{font-size:clamp(11px,1.1vw,14px);color:#888}#info-panel .ip-artist:empty{display:none}#info-panel .ip-record{display:flex;gap:clamp(8px,1vw,12px);align-items:center;margin-top:auto;padding-top:4px}#info-panel .ip-record--empty{color:#555;font-size:clamp(11px,1.2vw,14px);margin-top:auto;padding-top:4px}#info-panel .ip-record__rank{font-size:clamp(22px,2.6vw,32px);font-weight:900;color:#ffd24a;line-height:1}#info-panel .ip-record__col{display:flex;flex-direction:column;min-width:0}#info-panel .ip-record__score{font-family:ui-monospace,monospace;font-size:clamp(14px,1.7vw,20px);font-weight:700}#info-panel .ip-record__tag{font-size:clamp(10px,1vw,13px);color:#888}#info-panel.is-stacked{flex-direction:column;align-items:stretch;gap:10px}#info-panel.is-stacked .ip-cover{align-self:flex-start;height:auto;width:min(32vw,32vh,280px);max-width:100%}#info-panel.is-stacked .ip-right{width:100%;flex:1 1 auto;gap:6px}#info-panel.is-stacked .ip-diff{justify-content:flex-start;height:clamp(34px,11vw,86px);gap:clamp(6px,2vw,18px)}#info-panel.is-stacked .ip-diff__label{height:clamp(22px,6.8vw,50px)}#info-panel.is-stacked .ip-diff__lv{height:clamp(26px,7.8vw,58px)}#info-panel.is-stacked .ip-diff__num{height:clamp(34px,11vw,86px)}#info-panel.is-stacked .ip-title{font-size:clamp(15px,4.2vw,30px)}#info-panel.is-stacked .ip-artist{font-size:clamp(11px,2.6vw,18px)}#info-panel.is-stacked .ip-artist:empty{display:none}#info-panel.is-stacked .ip-bpm{font-size:clamp(11px,2.6vw,18px)}#info-panel.is-stacked .ip-record__rank{font-size:clamp(20px,5.5vw,40px)}#info-panel.is-stacked .ip-record__score{font-size:clamp(13px,3.6vw,24px)}#info-panel.is-stacked .ip-record__tag{font-size:clamp(9px,2.2vw,14px)}#info-panel.is-stacked .ip-record--empty{font-size:clamp(10px,2.6vw,16px)}#info-panel.is-wide .ip-right{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) max-content max-content;grid-template-rows:auto auto;column-gap:clamp(12px,1.6vw,22px);row-gap:2px;align-items:center;flex:1 1 auto;min-width:0}#info-panel.is-wide .ip-diff{grid-column:1;grid-row:1;align-self:end}#info-panel.is-wide .ip-title{grid-column:1 / span 2;grid-row:2;align-self:start;min-width:0;max-width:100%;font-size:clamp(16px,2vw,24px)}#info-panel.is-wide .ip-artist{display:none}#info-panel.is-wide .ip-bpm{grid-column:3;grid-row:1 / span 2;align-self:center;white-space:nowrap}#info-panel.is-wide .ip-record,#info-panel.is-wide .ip-record--empty{grid-column:4;grid-row:1 / span 2;align-self:center;margin:0;padding:0;white-space:nowrap}#info-panel.is-row .ip-right{flex-direction:row;align-items:center;gap:clamp(14px,1.6vw,24px);flex:1 1 auto;min-width:0}#info-panel.is-row .ip-diff{flex:0 0 auto}#info-panel.is-row .ip-title{flex:0 1 auto;min-width:0;max-width:40%;font-size:clamp(15px,1.6vw,20px)}#info-panel.is-row .ip-artist{display:none}#info-panel.is-row .ip-bpm{flex:0 0 auto;white-space:nowrap}#info-panel.is-row .ip-record,#info-panel.is-row .ip-record--empty{margin-top:0;margin-left:auto;padding-top:0;flex:0 0 auto;white-space:nowrap}#info-panel .play-wrap{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}#info-panel .play-song{display:flex;gap:8px;align-items:center;margin-bottom:4px;min-width:0}#info-panel .play-song__cover{flex:0 0 auto;width:40px;height:40px;border-radius:4px;overflow:hidden;background:#111}#info-panel .play-song__cover img{width:100%;height:100%;object-fit:cover;display:block}#info-panel .play-song__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}#info-panel .play-song__title{font-size:calc(13px * var(--ip-scale, 1));font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#info-panel .play-song__artist{font-size:calc(10px * var(--ip-scale, 1));color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#info-panel .play-song__diff{font-size:calc(10px * var(--ip-scale, 1));font-weight:700;color:#ff3da3;letter-spacing:.1em}#info-panel .play-score{font-family:ui-monospace,monospace;font-size:calc(32px * var(--ip-scale, 1));font-weight:800}#info-panel .play-rank{position:absolute;top:14px;right:18px;font-size:calc(32px * var(--ip-scale, 1));font-weight:900;color:#ffd24a}#info-panel .play-progress{height:calc(6px * var(--ip-scale, 1));border-radius:999px;background:#1d1d2e;overflow:hidden;margin-top:4px}#info-panel .play-progress__fill{height:100%;background:linear-gradient(90deg,#ff3da3,#ffd24a);transition:width .1s linear}#info-panel .play-combo{font-size:calc(12px * var(--ip-scale, 1));color:#aaa;margin-top:2px}#info-panel .play-counts{display:flex;gap:calc(10px * var(--ip-scale, 1));margin-top:4px;font-size:calc(11px * var(--ip-scale, 1));color:#888}#info-panel .jc--p{color:#4ad295}#info-panel .jc--g{color:#c0ff4a}#info-panel .jc--gd{color:#ffd24a}#info-panel .jc--po{color:#ff8a4a}#info-panel .jc--m{color:#f57}#audio-consent{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#080810e0;z-index:10000;padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#audio-consent.is-hidden{display:none}.audio-consent__card{background:#14142a;color:#fff;border:1px solid #2a2a44;border-radius:14px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:320px;text-align:center;box-shadow:0 20px 60px #00000080}.audio-consent__msg{font-size:15px;line-height:1.5;color:#e6e6f0}.audio-consent__btn{appearance:none;border:none;border-radius:999px;padding:10px 28px;font-size:14px;font-weight:700;letter-spacing:.04em;color:#0a0a14;background:linear-gradient(90deg,#ff3da3,#ffd24a);cursor:pointer;touch-action:manipulation}.audio-consent__btn:active{transform:translateY(1px)}#offline-badge{position:fixed;top:10px;right:12px;z-index:9000;padding:6px 12px;border-radius:999px;background:#1e1e2e;color:#ffd24a;font-family:ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.12em;border:1.5px solid #ffd24a;box-shadow:0 4px 14px #0006;display:none;align-items:center;gap:6px;pointer-events:none}#offline-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:#ffd24a;animation:offline-badge-pulse 1.6s ease-in-out infinite}@keyframes offline-badge-pulse{0%,to{opacity:1}50%{opacity:.3}}#rotate-hint{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0a0a14;color:#fff;z-index:9999;text-align:center;padding:24px}.rotate-hint__icon{font-size:64px;line-height:1;animation:rotate-hint-spin 1.6s ease-in-out infinite}.rotate-hint__title{font-size:22px;font-weight:700}.rotate-hint__body{font-size:14px;color:#aaa}@keyframes rotate-hint-spin{0%{transform:rotate(0)}60%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}@media (orientation: landscape) and (pointer: coarse) and (display-mode: browser){#rotate-hint{display:flex}#app{visibility:hidden}}