/* Phone match HUD: need-to-know only, the game is the star (Mike, Nov 1: "the health bar at the bottom is way to big,
   philosophy for phones is need to know only when in a match the game is the star"). Landscape phones (coarse pointer,
   at most 500 px tall); desktop and tablets keep their HUD. Loaded last, over touch-hud.css and phone.css.
   Kept: your health (a slim bar), Space / ultimate / trinket, the score and clock, the objective, control on you,
   the minimap, BUILD and SCORES. Gone in a match: the automatic abilities' slots (they fire on their own), defensive and
   buff chips (DR, damage cuts, pickups), the signature explainer, the STATS panel and the zoom slider (+/- stay). */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html[data-art-style] body #hud#hud{--floor:max(8px,env(safe-area-inset-bottom));--edge:max(10px,env(safe-area-inset-right));--top:max(6px,env(safe-area-inset-top))}

  /* Score and clock: one slim pill at the top centre. */
  html[data-art-style] body #hud#hud .scoreboard{top:var(--top);left:50%;right:auto;margin:0;width:auto;min-width:0;max-width:44vw;height:30px;min-height:0;padding:2px 12px;gap:10px;grid-template-columns:auto auto auto;align-items:center;transform:translateX(-50%)}
  html[data-art-style] body #hud#hud .scoreboard::before,html[data-art-style] body #hud#hud .scoreboard::after{display:none}
  html[data-art-style] body #hud#hud .scoreboard .team-score{font-size:9px;letter-spacing:.5px;white-space:nowrap}
  html[data-art-style] body #hud#hud .scoreboard .team-score b{font-size:18px;margin:0 4px}
  html[data-art-style] body #hud#hud .scoreboard :is(.team-score small,.match-clock span){display:none}
  html[data-art-style] body #hud#hud .scoreboard .match-clock strong{font-size:15px;line-height:1}

  /* The objective: one short line under the left corner. */
  html[data-art-style] body #hud#hud .objective{top:var(--top);left:max(10px,env(safe-area-inset-left));max-width:28vw;padding:4px 8px;font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:none;margin:0}

  /* BUILD and SCORES: compact, side by side in the top right; the minimap (canvas) sits under them. */
  html[data-art-style] body #hud#hud #pause{top:var(--top);right:var(--edge);height:30px;min-height:0;padding:0 10px;font-size:10px}
  html[data-art-style] body #hud#hud .scores-button{top:var(--top);right:calc(var(--edge) + 76px);height:30px;min-height:0;padding:0 10px;font-size:10px}
  /* Zoom: the -/+ buttons only, under the minimap (renderer.js docks it). */
  html[data-art-style] body #hud#hud #zoom-control{gap:6px;padding:0;background:none;border:0;box-shadow:none}
  html[data-art-style] body #hud#hud #zoom-control input{display:none}
  html[data-art-style] body #hud#hud #zoom-control button{width:40px;height:32px;min-height:0;padding:0;font-size:16px}

  /* Not needed mid-fight on a phone. */
  html[data-art-style] body #hud#hud :is(#stats-overlay,#signature-cluster,#powers,.hud-divider,.desktop-controls){display:none}
  /* Status chips: crowd control on you only (data-status, combat-status.js); the debuffs, DR, cuts and buffs drop. */
  html[data-art-style] body #hud#hud #buffs :is(.passive-status,.status-extra,.status-chip:not(:is([data-status=stun],[data-status=fear],[data-status=root],[data-status=slow],[data-status=arrested],[data-status=hushed],[data-status=hexSlow]))){display:none}

  /* Health: a slim bar between the joystick and the thumb buttons, with control on you just above it. */
  html[data-art-style] body #hud#hud .player-hud{left:50%;right:auto;bottom:var(--floor);width:min(280px,34vw);height:auto;min-height:0;padding:0;transform:translateX(-50%);background:none;border:0;box-shadow:none;display:flex;flex-direction:column;align-items:stretch;gap:3px}
  html[data-art-style] body #hud#hud .player-hud::before,html[data-art-style] body #hud#hud .player-hud::after{display:none}
  html[data-art-style] body #hud#hud .player-hud .hud-vitals{margin:0;flex:none}
  html[data-art-style] body #hud#hud .player-hud .hud-slots{display:contents}
  html[data-art-style] body #hud#hud .player-hud .bar{height:13px;border-radius:6px;box-shadow:0 0 0 2px #05080ccc}
  html[data-art-style] body #hud#hud .player-hud .bar .vitals{font-size:9px;line-height:13px;top:0;bottom:auto;height:13px;padding:0 6px}
  html[data-art-style] body #hud#hud .player-hud .bar .vitals #player-label{display:none}
  html[data-art-style] body #hud#hud .player-hud .hud-status{order:-1;min-height:0;margin:0;display:flex;justify-content:center}
  html[data-art-style] body #hud#hud #buffs .status-chips{gap:4px;justify-content:center;flex-wrap:nowrap}
  html[data-art-style] body #hud#hud #buffs .status-chip{font-size:9px;padding:1px 6px;min-height:0;line-height:14px}

  /* Tutorial hints: a slim line under the scoreboard, never over the heroes in the middle. */
  html[data-art-style] body #hud#hud .first-hint{top:calc(var(--top) + 36px);bottom:auto;max-width:46vw;padding:5px 10px;font-size:10px;line-height:1.3;transform:translateX(-50%)}
  /* Kill feed: two short lines under the objective. */
  html[data-art-style] body #hud#hud .feed{top:calc(var(--top) + 30px);left:max(10px,env(safe-area-inset-left));width:28vw;font-size:9px}
  html[data-art-style] body #hud#hud .feed div:nth-child(n+3){display:none}
}