/* ==== src/onboarding-first10.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   FIRST10-UI-VISUAL-LANGUAGE-01 (#2147) — Cohesive sci-fi style for
   the first-10 onboarding HUD surfaces.

   Modules consuming these classes:
     - src/onboarding-quest-tracker.js  (#onboarding-quest-tracker)

   Color tokens (matches the broader Alaknanda sci-fi palette):
     --oui-cyan-accent:      cyan-teal accent ring (Alaknanda primary)
     --oui-cyan-glow:        cyan haze for box-shadow
     --oui-panel-bg:         translucent dark hull
     --oui-text-primary:     readable foreground
     --oui-text-muted:       faded subhead
     --oui-blocked-accent:   red hazard ring
     --oui-blocked-glow:     red hazard glow

   The classes are additive — the inline styles in the JS modules
   still set baseline geometry, this stylesheet adjusts the color
   tokens + adds a subtle pulse on the active variant. Honors
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --oui-cyan-accent:    rgba(110, 180, 220, 0.42);
  --oui-cyan-accent-2:  rgba(110, 180, 220, 0.36);
  --oui-cyan-glow:      rgba(6, 182, 212, 0.16);
  --oui-panel-bg:       rgba(10, 18, 28, 0.86);
  --oui-text-primary:   #cfe4f1;
  --oui-text-muted:     #7fb6d6;
  --oui-text-active:    #fde68a;
  --oui-text-completed: #94a3b8;
  --oui-blocked-accent: rgba(239, 68, 68, 0.55);
  --oui-blocked-glow:   rgba(239, 68, 68, 0.20);
  --oui-blocked-text:   #fca5a5;
}

/* ── Quest tracker (top-right) ────────────────────────────────── */
.onboarding-quest-tracker {
  border-color: var(--oui-cyan-accent-2) !important;
  background:   var(--oui-panel-bg) !important;
  color:        var(--oui-text-primary) !important;
  box-shadow:   0 2px 12px var(--oui-cyan-glow) !important;
  backdrop-filter: blur(2px);
}
.onboarding-quest-tracker .oqt-title {
  color: var(--oui-text-muted) !important;
}

/* ═══ WAVE8-KIT-UNIFY-01 — onboarding tokens remapped to the SURGE Console kit
   (kills the parallel --oui-* branding; scope re-declared later = wins) ═══ */
:root, .onboarding-quest-tracker{
  --oui-panel-bg: rgba(13,20,29,.95);
  --oui-cyan-accent: var(--k-cy);
  --oui-cyan-accent-2: var(--k-cy-deep);
  --oui-cyan-glow: var(--k-cy-glow);
  --oui-text-primary: var(--k-ink);
  --oui-text-muted: var(--k-ink3);
  --oui-text-active: var(--k-cy);
  --oui-text-completed: var(--k-ok);
  --oui-blocked-accent: var(--k-warn);
  --oui-blocked-text: var(--k-warn);
  --oui-blocked-glow: rgba(255,169,56,.22);
}
.oqt-title{font-family:var(--k-disp);letter-spacing:.05em;}

/* ==== src/ren-retrieval-modal.css ==== */
/* src/ren-retrieval-modal.css
 * UI-FEEDBACK-21 (#2679) — Ren retrieval modal styles.
 * Follows existing modal conventions. Design tokens will migrate when
 * Sprint 3B lands; for now using the same variable names as styles.css.
 */

/* ── Overlay backdrop ─────────────────────────────────────────────────────── */

.ren-retrieval-modal {
  /* Hidden by default; UIWindowManager sets display:flex on open. */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200; /* UI_Z_MODAL from ui-window-manager.js */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  font-family: 'Roboto Mono', monospace, sans-serif;
}

/* ── Modal inner box ──────────────────────────────────────────────────────── */

.ren-retrieval-modal__inner {
  background: #0e1a26;
  border: 1px solid #1b3a52;
  border-radius: 6px;
  min-width: 360px;
  max-width: 520px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.ren-retrieval-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #1b3a52;
  flex-shrink: 0;
}

.ren-retrieval-modal__title {
  margin: 0;
  font-size: 15px;
  color: #7ef0f0; /* cyan — project art bible binding */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Countdown timer ──────────────────────────────────────────────────────── */

.ren-retrieval-timer {
  font-size: 14px;
  color: #7ef0f0;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.ren-retrieval-timer--expired {
  color: #d94f4f;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.ren-retrieval-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 10px;
}

.ren-retrieval-modal__subtitle {
  margin: 0 0 12px;
  font-size: 12px;
  color: #8aaec7;
  line-height: 1.4;
}

/* ── Item list ────────────────────────────────────────────────────────────── */

.ren-retrieval-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ren-retrieval-empty {
  color: #8aaec7;
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

/* ── Individual item row ──────────────────────────────────────────────────── */

.ren-retrieval-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2px 8px;
  align-items: start;
  padding: 10px 10px 10px 8px;
  background: #0a1622;
  border: 1px solid #1b3a52;
  border-radius: 4px;
}

.ren-retrieval-item--claimed {
  background: #071018;
  border-color: #1a3b2a;
  opacity: 0.7;
}

.ren-retrieval-item__checkbox {
  grid-row: 1 / span 2;
  grid-column: 1;
  margin-top: 3px;
  accent-color: #7ef0f0;
  cursor: pointer;
}

.ren-retrieval-item__name {
  grid-row: 1;
  grid-column: 2;
  font-size: 13px;
  color: #cfe7f5;
  font-weight: 500;
}

.ren-retrieval-item__source {
  grid-row: 2;
  grid-column: 2;
  font-size: 11px;
  color: #8aaec7;
}

.ren-retrieval-item__cost {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: 12px;
  color: #e2c870;
  text-align: right;
  white-space: nowrap;
}

.ren-retrieval-item__error {
  grid-row: 3;
  grid-column: 1 / -1;
  display: none;
  font-size: 11px;
  color: #d94f4f;
  padding-top: 4px;
}

.ren-retrieval-item__retrieved {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #4ec98c;
  font-weight: 500;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ren-retrieval-modal__footer {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid #1b3a52;
  flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.ren-retrieval-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  text-transform: uppercase;
  transition: background-color 0.12s, opacity 0.12s;
}

.ren-retrieval-btn--primary {
  background: #7ef0f0;
  color: #071018;
  border-color: #7ef0f0;
}

.ren-retrieval-btn--primary:hover:not(:disabled) {
  background: #a4f5f5;
}

.ren-retrieval-btn--primary:disabled {
  opacity: 0.4;
  cursor: default;
}

.ren-retrieval-btn--secondary {
  background: transparent;
  color: #8aaec7;
  border-color: #1b3a52;
}

.ren-retrieval-btn--secondary:hover {
  border-color: #7ef0f0;
  color: #cfe7f5;
}

/* ==== src/ui-death-overlay.css ==== */
/* src/ui-death-overlay.css
 * UI-FEEDBACK-20 (#2802) — Death-state overlay modal.
 * Template 5 (ui-system-v2-modal-templates.md): centered ~720×360 band over
 * the visible world. World canvas continues rendering above and below, at
 * full brightness — the backdrop is transparent so the world stays fully
 * visible (no grey/black-out); only the band itself is opaque.
 * z-index: 9999 — highest in the app per Template 5 z-order spec.
 */

/* ── Backdrop (full-viewport, transparent — world stays fully visible) ── */

#ui-death-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: auto;
}

#ui-death-overlay.is-open {
  display: flex;
}

/* ── Band container (~720×auto, max 360px height) ────────────────────── */

.death-overlay__band {
  width: 720px;
  max-width: calc(100vw - 48px);
  background: rgba(10, 10, 20, 0.96);
  border: 1px solid rgba(255, 60, 60, 0.30);
  border-radius: 10px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 0 48px rgba(200, 30, 30, 0.18);
}

/* ── Headline ────────────────────────────────────────────────────────── */

.death-overlay__headline {
  font-size: 28px;
  font-weight: 800;
  color: #f87171;
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

/* DEATH-DUR-UI (sprint 6.5): cause sub-line under YOU FELL + banked-safe note. */
.death-overlay__cause {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbd5e1;
  opacity: 0.85;
  margin: 2px 0 4px;
}
.death-overlay__safe-note {
  font-size: 12px;
  color: #86efac;
  margin: 6px 0 2px;
}

/* ── Section rows ────────────────────────────────────────────────────── */

.death-overlay__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.death-overlay__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 210, 220, 0.50);
}

.death-overlay__section-value {
  font-size: 14px;
  color: #c4ccd8;
  line-height: 1.5;
}

/* ── Per-slot durability damage list ─────────────────────────────────── */
/* Durability model: equipped gear is DAMAGED (current ↓), never destroyed.
   Each row leads with a condition ICON + WORD (.death-overlay__slot-cond) so
   severity never depends on colour alone (WCAG 2.2 §1.4.1). Row text is
   neutral; colour is a redundant fourth channel keyed by condition. */

.death-overlay__slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.death-overlay__slot-item {
  font-size: 13px;
  color: #c4ccd8;            /* neutral — severity carried by the condition tag */
  padding-left: 12px;
  position: relative;
}

.death-overlay__slot-item::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(200, 210, 220, 0.45);
}

/* Condition tag — the non-colour signal (icon + word). Fixed-width so the
   labels align into a column the eye can scan. */
