/* battle stage: mesh sprites, enemy bars, the rhythm lane */
#stagec { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.foe { position: absolute; width: var(--w, 70px); height: 0; transform: translateX(-50%); margin: 0; z-index: 4; pointer-events: none; }
.foe .fhp { position: absolute; left: 12%; right: 12%; bottom: 2px; top: auto; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .18); overflow: hidden; }
.foe.boss { display: none; }
.dmg.hurt { color: #ff8a9c; font-size: 15px; }

.lane { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 46px; z-index: 6; pointer-events: none; }
.lane .ltrack { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(242, 195, 91, .75), rgba(242, 195, 91, .15) 70%, transparent); }
.lane .ltarget { position: absolute; left: 54px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 16px rgba(242, 195, 91, .7), inset 0 0 10px rgba(242, 195, 91, .35); background: rgba(5, 6, 12, .45); }
.lane .ltarget.hit { animation: lhit .32s ease-out; }
@keyframes lhit { 0% { transform: scale(1.45); box-shadow: 0 0 34px #fff, inset 0 0 20px #fff; } 100% { transform: scale(1); } }
.lane .lnote { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #4fe3d0 60%, #17857a); box-shadow: 0 0 10px rgba(79, 227, 208, .9); will-change: transform; }
.lane .lnote.bar { width: 22px; height: 22px; margin-left: -11px; background: radial-gradient(circle at 35% 30%, #fff, #ffd77a 60%, #b77a1e); box-shadow: 0 0 14px rgba(242, 195, 91, 1); }
.lane .lhint { position: absolute; left: 86px; top: -16px; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .08em; white-space: nowrap; text-shadow: 0 1px 4px #000; animation: blink 1.4s infinite; }
.judge { position: absolute; left: 54px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 7; font-family: var(--latin); font-weight: 700; font-size: 16px; letter-spacing: .08em; opacity: 0; pointer-events: none; white-space: nowrap; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, .8); }
.judge.pf { color: #ffe39a; } .judge.gd { color: #4fe3d0; } .judge.ms { color: #8f8cab; }
.judge.on { animation: judge .45s var(--ease) forwards; }
@keyframes judge { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -2px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -18px) scale(1); } }
/* room for the lane under the bars */
.hpbox { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); left: auto; right: max(12px, env(safe-area-inset-right, 0px)); width: 46%; }
.wave .mv { margin-left: auto; }
.mini { height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--paper); background: rgba(5, 6, 12, .72); border: 1px solid var(--line-2); }
.wave .stn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the card header makes room for the small label above the glyph */
.cc .hd { height: 64px; place-items: end center; padding-bottom: 5px; }
.cc .new { top: 4px; }
.combo { top: 26%; }
/* story: free-standing figures; the speaker steps forward */
#story.vn .vch { bottom: 19%; height: 64%; -webkit-mask-image: none; mask-image: none; filter: brightness(.5) saturate(.75) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
#story.vn .vch.on { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); transform: scale(1.05) translateY(-6px); }
#story.vn .vch.l { left: -13%; } #story.vn .vch.r { right: -13%; }
#story.vn .vbg.cg { filter: none; inset: 0; width: 100%; height: 100%; animation: kb 12s ease-out forwards, fadein .8s; }
.judge { left: 54px; }