/* ===================================================================
   COMMANDER IN CHIEF  //  "COLD POLITICAL WAR ROOM"
   Shell stylesheet. Styles conventional UI class names plus
   robust defaults on generic elements so the UI looks right even
   if a class name differs. Desktop-readable. No external fonts.
   =================================================================== */

/* ---------- PALETTE ---------- */
:root {
  /* Base surfaces */
  --bg:           #070a11;
  --bg-2:         #0a0e16;
  --panel:        #0d131e;
  --panel-2:      #111a28;
  --panel-3:      #16212f;
  --inset:        #060910;

  /* Signal colors */
  --amber:        #ffb000;
  --amber-dim:    #b87f08;
  --amber-soft:   #ffd166;
  --green:        #4fe08a;
  --green-dim:    #2f8f59;
  --red:          #ff4d4d;
  --red-dim:      #b22b2b;
  --red-deep:     #5a1414;
  --cyan:         #4fd0e0;
  --blue:         #5b8dd6;
  --violet:       #b98bff;

  /* Text */
  --ink:          #d6e2ef;
  --ink-dim:      #8597ac;
  --ink-faint:    #5a6b7e;
  --ink-bright:   #f2f7fc;

  /* Lines / borders */
  --line:         #21384f;
  --line-soft:    #18283a;
  --line-amber:   rgba(255,176,0,0.42);

  /* Card type accents */
  --t-economic:   #ffb000; /* amber / money */
  --t-political:  #5b8dd6; /* institutional blue */
  --t-military:   #4fe08a; /* signal green is taken; military = olive-green-amber? use a steely green */
  --t-military-c: #7fce5e;
  --t-social:     #b98bff; /* violet — civic/people */
  --t-chaos:      #ff4d4d; /* alert red */

  /* Map node type accents */
  --n-crisis:     #ff6b4d;
  --n-elite:      #ff4d4d;
  --n-event:      #5b8dd6;
  --n-rest:       #4fe08a;
  --n-boss:       #ffb000;

  /* Effects */
  --glow-amber:   0 0 0 1px rgba(255,176,0,0.25), 0 0 14px rgba(255,176,0,0.18);
  --glow-red:     0 0 0 1px rgba(255,77,77,0.30), 0 0 16px rgba(255,77,77,0.22);
  --glow-green:   0 0 0 1px rgba(79,224,138,0.28), 0 0 14px rgba(79,224,138,0.18);
  --shadow-deep:  0 8px 28px rgba(0,0,0,0.55);

  --mono: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Code",
          "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono",
          Consolas, "Courier New", monospace;

  --radius: 4px;

  /* Mobile/touch refactor reference vars (Phase 0). Inert on desktop. */
  --tap-min: 44px;       /* minimum touch target */
  --status-h: 0px;       /* sticky status reference height (scroll-margin) */
  --sheet-radius: 14px;  /* bottom-sheet top corner radius on mobile */
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    /* faint grid */
    linear-gradient(rgba(33,56,79,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,56,79,0.16) 1px, transparent 1px),
    /* radial vignette glow from top */
    radial-gradient(1200px 700px at 50% -10%, rgba(255,176,0,0.05), transparent 60%),
    radial-gradient(900px 900px at 80% 120%, rgba(91,141,214,0.06), transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.2px;
  overflow-x: hidden;
}

/* Scanline overlay — sits above the background, below content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.16) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}
/* subtle flicker sweep */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  background: linear-gradient(to bottom, rgba(255,176,0,0.025), transparent 18%);
  animation: sweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(120vh); }
}

#app {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 22px 60px;
  min-height: 100vh;
}

/* ---------- SELECTION / SCROLLBAR ---------- */
::selection { background: var(--amber); color: #000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--inset); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--inset);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 0.5em;
  color: var(--ink-bright);
}
h1 {
  font-size: clamp(26px, 4.5vw, 52px);
  letter-spacing: 6px;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255,176,0,0.35), 0 2px 0 #000;
}
h2 {
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--amber-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  transform: rotate(45deg);
}
h3 { font-size: 14px; letter-spacing: 2px; color: var(--ink); }
h4 { font-size: 12px; letter-spacing: 1.5px; color: var(--ink-dim); }

p { margin: 0 0 0.8em; color: var(--ink); }
small, .small { font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; }
strong, b { color: var(--amber-soft); font-weight: 700; }
em { color: var(--cyan); font-style: normal; }
hr { border: none; border-top: 1px dashed var(--line); margin: 14px 0; }
code, .mono { font-family: var(--mono); }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 0.8em; padding-left: 1.2em; }
li { margin: 2px 0; }
li::marker { color: var(--amber-dim); }

/* Uppercase classified label flourish */
.label, .tag, .dossier-label,
[data-label] {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- GENERIC BUTTONS ---------- */
button, .btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-amber);
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
  outline: none;
}
button:hover, .btn:hover {
  color: #000;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  box-shadow: var(--glow-amber);
  border-color: var(--amber);
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--amber);
}
button:disabled, .btn:disabled,
button[disabled], .btn.disabled {
  color: var(--ink-faint);
  background: var(--panel);
  border-color: var(--line-soft);
  cursor: not-allowed;
  box-shadow: none;
}
button:disabled:hover, .btn:disabled:hover { transform: none; }

.btn-primary, .btn.primary {
  color: #000;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  border-color: var(--amber);
  box-shadow: var(--glow-amber);
  font-weight: 700;
}
.btn-primary:hover, .btn.primary:hover { filter: brightness(1.1); }

.btn-danger, .btn.danger {
  color: var(--red);
  border-color: rgba(255,77,77,0.5);
}
.btn-danger:hover, .btn.danger:hover {
  color: #000;
  background: linear-gradient(180deg, #ff7a7a, var(--red));
  box-shadow: var(--glow-red);
}

.btn-ghost, .btn.ghost {
  color: var(--ink-dim);
  border-color: var(--line);
  background: transparent;
}
.btn-ghost:hover, .btn.ghost:hover {
  color: var(--ink-bright);
  background: var(--panel-2);
  border-color: var(--ink-dim);
  box-shadow: none;
}

/* ---------- GENERIC PANEL FRAME ---------- */
.panel, .card, .crisis-panel, .leader-card,
.event-folder, .dossier, .reward, .rest, .hud, .ticker {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}

/* corner-bracket flourish for framed panels */
.panel::before, .crisis-panel::before, .event-folder::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  border-left: 2px solid var(--line-amber);
  border-top: 2px solid var(--line-amber);
  pointer-events: none;
}
.panel::after, .crisis-panel::after, .event-folder::after {
  content: "";
  position: absolute;
  bottom: 6px; right: 6px;
  width: 14px; height: 14px;
  border-right: 2px solid var(--line-amber);
  border-bottom: 2px solid var(--line-amber);
  pointer-events: none;
}

/* ===================================================================
   TOP BAR / CLASSIFIED HEADER
   =================================================================== */
.classified-bar, .topbar, header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,176,0,0.04) 0 8px, transparent 8px 16px),
    var(--inset);
}
.classified-bar .eyes-only, .topbar .eyes-only {
  color: var(--red);
  font-weight: 700;
}

/* ===================================================================
   HUD  —  resource gauges, capital, relics
   =================================================================== */
.hud {
  padding: 12px 14px;
  margin-bottom: 16px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-deep);
  border-left: 3px solid var(--amber-dim);
}

.hud-gauges, .gauges, .resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* RESOURCE GAUGE — terminal-style bar */
.resource-gauge, .gauge {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 9px 8px;
  position: relative;
  overflow: hidden;
}
.resource-gauge .gauge-label,
.resource-gauge .label,
.gauge .label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 5px;
}
.resource-gauge .gauge-value,
.resource-gauge .value,
.gauge .value {
  color: var(--ink-bright);
  font-weight: 700;
  letter-spacing: 1px;
}