.death-overlay__slot-cond {
  display: inline-block;
  min-width: 96px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.death-overlay__slot-cond--healthy  { color: #86efac; }
.death-overlay__slot-cond--damaged  { color: #fde047; }
.death-overlay__slot-cond--critical { color: #fb923c; }
.death-overlay__slot-cond--low      { color: #f87171; }
.death-overlay__slot-cond--broken   { color: #ef4444; }
/* GEAR-MORTALITY-01 (#6331) — terminal is its own band, not a shade of broken. */
.death-overlay__slot-cond--worn_out { color: #c084fc; }

/* BROKEN tag (in the summary line and on a broken row). */
.death-overlay__broken {
  color: #ef4444;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* GEAR-MORTALITY-01 (#6331) — "NO REPAIRS LEFT". Deliberately NOT red: this is
   not a worse break, it is a different fact, and the death screen is the last
   place the player can still act on it (salvage, craft a replacement) before
   the item strands them mid-run. Colour is a second channel only — the word
   carries the meaning (WCAG 2.2 §1.4.1). */
.death-overlay__worn {
  color: #c084fc;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Retrieval countdown ─────────────────────────────────────────────── */

.death-overlay__countdown {
  font-size: 13px;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}

.death-overlay__countdown--expired {
  color: rgba(200, 210, 220, 0.45);
}

/* ── XP delta ────────────────────────────────────────────────────────── */

.death-overlay__xp-delta {
  font-size: 13px;
  color: #fb923c;
}

/* ── CTA row ─────────────────────────────────────────────────────────── */

.death-overlay__cta-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 4px;
}

.death-overlay__btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: opacity 0.1s;
}

.death-overlay__btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Respawn — the PRIMARY (and only) forward action on the death screen. A filled,
   high-contrast "get back in" green so it reads as the obvious CTA against the dark
   red-tinted panel (the layout-only .death-overlay__btn had no colour → invisible). */
.death-overlay__btn--respawn {
  background: rgba(74, 222, 128, 0.20);
  border-color: rgba(74, 222, 128, 0.60);
  color: #bbf7d0;
  font-weight: 700;
}
.death-overlay__btn--respawn:hover {
  background: rgba(74, 222, 128, 0.32);
}

.death-overlay__btn--ren {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
}

.death-overlay__btn--ren:hover {
  background: rgba(56, 189, 248, 0.25);
}

.death-overlay__btn--skip {
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(100, 116, 139, 0.35);
  color: #94a3b8;
}

.death-overlay__btn--skip:hover {
  background: rgba(100, 116, 139, 0.30);
}

/* Hide Ren CTA when retrieval window is expired */
.death-overlay__btn--ren.is-hidden {
  display: none;
}

/* ==== src/ui-downed-overlay.css ==== */
/* src/ui-downed-overlay.css
 * L1.22 (#L1-22-DOWNED-STATE-01) — Downed-state overlay modal.
 * Same centered-band template as ui-death-overlay.css, amber-tinted (not
 * red) to read as distinct from — and less severe than — the death overlay:
 * this is a grace state, not the final outcome. Amber matches the existing
 * party-frames.js DOWN treatment (#f59e0b) so the color language is
 * consistent across both surfaces a player might see this state on.
 */

#ui-downed-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998; /* one below ui-death-overlay (9999) — death always wins a race */
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent; /* world stays fully visible — no grey/black-out */
  pointer-events: auto;
}

#ui-downed-overlay.is-open {
  display: flex;
}

.downed-overlay__band {
  width: 420px;
  max-width: calc(100vw - 48px);
  background: rgba(10, 10, 20, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 0 48px rgba(245, 158, 11, 0.16);
}

.downed-overlay__headline {
  font-size: 26px;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.downed-overlay__note {
  font-size: 13px;
  color: #c4ccd8;
  margin: 0;
}

.downed-overlay__cta-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 4px;
}

.downed-overlay__btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: opacity 0.1s;
}

.downed-overlay__btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.downed-overlay__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.downed-overlay__btn--respawn {
  background: rgba(74, 222, 128, 0.20);
  border-color: rgba(74, 222, 128, 0.60);
  color: #bbf7d0;
  font-weight: 700;
}
.downed-overlay__btn--respawn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.32);
}

/* ==== src/hud-layout.css ==== */
/* src/hud-layout.css
 * HUD-CORE-01 (#2785) — HUD layout baseline.
 * Structural skeleton for the four HUD regions. No visual branding here —
 * that belongs to Sprint 3B visual tokens.
 *
 * Walk-while-open guarantee: #hud-root is pointer-events: none at the
 * container level. Sub-regions opt back in with pointer-events: auto.
 * This ensures WASD movement keys are NEVER captured by the HUD container.
 */

/* ── #hud-root container ─────────────────────────────────────────────────── */

#hud-root {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left: 0 */
  z-index: 100;                   /* HUD_DENSITY.Z_HUD */
  pointer-events: none;           /* WALK-WHILE-OPEN: never capture WASD */
  display: none;                  /* hidden until startGame(); prevents bleed-through onto start/gameover screens */
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "top-row   top-row      top-row"
    "player-f  .            right-sb"
    "bottom    bottom       bottom";
}

/* ── Top row ─────────────────────────────────────────────────────────────── */

#hud-top-row {
  grid-area: top-row;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: 44px;               /* HUD_DENSITY.MIN_TOUCH_TARGET_PX */
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* ── Left player frame ───────────────────────────────────────────────────── */

/* HUD-LAYOUT-CLEANUP-01: the legacy HUD-CORE-02 player frame (name + HP bar +
   "Lv N" chip, built by src/hud-player-frame.js into this region) is a
   REDUNDANT duplicate of the full left-edge progression panel #prog-hud
   (name / SOMA / HP / Base Lvl / Job Lvl / Crafting / Harvesting). #prog-hud
   is the single source of player-status presentation, so this region is
   suppressed. The HudPlayerFrame module + its unit tests + the
   smoke-browser-load.test.js load-order contract are intentionally left
   intact (presentation-only hide; no contract/load-order churn) — display:none
   removes the visible duplicate without touching the module graph. */
#hud-player-frame {
  display: none;
}

/* ── Right sidebar ───────────────────────────────────────────────────────── */

/* HUD-NAV-ICONS-01: #side-panel removed — right sidebar holds #inv-panel
   (position:fixed, opts back in via its own pointer-events:auto),
   #hud-obj-tracker (HUD-ACTIVITY-BAR-01: real flex-column participant), and
   #hud-activity-bar (below it — see src/hud-activity-bar.js).
   pointer-events:none prevents empty padding from blocking game clicks. */
#hud-right-sidebar {
  grid-area: right-sb;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0;
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* HUD-ACTIVITY-BAR-01: isolated "activity" icon cluster (Progression today —
   a Journal/Challenges-style icon could join later), deliberately separate
   from the main #hud-nav-bar action-bar row (matches Albion's Destiny Board
   placement). Positioned below #hud-obj-tracker purely via DOM order in the
   flex column above — grows/shrinks automatically as the tracker's real
   height changes (more/fewer pinned quests), no JS coordination needed.
   pointer-events:auto opts back in (parent is pointer-events:none). */
#hud-activity-bar {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  gap: 4px;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */

#hud-bottom-bar {
  grid-area: bottom;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: 44px;               /* HUD_DENSITY.MIN_TOUCH_TARGET_PX */
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* ── HUD-COMPACT-SCALE-01: small / narrow window scaling ──────────────────── */
/* The always-on HUD chrome is authored at fixed px for the 1920×1080 reference.
 * On a small or non-16:9 window those panels overflow the letterboxed play area
 * and the game becomes unplayable. src/canvas-setup.js (_updateHudScale) sets
 * `--hud-scale` = visible-game-box / reference and adds `.hud-compact` to <html>
 * ONLY when below full size — so there is NO transform (and no stacking-context
 * / containing-block side effects) on a normal desktop window.
 *
 * Each panel scales toward the viewport corner it is anchored to (matching its
 * top/left/right/bottom in styles.css) so it shrinks in place without drifting
 * over the play area or off-screen. The hotbar tooltip + assign-picker are
 * appended to <body> and positioned via getBoundingClientRect, so the bottom-bar
 * transform does not re-root them — it just scales their anchor point too. */
html.hud-compact #player-vital-frame { transform: scale(var(--hud-scale, 1)); transform-origin: top left; }
html.hud-compact #prog-hud           { transform: scale(var(--hud-scale, 1)); transform-origin: top left; }
html.hud-compact .chat-panel         { transform: scale(var(--hud-scale, 1)); transform-origin: bottom left; }
html.hud-compact #hud-top-row        { transform: scale(var(--hud-scale, 1)); transform-origin: top right; }
html.hud-compact #hud-bottom-bar     { transform: scale(var(--hud-scale, 1)); transform-origin: bottom center; }
html.hud-compact #hud-obj-tracker    { transform: scale(var(--hud-scale, 1)); transform-origin: top right; }

/* ==== src/hud-player-frame.css ==== */
/* src/hud-player-frame.css
 * HUD-CORE-02 (#2786) — Player frame styles.
 * Structural only — no visual branding tokens (deferred to Sprint 3B).
 */

/* ── Root inner wrapper ───────────────────────────────────────────────────── */

#hud-player-frame-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
}

/* ── Skeleton (connecting state) ──────────────────────────────────────────── */

.hud-pf--skeleton {
  min-height: 60px;
  opacity: 0.4;
}

/* ── Player name ──────────────────────────────────────────────────────────── */

