/* ── Brimstone — Salem Hex Game ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d0f16;
  --bg-panel:     #111520;
  --bg-section:   #161b28;
  --border:       #2a2040;
  --text:         #d4c9b0;
  --text-dim:     #7a7060;
  --text-bright:  #f0e8d0;
  --hero:         #d4a72c;
  --witch:        #9b59b6;
  --day:          #f5c842;
  --night:        #7b4fbb;
  --green:        #4caf7d;
  --red:          #c0392b;
  --font-serif:   "Georgia", "Times New Roman", serif;
  --font-mono:    "Courier New", monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* Prevent tap highlight flash and double-tap zoom on interactive elements */
button, canvas { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* pan-x pan-y: browser handles scroll gestures; JS handles taps */
canvas { touch-action: pan-x pan-y; }

/* ── Setup screen ──────────────────────────────────────────────────────── */

#setup-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: radial-gradient(ellipse at 50% 60%, #1a0e2a 0%, #0d0f16 70%);
}

.setup-card {
  width: min(440px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 0 60px rgba(100, 50, 160, 0.25);
}

.title {
  font-size: 2.8rem;
  letter-spacing: 0.25em;
  color: var(--day);
  text-shadow: 0 0 20px rgba(245, 200, 66, 0.4);
  margin-bottom: 0.25rem;
}

.subtitle {
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
}

.setup-lore {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}

.setup-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.setup-btn {
  padding: 0.6rem 1.4rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, border-color 0.15s;
}
.setup-btn:hover       { background: #1e2438; border-color: #4a3870; }
.setup-btn.primary     { border-color: var(--day); color: var(--day); }
.setup-btn.primary:hover { background: #1e1a10; }

.setup-options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.setup-option-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.setup-option-label input[type="checkbox"] {
  accent-color: var(--day);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ── Create Game option rows ─────────────────────────────────────────── */
.cg-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cg-option-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-section);
}
.cg-option-row:last-child { border-bottom: none; }
.cg-option-label {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.cg-option-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.6;
}
/* Toggle switch for checkboxes in create-game */
.cg-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}
.cg-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cg-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}
.cg-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.2s, background 0.2s;
}
.cg-toggle input:checked + .cg-toggle-track {
  background: rgba(180,140,60,0.25);
  border-color: var(--day);
}
.cg-toggle input:checked + .cg-toggle-track::after {
  transform: translateX(16px);
  background: var(--day);
}

/* ── Players-per-side selector ───────────────────────────────────────── */
.pps-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.pps-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.pps-pills {
  display: flex;
  gap: 0.35rem;
}
.pps-pill {
  position: relative;
  cursor: pointer;
}
.pps-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pps-pill span {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--text-dim);
  background: var(--bg-section);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.pps-pill input[type="radio"]:checked + span {
  border-color: var(--day);
  color: var(--day);
  background: rgba(180,140,60,0.12);
}
.pps-pill:hover span {
  border-color: #4a3870;
  color: var(--text);
}

.setup-select {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--day);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 1px 4px;
  cursor: pointer;
}

.setup-rules {
  text-align: left;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.setup-rules strong { color: var(--text); display: block; margin-bottom: 0.4rem; }
.setup-rules ul { padding-left: 1.2rem; margin-bottom: 0.75rem; }
.setup-rules li { margin-bottom: 0.2rem; }
.setup-rules p  { font-style: italic; }

/* ── Wide setup card (How to Play) ──────────────────────────────────────── */
.setup-card-wide {
  width: min(600px, 96vw);
}

/* ── Setup card scroll for tall content ─────────────────────────────────── */
.setup-card {
  max-height: 92vh;
  overflow-y: auto;
}

/* ── Mode toggle (Local / Online) ───────────────────────────────────────── */
.mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.mode-toggle-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--bg-section);
  border: none;
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-toggle-btn:first-child { border-right: 1px solid var(--border); }
.mode-toggle-btn:hover { background: #1e2438; color: var(--text); }
.mode-toggle-btn.active {
  background: rgba(180,140,60,0.1);
  color: var(--day);
  border-bottom: 2px solid var(--day);
}

/* ── Quick Play faction toggle ───────────────────────────────────────────── */
.qp-faction-toggle {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.qp-faction-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--bg-section);
  border: none;
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.qp-faction-btn + .qp-faction-btn {
  border-left: 1px solid var(--border);
}
.qp-faction-btn.active {
  color: var(--day);
  background: rgba(180,140,60,0.12);
}
.qp-faction-btn:hover:not(.active) {
  background: #1e2438;
  color: var(--text);
}

/* ── Quick Play advanced options ────────────────────────────────────────── */
.qp-advanced {
  max-width: 340px;
  margin: 0 auto 0.75rem;
  text-align: left;
}
.qp-advanced-summary {
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  padding: 0.3rem 0;
  user-select: none;
  list-style: none;
}
.qp-advanced-summary::before {
  content: '▸ ';
}
.qp-advanced[open] > .qp-advanced-summary::before {
  content: '▾ ';
}
.qp-advanced-summary::-webkit-details-marker { display: none; }
.qp-options-list {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.qp-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-section);
}
.qp-option-row:last-child { border-bottom: none; }
.qp-option-label {
  font-size: 0.88rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Multiplayer local divider ──────────────────────────────────────────── */
.mp-local-divider {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.6;
  margin: 0.75rem 0 0.5rem;
}

/* ── Active games section (inline in New Game / Online) ─────────────────── */
.active-games-section {
  margin: 0.75rem 0 0.5rem;
  text-align: left;
}
.active-games-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.active-games-section .saves-list {
  max-height: 180px;
  margin-bottom: 0.5rem;
}

/* ── Online match buttons grid ───────────────────────────────────────────── */
.online-match-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ── Lobby slots grid ────────────────────────────────────────────────────── */
.lobby-factions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  text-align: left;
}
.lobby-faction-col {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
}
.lobby-faction-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.lobby-slot-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
}
.lobby-slot-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.lobby-slot-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text);
}
.lobby-slot-name.empty-slot { color: var(--text-dim); font-style: italic; }
.lobby-slot-name.ai-slot    { color: #b09050; }
.lobby-slot-name em         { color: var(--text-dim); font-size: 0.78rem; }
.lobby-slot-btn {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  min-width: unset;
}
.lobby-personality-select {
  font-size: 0.75rem;
  padding: 0.15rem 0.25rem;
  max-width: 120px;
}

/* ── How to Play body ────────────────────────────────────────────────────── */
.howtoplay-body {
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-dim);
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.htp-sub-heading {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0.6rem 0 0.25rem;
}
.htp-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.htp-section:last-child, .htp-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.htp-intro { font-style: italic; margin: 0; }
.htp-heading {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}
details.htp-section > summary.htp-heading {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.htp-section > summary.htp-heading::-webkit-details-marker { display: none; }
details.htp-section > summary.htp-heading::before { content: '▸ '; }
details.htp-section[open] > summary.htp-heading::before { content: '▾ '; }
details.htp-section:not([open]) { padding-bottom: 0.5rem; }
.htp-combat-outcomes { padding-left: 1.1rem; margin: 0.3rem 0 0; }
.htp-combat-outcomes li { margin-bottom: 0.15rem; }
.htp-dim { font-size: 0.78rem; color: var(--text-dim); font-weight: normal; text-transform: none; letter-spacing: 0; }
.htp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.htp-two-col ul { padding-left: 1.1rem; margin: 0.25rem 0 0; }
.htp-two-col li { margin-bottom: 0.15rem; }
.htp-faction { font-weight: 600; margin-bottom: 0.2rem; }
.hero-col  { color: var(--hero); }
.witch-col { color: var(--witch); }
.htp-table { width: 100%; border-collapse: collapse; }
.htp-table tr td:first-child {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.2rem 0.75rem 0.2rem 0;
  vertical-align: top;
}
.htp-table tr td:last-child { padding: 0.2rem 0; }
.htp-table p { margin: 0; }

/* ── Game screen ───────────────────────────────────────────────────────── */

#game-screen {
  display: none;
  flex-direction: column;
  height: 100vh;
}

#game-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.header-title {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--day);
  opacity: 0.8;
  flex-shrink: 0;
}