/* the track */
.resource-gauge .gauge-track,
.resource-gauge .track,
.gauge .track {
  position: relative;
  height: 12px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.4) 0 2px, transparent 2px 6px),
    #04070d;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}

/* the FILL element (named .fill, .gauge-fill, .resource-gauge .bar) */
.resource-gauge .gauge-fill,
.resource-gauge .fill,
.resource-gauge .bar,
.gauge .fill,
.gauge-fill,
.fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, var(--green), var(--green-dim));
  box-shadow: 0 0 10px rgba(79,224,138,0.4);
  transition: width 0.35s cubic-bezier(.2,.8,.2,1), background 0.3s;
}
/* segmented terminal sheen on the fill */
.resource-gauge .gauge-fill::after,
.resource-gauge .fill::after,
.gauge .fill::after,
.gauge-fill::after,
.fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.10) 0 1px, transparent 1px 5px);
}

/* state coloring of gauges by level (UI may add classes) */
.resource-gauge.warn .fill, .resource-gauge.warn .gauge-fill,
.gauge.warn .fill, .fill.warn {
  background: linear-gradient(180deg, var(--amber-soft), var(--amber-dim));
  box-shadow: 0 0 10px rgba(255,176,0,0.45);
}
.resource-gauge.crit .fill, .resource-gauge.crit .gauge-fill,
.gauge.crit .fill, .fill.crit,
.resource-gauge.low .fill {
  background: linear-gradient(180deg, #ff7a7a, var(--red-dim));
  box-shadow: 0 0 12px rgba(255,77,77,0.5);
  animation: pulse-red 1.1s ease-in-out infinite;
}
@keyframes pulse-red {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.65; }
}

/* per-resource accent tint (optional classes per resource key) */
.resource-gauge.trust    .fill { background: linear-gradient(180deg,#7fb0ff,#3a6bbf); }
.resource-gauge.stability .fill { background: linear-gradient(180deg,#b98bff,#6d44b8); }
.resource-gauge.economy  .fill { background: linear-gradient(180deg,var(--amber-soft),var(--amber-dim)); }
.resource-gauge.standing .fill { background: linear-gradient(180deg,var(--cyan),#2b8c9a); }
.resource-gauge.security .fill { background: linear-gradient(180deg,var(--green),var(--green-dim)); }

/* non-lethal standing flag */
.resource-gauge.standing.low::after,
.resource-gauge.standing.crit::after {
  content: "LOW";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--red);
}

/* ---------- POLITICAL CAPITAL ---------- */
.capital {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--inset);
  border: 1px solid var(--line-amber);
  border-radius: 3px;
  box-shadow: var(--glow-amber);
}
.capital .capital-label, .capital .label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
}
.capital .pips, .capital .capital-pips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.capital .pip, .pip {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--inset);
  border: 2px solid var(--amber-dim);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}
.capital .pip.full, .pip.full, .pip.filled, .pip.active {
  background: radial-gradient(circle at 35% 30%, var(--amber-soft), var(--amber));
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255,176,0,0.6);
}
.capital .capital-count, .capital .value {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 15px;
}

/* ---------- RELIC CHIPS ---------- */
.relics, .relic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.relic, .relic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--inset);
  border: 1px solid rgba(79,208,224,0.4);
  border-radius: 12px;
  padding: 4px 10px;
  cursor: default;
  transition: all 0.12s;
}
.relic::before, .relic-chip::before {
  content: "◆";
  color: var(--cyan);
  font-size: 9px;
}
.relic:hover, .relic-chip:hover {
  color: var(--ink-bright);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(79,208,224,0.3);
}

/* ---------- PLAYER STATUS STACKS ---------- */
.statuses, .player-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.status, .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--inset);
  color: var(--ink-dim);
}
.status .stack, .status .status-amount {
  font-weight: 700;
  color: var(--ink-bright);
}
.status.momentum  { color: var(--green);  border-color: rgba(79,224,138,0.5); }
.status.fortified { color: var(--cyan);   border-color: rgba(79,208,224,0.5); }
.status.scandal   { color: var(--red);    border-color: rgba(255,77,77,0.5); }
.status.mitigation, .mitigation {
  color: var(--cyan);
  border-color: rgba(79,208,224,0.5);
}

/* ===================================================================
   LEADER SELECT
   =================================================================== */
.title-screen, .leaderSelect, .leader-select {
  text-align: center;
  padding-top: 30px;
}
.title-screen .subtitle, .subtitle {
  color: var(--ink-dim);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 30px;
}
.title-screen .subtitle::before { content: "// "; color: var(--amber); }
.title-screen .subtitle::after  { content: " //"; color: var(--amber); }

.leader-grid, .leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 24px;
  text-align: left;
}

.leader-card {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--amber-dim);
  box-shadow: var(--shadow-deep);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.leader-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--amber);
  box-shadow: var(--shadow-deep), var(--glow-amber);
}
.leader-card .leader-name, .leader-card h3 {
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
}
.leader-card .leader-title, .leader-card .title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.leader-card .leader-blurb, .leader-card .blurb {
  font-size: 12px;
  color: var(--ink);
  flex: 1;
}
.leader-card .leader-passive, .leader-card .passive {
  font-size: 11px;
  color: var(--green);
  border-left: 2px solid var(--green-dim);
  padding-left: 8px;
  background: rgba(79,224,138,0.05);
  padding: 6px 8px;
  border-radius: 2px;
}
.leader-card .leader-passive::before, .leader-card .passive::before {
  content: "PASSIVE // ";
  color: var(--green-dim);
  font-size: 9px;
  letter-spacing: 1px;
}
.leader-card .leader-resources, .leader-card .starting-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 4px 10px;
  font-size: 11px;
  color: var(--ink-dim);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.leader-card .leader-resources span b,
.leader-card .starting-resources span b { color: var(--ink-bright); }
.leader-card button, .leader-card .btn { margin-top: 6px; width: 100%; }

/* ===================================================================
   MAP  —  node DAG
   =================================================================== */
.map {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(91,141,214,0.05), transparent 70%),
    var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  overflow-x: auto;
}
/* a row of nodes */
.map-row, .map .row {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 14px 0;
  position: relative;
  min-height: 60px;
}
.map-row + .map-row::before,
.map .row + .row::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 1px; height: 14px;
  background: var(--line);
  transform: translateX(-50%);
}

.map-node, .node {
  --node-accent: var(--ink-dim);
  min-width: 120px;
  max-width: 170px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--ink-dim);
  text-align: center;
  position: relative;
  cursor: default;
  transition: all 0.15s;
  font-size: 11px;
  letter-spacing: 1px;
}
.map-node .node-glyph, .node .glyph, .map-node .glyph {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 5px;
  color: var(--node-accent);
  text-shadow: 0 0 10px currentColor;
}
.map-node .node-type, .node .type, .map-node .type {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--node-accent);
}
.map-node .node-id, .node .id {
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}

/* node type accents */
.map-node.crisis, .node.crisis { --node-accent: var(--n-crisis); }
.map-node.elite,  .node.elite  { --node-accent: var(--n-elite); }
.map-node.event,  .node.event  { --node-accent: var(--n-event); }
.map-node.rest,   .node.rest   { --node-accent: var(--n-rest); }
.map-node.boss,   .node.boss   { --node-accent: var(--n-boss); }