.hud-pf__name {
  font-size: 14px;               /* HUD_DENSITY.BASE_FONT_PX */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ── Health bar ───────────────────────────────────────────────────────────── */

.hud-pf__hp {
  position: relative;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.hud-pf__hp-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: #4caf50;
  border-radius: 2px;
  /* JUICE-GHOST-BAR-01: front bar SNAPS (fighting-game convention: the real
     value updates instantly; the ghost carries the damage-magnitude read). */
  transition: width 0.08s linear;
}

/* JUICE-GHOST-BAR-01: trailing damage ghost. Sits UNDER the green fill (earlier
   sibling). On damage the green fill snaps down revealing the pale band; the
   transition-delay holds the band ~0.5s, then it drains 0.35s ease-out. A burst
   of hits keeps restarting the delay, so the ghost accumulates the burst. */
.hud-pf__hp-ghost {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: rgba(255, 214, 186, 0.85);
  border-radius: 2px;
  transition: width 0.35s ease-out 0.5s;
}

/* snap helper: suppress the transition for one write (heals / rollover reset) */
.hud-pf--no-anim { transition: none !important; }

/* JUICE-GHOST-BAR-01: XP gain pulse — brief brightness flash on the fill */
.hud-pf__xp-fill--pulse { animation: hudPfXpPulse 0.25s ease-out; }
@keyframes hudPfXpPulse {
  0%   { filter: brightness(2.4); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-pf__hp-ghost { transition: none; }
  .hud-pf__xp-fill--pulse { animation: none; }
}

.hud-pf__hp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
  user-select: none;
}

/* ── Progression row ──────────────────────────────────────────────────────── */

.hud-pf__prog {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-pf__level {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── XP bar ───────────────────────────────────────────────────────────────── */

.hud-pf__xp {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.hud-pf__xp-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: #9c7cff;
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* ── Status effects ───────────────────────────────────────────────────────── */

.hud-pf__effects {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  min-height: 16px;
}

.hud-pf__effect {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  cursor: default;
}

.hud-pf__effect--buff   { border: 1px solid #4caf50; }
.hud-pf__effect--debuff { border: 1px solid #f44336; }
.hud-pf__effect--neutral{ border: 1px solid #9e9e9e; }

.hud-pf__effect-icon {
  width: 14px;
  height: 14px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hud-pf__effect-stacks {
  position: absolute;
  bottom: 0;
  right: 1px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

.hud-pf__effect-overflow {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  align-self: center;
  padding-left: 2px;
}

/* ═══ HUD-KIT-TOKENS-01 — type + surface only; HP/XP signal colors untouched ═══ */
.hud-pf__name{font-family:var(--k-disp);letter-spacing:.05em;}
.hud-pf__level{font-family:var(--k-disp);letter-spacing:.06em;}
.hud-pf__hp-label{font-family:var(--k-disp);letter-spacing:.08em;}
.hud-pf__hp,.hud-pf__xp{background:rgba(8,14,20,.8);border:1px solid rgba(36,54,70,.6);}

/* ==== src/hud-target-frame.css ==== */
/* src/hud-target-frame.css
 * HUD-CORE-03 (#2787) — Target frame styles.
 * Hidden by default; shown only when target is non-null.
 * Structural only — no visual branding tokens (deferred to Sprint 3B).
 */

/* ── Root inner wrapper ───────────────────────────────────────────────────── */

#hud-target-frame-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  flex-shrink: 0;
}

#hud-target-frame-inner[hidden] {
  display: none;
}

/* ── Target chip container ────────────────────────────────────────────────── */

.hud-tf {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Header row: name + hostile indicator + threat badge ─────────────────── */

.hud-tf__header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hud-tf__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.hud-tf__hostile {
  font-size: 11px;
  font-weight: 700;
  color: #f44336;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Threat level badge ───────────────────────────────────────────────────── */

.hud-tf__threat {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 4px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.hud-tf__threat--safe    { border: 1px solid #4caf50; color: #4caf50; }
.hud-tf__threat--low     { border: 1px solid #8bc34a; color: #8bc34a; }
.hud-tf__threat--medium  { border: 1px solid #ff9800; color: #ff9800; }
.hud-tf__threat--high    { border: 1px solid #f44336; color: #f44336; }
.hud-tf__threat--lethal  { border: 1px solid #9c27b0; color: #e040fb; }

/* ── Target HP bar ────────────────────────────────────────────────────────── */

.hud-tf__hp {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.hud-tf__hp-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  background: #66bb6a;          /* neutral / non-hostile target */
  border-radius: 2px;
  /* PERF-HUD-BAR-TRANSFORM-01: transform:scaleX(), not width — width forces a
     full layout reflow every frame; scaleX is GPU-composited. */
  transition: transform 0.1s ease;
  transform-origin: left;
}

.hud-tf__hp-fill--hostile {
  background: #ef5350;          /* hostile targets: red HP bar */
}

/* ═══ HUD-KIT-TOKENS-01 — type only; HP fills + threat colors untouchable ═══ */
.hud-tf__name{font-family:var(--k-disp);letter-spacing:.05em;}
.hud-tf__threat{font-family:var(--k-disp);}
.hud-tf__hp{background:rgba(8,14,20,.8);border:1px solid rgba(36,54,70,.6);}

/* ==== src/hud-objective-tracker.css ==== */
/* src/hud-objective-tracker.css
 * HUD-CORE-07 (#2793) — Objective tracker styles.
 * Attaches to #hud-right-sidebar (Section 1, Quests).
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Section root ─────────────────────────────────────────────────────────── */

#hud-obj-tracker {
  background: rgba(10, 10, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  margin: 8px;
  min-height: 80px;
  overflow: hidden;
  pointer-events: auto;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.hud-obj__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-obj__section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #64748b;
  text-transform: uppercase;
}

.hud-obj__caret {
  font-size: 10px;
  color: #475569;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.hud-obj__body {
  padding: 8px 10px;
  /* QUEST-MULTIPIN-01: stack up to MAX_PINNED quest cards; scroll if the set
   * would overrun the sidebar rather than pushing other HUD regions. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 42vh;
  overflow-y: auto;
}

.hud-obj__body--hidden {
  display: none;
}

/* ── QUEST-MULTIPIN-01: per-quest card ─────────────────────────────────────── */
/* Each tracked quest is its own block; a thin rule separates stacked cards so
 * multiple objectives read as distinct rows, not one run-on list. */
.hud-obj__quest + .hud-obj__quest {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}

.hud-obj--narrative .hud-obj__quest + .hud-obj__quest {
  border-top-color: rgba(6, 182, 212, 0.18);
}

/* ── Empty placeholder ────────────────────────────────────────────────────── */

.hud-obj__empty {
  font-size: 12px;
  color: #475569;
  font-style: italic;
}

/* ── Objective title ──────────────────────────────────────────────────────── */

.hud-obj__title {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Step list ────────────────────────────────────────────────────────────── */

.hud-obj__steps {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.hud-obj__step {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 1px 0;
  font-size: 12px;
  color: #e2e8f0;
}

.hud-obj__step--done {
  color: #475569;
  text-decoration: line-through;
}

.hud-obj__step-mark {
  flex: 0 0 14px;
  font-size: 12px;
  color: #64748b;
}

.hud-obj__step--done .hud-obj__step-mark {
  color: #22c55e;
}

.hud-obj__step-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-obj__step-prog {
  font-size: 10px;
  color: #94a3b8;
  display: inline-block;
}

/* WRECK-CONTRACTS-CLIENT-06 (#4422) — objective-tick micro-pulse.
 * Single cyan scale/color flash per tick (WCAG 2.3.1-safe: one pulse,
 * no saturated red). Restarted from JS by re-adding the class. */
@keyframes hud-obj-tick-pulse {
  0%   { transform: scale(1);    color: #94a3b8; }
  30%  { transform: scale(1.35); color: #67e8f9; }
  100% { transform: scale(1);    color: #94a3b8; }
}
.hud-obj__step-prog--tick {
  animation: hud-obj-tick-pulse 0.45s ease-out 1;
}

.hud-obj__step--more {
  font-size: 11px;
  color: #475569;
  font-style: italic;
}

/* ── Next hint / teaser ───────────────────────────────────────────────────── */

.hud-obj__teaser {
  font-size: 11px;
  color: #475569;
  font-style: italic;
  margin-top: 4px;
}

/* ── DUAL-QUEST-UI-01: Narrative questline treatment ─────────────────────── */
/* Applied when the active quest is an auto-advancing story chain (isNarrative).
 * Follows the FFXIV + Destiny 2 validated pattern: main questline gets a
 * distinct visual treatment (cyan left-border) vs secondary/side content. */

.hud-obj--narrative {
  border-left: 2px solid rgba(6, 182, 212, 0.60);
}

.hud-obj--narrative .hud-obj__section-label {
  color: #22d3ee;
}

.hud-obj--narrative .hud-obj__header {
  border-bottom-color: rgba(6, 182, 212, 0.18);
}

.hud-obj--narrative .hud-obj__teaser {
  color: #0891b2;
  font-style: normal;
}

/* ═══ HUD-KIT-TOKENS-01 — frame + type; narrative cyan + tick pulse untouched ═══ */
#hud-obj-tracker{border-color:var(--k-line2);border-radius:10px;}
.hud-obj__section-label{font-family:var(--k-disp);}
.hud-obj__title{font-family:var(--k-disp);letter-spacing:.04em;}

/* ==== src/quest-log-panel.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   src/quest-log-panel.css — QUEST-LOG-UI-01 (#5277)

   Quest Log panel chrome. Theme follows settings-panel-v2.css /
   hud-objective-tracker.css conventions: #080f1a plate, #22d3ee cyan
   accents, Segoe UI, uppercase micro-headings.

   A11y notes (ticket AC6):
   - Body text #e2e8f0 on #080f1a ≈ 15.5:1; muted #94a3b8 on #080f1a ≈
     7.2:1 — both clear WCAG 2.2 SC 1.4.3 (4.5:1).
   - Focus indicators: 2px solid #22d3ee outline (≥3:1 against the plate,
     SC 2.4.7 / 1.4.11).
   - Status is icon + label, never color-only (SC 1.4.1).
   - The only animation (panel fade) is gated by prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

#quest-log-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 150;
  width: min(720px, 96vw);
  max-height: 82vh;
  flex-direction: column;
  background: #080f1a;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 10px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(34, 211, 238, 0.05);
  color: #e2e8f0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 14px 16px 16px;
}
@media (prefers-reduced-motion: no-preference) {
  #quest-log-panel[data-open="1"] { animation: qlog-fade-in 120ms ease-out; }
  @keyframes qlog-fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Visible keyboard focus on every control (never outline:none). */
#quest-log-panel button:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 1px;
}

/* ── Header ── */
#quest-log-panel .qlog-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(34, 211, 238, 0.14);
  padding-bottom: 8px; margin-bottom: 8px;
}
#quest-log-panel .qlog-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #22d3ee;
}
#quest-log-panel .qlog-hotkey-hint { font-size: 10px; color: #64748b; }
#quest-log-panel .qlog-close {
  margin-left: auto;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px; color: #94a3b8; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 6px 9px; /* comfortable hit target */
}
#quest-log-panel .qlog-close:hover { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.35); }

/* ── Tabs ── */
#quest-log-panel .qlog-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#quest-log-panel .qlog-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #94a3b8; cursor: pointer;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px;
}
#quest-log-panel .qlog-tab:hover { color: #e2e8f0; }
#quest-log-panel .qlog-tab--active {
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.08);
}

/* ── Master-detail body ── */
#quest-log-panel .qlog-body {
  display: flex; gap: 12px; min-height: 0; flex: 1;
}
#quest-log-panel .qlog-list {
  width: 44%; min-width: 220px;
  overflow-y: auto; max-height: 58vh;
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 4px;
}
#quest-log-panel .qlog-detail {
  flex: 1; overflow-y: auto; max-height: 58vh;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}

/* ── List ── */
#quest-log-panel .qlog-group {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #64748b; margin: 8px 0 2px;
}
#quest-log-panel .qlog-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: #e2e8f0;
  font-family: inherit;
  padding: 8px 10px;
}
#quest-log-panel .qlog-item:hover { background: rgba(34, 211, 238, 0.05); }
#quest-log-panel .qlog-item--selected {
  border-left-color: #22d3ee;
  background: rgba(34, 211, 238, 0.08);
}
#quest-log-panel .qlog-item-title { display: block; font-size: 12px; font-weight: 700; }
#quest-log-panel .qlog-item-meta  { display: block; font-size: 10px; color: #94a3b8; margin-top: 2px; }
#quest-log-panel .qlog-item-prog  { font-variant-numeric: tabular-nums; color: #cbd5e1; }
#quest-log-panel .qlog-pinned-mark { color: #22d3ee; }

/* Status chips — icon + label; hue is a secondary channel only. */
#quest-log-panel .qlog-status--active    { color: #cbd5e1; }
#quest-log-panel .qlog-status--ready     { color: #f59e0b; }
#quest-log-panel .qlog-status--completed { color: #34d399; }
#quest-log-panel .qlog-status--failed    { color: #94a3b8; }

/* ── Detail pane ── */
#quest-log-panel .qlog-detail-title { font-size: 14px; font-weight: 700; }
#quest-log-panel .qlog-detail-meta  { font-size: 10px; color: #94a3b8; margin: 2px 0 8px; }
#quest-log-panel .qlog-summary {
  font-size: 12px; color: #cbd5e1; line-height: 1.5;
  max-width: 60ch; /* XAG 101 line-width cap for text blocks */
  margin: 0 0 10px;
}
#quest-log-panel .qlog-section-label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #64748b; margin: 10px 0 3px;
}
#quest-log-panel .qlog-objective { font-size: 12px; color: #e2e8f0; line-height: 1.5; }
#quest-log-panel .qlog-objective--done { color: #34d399; }
#quest-log-panel .qlog-detail-prog { color: #94a3b8; font-variant-numeric: tabular-nums; }
#quest-log-panel .qlog-turnin {
  font-size: 11px; color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px; padding: 5px 9px; margin-top: 8px;
  display: inline-block;
}
#quest-log-panel .qlog-rewards { font-size: 12px; color: #cbd5e1; }
#quest-log-panel .qlog-pin-btn {
  display: inline-block; margin-top: 14px; cursor: pointer;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 8px;
  color: #a5f3fc;
  font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 16px; /* comfortable hit target */
}
#quest-log-panel .qlog-pin-btn:hover { background: rgba(34, 211, 238, 0.2); }

/* ── Empty states — say why + teach the filling action (NN/g) ── */
#quest-log-panel .qlog-empty {
  font-size: 12px; color: #94a3b8; font-style: italic;
  padding: 12px 6px; line-height: 1.6;
}
#quest-log-panel .qlog-empty-hint { color: #64748b; font-size: 11px; }

/* MAIN-QUESTLINE-01: visually distinct from optional side content. */
#quest-log-panel .qlog-item--main { border-color: rgba(251,191,36,.3); border-left-color:#fbbf24; background:linear-gradient(90deg,rgba(251,191,36,.09),rgba(34,211,238,.03)); }
#quest-log-panel .qlog-main-badge { display:inline-block; margin:0 0 8px; padding:4px 8px; border:1px solid rgba(251,191,36,.5); border-radius:999px; color:#fcd34d; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
#quest-log-panel .qlog-step-list { list-style:none; margin:5px 0 0; padding:0; display:grid; gap:5px; }
#quest-log-panel .qlog-step { display:grid; grid-template-columns:18px 1fr; gap:7px; align-items:start; padding:7px 8px; border-radius:6px; background:rgba(255,255,255,.025); color:#94a3b8; }
#quest-log-panel .qlog-step--completed { color:#34d399; }
#quest-log-panel .qlog-step--active { color:#e2e8f0; background:rgba(34,211,238,.09); box-shadow:inset 2px 0 #22d3ee; }
#quest-log-panel .qlog-step-label { display:block; font-size:11px; line-height:1.35; }
#quest-log-panel .qlog-step-state { display:block; margin-top:1px; color:#64748b; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#quest-log-panel .qlog-step--active .qlog-step-state { color:#67e8f9; }
#quest-log-panel .qlog-step--completed .qlog-step-state { color:#6ee7b7; }
/* ==== src/ui-toast-loot.css ==== */
/* src/ui-toast-loot.css
 * UI-FEEDBACK-10 (#2792) — Loot toast styles.
 * Slides in from right; upper-right fixed stack.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Container ────────────────────────────────────────────────────────────── */

/* LOOT-TOAST-PLACEMENT-01 #3443: moved off the dead bottom-right corner into the
 * upper-third right side (foveal/parafoveal zone) so transient loot/salvage
 * feedback is actually seen — the eye is locked center-screen on the avatar, not
 * the bottom corner (2026 game-HUD research). Stacks DOWNWARD from the anchor.
 * Panel-aware anchoring (hug an open panel's right gutter) is a v2 follow-up. */
#loot-toast-container {
  position: fixed;
  top: 26%;            /* upper third — in the line of sight, off the bottom corner */
  right: 2vw;          /* right side, slightly inward toward the panel/centre */
  z-index: 400;        /* Z_MODAL tier — above panels */
  display: flex;
  flex-direction: column;   /* newest stacks below; never grows off-screen-top */
  gap: 6px;
  pointer-events: none;
  max-width: 280px;
}

/* ── Individual card ──────────────────────────────────────────────────────── */

.loot-toast {
  background: rgba(10, 10, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e2e8f0;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.loot-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.loot-toast--leaving {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Source label ─────────────────────────────────────────────────────────── */

.loot-toast__source {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 4px;
}

/* ── Item row ─────────────────────────────────────────────────────────────── */

.loot-toast__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-left: 3px solid transparent;
  padding-left: 6px;
}

.loot-toast__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Quality tier accent borders ──────────────────────────────────────────── */

.loot-toast__tier--common   { border-left-color: #64748b; }
.loot-toast__tier--uncommon { border-left-color: #4caf50; }
.loot-toast__tier--rare     { border-left-color: #2196f3; }
.loot-toast__tier--epic     { border-left-color: #9c27b0; }

/* ── Quantity badge ───────────────────────────────────────────────────────── */

.loot-toast__qty {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── First-encounter badge ────────────────────────────────────────────────── */

.loot-toast__new {
  font-size: 9px;
  font-weight: 700;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  border-radius: 2px;
  padding: 0 3px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* ==== src/ui-toast-quest.css ==== */
/* src/ui-toast-quest.css
 * UI-FEEDBACK-11 (#2794) — Quest toast styles.
 * Slides in from right; stacks in the same container as loot toasts.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Individual card ──────────────────────────────────────────────────────── */

.quest-toast {
  background: rgba(10, 10, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid #4caf50;  /* green accent */
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e2e8f0;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.quest-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.quest-toast--leaving {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Quest-complete variant (slightly prominent) ──────────────────────────── */

.quest-toast--complete {
  border-left-color: #66bb6a;
  background: rgba(10, 20, 12, 0.92);
}

/* ── Subtype badge ────────────────────────────────────────────────────────── */

.quest-toast__badge {
  font-size: 9px;
  font-weight: 700;
  color: #4caf50;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

/* ── Title row ────────────────────────────────────────────────────────────── */

.quest-toast__title {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Checkmark (quest-complete only) ─────────────────────────────────────── */

.quest-toast__check {
  color: #4caf50;
  margin-right: 4px;
  font-size: 13px;
}

/* ── Optional body line ───────────────────────────────────────────────────── */

.quest-toast__body {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== src/ui-toast-unlock.css ==== */
/* src/ui-toast-unlock.css
 * UI-FEEDBACK-13 (#2798) — Unlock and reward toast styles.
 * Shares #loot-toast-container with loot and quest toast stacks.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Unlock toast card ────────────────────────────────────────────────────── */

.unlock-toast {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(10, 10, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid #64748b;
  border-radius: 6px;
  min-width: 220px;
  max-width: 280px;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.unlock-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.unlock-toast--leaving {
  opacity: 0;
  transform: translateX(32px);
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.unlock-toast__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #64748b;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.unlock-toast__title {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.unlock-toast__body {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== src/ui-interaction-prompt.css ==== */
/* src/ui-interaction-prompt.css
 * UI-FEEDBACK-14 (#2800) — Worldspace interaction-prompt styles.
 * Container and chip — structural only; visual tokens deferred to Sprint 3B.
 */

/* ── Prompt overlay container ────────────────────────────────────────── */

#ui-interaction-prompts {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 500;
}

/* ── Individual prompt chip ──────────────────────────────────────────── */

.ui-ip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(10, 10, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

/* ── Keybind badge ───────────────────────────────────────────────────── */

.ui-ip__keybind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  flex-shrink: 0;
}

/* ── Action label ────────────────────────────────────────────────────── */

.ui-ip__label {
  font-size: 12px;
  color: #cbd5e1;
}

/* ── Reward icon chip (what this interaction grants) ─────────────────── */

.ui-ip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ==== src/ui-best-find.css ==== */
/* src/ui-best-find.css
 * UI-FEEDBACK-22 (#2804) — "Best find" upgrade callout chip styles.
 * Upper-right of HUD, above the loot toast stack.
 * z-index 8500: above HUD chips (~1000), below death overlay (~9999).
 */

/* ── Container (positioned anchor) ──────────────────────────────────── */

.bf-callout-container {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: 8500;
  pointer-events: none;
}

/* ── Chip ────────────────────────────────────────────────────────────── */

.bf-callout {
  width: 240px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  pointer-events: auto;

  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.20s ease, transform 0.20s ease;
}

.bf-callout--visible {
  opacity: 1;
  transform: translateX(0);
}

.bf-callout--leaving {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.bf-callout__header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

/* ── Quality tier badge (color set inline from TIER_COLOR map) ───────── */

.bf-callout__tier {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

/* ── Item display name ───────────────────────────────────────────────── */

.bf-callout__name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Readability: text shadow on name (mirrors hud-readability.css) ──── */

.bf-callout__name,
.bf-callout__tier {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.90),
    0 0 6px rgba(0, 0, 0, 0.60);
}

/* ==== src/ui-next-action.css ==== */
/* src/ui-next-action.css
 * UI-FEEDBACK-23 (#2806) — "Next suggested action" bottom-center HUD chip.
 * Slide-up from bottom, auto-dismiss, one chip at a time.
 * z-index 8600: above HUD chips (~1000), below death overlay (~9999).
 */

/* ── Chip — positioned at bottom-center ─────────────────────────────── */

#na-chip {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  z-index: 8600;

  min-width: 280px;
  max-width: 360px;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  pointer-events: auto;

  opacity: 0;
  transition: opacity 0.20s ease, transform 0.20s ease;
}

/* ── Visible state (slide up) ────────────────────────────────────────── */

#na-chip.na-chip--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Leaving state (slide down) ──────────────────────────────────────── */

#na-chip.na-chip--leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Inner row (keybind badge + text block) ──────────────────────────── */

.na-chip__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Keybind badge ───────────────────────────────────────────────────── */

.na-chip__keybind {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}

/* ── Text block ──────────────────────────────────────────────────────── */

.na-chip__text {
  flex: 1;
  min-width: 0;
}

/* ── Primary label ───────────────────────────────────────────────────── */

.na-chip__label {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.90),
    0 0 6px rgba(0, 0, 0, 0.60);
}

/* ── Secondary subtext ───────────────────────────────────────────────── */

.na-chip__subtext {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Subtle top accent line ──────────────────────────────────────────── */

#na-chip::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(99, 179, 237, 0.40);
  border-radius: 1px;
}

/* ==== src/hud-combat-chips.css ==== */
/* src/hud-combat-chips.css
 * HUD-CORE-09 (#2797) — Combat chip styles.
 * Attaches to #hud-top-row. Three chips: aggro tier, hunter-engaged,
 * danger-room warning.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Chip base ────────────────────────────────────────────────────────────── */

.hud-combat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(10, 10, 20, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  pointer-events: none;
}

/* HUD-AGGRO-VISIBILITY-FIX-05: explicit [hidden] override.
 * The JS init (hud-combat-chips.js: aggro.hidden = true) sets the
 * `hidden` HTML attribute, which is supposed to apply `display: none`
 * via the user-agent stylesheet. But author styles beat user-agent in
 * the cascade — `.hud-combat-chip { display: inline-flex }` above
 * silently overrode it, so the chips have been visible since
 * HUD-CORE-09 shipped, even out of combat. Sibling `hud-target-frame.css`
 * has the same pattern (see `#hud-target-frame-inner[hidden]`).
 *
 * !important is used to defend against any future hover/transition
 * rules that might re-introduce the override. */
.hud-combat-chip[hidden] {
  display: none !important;
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.hud-combat-chip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2e8f0;
}

/* ── Hunter chip — warning orange ────────────────────────────────────────── */

.hud-combat-chip--hunter {
  border-color: rgba(249, 115, 22, 0.30);
}

.hud-combat-chip--hunter .hud-combat-chip__label {
  color: #f97316;
}

/* ── Flash animation (new hunter engaged) ────────────────────────────────── */

@keyframes hud-chip-flash {
  0%   { opacity: 1; }
  25%  { opacity: 0.3; }
  50%  { opacity: 1; }
  75%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.hud-combat-chip--flash {
  animation: hud-chip-flash 0.6s ease;
}

/* ── Danger-room chip — critical red ─────────────────────────────────────── */

.hud-combat-chip--danger {
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(30, 5, 5, 0.88);
}

.hud-combat-chip--danger .hud-combat-chip__label {
  color: #ef4444;
}

/* ═══ WAVE8-KIT-UNIFY-01 — combat chips chiclet; tier colors (JS) untouched ═══ */
.hud-combat-chip{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line2);box-shadow:var(--k-inset);}
.hud-combat-chip__label{font-family:var(--k-disp);letter-spacing:.05em;}

/* ==== src/hud-telegraph.css ==== */
/* src/hud-telegraph.css
 * HUD-CORE-09 (#2797) — Monster attack telegraph styles.
 * Placeholder — rendering deferred until precursor telegraph event contract
 * is added to packages/common/src/events.ts.
 * Visual tokens and overlay styles added in the follow-up implementation.
 */

/* ==== src/hud-zone-state.css ==== */
/* src/hud-zone-state.css
 * HUD-CORE-11 (#2801) — Safe-zone vs danger-zone HUD state styles.
 * Applies ambient zone-tier treatment to #hud-root via CSS classes.
 * Per mmo-lite-loop-pivot.md §9: no "stabilization required" text.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Zone tier ambient treatments ────────────────────────────────────────── */

/* Safe (Haven, Lab, friendly zone): neutral — no extra decoration */
#hud-root.hud--safe {
  /* default appearance */
}

/* Caution: yellow-green edge */
#hud-root.hud--caution {
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.25);
}

/* Danger: orange/red edge */
#hud-root.hud--danger {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.30);
}

/* Extreme (danger room): pulsing red edge */
@keyframes hud-zone-pulse {
  0%   { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.20); }
  50%  { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55); }
  100% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.20); }
}

#hud-root.hud--extreme {
  animation: hud-zone-pulse 1.6s ease-in-out infinite;
}

/* ── Cargo secured badge ─────────────────────────────────────────────────── */
/* Brief acknowledgment on Haven return. Never shows "stabilization required".*/

#hud-zone-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 6px 14px;
  background: rgba(10, 20, 12, 0.90);
  border: 1px solid rgba(34, 197, 94, 0.40);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.20s ease, transform 0.20s ease;
  z-index: 50;
}

.hud-zone-badge--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hud-zone-badge--leaving {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}

/* ═══ WAVE8-KIT-UNIFY-01 — zone banner chiclet; state colors untouched ═══ */
.hud-zone-badge{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line2);box-shadow:var(--k-inset),var(--k-drop);
  font-family:var(--k-disp);letter-spacing:.05em;}

/* ==== src/hud-hotkey-bar.css ==== */
/* src/hud-hotkey-bar.css
 * HOTKEY-BAR-V3-01 (#2908) — 4×10 action bar visual renderer.
 * Companion CSS for src/hud-hotkey-bar.js.
 */

/* ── Container ─────────────────────────────────────────────────────────── */

#hud-hotkey-bar {
  display: flex;
  flex-direction: column-reverse;   /* bar 1 at bottom; bars 2–4 stack above */
  align-items: center;
  gap: 3px;
  pointer-events: none;             /* key input via router, not click targets */
  /* Backing panel — separates the bar from the game world floor texture */
  background: rgba(6, 6, 10, 0.88);
  border-radius: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
              0 4px 18px rgba(0, 0, 0, 0.55);
}

/* ── Bar row ───────────────────────────────────────────────────────────── */

.hud-hs__bar {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

/* ── Slot ──────────────────────────────────────────────────────────────── */

.hud-hs__slot {
  position: relative;
  width:  52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;   /* opt back in from container's none — enables drag-and-drop, click-to-assign, context menu */
  transition: transform 200ms ease-out;
}

.hud-hs__slot:hover {
  transform: scale(1.05);
  z-index: 1;
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.hud-hs__slot--empty {
  border-color: rgba(255, 255, 255, 0.16);
}

.hud-hs__slot--empty .hud-hs__badge {
  opacity: 0.4;
}

/* ── Icon ──────────────────────────────────────────────────────────────── */

.hud-hs__icon {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
}

/* ── Cooldown overlay ──────────────────────────────────────────────────── */

.hud-hs__cd-overlay {
  position: absolute;
  inset: 0;
  --cd-remaining: 0;
  background: conic-gradient(
    rgba(0, 0, 0, 0.72) calc(var(--cd-remaining) * 360deg),
    transparent 0
  );
  pointer-events: none;
}

/* ── Cooldown timer text ───────────────────────────────────────────────── */

.hud-hs__cd-timer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* ── Keybind badge — bottom-left ───────────────────────────────────────── */

.hud-hs__badge {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1;
  pointer-events: none;
}

/* ── Item stack count — bottom-right ──────────────────────────────────── */

.hud-hs__stack {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  line-height: 1;
  pointer-events: none;
}

/* ── Energy (SB) cost badge — top-right (DEV-UNIFORM-SB-1) ─────────────── */

.hud-hs__energy {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #6fe3ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  line-height: 1;
  pointer-events: none;
}

/* ── Item-empty state (0 count) ───────────────────────────────────────── */

.hud-hs__slot--item-empty .hud-hs__icon {
  opacity: 0.4;
}

.hud-hs__slot--item-empty .hud-hs__stack {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Passive on/off state — PASSIVE-TOGGLE-SLOT-01 ─────────────────────── */
/* A slotted passive skill is an on/off switch. ON shows a small green pip in
   the bottom-right corner — always visible, even over a full-bleed skill icon
   (the previous inset box-shadow sat under the icon and read as a faint gray
   edge). Bottom-right keeps it off the icon's character figure / face up top,
   and clear of the bottom-left keybind badge. OFF dims the whole slot. Both are
   class-driven so the per-render className rebuild drops them cleanly when the
   slot empties or changes. */
.hud-hs__slot--passive-on::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 4px 1px rgba(34, 197, 94, 0.8);
  pointer-events: none;
  z-index: 2;
}

.hud-hs__slot--passive-off {
  opacity: 0.45;
}

/* ── Active-press state (keydown feedback) ─────────────────────────────── */

.hud-hs__slot--active-press {
  filter: brightness(1.45);
}

/* ── Ready-flash animation (cooldown expired) ──────────────────────────── */

@keyframes hs-ready-flash {
  0%   { filter: brightness(2.0); }
  100% { filter: brightness(1.0); }
}

.hud-hs__slot--ready-flash {
  animation: hs-ready-flash 0.3s ease-out forwards;
}

/* ── Use-rejected flash ────────────────────────────────────────────────── */

@keyframes hs-use-rejected {
  0%,100% { opacity: 1;    border-color: rgba(255, 60, 60, 0.9); }
  50%      { opacity: 0.35; border-color: rgba(255, 60, 60, 0.9); }
}

.hud-hs__slot--use-rejected {
  animation: hs-use-rejected 0.3s ease-in-out;
}

/* ── GCD dim — occupied non-offGcd slots dimmed during global cooldown ──── */

.hud-hs__slot--gcd-active .hud-hs__icon {
  opacity: 0.45;
}

/* ── Out-of-range (SKILL-AUTOAPPROACH-01) ───────────────────────────────
   The current target is beyond this ability's range. Steady state, not a
   flash: it persists for as long as the condition holds, so it must read
   as "status" rather than "event".

   Deliberately distinguished from the three neighbouring states so a
   player can tell them apart at a glance:
     --use-rejected  RED,  ANIMATED, 0.3s one-shot   (a press just failed)
     --gcd-active    ICON dimmed only, no border cue (global cooldown)
     --on-cd         radial sweep overlay + timer    (this ability's cooldown)
     --out-of-range  AMBER static border + desaturate (you are too far)
   Amber over red keeps red meaning "failed", and desaturation reads even
   for players who can't separate the amber/red hues. */

.hud-hs__slot--out-of-range {
  border-color: rgba(251, 146, 60, 0.85);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.35);
}

.hud-hs__slot--out-of-range .hud-hs__icon {
  filter: grayscale(0.65) brightness(0.72);
}

/* ── Drag-and-drop + assignment UX (HOTKEY-ASSIGNMENT-UX-01 #2918) ─────── */

.hud-hs__slot--drag-target {
  border-color: rgba(0, 191, 255, 0.85);
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.45);
}

.hud-hs__slot--dragging {
  opacity: 0.4;
}

/* Assign mode: crosshair cursor on all slots */
.hud-hs--assign-mode .hud-hs__slot {
  cursor: crosshair;
}

.hud-hs--assign-mode .hud-hs__slot:hover {
  border-color: rgba(106, 255, 190, 0.7);
  box-shadow: 0 0 6px rgba(106, 255, 190, 0.4);
}

/* ── Add-bar toggle button ──────────────────────────────────────────────── */
/* Button is a flex sibling of #hud-hotkey-bar inside #hud-bottom-bar.      */
/* It sits to the LEFT of the bar grid. align-self:flex-end aligns it with  */
/* bar 1 at the visual bottom of the hotbar stack.                           */

.hud-hs__add-bar {
  flex-shrink: 0;
  align-self: flex-end;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hud-hs__add-bar:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

/* ── Slot tooltip ───────────────────────────────────────────────────────── */

.hud-hs__tooltip {
  position: fixed;
  z-index: 8000;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 6px 10px;
  pointer-events: none;
  max-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.hud-hs__tooltip-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.hud-hs__tooltip-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 3px;
  line-height: 1.4;
}

.hud-hs__tooltip-cd {
  font-size: 10px;
  color: rgba(180, 180, 255, 0.85);
  margin-top: 3px;
}

/* DEV-UNIFORM-SB-1: Energy (SB) cost line in the slot tooltip. */
.hud-hs__tooltip-energy {
  font-size: 10px;
  font-weight: 600;
  color: #6fe3ff;
  margin-top: 3px;
}

.hud-hs__tooltip-hint {
  font-size: 10px;
  color: rgba(160, 210, 255, 0.55);
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

/* ── Reduced-motion accessibility (WCAG 2.3.3) ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hud-hs__slot {
    transition: none;
  }
  .hud-hs__slot:hover {
    transform: none;
  }
}

/* ── Right-click "Assign Skill" picker — HOTBAR-RCLICK-ASSIGN-PICKER-01 (#3395) ─ */

.hud-hs-assign-picker {
  position: fixed;
  z-index: 9999;
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(0, 191, 255, 0.4);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8);
  font-family: inherit;
  display: none;
  min-width: 150px;
  max-width: 300px;
  pointer-events: auto;
}

.hud-hs-assign-picker__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 191, 255, 0.9);
  margin: 0 2px 6px;
}

.hud-hs-assign-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 280px;
}

.hud-hs-assign-picker__skill {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.6);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.hud-hs-assign-picker__skill:hover:not(:disabled) {
  border-color: rgba(0, 191, 255, 0.85);
  box-shadow: 0 0 7px rgba(0, 191, 255, 0.5);
}

.hud-hs-assign-picker__skill:disabled {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.7);
}

.hud-hs-assign-picker__empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 2px;
}

.hud-hs-assign-picker__err {
  font-size: 10px;
  color: rgba(255, 130, 130, 0.9);
  background: rgba(255, 60, 60, 0.10);
  border-radius: 3px;
  padding: 3px 6px;
  margin-top: 4px;
}

.hud-hs-assign-picker__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hud-hs-assign-picker__clear {
  flex: 1;
  background: rgba(255, 60, 60, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.4);
  border-radius: 3px;
  color: rgba(255, 140, 140, 0.95);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.hud-hs-assign-picker__clear:hover {
  background: rgba(255, 60, 60, 0.22);
}

.hud-hs-assign-picker__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.hud-hs-assign-picker__close:hover {
  color: #fff;
}

/* PS-FEEL-08: anticipation flash when keypress fires before server ack */
.hud-hs__slot--anticipating {
  box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.75),
              0 0 0 2px rgba(245, 158, 11, 0.5);
  border-color: rgba(245, 158, 11, 0.8) !important;
  transition: box-shadow 0ms, border-color 0ms;
}

/* ═══ HUD-KIT-TOKENS-01 — borders + keybind type; cooldown sweep + drag cyan untouched ═══ */
#hud-hotkey-bar{border-color:var(--k-line2);}
.hud-hs__slot{border-color:var(--k-line2);}
.hud-hs__badge{font-family:var(--k-mono);letter-spacing:.02em;}
.hud-hs__tooltip-name{font-family:var(--k-disp);letter-spacing:.05em;}

/* ==== src/journey-back-button.css ==== */
/* src/journey-back-button.css
 * JOURNEY-BACK-UI-01 — recall button, flex sibling of #hud-hotkey-bar inside
 * #hud-bottom-bar (same layout convention as .hud-hs__add-bar).
 */

.jb-wrap {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.jb-btn {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 5px;
  color: #cfe8ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.jb-btn:hover:not(:disabled) {
  background: rgba(120, 200, 255, 0.14);
  border-color: rgba(120, 200, 255, 0.6);
}

.jb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.jb-btn__icon {
  font-size: 15px;
  line-height: 1;
}

.jb-btn--channeling {
  border-color: #78c8ff;
  box-shadow: 0 0 14px rgba(120, 200, 255, 0.75);
  animation: jb-pulse 1s ease-in-out infinite;
}

@keyframes jb-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(120, 200, 255, 0.55); }
  50%      { box-shadow: 0 0 20px rgba(120, 200, 255, 0.95); }
}

