/* ============================================================
   Storyteller App — Combat Workspace Styles
   Initiative tracker, declaration cards, action feed, VTT
   ============================================================ */

/* ── Combat Header Bar ─────────────────────────────────────── */
#combat-header {
  height: 44px;
  background: var(--c-bg-600);
  border-bottom: 2px solid var(--c-red-700);
  display: none;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-4);
  z-index: 5;
  flex-shrink: 0;
}
body.combat-active #combat-header {
  display: flex;
}

.combat-round-badge {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-red-200);
  background: hsla(0, 72%, 30%, 0.25);
  border: 1px solid var(--c-red-700);
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
}

.combat-phase-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid transparent;
}
.combat-phase-badge.setup       { color: hsl(240, 50%, 75%); border-color: hsl(240, 30%, 40%); background: hsla(240, 30%, 25%, 0.3); }
.combat-phase-badge.initiative  { color: var(--c-gold-300);  border-color: var(--c-gold-500);  background: hsla(43, 90%, 25%, 0.25); }
.combat-phase-badge.declaration { color: hsl(32, 90%, 70%);  border-color: hsl(32, 90%, 50%);  background: hsla(32, 90%, 25%, 0.25); }
.combat-phase-badge.resolution  { color: var(--c-red-200);   border-color: var(--c-red-500);   background: hsla(0, 72%, 20%, 0.4); animation: pulse-combat 1.5s infinite; }

.combat-header-actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
}



.vtt-toolbar {
  position: absolute;
  top: 48px;
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 3;
}

/* ── Initiative Tracker ────────────────────────────────────── */


.tracker-header {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tracker-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--c-red-200);
  letter-spacing: 0.1em;
}

.combatant-list {
  flex: 1;
  overflow-y: auto;
  /* flex:1 + overflow lets this collapse to a sliver once the phase cards fill
     the panel; the tracker is the one element that must always stay readable.
     Reserve at least one full row (health track + vitals) plus a peek of the
     next so it is obviously scrollable. */
  min-height: 150px;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Combatant Row ─────────────────────────────────────────── */
.combatant-row {
  background: var(--c-bg-500);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* .combatant-list is a flex column, so rows are flex items and shrink by default --
     with more combatants than fit, they squashed to a 16px sliver and clipped their own
     contents. The list already scrolls; rows should keep their natural height. */
  flex-shrink: 0;
  gap: var(--sp-3);
  transition:
    border-color var(--dur-fast) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

/* State styles */
.combatant-row.active-turn {
  border-color: var(--c-combat-active);
  background: hsla(0, 80%, 15%, 0.4);
  box-shadow: var(--shadow-combat);
  animation: active-turn-pulse 2s ease-in-out infinite;
}
.combatant-row.declared {
  border-color: var(--c-combat-declared);
  background: hsla(43, 90%, 15%, 0.25);
}
.combatant-row.resolved {
  border-color: var(--c-combat-done);
  opacity: 0.7;
}
.combatant-row.waiting {
  opacity: 0.65;
}

/* Turn order number */
.turn-number {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--c-bg-400);
  border: 1px solid var(--c-border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.combatant-row.active-turn .turn-number {
  background: var(--c-combat-active);
  border-color: transparent;
  color: var(--c-white);
  box-shadow: 0 0 8px var(--c-combat-active);
}

/* Combatant info */
/* `min-width: 0` alone let this collapse to nothing: the health/blood/willpower pips sit
   in the same flex line, size to their own content and refuse to shrink, so they ate the
   whole ~420px tracker row and the name -- clipped by `.combatant-row { overflow:hidden }`
   -- disappeared entirely. The row lists who acts when, so the name has to win: it keeps a
   96px floor and the pips shrink into whatever is left. */
.combatant-info { flex: 1 1 auto; min-width: 96px; }
.combatant-health {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: 0;
}
.combatant-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combatant-type {
  font-size: 10px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Initiative score */
.combatant-init {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-gold-400);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Combatant status indicator */
.combatant-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
}
.status-dot.waiting    { background: var(--c-combat-waiting); }
.status-dot.declaring  { background: var(--c-combat-declared); animation: blink 1s infinite; }
.status-dot.declared   { background: var(--c-combat-declared); }
.status-dot.active     { background: var(--c-combat-active);   animation: pulse-dot 1s infinite; }
.status-dot.done       { background: var(--c-combat-done); }

/* Health dots inline in tracker */
.combatant-health {
  display: flex;
  gap: 2px;
}
.health-pip {
  width: 6px; height: 6px;
  border-radius: var(--r-xs);
  background: var(--c-success);
  transition: background var(--dur-fast);
}
.health-pip.dmg { background: var(--c-red-700); }
.health-pip.agg { background: var(--c-red-900); }

/* Declaration label on tracker row */
.declaration-preview {
  position: absolute;
  bottom: 3px;
  left: var(--sp-3);
  right: var(--sp-3);
  font-size: 10px;
  color: var(--c-combat-declared);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* NPC AI badge */
.combatant-ai-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: hsla(32, 90%, 25%, 0.4);
  border: 1px solid var(--c-agent-npc);
  color: var(--c-agent-npc);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Action Declaration Section (tracker rail) ─────────────── */
.declaration-panel {
  border-top: 1px solid var(--c-border-strong);
  padding: var(--sp-3);
  background: var(--c-bg-800);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.declaration-panel-header {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--c-combat-declared);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Declaration action cards (AI-suggested) */
.action-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.action-card {
  background: hsla(0, 0%, 5%, 0.75);
  border: 1px solid var(--c-bg-900);
  box-shadow: inset 0 0 10px hsla(0, 80%, 25%, 0.3), 0 4px 6px rgba(0,0,0,0.5);
  backdrop-filter: var(--blur-md);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    transform var(--dur-instant);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  position: relative;
}
.action-card:hover {
  border-color: var(--c-red-500);
  background: var(--c-bg-400);
  transform: translateX(2px);
}
.action-card.selected {
  border-color: var(--c-combat-active);
  background: hsla(0, 72%, 15%, 0.4);
  box-shadow: 0 0 8px hsla(0, 80%, 40%, 0.3);
}

.action-card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--c-text-primary);
}
.action-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}
.action-card-pool {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-red-300);
}
.action-card-diff {
  color: var(--c-gold-400);
}
.action-card-cost {
  color: hsl(340, 72%, 55%);
}
.action-card-tag {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: hsla(271, 30%, 20%, 0.5);
  border: 1px solid var(--c-agent-disciplines);
  color: var(--c-agent-disciplines);
  text-transform: uppercase;
}

/* Free-text override */
.declaration-free-text {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

/* ── Combat Feed Bar ───────────────────────────────────────── */
.combat-feed-header {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--c-border-strong);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--c-bg-800);
}
.combat-feed-header h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.combat-feed-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-medium) transparent;
}