/* node STATES */
.map-node.visited, .node.visited {
  opacity: 0.45;
  border-style: dashed;
}
.map-node.visited::after, .node.visited::after {
  content: "CLEARED";
  position: absolute;
  top: 4px; right: 6px;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--green-dim);
}
.map-node.current, .node.current {
  border-color: var(--amber);
  color: var(--ink-bright);
  box-shadow: var(--glow-amber);
  opacity: 1;
}
.map-node.current::before, .node.current::before {
  content: "▶ YOU ARE HERE";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber);
  background: var(--inset);
  padding: 1px 6px;
  white-space: nowrap;
}
.map-node.reachable, .node.reachable {
  cursor: pointer;
  border-color: var(--node-accent);
  color: var(--ink-bright);
  box-shadow: 0 0 0 1px var(--node-accent), 0 0 14px -2px var(--node-accent);
  animation: node-breathe 2s ease-in-out infinite;
}
@keyframes node-breathe {
  0%,100% { box-shadow: 0 0 0 1px var(--node-accent), 0 0 10px -3px var(--node-accent); }
  50%     { box-shadow: 0 0 0 1px var(--node-accent), 0 0 18px 0px var(--node-accent); }
}
.map-node.reachable:hover, .node.reachable:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
}
.map-node.locked, .node.locked {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.map-node.boss, .node.boss {
  border-width: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,77,77,0.06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--panel-2), var(--red-deep));
  border-color: var(--red-dim);
}
.map-node.boss .node-type, .node.boss .type { color: var(--n-boss); }

/* ===================================================================
   ENCOUNTER  —  threat assessment + hand
   =================================================================== */
.encounter, .encounter-screen {
  display: grid;
  gap: 16px;
}

/* CRISIS / THREAT ASSESSMENT PANEL (red-alert framing) */
.crisis-panel, .threat-panel {
  padding: 16px 18px;
  border: 1px solid var(--red-dim);
  border-left: 4px solid var(--red);
  background:
    repeating-linear-gradient(45deg, rgba(255,77,77,0.05) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--panel), #160d10);
  box-shadow: var(--glow-red), var(--shadow-deep);
}
.crisis-panel::before, .crisis-panel::after {
  border-color: rgba(255,77,77,0.5);
}
.crisis-panel .crisis-header, .threat-panel .header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.crisis-panel .crisis-name, .crisis-panel h2, .crisis-name {
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 0 0 14px rgba(255,77,77,0.4);
  border: none;
  margin: 0;
}
.crisis-panel .crisis-name::before, .crisis-name::before {
  content: "⚠ ";
}
.crisis-panel .crisis-type, .crisis-type {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
  border: 1px solid var(--line-amber);
  padding: 2px 8px;
  border-radius: 2px;
}
.crisis-panel .crisis-type.boss, .crisis-type.boss {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255,77,77,0.08);
}
.crisis-panel .crisis-blurb, .crisis-blurb {
  font-size: 12px;
  color: var(--ink-dim);
  font-style: italic;
  margin-bottom: 12px;
}

/* SEVERITY BAR (the crisis "HP") */
.severity-bar, .severity {
  position: relative;
  height: 26px;
  border: 1px solid var(--red-dim);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 3px, transparent 3px 8px),
    #100406;
  overflow: hidden;
  margin: 6px 0 4px;
}
.severity-bar .severity-fill, .severity-bar .fill,
.severity .fill, .severity-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #ff6b6b, var(--red-dim));
  box-shadow: 0 0 16px rgba(255,77,77,0.55);
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.severity-bar .severity-fill::after, .severity-bar .fill::after,
.severity .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0.25) 0 1px, transparent 1px 6px);
}
.severity-bar .severity-text, .severity-bar .value,
.severity .value, .severity-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 1px 2px #000;
  z-index: 2;
}

/* crisis status badges (weakened / vulnerable / stunned / escalation) */
.crisis-statuses, .crisis-panel .statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.crisis-statuses .status, .crisis-panel .status {
  background: rgba(0,0,0,0.3);
}
.status.weakened   { color: var(--green); border-color: rgba(79,224,138,0.5); }
.status.vulnerable { color: var(--amber); border-color: var(--line-amber); }
.status.stunned    { color: var(--cyan);  border-color: rgba(79,208,224,0.5); }
.status.escalation { color: var(--red);   border-color: rgba(255,77,77,0.5); }

/* INTENT / TELEGRAPH */
.intent, .threat, .crisis-intent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--red-dim);
  border-radius: 3px;
  background: rgba(255,77,77,0.06);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-bright);
}
.intent::before, .threat::before, .crisis-intent::before {
  content: "INTENT";
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--red);
  border: 1px solid var(--red-dim);
  padding: 3px 7px;
  border-radius: 2px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
}
.intent.recover::before { content: "RECOVERY"; color: var(--amber); border-color: var(--line-amber); }
.intent.escalate::before { content: "BUILDUP"; }
.intent .intent-amount, .intent b { color: var(--red); font-weight: 700; }

/* ---------- HAND / DOSSIER CARDS ---------- */
.hand, .player-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  justify-content: center;
  align-items: stretch;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 120px;
}

.card, .dossier {
  --accent: var(--ink-dim);
  width: 156px;
  min-height: 200px;
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  box-shadow: var(--shadow-deep);
  cursor: pointer;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
  position: relative;
  overflow: hidden;
}
.card:hover, .dossier:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-deep), 0 0 0 1px var(--accent), 0 0 18px -3px var(--accent);
}
.card:active, .dossier:active { transform: translateY(-2px); }

/* faint folder tab flourish */
.card::before, .dossier::before {
  content: "";
  position: absolute;
  top: -3px; left: 14px;
  width: 36px; height: 6px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.7;
}

.card .card-header, .dossier .dossier-header,
.card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.card .card-name, .dossier .dossier-name, .card .name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-bright);
  line-height: 1.2;
}
.card .card-cost, .card .cost, .dossier .cost {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--amber-soft), var(--amber));
  color: #000;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 0 8px rgba(255,176,0,0.5);
}
.card .card-type, .card .type, .dossier .type {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  padding: 1px 6px;
  border-radius: 2px;
}
.card .card-text, .card .text, .dossier .text {
  font-size: 11px;
  color: var(--ink);
  line-height: 1.4;
  flex: 1;
  border-top: 1px dashed var(--line);
  padding-top: 7px;
}
.card .card-rarity, .card .rarity {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
}
.card .keywords, .card .card-keywords {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan);
}

/* card TYPE accents */
.card.economic,  .dossier.economic,  .card[data-type="ECONOMIC"]  { --accent: var(--t-economic); }
.card.political, .dossier.political, .card[data-type="POLITICAL"] { --accent: var(--t-political); }
.card.military,  .dossier.military,  .card[data-type="MILITARY"]  { --accent: var(--t-military-c); }
.card.social,    .dossier.social,    .card[data-type="SOCIAL"]    { --accent: var(--t-social); }
.card.chaos,     .dossier.chaos,     .card[data-type="CHAOS"]     { --accent: var(--t-chaos); }

.card.chaos, .dossier.chaos, .card[data-type="CHAOS"] {
  background:
    repeating-linear-gradient(45deg, rgba(255,77,77,0.05) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--panel-2), #160d10);
}

/* unaffordable / disabled cards */
.card.unaffordable, .card.disabled, .card.dim,
.dossier.unaffordable, .dossier.disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.card.unaffordable:hover, .card.disabled:hover,
.dossier.unaffordable:hover { transform: none; box-shadow: var(--shadow-deep); }
.card.unaffordable .card-cost, .card.unaffordable .cost {
  background: var(--red-dim);
  box-shadow: 0 0 8px rgba(255,77,77,0.4);
  color: #fff;
}

/* selected/targeting */
.card.selected, .dossier.selected {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2px var(--amber), 0 0 22px -2px var(--amber);
}

