/* Mythox brand layer: HUD restyle (integration Stage 3).
   Loads after style.css and phone.css. Remove its <link> in index.html to get the previous look back.
   Selectors start with .game-column (or .command-desk) so they outrank the existing rules, including the
   media-query overrides in style.css and phone.css, without !important. Tokens come from brand/css/. */

/* ============================================================ match HUD: gate, supplies, wave */
.game-column .match-hud { gap: 8px; overflow: visible; background: none; border: 0; }
.game-column .match-hud > .hud-stat { min-width: 0; padding: 10px 12px 11px; color: var(--mx-text-on-dark); background: var(--mx-brand-deep); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 6px 16px rgb(0 0 0 / .18); }
.game-column .match-hud .hud-stat small { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mx-text-on-dark-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.game-column .match-hud .hud-stat small .mx-ic { flex: none; width: 18px; height: 18px; color: var(--p); }
.game-column .match-hud .hud-stat strong { margin: 4px 0 8px; font: 700 22px/1 var(--mx-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-column .match-hud .meter { position: relative; height: 10px; overflow: hidden; background: var(--mx-health-track); border: 1px solid rgb(255 255 255 / .14); border-radius: 6px; }
.game-column .match-hud .meter > span { background: var(--bar, var(--mx-health-good)); border-radius: 5px; }
/* quarter marks, so a bar can be read without relying on its color */
.game-column .match-hud .meter::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgb(20 40 32 / .9) calc(25% - 1px) 25%); }
.game-column .match-hud .meter.supply > span { background: var(--mx-brand-gold); }
.game-column .match-hud .meter.wave > span { background: var(--mx-pillar-march); }
/* gate state is set by brand-hud.js; the icon also changes shape (shield to warning triangle) at danger */
.game-column .match-hud .hud-stat.is-hold[data-state="warn"] { --bar: var(--mx-health-warn); }
.game-column .match-hud .hud-stat.is-hold[data-state="danger"] { --bar: var(--mx-health-danger); border-color: var(--mx-health-danger); }
.game-column .match-hud .hud-stat.is-hold[data-state="warn"] small .mx-ic { color: var(--mx-health-warn); }
.game-column .match-hud .hud-stat.is-hold[data-state="danger"] small .mx-ic { color: var(--mx-health-danger); }

/* ============================================================ playback buttons and map controls */
.game-column .match-actions button,
.game-column .world-controls button { display: inline-grid; place-items: center; min-height: 44px; padding: 8px 12px; color: var(--mx-text-on-dark); background: color-mix(in srgb, var(--mx-brand-pine) 94%, var(--mx-brand-deep)); border: 1px solid var(--edge); border-radius: 12px; font: 700 14px/1.1 var(--mx-font-ui); text-align: center; }
.game-column .match-actions button:hover:not(:disabled),
.game-column .world-controls button:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-brand-pine) 90%, var(--mx-brand-cream)); }
.game-column .match-actions #start { color: var(--mx-brand-deep); background: var(--mx-brand-gold); border-color: transparent; }
.game-column .match-actions #start:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-brand-gold) 88%, var(--mx-brand-cream)); }
.game-column .match-actions button[aria-pressed="true"],
.game-column .world-controls button[aria-pressed="true"] { background: color-mix(in srgb, var(--mx-pillar-hold) 28%, var(--mx-brand-pine)); border-color: var(--mx-pillar-hold); }
.game-column .match-actions button:disabled { opacity: .55; }
.game-column .save-indicator { font-size: 12px; line-height: 1.2; letter-spacing: 0; }

/* ============================================================ campaign track and stage frame text (12 px floor) */
.game-column .campaign-track-label, .game-column .campaign-track-end { font-size: 12px; letter-spacing: .08em; }
.game-column .campaign-track li { padding: 4px 1px; font-size: 12px; }
.game-column .stage-top, .game-column .stage-bottom { min-height: 30px; font-size: 12px; letter-spacing: .06em; }
.game-column .pan-hint, .game-column .stage-clock-label { font-size: 12px; }
.game-column #clock { font-size: 14px; }
.game-column .control-head { font-size: 12px; letter-spacing: .04em; }
.game-column .control-head output { font-size: 14px; }
.game-column .road-range span { font-size: 12px; letter-spacing: .08em; }

