body.playing{--play-unit:clamp(1px,.052083vw,2.5px)}
body.playing .songbar{padding:calc(10 * var(--play-unit));gap:calc(8 * var(--play-unit));border-radius:calc(10 * var(--play-unit))}
body.playing .songbar h1{font-size:calc(16 * var(--play-unit));line-height:1.35;overflow-wrap:anywhere}
body.playing .songbar .song-item-badge{font-size:calc(12 * var(--play-unit));padding:calc(3 * var(--play-unit)) calc(8 * var(--play-unit))}
body.playing .songbar .icon-button{width:calc(36 * var(--play-unit));height:calc(36 * var(--play-unit));min-width:0;font-size:calc(20 * var(--play-unit))}
body.playing:not(.flat-note-mode) .songbar{width:calc(300 * var(--play-unit));max-width:calc(100vw - 28px)}
#battleVs{--battle-scale:1;gap:calc(8px * var(--battle-scale))}
#battleVs .bvs-player{width:calc(180px * var(--battle-scale));min-width:0;max-width:46%;flex:1}
#battleVs .bvs-char canvas{width:100%!important}
#battleVs .bvs-name{font-size:calc(12px * var(--battle-scale))}
#battleVs .bvs-score{font-size:calc(20px * var(--battle-scale))}
#battleVs .bvs-meta{font-size:calc(11px * var(--battle-scale))}
#battleVs .bvs-vs{font-size:calc(28px * var(--battle-scale))}
#battleVs .bvs-hp{height:calc(7px * var(--battle-scale))}
#battleVs>#battleItemHud{padding:calc(10px * var(--battle-scale));font-size:calc(13px * var(--battle-scale));top:calc(100% + 12px * var(--battle-scale))}
#battleVs .bi-buttons{gap:calc(6px * var(--battle-scale))}
#battleVs .bi-buttons button{min-height:calc(44px * var(--battle-scale));font-size:calc(12px * var(--battle-scale));padding:calc(5px * var(--battle-scale))}
#battleVs .bi-status{min-height:calc(36px * var(--battle-scale))}
#battleVs .bi-avatar-marks{width:90%;top:30%}
#battleVs .bi-avatar-marks span{font-size:calc(15px * var(--battle-scale));padding:calc(5px * var(--battle-scale)) calc(9px * var(--battle-scale))}
body.playing .bi-playfield-marks{width:calc(220 * var(--play-unit))}
body.playing .bi-playfield-marks span{font-size:calc(13 * var(--play-unit))}

/* Remove the page gutter above the highway during gameplay. */
body.playing .layout{padding-top:0;margin-top:0}

/* HE hides gameplay HUD without changing its layout or normal hidden states.
   SW removes this override only after the reveal completes. */
body.playing.track-hud-hidden :is(.center-feedback,.overdrive-hud,.overdrive-popup,.songbar,#gameAccountAvatar,#battleVs,#battleItemHud,#healthBar,.game-footer){visibility:hidden!important;pointer-events:none!important}

.songbar .song-progress-row{display:flex;align-items:center;gap:calc(8 * var(--play-unit,1px));width:100%;min-width:0}
.songbar .song-progress-row .progress{flex:1;min-width:0;width:auto;margin-top:0}
.songbar .song-duration{flex:none;white-space:nowrap;font-size:calc(11 * var(--play-unit,1px));line-height:1.2;color:#dce9fa;font-variant-numeric:tabular-nums}
body:not(.playing) .songbar .song-duration{display:none}