#turn-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

/* ── Score bar — bottom strip showing Power Nodes + score track ──────── */

#score-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.3rem 0.75rem;
  background: rgba(13,17,23,0.95);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

#score-bar-content {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.score-bar-faction {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  opacity: 0.7;
  white-space: nowrap;
}
.score-bar-faction.hero-faction  { color: var(--hero); }
.score-bar-faction.witch-faction { color: var(--witch); }

.node-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.15);
  display: inline-block;
  transition: box-shadow 0.2s, background 0.2s;
}
/* Background = faction control color; border = node's own color (set via inline style) */
.node-dot.hero      { background: #4488ff; box-shadow: 0 0 7px rgba(68,136,255,0.7); }
.node-dot.witch     { background: #cc3333; box-shadow: 0 0 7px rgba(200,50,50,0.7); }
.node-dot.contested { background: #cc8800; box-shadow: 0 0 7px rgba(200,140,0,0.7); }
.node-dot.neutral   { background: transparent; }

.node-dots-group { display: flex; align-items: center; gap: 0.35rem; }

.score-track {
  display: flex;
  align-items: center;
  gap: 3px;
}
.score-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.score-pip.hero           { background: transparent; border-color: #335588; }
.score-pip.hero.filled    { background: #4488ff;     border-color: #66aaff; box-shadow: 0 0 4px rgba(68,136,255,0.6); }
.score-pip.witch          { background: transparent; border-color: #551111; }
.score-pip.witch.filled   { background: #cc3333;     border-color: #ff5555; box-shadow: 0 0 4px rgba(200,50,50,0.6); }

/* ── Header icon buttons (chronicle, inventory, end-turn) ──────────────── */

.header-icon-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
@media (hover: hover) {
  .header-icon-btn { transition: border-color 0.15s, color 0.15s; }
  .header-icon-btn:hover { border-color: var(--text); color: var(--text-bright); }
}
.header-icon-btn:disabled { opacity: 0.3; cursor: default; }

/* End Turn: slightly wider to fit text, urgent pulse when no actions left */
.end-turn-header {
  font-size: 0.82rem;
  width: auto;
  padding: 0 0.5rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.end-turn-header.urgent {
  color: var(--day);
  border-color: var(--day);
  animation: pulse-gold 1.4s ease-in-out infinite;
}
/* During planning: progress bar + countdown on the header submit button */
.end-turn-header.planning-active {
  background: linear-gradient(to right, #a8872a var(--progress, 100%), rgba(0,0,0,0.3) var(--progress, 100%));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  border-color: rgba(255,255,255,0.2);
  overflow: hidden;
  min-width: 6.5rem;
  text-align: center;
}
.end-turn-header.planning-active.countdown-urgent {
  animation: btn-pulse 0.5s ease-in-out infinite alternate;
}
/* Hide header submit when plan panel is expanded */
.end-turn-header.plan-open {
  display: none;
}

/* ── In-game menu popup ──────────────────────────────────────────────── */
.game-menu-popup {
  position: absolute;
  top: 42px;
  right: 8px;
  z-index: 90;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  min-width: 140px;
}
.game-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.game-menu-item:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-bright);
}
.game-menu-version {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.25rem 0.6rem 0.15rem;
  user-select: none;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 0.15rem;
}

/* ── Day cycle strip ──────────────────────────────────────────────────── */
.cycle-strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-bottom: 0.25rem;
}

/* Always-visible 8-step day/night strip below the header */
#cycle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.25rem 0.5rem;
  background: rgba(13,17,23,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* Day N · Round M label row below the cycle bar */
#round-label {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  opacity: 0.6;
  padding: 0.1rem 0.5rem 0.2rem;
  background: rgba(13,17,23,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.cycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: opacity 0.2s;
  user-select: none;
}

.cycle-dim  { opacity: 0.28; }
.cycle-active { opacity: 1; padding: 0.1rem 0.3rem; }

.cycle-active.phase-dawn  { background: rgba(255,140,0,0.15);  color: #ffaa44;      border-color: #ff8c00; }
.cycle-active.phase-day   { background: rgba(245,200,66,0.15); color: var(--day);   border-color: var(--day); }
.cycle-active.phase-dusk  { background: rgba(180,60,0,0.20);   color: #ff7744;      border-color: #c04020; }
.cycle-active.phase-night { background: rgba(123,79,187,0.20); color: var(--night); border-color: var(--night); }

.cycle-name {
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.05rem;
  white-space: nowrap;
}

/* Day N · Round M label — kept for any remaining inline uses */
.cycle-round-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin: 0 0.4rem;
  align-self: center;
}

.turn-line { font-size: 0.85rem; color: var(--text-dim); }

.turn-faction {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.player-hero  { color: var(--hero) !important; }
.player-witch { color: var(--witch) !important; }

.ai-badge {
  font-size: 0.7rem;
  background: rgba(155,89,182,0.25);
  color: var(--witch);
  border: 1px solid var(--witch);
  padding: 0 0.3rem;
  border-radius: 2px;
  vertical-align: middle;
}

.actions-remaining {
  font-size: 1rem;
  color: var(--day);
  letter-spacing: 0.1em;
}
.actions-remaining .bonus { color: var(--green); font-size: 0.8rem; margin-left: 4px; }

/* ── Unit stats bar (planning phase) ──────────────────────────────────── */

#unit-stats-bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: rgba(13,17,23,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  font-size: 0.82rem;
  pointer-events: auto;
  max-width: min(460px, 92vw);
}

.usb-portrait {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
  object-fit: cover;
}

.usb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.usb-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.usb-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usb-details {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.usb-hp-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.usb-hp-track {
  display: inline-block;
  width: 72px;
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}

.usb-hp-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
}

.usb-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

.usb-stat-val {
  color: var(--text-bright);
  font-weight: bold;
}

.usb-weapon {
  color: var(--day);
  font-style: italic;
  flex-shrink: 0;
  white-space: nowrap;
}

.usb-deselect-btn {
  margin-left: 0.2rem;
  flex-shrink: 0;
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.5);
  border-radius: 4px;
  color: #e74c3c;
  font-size: 1rem;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  line-height: 1.2;
  font-weight: bold;
}
.usb-deselect-btn:hover { background: rgba(192,57,43,0.3); border-color: #e74c3c; color: #ff6b5b; }

#game-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Canvas wrapper ────────────────────────────────────────────────────── */

#canvas-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--bg);
}

#game-canvas {
  display: block;
  cursor: pointer;
  image-rendering: pixelated;
}

/* ── Zoom controls ──────────────────────────────────────────────────────── */

.zoom-controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  /* Hide on genuine touch-only devices (shown again if mouse is detected) */
  pointer-events: auto;
}

.zoom-btn {
  width: 36px;
  height: 36px;
  background: rgba(20, 14, 30, 0.82);
  border: 1px solid rgba(180, 150, 80, 0.45);
  border-radius: 6px;
  color: var(--gold, #c8a84b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.zoom-btn:hover {
  background: rgba(40, 28, 55, 0.92);
  border-color: rgba(200, 168, 75, 0.75);
}

.zoom-btn:active {
  background: rgba(200, 168, 75, 0.18);
}

/* Fit button in view-locked state */
.zoom-btn.view-locked {
  background: rgba(170, 130, 255, 0.22);
  border-color: rgba(200, 160, 255, 0.7);
  color: #d4b8ff;
}
.zoom-btn.view-locked::after {
  content: '🔒';
  font-size: 0.6rem;
  position: absolute;
  bottom: 1px;
  right: 1px;
  line-height: 1;
}
.zoom-btn.view-locked {
  position: relative;
  overflow: hidden;
}

/* Touch devices: make zoom buttons slightly larger for finger tapping,
   but hide +/- since pinch-to-zoom is available */
@media (hover: none) and (pointer: coarse) {
  .zoom-btn {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  #zoom-in, #zoom-out {
    display: none;
  }
}

/* ── Mini chronicle (top-left HUD) ──────────────────────────────────────── */

#chronicle-mini {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: 340px;
  pointer-events: none;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chronicle-mini-btn {
  pointer-events: auto;
  align-self: flex-start;
  background: rgba(13, 17, 23, 0.72);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.chronicle-mini-btn:hover { border-color: var(--text); color: var(--text-bright); }
#chronicle-mini .mini-log-entry {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(210, 200, 180, 0.85);
  background: rgba(13, 17, 23, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Fade older entries (button is child 1, entries are children 2–6) */
#chronicle-mini .mini-log-entry:nth-child(2) { opacity: 0.45; }
#chronicle-mini .mini-log-entry:nth-child(3) { opacity: 0.55; }
#chronicle-mini .mini-log-entry:nth-child(4) { opacity: 0.65; }
#chronicle-mini .mini-log-entry:nth-child(5) { opacity: 0.8; }
#chronicle-mini .mini-log-entry:nth-child(6) { opacity: 1; }

@media (max-width: 600px) {
  #chronicle-mini { max-width: 220px; }
  #chronicle-mini .mini-log-entry { font-size: 10px; }
}

/* ── Chronicle sidebar (left panel, 'full' state) ──────────────────────── */

#chronicle-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 5;
}

.chronicle-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#chronicle-sidebar-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  line-height: 1;
}
#chronicle-sidebar-close:hover { color: var(--text-bright); }

#chronicle-sidebar-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}

#chronicle-sidebar-log .log-entry {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Active state for the mini button when sidebar is open */
.chronicle-mini-btn-active {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
/* Active state for chronicle toggle in map controls */
.chronicle-btn-active {
  border-color: rgba(200, 168, 75, 0.75) !important;
  background: rgba(200, 168, 75, 0.18) !important;
}

/* ── Chronicle overlay ─────────────────────────────────────────────────── */

#chronicle-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.55);
}
#chronicle-overlay.visible { display: block; }

#chronicle-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 92vw;
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  box-shadow: -6px 0 24px rgba(0,0,0,0.6);
}

.chronicle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.chronicle-title { color: var(--text-bright); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
#chronicle-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  line-height: 1;
}
#chronicle-close:hover { color: var(--text-bright); }

#event-log {
  flex: 1;
  overflow-y: auto;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ── Plan panel inventory section ──────────────────────────────────────── */

.plan-inventory {
  border-top: 1px solid var(--border);
  padding: 0.4rem 0.5rem 0.25rem;
  font-size: 0.78rem;
  overflow-y: auto;
  max-height: 160px;
}
.plan-inventory-title {
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.inv-resource-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid #1a1a22;
  font-size: 0.84rem;
}
.inv-resource-label { color: var(--text); }
.inv-resource-val   { color: var(--day); font-variant-numeric: tabular-nums; }
.inv-empty { color: var(--text-dim); font-size: 0.8rem; padding: 0.4rem 0; }

/* ── Tile zoom overlay (hex detail view) ───────────────────────────────── */

#tile-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(0,0,0,0.72);
  align-items: center;
  justify-content: center;
}
#tile-zoom-overlay.visible { display: flex; }

#tile-zoom-card {
  position: relative;
  width: 280px;
  max-width: 88vw;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem 0.85rem;
  box-shadow: 0 10px 48px rgba(0,0,0,0.75);
}

#tile-zoom-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  line-height: 1;
  z-index: 2;
}
#tile-zoom-close:hover { color: var(--text-bright); }

#tile-zoom-hex-wrap {
  position: relative;
  width: 100%;
}

#tile-zoom-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Info box floats over the lower 35% of the SVG area */
#tile-zoom-label-box {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6%;
  background: rgba(13,15,22,0.90);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  pointer-events: none;
}
.tile-zoom-name {
  font-size: 0.8rem;
  color: var(--text-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  font-weight: bold;
}
.tile-zoom-info-line {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.tile-zoom-info-line.node { color: #cc88ff; }
.tile-zoom-info-line.fortified { color: #88cc88; }

.tile-units-heading {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0.55rem 0 0.3rem;
}

.tile-unit-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.2rem;
  border: 1px solid transparent;
}
.tile-unit-card.selectable {
  cursor: pointer;
  border-color: var(--border);
}
.tile-unit-card.selectable:hover { background: var(--bg-section); border-color: #4a3a60; }
.tile-unit-card-icon { font-size: 0.9rem; flex-shrink: 0; width: 1.2rem; text-align: center; }
.tile-unit-card-portrait {
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #888;
  object-fit: cover;
}
.tile-unit-card-name { font-size: 0.85rem; flex: 1; }
.tile-unit-card-stats { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }

/* Compact unit header inside action-panel when a unit is selected */
.unit-mini-header {
  font-size: 0.82rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}
.unit-mini-stats {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* ── Floating cancel pill (during battle/summon targeting) ─────────────── */

#cancel-wrap {
  display: none;
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  align-items: center;
  gap: 0.65rem;
  background: rgba(13,15,22,0.92);
  border: 1px solid #5a3a3a;
  border-radius: 24px;
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  white-space: nowrap;
}
#cancel-wrap.visible { display: flex; }

#target-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

#cancel-action-btn {
  background: none;
  border: 1px solid #aa4433;
  color: #ff7755;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  cursor: pointer;
}
@media (hover: hover) {
  #cancel-action-btn { transition: background 0.12s; }
  #cancel-action-btn:hover { background: rgba(170,68,51,0.25); }
}

.action-title {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.85rem;
}

/* Action buttons */
.action-btn {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.3rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
}
/* Compact variant used inside the floating popup */
#action-popup .action-btn {
  padding: 0.28rem 0.45rem;
  margin-bottom: 0.2rem;
  font-size: 0.76rem;
}
#action-popup .popup-section-label {
  font-size: 0.6rem;
  margin: 0.25rem 0 0.15rem;
  padding-top: 0.2rem;
}
@media (hover: hover) {
  .action-btn { transition: background 0.1s, border-color 0.1s; }
  .action-btn:hover:not(:disabled) { background: #1e2438; border-color: #5a4890; }
}
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.action-btn.move    { border-left: 2px solid var(--green); }
.action-btn.explore { border-left: 2px solid #7eccd6; }
.action-btn.battle  { border-left: 2px solid var(--red); }
.action-btn.fortify { border-left: 2px solid var(--day); }
.action-btn.summon  { border-left: 2px solid var(--witch); }
.action-btn.item    { border-left: 2px solid #b0b0b0; }
.action-btn.free {
  border-left: 2px solid #4caf7d;
  color: #a0e8bc;
}
@media (hover: hover) { .action-btn.free:hover:not(:disabled) { background: #142a1e; border-color: #4caf7d; } }
.action-btn.tile-info {
  border-left: 2px solid #556;
  color: var(--text-dim);
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
  padding-top: 0.45rem;
}

.popup-section-label {
  font-size: 0.65rem;
  color: #4caf7d;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.4rem 0 0.2rem;
  padding-top: 0.35rem;
  border-top: 1px solid #1e3a28;
}
.action-btn.end-turn {
  margin-top: 0.5rem;
  border-color: #3a3050;
  color: var(--text-dim);
  text-align: center;
}
@media (hover: hover) { .action-btn.end-turn:hover:not(:disabled) { color: var(--text); border-color: #6a5090; } }

/* Selected entity info */
.entity-name    { font-size: 1rem; font-weight: bold; margin-bottom: 0.3rem; }
.entity-stats   { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.25rem; line-height: 1.7; }
.entity-pos     { font-size: 0.75rem; color: #4a4060; }
.entity-weapon  { font-size: 0.8rem; color: #c8b450; margin-bottom: 0.2rem; }
.tile-type      { font-size: 0.85rem; text-transform: capitalize; color: var(--text); margin-bottom: 0.2rem; }

/* Survivor personality card */
.survivor-name    { font-size: 0.95rem; font-weight: bold; color: var(--green); }
.survivor-title   { font-size: 0.75rem; color: #4a8a6a; font-style: italic; margin-bottom: 0.3rem; }
.survivor-bio     { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.3rem; border-left: 2px solid #2a3a2a; padding-left: 0.4rem; }
.survivor-ability { font-size: 0.78rem; color: #88eeff; margin-bottom: 0.3rem; }
.resource     { font-size: 0.82rem; color: var(--green); }
.fortified    { font-size: 0.82rem; color: var(--day); }
.unexplored   { font-size: 0.8rem; color: var(--text-dim); font-style: italic; }

/* Inventory */
.inv-title { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 0.4rem; }
.inv-row   { font-size: 0.8rem; margin-bottom: 0.2rem; }
.inv-label { color: var(--text-dim); margin-right: 0.3rem; }

/* Log entries (inside chronicle overlay) */
.log-entry {
  padding: 0.15rem 0;
  border-bottom: 1px solid #1a1a22;
  line-height: 1.4;
}
.log-entry:last-child { color: var(--text); }

/* Scrollbar */
#event-log::-webkit-scrollbar, #inventory-content::-webkit-scrollbar { width: 4px; }
#event-log::-webkit-scrollbar-track, #inventory-content::-webkit-scrollbar-track { background: transparent; }
#event-log::-webkit-scrollbar-thumb, #inventory-content::-webkit-scrollbar-thumb { background: #2a2040; border-radius: 2px; }

/* ── Action popup (floating above selected unit) ───────────────────────── */

#action-popup {
  display: none;
  position: fixed;
  z-index: 60;
  width: 172px;
  background: var(--bg-panel);
  border: 1px solid #3a2d58;
  border-radius: 5px;
  padding: 0.3rem 0.4rem 0.35rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04);
  /* transform is set entirely from JS (above or below the unit) */
}

/* downward caret (normal: popup is above the unit) */
#action-popup::after {
  content: '';
  position: absolute;
  bottom: -7px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom: none;
  border-top-color: #3a2d58;
}

/* upward caret (flipped: popup is below the unit) */
#action-popup.flipped::after {
  top: -7px;
  bottom: auto;
  border-top: none;
  border-bottom: 7px solid #3a2d58;
  border-top-color: transparent;
}

.popup-unit-name {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 0.25rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.05em;
}

/* ── Encounter dialog ──────────────────────────────────────────────────── */

#encounter-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 85;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}

#encounter-card {
  text-align: left;
  min-width: 260px;
}

/* ── Result dialog ─────────────────────────────────────────────────────── */

#result-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  cursor: pointer;
}

.result-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  max-width: min(420px, 90vw);
  text-align: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.7);
  pointer-events: none;
}

.result-messages {
  font-size: 1rem;
  color: var(--text-bright);
  line-height: 1.65;
  margin-bottom: 1rem;
  white-space: pre-line;
}

.result-dismiss {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-style: italic;
}

.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  width: 100%;
}

.result-buttons button {
  background: var(--accent-dim, #3a3a5c);
  color: var(--text-bright);
  border: 1px solid var(--border, #555);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.15s;
}

.result-buttons button:hover {
  background: var(--accent, #5a5a8c);
}

.result-buttons button.btn-end-turn {
  background: var(--danger-dim, #5c2a2a);
  border-color: var(--danger, #aa4444);
}

.result-buttons button.btn-end-turn:hover {
  background: var(--danger, #aa4444);
}

/* ── Battle dialog ─────────────────────────────────────────────────────── */

#battle-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  cursor: pointer;
}

/* Landscape: dock dialog on the right, no dimming */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #battle-dialog {
    background: none;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
  }
  #battle-dialog .battle-card {
    pointer-events: auto;
    margin-right: 1rem;
    box-shadow: -4px 0 30px rgba(0,0,0,0.7);
    border-left: 2px solid var(--border);
  }
}

.battle-critical-badge {
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200, 168, 75, 0.7);
  text-align: center;
  padding: 0.3rem 0 0;
}

.battle-summary {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  padding: 0.35rem 0.5rem 0;
  font-style: italic;
  min-height: 1.2rem;
}

.battle-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  width: min(480px, 92vw);
  text-align: center;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.battle-combatants {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}

.combatant-panel {
  flex: 1;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
}

.combatant-name  { font-size: 0.95rem; font-weight: bold; margin-bottom: 0.3rem; }
.combatant-stats { font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; }
.combatant-hp-bar {
  height: 5px;
  background: #333;
  border-radius: 2px;
  margin-top: 0.4rem;
  overflow: hidden;
}
.combatant-hp-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }

.battle-versus {
  font-size: 1.5rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ── Battle roll breakdown ─────────────────────────────── */
.battle-dice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

/* Two-column grid: atk details left, def details right */
.battle-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.breakdown-col {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.35s;
}
.breakdown-col.visible { opacity: 1; }

.bkd-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.06rem 0;
  line-height: 1.5;
}
.atk-col .bkd-row { flex-direction: row; }
.def-col .bkd-row { flex-direction: row-reverse; }

.bkd-label { flex: 1; white-space: nowrap; }
.atk-col .bkd-label { text-align: left; }
.def-col .bkd-label { text-align: right; }

.bkd-val {
  font-weight: 600;
  color: var(--text);
  min-width: 2em;
  text-align: center;
}

.bkd-die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  min-width: 22px;
  color: var(--day);
}

.bkd-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.2rem 0;
}

.bkd-total-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: bold;
  color: var(--text);
  font-size: 0.78rem;
  padding-top: 0.05rem;
}
.def-col .bkd-total-row { flex-direction: row-reverse; }

.die-display {
  width: 56px;
  height: 56px;
  background: var(--bg-section);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--day);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  transition: border-color 0.2s;
}
.die-display.rolling { animation: die-shake 0.08s infinite; }
.die-display.atk-win { border-color: #4caf50; color: #4caf50; }
.die-display.def-win { border-color: #f44336; color: #f44336; }

@keyframes die-shake {
  0%   { transform: translate(-1px,  1px) rotate(-1deg); }
  25%  { transform: translate( 1px, -1px) rotate( 1deg); }
  50%  { transform: translate(-1px, -1px) rotate( 0deg); }
  75%  { transform: translate( 1px,  1px) rotate(-1deg); }
  100% { transform: translate(-1px,  1px) rotate( 1deg); }
}

.dice-vs {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
}

.battle-outcome {
  font-size: 1.1rem;
  font-weight: bold;
  min-height: 1.4em;
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}
.battle-outcome.hit  { color: #ff6b6b; }
.battle-outcome.miss { color: var(--text-dim); }
.battle-outcome.kill { color: #ff3333; }

.battle-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  pointer-events: all;
}
.battle-actions-left {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--day);
  text-align: center;
  margin-bottom: 0.3rem;
}
.rematch-btn {
  width: 100%;
  font-size: 0.82rem;
  pointer-events: all;
}
.rematch-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── End Turn urgent highlight ─────────────────────────────────────────── */

.action-btn.end-turn.urgent {
  border-color: var(--day);
  color: var(--day);
  animation: pulse-gold 1.4s ease-in-out infinite;
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px rgba(245,200,66,0.5); }
}

/* ── Game-over overlay ─────────────────────────────────────────────────── */

/* ── Round summary modal ─────────────────────────────────────────────────── */

#round-summary {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 90;
}
#round-summary.visible { display: flex; }