/* ============================================================ command dock (the six orders) */
.game-column .command-strip.mx-ui { padding: 8px; gap: 8px; background: color-mix(in srgb, var(--mx-brand-deep) 90%, transparent); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 8px 22px rgb(0 0 0 / .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.game-column .command-strip.mx-ui button.mx-cmd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon name" "icon cost"; align-items: center; justify-items: start; column-gap: 10px; row-gap: 2px; min-width: 0; min-height: 64px; padding: 8px 10px; text-align: left; color: var(--mx-text-on-dark); background: color-mix(in srgb, var(--mx-brand-pine) 92%, transparent); border: 1px solid var(--edge); border-bottom: 3px solid var(--p); border-radius: 14px; transform: none; }
.game-column .command-strip.mx-ui button.mx-cmd:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-brand-pine) 88%, var(--mx-brand-cream)); transform: none; }
.game-column .command-strip.mx-ui button.mx-cmd:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.game-column .command-strip.mx-ui button.mx-cmd:disabled { opacity: .55; color: var(--mx-text-on-dark); background: color-mix(in srgb, var(--mx-brand-pine) 75%, transparent); border-color: var(--edge); border-bottom-color: var(--p); }
.game-column .command-strip.mx-ui .mx-cmd > .mx-ic { grid-area: icon; width: 24px; height: 24px; color: var(--p); }
.game-column .command-strip.mx-ui .mx-cmd strong { grid-area: name; display: block; margin: 0; font: 700 14px/1.15 var(--mx-font-ui); letter-spacing: 0; }
.game-column .command-strip.mx-ui .mx-cmd small { grid-area: cost; display: flex; align-items: center; gap: 4px; color: var(--mx-text-on-dark-muted); font: 700 12px/1.1 var(--mx-font-ui); }
.game-column .command-strip.mx-ui .mx-cmd small .mx-ic { width: 14px; height: 14px; color: var(--mx-brand-gold); }
.game-column .command-strip.mx-ui .mx-cmd[data-short="true"] small { color: var(--mx-health-danger); }
/* keyboard shortcut badge (desktop only) */
.game-column .command-strip.mx-ui .mx-cmd .command-num { position: absolute; top: 6px; right: 7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: var(--mx-text-on-dark-muted); border: 1px solid var(--edge); border-radius: 5px; font: 700 12px/1 var(--mx-font-ui); letter-spacing: 0; }
@media (pointer: coarse) { .game-column .command-strip.mx-ui .mx-cmd .command-num { display: none; } }
/* the one primary order: start the next wave */
.game-column .command-strip.mx-ui .wave-command:not(:disabled) { color: var(--mx-brand-deep); background: var(--mx-brand-gold); border-color: transparent; border-bottom: 3px solid var(--mx-pillar-march); }
.game-column .command-strip.mx-ui .wave-command:not(:disabled):hover { background: color-mix(in srgb, var(--mx-brand-gold) 88%, var(--mx-brand-cream)); }
.game-column .command-strip.mx-ui .wave-command:not(:disabled) :is(small) { color: var(--mx-brand-deep); }
.game-column .command-strip.mx-ui .wave-command:not(:disabled) .mx-ic { color: var(--mx-brand-deep); }

/* ============================================================ remaining small text: the lead kicker and the aside (12 px floor) */
.match-section .section-lead .kicker { font-size: 12px; }
.command-desk .brief-card small, .command-desk .brief-card span, .command-desk .readout small, .command-desk .readout p,
.command-desk .feed-head span:not(.feed-pulse), .command-desk .feed time, .command-desk .desk-footer p, .command-desk .kicker { font-size: 12px; }
.command-desk .desk-footer button, .command-desk .import-button { min-height: 44px; font-size: 13px; }
/* the road slider: a taller hit area (its visible track is unchanged) */
.game-column .world-controls input[type="range"] { height: 44px; }