.jb-btn--interrupted {
  border-color: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

/* ── Channel progress bar ────────────────────────────────────────────────
 * Deliberately much bigger than a typical small HUD accent bar — this is
 * the player's ONLY visible confirmation that holding still is doing
 * anything, so it must be impossible to miss, not a subtle 4px sliver.
 */

.jb-bar {
  width: 90px;
  height: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(120, 200, 255, 0.5);
  border-radius: 4px;
  overflow: hidden;
  display: none;
  box-shadow: 0 0 10px rgba(120, 200, 255, 0.35);
}

.jb-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #78c8ff);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.8);
  transition: width 0.05s linear;
}

/* ── Cost / cooldown / interrupt-reason readout ──────────────────────── */

.jb-cost {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(207, 232, 255, 0.95);
  white-space: nowrap;
  min-height: 13px;
  text-align: center;
}

/* ==== src/journey-back-callout.css ==== */
/* src/journey-back-callout.css
 * JOURNEY-BACK-UI-01 — one-time first-use callout, positioned above the
 * recall button.
 */

.jbc {
  position: fixed;
  z-index: 9200;
  width: 220px;
  background: rgba(8, 14, 22, 0.97);
  border: 1px solid rgba(120, 200, 255, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(120, 200, 255, 0.18);
  font: 500 12px/1.4 'Segoe UI', system-ui, sans-serif;
  color: #dfe9f5;
}

.jbc__title {
  font-weight: 700;
  font-size: 13px;
  color: #78c8ff;
  margin-bottom: 4px;
}

.jbc__body {
  color: rgba(223, 233, 245, 0.85);
  margin-bottom: 8px;
}

.jbc__ok {
  display: block;
  width: 100%;
  background: rgba(120, 200, 255, 0.14);
  border: 1px solid rgba(120, 200, 255, 0.45);
  border-radius: 5px;
  color: #dfe9f5;
  font: 700 11.5px 'Segoe UI', system-ui, sans-serif;
  padding: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.jbc__ok:hover {
  background: rgba(120, 200, 255, 0.26);
  border-color: #78c8ff;
}

/* ==== src/hud-interaction-prompt.css ==== */
/* src/hud-interaction-prompt.css
 * HUD-CORE-06 (#2791) — Interaction-prompt chip styles.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Prompt chip container ───────────────────────────────────────────── */

#hud-interaction-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(10, 10, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#hud-interaction-prompt.hud-ip--hidden {
  display: none;
}

/* ── Keybind badge ───────────────────────────────────────────────────── */

.hud-ip__keybind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  flex-shrink: 0;
}

