/* Match-only neon HUD skin. Layout remains anchored by the canonical match HUD. */
body[data-app-state="MATCH"] {
  --hud-blue: var(--nd-accent);
  --hud-red: #ff3f8a;
  --hud-amber: #ffb347;
  --hud-glass: color-mix(in srgb, var(--nd-surface-1) 90%, transparent);
  --hud-edge: color-mix(in srgb, var(--nd-accent) 52%, transparent);
}

body[data-app-state="MATCH"] #mobile-hud-score-banner {
  color: var(--nd-text-1);
  font-family: var(--nd-font-heading);
  filter: drop-shadow(0 4px 12px #000b);
}
body[data-app-state="MATCH"] #score {
  color: var(--nd-text-2);
  font-family: var(--nd-font-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-shadow: 0 0 12px #3ff3ff40;
}
body[data-app-state="MATCH"] #score-label { color: var(--nd-text-3); }
body[data-app-state="MATCH"] #score-player { color: var(--hud-blue); }
body[data-app-state="MATCH"] #score-opponent { color: var(--hud-red); }
body[data-app-state="MATCH"] #matchclock {
  color: var(--nd-text-1);
  font-family: var(--nd-font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px #3ff3ff66;
}
body[data-app-state="MATCH"] #objectivehud {
  border: 1px solid var(--hud-edge);
  border-left: 2px solid var(--hud-blue);
  border-radius: var(--nd-radius-sm);
  background: linear-gradient(90deg, #06202be8, #061017c9);
  box-shadow: inset 0 1px #eafcff0b, 0 3px 14px #0007;
  color: var(--nd-text-1);
  font-family: var(--nd-font-label);
  letter-spacing: .06em;
  text-shadow: 0 0 8px #3ff3ff55;
}
body[data-app-state="MATCH"] #skill-strip { gap: var(--nd-space-2); }
body[data-app-state="MATCH"] .skill-tile {
  color: var(--nd-text-2);
  font-family: var(--nd-font-label);
  text-shadow: 0 1px 4px #000;
}
body[data-app-state="MATCH"] .skill-icon {
  border-color: #3ff3ff88;
  border-radius: var(--nd-radius-sm);
  background-color: #061017e8;
  box-shadow: inset 0 0 12px #3ff3ff20, 0 3px 12px #0009;
}
body[data-app-state="MATCH"] .skill-tile[data-active="true"] .skill-icon {
  border-color: #72f7e0;
  box-shadow: inset 0 0 15px #3ff3ff35, 0 0 13px #3ff3ff66;
}
body[data-app-state="MATCH"] .skill-icon kbd {
  border-color: #3ff3ff88;
  background: #030609eF;
  color: var(--nd-text-1);
  font-family: var(--nd-font-label);
}
body[data-app-state="MATCH"] .skill-tile>b { color: var(--nd-text-1); }
body[data-app-state="MATCH"] .skill-tile>.skill-function { color: var(--nd-text-2); }
body[data-app-state="MATCH"] .skill-tile>small { color: #72f0cc; }
body[data-app-state="MATCH"] .skill-tile[data-ready="false"]>small { color: var(--hud-amber); }
body[data-app-state="MATCH"] #flight .gauge {
  color: var(--nd-accent);
  font-family: var(--nd-font-label);
  text-shadow: 0 0 8px #3ff3ff50;
}
body[data-app-state="MATCH"] #flight .gauge meter,
body[data-app-state="MATCH"] #stdheat,
body[data-app-state="MATCH"] #advcool {
  accent-color: var(--nd-accent);
  filter: drop-shadow(0 0 5px #3ff3ff55);
}
body[data-app-state="MATCH"] #stdweapon,
body[data-app-state="MATCH"] #advweapon {
  border-color: var(--hud-edge);
  border-radius: var(--nd-radius-sm);
  background: linear-gradient(145deg, #081720eF, #030609eF);
  box-shadow: inset 0 1px #eafcff0d, 0 4px 16px #0009;
  color: var(--nd-text-1);
  font-family: var(--nd-font-label);
}
body[data-app-state="MATCH"] #stdstatus,
body[data-app-state="MATCH"] #stdheatpct,
body[data-app-state="MATCH"] #advstatus { color: var(--nd-text-2); }
body[data-app-state="MATCH"] #stdstatus[data-hot="true"] { color: var(--hud-amber); }
body[data-app-state="MATCH"] #advcool[data-ready="true"] { accent-color: #72f0cc; }
body[data-app-state="MATCH"] #network-status {
  border: 1px solid #28546299;
  border-radius: var(--nd-radius-sm);
  background: #030609d9;
  color: var(--nd-text-2);
  font-family: var(--nd-font-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
body[data-app-state="MATCH"] #scoreboard {
  border: 1px solid var(--hud-edge);
  border-radius: var(--nd-radius-md);
  background: radial-gradient(ellipse at 50% 0%, #0c334277, transparent 55%), #030609f5;
  box-shadow: 0 0 34px #000b, inset 0 1px #eafcff0d;
  color: var(--nd-text-1);
  font-family: var(--nd-font-body);
}
body[data-app-state="MATCH"] #scoreboard .scoreboard-live-header { border-color: #285462; }
body[data-app-state="MATCH"] #scoreboard .scoreboard-live-header h2 {
  color: var(--nd-accent);
  font-family: var(--nd-font-heading);
  text-shadow: 0 0 10px #3ff3ff55;
}
body[data-app-state="MATCH"] #close-mobile-scoreboard {
  border-color: var(--hud-edge);
  border-radius: var(--nd-radius-sm);
  background: var(--nd-surface-1);
  color: var(--nd-text-1);
}
body[data-app-state="MATCH"] #open-mobile-scoreboard {
  min-width: 44px;
  min-height: 44px;
  border-color: var(--hud-edge);
  border-radius: var(--nd-radius-sm);
  background: var(--hud-glass);
  box-shadow: 0 0 12px #3ff3ff28;
  color: var(--nd-accent);
  font-family: var(--nd-font-label);
}
@media (max-width: 900px), (pointer: coarse) {
  body[data-app-state="MATCH"] #open-mobile-scoreboard {
    top: calc(var(--match-visible-top, 0px) + 8px + env(safe-area-inset-top, 0px));
  }
  body[data-app-state="MATCH"] #close-mobile-scoreboard { width: 44px; height: 44px; }
}