/* ============================================================ phones, portrait */
@media (max-width: 700px) and (orientation: portrait) {
  body { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  .game-column .match-hud { gap: 6px; padding: 6px; background: #172d24; }
  .game-column .match-hud > .hud-stat { padding: 8px 9px 9px; border-radius: 12px; }
  .game-column .match-hud .hud-stat strong { margin: 3px 0 6px; font-size: 20px; }
  .game-column .match-actions { flex-wrap: wrap; }
  .game-column .match-actions button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 14px; }
  .game-column .save-indicator { flex: 1 0 100%; max-width: none; margin: 0; padding: 3px 6px; }
  .game-column .stage-bottom > span:first-child { display: none; }
  .game-column .stage-bottom { justify-content: flex-end; }
  .game-column .world-controls button { min-height: 44px; padding: 6px 8px; font-size: 13px; }
  .game-column .command-strip.mx-ui { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; border-radius: 16px 16px 0 0; }
  .game-column .command-strip.mx-ui button.mx-cmd { min-height: 66px; padding: 6px 8px; column-gap: 8px; }
  .game-column .command-strip.mx-ui .mx-cmd > .mx-ic { width: 22px; height: 22px; }
  .game-column .command-strip.mx-ui .mx-cmd strong { font-size: 13px; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .game-column .match-actions button { padding-inline: 4px; font-size: 13px; }
  .game-column .match-hud .hud-stat small .mx-ic { display: none; }
}

/* ============================================================ phones, landscape (short screens) */
/* Height is the scarce thing here (about 390 px), so the track and the install button give way, the slider caption
   stays only as the slider's accessible name, and every remaining button is at least 44 px tall. */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 1100px) {
  .game-column .match-hud { gap: 4px; background: none; padding: 0; }
  .game-column { gap: 3px 7px; }
  .game-column .match-hud > .hud-stat { padding: 4px 6px 5px; border-radius: 10px; }
  .game-column .match-hud .hud-stat small .mx-ic { display: none; }
  .game-column .match-hud .hud-stat small { font-size: 12px; letter-spacing: .04em; }
  .game-column .match-hud .hud-stat strong { margin: 2px 0 4px; font-size: 15px; }
  .game-column .match-hud .meter { height: 8px; }
  .game-column .match-actions button { min-height: 44px; padding: 4px 6px; font-size: 13px; }
  .game-column .match-actions #install-app { display: none; }
  .game-column .campaign-track { display: none; }
  .game-column .stage-top, .game-column .stage-bottom { min-height: 24px; padding-block: 2px; }
  /* the canvas size in phone.css reserves room for 21 px bars; ours are 24 px, so reserve 10 px more */
  .game-column #battlefield { width: min(100%, calc((100svh - 68px) * .6)); }
  .game-column .stage-bottom > span:first-child { display: none; }
  .game-column .stage-bottom { justify-content: flex-end; }
  .game-column .control-head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .game-column .world-controls { padding: 2px 6px 3px; }
  .game-column .world-controls input[type="range"] { height: 30px; }
  .game-column .road-range { margin: 0 0 2px; }
  .game-column .world-controls button { min-height: 44px; padding: 3px 4px; font-size: 12px; }
  .game-column .command-strip.mx-ui { padding: 4px; gap: 4px; border-radius: 12px; }
  .game-column .command-strip.mx-ui button.mx-cmd { min-height: 44px; padding: 3px 8px; column-gap: 6px; }
  .game-column .command-strip.mx-ui .mx-cmd > .mx-ic { width: 20px; height: 20px; }
  .game-column .command-strip.mx-ui .mx-cmd strong { font-size: 12px; }
  .game-column .command-strip.mx-ui .mx-cmd small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-column .command-strip.mx-ui button.mx-cmd, .game-column .match-actions button, .game-column .world-controls button { transition: none; }
}