/* ── Action label ────────────────────────────────────────────────────── */

.hud-ip__action {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
}

/* ── Separator ───────────────────────────────────────────────────────── */

.hud-ip__sep {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

/* ── Target name ─────────────────────────────────────────────────────── */

.hud-ip__target {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ── GATHER-UX-01: warn tone (unmet tool gate → amber requirement) ───── */

#hud-interaction-prompt.hud-ip--warn .hud-ip__action {
  color: #fbbf24;
}

/* ═══ WAVE8-KIT-UNIFY-01 — interaction prompt onto kit ═══ */
#hud-interaction-prompt{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line2);box-shadow:var(--k-inset),var(--k-drop);}
.hud-ip__keybind{font-family:var(--k-mono);}
.hud-ip__action{font-family:var(--k-disp);letter-spacing:.05em;}
.hud-ip__target{font-family:var(--k-disp);}

/* ==== src/hud-readability.css ==== */
/* src/hud-readability.css
 * HUD-CORE-12 (#2803) — HUD readability enhancements.
 * Drop shadows and text treatments ensuring all HUD chip text is legible
 * over any busy canvas background (combat floaters, particles, dense enemies).
 * Applied via cascade from #hud-root; does not override chip backgrounds set
 * by individual chip modules.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Global text-shadow baseline for HUD label text ──────────────────────── */
/* All .hud-*__label, .hud-*__load, .hud-*__count text gets a subtle outline */

#hud-root .hud-combat-chip__label,
#hud-root .hud-cargo__load,
#hud-root .hud-obj__title,
#hud-root .hud-obj__step,
#hud-root .hud-loot-chip__name,
#hud-root .hud-loot-chip__qty,
#hud-root .hud-zone-badge {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.90),
    0 0 6px rgba(0, 0, 0, 0.60);
}