/* ---------- PILE COUNTERS + ENCOUNTER FOOTER ---------- */
.encounter-footer, .pile-bar, .hand-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.piles, .pile-counts {
  display: flex;
  gap: 16px;
}
.pile, .pile-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pile .pile-num, .pile .count, .pile b {
  font-size: 18px;
  color: var(--amber);
  font-weight: 700;
}
.pile.draw .pile-num    { color: var(--green); }
.pile.discard .pile-num { color: var(--ink-dim); }
.pile.exhaust .pile-num { color: var(--red); }

.end-turn, button.end-turn, .btn.end-turn {
  font-size: 14px;
  padding: 12px 26px;
  letter-spacing: 3px;
  color: #000;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  border-color: var(--amber);
  box-shadow: var(--glow-amber);
  font-weight: 700;
}
.end-turn:hover { filter: brightness(1.12); }

/* ===================================================================
   TICKER  —  event log
   =================================================================== */
.ticker, .turn-log, .log {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--green);
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius);
  max-height: 140px;
  overflow-y: auto;
}
.ticker::before, .turn-log::before {
  content: "// SITREP FEED";
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--green-dim);
  margin-bottom: 4px;
}
.ticker .log-line, .ticker li, .turn-log li, .log-line {
  list-style: none;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(79,224,138,0.12);
  color: var(--ink);
  white-space: pre-wrap;
}
.ticker .log-line::before, .ticker li::before,
.turn-log li::before, .log-line::before {
  content: "› ";
  color: var(--green);
}
.ticker .log-line:last-child, .ticker li:last-child {
  color: var(--green);
  text-shadow: 0 0 6px rgba(79,224,138,0.4);
}

/* ===================================================================
   EVENT  —  classified folder
   =================================================================== */
.event-folder, .event-panel, .event {
  max-width: 720px;
  margin: 20px auto;
  padding: 22px 24px;
  border: 1px solid var(--line-amber);
  border-top: 4px solid var(--amber);
  box-shadow: var(--glow-amber), var(--shadow-deep);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--panel), var(--panel-2));
}
.event-folder .event-stamp, .event-folder::after {
  /* override generic corner with a CLASSIFIED stamp feel — keep corner too */
}
.event-folder .event-tag, .event .tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red-dim);
  padding: 2px 8px;
  margin-bottom: 10px;
  transform: rotate(-1.5deg);
}
.event-folder .event-tag::before, .event .tag::before { content: "CLASSIFIED // "; }
.event-folder .event-title, .event-folder h2, .event .title {
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
  border: none;
  margin-bottom: 12px;
}
.event-folder .event-text, .event .text, .event-folder p {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* redaction-bar flourish */
.redaction, .redacted {
  display: inline-block;
  background: #000;
  color: transparent;
  border-radius: 1px;
  padding: 0 4px;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.event-text .redaction, .event-text .redacted { vertical-align: baseline; }

.event-options, .options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-options button, .options button,
.event-option, .option {
  text-align: left;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 13px;
  padding: 12px 14px;
  color: var(--ink);
  border-left: 3px solid var(--amber-dim);
  background: var(--panel-2);
}
.event-options button:hover, .options button:hover,
.event-option:hover {
  color: #000;
  border-left-color: var(--amber);
}
.event-option .option-label, .option .label {
  display: block;
  font-weight: 700;
  letter-spacing: 1px;
}
.event-result, .result-text {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px dashed var(--green-dim);
  border-radius: 3px;
  background: rgba(79,224,138,0.05);
  color: var(--green);
  font-size: 13px;
  line-height: 1.6;
}
.event-result::before, .result-text::before {
  content: "OUTCOME // ";
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--green-dim);
}

/* ===================================================================
   REWARD
   =================================================================== */
.reward, .reward-screen {
  max-width: 860px;
  margin: 20px auto;
  padding: 22px 24px;
  text-align: center;
  border-top: 3px solid var(--green-dim);
  box-shadow: var(--shadow-deep);
}
.reward h2, .reward .reward-title {
  justify-content: center;
  color: var(--green);
}
.reward h2::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.reward .reward-subtitle, .reward .subtitle {
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.reward-options, .reward .options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.reward .card, .reward .dossier { cursor: pointer; }
.reward-relic, .reward .relic-option {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid rgba(79,208,224,0.5);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: 0 0 14px rgba(79,208,224,0.2);
  cursor: pointer;
  transition: transform 0.13s;
}
.reward-relic:hover, .reward .relic-option:hover { transform: translateY(-4px); }
.reward-relic .relic-name { color: var(--cyan); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.reward-relic .relic-flavor { color: var(--ink-faint); font-size: 11px; font-style: italic; }
.reward-relic .relic-text { color: var(--ink); font-size: 12px; }
.reward .resource-bonus, .resource-bonus {
  font-size: 12px;
  color: var(--green);
  margin: 8px 0;
}
.reward .skip, .reward-skip { margin-top: 20px; }

/* ===================================================================
   REST
   =================================================================== */
.rest, .rest-screen {
  max-width: 640px;
  margin: 30px auto;
  padding: 24px;
  text-align: center;
  border-top: 3px solid var(--green-dim);
  box-shadow: var(--shadow-deep);
}
.rest h2 { justify-content: center; color: var(--green); }
.rest h2::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.rest .rest-blurb, .rest .blurb {
  color: var(--ink-dim);
  font-style: italic;
  margin-bottom: 20px;
}
.rest-menu, .rest .menu {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.rest-menu button, .rest .menu button {
  min-width: 180px;
  padding: 16px;
  font-size: 13px;
}
.rest-deck, .rest .deck-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.rest-deck .card, .rest .deck-list .card { width: 140px; min-height: 170px; }

/* ===================================================================
   GAME OVER  /  VICTORY
   =================================================================== */
.gameover, .victory, .endscreen {
  max-width: 620px;
  margin: 60px auto;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.gameover {
  border-color: var(--red-dim);
  border-top: 4px solid var(--red);
  box-shadow: var(--glow-red), var(--shadow-deep);
}
.gameover h1, .gameover .title {
  color: var(--red);
  text-shadow: 0 0 22px rgba(255,77,77,0.5);
  letter-spacing: 8px;
  animation: glitch 2.5s steps(2) infinite;
}
@keyframes glitch {
  0%, 92%, 100% { transform: none; opacity: 1; }
  93% { transform: translateX(-2px); opacity: 0.85; }
  95% { transform: translateX(2px); }
  97% { transform: none; }
}
.gameover .defeat-reason, .gameover .reason {
  font-size: 15px;
  color: var(--ink-bright);
  letter-spacing: 1px;
  margin: 14px 0 22px;
}
.gameover .defeat-reason::before, .gameover .reason::before {
  content: "// CAUSE OF COLLAPSE: ";
  color: var(--red);
  font-size: 11px;
  letter-spacing: 2px;
}

.victory {
  border-color: var(--amber-dim);
  border-top: 4px solid var(--amber);
  box-shadow: var(--glow-amber), var(--shadow-deep);
}
.victory h1, .victory .title {
  color: var(--amber);
  text-shadow: 0 0 24px rgba(255,176,0,0.55);
  letter-spacing: 6px;
}
.victory .victory-sub, .victory .subtitle { color: var(--green); letter-spacing: 3px; }

/* shared stats readout */
.stats, .run-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 24px 0;
  text-align: left;
}
.stats .stat, .run-stats .stat {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-dim);
  border-radius: 3px;
  background: var(--inset);
}
.stats .stat-label, .stat .label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stats .stat-value, .stat .value {
  font-size: 22px;
  font-weight: 700;
  color: var(--amber);
}
.gameover .restart, .victory .restart, .restart { margin-top: 10px; }

/* ===================================================================
   LAYOUT HELPERS  (used if UI groups sections)
   =================================================================== */
.row-flex, .flex-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.col-flex, .flex-col { display: flex; flex-direction: column; gap: 14px; }
.spacer { flex: 1; }
.center { text-align: center; }
.muted { color: var(--ink-dim); }
.hidden { display: none !important; }
.glow-amber { box-shadow: var(--glow-amber); }
.glow-red   { box-shadow: var(--glow-red); }

/* ===================================================================
   RESPONSIVE  (keep desktop-first, degrade gracefully)
   =================================================================== */
@media (max-width: 720px) {
  #app { padding: 12px; }
  h1 { letter-spacing: 3px; }
  .hand, .player-hand { gap: 8px; }
  .card, .dossier { width: 132px; min-height: 180px; }
  .map-row, .map .row { gap: 12px; }
  .map-node, .node { min-width: 92px; }
}

/* honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================
   INTEGRATION FIXES — style the UI's actual element class names.
   The UI markup uses *-head / *-label / *-value / *-list / status-badge /
   pile-chip sub-spans that the original stylesheet never targeted, so they
   collapsed with no spacing. These rules restore separation + layout.
   =================================================================== */

/* resource gauge: push label left, value right */
.resource-gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.resource-gauge-label {
  letter-spacing: 1px;
  color: var(--ink-dim);
  text-transform: uppercase;
  font-size: 11px;
}
.resource-gauge-value {
  font-weight: 700;
  color: var(--ink-bright);
  letter-spacing: 0.5px;
}
.resource-gauge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* player posture: separate the label from the badge row, and the badges from each other */
.player-statuses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.player-statuses-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
}
.player-statuses-list { display: flex; flex-wrap: wrap; gap: 8px; }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--inset);
  color: var(--ink-dim);
}
.status-badge-count { font-weight: 700; color: var(--ink-bright); }
.status-badge.is-empty { opacity: 0.4; }
.status-badge.status-momentum  { color: var(--green); border-color: rgba(79,224,138,0.5); }
.status-badge.status-fortified { color: var(--cyan);  border-color: rgba(79,208,224,0.5); }
.status-badge.status-scandal   { color: var(--red);   border-color: rgba(255,77,77,0.5); }

