/* Desktop space goes to readable copy and the roster, with independent scrolling. */
#orbitalPortrait{display:none;}
.orbitalCoreIcon,.orbitalCoreHealth,.orbitalCoreWord{display:none;}
@media (min-width:1024px) and (min-height:600px){
  body:not(.touch) #lobbyShell{width:min(1600px,100%);}
  body:not(.touch) #lobby:has(#roomPane:not([hidden])) #lobbyShell{height:100%;}
  body:not(.touch) #lobby:has(#roomPane:not([hidden])) .menuSoundtrack{display:none;}
  body:not(.touch) #heroDetail{width:clamp(310px,28vw,430px);padding:16px;gap:12px;}
  body:not(.touch) #heroDetail>*{flex-shrink:0;}
  body:not(.touch) #heroDetail :is(.masteryPanel,.masterySkin){order:1;}
  body:not(.touch) #pickWrap{gap:18px;min-height:220px;}
  body:not(.touch) #heroGrid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;}
  body:not(.touch) .hcard{padding:12px 6px;gap:7px;}
  body:not(.touch) .hcard .heroPortrait{width:64px;height:64px;}
  body:not(.touch) .hcard .nm{font-size:14px;}
  body:not(.touch) .hcard .rl{font-size:11px;white-space:normal;line-height:1.4;text-align:center;}
  body:not(.touch) .hdName{font-size:20px;}
  body:not(.touch) :is(.hdTitle,.hdTag,.hdBadge,.hdStat,.hdAb .am){font-size:12px;}
  body:not(.touch) .hdStat b{width:68px;}
  body:not(.touch) .hdStat .v{width:40px;}
  body:not(.touch) .hdAb{gap:10px;padding-top:10px;}
  body:not(.touch) .hdAb .an{font-size:14px;}
  body:not(.touch) .hdAb .ad{font:15px/1.5 var(--hud-font-body);display:block;overflow:visible;color:#c8c2d8;}
  body:not(.touch) .hdAb .k{width:22px;height:22px;line-height:22px;font-size:12px;}
  body:not(.touch) :is(#heroSearch,.chip,#heroCount){font-size:12px;}
  body:not(.touch) :is(#heroSearch,.chip){padding:10px;}
  body:not(.touch) #roleRow{flex-wrap:wrap;}
  body:not(.touch) :is(.pcard .who,.pcard .rdy,.shareHint,.shareLine .lbl){font-size:11px;letter-spacing:.5px;}
  body:not(.touch) :is(.pcard .pick,.shareUrl){font-size:12px;}
  body:not(.touch) :is(#lobby p.sub,.pcSub,.queueState,.warTitle + .warTeams + p){font:15px/1.5 var(--hud-font-body);}
  body:not(.touch) :is(.accountLabel,#accountState,.privacyLink){font-size:11px;}
  body:not(.touch) .btn{font-size:13px;min-height:42px;}
  body:not(.touch) #heroMeta{font-size:12px;}
  body:not(.touch) #heroPanel{width:clamp(290px,28vw,390px);}
  body:not(.touch) #heroPanel .vitalHeading{font-size:15px;}
  body:not(.touch) :is(#scoreLine,.trow){font-size:12px;}
  body:not(.touch) .trow .tw{width:30px;font-size:11px;}
  body:not(.touch) #abilities{gap:10px;}
  body:not(.touch) .slot{width:60px;height:60px;}
  body:not(.touch) .slot :is(.k,.n,.rank,.chg){font-size:12px;background:#080c16d9;padding:1px 2px;}
  body:not(.touch) :is(#shopHint,.item .desc,#fragmentGuide){font:15px/1.5 var(--hud-font-body);}
  body:not(.touch) #objectiveHint{max-width:40vw;}
  body:not(.touch) .autoToggle{font-size:11px;}
  body:not(.touch) #tip{width:360px;font:15px/1.5 var(--hud-font-body);}
  body:not(.touch) #tip .tname{font-size:16px;}
  body:not(.touch) #tip .tmeta{font-size:12px;}
  body:not(.touch) #tutText{font-size:16px;}
  body:not(.touch) #tutProgress{font-size:13px;}
  body:not(.touch) #tutTitle{font-size:15px;}
  body:not(.touch) #evolutionPanel{font-size:13px;}
  body:not(.touch) #evolutionPanel :is(.evolutionHint,.evolutionSkill){font-size:11px;}
  body:not(.touch) #evolutionPanel .evolutionOptions b{font-size:14px;}
  body:not(.touch) #evolutionPanel .evolutionOptions small{font-size:15px;}
  body:not(.touch) #evolutionPanel .evolutionTldr{font-size:13px;}
}
@media (min-width:1024px) and (max-width:1200px) and (min-height:600px){
  body:not(.touch) #itemsPanel .itemSlot{width:44px;height:44px;}
}

/* Orbital Refined groups the original controls. Compact windows and touch keep
   their established responsive arrangement and input behavior. */
@media (min-width:1100px) and (min-height:600px){
  /* --orb-s scales the whole 780px orbital frame (positions, slot sizes, bars)
     so the HUD uses more of a wide desktop instead of floating in a fixed box. */
  :root{--orb-s:1;}
  body:not(.touch):not(.inlobby):not(.spectating) #heroPanel{
    position:fixed;left:calc(50% - 390px * var(--orb-s));top:auto;bottom:calc(var(--sab) + 62px + 60px * var(--orb-s));
    width:calc(472px * var(--orb-s));max-width:none;min-width:0;padding:var(--hud-space-3) var(--hud-space-3) var(--hud-space-1) calc(108px * var(--orb-s));
    gap:var(--hud-space-1);border:0;background:none;box-shadow:none;isolation:isolate;
  }
  body:not(.touch):not(.inlobby):not(.spectating) #heroPanel::before{
    content:'';position:absolute;left:0;top:0;bottom:calc(-54px - 60px * var(--orb-s));width:calc(780px * var(--orb-s));z-index:-1;pointer-events:none;clip-path:var(--hud-orbital-clip);
  }
  /* Status effects float just above the panel instead of reserving a row inside it. */
  body:not(.touch):not(.inlobby):not(.spectating) #combatStatus{position:absolute;left:calc(108px * var(--orb-s));bottom:calc(100% + var(--hud-space-2));margin:0;max-width:calc(600px * var(--orb-s));}
  /* The death camera dock (and its expanded recap) sits above the orbital hero panel and its status row, not over the vitals. */
  @media (min-height:501px){body:not(.touch):not(.inlobby):not(.spectating) #deathCameraHud{bottom:calc(var(--sab) + 146px + 60px * var(--orb-s));max-height:calc(100dvh - 350px - 60px * var(--orb-s));}}
  body:not(.touch):not(.inlobby):not(.spectating) #orbitalPortrait{display:block;position:absolute;left:var(--hud-space-3);top:var(--hud-space-3);}
  #orbitalPortrait .heroPortrait{width:calc(38px + 42px * var(--orb-s));height:calc(56px + 60px * var(--orb-s));border:var(--hud-border-hairline) solid var(--hud-launch-rim);border-radius:var(--hud-radius);}
  body:not(.touch):not(.inlobby) #heroPanel .bar{position:relative;height:var(--hud-space-4);gap:0;}
  body:not(.touch):not(.inlobby) #heroPanel .track{height:var(--hud-space-4);border:0;}
  body:not(.touch):not(.inlobby) #heroPanel .track::after{display:none;}
  body:not(.touch):not(.inlobby) #heroPanel .vitalHeading{position:absolute;inset:0;z-index:1;padding:0 var(--hud-space-1);font:var(--hud-text-sm)/1 var(--hud-font-body);text-shadow:0 var(--hud-border-hairline) var(--hud-border-width) var(--hud-surface-canvas);}
  body:not(.touch):not(.inlobby) #heroPanel .vitalHeading :is(b,em){color:var(--hud-text);}
  /* One footer row directly below skills/items. It never wraps, so translated
     automation labels cannot grow upward over a skill hit target. */
  body:not(.touch):not(.inlobby) #heroMeta{position:fixed;left:calc(50% - 390px * var(--orb-s) + var(--hud-space-3));bottom:calc(var(--sab) + var(--hud-space-4));width:calc(628px * var(--orb-s));min-height:var(--hud-space-6);flex-wrap:nowrap;white-space:nowrap;gap:var(--hud-space-1) var(--hud-space-2);font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);}
  body:not(.touch):not(.inlobby) #heroMeta>.gold{position:fixed;left:calc(50% + 272px * var(--orb-s));bottom:calc(var(--sab) + 54px + 56px * var(--orb-s));padding:var(--hud-space-2);border:var(--hud-border-hairline) solid var(--hud-border-subtle);background:var(--hud-surface-inset);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
  body:not(.touch):not(.inlobby) #heroMeta .autoToggle{font:inherit;}
  body:not(.touch):not(.inlobby):not(.spectating) #abilities{position:fixed;bottom:calc(var(--sab) + 54px);left:calc(50% - 282px * var(--orb-s));transform:none;gap:var(--hud-space-2);}
  body:not(.touch):not(.inlobby):not(.spectating) #abilities .slot{width:calc(60px * var(--orb-s));height:calc(60px * var(--orb-s));}
  body:not(.touch):not(.inlobby):not(.spectating) #itemsPanel{position:fixed;left:calc(50% + 94px * var(--orb-s));bottom:calc(var(--sab) + 54px);display:grid;grid-template-columns:repeat(3,calc(44px * var(--orb-s)));gap:var(--hud-space-2);max-width:none;}
  body:not(.touch):not(.inlobby) #itemsPanel .itemSlot{width:calc(44px * var(--orb-s));height:calc(44px * var(--orb-s));}
  body:not(.touch):not(.inlobby):not(.spectating) #autoBuyLabel{position:fixed;left:calc(50% + 256px * var(--orb-s));bottom:calc(var(--sab) + var(--hud-space-3));font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);}
  /* Top strip: one row only, so the objectives sit low and leave the map free. Score line on the
     left, the three core rows in the middle, the scoreboard button on the right. */
  body:not(.touch):not(.inlobby) #objectives{position:fixed;left:50%;top:calc(var(--sat) + var(--hud-space-2));transform:translateX(-50%);width:min(860px,calc(100vw - 520px));min-width:0;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--hud-space-2);padding:0;background:none;border:0;}
  body:not(.touch):not(.inlobby) #teamRows{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hud-space-1);align-items:stretch;width:100%;}
  body:not(.touch):not(.inlobby) .trow{display:grid;grid-column:auto;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:var(--hud-space-1);row-gap:3px;padding:var(--hud-space-1) var(--hud-space-2);font:var(--hud-text-xs)/1.2 var(--hud-font-body);background:var(--hud-orbital-fill);border:var(--hud-border-hairline) solid var(--hud-border);clip-path:var(--hud-orbital-clip);}
  body:not(.touch):not(.inlobby) .trow .orbitalCoreIcon{display:block;grid-row:1/3;grid-column:1;align-self:center;width:28px;height:30px;}
  body:not(.touch):not(.inlobby) .trow .tn{grid-column:2;grid-row:1;font-weight:var(--hud-weight-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body:not(.touch):not(.inlobby) .trow .tw{grid-column:3;grid-row:1;width:auto;}
  body:not(.touch):not(.inlobby) .trow .mini{grid-column:2;grid-row:2;align-self:center;width:100%;height:var(--hud-space-1);background:var(--hud-surface-inset);}
  body:not(.touch):not(.inlobby) .orbitalCoreWord{display:inline;font:inherit;}
  @media (max-width:1300px){body:not(.touch):not(.inlobby) .orbitalCoreWord{display:none;}}
  body:not(.touch):not(.inlobby) .orbitalCoreHealth{display:block;grid-column:3;grid-row:2;text-align:right;font-variant-numeric:tabular-nums;}
  body:not(.touch):not(.inlobby) #scoreLine{grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:flex-start;font-family:var(--hud-font-body);white-space:nowrap;}
  body:not(.touch):not(.inlobby) #btnScores{grid-column:3;grid-row:1;align-self:center;min-height:var(--hud-space-6);font-size:var(--hud-text-xs);padding:var(--hud-space-1) var(--hud-space-2);white-space:nowrap;}
  body:not(.touch):not(.inlobby) #clock{top:calc(var(--sat) + 56px);left:50%;font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);padding:0 var(--hud-space-4);border:0;background:var(--hud-surface-glass);letter-spacing:var(--hud-tracking-label);color:var(--hud-accent);}
  /* The sticker clock (match-sticker.css) is ~31px tall, so what sits under it starts at 96px. */
  body:not(.touch):not(.inlobby) #netPill{top:calc(var(--sat) + 96px);}
  body:not(.touch):not(.inlobby) #relaySurgeHud{top:calc(var(--sat) + 96px);}
  body:not(.touch):not(.inlobby) #banner{top:calc(var(--sat) + 96px);}
  /* Kill feed: the free top-left corner, stopping short of the score strip (#objectives above starts at
     max(50vw - 430px, 260px)). --kf-top (placeKillFeed in state.js) drops it under any other HUD that
     sits in that corner (companion passives, status chips, the tutorial box) so it never covers them. */
  body:not(.touch):not(.inlobby) #killFeed{--kf-base:calc(var(--sat) + var(--hud-space-2));top:max(var(--kf-base),var(--kf-top,0px));bottom:auto;left:var(--hud-space-3);right:auto;width:calc(max(50vw - 430px, 260px) - var(--hud-space-3) * 2);align-items:flex-start;z-index:5;}
  body:not(.touch):not(.inlobby) .kfRow{white-space:normal;flex-wrap:wrap;max-width:100%;font-size:var(--hud-text-xs);}
}


/* Wide desktop (1440px+): one low band along the bottom edge instead of the
   two-row frame, so the map keeps its height. One line: the stats row folds into
   the places its numbers belong (level onto the portrait, scrap and cores beside
   the gear they buy), and the westie passives leave the band entirely for the
   free top-left corner, so the bottom edge is a flat height whatever is active.
   The band is sized by its own contents and centred on screen, dropping back to
   docking against the 220px canvas minimap frame (drawMinimap in render.js) when
   a narrow window would otherwise push it under the map; the auto toggles anchor
   to the band's right edge so long translated labels can never hang past it. */
@media (min-width:1440px) and (min-height:600px){
  :root{
    --band-s:1;
    --band-h:calc(12px + 54px * var(--band-s));
    --band-pad:8px;
    --band-tg:166px;
    /* Fixed-width blocks: portrait, vitals, 5 skill slots, 6 item slots + scrap. */
    --band-pw:calc(44px * var(--band-s));
    --band-vw:calc(236px * var(--band-s));
    --band-aw:calc(230px * var(--band-s) + 20px);
    --band-iw:calc(216px * var(--band-s) + 116px);
    --band-w:calc(var(--band-pad) * 2 + var(--band-pw) + 12px + var(--band-vw) + 16px + var(--band-aw) + 24px + var(--band-iw) + 24px + var(--band-tg));
    --band-x:min(calc((100vw - var(--band-w)) / 2),calc(100vw - 232px - var(--band-w)));
    --band-cx:calc(var(--band-x) + var(--band-pad));
    --band-vx:calc(var(--band-cx) + var(--band-pw) + 12px);
    --band-ax:calc(var(--band-vx) + var(--band-vw) + 16px);
    --band-ix:calc(var(--band-ax) + var(--band-aw) + 24px);
    /* Scrap and cores sit just past the six item cells. */
    --band-gx:calc(var(--band-ix) + 216px * var(--band-s) + 32px);
    --band-r:calc(100vw - var(--band-x) - var(--band-w) + var(--band-pad));
  }
  @media (min-width:1600px){:root{--band-s:1.1;}}
  @media (min-width:1800px){:root{--band-s:1.2;}}
  @media (min-width:2300px){:root{--band-s:1.4;}}
  body:not(.touch):not(.inlobby):not(.spectating) #heroPanel{
    left:var(--band-x);bottom:var(--sab);width:var(--band-w);height:var(--band-h);box-sizing:border-box;
    padding:14px calc(var(--band-w) - (var(--band-vx) - var(--band-x)) - var(--band-vw)) 0 calc(var(--band-vx) - var(--band-x));
    gap:4px;
  }
  /* Turned-down glass: the map reads through the band and the rim is a hint, not a frame. */
  body:not(.touch):not(.inlobby):not(.spectating) #heroPanel::before{
    inset:0;width:auto;bottom:0;clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
    background:linear-gradient(180deg,rgba(13,16,32,.30),rgba(10,12,22,.58));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    border-top:1px solid rgba(184,69,127,.26);
  }
  body:not(.touch):not(.inlobby):not(.spectating) #orbitalPortrait{left:calc(var(--band-cx) - var(--band-x));top:var(--band-pad);}
  #orbitalPortrait .heroPortrait{width:calc(44px * var(--band-s));height:calc(44px * var(--band-s));border-color:rgba(255,255,255,.22);}
  body:not(.touch):not(.inlobby) #heroPanel .bar,body:not(.touch):not(.inlobby) #heroPanel .track{height:16px;}
  body:not(.touch):not(.inlobby) #heroPanel .track{box-shadow:0 0 0 1px rgba(7,10,18,.7);}
  body:not(.touch):not(.inlobby) #heroPanel .vitalHeading{font-size:var(--hud-text-xs);text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.85);}
  /* The stats line no longer reserves a row: it is a zero-height anchor for the
     three readings that survive, each parked where its own block already is. */
  body:not(.touch):not(.inlobby) #heroMeta{
    left:0;bottom:0;width:0;height:0;min-height:0;gap:0;overflow:visible;
    font:var(--hud-text-xs)/1.2 var(--hud-font-body);color:var(--hud-text-muted,#aeb8cc);}
  /* Hide the row wholesale and bring back only what earns a place, so a new
     reading added to the markup cannot leak into the corner of the screen.
     Spendable skill points already announce themselves: hud.js pulses the
     levelable slots (.levelable), which is the cue the SP text duplicated. */
  body:not(.touch):not(.inlobby) #heroMeta>*{display:none;}
  body:not(.touch):not(.inlobby) #heroMeta>i:first-child{display:block;}
  body:not(.touch):not(.inlobby) #heroMeta>.gold{display:inline;}
  body:not(.touch):not(.inlobby) #heroMeta>#soulTxt{display:inline-flex;}
  body:not(.touch):not(.inlobby) #heroMeta>#autoLvlLabel{display:inline-flex;}
  /* Level reads as a badge on the portrait rather than a word in a row. */
  body:not(.touch):not(.inlobby) #heroMeta>i:first-child{
    position:fixed;left:var(--band-cx);bottom:calc(var(--sab) + var(--band-pad) + 2px);width:var(--band-pw);
    box-sizing:border-box;text-align:center;font:var(--hud-weight-strong) 10px/14px var(--hud-font-label);
    color:var(--hud-text);background:rgba(7,10,18,.72);border:var(--hud-border-hairline) solid rgba(255,255,255,.2);
    border-radius:var(--hud-radius);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px #000;}
  /* Scrap and cores move next to the gear they buy. */
  body:not(.touch):not(.inlobby) #heroMeta>.gold{
    position:fixed;left:var(--band-gx);bottom:calc(var(--sab) + var(--band-h) - 32px);padding:0;
    font:var(--hud-weight-strong) 14px/18px var(--hud-font-body);text-shadow:0 1px 3px #000;}
  body:not(.touch):not(.inlobby) #heroMeta #soulTxt{
    position:fixed;left:var(--band-gx);bottom:calc(var(--sab) + 16px);
    font:11px/14px var(--hud-font-body);text-shadow:0 1px 3px #000;}
  /* Toggles: right column, anchored to the band edge, capped so they always fit. */
  body:not(.touch):not(.inlobby) #autoLvlLabel,body:not(.touch):not(.inlobby):not(.spectating) #autoBuyLabel{
    position:fixed;left:auto;right:var(--band-r);max-width:var(--band-tg);box-sizing:border-box;
    padding:3px 8px;min-height:0;font:10px/1.2 var(--hud-font-label);gap:6px;
    background:rgba(16,15,27,.62);box-shadow:none;}
  body:not(.touch):not(.inlobby) #autoLvlLabel{bottom:calc(var(--sab) + var(--band-h) / 2 + 1px);}
  body:not(.touch):not(.inlobby):not(.spectating) #autoBuyLabel{bottom:calc(var(--sab) + var(--band-h) / 2 - 23px);}
  body:not(.touch):not(.inlobby) :is(#autoLvlLabel,#autoBuyLabel) .autoToggleText{overflow:hidden;text-overflow:ellipsis;}
  body:not(.touch):not(.inlobby):not(.spectating) #abilities{left:var(--band-ax);bottom:calc(var(--sab) + 10px);gap:5px;align-items:flex-end;}
  body:not(.touch):not(.inlobby):not(.spectating) #abilities .slot{
    width:calc(46px * var(--band-s));height:calc(46px * var(--band-s));background:rgba(10,9,16,.66);}
  /* The base shield keeps the full slot size so its action label is readable.
     The gold edge and separator distinguish it from the four hero skills. */
  body:not(.touch):not(.inlobby):not(.spectating) #abilities .slot.universal{
    width:calc(46px * var(--band-s));height:calc(46px * var(--band-s));
    align-self:flex-end;background:var(--hud-surface-control);border:var(--hud-border-hairline) solid var(--hud-accent);overflow:visible;}
  body:not(.touch) #abilities .slot.universal>.skillIcon{inset:var(--hud-space-2);width:calc(100% - var(--hud-space-4));height:calc(100% - var(--hud-space-4));}
  body:not(.touch) #abilities .slot.universal .veil{top:0;right:0;bottom:0;left:0;}
  body:not(.touch):not(.inlobby) #abilities .slot.universal .n{
    left:50%;right:auto;bottom:calc(100% + 3px);transform:translateX(-50%);
    font:var(--hud-weight-strong) 9px/12px var(--hud-font-label);white-space:nowrap;letter-spacing:.5px;}
  body:not(.touch):not(.inlobby) #abilities .slot.universal :is(.k,.chg,.guardTicks){font-size:8px;padding:0 2px;}
  body:not(.touch):not(.inlobby) #abilities .slot.universal .k{top:var(--hud-space-1);bottom:auto;left:var(--hud-space-1);}
  body:not(.touch):not(.inlobby) #abilities .slot.universal :is(.chg,.guardTicks){top:auto;bottom:-1px;left:auto;right:-3px;}
  body:not(.touch):not(.inlobby):not(.spectating) #itemsPanel{
    left:var(--band-ix);bottom:calc(var(--sab) + 14px);display:flex;grid-template-columns:none;gap:4px;}
  body:not(.touch):not(.inlobby) #itemsPanel .itemSlot{
    width:calc(36px * var(--band-s));height:calc(36px * var(--band-s));background:rgba(10,9,16,.58);}
  /* The band reserves all six item slots, so empty ones stay visible as dashed placeholders. */
  body:not(.touch):not(.inlobby):not(.spectating) #itemsPanel .itemSlot.empty{
    border:var(--hud-border-hairline) dashed rgba(184,69,127,.34);background:rgba(10,9,16,.22);box-shadow:none;}
  /* Passives and status effects read as one buff column in the free top-left corner,
     above the kill feed, instead of riding on top of the band and inflating its height. */
  body:not(.touch):not(.inlobby) #companionSkills{
    position:fixed;left:var(--hud-space-3);top:calc(var(--sat) + 12px);right:auto;bottom:auto;
    display:flex;flex-direction:row;gap:6px;max-width:460px;}
  body:not(.touch):not(.inlobby) #companionSkills .hud-companion-skill{
    padding:4px 8px 4px 5px;border:var(--hud-border-hairline) solid rgba(255,255,255,.16);border-radius:var(--hud-radius);
    background:rgba(10,12,22,.58);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    font:10px/1.25 var(--hud-font-body);text-shadow:0 1px 2px #000;}
  body:not(.touch):not(.inlobby) #companionSkills small{color:var(--hud-text-muted);}
  body:not(.touch):not(.inlobby) #companionSkills b{color:#8decff;}
  body:not(.touch):not(.inlobby):not(.spectating) #combatStatus{
    position:fixed;left:var(--hud-space-3);top:calc(var(--sat) + 58px);bottom:auto;max-width:460px;margin:0;}
  /* The top-left corner holds the companion passives and status chips here: the kill feed keeps a row
     under them (and --kf-top pushes it further when the chips wrap). */
  body:not(.touch):not(.inlobby) #killFeed{--kf-base:calc(var(--sat) + 130px);width:360px;}
}

