/* Clean battle HUD (2026-11-05)
 * One focus per zone: top = where am I / how far, bottom = what to fire / fire.
 * Removed duplicates: wallets and ranking (shown in lobby/result), hazard stripes,
 * selected-equipment card (same as the pressed slot), READY badge (fire button shows
 * readiness), menu fold (home button opens the lobby with the same routes).
 * Loaded after arcade.css; every rule is scoped to body.hud-clean so the Toss
 * package, which restructures this HUD itself, can opt out by dropping the class.
 */

/* ---------- shared ---------- */
body.hud-clean .star-wallet,
body.hud-clean .wallet,
body.hud-clean #ranking-open,
body.hud-clean .mission::before,
body.hud-clean .control-panel::before,
body.hud-clean .selected-equipment,
body.hud-clean #hud-streak,
body.hud-clean .mission-fold,
body.hud-clean .loadout-heading,
body.hud-clean .energy-label,
body.hud-clean .tool-key,
body.hud-clean .world-hint,
body.hud-clean .mission-intro p { display: none !important; }

body.hud-clean .brand { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-width: 2px; border-radius: 12px; transform: none; box-shadow: 0 3px 0 var(--game-line); }
body.hud-clean .brand img { width: 30px; height: 30px; }
body.hud-clean .brand-wordmark { display: none; }
body.hud-clean .icon-button { border-width: 2px; box-shadow: 0 3px 0 var(--game-line); }

/* Mission strip: title, % and one progress bar. */
body.hud-clean .mission { border-width: 2px; border-radius: 14px; box-shadow: 0 3px 0 var(--game-line); background: color-mix(in srgb, var(--game-panel) 92%, transparent); }
body.hud-clean .mission-intro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.hud-clean .eyebrow { padding: 0; border: 0; background: none; color: var(--game-gold); font-size: 11px; font-weight: 900; }
body.hud-clean .mission-copy { flex: 1; min-width: 0; }
body.hud-clean .mission h1 { text-shadow: none; }
body.hud-clean .mission-intro .protected-status:not([hidden]) { flex-basis: 100%; }
body.hud-clean #goal-status { display: none; }
body.hud-clean .mission[data-state="failed"] #goal-status,
body.hud-clean .mission[data-state="complete"] #goal-status { display: inline-block; }
body.hud-clean .goal-value b { text-shadow: none; }
body.hud-clean .progress-track { border-width: 0; border-radius: 99px; background: var(--game-ink); }
body.hud-clean .progress-track > div { border-radius: 99px; box-shadow: none; }
body.hud-clean .progress-track i { border-width: 0; }

/* Brief + score: plain labels, not competing panels. */
body.hud-clean .arena-labels .live-label { min-height: 44px; padding: 0 12px; color: var(--game-white); background: color-mix(in srgb, var(--game-ink) 72%, transparent); border: 0; border-radius: 99px; box-shadow: none; font-weight: 800; }
body.hud-clean .live-label i { display: none; }
body.hud-clean .score-box { transform: none; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: right; }
body.hud-clean .score-box > span { display: none; }
body.hud-clean .score-box b { font-size: 22px; letter-spacing: 0; text-shadow: 0 2px 0 var(--game-line), 0 0 10px var(--game-shadow); font-variant-numeric: tabular-nums; }
body.hud-clean #gimmick-panel { border-width: 0; box-shadow: none; background: color-mix(in srgb, var(--game-ink) 80%, transparent); }
body.hud-clean .camera-fold > summary { border-width: 0; box-shadow: none; background: color-mix(in srgb, var(--game-ink) 72%, transparent); border-radius: 99px; }