/* encounter meta row: mitigation pool + turn counter */
.encounter-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.mitigation-pool, .encounter-turn { display: inline-flex; align-items: center; gap: 8px; }
.mitigation-label, .encounter-turn-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.mitigation-label { color: var(--cyan); }
.mitigation-value, .encounter-turn-value { font-weight: 700; color: var(--ink-dim); }
.mitigation-value.is-active, .encounter-turn-value { color: var(--ink-bright); }

/* draw/discard/exhaust pile chips */
.pile-counts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--inset);
}
.pile-chip-count { font-weight: 700; color: var(--ink-bright); }

/* hand: header on its own line ABOVE the card row (was sitting beside it) */
.hand { flex-direction: column; align-items: stretch; }
.hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.hand-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
}
.hand-hint { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.5px; }
.hand-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* capital readout spacing */
.capital-pips, .capital .pips { margin: 0 4px; }

/* ===================================================================
   ITERATION 2 — UX / ONBOARDING OVERHAUL + per-card preview + intent chips.
   Appended AFTER the spacing-fix block above (do not move that block).
   War-room aesthetic preserved: amber/red signal palette, mono type,
   inset terminal surfaces.
   =================================================================== */

/* ---------- EXECUTIVE BRIEFING OVERLAY ---------- */
.briefing-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(900px 600px at 50% 30%, rgba(255,176,0,0.06), transparent 70%),
             rgba(3,5,9,0.82);
  backdrop-filter: blur(2px);
  animation: briefing-fade 0.18s ease-out;
}
@keyframes briefing-fade { from { opacity: 0; } to { opacity: 1; } }
.briefing-card {
  max-width: 640px;
  width: 100%;
  padding: 22px 26px 24px;
  border: 1px solid var(--line-amber);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--glow-amber), var(--shadow-deep);
  position: relative;
}
.briefing-card::before, .briefing-card::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
.briefing-card::before { top: 6px; left: 6px; border-left: 2px solid var(--line-amber); border-top: 2px solid var(--line-amber); }
.briefing-card::after  { bottom: 6px; right: 6px; border-right: 2px solid var(--line-amber); border-bottom: 2px solid var(--line-amber); }
.briefing-stamp {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red-dim);
  padding: 2px 8px;
  margin-bottom: 12px;
  transform: rotate(-1deg);
}
.briefing-title {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--amber);
  border: none;
  margin: 0 0 8px;
  text-shadow: 0 0 16px rgba(255,176,0,0.35);
}
.briefing-title::before { content: none; }
.briefing-intro { color: var(--ink-dim); font-size: 12px; margin-bottom: 14px; }
.briefing-lines { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.briefing-line { display: flex; gap: 12px; align-items: flex-start; border-left: 2px solid var(--amber-dim); padding-left: 10px; }
.briefing-line::marker { content: none; }
.briefing-line-tag {
  flex-shrink: 0;
  min-width: 108px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 700;
  padding-top: 1px;
}
.briefing-line-body { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.briefing-actions { display: flex; justify-content: flex-end; }
.briefing-begin-btn { font-size: 14px; padding: 12px 30px; letter-spacing: 3px; }

/* persistent BRIEFING button in the map header */
.map-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.map-head-text { flex: 1; }
.briefing-open-btn { flex-shrink: 0; }

/* ---------- MAP ORIENTATION ---------- */
.map-head .panel-title {
  font-size: 17px;
  color: var(--amber);
}
.panel-head { margin-bottom: 12px; }
.panel-title {
  border: none;
  margin: 6px 0 4px;
}
.panel-sub { font-size: 12px; color: var(--ink-dim); margin: 0; }

/* progress indicator toward the boss */
.map-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-dim);
  border-radius: var(--radius);
}
.map-progress-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.map-progress-track { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 120px; }
.map-progress-pip {
  font-size: 13px;
  line-height: 1;
  color: var(--line);
}
.map-progress-pip.is-done { color: var(--green); text-shadow: 0 0 6px rgba(79,224,138,0.4); }
.map-progress-pip.is-here {
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  animation: pip-pulse 1.4s ease-in-out infinite;
}
.map-progress-pip.is-future { color: var(--ink-faint); opacity: 0.6; }
.map-progress-pip.is-boss { font-size: 16px; color: var(--n-boss); }
@keyframes pip-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.map-progress-count {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 700;
}

/* directional banners (boss at top, start at bottom) */
.map-direction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 6px 0;
}
.map-direction-top { color: var(--red); }
.map-direction-top .map-direction-arrow { color: var(--n-boss); text-shadow: 0 0 8px var(--n-boss); }
.map-direction-bottom { color: var(--green-dim); }
.map-direction-arrow { font-size: 13px; }

/* the node ladder container */
.map-dag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(91,141,214,0.05), transparent 70%),
    var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  overflow-x: auto;
}
.map-dag .map-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 16px 0 22px;
  position: relative;
  min-height: 64px;
}
.map-dag .map-row + .map-row::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 1px; height: 16px;
  background: var(--line);
  transform: translateX(-50%);
}

/* base node card — read the UI's actual classes (.map-node-<type>) */
.map-node {
  --node-accent: var(--ink-dim);
  min-width: 132px;
  max-width: 188px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--ink-dim);
  text-align: center;
  position: relative;
  cursor: default;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.map-node-glyph {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--node-accent);
  text-shadow: 0 0 12px currentColor;
}
.map-node-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--node-accent);
  font-weight: 700;
}
.map-node-meaning {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ink-dim);
  font-style: italic;
}
.map-node-marker {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* node type accents */
.map-node-crisis { --node-accent: var(--n-crisis); }
.map-node-elite  { --node-accent: var(--n-elite); }
.map-node-event  { --node-accent: var(--n-event); }
.map-node-rest   { --node-accent: var(--n-rest); }
.map-node-boss   { --node-accent: var(--n-boss); }

/* current = YOU ARE HERE */
.map-node.is-current {
  border-color: var(--amber);
  color: var(--ink-bright);
  box-shadow: var(--glow-amber);
  opacity: 1;
}
.map-node.is-current .map-node-marker.is-you {
  color: #000;
  background: var(--amber);
  border-radius: 2px;
  padding: 2px 8px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255,176,0,0.6);
}

