/* In-game HUD: player panel (full and compact), turn indicator, turn timer, "your turn" banner, target picking.
   Needs tokens.css, base.css, components.css. Markup reference: js/hud.js (STATION.hud.*).

   Player panel states (data-state on .hp): idle | active | targetable | untargetable | eliminated | disconnected
   Seat colour comes from data-seat="p1..p4" (tokens.css sets --seat and --seat-rgb). */

/* ---------- player panel ---------- */
.hp:not([data-seat]) { --seat: var(--c-gold); --seat-rgb: 255 210 122; }
.hp {
  position: relative; min-width: 0;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2), inset 3px 0 0 -1px rgb(var(--seat-rgb) / 0.9);
  transition: box-shadow var(--dur-base) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard), filter var(--dur-slow) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.hp__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hp__emblem { width: 16px; height: 16px; flex: none; color: var(--seat); }
.hp__name { flex: 1; min-width: 0; font: 500 var(--fs-body)/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp__team { font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; padding: 3px 5px; border-radius: var(--r-xs); border: 1px solid var(--c-line-strong); color: var(--c-gold); flex: none; }
.hp__cards { display: inline-flex; gap: var(--sp-2); flex: none; font: 400 var(--fs-label)/1 var(--font-mono); color: var(--c-text-2); }
.hp__cards span { display: inline-flex; align-items: center; gap: 2px; }
.hp__cards .ico { width: 14px; height: 14px; --icon-stroke: 2; color: var(--c-text-3); }

/* Habitat and Armour bars: number, then hairline with glowing head */
.hp__bars { display: grid; gap: 6px; }
.hp__bar { display: grid; grid-template-columns: 18px 3ch 1fr; align-items: center; gap: 6px; }
.hp__bar .ico { width: 18px; height: 18px; }
.hp__num { font: 500 var(--fs-body)/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.hp__bar--habitat { color: var(--c-habitat); }
.hp__bar--armour { color: var(--c-armour); }
.hp__bar--habitat .hp__num, .hp__bar--armour .hp__num { color: var(--c-text); }
.hp__bar .progress { --bar: currentColor; }
.hp__bar .progress__fill { background: currentColor; }
.hp__bar .progress__fill::after { background: currentColor; box-shadow: 0 0 10px currentColor; }
.hp__bar .progress::after { /* goal tick at the win line (100) for Habitat */
  content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 1px; background: rgb(var(--fg-rgb) / 0.3);
}
.hp__bar--armour .progress::after { display: none; }
.hp__bar--armour.is-over .progress__fill::after { box-shadow: 0 0 14px 3px currentColor; } /* Armour at its maximum (100) */
.hp__bar.is-critical { color: var(--c-danger); }
.hp__bar.is-critical .hp__num { color: var(--c-danger); }

/* resources: amount, and production per turn with the crew icon */
.hp__res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.res { --res: var(--c-text); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 4px;
  padding: 5px 6px; border-radius: var(--r-sm); background: rgb(var(--bg-rgb) / 0.55); border: 1px solid rgb(var(--res-rgb) / 0.28); min-width: 0; }
.res--alloy { --res: var(--c-alloy); --res-rgb: var(--c-alloy-rgb); }
.res--power { --res: var(--c-power); --res-rgb: var(--c-power-rgb); }
.res--ordnance { --res: var(--c-ordnance); --res-rgb: var(--c-ordnance-rgb); }
.res > .ico { width: 18px; height: 18px; color: var(--res); grid-row: 1; }
.res__n { font: 500 var(--fs-body-lg)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-text); }
.res__prod { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
  font: 400 var(--fs-caption)/1 var(--font-mono); color: var(--c-text-2); white-space: nowrap; }
.res__prod .ico { width: 14px; height: 14px; color: var(--res); --icon-stroke: 2; --icon-bg: var(--c-void-raised); }
.res__prod b { font-weight: 500; color: var(--res); }
.res.is-diverted { border-color: var(--res); box-shadow: 0 0 10px rgb(var(--res-rgb) / 0.35); }
.res.is-zeroed .res__prod { opacity: 0.5; text-decoration: line-through; }

/* buffs and pending production effect */
.hp__buffs { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; align-items: center; }
.buff { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid rgb(var(--fg-rgb) / 0.12); color: var(--c-text-3); opacity: 0.45; background: rgb(var(--bg-rgb) / 0.4); }
.buff .ico { width: 16px; height: 16px; --icon-stroke: 2; }
.buff.is-on { opacity: 1; color: var(--c-gold); border-color: rgb(var(--signal-rgb) / 0.6); box-shadow: 0 0 10px rgb(var(--signal-rgb) / 0.3); background: rgb(var(--signal-rgb) / 0.08); }
.buff--prod.is-on { color: var(--c-pearl); border-color: rgb(var(--fg-rgb) / 0.5); box-shadow: none; }
.buff--prod.is-alloy { color: var(--c-alloy); border-color: var(--c-alloy); }
.buff--prod.is-power { color: var(--c-power); border-color: var(--c-power); }
.buff--prod.is-ordnance { color: var(--c-ordnance); border-color: var(--c-ordnance); }
.buff--prod.is-blocked { color: var(--c-danger); border-color: var(--c-danger); }
.hp__buffs-label { font: 400 var(--fs-caption) var(--font-mono); color: var(--c-text-3); margin-left: auto; }

/* status line / overlay (eliminated, disconnected, target prompt) */
.hp__flag { display: none; }
.hp__flag .ico { width: 16px; height: 16px; --icon-stroke: 2; }

/* ---------- states ---------- */
.hp[data-state="active"] {
  border-color: rgb(var(--seat-rgb) / 0.75);
  box-shadow: var(--sh-2), inset 3px 0 0 -1px rgb(var(--seat-rgb)), 0 0 0 1px rgb(var(--seat-rgb) / 0.5), 0 0 24px rgb(var(--seat-rgb) / 0.3);
}
.hp[data-state="targetable"] {
  cursor: pointer; border-color: var(--c-danger);
  box-shadow: var(--sh-2), 0 0 0 1px var(--c-danger), 0 0 20px rgb(var(--danger-rgb) / 0.35);
  animation: hp-target 1200ms var(--ease-standard) infinite;
}
.hp[data-state="targetable"]:hover, .hp[data-state="targetable"].is-picked { transform: translateY(-2px); animation: none;
  box-shadow: var(--sh-2), 0 0 0 2px var(--c-danger), 0 0 28px rgb(var(--danger-rgb) / 0.55); }
.hp[data-state="targetable"] .hp__flag, .hp[data-state="untargetable"] .hp__flag,
.hp[data-state="eliminated"] .hp__flag, .hp[data-state="disconnected"] .hp__flag {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%); z-index: 1;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill); white-space: nowrap;
  font: 500 var(--fs-caption)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.hp[data-state="targetable"] .hp__flag { background: var(--c-danger); color: var(--c-void); }