/* ── Chip drop-shadow (all inline chip containers) ───────────────────────── */

#hud-root .hud-combat-chip,
#hud-root #hud-cargo-chip,
#hud-root .hud-loot-chip {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.70));
}

/* ── Player frame / objective tracker panel shadow ───────────────────────── */

#hud-player-frame,
#hud-obj-tracker {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.60));
}

/* ── Top row container subtle separator shadow ───────────────────────────── */

#hud-top-row {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.50));
}

/* ── Z-index audit: HUD above canvas floaters ────────────────────────────── */
/* Canvas floaters (damage text) render inside the game canvas and are
 * naturally below any DOM element. #hud-root uses z-index from hud-layout.css
 * (HUD-CORE-01). This rule ensures no readability-layer element drops below
 * the canvas layer accidentally. */

#hud-root {
  isolation: isolate;
}

/* ==== src/skills-panel.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   src/skills-panel.css
   SKILLS-PANEL-01 (#2916) — K-panel Skills / Action Book
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel shell ──────────────────────────────────────────────────── */

#skills-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
  width: 700px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  background: #0e0e16;
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  font-family: inherit;
  color: #d0d0e0;
  font-size: 13px;
  user-select: none;
}

/* ── Header: tabs + close ─────────────────────────────────────────── */

.sp-header {
  display: flex;
  align-items: center;
  padding: 8px 10px 0;
  border-bottom: 1px solid #1e1e2e;
  background: #0b0b13;
  border-radius: 6px 6px 0 0;
  gap: 6px;
  flex-shrink: 0;
}

.sp-tab {
  padding: 5px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  background: transparent;
  color: #888;
  font-size: 12px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.sp-tab:hover:not(.sp-tab--locked) {
  color: #ccc;
  background: #15151f;
}

.sp-tab--active {
  border-color: #2a2a3a;
  background: #0e0e16;
  color: #b0c4ff;
  position: relative;
  bottom: -1px;
}

.sp-tab--locked {
  cursor: default;
  opacity: 0.45;
}

.sp-tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a7eff;
  margin-right: 5px;
  vertical-align: middle;
}

.sp-lock-icon {
  margin-right: 4px;
  opacity: 0.6;
}

.sp-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 3px;
}

.sp-close:hover { color: #ccc; background: #1e1e2e; }

/* ── Body: skill grid + detail ───────────────────────────────────── */

.sp-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left: skill node grid ───────────────────────────────────────── */

.sp-grid {
  flex: 1;
  min-width: 0;
  padding: 22px 16px;
  overflow-y: auto;
  border-right: 1px solid #1e1e2e;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 22px 8px;
  align-content: start;
  justify-items: center;
}

.sp-grid .sp-empty-tree { grid-column: 1 / -1; }

.sp-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 88px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.sp-node--locked { cursor: default; }

.sp-node--placeholder {
  cursor: default;
  pointer-events: none;
}

.sp-node-iconwrap {
  position: relative;
  width: 54px;
  height: 54px;
}

.sp-node-icon,
.sp-node-icon-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #14141f;
  border: 2px solid #2c2c3e;
  box-sizing: border-box;
  object-fit: cover;
  transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s;
}

.sp-node-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sp-node:hover:not(.sp-node--locked) .sp-node-icon,
.sp-node:hover:not(.sp-node--locked) .sp-node-icon-placeholder {
  border-color: #4a6aff;
  box-shadow: 0 0 9px rgba(74, 106, 255, 0.4);
}

.sp-node--selected .sp-node-icon,
.sp-node--selected .sp-node-icon-placeholder {
  border-color: #5a7aff !important;
  box-shadow: 0 0 11px rgba(90, 122, 255, 0.6) !important;
}

.sp-node--locked .sp-node-icon,
.sp-node--locked .sp-node-icon-placeholder {
  filter: grayscale(0.85) brightness(0.5);
  border-color: #242430;
}

.sp-node--maxed .sp-node-icon,
.sp-node--maxed .sp-node-icon-placeholder {
  border-color: #d4af37;
  box-shadow: 0 0 9px rgba(212, 175, 55, 0.45);
}

.sp-node--preview .sp-node-icon,
.sp-node--preview .sp-node-icon-placeholder {
  border-color: #3ad6a0;
}

.sp-node--learned .sp-node-icon,
.sp-node--learned .sp-node-icon-placeholder {
  border-color: #4a90d0;
}

.sp-node--unlockable .sp-node-icon,
.sp-node--unlockable .sp-node-icon-placeholder {
  border-color: #3a5a7a;
}

.sp-node-ph-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px dashed #24243a;
  box-sizing: border-box;
}

.sp-node-rank {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #11111c;
  border: 1px solid #2c2c3e;
  font-size: 10px;
  font-weight: 700;
  color: #aab;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 2;
}