/* reachable = pulsing labelled CHOICE card */
.map-node.is-choice {
  cursor: pointer;
  border-color: var(--node-accent);
  color: var(--ink-bright);
  box-shadow: 0 0 0 1px var(--node-accent), 0 0 16px -2px var(--node-accent);
  animation: choice-breathe 1.9s ease-in-out infinite;
}
.map-node.is-choice .map-node-marker.is-open {
  color: var(--node-accent);
  font-weight: 700;
}
@keyframes choice-breathe {
  /* box-shadow ONLY — no transform, so the reachable tap target never moves and
     taps are never blocked by a mid-animation reflow (approved cross-breakpoint
     fix; the glow pulse is preserved). */
  0%,100% { box-shadow: 0 0 0 1px var(--node-accent), 0 0 10px -3px var(--node-accent); }
  50%     { box-shadow: 0 0 0 1px var(--node-accent), 0 0 22px 1px var(--node-accent); }
}
.map-node.is-choice:hover {
  transform: translateY(-4px) scale(1.03);
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
}

/* visited = cleared */
.map-node.is-visited {
  opacity: 0.42;
  border-style: dashed;
}
.map-node.is-visited .map-node-marker.is-cleared { color: var(--green-dim); }

/* locked / future = dimmed */
.map-node.is-locked {
  opacity: 0.34;
  cursor: not-allowed;
  filter: grayscale(0.55);
}
.map-node.is-locked .map-node-marker.is-locked-tag { color: var(--ink-faint); }

/* boss node emphasis */
.map-node-boss {
  border-width: 2px;
  border-color: var(--red-dim);
  background:
    repeating-linear-gradient(45deg, rgba(255,77,77,0.06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--panel-2), var(--red-deep));
}
.map-node-boss.is-choice { animation: choice-breathe 1.4s ease-in-out infinite; }

/* legend with meanings */
.map-legend {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.map-legend-head {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.map-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.map-legend-item {
  --node-accent: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.map-legend-item .map-node-glyph {
  font-size: 14px;
  margin: 0;
}
.map-legend-label {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--node-accent);
  font-weight: 700;
}
.map-legend-meaning { color: var(--ink-dim); font-style: italic; }

/* ---------- ENCOUNTER: de-crowded threat panel ---------- */
.crisis-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crisis-panel-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.crisis-panel-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.crisis-turn-inline {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
  border: 1px solid var(--line-amber);
  padding: 2px 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
/* severity + condition share a row, never overlapping */
.crisis-panel-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 720px) {
  .crisis-panel-stats { grid-template-columns: 1fr; }
}
.crisis-panel-stats .severity-bar { margin: 0; }
.severity-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.severity-bar-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); }
.severity-bar-value { font-weight: 700; color: var(--ink-bright); letter-spacing: 1px; }
.severity-bar-track {
  position: relative;
  height: 22px;
  border: 1px solid var(--red-dim);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 3px, transparent 3px 8px),
    #100406;
  overflow: hidden;
}
.severity-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #ff6b6b, var(--red-dim));
  box-shadow: 0 0 14px rgba(255,77,77,0.5);
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}

/* crisis condition badges */
.crisis-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crisis-statuses-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  width: 100%;
}
.crisis-statuses-list { display: flex; flex-wrap: wrap; gap: 6px; }
.crisis-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
  color: var(--ink-dim);
}
.crisis-status-count { font-weight: 700; color: var(--ink-bright); }
.crisis-status-badge.is-empty { opacity: 0.32; }
.crisis-status-weakened.is-active   { color: var(--green); border-color: rgba(79,224,138,0.5); }
.crisis-status-vulnerable.is-active { color: var(--amber); border-color: var(--line-amber); }
.crisis-status-stunned.is-active    { color: var(--cyan);  border-color: rgba(79,208,224,0.5); }
.crisis-status-escalation.is-active { color: var(--red);   border-color: rgba(255,77,77,0.5); }

/* ---------- INTENT PANEL (the focus) + threat chips ---------- */
.intent-panel {
  padding: 12px 14px;
  border: 1px solid var(--red-dim);
  border-left: 4px solid var(--red);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(255,77,77,0.05) 0 10px, transparent 10px 20px),
    rgba(255,77,77,0.04);
  box-shadow: 0 0 0 1px rgba(255,77,77,0.12);
}
.intent-panel.has-unblockable {
  border-left-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,176,0,0.25), 0 0 14px -4px var(--amber);
}
.intent-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.intent-icon { font-size: 14px; color: var(--red); }
.intent-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.intent-telegraph {
  font-size: 13px;
  color: var(--ink-bright);
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.intent-hits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.intent-hits-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.intent-hits-list { display: flex; flex-wrap: wrap; gap: 7px; }
.intent-hit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--red-dim);
  background: rgba(0,0,0,0.35);
  color: var(--ink-bright);
}
.intent-hit-res { color: var(--ink-dim); }
.intent-hit-amt { font-weight: 700; color: var(--red); }
.intent-hit-chip.is-unblockable {
  border-color: var(--amber);
  background: rgba(255,176,0,0.08);
  box-shadow: 0 0 8px -2px var(--amber);
}
.intent-hit-chip.is-unblockable .intent-hit-amt { color: var(--amber-soft); }
.intent-hit-mark {
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #000;
  background: var(--amber);
  padding: 1px 5px;
  border-radius: 2px;
}
.intent-note-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
  color: var(--ink-bright);
}
.intent-note-escalate { color: var(--red); border-color: rgba(255,77,77,0.5); }
.intent-note-recover  { color: var(--amber-soft); border-color: var(--line-amber); }
.intent-note-inflict  { color: var(--violet); border-color: rgba(185,139,255,0.5); }
.intent-note-stunned  { color: var(--cyan); border-color: rgba(79,208,224,0.5); }

/* ---------- ENCOUNTER COACH MARK ---------- */
.coach-mark {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border: 1px dashed var(--amber-dim);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: rgba(255,176,0,0.05);
}
.coach-mark-icon { color: var(--amber); font-size: 16px; line-height: 1.3; }
.coach-mark-body { flex: 1; }
.coach-mark-title {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 700;
  margin-bottom: 4px;
}
.coach-mark-text { font-size: 12px; color: var(--ink); line-height: 1.5; margin: 0; }
.coach-mark-close { flex-shrink: 0; font-size: 10px; padding: 6px 12px; }