/* Bottom: energy line, then slots + fire in one row. */
body.hud-clean .control-panel { border-width: 2px; border-radius: 18px; box-shadow: 0 4px 0 var(--game-line); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading fire" "tools fire"; align-items: end; }
body.hud-clean .control-heading { min-height: 20px; gap: 8px; }
body.hud-clean .energy-cells { height: 10px; border: 0; padding: 0; gap: 2px; background: none; }
body.hud-clean .energy-cells > i, body.hud-clean .energy-cells > span { border-radius: 2px; }
body.hud-clean .energy-cells > .filled, body.hud-clean .energy-cells > .is-filled { box-shadow: none; }
body.hud-clean .tools { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
body.hud-clean .tool { border-width: 2px; box-shadow: 0 3px 0 var(--game-line); background: var(--game-light); }
body.hud-clean .tool[aria-pressed="true"] { box-shadow: 0 3px 0 var(--game-gold-deep), 0 0 0 2px var(--game-white); background: var(--game-gold); }
body.hud-clean .tool .tool-art { filter: none; }
body.hud-clean .fire-row { grid-area: fire; display: flex; height: auto; min-height: 0; align-self: center; }
body.hud-clean .fire-button { position: relative; inset: auto; right: auto; bottom: auto; }

/* ---------- phone portrait ---------- */
@media (max-width: 767px) {
  /* Top HUD is one bar fused to the screen edge; home/settings sit inside it. */
  body.hud-clean .topbar { height: calc(56px + env(safe-area-inset-top)); padding-top: calc(6px + env(safe-area-inset-top)); }
  body.hud-clean .brand, body.hud-clean .icon-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; box-shadow: none; }
  body.hud-clean .mission { top: 0; left: 0; right: 0; width: auto; padding: calc(6px + env(safe-area-inset-top)) calc(max(8px, env(safe-area-inset-right)) + 48px) 7px calc(max(8px, env(safe-area-inset-left)) + 48px); border-width: 0 0 2px; border-radius: 0 0 18px 18px; }
  body.hud-clean .mission h1 { font-size: 15px; }
  body.hud-clean .eyebrow { font-size: 10px; }
  body.hud-clean .goal-card { margin-top: 3px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "value bar" "foot foot"; align-items: center; gap: 2px 8px; }
  body.hud-clean .goal-top { grid-area: value; }
  body.hud-clean .goal-card .progress-track { grid-area: bar; }
  body.hud-clean .goal-bottom { grid-area: foot; font-size: 10px; }
  body.hud-clean .goal-value b { font-size: 17px; }
  body.hud-clean .progress-track { height: 8px; }
  body.hud-clean .progress-track i { top: -3px; height: 14px; width: 3px; }
  body.hud-clean .arena-top { top: calc(84px + env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  body.hud-clean:has(#protected-status:not([hidden])) .arena-top { top: calc(104px + env(safe-area-inset-top)); }
  body.hud-clean .arena-labels .live-label { font-size: 11px; }
  body.hud-clean .score-box { position: absolute; top: 8px; right: 2px; }
  body.hud-clean .camera-fold { top: auto; bottom: calc(140px + env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); }
  body.hud-clean .camera-actions { top: auto; bottom: calc(100% + 8px); }
  body.hud-clean .control-panel { bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 16px); padding: 8px 8px 10px 10px; grid-template-columns: minmax(0, 1fr) 80px; grid-template-areas: "heading fire" "tools fire"; gap: 6px 10px; }
  body.hud-clean .tools { gap: 6px; }
  body.hud-clean .tool { height: 66px; }
  body.hud-clean .tool .tool-art { width: 46px; height: 34px; }
  body.hud-clean .tool-text { font-size: 11px; }
  body.hud-clean .fire-row { display: flex; height: auto; margin: 0; }
  body.hud-clean .fire-button { width: 78px; min-width: 78px; height: 78px; min-height: 78px; }
  body.hud-clean .notice { bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* ---------- phone landscape ---------- */
@media (max-height: 540px) and (min-aspect-ratio: 1.3) {
  body.hud-clean .mission { top: calc(8px + env(safe-area-inset-top)); left: calc(12px + 52px); width: 240px; }
  body.hud-clean .arena-top, body.hud-clean:has(#protected-status:not([hidden])) .arena-top { top: calc(108px + env(safe-area-inset-top)); }
  body.hud-clean .score-box { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: auto; right: 72px; transform: none; }
  body.hud-clean .camera-fold { top: calc(64px + env(safe-area-inset-top)); }
  body.hud-clean .control-panel { width: 320px; grid-template-columns: minmax(0, 1fr) 74px; grid-template-areas: "heading fire" "tools fire"; }
  body.hud-clean .tool { height: 52px; }
}
@media (max-height: 540px) and (min-aspect-ratio: 1.3) and (max-width: 700px) {
  body.hud-clean .score-box { top: calc(12px + env(safe-area-inset-top)); right: 72px; transform: none; }
}