.sp-node--maxed .sp-node-rank   { color: #ffd700; border-color: #5a4a10; }
.sp-node--preview .sp-node-rank { color: #6affbe; border-color: #1a4a30; }
.sp-node--learned .sp-node-rank { color: #90c0ff; border-color: #243a4a; }

.sp-node-name {
  font-size: 11px;
  color: #c0c0d0;
  text-align: center;
  line-height: 1.25;
  max-width: 88px;
}

.sp-node--locked .sp-node-name {
  color: #5a5a66;
}

.sp-node-lock {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #999;
  z-index: 2;
}

/* ── Right: skill detail ─────────────────────────────────────────── */

.sp-detail {
  flex: 1;
  padding: 14px 16px;
  overflow-y: auto;
  min-height: 0;
}

.sp-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #444;
  font-size: 12px;
}

.sp-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #d0d8ff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-detail-rank {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

.sp-detail-rank--maxed { color: #ffd700; }
.sp-detail-rank--preview { color: #6affbe; }
.sp-detail-rank--learned { color: #90c0ff; }

.sp-detail-divider {
  height: 1px;
  background: #1e1e2e;
  margin: 8px 0;
}

.sp-detail-desc {
  color: #aaa;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* DEV-UNIFORM-SB-1: Energy (SB) cost row under the description. */
.sp-detail-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6fe3ff;
  background: rgba(40, 120, 150, 0.16);
  border: 1px solid rgba(111, 227, 255, 0.35);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 10px;
}

.sp-detail-cost-bolt {
  font-size: 11px;
  line-height: 1;
}

.sp-detail-meta {
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
}

.sp-detail-meta span {
  margin-right: 12px;
}

.sp-detail-locked-notice {
  background: #1a1010;
  border: 1px solid #3a2020;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px;
  color: #c06060;
  margin-bottom: 8px;
}

.sp-detail-preview-notice {
  background: #0d1a10;
  border: 1px solid #1a3a20;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px;
  color: #60c080;
  margin-bottom: 8px;
}

.sp-assign-btn {
  display: inline-block;
  padding: 5px 12px;
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-radius: 3px;
  color: #7acc7a;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, border-color 0.12s;
}

.sp-assign-btn:hover {
  background: #1e361e;
  border-color: #3a6a3a;
}

.sp-alloc-btn {
  display: inline-block;
  padding: 5px 12px;
  background: #1a1a2e;
  border: 1px solid #2a2a5e;
  border-radius: 3px;
  color: #7a90ff;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, border-color 0.12s;
}

.sp-alloc-btn:hover:not(:disabled) {
  background: #1e1e3e;
  border-color: #4a4a8e;
}

.sp-alloc-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Footer: SP + Reset + Apply ──────────────────────────────────── */

.sp-footer {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #1e1e2e;
  background: #0b0b13;
  border-radius: 0 0 6px 6px;
  gap: 8px;
  flex-shrink: 0;
}

.sp-sp-info {
  flex: 1;
  font-size: 11px;
  color: #888;
}

.sp-sp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a7eff;
  margin-right: 5px;
  vertical-align: middle;
}

.sp-sp-count {
  color: #b0c4ff;
  font-weight: 600;
}

.sp-btn {
  padding: 5px 13px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.sp-btn--reset {
  background: #1a1a26;
  border: 1px solid #2a2a3a;
  color: #888;
}

.sp-btn--reset:hover:not(:disabled) {
  background: #1e1e30;
  color: #aaa;
}

.sp-btn--apply {
  background: #1a2a4a;
  border: 1px solid #2a4a8a;
  color: #7ab0ff;
  font-weight: 600;
}

.sp-btn--apply:hover:not(:disabled) {
  background: #1e2e54;
  border-color: #3a5a9a;
}

.sp-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.sp-apply-status {
  font-size: 11px;
  padding: 0 6px;
}

.sp-apply-status--ok   { color: #60c080; }
.sp-apply-status--err  { color: #c06060; }
.sp-apply-status--busy { color: #aaa; }

/* ── CLASS-CHANGE-UI-01 (#2990) ──────────────────────────────────── */

/* ── Tabs header: dynamic tabs container ─────────────────────────── */

.sp-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
}

/* ── SP footer: tree-complete label ─────────────────────────────── */

.sp-sp-treecomp {
  color: #ffd700;
  font-weight: 600;
}

/* ── Skill node: post-change state badges ───────────────────────── */

.sp-node--carried .sp-node-icon,
.sp-node--carried .sp-node-icon-placeholder {
  border-color: #2a6a4a !important;
}

.sp-node--inactive {
  opacity: 0.45;
}

.sp-node--inactive .sp-node-name {
  color: #666;
}

.sp-node-cf-badge {
  position: absolute;
  bottom: -4px;
  right: 2px;
  font-size: 10px;
  color: #6affbe;
  font-weight: 700;
  z-index: 2;
}

/* ── Detail pane: carry-forward / inactive notices ──────────────── */

.sp-detail-cf-notice {
  background: #0d1a10;
  border: 1px solid #1a4a28;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  color: #6affbe;
  margin-bottom: 6px;
}

.sp-detail-inactive-notice {
  background: #1a1010;
  border: 1px solid #3a2020;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
}

/* ── Empty Vanguard tree placeholder ────────────────────────────── */

.sp-empty-tree {
  padding: 16px 10px;
  color: #555;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* ── Class change section (below .sp-body, above .sp-footer) ────── */

.sp-cc-section {
  border-top: 1px solid #1e1e2e;
  padding: 10px 12px;
  background: #0b0b13;
}

.sp-cc-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-cc-heading {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-cc-subtitle {
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 4px;
}

.sp-cc-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-cc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #111122;
  border: 1px solid #2a3a5a;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 110px;
  color: inherit;
  font-family: inherit;
}

.sp-cc-card:hover:not(.sp-cc-card--locked) {
  border-color: #4a6aff;
  background: #0d0d28;
}

.sp-cc-card--locked {
  cursor: default;
  opacity: 0.4;
}

.sp-cc-card-icon {
  font-size: 20px;
  line-height: 1;
}

.sp-cc-card-name {
  font-size: 12px;
  font-weight: 600;
  color: #c0d0ff;
}

.sp-cc-card--locked .sp-cc-card-name {
  color: #666;
}

.sp-cc-card-desc {
  font-size: 10px;
  color: #666;
  text-align: center;
  line-height: 1.4;
}

/* ── Class change confirmation modal ────────────────────────────── */

.sp-cc-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-cc-modal-box {
  background: #0e0e16;
  border: 1px solid #3a3a5a;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  padding: 20px 22px;
  max-width: 440px;
  width: 100%;
  font-size: 13px;
  color: #d0d0e0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-cc-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #d0d8ff;
  margin: 0;
  padding: 0;
}

.sp-cc-modal-warning {
  background: #1a1000;
  border: 1px solid #5a3a00;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px;
  color: #ffd060;
}

.sp-cc-modal-body {
  font-size: 12px;
  color: #aaa;
  line-height: 1.6;
  margin: 0;
}

.sp-cc-modal-cf-section {
  background: #0b0b13;
  border: 1px solid #1e1e2e;
  border-radius: 4px;
  padding: 8px 10px;
}

.sp-cc-modal-cf-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.sp-cc-modal-cf-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-cc-modal-cf-item {
  font-size: 11px;
  color: #6affbe;
}

.sp-cc-modal-error {
  background: #1a0a0a;
  border: 1px solid #5a2020;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px;
  color: #ff8080;
}

.sp-cc-modal-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.sp-cc-btn-cancel {
  background: #1a1a26;
  border: 1px solid #2a2a3a;
  color: #888;
}

.sp-cc-btn-cancel:hover {
  background: #1e1e30;
  color: #aaa;
}

.sp-cc-btn-confirm {
  background: #1a1a3a;
  border: 1px solid #4a4aaa;
  color: #a0b0ff;
  font-weight: 700;
}

.sp-cc-btn-confirm:hover:not(:disabled) {
  background: #22226a;
  border-color: #6a6aff;
  color: #c0d0ff;
}

.sp-cc-btn-confirm:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════
   SKILLS-KIT-REBASE-01 — Skills panel (K) onto the SURGE Console kit
   (src/ui-kit.css tokens). Override block: same selectors, later in
   the cascade; sp-* class contract + state colors untouched.
   ═══════════════════════════════════════════════════════════════════ */
#skills-panel{
  background:linear-gradient(180deg,rgba(13,20,29,.97),rgba(8,13,19,.98));
  border:1px solid var(--k-line2);border-radius:16px;
  box-shadow:var(--k-inset),0 28px 80px -26px rgba(0,0,0,.8);
  font-family:var(--k-sans);color:var(--k-ink);
}
.sp-header{border-bottom:1px solid var(--k-line);
  background:linear-gradient(180deg,#131e2a,#0d1520)}
.sp-header, .sp-detail-name, .sp-cc-heading, .sp-cc-modal-title{
  font-family:var(--k-disp);letter-spacing:.1em;text-transform:uppercase}
.sp-close{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line2);color:var(--k-ink3);border-radius:8px;box-shadow:var(--k-inset)}
.sp-close:hover{color:var(--k-ink);border-color:var(--k-line3)}
.sp-tab{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);border-radius:var(--k-rad-tile);box-shadow:var(--k-inset);
  font-family:var(--k-disp);letter-spacing:.07em;color:var(--k-ink3)}
.sp-tab:hover:not(.sp-tab--locked){background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b));
  border-color:var(--k-line2);color:var(--k-ink)}
.sp-tab--active{color:var(--k-cy);border-color:var(--k-cy-deep);
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-cy) 10%,var(--k-tile-a)),var(--k-tile-b))}
.sp-node{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);border-radius:var(--k-rad-tile);box-shadow:var(--k-inset)}
.sp-node--selected{border-color:var(--k-cy);
  box-shadow:var(--k-inset),0 0 0 1px rgba(53,201,236,.28),0 0 16px -4px var(--k-cy-glow)}
.sp-detail{background:linear-gradient(180deg,var(--k-card-a),var(--k-card-b));
  border:1px solid var(--k-line2);border-radius:var(--k-rad-card);box-shadow:var(--k-inset)}
.sp-footer{border-top:1px solid var(--k-line)}
.sp-btn{font-family:var(--k-disp);letter-spacing:.07em;text-transform:uppercase;
  border-radius:var(--k-rad-btn)}
.sp-btn--apply{color:var(--k-act-ink);
  background:linear-gradient(180deg,var(--k-act-a),var(--k-act-b));
  border:1px solid rgba(255,205,110,.45);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.5),0 4px 16px rgba(240,140,20,.38)}
.sp-btn--apply:hover:not(:disabled){filter:brightness(1.07)}
.sp-btn--reset{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line2);color:var(--k-ink2);box-shadow:var(--k-inset)}
.sp-btn--reset:hover:not(:disabled){border-color:var(--k-line3);color:var(--k-ink)}
.sp-cc-modal-box{background:linear-gradient(180deg,#142130,#0c141d);
  border:1px solid var(--k-line3);border-radius:14px;
  box-shadow:var(--k-inset),0 34px 90px -20px #000}
.sp-cc-card{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);border-radius:var(--k-rad-tile);box-shadow:var(--k-inset)}
.sp-cc-card:hover:not(.sp-cc-card--locked){border-color:var(--k-line3);
  background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b))}

/* ==== src/friends-panel.css ==== */
/* ─────────────────────────────────────────────────────────────────
   Friends Panel — src/friends-panel.css
   FRIENDS-WHISPER-V1 P9 (FW-15..19)
   ───────────────────────────────────────────────────────────────── */

/* Panel root — absolutely positioned overlay */
#friends-panel {
  display: none; /* panel-manager shows/hides via display:flex */
  flex-direction: column;
  position: fixed;
  top: 60px;
  right: 16px;
  width: 280px;
  max-height: 520px;
  background: rgba(12, 14, 20, 0.95);
  border: 1px solid rgba(100, 220, 255, 0.25);
  border-radius: 8px;
  color: #d4e8f0;
  font-size: 13px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* Header */