.hp[data-state="untargetable"] { opacity: 0.45; filter: saturate(0.4); }
.hp[data-state="untargetable"] .hp__flag { background: var(--c-obsidian); color: var(--c-text-2); border: 1px solid var(--c-line-neutral); }
.hp[data-state="eliminated"] { filter: grayscale(1); opacity: 0.5; box-shadow: var(--sh-1); }
.hp[data-state="eliminated"] .hp__flag { background: var(--c-obsidian); color: var(--c-text); border: 1px solid var(--c-line-neutral); }
.hp[data-state="eliminated"] .hp__bars, .hp[data-state="eliminated"] .hp__res, .hp[data-state="eliminated"] .hp__buffs { opacity: 0.6; }
.hp[data-state="disconnected"] { border-style: dashed; border-color: var(--c-warning); }
.hp[data-state="disconnected"] .hp__flag { background: var(--c-warning); color: var(--c-void); }
@keyframes hp-target { 0%, 100% { box-shadow: var(--sh-2), 0 0 0 1px var(--c-danger), 0 0 12px rgb(var(--danger-rgb) / 0.25); }
  50% { box-shadow: var(--sh-2), 0 0 0 1px var(--c-danger), 0 0 26px rgb(var(--danger-rgb) / 0.55); } }
@media (prefers-reduced-motion: reduce) { .hp[data-state="targetable"] { animation: none; } }