/* ---------- PER-CARD "THIS TURN" PROJECTION ---------- */
.card-projection {
  margin-top: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber-dim);
  border-radius: 3px;
  background: rgba(255,176,0,0.04);
}
.proj-head {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 700;
  margin-bottom: 5px;
}
.proj-stats { display: flex; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.proj-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line);
}
.proj-stat-val { font-size: 15px; font-weight: 700; line-height: 1; }
.proj-stat-key { font-size: 7px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.proj-attack { border-color: rgba(255,77,77,0.5); }
.proj-attack .proj-stat-val { color: var(--red); text-shadow: 0 0 8px rgba(255,77,77,0.4); }
.proj-mitigate { border-color: rgba(79,208,224,0.5); }
.proj-mitigate .proj-stat-val { color: var(--cyan); text-shadow: 0 0 8px rgba(79,208,224,0.4); }
.proj-deltas { display: flex; flex-wrap: wrap; gap: 4px; }
.proj-delta {
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
}
.proj-delta.is-up { color: var(--green); border-color: rgba(79,224,138,0.4); }
.proj-delta.is-down { color: var(--red); border-color: rgba(255,77,77,0.4); }

/* card footer state when unaffordable */
.card-footer {
  margin-top: auto;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--amber-soft);
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.card-footer.is-blocked { color: var(--red); }

/* taller dossier cards so name + text + projection + footer all fit */
.card.dossier { min-height: 232px; }

/* unaffordable flag — clear, not just dimmed */
.card.is-unaffordable, .card.is-dimmed {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.card.is-unaffordable:hover { transform: none; box-shadow: var(--shadow-deep); }
.card.is-unaffordable .card-cost {
  background: var(--red-dim);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,77,77,0.4);
}
.card.is-affordable { box-shadow: var(--shadow-deep), 0 0 0 1px rgba(255,176,0,0.18); }

/* ---------- ENCOUNTER: keep hand in view ~900px ; primary END TURN ---------- */
.encounter-body { display: flex; flex-direction: column; gap: 12px; }
.encounter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.end-turn-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.end-turn-btn {
  font-size: 15px;
  padding: 13px 30px;
  letter-spacing: 3px;
  color: #000;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  border-color: var(--amber);
  box-shadow: var(--glow-amber);
  font-weight: 700;
}
.end-turn-btn:hover { filter: brightness(1.12); }
.end-turn-hint { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }

/* On tall-ish viewports keep the encounter compact so the hand stays visible.
   ~900px height target: tighten the threat panel + meta spacing. */
@media (min-height: 760px) and (max-height: 980px) {
  .crisis-panel { padding: 12px 16px; gap: 10px; }
  .crisis-blurb { margin-bottom: 4px; }
  .encounter-body { gap: 10px; }
  .hand { min-height: 100px; }
}

/* ===================================================================
   ITERATION 3 — MOBILE + UX-ARCHITECTURE REFACTOR
   Appended AFTER the iteration-2 + spacing-fix blocks (do not move them).
   Desktop is the unscoped BASE cascade: all structural change ships inside
   @media (max-width:720px) or @media (hover:none). The two deliberate
   cross-breakpoint changes (top-down map flip + the choice-breathe transform
   removal above) are visual no-ops / improvements on desktop.
   All new z-index < 9000 so the scanline overlays (9000/9001) and the briefing
   overlay (9500) stay on top. War-room palette vars reused throughout.
   =================================================================== */

/* ---------- APP SHELL (base = desktop static; sticky only on mobile) ---------- */
.app-status, .app-content, .app-actionbar { position: static; }
.app-content { display: block; }
/* .app-status is a <header>, so it inherits the generic `header { display:flex;
   ... border/padding/background }` rule (line ~311). That row-flex squeezed the
   map status children (hud + map-head + progress) off-screen. Neutralize the
   generic header styling so the shell status is a plain vertical stack. */
.app-status {
  display: block;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* On desktop the three regions just stack like the old HUD / body / footer. */
.app-status > * { margin-bottom: 16px; }
.app-content > * + * { margin-top: 16px; }
.app-actionbar { margin-top: 16px; }

/* ---------- FEEDBACK LAYER (global; helps desktop too) ---------- */
/* Floating delta numbers anchored to <body>; survive the full re-render. */
.fx-float {
  position: fixed;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 6px currentColor, 0 1px 2px #000;
  white-space: nowrap;
  animation: fx-float-rise 0.95s ease-out forwards;
  z-index: 8000;
}
.fx-float.is-up    { color: var(--green); }
.fx-float.is-down  { color: var(--red); }
.fx-float.is-neutral { color: var(--amber-soft); }
@keyframes fx-float-rise {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}

/* One-shot flash on a changed element (box-shadow + scale; NO layout transform
   on interactive nodes — scale doesn't reflow siblings, so taps stay reliable). */
.fx-flash-up   { animation: fx-flash-up 0.8s ease; }
.fx-flash-down { animation: fx-flash-down 0.8s ease; }
@keyframes fx-flash-up {
  0%   { box-shadow: 0 0 0 0 rgba(79,224,138,0); transform: scale(1); }
  30%  { box-shadow: 0 0 14px 2px rgba(79,224,138,0.55); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(79,224,138,0); transform: scale(1); }
}
@keyframes fx-flash-down {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,0); transform: scale(1); }
  30%  { box-shadow: 0 0 14px 2px rgba(255,77,77,0.6); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); transform: scale(1); }
}

/* Transient SITREP toast surfaced near the action (top of frame). */
.app-toast {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 560px);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-bright);
  background: linear-gradient(180deg, var(--panel-2), var(--inset));
  border: 1px solid var(--line-amber);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: var(--glow-amber), var(--shadow-deep);
  animation: app-toast-in 0.22s ease-out;
  pointer-events: none;
}
.app-toast-mark { color: var(--green); font-weight: 700; }
.app-toast-text { color: var(--ink); }
@keyframes app-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- THREAT STRIP (encounter status; styled at all widths, sticky only on mobile) ---------- */
.threat-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  background: linear-gradient(180deg, var(--panel), #160d10);
  border: 1px solid var(--red-dim);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--glow-red);
}
.threat-strip .strip-row { display: flex; align-items: center; gap: 8px; }
.strip-row-head { justify-content: space-between; }
.strip-crisis-name {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255,77,77,0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strip-turn {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--amber-soft);
  border: 1px solid var(--line-amber);
  padding: 1px 7px;
  border-radius: 2px;
}
.strip-sev-label { font-size: 9px; letter-spacing: 1px; color: var(--red); flex-shrink: 0; }
.strip-sev-track {
  position: relative;
  flex: 1;
  height: 12px;
  border: 1px solid var(--red-dim);
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 3px, transparent 3px 8px), #100406;
  overflow: hidden;
}
.strip-sev-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #ff6b6b, var(--red-dim));
  box-shadow: 0 0 10px rgba(255,77,77,0.5);
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.strip-sev-value { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--ink-bright); letter-spacing: 0.5px; }
.strip-row-intent { flex-wrap: wrap; gap: 6px; }
.strip-intent-icon { color: var(--red); font-size: 12px; }
.strip-intent-label { font-size: 9px; letter-spacing: 2px; color: var(--red); font-weight: 700; }
.strip-intent-chip {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-bright);
  padding: 1px 6px;
  border: 1px solid var(--red-dim);
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
}
.strip-intent-chip.is-unblockable {
  border-color: var(--amber);
  color: var(--amber-soft);
  background: rgba(255,176,0,0.08);
}
.strip-row-res { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.strip-res-list { display: flex; flex-wrap: wrap; gap: 5px; }
.strip-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--inset);
  color: var(--ink-dim);
}
.strip-chip-key { color: var(--ink-faint); font-size: 9px; }
.strip-chip-val { color: var(--ink-bright); font-weight: 700; }
.strip-chip.is-danger   { border-color: var(--line-amber); }
.strip-chip.is-danger .strip-chip-val   { color: var(--amber-soft); }
.strip-chip.is-critical { border-color: var(--red-dim); }
.strip-chip.is-critical .strip-chip-val { color: var(--red); }
.strip-meters { display: flex; align-items: center; gap: 8px; }
.strip-cap-pips { display: inline-flex; gap: 2px; }
.strip-cap-pip { font-size: 10px; color: var(--amber-dim); }
.strip-cap-pip.is-filled { color: var(--amber); text-shadow: 0 0 6px var(--amber); }
.strip-mit { font-size: 11px; color: var(--ink-faint); }
.strip-mit.is-active { color: var(--cyan); }