.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(100, 220, 255, 0.15);
  flex-shrink: 0;
}
.fp-title {
  font-size: 14px;
  font-weight: 600;
  color: #7ae0ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fp-close {
  background: none;
  border: none;
  color: #6a8ba0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.fp-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Status/error bar (FW-HARDEN-03) */
.fp-status {
  display: none;
  font-size: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(100, 220, 255, 0.1);
  flex-shrink: 0;
  text-align: center;
  animation: fp-status-in 0.15s ease;
}
.fp-status--error { color: #e07070; background: rgba(255, 100, 100, 0.08); }
.fp-status--info  { color: #7ae0ff; background: rgba(100, 220, 255, 0.06); }
@keyframes fp-status-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tabs */
.fp-tabs {
  display: flex;
  border-bottom: 1px solid rgba(100, 220, 255, 0.1);
  flex-shrink: 0;
}
.fp-tab {
  flex: 1;
  background: none;
  border: none;
  color: #6a8ba0;
  cursor: pointer;
  font-size: 12px;
  padding: 7px 4px;
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.fp-tab:hover { color: #a8d4e8; }
.fp-tab--active {
  color: #7ae0ff;
  border-bottom-color: #7ae0ff;
}

/* Add-friend row */
.fp-add-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(100, 220, 255, 0.1);
  flex-shrink: 0;
}
.fp-add-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(100, 220, 255, 0.2);
  border-radius: 4px;
  color: #d4e8f0;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  min-width: 0;
}
.fp-add-input::placeholder { color: #4a6a7a; }
.fp-add-input:focus { border-color: rgba(100, 220, 255, 0.5); }
.fp-add-btn {
  background: rgba(100, 220, 255, 0.15);
  border: 1px solid rgba(100, 220, 255, 0.3);
  border-radius: 4px;
  color: #7ae0ff;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}
.fp-add-btn:hover { background: rgba(100, 220, 255, 0.25); }

/* Scrollable content area */
.fp-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.fp-content::-webkit-scrollbar { width: 4px; }
.fp-content::-webkit-scrollbar-thumb { background: rgba(100,220,255,0.2); border-radius: 2px; }

/* Section labels */
.fp-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a6a7a;
  padding: 6px 12px 2px;
}

/* Empty state */
.fp-empty {
  color: #4a6a7a;
  font-size: 12px;
  padding: 16px 12px;
  text-align: center;
}

/* Friend / request list */
.fp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  margin: 1px 4px;
}
.fp-list-item:hover { background: rgba(255,255,255,0.04); }

/* Online dot */
.fp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-dot--online  { background: #50e878; box-shadow: 0 0 4px #50e878; }
.fp-dot--offline { background: #3a4a54; }

/* Name + handle */
.fp-name {
  font-size: 13px;
  color: #c0d8e8;
  flex-shrink: 0;
}
.fp-handle {
  font-size: 11px;
  color: #4a6a7a;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action buttons */
.fp-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.fp-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  color: #8aa8bc;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 7px;
  white-space: nowrap;
}
.fp-btn:hover { background: rgba(255,255,255,0.1); color: #d4e8f0; }
.fp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.fp-btn--accept  { border-color: rgba(80,232,120,0.3); color: #50e878; }
.fp-btn--accept:hover { background: rgba(80,232,120,0.12); }
.fp-btn--whisper { border-color: rgba(100,220,255,0.3); color: #7ae0ff; }
.fp-btn--whisper:hover { background: rgba(100,220,255,0.1); }
.fp-btn--decline, .fp-btn--remove { border-color: rgba(255,100,100,0.2); color: #e07070; }
.fp-btn--decline:hover, .fp-btn--remove:hover { background: rgba(255,100,100,0.08); }
.fp-btn--cancel  { border-color: rgba(200,200,100,0.2); color: #c8c870; }
.fp-btn--unblock { border-color: rgba(180,120,60,0.3); color: #c89060; }

/* Incoming friend-request toast (FRIEND-REQ-SPAM-01) — body-level popup,
   visible even when the Friends panel is closed. Cyan accent edge mirrors
   the party-invite toast language. */
#fp-toast-stack {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 320;
  pointer-events: none;
}
.fp-toast {
  pointer-events: auto;
  position: relative;
  width: 300px;
  background: rgba(12, 14, 20, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-left: 3px solid #00e5ff;
  border-radius: 6px;
  padding: 10px 28px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #dfeef5;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  animation: fp-toast-in 0.18s ease;
}
@keyframes fp-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fp-toast-text { font-size: 12.5px; }
.fp-toast-text strong { color: #7ae0ff; }
.fp-toast-btns { display: flex; gap: 8px; }
.fp-toast-btns .fp-btn { flex: 1; padding: 5px 10px; font-size: 12px; }
.fp-toast-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: #6a8ba0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.fp-toast-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ==== src/settings-panel-v2.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   src/settings-panel-v2.css
   SETTINGS-PANEL-V2-01 — Spirit Vale-layout tabbed settings HUD.
   Alaknanda dark sci-fi / cyan visual language.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ────────────────────────────────────────────────────────── */

.spv2-shell {
  display: flex;
  width: min(92vw, 900px);
  height: min(82vh, 600px);
  background: #080f1a;
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: 10px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.80), 0 0 0 1px rgba(34,211,238,0.05);
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #e2e8f0;
  overflow: hidden;
  position: relative;
}

/* ── Sidebar nav ──────────────────────────────────────────────────── */

.spv2-nav {
  width: 190px;
  flex-shrink: 0;
  background: #050c16;
  border-right: 1px solid rgba(34,211,238,0.12);
  display: flex;
  flex-direction: column;
}

.spv2-nav-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 18px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #22d3ee;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(34,211,238,0.10);
  flex-shrink: 0;
}

.spv2-nav-title svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #22d3ee;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.spv2-nav-list {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  flex: 1;
}

.spv2-nav-item {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  border-left: 2px solid transparent;
  user-select: none;
}

.spv2-nav-item:hover {
  color: #cbd5e1;
  background: rgba(34,211,238,0.05);
}

.spv2-nav-item--active {
  color: #22d3ee !important;
  background: rgba(34,211,238,0.08) !important;
  border-left-color: #22d3ee !important;
}

/* ── Close button ─────────────────────────────────────────────────── */

.spv2-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  color: #64748b;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  font-family: inherit;
}

.spv2-close:hover {
  color: #e2e8f0;
  border-color: rgba(34,211,238,0.45);
  background: rgba(34,211,238,0.08);
}

/* ── Content area ─────────────────────────────────────────────────── */

.spv2-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── Panes ────────────────────────────────────────────────────────── */

.spv2-pane {
  flex: 1;
  padding: 26px 30px;
  overflow-x: hidden;
  overflow-y: auto;
}

.spv2-pane--hidden {
  display: none;
}

.spv2-pane-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #22d3ee;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(34,211,238,0.14);
}

/* ── General placeholder ──────────────────────────────────────────── */

.spv2-general-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 52px);
  gap: 10px;
  color: #475569;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

.spv2-placeholder-icon {
  font-size: 28px;
  opacity: 0.35;
  margin-bottom: 4px;
}

.spv2-placeholder-heading {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

/* ── Setting groups (Controls / Graphics) ─────────────────────────── */

.spv2-setting-group {
  margin-bottom: 22px;
}

.spv2-setting-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}

.spv2-radio-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.spv2-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
}

.spv2-radio-label input[type="radio"] {
  accent-color: #22d3ee;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.spv2-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  margin-bottom: 10px;
}

.spv2-checkbox-label:last-child {
  margin-bottom: 0;
}

.spv2-checkbox-label input[type="checkbox"] {
  accent-color: #22d3ee;
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── FEEDBACK-ACCESSIBILITY-01: shake intensity slider + hints ─────── */

.spv2-range-row {
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.spv2-range {
  width: 100%;
  accent-color: #22d3ee;
  cursor: pointer;
}

.spv2-range:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.spv2-hint {
  color: #64748b;
  font-size: 11px;
}

/* ── Controls notes ───────────────────────────────────────────────── */

.spv2-notes {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}

.spv2-note {
  font-size: 11px;
  color: #64748b;
  line-height: 1.9;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.spv2-note::before {
  content: '•';
  color: #334155;
  flex-shrink: 0;
}

/* ── Hotkeys: 4-column action bar grid ────────────────────────────── */

.spv2-hk-bars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 16px;
  margin-bottom: 18px;
}

.spv2-bar-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.spv2-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  font-size: 10px;
  color: #64748b;
}

/* ── Hotkeys: system controls reference ───────────────────────────── */

.spv2-hk-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 14px 0;
}

.spv2-hk-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.spv2-hk-section-label span {
  font-weight: 400;
  letter-spacing: 0;
  color: #475569;
}

.spv2-syskeys-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  font-size: 11px;
  color: #94a3b8;
  align-items: center;
  margin-bottom: 14px;
}

.spv2-syskey-entry {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Key chip (read-only reference) ───────────────────────────────── */

.spv2-key-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #22d3ee;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
  font-family: Consolas, 'Courier New', monospace;
}

/* ── Hotkeys: footer row ──────────────────────────────────────────── */

.spv2-hk-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.spv2-defaults-btn {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  letter-spacing: 0.03em;
}

.spv2-defaults-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.26);
}

.spv2-hk-notice {
  min-height: 22px;
  margin-top: 6px;
  font-size: 11px;
}

/* ==== src/guest-save-nudge.css ==== */
/* src/guest-save-nudge.css — FTUE-UX-2026-02
 * Fixed bottom-center banner nudging guests to claim their account.
 * Slides up from the bottom after 5 min of play.
 */

#guest-save-nudge {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9000;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 200, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;

  transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms ease;
  opacity: 0;
  pointer-events: none;
}

#guest-save-nudge.gsn--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#guest-save-nudge.gsn--leaving {
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  transition: transform 250ms ease-in, opacity 200ms ease-in;
}

.gsn-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.gsn-text {
  flex: 1;
  min-width: 0;
}

.gsn-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 1px;
}

.gsn-sub {
  font-size: 11px;
  color: #94a3b8;
}

.gsn-claim-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.12);
  color: #67e8f9;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.gsn-claim-btn:hover {
  background: rgba(0, 200, 255, 0.22);
  border-color: rgba(0, 200, 255, 0.65);
  color: #a5f3fc;
}

.gsn-claim-btn:focus-visible {
  outline: 2px solid rgba(0, 200, 255, 0.6);
  outline-offset: 2px;
}

.gsn-dismiss-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: color 150ms ease, background 150ms ease;
}

.gsn-dismiss-btn:hover {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

.gsn-dismiss-btn:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.4);
  outline-offset: 2px;
}

/* ==== src/callsign-modal.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   src/callsign-modal.css — IDENTITY-NAME-01F (#3432)
   In-game callsign Choose/Rename modal (matches the Character Select look —
   dark panel, cyan accent). NOT a native dialog.
   ═══════════════════════════════════════════════════════════════════ */
.callsign-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(4px);
}
.callsign-modal {
  width: min(440px, 92vw);
  padding: 24px;
  border-radius: 16px;
  background: rgba(8, 12, 20, 0.97);
  border: 1px solid rgba(0, 200, 255, 0.18);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 200, 255, 0.06) inset;
  color: #cbd5e1; font-family: inherit;
}
.callsign-modal-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.01em; }
.callsign-modal-sub { margin: 0 0 16px; font-size: 13px; color: #64748b; line-height: 1.5; }
.callsign-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #e2e8f0; font-size: 16px; font-family: inherit; letter-spacing: 0.02em;
  outline: none; transition: border-color 150ms ease;
}
.callsign-input:focus { border-color: rgba(0, 200, 255, 0.55); }
.callsign-preview { min-height: 20px; margin: 10px 2px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.callsign-preview--idle { color: #64748b; font-weight: 500; }
.callsign-preview--checking { color: #94a3b8; font-weight: 500; }
.callsign-preview--ok { color: #67e8f9; }
.callsign-preview--err { color: #fca5a5; }
.callsign-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.callsign-btn {
  padding: 10px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
  font-family: inherit; letter-spacing: 0.03em; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.callsign-btn--cancel { border: 1px solid rgba(148, 163, 184, 0.22); background: transparent; color: #94a3b8; }
.callsign-btn--cancel:hover { border-color: rgba(148, 163, 184, 0.4); color: #cbd5e1; }
.callsign-btn--save { border: 1px solid rgba(0, 200, 255, 0.5); background: rgba(0, 200, 255, 0.18); color: #a5f3fc; }
.callsign-btn--save:hover:not(:disabled) { background: rgba(0, 200, 255, 0.3); border-color: rgba(0, 200, 255, 0.75); }
.callsign-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.callsign-btn:focus-visible { outline: 2px solid rgba(0, 200, 255, 0.6); outline-offset: 2px; }