.round-summary-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 0 40px rgba(80, 40, 120, 0.4);
  overflow: visible;
}

.round-summary-title {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  text-align: center;
}

.round-summary-events {
  min-height: 2rem;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
}

.round-summary-events .summary-combat {
  color: var(--day, #d4a72c);
  padding: 2px 0;
}

.round-summary-events .summary-kill {
  color: var(--red, #e05050);
  padding: 2px 0;
}

.round-summary-events .summary-neutral {
  color: var(--text-dim);
  padding: 2px 0;
}

.round-summary-events .summary-survivor {
  color: var(--green, #4caf7d);
  padding: 2px 0;
}

.round-summary-events .summary-summon {
  color: var(--witch, #9b59b6);
  padding: 2px 0;
}

.round-summary-events .summary-resources {
  padding: 2px 0;
  font-size: 0.82rem;
}
.round-summary-events .summary-resources.found { color: #7ec8a0; }
.round-summary-events .summary-resources.used  { color: #c8a878; }

.round-summary-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: flex-end;
}

.round-summary-replay-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.round-summary-speed-row {
  position: relative;
}

.summary-speed-toggle {
  background: var(--bg-input, #1e1e2a);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.summary-speed-toggle:hover { color: var(--text); border-color: var(--text-dim); }

.summary-speed-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  min-width: 190px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.round-summary-gameover-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.round-summary-gameover-btns .plan-btn {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  min-height: 44px;
}


/* Action breakdown table in phase modal */
.action-breakdown-table {
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.72rem;
}
.abkd-row {
  display: flex;
  justify-content: space-between;
  padding: 0.12rem 0;
  color: var(--text-dim);
}
.abkd-label { flex: 1; text-align: left; }
.abkd-val   { font-variant-numeric: tabular-nums; color: var(--text); }
.abkd-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0.15rem 0;
}
.abkd-total {
  font-weight: bold;
  color: var(--text);
}
.abkd-total .abkd-label,
.abkd-total .abkd-val { color: var(--gold, #c8a84b); }
.abkd-food .abkd-val {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-style: italic;
}

.battle-gang-note {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 0.3rem;
  color: #aaf;
}

/* ── Mobile / touch layout ─────────────────────────────────────────────── */

/* cycle-strip-header no longer used — cycle bar is always visible */

@media (max-width: 700px) {
  html, body { overflow: hidden; font-size: 15px; }

  /* Whole game fits in one viewport — no page-level scroll */
  #game-screen { height: 100dvh; }

  /* Header: tighter */
  #game-header { padding: 0.35rem 0.75rem; gap: 0.5rem; flex-shrink: 0; }
  .header-title { display: none; }
  #turn-info { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
  .phase-hint { display: none; }

  /* game-main fills all remaining height; canvas is the only child */
  #game-main { overflow: hidden; min-height: 0; }

  /* Canvas fills the full remaining screen — map is navigated by pan/zoom */
  #canvas-wrapper {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }

  /* Action buttons — 44 px minimum tap target, full row width */
  .action-btn {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-size: 0.92rem;
    min-height: 44px;
    margin-bottom: 0.35rem;
  }

  /* Cancel pill: slightly larger on touch */
  #cancel-wrap { bottom: 2.5rem; padding: 0.55rem 0.85rem 0.55rem 1.1rem; }
  #cancel-action-btn { padding: 0.35rem 0.8rem; font-size: 0.88rem; }

  /* Setup card */
  .setup-card { padding: 1.4rem 1.2rem; }
  .setup-rules { font-size: 0.84rem; }
  .title { font-size: 2.2rem; }
  .setup-btn { padding: 0.75rem 1.2rem; font-size: 1rem; min-height: 44px; }

  /* Chronicle + Inventory panels full-width on mobile */
  #chronicle-panel, #inventory-panel { width: 100%; border-left: none; }

  /* Tile zoom: smaller on mobile but still prominent */
  #tile-zoom-card { width: 260px; }

  /* Node dots slightly larger for touch */
  .node-dot { width: 15px; height: 15px; }

  /* End turn button slightly larger tap target */
  .end-turn-header { padding: 0 0.65rem; height: 36px; }

  /* How-to-play: stack two-column layout */
  .htp-two-col { grid-template-columns: 1fr; }
  .htp-table tr td:first-child { white-space: normal; }

  /* Dialogs / modals: cap widths to viewport */
  .round-summary-card { min-width: 0; max-width: 90vw; padding: 1.2rem; }
  .phase-modal-card { min-width: 0; max-width: 90vw; padding: 1rem 1.2rem; }
  #encounter-card { min-width: 0; }

  /* Game menu: 44px touch targets */
  .game-menu-item { min-height: 44px; display: flex; align-items: center; }

}

/* ── Online / Multiplayer ─────────────────────────────────────────────────── */

.online-btn {
  background: linear-gradient(135deg, #3a1a5c 0%, #5c2a8a 100%);
  border-color: #8b5ec7;
  color: #e8d5ff;
}
.online-btn:hover { background: linear-gradient(135deg, #4a2a6c 0%, #7b3ab2 100%); }

.secondary { background: #1a1f2e; color: var(--muted); border-color: #2a3040; }
.secondary:hover { background: #232840; color: var(--text); }

.acct-section { margin-bottom: 1rem; text-align: left; }
.acct-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.2rem; }
.acct-value { font-size: 1rem; color: var(--text); }
.acct-row { display: flex; align-items: center; gap: 0.5rem; }
.acct-inline-btn { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

.setup-input {
  width: 100%;
  max-width: 320px;
  padding: 0.6rem 0.85rem;
  background: #111520;
  border: 1px solid #2a3040;
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  margin: 0.5rem 0;
  box-sizing: border-box;
}
.setup-input:focus { outline: none; border-color: var(--hero); }

.setup-error {
  color: #e05050;
  font-size: 0.88rem;
  margin: 0.25rem 0;
}

.stats-badge {
  font-size: 0.8rem;
  color: var(--muted);
}

.email-badge {
  display: inline-block;
  font-size: 0.78rem;
  color: #7ecf7e;
  margin-top: 0.25rem;
}

.setup-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.25rem 0;
}

.email-login-divider {
  text-align: center;
}

.room-code-display {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: var(--hero);
  background: #111520;
  border: 1px solid #2a3040;
  border-radius: 8px;
  padding: 0.4rem 1rem;
  margin-top: 0.5rem;
  user-select: all;
}

.waiting-spinner {
  font-size: 2.5rem;
  margin: 1rem 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Online status strip in game header */
#online-status {
  font-size: 0.78rem;
  color: #9b80cc;
  padding: 0 0.5rem;
  white-space: nowrap;
}

/* ── Saves list ──────────────────────────────────────────────────────────── */

.saves-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  max-height: 320px;
  overflow-y: auto;
}

.saves-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 1.5rem 0;
}

.save-entry {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.save-entry-info {
  flex: 1;
  min-width: 0;
}

.save-entry-title {
  color: var(--text-bright);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-entry-meta {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.save-entry .setup-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

/* ── Version badges ────────────────────────────────────────────── */
.version-badge {
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.05em;
  user-select: none;
}
.version-link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.version-link:hover {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
}
#setup-screen { position: relative; }

/* ── Changelog / Revision History ─────────────────────────────── */
.changelog-body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.changelog-release {
  margin-bottom: 1.5rem;
}
.changelog-release:last-child {
  margin-bottom: 0;
}
.changelog-version-heading {
  font-size: 1.1rem;
  color: var(--hero);
  margin-bottom: 0.15rem;
}
.changelog-date {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.changelog-summary {
  font-style: italic;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.changelog-notes {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
}
.changelog-notes li {
  margin-bottom: 0.2rem;
}

/* ── Plan panel ────────────────────────────────────────────────── */
#game-main {
  position: relative;
  display: flex;
  flex: 1;
  overflow: hidden;
}
#canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.plan-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  background: rgba(13, 17, 23, 0.95);
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  z-index: 30;
  font-size: 0.8rem;
  transition: width 0.2s ease;
}

/* Collapsed: only the tab is visible */
.plan-panel.collapsed {
  width: 0;
  border-left: none;
  overflow: visible;
}
.plan-panel.collapsed .plan-panel-header,
.plan-panel.collapsed .plan-steps,
.plan-panel.collapsed .plan-panel-footer,
.plan-panel.collapsed .plan-players,
.plan-panel.collapsed .plan-status {
  display: none;
}

/* Tab — the protruding button that's always clickable */
.plan-tab {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13,17,23,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: #ccc;
  font-size: 0.7rem;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.02em;
}
@media (hover: hover) {
  .plan-tab { transition: background 0.15s, border-color 0.15s; }
  .plan-tab:hover { background: rgba(40,50,60,0.97); color: #fff; }
}
.plan-tab-label {
  white-space: nowrap;
}
.plan-tab-count {
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 0.9rem;
  text-align: center;
  writing-mode: horizontal-tb;
}
.plan-tab-ok   { color: #4caf7d; }
.plan-tab-food { color: #c8a030; }
.plan-tab-over { color: #d04040; }

.plan-panel-header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.plan-panel-title {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
  color: var(--hero);
}
.plan-toggle-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  line-height: 1;
}
.plan-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.plan-budget-badge {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  color: var(--muted);
}
.plan-steps {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0;
}
.plan-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: default;
}
.plan-step:hover { background: rgba(255,255,255,0.04); }
.plan-step-num {
  min-width: 1.2rem;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
}
.plan-step-avatar {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.plan-step-desc {
  flex: 1;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-step-remove {
  background: none;
  border: none;
  color: rgba(210, 60, 60, 0.75);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0 0.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.plan-step-remove:hover { color: #ff3333; }
.plan-panel-footer {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.plan-btn {
  padding: 0.4rem 0.3rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
.plan-btn.secondary { flex: 0 0 auto; }
.plan-btn.primary   { flex: 1; }
.plan-btn.primary {
  background: linear-gradient(to right, var(--hero) var(--progress, 100%), rgba(0,0,0,0.3) var(--progress, 100%));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
}
@media (hover: hover) {
  .plan-btn.primary:hover {
    background: linear-gradient(to right, #e8c84e var(--progress, 100%), rgba(0,0,0,0.3) var(--progress, 100%));
  }
}
.plan-panel[data-witch-mode="1"] .plan-btn.primary {
  background: linear-gradient(to right, var(--witch) var(--progress, 100%), rgba(0,0,0,0.3) var(--progress, 100%));
}
@media (hover: hover) {
  .plan-panel[data-witch-mode="1"] .plan-btn.primary:hover {
    background: linear-gradient(to right, #b06cc8 var(--progress, 100%), rgba(0,0,0,0.3) var(--progress, 100%));
  }
}
.plan-btn.primary.countdown-urgent {
  animation: btn-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes btn-pulse {
  from { box-shadow: 0 0 0 0 rgba(224,112,80,0); }
  to   { box-shadow: 0 0 8px 2px rgba(224,112,80,0.5); }
}
.plan-btn.secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}
@media (hover: hover) { .plan-btn.secondary:hover { background: rgba(255,255,255,0.15); } }
.plan-status {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0.3rem 0.5rem;
  min-height: 1.4rem;
}
.plan-panel[data-witch-mode] .plan-panel-title { color: var(--witch); }
.plan-submitted .plan-step-remove { display: none; }
.plan-submitted .plan-btn { opacity: 0.5; pointer-events: none; }
.plan-step.over-budget { opacity: 0.5; }
.plan-step.over-budget .plan-step-num  { background: rgba(160,50,50,0.75); color: #faa; border-radius: 3px; padding: 0 2px; }
.plan-step.over-budget .plan-step-desc { text-decoration: line-through; color: var(--text-dim); }
.plan-step.over-budget .plan-step-avatar { opacity: 0.4; }
.plan-step.food-powered { opacity: 0.9; }
.plan-step.food-powered .plan-step-num  { background: rgba(180,130,20,0.75); color: #ffd; border-radius: 3px; padding: 0 2px; }
.plan-step.food-powered .plan-step-avatar { opacity: 0.85; }
.plan-food-tag  { font-size: 0.65rem; color: #c8a030; margin-left: 0.3rem; white-space: nowrap; }
.plan-step-cost { font-size: 0.62rem; color: var(--muted); margin-left: 0.25rem; white-space: nowrap; opacity: 0.85; }

/* ── Grace dialog (timeout expiry) ───────────────────────────────────── */
.grace-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 85;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
}
.grace-dialog.visible { display: flex; }
.grace-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  max-width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.7);
}
.grace-title   { font-size: 1.1rem; font-weight: 700; color: #e07050; margin-bottom: 0.5rem; }
.grace-message { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.grace-countdown { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.75rem; font-family: var(--font-mono); }
.grace-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.grace-buttons .plan-btn { padding: 0.6rem 1rem; font-size: 0.85rem; }

/* ── Plan player status panel ─────────────────────────────────────────── */
.plan-players {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.35rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.plan-player-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
}
.plan-player-icon { font-size: 0.75rem; }
.plan-player-icon.faction-hero  { color: var(--hero); }
.plan-player-icon.faction-witch { color: var(--witch); }
.plan-player-name { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-player-status { font-size: 0.8rem; }
.plan-player-row.player-ready  .plan-player-status { color: #4caf7d; }
.plan-player-row.player-waiting .plan-player-status { color: var(--text-dim); }
.plan-player-row.player-ready  .plan-player-name   { color: var(--text); }

/* ── Plan food row ────────────────────────────────────────────────────── */
.plan-food-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem 0.2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Phase start modal ────────────────────────────────────────────────── */

#phase-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  z-index: 88;
}
#phase-modal.visible { display: flex; }

.phase-modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.4rem 2rem;
  min-width: 260px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 36px rgba(80, 40, 120, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.phase-modal-icon {
  font-size: 2.2rem;
  line-height: 1.2;
}

.phase-modal-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-bright);
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.phase-modal-effects {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.phase-modal-budget {
  font-size: 0.78rem;
  color: var(--text);
  margin-top: 0.3rem;
  padding: 0.35rem 0.8rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.action-pip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.15rem;
}

.action-pip {
  color: var(--gold, #c8a84b);
  font-size: 1rem;
  line-height: 1;
}

#phase-modal-continue {
  margin-top: 0.5rem;
}

/* Phase accent colours on the card border */
#phase-modal.phase-dawn  .phase-modal-card { border-color: rgba(255,140,0,0.5); }
#phase-modal.phase-day   .phase-modal-card { border-color: rgba(245,200,66,0.5); }
#phase-modal.phase-dusk  .phase-modal-card { border-color: rgba(180,60,0,0.5); }
#phase-modal.phase-night .phase-modal-card { border-color: rgba(123,79,187,0.5); }

/* ── Phase toast ─────────────────────────────────────────────────────── */
.phase-toast {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(13,17,23,0.93);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 60;
  pointer-events: none;
  animation: phase-toast-in 0.25s ease;
  white-space: nowrap;
}
.phase-toast-hide { animation: phase-toast-out 0.45s ease forwards; }
@keyframes phase-toast-in  { from { opacity:0; transform:translate(-50%,-46%); } to { opacity:1; transform:translate(-50%,-50%); } }
@keyframes phase-toast-out { from { opacity:1; } to { opacity:0; } }
.phase-toast-dawn  { border-color: rgba(255,140,0,0.4);  }
.phase-toast-day   { border-color: rgba(245,200,66,0.4); }
.phase-toast-dusk  { border-color: rgba(180,60,0,0.4);   }
.phase-toast-night { border-color: rgba(123,79,187,0.4); }
.phase-toast-icon  { font-size: 1.6rem; line-height: 1; }
.phase-toast-title { font-weight: bold; font-size: 0.85rem; color: #e8dcc8; }
.phase-toast-lines { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; }

/* ── Score bar glow animations ─────────────────────────────────────── */
@keyframes pip-glow {
  0%   { box-shadow: 0 0 4px currentColor; }
  50%  { box-shadow: 0 0 12px currentColor, 0 0 20px currentColor; }
  100% { box-shadow: 0 0 4px currentColor; }
}
.score-pip-glow { animation: pip-glow 0.6s ease 3; }

@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 5px currentColor; }
  50%      { box-shadow: 0 0 14px currentColor, 0 0 24px currentColor; }
}
.node-dot-glow { animation: node-glow 0.6s ease 3; }

/* ── Reckoning section in round summary ──────────────────────────── */
.summary-reckoning {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.summary-reckoning-title {
  font-weight: bold;
  font-size: 0.85rem;
  color: #e8dcc8;
  margin-bottom: 0.2rem;
}
.summary-reckoning-result {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.summary-score-track {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.summary-node {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 0.1rem 0;
}
.summary-node.hero-text  { color: var(--hero); }
.summary-node.witch-text { color: var(--witch); }
.summary-game-over {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
}
.summary-game-over.hero-text  { color: var(--hero); }
.summary-game-over.witch-text { color: var(--witch); }

/* Resolution overlay */
#resolution-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}
#resolution-banner {
  background: rgba(13,17,23,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  text-align: center;
}

/* ── Battle toasts ─────────────────────────────────────────────────────── */
.battle-toast-container {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 60;
  pointer-events: none;
  max-width: 300px;
}

.battle-toast {
  background: rgba(13, 10, 22, 0.88);
  border: 1px solid rgba(180, 150, 80, 0.35);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  color: #e8dcc8;
  pointer-events: none;
  animation: battle-toast-in 0.18s ease;
  line-height: 1.4;
}
.battle-toast.kill  { border-color: rgba(200, 60,  60,  0.6); }
.battle-toast.crush { border-color: rgba(200, 100, 30,  0.55); }

@keyframes battle-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes battle-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Speed toggle button active states */
.zoom-btn.speed-step     { color: #aa88ff; border-color: rgba(170, 136, 255, 0.6); }
.zoom-btn.speed-full     { color: #88ccff; border-color: rgba(136, 204, 255, 0.6); }
.zoom-btn.speed-basic    { color: #88eebb; border-color: rgba(136, 238, 187, 0.6); }
.zoom-btn.speed-fast     { color: #f5c842; border-color: rgba(245, 200, 66, 0.6); }
.zoom-btn.speed-instant  { color: #e05050; border-color: rgba(220, 80,  80, 0.6); }

/* Speed popup — appears above speed toggle button */
.speed-popup {
  position: absolute;
  bottom: 44px;
  left: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
  min-width: 190px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.speed-option {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 0.4rem;
  padding: 0.35rem 0.5rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.speed-option:hover { background: var(--bg-section); border-color: var(--border); }
.speed-option.active { border-color: var(--hero); background: rgba(212,167,44,0.1); }
.speed-option-icon { grid-row: 1 / 3; font-size: 1rem; text-align: center; }
.speed-option-label { font-size: 0.82rem; font-weight: 600; color: var(--text-bright); }
.speed-option-desc { font-size: 0.7rem; color: var(--text-dim); }

/* Speed toast — shown near zoom controls when speed is toggled */
.speed-toast {
  position: absolute;
  bottom: 56px;
  left: 8px;
  background: rgba(13, 10, 22, 0.88);
  border: 1px solid rgba(180, 150, 80, 0.4);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  color: #e8dcc8;
  pointer-events: none;
  z-index: 20;
  animation: speed-toast-in 0.18s ease;
  transition: opacity 0.3s ease;
}
.speed-toast.speed-toast-out { opacity: 0; }
@keyframes speed-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Replay HUD — shown at top of canvas during full-game replay */
#replay-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 10, 22, 0.92);
  border: 1px solid rgba(170, 130, 255, 0.5);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  color: #c8b8e8;
  z-index: 25;
  align-items: center;
  gap: 0.6rem;
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
}
#replay-round-label {
  font-weight: 600;
  color: var(--text-bright);
  margin-right: 0.2rem;
}
.replay-controls {
  display: flex;
  gap: 3px;
  align-items: center;
}
.replay-ctrl-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(170,130,255,0.3);
  border-radius: 5px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.2rem 0.55rem;
  min-width: unset;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.replay-ctrl-btn:hover {
  background: rgba(170,130,255,0.18);
  color: var(--text-bright);
}
.replay-ctrl-btn.active {
  background: rgba(170,130,255,0.28);
  border-color: rgba(200,160,255,0.75);
  color: var(--text-bright);
}
.replay-ctrl-btn.replay-stop {
  color: #e07070;
  border-color: rgba(220,100,100,0.35);
}
.replay-ctrl-btn.replay-stop:hover {
  background: rgba(220,80,80,0.18);
  border-color: rgba(220,100,100,0.7);
  color: #ffaaaa;
}

/* Replay exit confirmation dialog */
.replay-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 95;
}
.replay-exit-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.4rem 1.8rem;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.replay-exit-text {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin-bottom: 1.1rem;
  line-height: 1.4;
}
.replay-exit-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.replay-exit-btns .plan-btn {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Saves tab bar — In Progress / Completed toggle */
.saves-tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.saves-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.saves-tab:hover { color: var(--text-bright); }
.saves-tab.active {
  color: var(--hero);
  border-bottom-color: var(--hero);
}

/* Step-by-step continue bar — shown at bottom of canvas waiting for user click */
#step-continue-bar {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 10, 22, 0.92);
  border: 1px solid rgba(170, 130, 255, 0.5);
  border-radius: 20px;
  padding: 0.45rem 1.2rem;
  font-size: 0.83rem;
  color: #c8b8e8;
  cursor: pointer;
  z-index: 25;
  align-items: center;
  gap: 0.4rem;
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
  animation: step-bar-pulse 1.4s ease-in-out infinite;
}
@keyframes step-bar-pulse {
  0%, 100% { opacity: 0.7;  border-color: rgba(170, 130, 255, 0.4); }
  50%       { opacity: 1.0;  border-color: rgba(200, 160, 255, 0.85); }
}

/* Admin link on welcome screen */
.admin-link {
  color: var(--text-dim, #7a7a8a);
  font-size: 0.75rem;
  text-decoration: none;
  opacity: 0.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin-link:hover { opacity: 1; color: var(--text); text-decoration: underline; }
.menu-version {
  margin-top: 0.4rem;
  font-size: 0.65rem;
  color: var(--text-dim, #7a7a8a);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ── Spectator mode ──────────────────────────────────────────────────────────── */

/* Hide planning/action UI when body has .spectator-mode class */
body.spectator-mode #plan-panel    { display: none !important; }
body.spectator-mode #end-turn-btn  { display: none !important; }
body.spectator-mode #cancel-wrap   { display: none !important; }
body.spectator-mode #inventory-btn { display: none !important; }
body.spectator-mode #unit-stats-bar{ display: none; }
body.spectator-mode #setup-screen  { display: none !important; }
body.spectator-mode #game-screen   { display: flex !important; }

/* Player ready panel (right side during planning) */
#sp-ready-panel {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-ready-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#sp-ready-list {
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-ready-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  padding: 3px 4px;
  border-radius: 3px;
}
.sp-ready-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.sp-ready-dot.submitted { background: var(--green); }
.sp-ready-name { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ready-faction-hero  { color: var(--hero); }
.sp-ready-faction-witch { color: var(--witch); }

.spectator-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(13, 15, 22, 0.85);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 0.3rem 1rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  pointer-events: none;
  letter-spacing: 0.08em;
}
.spectator-banner .live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 0.4rem;
  vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.spectator-info {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(13, 15, 22, 0.9);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.spectator-info .faction-hero  { color: var(--hero); }
.spectator-info .faction-witch { color: var(--witch); }
.spectator-info .round-info    { color: var(--text-dim); }

#spectate-status {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-dim);
  font-size: 1.2rem;
  font-style: italic;
  z-index: 999;
}

#spectate-game-over {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: rgba(13, 15, 22, 0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 2.5rem;
  text-align: center;
}
#spectate-game-over h2 {
  font-size: 1.8rem;
  color: var(--day);
  margin-bottom: 0.5rem;
}
#spectate-game-over p {
  color: var(--text);
  margin-bottom: 1rem;
}

/* ── Tutorial overlay ──────────────────────────────────────────────────────── */

/* Backdrop: invisible by default; activates when .active is added */
#tutorial-backdrop {
  display: none; /* unused currently; reserved for future dim-everything option */
}

/* Floating tooltip card */
.tutorial-tooltip {
  position: fixed;
  z-index: 920;
  max-width: 340px;
  background: linear-gradient(160deg, #1a1209 0%, #0d0a06 100%);
  border: 1px solid #6b4a1e;
  border-radius: 6px;
  padding: 1rem 1.1rem 0.85rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 0 1px rgba(180,130,40,0.18);
  pointer-events: auto;
  transition: opacity 0.2s;
}

/* Position variants */
.tutorial-tooltip--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tutorial-tooltip--bottom-left {
  left: 1.2rem;
  bottom: 5.5rem;
}
.tutorial-tooltip--bottom-right {
  right: 1.2rem;
  bottom: 5.5rem;
}

.tut-title {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #d4a72c;
  margin-bottom: 0.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tut-body {
  font-size: 0.82rem;
  color: #c8b89a;
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 0.75rem;
}

.tut-next-btn {
  background: linear-gradient(135deg, #5a3a10, #3a2008);
  border: 1px solid #c8901a;
  color: #f0d080;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  transition: background 0.15s, box-shadow 0.15s;
}
.tut-next-btn:hover {
  background: linear-gradient(135deg, #7a5020, #5a3010);
  box-shadow: 0 0 8px rgba(200,140,20,0.4);
}

/* Element spotlight: a golden glow outline drawn around a UI element */
.tutorial-spotlit {
  position: relative;
  z-index: 910;
  border-radius: 4px;
  outline: 2px solid rgba(255, 215, 0, 0.85);
  outline-offset: 2px;
  box-shadow: 0 0 10px 2px rgba(255, 200, 0, 0.45);
  animation: tut-spotlight-pulse 1.4s ease-in-out infinite;
}

@keyframes tut-spotlight-pulse {
  0%, 100% { box-shadow: 0 0 8px 1px rgba(255,200,0,0.35); }
  50%       { box-shadow: 0 0 16px 4px rgba(255,200,0,0.65); }
}

/* Tutorial directional arrow — red pulsing arrow pointing at a UI element */
.tutorial-arrow {
  position: fixed;
  z-index: 920;
  width: 0;
  height: 0;
  pointer-events: none;
  animation: tut-arrow-pulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(231, 76, 60, 0.7));
}

/* Arrow pointing UP (triangle at top, shaft below) */
.tutorial-arrow--up {
  border-left:   14px solid transparent;
  border-right:  14px solid transparent;
  border-bottom: 22px solid #e74c3c;
  transform: translateX(-50%);
}

/* Arrow pointing DOWN */
.tutorial-arrow--down {
  border-left:   14px solid transparent;
  border-right:  14px solid transparent;
  border-top:    22px solid #e74c3c;
  transform: translateX(-50%);
}

/* Arrow pointing LEFT */
.tutorial-arrow--left {
  border-top:    14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right:  22px solid #e74c3c;
  transform: translateY(-50%);
}

/* Arrow pointing RIGHT */
.tutorial-arrow--right {
  border-top:    14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left:   22px solid #e74c3c;
  transform: translateY(-50%);
}

@keyframes tut-arrow-pulse {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(231,76,60,0.5)); }
  50%       { opacity: 1.0; filter: drop-shadow(0 0 10px rgba(231,76,60,0.9)); }
}

/* ── Campaign / Story Mode ────────────────────────��─────────────────────── */

.campaign-select-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.75rem auto;
  max-width: 420px;
}

.campaign-select-item {
  padding: 0.75rem 1rem;
  border: 1px solid var(--clr-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.campaign-select-item:hover {
  border-color: var(--clr-gold);
  background: rgba(255,215,0,0.06);
}

.campaign-select-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--clr-gold);
  margin-bottom: 0.25rem;
}

.campaign-select-desc {
  font-size: 0.85rem;
  color: var(--clr-text);
  line-height: 1.4;
}

.campaign-select-item.locked {
  opacity: 0.35;
  cursor: not-allowed;
}
.campaign-select-item.locked:hover {
  border-color: var(--clr-dim);
  background: none;
}

.campaign-select-badge {
  font-size: 0.75rem;
  color: var(--clr-dim);
  margin-top: 0.35rem;
  font-style: italic;
}

.campaign-mission-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem auto;
  max-width: 420px;
}

.campaign-mission {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--clr-dim, #555);
  border-radius: 6px;
  font-size: 0.95rem;
  transition: background 0.15s;
}

.campaign-mission.available {
  cursor: pointer;
  border-color: var(--clr-gold, #d4a72c);
}
.campaign-mission.available:hover {
  background: rgba(212, 167, 44, 0.12);
}

.campaign-mission.completed {
  opacity: 0.65;
  border-color: var(--clr-dim, #555);
}

.campaign-mission.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.campaign-mission-icon {
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
}

.campaign-mission-name {
  flex: 1;
}

.campaign-mission-status {
  font-size: 0.8rem;
  color: var(--clr-dim, #888);
}

.campaign-briefing {
  max-width: 480px;
}

.campaign-mission-title {
  font-size: 1.4rem;
  color: var(--clr-gold, #d4a72c);
  margin-bottom: 0.5rem;
}

.campaign-mission-text {
  line-height: 1.5;
  margin-bottom: 0.75rem;
  color: var(--clr-text, #ddd);
}

.campaign-objectives {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campaign-obj {
  font-size: 0.9rem;
  padding: 0.3rem 0;
}

.campaign-obj-icon {
  margin-right: 0.35rem;
}

.campaign-roster-summary {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 0.85rem;
}

.campaign-roster-label {
  color: var(--clr-gold, #d4a72c);
  margin-bottom: 0.2rem;
}

.campaign-resources-label {
  color: var(--clr-dim, #888);
}

.campaign-deploy-roster {
  margin: 0.75rem 0;
}

.campaign-deploy-roster h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.campaign-roster-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.campaign-survivor-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Debrief screen */
.debrief-stats {
  margin: 0.75rem 0;
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--clr-dim, #aaa);
}

.debrief-roster {
  margin-top: 0.75rem;
}

.debrief-roster h3 {
  font-size: 0.95rem;
  color: var(--clr-gold, #d4a72c);
  margin-bottom: 0.4rem;
}

.debrief-survivor {
  font-size: 0.85rem;
  padding: 0.2rem 0;
}