/* ---------- compact panel (opponents on a phone) ---------- */
.hp--compact { padding: 8px 8px 7px; gap: 6px; border-radius: var(--r-md); }
.hp--compact .hp__name { font-size: var(--fs-small); }
.hp--compact .hp__emblem { width: 13px; height: 13px; }
.hp--compact .hp__bar { grid-template-columns: 14px 2.6ch 1fr; gap: 4px; }
.hp--compact .hp__bar .ico { width: 14px; height: 14px; --icon-stroke: 2; }
.hp--compact .hp__num { font-size: var(--fs-small); }
.hp--compact .hp__bars { gap: 5px; }
.hp--compact .hp__res { gap: 3px; }
.hp--compact .res { display: flex; gap: 2px; padding: 3px 2px; justify-content: center; border-radius: 6px; }
.hp--compact .res > .ico { width: 13px; height: 13px; --icon-stroke: 2; }
.hp--compact .res__n { font-size: var(--fs-label); }
.hp--compact .res__prod { display: none; }
.hp--compact .hp__buffs { min-height: 18px; gap: 3px; }
.hp--compact .buff { width: 18px; height: 18px; border-radius: 5px; }
.hp--compact .buff .ico { width: 12px; height: 12px; }
.hp--compact .buff:not(.is-on) { display: none; }
.hp--compact .hp__cards { display: none; }
.hp__hand-mini { display: none; }
.hp--compact .hp__hand-mini { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font: 400 var(--fs-caption)/1 var(--font-mono); color: var(--c-text-2); }
.hp--compact .hp__hand-mini .ico { width: 12px; height: 12px; --icon-stroke: 2; color: var(--c-text-3); }
.hp--compact .hp__team { padding: 2px 3px; font-size: 9px; }

/* opponents row: 1-3 compact panels side by side */
.opponents { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--sp-2); }

/* ---------- turn indicator ---------- */
.turnbar { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.turnbar__order { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; overflow: hidden; }
.turnbar__seat:not([data-seat]) { --seat: var(--c-text-3); }
.turnbar__seat { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--r-pill);
  color: var(--c-text-3); font: 500 var(--fs-caption)/1 var(--font-mono); white-space: nowrap; border: 1px solid transparent; }
.turnbar__seat .ico { width: 13px; height: 13px; color: var(--seat); }
.turnbar__seat.is-active { color: var(--c-text); border-color: rgb(var(--seat-rgb) / 0.7); background: rgb(var(--seat-rgb) / 0.12); }
.turnbar__seat.is-out { text-decoration: line-through; opacity: 0.45; }
.turnbar__seat.is-out .ico { color: var(--c-text-3); }
.turnbar__sep { width: 8px; height: 8px; flex: none; color: var(--c-text-3); opacity: 0.6; }
.turnbar__label { font: 500 var(--fs-small)/1.2 var(--font-body); white-space: nowrap; }
.turnbar__label b { color: var(--seat, var(--c-gold)); font-weight: 600; }
.turnbar__round { font: 400 var(--fs-caption) var(--font-mono); color: var(--c-text-3); white-space: nowrap; }

/* ---------- turn timer: ring, --t from 1 (full) to 0 ---------- */
.timer { --t: 1; --size: 40px; --timer: var(--c-gold); position: relative; width: var(--size); height: var(--size); flex: none; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 3; }
.timer .timer__track { stroke: rgb(var(--fg-rgb) / 0.12); }
.timer .timer__fill { stroke: var(--timer); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--t) * 100);
  transition: stroke-dashoffset 1000ms var(--ease-linear), stroke var(--dur-base); filter: drop-shadow(0 0 3px var(--timer)); }
.timer__n { font: 500 var(--fs-small)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.timer.is-low { --timer: var(--c-warning); }
.timer.is-critical { --timer: var(--c-danger); animation: timer-pulse 1000ms var(--ease-standard) infinite; }
@keyframes timer-pulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .timer.is-critical { animation: none; } }