/* compact pile counts in the action bar */
.actionbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  flex-wrap: wrap;
}
.pile-counts-compact { display: flex; gap: 10px; }
.pile-counts-compact .pcc-item {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}

/* compact single-row resource readout (map status) */
.hud-compact-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.hud-compact-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--inset);
  color: var(--ink-dim);
}
.hud-compact-key { color: var(--ink-faint); font-size: 9px; text-transform: uppercase; }
.hud-compact-val { color: var(--ink-bright); font-weight: 700; }
.hud-compact-chip.is-danger .hud-compact-val { color: var(--amber-soft); }
.hud-compact-chip.is-critical .hud-compact-val { color: var(--red); }

/* ---------- DEMOTED SITREP SUMMARY ---------- */
.sitrep-summary {
  padding: 8px 12px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius);
}
.sitrep-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.sitrep-summary-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-dim); }
.sitrep-toggle-btn { font-size: 9px; padding: 4px 10px; }
.sitrep-summary-lines { display: flex; flex-direction: column; gap: 2px; }
.sitrep-summary-line { font-size: 11px; color: var(--ink-dim); }
.sitrep-summary-line.is-latest { color: var(--green); text-shadow: 0 0 6px rgba(79,224,138,0.3); }
.sitrep-summary .ticker { margin-top: 8px; }

/* ---------- MAP FOCUS VIEW (phone default; hidden on desktop) ---------- */
.map-focus { display: none; flex-direction: column; gap: 10px; }
.map-focus-anchor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: rgba(255,176,0,0.06);
  box-shadow: var(--glow-amber);
}
.map-focus-anchor-tag { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.map-focus-anchor-name { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; }
.map-focus-prompt {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 700;
}
.map-focus-choices { display: flex; flex-direction: column; gap: 10px; }
.map-path-toggle { width: 100%; font-size: 11px; }

/* focus choice card = full-width single-column tap row */
.map-node.map-node-focus {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 12px 14px;
}
.map-node.map-node-focus .map-node-glyph { margin: 0; font-size: 26px; flex-shrink: 0; }
.map-node.map-node-focus .map-node-label { flex-shrink: 0; }
.map-node.map-node-focus .map-node-meaning { flex: 1; text-align: left; }
.map-node.map-node-focus .map-node-marker { margin: 0 0 0 auto; flex-shrink: 0; }

/* On DESKTOP keep the interactive braided ladder; hide the focus view. */
@media (min-width: 721px) {
  .map-focus { display: none !important; }
  .map-ladder { display: block; }
}

/* ===================================================================
   MOBILE BLOCK  (max-width:720px) — sticky shell, 2-col hand, sheets,
   tap targets, focus map. Desktop is untouched outside this block.
   =================================================================== */
@media (max-width: 720px) {
  /* --- App-shell sticky regions (encounter only gets the full sticky HUD) --- */
  body.has-sticky-hud .screen-encounter {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body.has-sticky-hud .app-status {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, var(--bg-2), var(--panel));
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin: 0 -12px 10px;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  body.has-sticky-hud .app-status > * { margin-bottom: 0; }
  body.has-sticky-hud .app-content { flex: 1; min-height: 0; }
  body.has-sticky-hud .app-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 10px -12px 0;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, var(--bg-2), var(--panel));
    border-top: 1px solid var(--amber-dim);
  }

  /* MAP STATUS: the full HUD + map-head + progress stack is ~650px tall — far
     too tall to usefully stick (it would cover the focus choices and steal taps,
     since elementFromPoint over the choices resolved to the sticky header).
     Keep it in normal flow so the whole map scrolls and every choice is tappable.
     The focus auto-scroll still lands the player on their choices. */
  body[data-screen="map"] .app-status {
    position: static;
    background: var(--bg-2);
    margin: 0 -12px 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  body[data-screen="map"] .app-status > * { margin-bottom: 8px; }

  /* --- ENCOUNTER: 2-col card grid in the scroll body --- */
  .has-sticky-hud .hand { min-height: 0; padding: 10px; }
  .has-sticky-hud .hand-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .has-sticky-hud .hand-cards > .card,
  .has-sticky-hud .card, .has-sticky-hud .dossier {
    width: 100%;
    min-height: 0;
  }
  .has-sticky-hud .card.dossier { min-height: 0; }
  /* compact the END TURN cluster on mobile */
  .app-actionbar .end-turn-wrap { flex-direction: row; align-items: center; gap: 8px; }
  .app-actionbar .end-turn-btn { font-size: 14px; padding: 12px 22px; }
  .app-actionbar .end-turn-hint { display: none; }

  /* threat strip slightly tighter on phone */
  .threat-strip { padding: 8px 10px; gap: 5px; }

  /* --- MAP FOCUS: show focus, demote ladder to read-only overview --- */
  .map-focus { display: flex; }
  .map-ladder { display: none; }
  .map-ladder.is-expanded {
    display: block;
    margin-top: 12px;
    opacity: 0.92;
  }
  /* the expanded ladder is overview-only — taps go through the focus cards */
  .map-ladder.is-expanded .map-dag { pointer-events: none; }
  .map-ladder.is-expanded .map-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 14px;
  }
  .map-ladder.is-expanded .map-node {
    min-width: 0;
    flex: 1 1 130px;
    max-width: 47%;
    padding: 8px 8px 6px;
  }
  .map-ladder.is-expanded .map-node-glyph { font-size: 18px; }
  .map-ladder.is-expanded .map-node-label { font-size: 10px; }
  /* keep overflow-x:auto as a final clip safety net (already on .map-dag) */

  /* --- TAP TARGETS: 44px minimum on key interactive controls --- */
  .btn,
  .map-node.is-clickable,
  .map-node.map-node-focus,
  .card.is-clickable, .dossier.is-clickable,
  .event-option button, .event-option-btn,
  .leader-select-btn,
  .coach-mark-close,
  .rest-deck-entry,
  .reward-card {
    min-height: var(--tap-min);
  }
  .map-node.map-node-focus { min-height: var(--tap-min); }

  /* bump sub-12px control text for legibility */
  .hand-hint { font-size: 12px; }
  .map-node-meaning { font-size: 11px; }

  /* --- LEADER SELECT: stacked 5-resource readout (was cramped 5-col) ---
     NOTE: the base rule is `.leader-card .leader-resources` (specificity 0,2,0),
     so the override must match or beat it — scope to .leader-card here too. */
  .leader-card .leader-resources { grid-template-columns: 1fr; gap: 6px; }
  .leader-card .leader-resource { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 8px; }

  /* --- HEADER OVERLAP FIX: stack title block + map head on narrow widths --- */
  .title-block { display: flex; flex-direction: column; align-items: center; }
  .map-head-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .map-head-row .briefing-open-btn { align-self: flex-start; }

  /* --- MAP PROGRESS: let the pip track wrap so it never overflows the
     sticky status (was forcing horizontal page scroll at 390px). --- */
  .map-progress { gap: 8px 10px; }
  .map-progress-track { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }

  /* --- DIALOG BOTTOM-SHEETS --- */
  .sheet {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    max-height: 86vh;
    overflow-y: auto;
  }
  .briefing-overlay { align-items: flex-end; padding: 0; }
  .briefing-overlay .sheet { max-height: 90vh; }
}

/* ---------- TOUCH HYGIENE (orthogonal to width): kill sticky hover lifts ---------- */
@media (hover: none) {
  .card:hover, .dossier:hover,
  .map-node.is-choice:hover,
  .map-node.reachable:hover, .node.reachable:hover,
  .leader-card:hover,
  .reward-relic:hover, .reward .relic-option:hover {
    transform: none;
  }
}