body[data-app-state="MATCH"] #mobile-controls .mobile-actions button {
  box-sizing: border-box;
  border-color: #3ff3ff99;
  background: radial-gradient(circle at 50% 38%, #0d3848ed, #030609f2 76%);
  box-shadow: inset 0 0 0 1px #3ff3ff1c, 0 3px 12px #000a;
}
body[data-app-state="MATCH"] #mobile-controls .mobile-actions button[data-touch-button="2"] {
  border-color: #ff3f8a99;
  background: radial-gradient(circle at 50% 38%, #4b1830ed, #030609f2 76%);
}
body[data-app-state="MATCH"] #mobile-controls .mobile-actions button:active,
body[data-app-state="MATCH"] #mobile-controls .mobile-actions button[data-active="true"] {
  border-color: #eafcff;
  box-shadow: 0 0 14px #3ff3ff88, inset 0 0 14px #3ff3ff44;
}
body[data-app-state="MATCH"] #mobile-controls .mobile-actions button[data-touch-button="2"]:active,
body[data-app-state="MATCH"] #mobile-controls .mobile-actions button[data-touch-button="2"][data-active="true"] {
  box-shadow: 0 0 14px #ff3f8a88, inset 0 0 14px #ff3f8a44;
}
body[data-app-state="MATCH"] #mobile-controls .mobile-action-label {
  color: var(--nd-text-1);
  font-family: var(--nd-font-label);
  text-shadow: 0 1px 4px #000, 0 0 6px #3ff3ff66;
}
body[data-app-state="MATCH"] #mobile-controls .mobile-fire-actions .mobile-action-label { color: #ffb6d1; }
body[data-app-state="MATCH"] #mobile-controls .touch-pad {
  border-color: #3ff3ff44;
  background: radial-gradient(circle, #0a253746, #03060912 70%);
  color: #a8cbd580;
}
body[data-app-state="MATCH"] #mobile-controls #mobile-joystick {
  border-color: #3ff3ff66;
  background: radial-gradient(circle, #0b344544, #03060918 72%);
}
body[data-app-state="MATCH"] #mobile-controls .touch-stick-knob { filter: drop-shadow(0 0 6px #3ff3ff88); }
body[data-app-state="MATCH"] #mobile-controls button:focus-visible,
body[data-app-state="MATCH"] #open-mobile-scoreboard:focus-visible,
body[data-app-state="MATCH"] #close-mobile-scoreboard:focus-visible {
  outline: 2px solid var(--nd-text-1);
  outline-offset: 2px;
}