/* Each beat in the feed */
.combat-beat {
  flex-shrink: 0;
  background: var(--c-bg-600);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  min-width: 180px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  animation: slideInBeat var(--dur-normal) var(--ease-out-quart);
  transition: border-color var(--dur-fast);
}
.combat-beat:hover { border-color: var(--c-red-700); }

.beat-actor {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.beat-action {
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  line-height: 1.4;
}
.beat-result {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
}
.beat-dice {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-red-200);
  background: var(--c-bg-400);
  padding: 1px var(--sp-2);
  border-radius: var(--r-sm);
}
.beat-outcome {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.beat-outcome.success { color: var(--c-success); }
.beat-outcome.failure { color: var(--c-red-300); }
.beat-outcome.botch   { color: var(--c-combat-active); }

/* Round separator in feed */
.round-separator {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--c-red-700);
  border-radius: var(--r-md);
  background: hsla(0, 60%, 12%, 0.3);
}
.round-separator-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--c-red-300);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.round-separator-num {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--c-red-400);
  font-weight: 700;
  line-height: 1;
}

/* ── "Your Turn" Overlay Card ──────────────────────────────── */
#your-turn-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: var(--z-overlay);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  width: min(480px, 92vw);
  box-shadow: var(--shadow-combat), var(--shadow-xl);
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  animation: combat-turn-enter var(--dur-slow) var(--ease-spring) forwards;
}
#your-turn-overlay.open {
  display: flex;
}

.turn-overlay-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-combat-active);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px var(--sp-5);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-red);
  white-space: nowrap;
}

.turn-overlay-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--c-text-primary);
  text-align: center;
  padding-top: var(--sp-3);
}

/* ── Combat Over Screen ────────────────────────────────────── */
.combat-summary-card {
  background: var(--c-bg-700);
  border: 1px solid var(--c-red-700);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}