/* Touch HUD (phones and tablets). Loaded last; desktop (fine pointer) is untouched.
   - Automatic abilities shrink to status-sized icons inside a slim vitals strip.
   - Ultimate, trinket and dash become big thumb buttons in a bottom-right arc. */
@media (pointer:coarse){
  html[data-art-style] body #hud{--thumb-gap:10px;--ult:68px;--act:58px;--edge:max(12px,env(safe-area-inset-right));--floor:max(12px,env(safe-area-inset-bottom));--strip:46px}

  /* Vitals strip: level, health/XP, then the four automatic abilities as small icons. */
  html[data-art-style] body #hud .player-hud{left:var(--edge);right:var(--edge);bottom:var(--floor);top:auto;transform:none;width:auto;max-width:none;height:var(--strip);padding:5px 8px;display:flex;align-items:center;gap:8px}
  html[data-art-style] body #hud .player-hud .hud-vitals{flex:1;min-width:0;margin:0;gap:6px}
  html[data-art-style] body #hud .player-hud .bar{height:12px}
  html[data-art-style] body #hud .hud-slots{display:flex;flex:none;align-items:center;gap:4px}
  html[data-art-style] body #hud :is(.powers,.power-group,.power-slots){display:contents}
  html[data-art-style] body #hud .power-group h3,html[data-art-style] body #hud .hud-divider{display:none}
  html[data-art-style] body #hud .power-card{--slot:30px;width:30px;height:30px;min-height:0;border-radius:6px;pointer-events:none}
  html[data-art-style] body #hud .power-card .spell-icon{width:24px;height:24px}
  html[data-art-style] body #hud .power-card.empty-power{display:none}
  html[data-art-style] body #hud .power-card [data-power-clock][data-state=cooldown]{font-size:10px}
  html[data-art-style] body #hud .power-card [data-power-clock]:is([data-state=active],[data-state=inactive]){font-size:6px;padding-bottom:1px}

  /* Thumb arc: ultimate in the corner, dash to its left, trinket above it. */
  html[data-art-style] body #hud :is(#ultimate,#trinket,#dash){position:fixed;z-index:6;width:var(--act);height:var(--act);border-radius:50%;touch-action:manipulation}
  html[data-art-style] body #hud #ultimate{width:var(--ult);height:var(--ult);right:var(--edge);bottom:calc(var(--floor) + var(--strip) + var(--thumb-gap))}
  html[data-art-style] body #hud #dash{right:calc(var(--edge) + var(--ult) + var(--thumb-gap));bottom:calc(var(--floor) + var(--strip) + var(--thumb-gap) - 2px)}
  html[data-art-style] body #hud #trinket{right:calc(var(--edge) + 6px);bottom:calc(var(--floor) + var(--strip) + var(--ult) + var(--thumb-gap) * 2)}
  html[data-art-style] body #hud :is(#ultimate,#trinket,#dash) .slot-key{display:none}
  html[data-art-style] body #hud :is(#ultimate,#trinket,#dash) .slot-glyph{font-size:26px}
  html[data-art-style] body #hud :is(#ultimate,#trinket,#dash) .slot-glyph img{width:100%;height:100%}
  html[data-art-style] body #hud :is(#ultimate-state,#trinket-state,#dash-state){font-size:9px;padding-bottom:6px}

  html[data-art-style] body #hud #joystick{left:max(14px,env(safe-area-inset-left));bottom:calc(var(--floor) + var(--strip) + var(--thumb-gap))}
  html[data-art-style] body #hud #stats-overlay{top:auto;left:max(10px,env(safe-area-inset-left));bottom:calc(var(--floor) + var(--strip) + 124px)}
  /* The difficulty pill would sit under the vitals strip. */
  html[data-art-style] body #hud~#pressure{display:none}
}

/* Landscape phones: vitals strip sits between the joystick and the thumb arc. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html[data-art-style] body #hud{--ult:64px;--act:54px;--strip:40px}
  html[data-art-style] body #hud .player-hud{left:calc(max(14px,env(safe-area-inset-left)) + 112px);right:calc(var(--edge) + var(--ult) + var(--act) + var(--thumb-gap) * 2 + 4px)}
  html[data-art-style] body #hud #ultimate{bottom:var(--floor)}
  html[data-art-style] body #hud #dash{bottom:calc(var(--floor) - 2px)}
  html[data-art-style] body #hud #trinket{bottom:calc(var(--floor) + var(--ult) + var(--thumb-gap))}
  html[data-art-style] body #hud #joystick{bottom:var(--floor)}
  html[data-art-style] body #hud #stats-overlay{bottom:auto;top:84px}
}