/* Low quality, chosen or reached by the slow-frame fallback (js/performance-options.js): no glass blur
   over the live canvas. A thicker tint keeps the panels legible. */
body.quality-low:not(.touch):not(.inlobby):not(.spectating) #heroPanel::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgba(13,16,32,.62),rgba(10,12,22,.8));}
body.quality-low:not(.touch):not(.inlobby) #companionSkills .hud-companion-skill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,12,22,.8);}

/* Desktop utility column (hud.js buildDesktopUtility): Recall and the auto-attack switch stack at the
   end of the skill row, since the mouse HUD has no thumb cluster to hold them. */
#abilityUtil{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--hud-space-1);align-self:stretch;width:96px;flex:none;pointer-events:auto;}
body.touch #abilityUtil,body.inlobby #abilityUtil,body.spectating #abilityUtil{display:none;}
#abilityUtil .utilBtn{flex:1 1 0;min-height:20px;max-height:28px;display:flex;align-items:center;gap:5px;padding:0 5px;box-sizing:border-box;
  border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);background:var(--hud-surface-slot);
  color:var(--hud-text);font:var(--hud-weight-label) var(--hud-text-xs)/1 var(--hud-font-label);text-align:left;white-space:nowrap;cursor:pointer;}
#abilityUtil .utilBtn:hover{border-color:var(--hud-focus);}
#abilityUtil .utilBtn:focus-visible{outline:2px solid var(--hud-focus);outline-offset:1px;}
#abilityUtil .utilBtn:disabled{opacity:var(--hud-disabled-opacity);cursor:default;}
#abilityUtil .utilBtn .hudSprite{width:16px;height:16px;flex:none;}
#abilityUtil .utilText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
#abilityUtil .utilKey:empty{display:none;}
#abilityUtil .utilKey{flex:none;padding:0 3px;border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:2px;font:var(--hud-weight-strong) 9px/12px var(--hud-font-label);color:var(--hud-text-muted);background:var(--hud-surface-inset);}
#btnRecall[data-state="ready"]:not(:disabled){border-color:var(--hud-border);}
#btnRecall[data-state="blocked"] .utilText{color:var(--hud-danger);}
#btnAutoAttack .utilSwitch{width:24px;height:12px;flex:none;background:url('../assets/ui/auto-switch.svg') 0 0 / 48px 12px no-repeat;image-rendering:pixelated;}
#btnAutoAttack[aria-pressed="true"]{border-color:var(--hud-accent);color:var(--hud-accent);}
#btnAutoAttack[aria-pressed="true"] .utilSwitch{background-position:-24px 0;}
/* Orbital frame (1100-1439px): the skill row has no room left, so the column docks in the free pocket
   right of the item grid, under the scrap readout and above auto-buy. */
@media (min-width:1100px) and (min-height:600px){
  body:not(.touch):not(.inlobby):not(.spectating) #abilityUtil{position:fixed;left:calc(50% + 256px * var(--orb-s));bottom:calc(var(--sab) + 54px);width:calc(128px * var(--orb-s));height:calc(48px * var(--orb-s));}
}
/* The wide band sizes itself from its blocks: the skill block grows by the column and the vitals give
   back 16px, so at 1440px the band still clears the minimap. */
@media (min-width:1440px) and (min-height:600px){
  :root{--band-aw:calc(230px * var(--band-s) + 20px + 101px);--band-vw:calc(220px * var(--band-s));}
  body:not(.touch):not(.inlobby):not(.spectating) #abilityUtil{position:static;width:96px;height:auto;}
}