.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.topbar { position: absolute; top: max(8px, var(--safe-top)); left: 50%; display: flex; align-items: center; transform: translateX(-50%); }
.team-status { width: clamp(150px, 24cqw, 290px); height: 46px; padding: 7px 13px; background: rgba(4,14,15,.82); border: 1px solid var(--line); }
.team-status span, .team-status b { font-size: 9px; letter-spacing: .12em; }
.team-status span { display: inline-block; max-width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-status b { float: right; color: var(--muted); }
.team-status i, .player-bars > i { position: relative; display: block; height: 5px; margin-top: 7px; overflow: hidden; background: rgba(255,255,255,.08); }
.team-status em, .player-bars em, .player-bars u { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--blue); transition: width .2s; }
.team-status--red em { background: var(--red); }
.match-clock { width: 78px; height: 58px; padding: 7px 0; text-align: center; background: #071110; border: 1px solid var(--line); }
.match-clock strong { display: block; font-size: 17px; }
.match-clock small { color: var(--gold); font-size: 8px; letter-spacing: .1em; }
.network { position: absolute; top: max(70px, calc(var(--safe-top) + 62px)); left: max(10px, var(--safe-left)); display: flex; gap: 7px; align-items: center; padding: 6px 9px; border: 1px solid var(--line); background: rgba(4,14,15,.74); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.network i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px currentColor; }
.network.online i { background: #60ef9a; }
.network.poor i { background: var(--red); }
#minimap { position: absolute; top: max(100px, calc(var(--safe-top) + 92px)); left: max(10px, var(--safe-left)); width: 168px; height: 94px; border: 1px solid var(--line); background: rgba(2,10,11,.82); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.player-bars { position: absolute; left: 50%; bottom: max(15px, var(--safe-bottom)); width: min(310px, 36cqw); padding: 9px 12px; transform: translateX(-50%); background: rgba(4,14,15,.82); border: 1px solid var(--line); }
.player-bars div { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .08em; }
.player-bars b { color: var(--muted); font-weight: 600; }
.player-bars > i { height: 7px; }
.player-bars u { top: 0; bottom: auto; height: 2px; background: #f1fbff; text-decoration: none; box-shadow: 0 0 7px #d7f8ff; }
.player-bars .xp { height: 3px; margin-top: 4px; }
.player-bars .xp em { background: var(--violet); }
.build-summary { display: block; margin-top: 5px; font-size: 8px; color: var(--muted); line-height: 1.35; }
.relic-status { display: block; color: var(--violet); font-size: 9px; }
.objective-status { position: absolute; top: 202px; left: max(10px, var(--safe-left)); padding: 4px 5px; font-size: 8px; color: #c4d6c5; background: #071414c9; }
.skill-guide { position: absolute; bottom: -8px; right: 0; width: 204px; font-size: 8px; color: #c3d1c7; text-align: center; }
.boss-power-status { position: absolute; left: 50%; bottom: calc(100% + 7px); padding: 4px 9px; transform: translateX(-50%); border: 1px solid rgba(245,198,106,.5); border-radius: 99px; color: #ffe09b; background: rgba(20,13,3,.86); font-size: 8px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; box-shadow: 0 0 18px rgba(245,198,106,.2); }
.announcement { position: absolute; top: 23%; left: 50%; transform: translate(-50%,-8px); opacity: 0; padding: 9px 16px; background: rgba(4,14,15,.8); border: 1px solid var(--line); font-size: 13px; font-weight: 900; letter-spacing: .12em; transition: .2s; }
.announcement.on { opacity: 1; transform: translate(-50%,0); }

.controls { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.stick { position: absolute; left: max(22px, var(--safe-left)); bottom: max(24px, var(--safe-bottom)); width: 126px; height: 126px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.04) 0 28%, rgba(5,17,18,.6) 29%); pointer-events: auto; touch-action: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(177,224,208,.14); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.stick span { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); color: rgba(255,255,255,.42); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.action-cluster { position: absolute; right: max(18px, var(--safe-right)); bottom: max(20px, var(--safe-bottom)); width: 230px; height: 156px; pointer-events: none; }
.stick--aim { left: auto; right: 0; bottom: 0; width: 126px; height: 126px; }
.skill { position: absolute; z-index: 2; width: 64px; height: 64px; padding: 0; border: 1px solid rgba(245,198,106,.46); border-radius: 50%; background: radial-gradient(circle, rgba(245,198,106,.18), rgba(5,17,18,.9)); pointer-events: auto; touch-action: none; }
#skill-1 { left: 15px; bottom: 68px; }
#skill-2 { left: 0; bottom: 0; }
.skill b { display: block; color: var(--gold); font-size: 18px; }
.skill span { display: block; width: 84px; margin-left: -11px; color: var(--muted); font-size: 7px; font-weight: 800; white-space: nowrap; }
.skill i { position: absolute; inset: 0; border-radius: 50%; background: rgba(2,8,9,.74); transform-origin: bottom; transform: scaleY(0); }
.skill:active { transform: scale(.93); }
.skill b, .skill span { position: relative; z-index: 1; }
.skill.on-cooldown { opacity: .76; }
.skill.is-aiming { border-color: var(--blue); box-shadow: 0 0 16px #4ee6e055; }
.skill.is-cancelling { border-color: var(--red); box-shadow: 0 0 16px #ff6b7255; }

.choice-stack { position: absolute; z-index: 25; top: max(168px, calc(var(--safe-top) + 160px)); right: max(10px, var(--safe-right)); width: min(292px, 34cqw); display: grid; gap: 8px; pointer-events: none; }
.choice-tray { position: relative; width: 100%; padding: 9px; border: 1px solid rgba(245,198,106,.4); background: rgba(4,14,15,.92); box-shadow: 0 14px 36px rgba(0,0,0,.4); backdrop-filter: blur(12px); pointer-events: auto; animation: choice-in .22s ease-out; }
.choice-tray > p { margin: 0 0 7px; color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.choice-tray > p span { float: right; min-width: 20px; text-align: center; color: #071010; background: var(--gold); border-radius: 10px; }
.choice-tray > div { display: grid; grid-template-columns: 1fr; gap: 5px; }
.choice-tray button.option { min-height: 46px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: linear-gradient(100deg, rgba(245,198,106,.12), rgba(255,255,255,.035)); text-align: left; cursor: pointer; }
.choice-tray button.option:active { transform: scale(.98); border-color: var(--gold); }
.choice-tray button.option > i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(245,198,106,.55); border-radius: 50%; color: var(--gold); background: radial-gradient(circle, rgba(245,198,106,.2), rgba(4,14,15,.8)); font-style: normal; font-weight: 900; }
.choice-tray button.option strong { display: block; font-size: 10px; }
.choice-tray button.option small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.2; }
.choice-tray .chip { display: block; min-height: 28px; margin: 7px 0 0 auto; }
.choice-tray--relic { border-color: rgba(189,145,255,.5); }
.choice-tray--relic > p { color: var(--violet); }
@keyframes choice-in { from { opacity: 0; transform: translateX(16px); } }