/* ---------- "your turn" banner ---------- */
.banner {
  position: absolute; z-index: var(--z-banner); left: 0; right: 0; top: 38%;
  display: grid; justify-items: center; gap: 4px; padding: var(--sp-4) var(--sp-4);
  pointer-events: none; text-align: center;
  background: linear-gradient(90deg, transparent, rgb(var(--bg-rgb) / 0.85) 20%, rgb(var(--bg-rgb) / 0.85) 80%, transparent);
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--c-gold), transparent) 1;
}
.banner__title { font: 500 var(--fs-display)/1 var(--font-display); color: var(--c-gold); letter-spacing: 0.02em; text-shadow: 0 0 24px rgb(var(--signal-rgb) / 0.5); }
.banner__sub { font: 400 var(--fs-small) var(--font-body); color: var(--c-text-2); }
.banner--enter { animation: banner-in var(--dur-deliberate) var(--ease-out) both, banner-out var(--dur-slow) var(--ease-in) 1600ms both; }
.banner--static { position: relative; top: auto; }
.banner--danger .banner__title { color: var(--c-danger); text-shadow: 0 0 24px rgb(var(--danger-rgb) / 0.5); }
.banner--danger { border-image: linear-gradient(90deg, transparent, var(--c-danger), transparent) 1; }
@keyframes banner-in { from { opacity: 0; transform: scaleX(0.6); clip-path: inset(0 50%); } to { opacity: 1; transform: none; clip-path: inset(0 0); } }
@keyframes banner-out { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- target picking ---------- */
.target-bar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-lg); background: var(--c-glass-strong); border: 1px solid var(--c-danger);
  box-shadow: var(--sh-2), 0 0 18px rgb(var(--danger-rgb) / 0.25);
}
.target-bar > .ico { color: var(--c-danger); }
.target-bar__text { flex: 1; min-width: 0; font: 500 var(--fs-small)/1.3 var(--font-body); }
.target-bar__text b { color: var(--c-text); }
.target-bar__text span { display: block; color: var(--c-text-3); font-weight: 400; font-size: var(--fs-label); }

/* hit numbers that float off a panel (see motion-spec.md) */
.float-num { position: absolute; font: 600 var(--fs-h3)/1 var(--font-mono); pointer-events: none; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.float-num--dmg { color: var(--c-danger); }
.float-num--gain { color: var(--c-gold); }

/* ---------- board animation layer (js/fx-dom.js) ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); }
.fx-flash { position: absolute; inset: 0; border-radius: inherit; background: #FFFFFF; pointer-events: none; opacity: 0; z-index: 3; }
.fx-chip { position: fixed; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--c-void); border: 1px solid currentColor; font: 500 13px/1 var(--font-mono); white-space: nowrap; box-shadow: var(--sh-2); }
.fx-chip .ico { width: 16px; height: 16px; --icon-stroke: 2; }
.fx-played { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  display: grid; justify-items: center; gap: 6px; text-align: center; }
.fx-played__line { font: 500 var(--fs-label)/1.3 var(--font-body); color: var(--c-text-2); background: rgb(var(--bg-rgb) / 0.85);
  padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.fx-played__line b { color: var(--c-text); }
.fx-banner { z-index: 5; }
.float-num--info { color: var(--c-text); }
.float-num--block { color: var(--c-gold); }
/* game controls in the top bar: speed and skip */
.game-ctl { display: inline-flex; gap: 2px; flex: none; }
.game-ctl .btn { min-height: 32px; padding: 0 8px; font: 500 var(--fs-label)/1 var(--font-mono); border-radius: var(--r-sm); }
.game-ctl .btn[aria-pressed="true"] { --btn-bg: rgb(var(--signal-rgb) / 0.18); --btn-line: rgb(var(--signal-rgb) / 0.6); color: var(--c-gold); }
@media (max-width: 899px) { .game-ctl .btn { padding: 0 6px; min-height: 30px; } }