@media (max-width: 900px) and (orientation: landscape) {
  body[data-app-state="MATCH"] #mobile-controls .mobile-actions button:not([data-touch-button]) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-app-state="MATCH"] #mobile-controls .mobile-actions button { transition: none; }
}

/* Desktop match HUD: frame the score/timer and group combat vitals at the edge. */
@media (min-width: 901px) and (orientation: landscape) and (pointer: fine) {
  body[data-app-state="MATCH"] #mobile-hud-score-banner {
    position: fixed;
    z-index: 8;
    top: 10px;
    left: 50%;
    display: block;
    width: min(620px, 72vw);
    height: 56px;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--nd-accent) 65%, transparent);
    border-radius: 12px;
    background: linear-gradient(105deg, #061c2aef, #071018f5 48%, #20101bf2);
    box-shadow: inset 0 1px #eafcff16, 0 0 22px #08c8ff2c, 0 8px 24px #0009;
    pointer-events: none;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-frame { display: none; }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score {
    position: absolute; inset: 0; display: block; width: auto; height: auto;
    min-width: 0; padding: 0; transform: none; border: 0; background: transparent;
    box-shadow: none; font-size: 0; letter-spacing: normal;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score-label {
    position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
    color: var(--nd-text-3); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score-player,
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score-opponent {
    position: absolute; top: 50%; display: grid; width: 48px; height: 32px;
    place-items: center; transform: translateY(-50%); border: 1px solid currentColor;
    border-radius: 6px; font-size: 18px; font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score-player {
    left: 72px; background: linear-gradient(145deg, #052a3b, #061722); color: #4bdfff;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #score-opponent {
    right: 16px; background: linear-gradient(145deg, #321b27, #1c1019); color: #ff7199;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner .score-separator { display: none; }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #matchclock {
    top: 5px; left: 50%; z-index: 1; width: auto; max-width: none; padding: 0;
    transform: translateX(-50%); border: 0; background: transparent; box-shadow: none;
    color: var(--nd-text-1); font-size: 0; text-align: center;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner #matchtimer {
    font-size: 23px; font-weight: 900; letter-spacing: .08em;
    text-shadow: 0 0 12px #3ff3ff80;
  }
  body[data-app-state="MATCH"] #mobile-hud-score-banner .scoreboard-hint {
    position: absolute; top: 34px; left: 50%; display: block; transform: translateX(-50%);
    padding: 2px 7px; border: 1px solid #285462; border-radius: 999px;
    background: #030609c9; color: var(--nd-text-3);
    font: 8px var(--nd-font-label); letter-spacing: .04em; white-space: nowrap;
  }
  body[data-app-state="MATCH"] #flight {
    bottom: 20px; left: 50%; display: block; width: min(520px, calc(100vw - 48px));
    height: 100px; min-height: 0; box-sizing: border-box; padding: 0; transform: translateX(-50%); border: 1px solid var(--hud-edge);
    border-radius: 10px; background: linear-gradient(145deg, #061722ed, #030609ef 62%, #10111aeb);
    box-shadow: inset 0 1px #eafcff12, 0 0 20px #08c8ff20, 0 8px 24px #000a;
    color: var(--nd-text-1);
  }
  body[data-app-state="MATCH"] #flight #warning {
    position: absolute; top: -24px; left: 0; width: 100%; min-height: 0;
    color: var(--hud-amber); font: 9px var(--nd-font-label); letter-spacing: .08em;
  }
  body[data-app-state="MATCH"] #flight #speed-hud {
    position: absolute; top: 0; left: 16%; transform: none;
    color: var(--nd-text-1); font-size: 9px; line-height: 1;
  }
  body[data-app-state="MATCH"] #flight #speed-hud strong { font-size: 20px; }
  body[data-app-state="MATCH"] #flight .gauge {
    position: absolute; top: 0; left: 35%; display: grid;
    grid-template-columns: 52px 112px 40px; gap: 4px; width: auto; margin: 0;
    transform: none; font-size: 8px;
  }
  body[data-app-state="MATCH"] #flight .gauge meter { width: 112px; height: 8px; }
  body[data-app-state="MATCH"] #flight #skill-strip {
    position: absolute; bottom: 3px; left: 50%; gap: 7px; margin: 0;
    transform: translateX(-50%);
  }
  body[data-app-state="MATCH"] #flight #skill-strip .skill-icon { width: 44px; height: 44px; }
  body[data-app-state="MATCH"] #stdweapon,
  body[data-app-state="MATCH"] #advweapon {
    bottom: 5px; width: 68px; height: 88px; min-height: 0; box-sizing: border-box; gap: 2px; justify-content: center;
    border: 1px solid #285462; border-radius: 5px;
    background: linear-gradient(180deg, #091c27ee, #030609dc);
    box-shadow: inset 0 1px #eafcff0b, 0 0 12px #08c8ff14; color: var(--nd-text-1);
  }
  body[data-app-state="MATCH"] #stdweapon { left: 12px; right: auto; }
  body[data-app-state="MATCH"] #advweapon { right: 12px; left: auto; }
  body[data-app-state="MATCH"] #stdheat,
  body[data-app-state="MATCH"] #advcool { width: 7px; height: 40px; }
  body[data-app-state="MATCH"] #stdstatus,
  body[data-app-state="MATCH"] #stdheatpct,
  body[data-app-state="MATCH"] #advstatus {
    color: var(--nd-text-2); font: 9px var(--nd-font-label); letter-spacing: .08em;
  }
  body[data-app-state="MATCH"] #stdname,
  body[data-app-state="MATCH"] #advname {
    max-width: 80px; overflow: hidden; color: var(--nd-text-1);
    font: 9px var(--nd-font-label); text-overflow: ellipsis; white-space: nowrap;
  }
  body[data-app-state="MATCH"] #network-status { top: auto; right: 16px; bottom: 12px; left: auto; min-width: 0; max-width: calc(50% - 290px); white-space: normal; text-align: right; }
}

body[data-app-state="MATCH"] #scoreboard:not([hidden]) + #open-mobile-scoreboard { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  body[data-app-state="MATCH"] #scoreboard:not([hidden]) { background-color: #06111b; }
}

/* Keep the visible combat HUD below Safari's landscape address bar. */
@media (orientation: landscape) and (pointer: coarse) {
  #mobile-hud-score-banner { top: calc(var(--match-visible-top, 0px) + 5px + env(safe-area-inset-top, 0px)); }
  body[data-app-state="MATCH"] #open-mobile-scoreboard,
  body[data-app-state="MATCH"] #open-mobile-hangar,
  body[data-app-state="MATCH"] #fullscreen-toggle { top: calc(var(--match-visible-top, 0px) + 8px + env(safe-area-inset-top, 0px)); }
  body[data-app-state="MATCH"] #network-status { top: calc(var(--match-visible-top, 0px) + 1vh + env(safe-area-inset-top, 0px)); }
}