/* hud-squad-console.css — Phase 194 (2026-07-14, Maurice).
 *
 * Top-right squad console: a row of squad-portrait SCREENS (per-player done
 * check; the current player's portrait long-presses to MARK TURN DONE), a Team
 * Fast Forward SCREEN, a Buy More FF mechanical KEY, small corner Exit /
 * Surrender keys + the session id, and a digital Sol countdown clock below.
 *
 * Replaces the old 3-button action cluster + the bottom footer stripe (both
 * hidden at the end of this file). Screen + key recipes mirror the bottom
 * console (see hud-cockpit.css): dark-teal glass screens with a light-grey
 * hairline border; raised brushed keys with a bevel.
 */

:root {
  --asc-screen:
    repeating-linear-gradient(0deg, rgba(125,225,255,0.07) 0 1px, rgba(0,0,0,0.14) 1px 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(150% 260% at 50% 34%, rgba(58,110,116,0.55) 0%, rgba(32,60,68,0.38) 55%, rgba(18,32,38,0.55) 100%),
    linear-gradient(0deg, rgba(48,92,98,0.36), rgba(48,92,98,0.36)),
    linear-gradient(0deg, #14262e, #14262e);
  --asc-screen-you:
    repeating-linear-gradient(0deg, rgba(125,225,255,0.08) 0 1px, rgba(0,0,0,0.12) 1px 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(150% 260% at 50% 34%, rgba(70,130,136,0.6) 0%, rgba(38,72,80,0.4) 55%, rgba(20,40,46,0.55) 100%),
    linear-gradient(0deg, #173a40, #173a40);
  --asc-screen-border: rgba(210,218,230,0.35);
  --asc-key-bg: #3a4048;
  --asc-key-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.45);
}

#apexSquadConsole {
  /* Anchored by JS just RIGHT of the AP box (#apexApBreakdown) — see
     positionConsole() in hud-squad-console.js. The right: fallback keeps it
     sane before the first measure / if the AP box isn't found. */
  position: fixed; top: 0; right: calc(240px + 12px); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: #eafcf9; pointer-events: none;
}
#apexSquadConsole[hidden] { display: none; }
#apexSquadConsole > * { pointer-events: auto; }
#apexSquadConsole button { font-family: inherit; -webkit-appearance: none; appearance: none; }

/* ── main row: housing + right-side utility column ──────────── */
.asc-main { display: flex; align-items: stretch; gap: 8px; }

/* ── utility column (session id + exit + surrender) — docked INSIDE the
      housing plate, right of Buy More FF ── */
.asc-util { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 2px 0 2px; }
.asc-session { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(210,218,230,0.7); text-align: center; line-height: 1.3; max-width: 88px; }
.asc-util-btns { display: flex; gap: 6px; }
.asc-key {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(210,218,230,0.4);
  background: var(--asc-key-bg); box-shadow: var(--asc-key-shadow);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #c3ccd6; padding: 0; text-decoration: none;
}
.asc-key:hover { border-color: #4dd0c5; color: #eafcf9; }
.asc-key svg { width: 16px; height: 16px; display: block; }
.asc-key.asc-surrender { color: #e0a3a3; }
.asc-key.asc-surrender:hover { color: #f2b3b3; border-color: #e0a3a3; }

/* ── housing plate behind the console row ───────────────────── */
.asc-housing {
  display: flex; align-items: stretch; gap: 5px;
  /* No inner housing — the squad screens sit directly on the top metal plate. */
  background: transparent;
  border: none;
  padding: 2px;
}

/* ── squad portraits (screens) ──────────────────────────────── */
.asc-portraits { display: flex; gap: 5px; }
.asc-portrait {
  /* Phase 290 (2026-07-30, Maurice): "the current player poster is shorter". The
     portrait is a <button>, which defaults to box-sizing:border-box in Chrome, so
     height:88px was the OUTER height — 2px short of the SOL clock (a div at
     box-sizing:border-box; height:90px) and the height-synced stat badges. Bumped
     to 90px + explicit border-box so every top poster is exactly 90px tall. */
  position: relative; width: 64px; box-sizing: border-box; height: 90px; border-radius: 4px;
  background: var(--asc-screen); border: 1px solid var(--asc-screen-border);
  padding: 0; text-align: center;
}
.asc-portrait.is-waiting { opacity: 0.8; }
/* Phase 195 rev (Maurice): the YOU poster is NOT highlighted by default — its
   identity reads from the player-colored silhouette + "YOU" label. The teal
   highlight (bg + border) now means "turn marked DONE". */
.asc-portrait.is-you { cursor: pointer; }
.asc-portrait.is-you:disabled { cursor: default; }
.asc-portrait.is-you.is-done { background: var(--asc-screen-you); border-color: #4dd0c5; }
/* Phase 215 (2026-07-24, Maurice): when the viewer is out of AP (nothing left
   to do this Sol) and hasn't marked done, pulse the YOU card to nudge them to
   end the Sol. Amber glow + gentle brighten; toggled via .asc-nudge by
   hud-squad-console.js. Not applied once is-done. */
@keyframes asc-nudge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,185,74,0.0); border-color: rgba(240,185,74,0.45); }
  50%      { box-shadow: 0 0 12px 2px rgba(240,185,74,0.55); border-color: rgba(240,185,74,0.95); }
}
.asc-portrait.is-you.asc-nudge:not(.is-done) {
  animation: asc-nudge-pulse 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .asc-portrait.is-you.asc-nudge:not(.is-done) { animation: none; border-color: rgba(240,185,74,0.9); box-shadow: 0 0 10px 1px rgba(240,185,74,0.5); }
}
.asc-pname { position: absolute; top: 11px; left: 0; right: 0; text-align: center; font-size: 8px; color: #9fb0bf; letter-spacing: 0.04em; }
.asc-portrait.is-you .asc-pname { color: #8fe3d9; }
/* Phase 195 rev (Maurice): silhouette tinted with the player's color (set as
   --asc-sil-color per portrait by hud-squad-console.js). Falls back to the old
   neutral / teal when a color isn't resolved. */
.asc-sil { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; color: var(--asc-sil-color, #5c6b77); }
.asc-portrait.is-you .asc-sil { color: var(--asc-sil-color, #8fe3d9); }
.asc-sil svg { width: 100%; height: 100%; display: block; }
.asc-check { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; color: rgba(93,202,165,0.5); }
.asc-check svg { width: 100%; height: 100%; display: block; }
.asc-dolabel {
  position: absolute; bottom: 4px; left: 4px; right: 4px; text-align: center;
  font-size: 8px; line-height: 1.15; letter-spacing: 0.04em; color: #eafcf9;
  background: rgba(9,20,24,0.7); border-radius: 2px; padding: 2px 0;
}

/* ── team fast forward (screen) ─────────────────────────────── */
.asc-ff {
  width: 64px; border-radius: 4px; background: var(--asc-screen);
  border: 1px solid var(--asc-screen-border); color: #eafcf9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 6px; cursor: pointer;
}
.asc-ff:disabled { opacity: 0.5; cursor: default; }
.asc-ff-sils { display: flex; gap: 1px; color: #8fe3d9; }
.asc-ff-sils svg { width: 15px; height: 15px; display: block; }
.asc-ff-text { font-size: 8.5px; letter-spacing: 0.05em; text-align: center; line-height: 1.2; }
.asc-ff-count { font-size: 12px; font-weight: 500; color: #f5b056; }

/* ── buy more FF (mechanical key) ───────────────────────────── */
.asc-buy {
  width: 64px; border-radius: 6px; background: var(--asc-key-bg);
  border: 1px solid rgba(210,218,230,0.4); box-shadow: var(--asc-key-shadow);
  color: #eafcf9; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px;
}
.asc-buy-plus { font-size: 18px; color: #f5b056; line-height: 1; }
.asc-buy-plus svg { width: 18px; height: 18px; display: block; }
.asc-buy-text { font-size: 8.5px; letter-spacing: 0.05em; text-align: center; line-height: 1.2; }

/* ── digital Sol clock (screen) ─────────────────────────────── */
.asc-clock {
  position: relative; width: 64px; border-radius: 4px; overflow: hidden;
  background: var(--asc-screen); border: 1px solid var(--asc-screen-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Phase 233 rev (2026-07-25, Maurice): symmetric top/bottom padding so the
     centred SOL/number/ENDS-IN/timer stack sits vertically balanced — the old
     6px-top / 11px-bottom pushed the whole stack up ("SOL is too high"). */
  gap: 5px; padding: 8px 4px;
  /* Phase 233 (2026-07-25, Maurice): FIXED box height matching the .asc-portrait
     poster (88px content + 1px borders = 90px). Without it the clock card sized
     to its content, so a longer SOL number (which wrapped .asc-clock-sol to two
     lines) grew the card → the measured housing → the height-synced stat badges
     ("badges too tall / longer sol pushes them taller"). Fixed height decouples
     the console height from the SOL text. */
  box-sizing: border-box; height: 90px;
}
.asc-clock[hidden] { display: none; }
/* Phase 233 rev (2026-07-25, Maurice): display:contents dissolves this wrapper so
   SOL / number / ENDS IN / countdown are ALL direct flex children of .asc-clock
   and share its single gap — even spacing between every line (was 1px inside the
   wrapper vs the card's 5px to the timer). */
.asc-clock-labels { display: contents; }
/* Phase 233 rev: "SOL" is now a small header label; the number sits on its own
   line below it (.asc-clock-num), then ENDS IN, then the countdown. */
/* Phase 233 rev (2026-07-25, Maurice): line-height:1 on every clock line. Default
   line-boxes inflated the 4-line stack to ~80px — taller than the card's ~72px
   padded area — so it overflowed upward and pinned "SOL" to the top edge ("SOL
   too high"). Collapsing the line-boxes lets the stack (~64px) truly centre with
   even margin top and bottom. */
.asc-clock-sol { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: rgba(159,176,191,0.75); white-space: nowrap; line-height: 1; }
.asc-clock-num { font-size: 17px; font-weight: 600; letter-spacing: 0.04em; color: #c3d2dc; line-height: 1; font-variant-numeric: tabular-nums; }
.asc-clock-sub { font-size: 7px; letter-spacing: 0.12em; color: rgba(159,176,191,0.7); line-height: 1; }
.asc-clock-time { font-size: 16px; font-weight: 500; letter-spacing: 1px; color: #8fe3d9; text-shadow: 0 0 7px rgba(77,208,197,0.5); font-variant-numeric: tabular-nums; line-height: 1; }
.asc-colon { animation: asc-blink 1s steps(1, end) infinite; }
@keyframes asc-blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }
.asc-clock-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(120,150,160,0.25); }
.asc-clock-fill { height: 100%; width: 0%; background: #4dd0c5; transition: width 0.9s linear; }
.asc-clock[data-warn="amber"] .asc-clock-fill { background: #f5b056; }
.asc-clock[data-warn="danger"] .asc-clock-fill { background: #e24b4a; }
.asc-clock[data-warn="danger"] .asc-clock-time { color: #f2a3a3; text-shadow: 0 0 9px rgba(226,75,74,0.5); }

/* ── hide the old UI this console replaces ──────────────────── */
#apexMarkDoneBtn, #apexFastForwardBtn, #apexBuyTurnsBtn { display: none !important; }
#apexTurnTimer { display: none !important; }
#hudFooterRoster, #apexServerInfo { display: none !important; }

/* Phase 195 rev (2026-07-16, Maurice): the top carries a textured metal backdrop
   mirroring the BOTTOM dashboard plate (#map-viewport::after) — a full-width
   plate coming down from the screen top, behind the top consoles, which sit on
   it as insets. (Earlier this was hidden because it hugged a now-broken
   banner-width; here it's a fixed full-width plate like the bottom.) */
#map-viewport::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  /* Overshoot the top by 4px (clipped by #map-viewport's overflow:hidden) so the
     left/right borders are unambiguously flush with the very top of the screen —
     no subpixel gap. Phase 195 rev (Maurice). */
  top: -4px !important;
  /* Hug the console group (stats → squad) so the texture only fills the gaps
     between + a small margin around them — not the whole top. The px bounds are
     measured by hud-squad-console.js centerHeader(). */
  left: var(--apex-topplate-left, 2vw) !important;
  transform: none !important;
  width: var(--apex-topplate-width, 96vw) !important;
  /* Phase 232 (2026-07-25, Maurice): height tracks the measured console height
     (set by hud-ap-pool.js _syncHeightToSquad) so the plate always CONTAINS the
     stat badges + squad portraits instead of them spilling out the bottom. The
     100px fallback is the pre-Phase-232 fixed value for first paint. */
  height: var(--apex-topplate-height, 100px) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border: 1px solid var(--apex-metal-edge) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  background:
    var(--apex-metal-weather),
    var(--apex-metal-sheen),
    var(--apex-metal-grain),
    var(--apex-metal-face) !important;
  box-shadow:
    var(--apex-metal-bevel),
    inset 0 -2px 0 rgba(77, 208, 197, 0.35),
    0 0 34px -6px rgba(77, 208, 197, 0.28),
    0 10px 26px rgba(0, 0, 0, 0.55) !important;
}

/* Phase 195 rev (2026-07-16, Maurice): give the top stats strip the SAME metal
   housing as the squad + AP consoles — dark plate, no top edge, rounded bottom,
   with its already-framed glass stat screens inset + gapped so each reads as its
   own poster. Lives HERE (a directly-linked stylesheet that cache-busts) rather
   than in the @imported hud-cockpit.css, whose import version wasn't refetching.
   !important + later load order guarantees it wins over the metal/strip rules. */
.apex-hud-top-center {
  /* No inner housing — the stat screens sit directly on the top metal plate
     (#map-viewport::before); the texture shows through the gaps. Phase 195 rev. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* Tight frame: minimal inset so the metal plate hugs the posters (Maurice:
     the big gaps were AROUND the group, not between posters — so keep the
     inter-poster gap normal and shrink the padding). */
  padding: 2px !important;
  gap: 5px !important;
  /* Height is JS-synced to the squad housing (hud-ap-pool.js); stretch the
     stat screens to fill that height so they're tall posters like the squad. */
  align-items: stretch !important;
  /* Align flush with the top like the AP wrapper (which sits at y=0), and pull
     the right edge left of centre so there's a gap before the AP instead of the
     old joined-banner 4px overlap. Phase 195 rev. */
  top: 0 !important;
  right: calc(50% + 8px + var(--apex-banner-offset, 0px)) !important;
  /* Above the AP cluster (z:40) so the stats' hover callouts + mouse disc
     aren't painted under the now-taller AP block. Phase 195 rev. */
  z-index: 45 !important;
}
/* Hide the Power + Food stat screens for now (Maurice). */
.apex-hud-top-center .apex-stat[data-stat="pwr"],
.apex-hud-top-center .apex-stat[data-stat="food"] {
  display: none !important;
}

/* Phase 231 (2026-07-25, Maurice): hide the segmented tick-meter under each
   stat badge (.apex-stat::after in hud-cockpit.css). It was authored long ago
   but never actually rendered — the callout disc's blanket ::after clobbered it
   — so Maurice never had it. The Phase 230 disc fix stopped that clobbering and
   accidentally revealed it (only on the left stat badges, not SOL/YOU), making
   the strip read as uneven. Hidden to restore the familiar look. */
.apex-hud-top-center .apex-stat::after { display: none !important; }

/* rounded poster corners on each stat screen (they're already glass-framed);
   STACK the label over the value (column) + centre it, so each cell is a narrow
   portrait poster instead of a wide horizontal chip. */
/* ── Stat + AP posters: label at 1/4 height, value at 2/4, "N max" at 3/4.
      Absolute-positioned against the (relative) cell so the fractions are exact,
      regardless of font/box quirks. The value's number is wrapped in
      .apex-stat-num / .apb-num (see hud-game.js + hud-ap-pool.js), and the value
      wrapper is display:contents so number + cap position against the cell. ── */
.apex-hud-top-center .apex-stat {
  border-radius: 4px !important;
  padding: 0 !important;
  width: 64px !important;
  flex: 0 0 64px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.apex-hud-top-center .apex-stat .apex-stat-value { display: contents !important; }

.apex-hud-top-center .apex-stat .apex-stat-label,
.apex-hud-top-center .apex-stat .apex-stat-num,
.apex-hud-top-center .apex-stat .apex-stat-max,
.apex-hud-top-center .apex-stat .apex-stat-cap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}
.apex-hud-top-center .apex-stat .apex-stat-label {
  top: 25% !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(159, 176, 191, 0.85) !important;
}
.apex-hud-top-center .apex-stat .apex-stat-num,
.apex-hud-top-center .apex-stat .apex-stat-max {
  top: 50% !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #8fe3d9 !important;
  text-shadow: 0 0 7px rgba(77, 208, 197, 0.5) !important;
}
.apex-hud-top-center .apex-stat .apex-stat-cap {
  top: 75% !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(159, 176, 191, 0.7) !important;
  text-shadow: none !important;
}
/* Fill-based value colour: teal normally, orange from 85%, red at cap. */
.apex-hud-top-center .apex-stat.is-high .apex-stat-num {
  color: #f5b056 !important;
  text-shadow: 0 0 7px rgba(245, 176, 86, 0.5) !important;
}
.apex-hud-top-center .apex-stat.is-full .apex-stat-num {
  color: #e2564a !important;
  text-shadow: 0 0 8px rgba(226, 86, 74, 0.55) !important;
}

/* The AP panel had overflow:hidden (Phase 191) which clipped its hover callout.
   Let it escape — the inset glass screens don't reach the housing edges, so the
   rounded corners still read fine. Phase 195 rev. */
#apexApBreakdown { overflow: visible !important; }

/* Full colours even for inactive posters (Maurice): don't dim the waiting
   portraits or the disabled Team-FF / Buy screens. */
#apexSquadConsole .asc-portrait.is-waiting,
#apexSquadConsole .asc-ff:disabled,
#apexSquadConsole .asc-buy:disabled {
  opacity: 1 !important;
}

/* AP left cell — identical 1/4, 2/4, 3/4 layout. */
#apexApBreakdown .apb-left { position: relative !important; }
#apexApBreakdown .apb-left .apb-value { display: contents !important; }
#apexApBreakdown .apb-left .apb-label,
#apexApBreakdown .apb-left .apb-num,
#apexApBreakdown .apb-left .apb-cap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}
#apexApBreakdown .apb-left .apb-label {
  top: 25% !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(159, 176, 191, 0.85) !important;
}
#apexApBreakdown .apb-left .apb-num {
  top: 50% !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #8fe3d9 !important;
  text-shadow: 0 0 7px rgba(77, 208, 197, 0.5) !important;
}
#apexApBreakdown .apb-left .apb-cap {
  top: 75% !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(159, 176, 191, 0.7) !important;
  text-shadow: none !important;
}