/* ============================================================
   THE MERIDIAN GRID — Online Multiplayer Styles
   Game view is an exact copy of the hotseat prototype stylesheet.
   Online-only additions (lobby, toasts, flash, reconnect) appended at end.
   ============================================================ */

:root {
  --bg:           #0f1117;
  --bg2:          #171b26;
  --bg3:          #1e2335;
  --border:       #2a3050;
  --text:         #d4daf0;
  --text-muted:   #6b7499;
  --text-dim:     #8a93b8;

  /* Player colours */
  --p0-colour:    #f59e0b;  /* amber */
  --p0-light:     #fcd34d;
  --p1-colour:    #3b82f6;  /* blue */
  --p1-light:     #93c5fd;
  --p2-colour:    #ef4444;  /* red */
  --p2-light:     #fca5a5;
  --p3-colour:    #10b981;  /* teal */
  --p3-light:     #6ee7b7;

  /* Biome colours */
  --biome-barren:   #c8b98a;
  --biome-jungle:   #2d6a4f;
  --biome-volcanic: #7f1d1d;
  --biome-centre:   #2e1065;

  /* Hex states */
  --node-neutral:     #d1d5db;
  --node-disrupted:   #374151;

  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Consolas', 'Fira Mono', monospace;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Page starfield background (index.php / lobby) ────────── */
/* The SVG sits fixed behind all content via z-index 0.        */
/* Page content uses z-index 1 to sit above it.                */
/* Body keeps its own background so text is always readable     */
/* even if the SVG hasn't loaded yet.                           */
#page-starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}



/* Everything on pages that use the starfield sits above it */
.landing-page,
#lobby-screen,
#join-screen,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Ref screen sits above page content; starfield shows through its transparent bg */
/* ref-screen fades over the caller screen — always display:flex since it is
   position:fixed and does not affect document flow. Caller is never hidden,
   so the crossfade is a true overlay fade in/out. */
#ref-screen {
  display: flex !important;   /* override .screen { display:none } */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}
#ref-screen.active {
  opacity: 1;
  pointer-events: all;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-amber { color: var(--accent); }

/* ── Screens ─────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: flex; }

/* ── Setup Screen ────────────────────────────────────────── */
#setup-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 32px;
  padding: 40px 20px;
}

.setup-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 48px;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.setup-title {
  text-align: center;
}
.setup-title h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-heading);
}
.setup-title .tagline {
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

.setup-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.option-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.opt-btn {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 16px;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.08s;
}
.opt-btn:hover {
  border-color: var(--text-dim);
  transform: translateY(-1px);
}
.opt-btn:active { transform: scale(0.94) translateY(0); }
@keyframes optBtnPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.opt-btn.selected {
  border-color: var(--accent);
  background: var(--accent-bg-15);
  color: var(--accent-light);
  animation: optBtnPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.opt-btn.variant-A.selected { border-color: var(--p1-colour); background: var(--p1-bg-15); color: var(--p1-light); }
.opt-btn.variant-B.selected { border-color: var(--p3-colour); background: var(--p3-bg-15); color: var(--p3-light); }
.opt-btn.variant-C.selected { border-color: #a855f7; background: rgba(168,85,247,0.15); color: #d8b4fe; }

/* Also used in landing page opt-row */
.opt-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.player-name-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.player-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.player-name-row input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 6px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.player-name-row input:focus { border-color: var(--text-dim); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-row .info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px; height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent-bg-15); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: var(--accent);
}

.btn-primary {
  background: var(--btn-primary-bg);
  border: none;
  border-radius: 10px;
  color: #000;
  cursor: pointer;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 14px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.1s;
  text-align: center;
  display: inline-block;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.94) translateY(0); }

/* ── Game Screen ─────────────────────────────────────────── */
#game-screen {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.game-layout {
  display: grid;
  grid-template-columns: 310px 1fr 340px;
  grid-template-rows: 1fr;
  flex: 1 1 0;
  min-height: 0;
  gap: 0;
}

/* ── Top Bar ─────────────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border-bottom: 10px solid var(--active-player-colour, var(--border));
  height: 56px;
  padding: 0 20px;
  gap: 16px;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}
.top-bar-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.player-tabs {
  display: flex;
  gap: 6px;
}
.player-tab {
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 2px solid transparent;
  color: var(--text-muted);
  transition: all 0.15s;
}
.player-tab.active-player {
  border-color: currentColor;
  background: rgba(255,255,255,0.06);
}
.player-tab.player-tab--resigned {
  opacity: 0.4;
  text-decoration: line-through;
  font-style: italic;
  text-decoration-color: currentColor;
}
.round-badge {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.btn-secondary {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--text-dim); color: var(--text); }

/* ── End Turn button — lives in the Actions panel ─────────── */
.btn-end-turn-action {
  background: var(--btn-end-turn-bg);
  border: none;
  border-radius: 7px;
  color: var(--btn-text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  width: 100%;
  box-shadow: 0 2px 8px var(--btn-end-turn-shadow-35);
}
.btn-end-turn-action:hover:not(:disabled) {
  background: var(--btn-end-turn-hover);
  box-shadow: 0 3px 12px var(--btn-end-turn-shadow-50);
  transform: translateY(-1px);
}
.btn-end-turn-action:active:not(:disabled) { transform: scale(0.94) translateY(0); }
.btn-end-turn-action--warn {
  background: var(--bg3);
  border: 1px solid var(--p2-colour);
  color: var(--p2-light);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-end-turn-action:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Undo Last Action button ─────────────────────────────── */
.btn-undo-action {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 6px;
  padding: 7px 10px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
}
.btn-undo-action:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: var(--text-dim);
  transform: translateY(-1px);
}
.btn-undo-action:active { transform: scale(0.94) translateY(0); }

/* ── Left Panel — Expedition Hero Cards ─────────────────── */
/* ── Left column wrapper ─────────────────────────────────── */
.left-panel-wrapper {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.left-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 10px;
  gap: 10px;
}

/* Actions pinned to the bottom of the left column */
.left-actions-section {
  flex-shrink: 0;
  max-height: 50%;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.player-card {
  flex-shrink: 0;          /* must not compress — left-panel scrolls instead */
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.2s;
}
.player-card.active {
  border-color: currentColor;
  box-shadow: 0 0 12px rgba(255,255,255,0.05);
}
.pc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pc-name {
  font-weight: 600;
  font-size: 0.875rem;
}
.pc-faction {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}
.pc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.pc-stat {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.pc-stat span {
  color: var(--text);
  font-weight: 600;
}
.pc-chain {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.pc-chain .chain-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.chain-complete { background: var(--chain-complete-bg-rgba); color: var(--chain-complete-text); }
.chain-active   { background: var(--chain-active-bg-rgba);  color: var(--chain-active-text); }
.chain-broken   { background: var(--chain-broken-bg-rgba);  color: var(--chain-broken-text); }

/* Online version player card extras */
.pc-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--accent-bg-20);
  color: var(--accent-light);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.pc-exps { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.pc-exp {
  background: rgba(0,0,0,0.25);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.7rem;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  cursor: default;
  transition: background 0.15s;
}
.pc-exp:has(.pc-exp-hero-name):hover {
  background: rgba(255,255,255,0.06);
}
.pc-exp-sym {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.pc-exp-name { font-weight: 600; color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pc-exp-hero-name { font-weight: 700; /* colour set inline */ }
.pc-exp-emblems { color: var(--accent-light); }
.pc-exp-cards { color: var(--text-muted); margin-left: auto; }
.pc-exp-at { color: var(--text-muted); font-family: var(--mono); font-size: 0.65rem; }
.pc-exp-undeployed { color: var(--text-muted); font-style: italic; }
/* Deployed / staging badges on opponent expedition rows */
.pc-exp-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.pc-exp-badge--deployed {
  background: var(--exp-deployed-bg-05, rgba(74,222,128,0.12));
  color: var(--exp-deployed, #4ade80);
}
.pc-exp-badge--staging {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

/* ── Board Area ──────────────────────────────────────────── */
.board-area {
  overflow: hidden;
  position: relative;
  background: var(--board-bg-edge);
  min-width: 0;
  min-height: 0;
}

#board-svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
#board-svg:active {
  cursor: grabbing;
}

/* Fit-map button — overlaid bottom-right of board area */
.btn-fit-map {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(23,27,38,0.82);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-fit-map:hover {
  background: rgba(42,48,80,0.92);
  color: var(--text);
  border-color: var(--accent);
}

/* SVG hex elements */
.hex-cell {
  cursor: grab;
}
.hex-cell.selected .hex-bg { stroke: #fff !important; stroke-width: 2.5px; }
.hex-cell.targetable { cursor: pointer; }
.hex-target-ring { pointer-events: none; }
.hex-cell.exp-moveable { cursor: pointer; }

.hex-bg {
  stroke: rgba(0,0,0,0.4);
  stroke-width: 1px;
}

.hex-cell circle,
.hex-cell text,
.hex-cell line {
  pointer-events: none;
}

.node-marker {
  pointer-events: none;
}
.node-disc { transition: fill 0.2s, stroke 0.2s; }

/* ── Phase Banner ────────────────────────────────────────── */
.phase-banner {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ── Normal phase pill ───────────────────────────────────── */
.phase-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.8rem;
  pointer-events: none;
}
.phase-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.phase-text { color: var(--text-dim); }
.phase-name { font-weight: 700; color: var(--accent-light); }

/* ── Action Prompt ───────────────────────────────────────── */
/*  .phase-banner stretches left:0/right:0 across the board area and uses
    justify-content:center — the prompt only needs translateY for animations. */
.action-prompt {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg2);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 12px 16px 12px 18px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-border-15);
  pointer-events: none;
  max-width: 560px;
  opacity: 0;
}

/* ── Entrance ─────────────────────────────────────────────── */
.action-prompt.prompt-visible {
  pointer-events: all;
  animation: promptBounceIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes promptBounceIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(48px); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Exit ─────────────────────────────────────────────────── */
.action-prompt.prompt-closing {
  pointer-events: none;
  animation: promptRollDown 0.46s linear both;
}

@keyframes promptRollDown {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0);     animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1); }
  45%  { opacity: 1; transform: translateX(-50%) translateY(-20px); animation-timing-function: cubic-bezier(0.55, 0, 1, 1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(80px); }
}

/* ── Child stagger — entry ────────────────────────────────── */
/* transition: none while animating so the transform transition doesn't fight the keyframe */
.action-prompt.prompt-visible .action-prompt-icon {
  animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.12s both;
  transition: none;
}
.action-prompt.prompt-visible .action-prompt-body {
  animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.22s both;
  transition: none;
}
.action-prompt.prompt-visible .action-prompt-cancel {
  animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.32s both;
  transition: none;
}

/* ── Child stagger — exit ─────────────────────────────────── */
.action-prompt.prompt-closing .action-prompt-icon {
  animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.00s both !important;
  transition: none;
}
.action-prompt.prompt-closing .action-prompt-body {
  animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.05s both !important;
  transition: none;
}
.action-prompt.prompt-closing .action-prompt-cancel {
  animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.09s both !important;
  transition: none;
}

.action-prompt-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.action-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-prompt-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-light);
}

.action-prompt-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.action-prompt-cancel {
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid #ef4444;
  border-radius: 8px;
  color: var(--outcome-defeat);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, transform 0.08s;
  white-space: nowrap;
}
.action-prompt-cancel:hover {
  background: var(--p2-bg-15);
  color: var(--p2-light);
  transform: translateY(-1px);
}
.action-prompt-cancel:active {
  transform: scale(0.94) translateY(0);
}

/* ── Action error flash ──────────────────────────────────── */
.action-error {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 2px solid var(--outcome-defeat);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--outcome-defeat);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.2);
  pointer-events: none;
  max-width: 520px;
  text-align: center;
  animation: action-error-in 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
}
.action-error.visible {
  display: flex;
}
.action-error::before {
  content: '✕';
  font-size: 0.9rem;
  flex-shrink: 0;
  opacity: 0.8;
}
@keyframes action-error-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Right Panel ─────────────────────────────────────────── */
.right-panel {
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 340px;
  min-width: 260px;
  position: relative;
}

.panel-section {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Hand panel takes ALL available right-panel space */
.hand-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 12px 5px;
  flex-shrink: 0;
}

/* ── Hand / Right Panel scroll area ─────────────────────── */
.hand-area {
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;           /* allow flex parent to constrain height so scroll kicks in */
}

/* ── Staging hand cards — horizontal pill layout ────────── */
.card {
  flex-shrink: 0;          /* must not compress — scroll containers handle overflow */
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
  overflow: hidden;
}
.card:hover {
  border-color: var(--text-dim);
  background: var(--bg2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.card.selected-card {
  border-color: var(--accent);
  background: var(--accent-bg-10);
  box-shadow: 0 0 0 2px var(--accent-border-25);
}
.card.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Left colour stripe */
.card-stripe {
  width: 4px;
  flex-shrink: 0;
  border-radius: 6px 0 0 6px;
  background: var(--card-colour, #4b5563);
}

/* Main body */
.card-body {
  flex: 1;
  padding: 7px 10px 7px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

/* Top row */
.card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-type {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.card-slots {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Biome text badge on expedition / hand cards */
.card-biome-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.6;
  flex-shrink: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.card-biome-tag[data-biome="Barren"] {
  background: var(--biome-barren-bg-14);
  color: var(--biome-barren-accent);
  border-color: var(--biome-barren-border-30);
}
.card-biome-tag[data-biome="Jungle"] {
  background: rgba(22,163,74,0.14);
  color: var(--biome-jungle-accent);
  border-color: var(--biome-jungle-border-30);
}
.card-biome-tag[data-biome="Volcanic"] {
  background: rgba(220,38,38,0.14);
  color: var(--biome-volcanic-accent);
  border-color: var(--biome-volcanic-border-30);
}

/* Subtype tag on loadout / picker cards (replaces biome badge) */
.card-subtype-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.6;
  flex-shrink: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.card-subtype-tag--traversal {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border-color: rgba(56,189,248,0.28);
}
.card-subtype-tag--expansion {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border-color: rgba(74,222,128,0.28);
}
.card-subtype-tag--defence {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.28);
}
.card-subtype-tag--hazard {
  background: rgba(251,113,133,0.12);
  color: #fb7185;
  border-color: rgba(251,113,133,0.28);
}

/* Card type tags (expedition / staging) — used in staging hand */
.card-type-tag--expedition {
  background: rgba(139,92,246,0.12);
  color: #a78bfa;
  border-color: rgba(139,92,246,0.28);
}
.card-type-tag--staging {
  background: rgba(148,163,184,0.10);
  color: var(--text-muted);
  border-color: rgba(148,163,184,0.22);
}

/* Description line */
.card-desc {
  font-size: 0.67rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* card type colour mapping */
.card[data-type="Move"]     { --card-colour: var(--card-move); }
.card[data-type="Move"]     .card-type { color: var(--card-move); }

.card[data-type="Settle"]   { --card-colour: var(--card-settle); }
.card[data-type="Settle"]   .card-type { color: var(--card-settle); }

.card[data-type="Sabotage"] { --card-colour: var(--card-sabotage); }
.card[data-type="Sabotage"] .card-type { color: var(--card-sabotage); }

.card[data-type="Conquer"]  { --card-colour: var(--card-conquer); }
.card[data-type="Conquer"]  .card-type { color: var(--card-conquer); }

.card[data-type="Repair"]   { --card-colour: var(--card-repair); }
.card[data-type="Repair"]   .card-type { color: var(--card-repair); }

.card[data-type="Fortify"]  { --card-colour: var(--card-fortify); }
.card[data-type="Fortify"]  .card-type { color: var(--card-fortify); }

.card[data-type="Gather"]   { --card-colour: var(--card-gather); }
.card[data-type="Gather"]   .card-type { color: var(--card-gather); }

.card[data-type="Deploy"]   { --card-colour: var(--card-deploy); }
.card[data-type="Deploy"]   .card-type { color: var(--card-deploy); }

.card[data-type="Wayfarer"]      { --card-colour: var(--card-wayfarer); }
.card[data-type="Wayfarer"]      .card-type { color: var(--card-wayfarer); }

.card[data-type="EmblemsCache"]  { --card-colour: var(--card-emblems-cache); }
.card[data-type="EmblemsCache"]  .card-type { color: var(--card-emblems-cache); }

.card[data-type="OpenCanopy"]    { --card-colour: var(--card-open-canopy); }
.card[data-type="OpenCanopy"]    .card-type { color: var(--card-open-canopy); }

.card[data-type="Overgrowth"]    { --card-colour: var(--card-overgrowth); }
.card[data-type="Overgrowth"]    .card-type { color: var(--card-overgrowth); }

.card[data-type="FaultCharge"]   { --card-colour: var(--card-fault-charge); }
.card[data-type="FaultCharge"]   .card-type { color: var(--card-fault-charge); }

.card[data-type="Tremor"]        { --card-colour: var(--card-tremor); }
.card[data-type="Tremor"]        .card-type { color: var(--card-tremor); }

.card[data-type="ForgeHeat"]     { --card-colour: var(--card-forge-heat); }
.card[data-type="ForgeHeat"]     .card-type { color: var(--card-forge-heat); }

.card[data-type="DustStorm"]     { --card-colour: var(--card-dust-storm); }
.card[data-type="DustStorm"]     .card-type { color: var(--card-dust-storm); }

.card[data-type="ClearSkies"]    { --card-colour: var(--card-clear-skies); }
.card[data-type="ClearSkies"]    .card-type { color: var(--card-clear-skies); }

.card[data-type="CanopyCollapse"] { --card-colour: var(--card-canopy-collapse); }
.card[data-type="CanopyCollapse"] .card-type { color: var(--card-canopy-collapse-text); }

.card[data-type="Flourish"]      { --card-colour: var(--card-flourish); }
.card[data-type="Flourish"]      .card-type { color: var(--card-flourish); }

.card[data-type="Eruption"]      { --card-colour: var(--card-eruption); }
.card[data-type="Eruption"]      .card-type { color: var(--card-eruption-text); }

.card[data-type="SeismicPulse"]  { --card-colour: var(--card-seismic-pulse); }
.card[data-type="SeismicPulse"]  .card-type { color: var(--card-seismic-pulse); }

/* ── Deploy button (green) ───────────────────────────────── */
.btn-deploy {
  background: var(--btn-deploy-bg);
  border: none;
  border-radius: 7px;
  color: var(--btn-text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 9px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  width: 100%;
}
.btn-deploy:hover:not(:disabled):not(.disabled) { background: var(--btn-deploy-hover); transform: translateY(-1px); }
.btn-deploy:active:not(:disabled):not(.disabled) { transform: scale(0.94) translateY(0); }
.btn-deploy.deploying {
  background: #065f46;
  border: 1px solid var(--btn-deploy-hover);
  color: var(--p3-light);
}
.btn-deploy.deploying:hover { background: #047857; }
.btn-deploy.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Move action button (blue) ──────────────────────────── */
.btn-move-action {
  background: var(--btn-move-bg);
  border: none;
  border-radius: 7px;
  color: var(--btn-text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 7px 9px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  width: 100%;
}
.btn-move-action:hover:not(:disabled):not(.disabled) { background: var(--btn-move-hover); transform: translateY(-1px); }
.btn-move-action:active:not(:disabled):not(.disabled) { transform: scale(0.94) translateY(0); }
.btn-move-action.deploying {
  background: #1e3a8a;
  border: 1px solid var(--p1-colour);
  color: var(--p1-light);
}
.btn-move-action.deploying:hover { background: #1e40af; }
.btn-move-action.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Expedition Group ─ */
.expedition-group {
  flex-shrink: 0;          /* must not compress — left-panel scrolls instead */
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--pc, #f59e0b);
  background: var(--bg2);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.expedition-group.deployed {
  border-color: rgba(74,222,128,0.45);
  border-left-color: var(--exp-deployed);
  box-shadow: 0 1px 8px var(--exp-deployed-glow-08);
}
.expedition-group.deploying {
  border-color: var(--accent-border-60);
  box-shadow: 0 1px 10px var(--accent-bg-12);
}
/* Hover highlight — whole container brightens so player sees which expedition an action belongs to */
.expedition-group:hover {
  border-color: rgba(245,158,11,0.5);
  border-left-color: var(--pc, #f59e0b); /* preserve player colour stripe */
  background: color-mix(in srgb, var(--pc, #f59e0b) 5%, var(--bg2));
  box-shadow: 0 1px 14px rgba(245,158,11,0.12), inset 3px 0 10px color-mix(in srgb, var(--pc, #f59e0b) 18%, transparent);
}
.expedition-group.deployed:hover {
  border-color: rgba(74,222,128,0.7);
  border-left-color: var(--exp-deployed);
  background: rgba(74,222,128,0.06);
  box-shadow: 0 1px 16px rgba(74,222,128,0.2), inset 3px 0 10px rgba(74,222,128,0.12);
}
.expedition-group.deploying:hover {
  border-color: var(--accent-border-60);
  border-left-color: var(--pc, #f59e0b);
  box-shadow: 0 1px 10px var(--accent-bg-12), inset 3px 0 10px color-mix(in srgb, var(--pc, #f59e0b) 15%, transparent);
}

/* Expedition header card */
.expedition-slot {
  background: var(--bg3);
  border: none;
  border-radius: 0;
  padding: 10px 12px 8px;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}
.exp-biome-corner-badge {
  position: absolute;
  top: 8px;
  right: 10px;
}
.expedition-slot.deployed {
  background: var(--exp-deployed-bg-05);
}
.expedition-slot.selected-card {
  background: rgba(245,158,11,0.08);
}

/* Action sub-panel */
.expedition-group-actions {
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 8px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.exp-action-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  padding: 0 0 2px 0;
}

.expedition-group-actions .btn-move-action,
.expedition-group-actions .btn-deploy,
.expedition-group-actions .btn-action {
  font-size: 0.74rem;
  padding: 7px 9px;
  margin-bottom: 0;
}

.expedition-group-actions .card {
  min-height: 38px;
}
.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
/* Name block: expedition label above hero name */
.exp-name-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.exp-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-name {
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-status {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: right;
}

/* ── Expedition hero card: biome hex + symbol badges ─────── */
.exp-header-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Hero symbol glyph in card corner */
.exp-hero-symbol {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  /* colour applied inline (player colour) */
}
/* Smaller inline variant used in the expedition label row */
.exp-hero-symbol--small {
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Hexagonal biome badge — CSS clip-path pointy-top hex */
.exp-biome-hex {
  display: inline-block;
  width: 13px;
  height: 15px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex-shrink: 0;
}
.exp-biome-hex[data-biome="Barren"]   { background: var(--biome-barren-accent); }
.exp-biome-hex[data-biome="Jungle"]   { background: var(--biome-jungle-accent); }
.exp-biome-hex[data-biome="Volcanic"] { background: var(--biome-volcanic-accent); }

/* ── Hex hover-lift ──────────────────────────────────────────
   Four-layer lift stack — each layer rises more than the one
   below it so the stack spreads apart on hover, giving depth.
   A fixed transparent hit polygon in the outer group ensures the
   hover stays active even as the visuals lift, preventing flicker.

   Layer 0 — outer group hit polygon: never moves (flicker fix)
   Layer 1 — hex tile (biome fill + seam border + bevel):    -2px
   Layer 2 — mid: campsite/settlement marker, ownership fill,
              committed path border, roadblock overlay:       -5px
   Layer 3 — top: uncommitted move-emblem ring:              -9px
   Expedition markers keep their own -6px lift (independent)        */
.hex-lift-inner {
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              filter   0.36s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0px 0px 0px transparent);
}
.hex-lifted                       { transform: translateY(-4px);  filter: drop-shadow(0px 6px  8px rgba(0,0,0,0.65)); transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-lift-inner--mid.hex-lifted   { transform: translateY(-7px);  filter: drop-shadow(0px 10px 12px rgba(0,0,0,0.70)); transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-lift-inner--top.hex-lifted   { transform: translateY(-12px); filter: drop-shadow(0px 14px 16px rgba(0,0,0,0.75)); transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-lift-inner--ring.hex-lifted                          { transform: translateY(-6px);  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-lift-inner--ring.hex-lifted[data-ring-lift="high"]   { transform: translateY(-10px); }

/* ── Expedition landing cushion ─────────────────────────────
   Fired on the destination hex base layer when an expedition token lands.
   The tile dips briefly as if absorbing the impact, then springs back.    */
@keyframes hexLandingCushion {
  0%   { transform: translateY(0);   }
  25%  { transform: translateY(2px); }
  65%  { transform: translateY(1px); }
  100% { transform: translateY(0);   }
}
.hex-landing-cushion {
  animation: hexLandingCushion 0.32s ease-out forwards;
}

/* ── Expedition marker lift / bounce animations ─────────────
   The inner <g> wraps the hex polygon + symbol.
   The outer token <g> carries the drop-shadow filter and stays
   in place, so the shadow remains anchored while the shape lifts.
   CSS transition on transform only — no full re-render needed.    */
.exp-marker-inner {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Suppress the hover transition while the jump RAF is driving the transform directly. */
.exp-marker-inner.exp-jumping {
  transition: none;
}
/* Hover-lift: used when hovering your own expedition card in the left panel */
.exp-marker-hovered {
  transform: translateY(-6px);
}
/* Bounce: one-shot animation triggered when hovering an opponent's expedition row */
@keyframes expMarkerBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  55%  { transform: translateY(-2px); }
  75%  { transform: translateY(-7px); }
  90%  { transform: translateY(-1px); }
  100% { transform: translateY(-6px); }
}
.exp-marker-bounce {
  animation: expMarkerBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Expedition Light Beam ───────────────────────────────── */
/* The beam is an SVG group containing two gradient ellipses.
   transform-box:fill-box keeps the origin relative to the element's own bbox,
   so transform-origin:bottom scales/grows from the hex upward.            */
.exp-beam {
  transform-box: fill-box;
  transform-origin: bottom center;
  /* Idle: short, dim — a subtle ambient glow anchored to the marker */
  transform: scaleY(0.22);
  opacity: 0.55;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.35s ease;
}
.exp-beam-outer {
  opacity: 0.38;
}
.exp-beam-inner {
  opacity: 0.62;
}

/* Hovered: full height, fully bright */
.exp-marker-hovered .exp-beam,
.exp-marker-bounce  .exp-beam {
  transform: scaleY(1);
  opacity: 1;
}

/* Bounce: same full extension but we re-use expMarkerBounce only on innerG's
   translateY; the beam simply snaps to full height on bounce start. */
.exp-marker-bounce .exp-beam {
  transition:
    transform 0.18s ease-out,
    opacity   0.18s ease;
}

.exp-passive {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.3;
  margin-top: 2px;
}
.exp-position {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--exp-deployed-text);
  margin-top: 5px;
}
.exp-position-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.exp-position--undeployed {
  opacity: 0.6;
}
/* Biome bonus/malus inline labels */
.exp-stat-bonus {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4ade80;
  opacity: 0.85;
}
.exp-stat-malus {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fb7185;
  opacity: 0.85;
}

/* Actions */
.action-area {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Expedition Turn Prompt ──────────────────────────────── */
.exp-turn-prompt {
  background: var(--bg3);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-turn-prompt-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exp-turn-prompt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.exp-turn-prompt-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.exp-turn-prompt-item.muted {
  color: var(--text-muted);
}

.exp-turn-prompt-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.btn-end-turn-prompt {
  background: var(--btn-end-turn-bg);
  border: none;
  border-radius: 7px;
  color: var(--btn-text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  width: 100%;
}
.btn-end-turn-prompt:hover:not(:disabled) { background: var(--btn-end-turn-hover); transform: translateY(-1px); }
.btn-end-turn-prompt:active:not(:disabled) { transform: scale(0.94) translateY(0); }
.btn-end-turn-prompt:disabled {
  background: var(--bg3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
}

.btn-action {
  background: var(--btn-primary-bg);
  border: none;
  border-radius: 7px;
  color: #000;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  width: 100%;
}
.btn-action:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.btn-action:active:not(:disabled) { transform: scale(0.94) translateY(0); }
.btn-action:disabled {
  background: var(--bg3);
  color: var(--text-muted);
  cursor: not-allowed;
  border: 1px solid var(--border);
}
.btn-action.danger {
  background: transparent;
  border: 1px solid var(--p2-colour);
  color: var(--outcome-defeat);
}
.btn-action.danger:hover { background: var(--p2-bg-10); }
/* Muted abandon button — still usable but visually demoted while playable cards remain */
.btn-action.danger.dimmed {
  opacity: 0.38;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  border-color: rgba(239,68,68,0.35);
  color: rgba(248,113,113,0.55);
}
.btn-action.danger.dimmed:hover {
  opacity: 0.65;
  background: var(--p2-bg-10);
}
/* Spacer before the abandon button */
.abandon-spacer {
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 2px;
}

/* Expedition action cards (deployed deck) */
.card.exp-action-card {
  border-color: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.15s;
}
.card.exp-action-card:hover {
  border-color: var(--accent);
  background: var(--accent-bg-10);
  box-shadow: 0 0 0 1px var(--accent-border-28);
  transform: translateY(-3px);
}
.card.exp-action-card::after {
  content: '▶ Play';
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34,1.4,0.64,1);
  margin-left: auto;
  padding-right: 8px;
  align-self: center;
  flex-shrink: 0;
}
.card.exp-action-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Action hint — short muted label shown beside card name, hides on hover */
.card-action-hint {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0.03em;
  margin-left: auto;
  padding-right: 8px;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}


/* Passive expedition card — sits in deck, never played, always active */
.card.exp-passive-card {
  border-color: rgba(168,85,247,0.45);
  cursor: default;
}
.card.exp-passive-card:hover {
  border-color: rgba(168,85,247,0.7);
  background: rgba(168,85,247,0.07);
  transform: none;
  box-shadow: none;
}
.card.exp-passive-card .card-stripe  { background: #a855f7; }
.card.exp-passive-card .card-slots   { color: var(--card-conquer); font-weight: 700; letter-spacing: 0.04em; font-size: 0.62rem; }

/* Card in discard-target mode */
@keyframes discardPulse {
  0%, 100% { border-color: var(--p2-colour); }
  50%       { border-color: rgba(239,68,68,0.35); }
}
.card.discard-target {
  border-style: dashed;
  animation: discardPulse 1.8s ease-in-out infinite;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), background 0.18s ease;
}
.card.discard-target .card-stripe {
  background: var(--p2-colour);
  transition: filter 0.18s ease;
}
.card.discard-target:hover {
  background: var(--p2-bg-12);
  border-color: var(--outcome-defeat);
  transform: translateX(-5px);
  animation: discardPulse 1.8s ease-in-out infinite;
}
.card.discard-target:hover .card-stripe {
  filter: brightness(1.35);
}
.card.discard-target .card-type { color: var(--outcome-defeat); }
.card.discard-target .card-desc { color: var(--p2-light); }

/* Log */
.log-area {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.log-entry {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  border-left: 2px solid var(--border);
  padding-left: 6px;
}
.log-entry.important { color: var(--text); border-left-color: var(--accent); }
.log-entry.hazard    { color: var(--p2-light); border-left-color: var(--p2-colour); }
.log-entry.win       { color: var(--p3-light); border-left-color: var(--p3-colour); }

/* ── Tooltip / Info box ──────────────────────────────────── */
.hex-info {
  position: fixed;
  /* top/left driven by JS _positionHexTooltip — no static values */
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
  pointer-events: none;
  white-space: nowrap;
  width: max-content;   /* shrinks to text so left/right anchor maths are exact */
  z-index: 900;         /* below card popup (9999) but above board */
  display: none;
  /* text-align toggled inline by JS per side */
}
.hex-info.visible {
  display: block;
}

/* ── Modal / Overlay ─────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
/* Online uses .hidden instead of missing .active for some modals */
.modal-overlay.hidden { display: none !important; }

.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 40px;
  max-width: 480px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-heading);
}
.modal p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}
.modal .score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.modal .score-table th {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.modal .score-table td { padding: 6px 0; border-bottom: 1px solid rgba(42,48,80,0.5); }
.modal .score-table .winner-row td { font-weight: 700; color: var(--accent-light); }
.modal-actions { display: flex; gap: 10px; }

/* ── Generic Confirm Modal ───────────────────────────────── */
.confirm-modal-box {
  max-width: 400px;
  padding: 28px 32px;
  gap: 16px;
}
.confirm-modal-box h2 {
  font-size: 1.15rem;
}
.confirm-modal-box p {
  font-size: 0.85rem;
  margin: 0;
}
/* Action row: stretch so both buttons are always the same height */
.confirm-modal-box .modal-actions {
  align-items: stretch;
}
/* Confirm button: smaller font so long labels don't wrap, fills full height */
#confirm-modal-confirm {
  font-size: 0.78rem;
  white-space: nowrap;
  height: auto;
  align-self: stretch;
}
/* Cancel button: remove fixed height so it matches a taller confirm */
#confirm-modal-cancel {
  height: auto;
  align-self: stretch;
  white-space: nowrap;
}
/* Danger variant for confirm button */
#confirm-modal-confirm.danger {
  background: transparent;
  border: 1px solid var(--p2-colour);
  color: var(--outcome-defeat);
}
#confirm-modal-confirm.danger:hover {
  background: var(--p2-bg-10);
}

/* ── Modal entrance & exit animations ───────────────────────
   Entry:  modal bounces up from below with a slight face-first overshoot —
           like it was tossed upward and settles into place.
   Exit:   modal bounces up slightly (like a spring releasing), then drops
           down and fades — reverse curtain / weighted fall.

   Strategy: .modal-overlay toggles display:none ↔ flex via .active.
   CSS can't transition display, so we animate the .modal child directly.
   Entry fires every time .active is re-added (animation restarts on class re-add).
   Exit: JS adds .modal-closing before removing .active, plays the fall,
   then removes .active on animationend so the element is hidden cleanly.
*/

/* ── Entry: rise up, single overshoot, land ──────────────── */
@keyframes modalBounceIn {
  0%   { opacity: 0; transform: translateY(48px); }
  60%  { opacity: 1; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Exit: airy float up, then natural gravity fall ──────────
   0→45%  : slow ease-out rise — floats up unhurriedly, decelerates at peak
   45→100%: gravity fall — starts from rest at peak, accelerates naturally,
            no artificial pull (pure ease-in²)                              */
@keyframes modalRollDown {
  0%   { opacity: 1; transform: translateY(0);     animation-timing-function: cubic-bezier(0.25, 0, 0.5, 1); }
  45%  { opacity: 1; transform: translateY(-20px); animation-timing-function: cubic-bezier(0.55, 0, 1, 1); }
  100% { opacity: 0; transform: translateY(80px); }
}

/* Backdrop fade-in — @starting-style progressive enhancement (Chrome 117+, Firefox 129+) */
@starting-style {
  .modal-overlay.active { background: rgba(0,0,0,0); }
}
.modal-overlay {
  transition: background 0.22s ease;
}

/* Backdrop fade-out keyframe — runs on .modal-closing in parallel with the box exit.
   JS removes .active only after the box animationend, by which point this has already
   faded the dim to transparent so there is no snap. */
@keyframes backdropFadeOut {
  from { background: rgba(0,0,0,0.75); }
  to   { background: rgba(0,0,0,0);    }
}
.modal-overlay.modal-closing {
  animation: backdropFadeOut 0.46s ease-in forwards;
}

/* Entry fires on every .active add */
.modal-overlay.active > .modal,
.modal-overlay.active > * > .modal {
  animation: modalBounceIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Exit: .modal-closing is added by JS before removing .active */
.modal-overlay.modal-closing > .modal,
.modal-overlay.modal-closing > * > .modal {
  animation: modalRollDown 0.46s linear both !important;
}

/* ── Modal child stagger ─────────────────────────────────────
   ENTRY: elements start above, drop down with a thump (fall into place).
   EXIT:  elements dip down briefly (drag), then get pulled up off-screen
          — like they are loosely tethered and lag behind as the box rises.
          Exit stagger is reversed: top children leave first, bottom last,
          amplifying the loose-attachment feel.
*/

@keyframes modalChildIn {
  0%   { opacity: 0; transform: translateY(-10px); }
  70%  { opacity: 1; transform: translateY(2px);   }
  100% { opacity: 1; transform: translateY(0);     }
}

/* ── EXIT child — secondary motion within the parent ─────────
   Children stay inside the modal (small travel, 8px max).
   They inherit the parent's movement for free since they're
   inside it. In local space they additionally drift upward:
   slow start, then accelerate — strong ease-in so the first
   half of the animation barely moves, the second half rushes.
   Fade tracks the motion so they disappear as they rise. */
@keyframes modalChildOut {
  0%   { opacity: 1;   transform: translateY(0);    }
  35%  { opacity: 0.7; transform: translateY(-8px); }
  100% { opacity: 0;   transform: translateY(-52px); }
}

.modal-overlay.modal-closing > .modal > *,
.modal-overlay.modal-closing > * > .modal > * {
  animation: modalChildOut 0.55s cubic-bezier(0.2, 0, 1, 1) both !important;
}
.modal-overlay.modal-closing > .modal > *:nth-child(1),
.modal-overlay.modal-closing > * > .modal > *:nth-child(1) { animation-delay: 0.00s !important; }
.modal-overlay.modal-closing > .modal > *:nth-child(2),
.modal-overlay.modal-closing > * > .modal > *:nth-child(2) { animation-delay: 0.05s !important; }
.modal-overlay.modal-closing > .modal > *:nth-child(3),
.modal-overlay.modal-closing > * > .modal > *:nth-child(3) { animation-delay: 0.10s !important; }
.modal-overlay.modal-closing > .modal > *:nth-child(4),
.modal-overlay.modal-closing > * > .modal > *:nth-child(4) { animation-delay: 0.14s !important; }
.modal-overlay.modal-closing > .modal > *:nth-child(n+5),
.modal-overlay.modal-closing > * > .modal > *:nth-child(n+5) { animation-delay: 0.17s !important; }

/* Deploy picker exit — wider stagger since sections are visually distinct blocks */
#deploy-picker-modal.modal-closing .deploy-picker-leader       { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.00s both !important; }
#deploy-picker-modal.modal-closing .deploy-picker-modal-header { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.06s both !important; }
#deploy-picker-modal.modal-closing .deploy-picker-modal-cards  { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.12s both !important; }
#deploy-picker-modal.modal-closing .modal-actions              { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.17s both !important; }

/* Draw phase exit */
#draw-phase-modal.modal-closing .draw-phase-header { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.00s both !important; }
#draw-phase-modal.modal-closing .draw-slots-row    { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.06s both !important; }
#draw-phase-modal.modal-closing .draw-decks-row    { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.12s both !important; }
#draw-phase-modal.modal-closing .draw-bonus-row    { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.16s both !important; }
#draw-phase-modal.modal-closing .btn-done-drawing,
#draw-phase-modal.modal-closing .btn-cancel-draw   { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.17s both !important; }

/* ── ENTRY — simple modals (central, notify, confirm, end, biome, drifter) ── */
.modal-overlay.active:not(.modal-closing) > .modal > *,
.modal-overlay.active:not(.modal-closing) > * > .modal > * {
  animation: modalChildIn 0.30s cubic-bezier(0.2, 0, 0.4, 1.4) both;
}
.modal-overlay.active:not(.modal-closing) > .modal > *:nth-child(1),
.modal-overlay.active:not(.modal-closing) > * > .modal > *:nth-child(1) { animation-delay: 0.12s; }
.modal-overlay.active:not(.modal-closing) > .modal > *:nth-child(2),
.modal-overlay.active:not(.modal-closing) > * > .modal > *:nth-child(2) { animation-delay: 0.20s; }
.modal-overlay.active:not(.modal-closing) > .modal > *:nth-child(3),
.modal-overlay.active:not(.modal-closing) > * > .modal > *:nth-child(3) { animation-delay: 0.27s; }
.modal-overlay.active:not(.modal-closing) > .modal > *:nth-child(4),
.modal-overlay.active:not(.modal-closing) > * > .modal > *:nth-child(4) { animation-delay: 0.33s; }
.modal-overlay.active:not(.modal-closing) > .modal > *:nth-child(n+5),
.modal-overlay.active:not(.modal-closing) > * > .modal > *:nth-child(n+5) { animation-delay: 0.38s; }

/* ── ENTRY — deploy picker ── */
#deploy-picker-modal.active:not(.modal-closing) .deploy-picker-leader       { animation: modalChildIn 0.32s cubic-bezier(0.2,0,0.4,1.4) 0.12s both; }
#deploy-picker-modal.active:not(.modal-closing) .deploy-picker-modal-header { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.20s both; }
#deploy-picker-modal.active:not(.modal-closing) .deploy-picker-modal-cards  { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.30s both; }
#deploy-picker-modal.active:not(.modal-closing) .modal-actions              { animation: modalChildIn 0.28s cubic-bezier(0.2,0,0.4,1.4) 0.42s both; }

/* ── ENTRY — draw phase modal (only while not yet settled — suppressed mid-phase) ── */
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .draw-phase-header { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.12s both; }
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .draw-slots-row    { animation: modalChildIn 0.32s cubic-bezier(0.2,0,0.4,1.4) 0.22s both; }
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .draw-decks-row    { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.34s both; }
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .draw-bonus-row    { animation: modalChildIn 0.28s cubic-bezier(0.2,0,0.4,1.4) 0.42s both; }
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .btn-done-drawing,
#draw-phase-modal.active:not(.modal-closing):not(.modal-settled) .btn-cancel-draw   { animation: modalChildIn 0.28s cubic-bezier(0.2,0,0.4,1.4) 0.44s both; }
/* Hero draw — reuses .draw-phase-header + .draw-slots-row, covered above */

/* ── Card flip reveal animation ──────────────────────────── */
@keyframes cardFlipEnter {
  0%   { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  60%  { transform: rotateY(-6deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0deg)  scale(1);    opacity: 1; }
}
.card-flip-enter {
  animation: cardFlipEnter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── Draw Phase Modal Overlay ────────────────────────────── */
.draw-phase-overlay {
  z-index: 150;
}

.draw-phase-modal-box {
  max-width: 960px;   /* 3 × 280px cards + gaps + padding */
  width: 94%;
  max-height: 92vh;
  overflow-y: auto;
  gap: 24px;
  padding: 36px 40px 32px;
}

/* ── Draw Phase Panel (inside modal) ─────────────────────── */
.draw-phase-panel,
.hero-draw-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.draw-phase-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 52px;   /* reserves space for title + subtitle so panel doesn't jump */
}

.draw-phase-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--drawn-accent, var(--text-heading));
  letter-spacing: 0.01em;
}

.draw-phase-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Draw Slots ──────────────────────────────────────────── */
.draw-slots-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.draw-slot {
  flex: 0 0 auto;
  width: 280px;
  height: 450px;
  border: 2px dashed rgba(148,163,184,0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.025);
  transition: border-color 0.2s, background 0.2s;
  padding: 0;
  position: relative;
  box-sizing: content-box;   /* border adds to outside, card fits exactly inside */
}

.draw-slot.joker-slot {
  border-color: var(--accent-border-60);
  background: var(--accent-bg-07);
}

.draw-slot.joker-slot::before {
  content: '★ JOKER';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--bg2, #1e2235);
  padding: 1px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.draw-slot.filled {
  border-style: solid;
  border-color: rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.02);
  justify-content: center;
  align-items: center;
}

.draw-slot.filled.joker-slot {
  border-color: var(--accent-border-40);
  background: var(--accent-bg-07);
}

.draw-slot-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  user-select: none;
  padding: 12px 0;
}

/* Pill cards inside draw slots — full width, no hover lift */
.draw-slot .card.draw-slot-card {
  width: 268px;
  font-size: 0.85rem;
  cursor: default;
}
.draw-slot .card.draw-slot-card:hover {
  transform: none;
}

/* ── Inline drawn card info — animation wrapper around .std-card ── */
.drawn-card-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── Biome Deck Buttons ───────────────────────────────────── */
.draw-decks-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.draw-deck-btn {
  flex: 1 1 0;
  min-width: 150px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 16px;
  border-radius: 14px;
  border: 2px solid rgba(148,163,184,0.2);
  background: var(--bg2);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s, box-shadow 0.18s;
  user-select: none;
}

.draw-deck-btn.active {
  border-color: rgba(148,163,184,0.35);
}

.draw-deck-btn.active:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.draw-deck-btn.active:active {
  transform: scale(0.94) translateY(0);
}
.draw-deck-btn.active:active .draw-deck-stack {
  transform: translateY(-5px);
  transition: transform 0.08s ease;
}

.draw-deck-btn.disabled,
.draw-deck-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active biome colours */
.draw-deck-btn.draw-deck-barren.active  {
  border-color: var(--biome-barren-border-50);
  background: var(--biome-barren-bg-08);
}
.draw-deck-btn.draw-deck-jungle.active  {
  border-color: var(--biome-jungle-border-50);
  background: var(--biome-jungle-bg-08);
}
.draw-deck-btn.draw-deck-volcanic.active {
  border-color: var(--biome-volcanic-border-50);
  background: var(--biome-volcanic-bg-08);
}
.draw-deck-btn.draw-deck-barren.active:hover   { background: var(--biome-barren-hover); }
.draw-deck-btn.draw-deck-jungle.active:hover   { background: var(--biome-jungle-hover); }
.draw-deck-btn.draw-deck-volcanic.active:hover { background: var(--biome-volcanic-hover); }

/* Deck stack visual (stacked card effect) */
.draw-deck-stack {
  width: 54px;
  height: 68px;
  border-radius: 6px;
  background: var(--bg3);
  border: 1px solid rgba(148,163,184,0.25);
  flex-shrink: 0;
  box-shadow:
    3px 3px 0 -1px var(--bg2), 3px 3px 0 0px rgba(148,163,184,0.2),
    6px 6px 0 -1px var(--bg2), 6px 6px 0 0px rgba(148,163,184,0.15);
}

.draw-deck-btn.draw-deck-barren.active   .draw-deck-stack {
  background: var(--biome-barren-bg-22);
  border-color: var(--biome-barren-border-60);
  box-shadow:
    3px 3px 0 -1px var(--bg2), 3px 3px 0 0px var(--biome-barren-border-30),
    6px 6px 0 -1px var(--bg2), 6px 6px 0 0px var(--biome-barren-bg-14);
}
.draw-deck-btn.draw-deck-jungle.active   .draw-deck-stack {
  background: var(--biome-jungle-bg-22);
  border-color: var(--biome-jungle-border-60);
  box-shadow:
    3px 3px 0 -1px var(--bg2), 3px 3px 0 0px var(--biome-jungle-border-30),
    6px 6px 0 -1px var(--bg2), 6px 6px 0 0px var(--biome-jungle-bg-14);
}
.draw-deck-btn.draw-deck-volcanic.active .draw-deck-stack {
  background: var(--biome-volcanic-bg-22);
  border-color: var(--biome-volcanic-border-60);
  box-shadow:
    3px 3px 0 -1px var(--bg2), 3px 3px 0 0px var(--biome-volcanic-border-30),
    6px 6px 0 -1px var(--bg2), 6px 6px 0 0px var(--biome-volcanic-bg-14);
}

.draw-deck-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.draw-deck-btn.draw-deck-barren.active   .draw-deck-name { color: var(--biome-barren-accent); }
.draw-deck-btn.draw-deck-jungle.active   .draw-deck-name { color: var(--biome-jungle-accent); }
.draw-deck-btn.draw-deck-volcanic.active .draw-deck-name { color: var(--biome-volcanic-accent); }

.draw-deck-count {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
}
.draw-deck-btn.active .draw-deck-count { color: var(--text-heading); }
.draw-deck-btn.draw-deck-barren.active   .draw-deck-count { color: var(--biome-barren-accent); }
.draw-deck-btn.draw-deck-jungle.active   .draw-deck-count { color: var(--biome-jungle-accent); }
.draw-deck-btn.draw-deck-volcanic.active .draw-deck-count { color: var(--biome-volcanic-accent); }

/* Card type hint below the count */
.draw-deck-hint {
  font-size: 0.64rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* ── Central Bounty row ──────────────────────────────────── */
.draw-bonus-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--border);
}

.draw-bonus-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.03em;
}

.draw-bonus-btns {
  display: flex;
  gap: 10px;
}

.draw-deck-btn.draw-deck-bonus {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 10px 8px;
  gap: 4px;
  border-radius: 10px;
}

/* ── Done Drawing / Begin Next Turn Buttons ──────────────── */
.btn-done-drawing,
.btn-next-turn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  background: var(--btn-done-drawing-bg-85);
  color: var(--btn-text);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 12px var(--btn-done-drawing-border-30);
}
/* When btn-next-turn is placed inside the slots row it inherits .hero-deck-btn sizing */
.hero-deck-btn.btn-next-turn {
  width: 280px;
  height: 450px;
  padding: 0;
  border-radius: 14px;
  border: 2px dashed rgba(100,150,255,0.4);
  background: rgba(99,102,241,0.08);
  box-shadow: none;
  font-size: 1rem;
}

.btn-done-drawing:hover,
.btn-next-turn:hover {
  background: var(--btn-done-drawing-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--btn-done-drawing-border-45);
}
.btn-done-drawing:active,
.btn-next-turn:active { transform: scale(0.94) translateY(0); }

/* ── Cancel End Turn button in draw modal ────────────────── */
.btn-cancel-draw {
  width: 100%;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
  margin-bottom: 4px;
}
.btn-cancel-draw:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--text-dim);
  transform: translateY(-1px);
}
.btn-cancel-draw:active:not(:disabled) { transform: scale(0.94) translateY(0); }
.btn-cancel-draw.disabled,
.btn-cancel-draw:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* ── Banner shown in action panel while modal is open ────── */
.draw-phase-active-banner {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 4px;
  font-style: italic;
  opacity: 0.7;
}

/* ── Hero Draw Panel ─────────────────────────────────────── */
.hero-draw-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Legacy full-width hero slot (no longer used, kept for safety) */
.draw-slot.hero-draw-slot {
  min-height: 130px;
  max-width: none;
  min-width: 0;
  width: 100%;
  border-color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.04);
}

/* Inline hero slot — matches std-card dimensions at all times */
.draw-slot.hero-draw-slot-inline {
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.04);
  width: 280px;
  height: 450px;
  align-items: center;
  justify-content: center;
}

.draw-slot.hero-draw-slot-inline.filled {
  border-style: solid;
  border-color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.06);
}

/* Hero reveal card wrapper — no extra sizing needed */
.draw-slot.hero-draw-slot-inline .hero-reveal-card {
  width: auto;
}

/* Hero deck button — card-shaped, sits beside the slot(s) */
.hero-deck-btn {
  width: 280px;
  height: 450px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border-radius: 14px;
  border: 2px dashed rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-sizing: content-box;
}

.hero-deck-btn:hover {
  border-color: rgba(245,158,11,0.8);
  background: rgba(245,158,11,0.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,158,11,0.2);
}
.hero-deck-btn:active {
  transform: scale(0.94) translateY(0);
}
.hero-deck-btn:active .hero-deck-stack {
  transform: translateY(-5px);
  transition: transform 0.08s ease;
}

.hero-deck-stack {
  width: 60px;
  height: 76px;
  border-radius: 6px;
  background: rgba(245,158,11,0.22);
  border: 1px solid rgba(245,158,11,0.55);
  box-shadow:
    3px 3px 0 -1px var(--bg2), 3px 3px 0 0px rgba(245,158,11,0.3),
    6px 6px 0 -1px var(--bg2), 6px 6px 0 0px rgba(245,158,11,0.2);
}

.hero-draw-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Hero Reveal Card ────────────────────────────────────── */
/* hero-reveal-card is now just a wrapper around .std-card */
.hero-reveal-card {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── Action notification modal ───────────────────────────── */
.notify-overlay { z-index: 200; }

.notify-modal {
  max-width: 420px;
  gap: 16px;
}

.notify-modal h2 {
  font-size: 1.2rem;
  color: var(--text-heading);
}

.notify-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notify-lines li {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 4px 10px;
  border-left: 3px solid var(--border);
  border-radius: 0 4px 4px 0;
}

/* ── Biome Picker Modal ───────────────────────────────────── */
.biome-picker-modal {
  max-width: 380px;
  gap: 16px;
}

.biome-picker-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.biome-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.biome-pick-btn:hover {
  background: var(--bg);
}
.biome-pick-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.biome-pick-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.biome-pick-barren  { border-left: 4px solid var(--biome-barren-accent); }
.biome-pick-barren:hover  { border-color: var(--biome-barren-accent); }
.biome-pick-jungle  { border-left: 4px solid var(--biome-jungle-accent); }
.biome-pick-jungle:hover  { border-color: var(--biome-jungle-accent); }
.biome-pick-volcanic { border-left: 4px solid var(--biome-volcanic-accent); }
.biome-pick-volcanic:hover { border-color: var(--biome-volcanic-accent); }

.notify-outcome-victory .notify-lines li { border-left-color: var(--outcome-victory); }
.notify-outcome-victory h2                { color: var(--outcome-victory); }

.notify-outcome-defeat .notify-lines li   { border-left-color: var(--outcome-defeat); }
.notify-outcome-defeat h2                 { color: var(--outcome-defeat); }

.notify-outcome-neutral .notify-lines li  { border-left-color: var(--outcome-neutral); }
.notify-outcome-neutral h2                { color: var(--outcome-neutral); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Hazard flash ────────────────────────────────────────── */
@keyframes hazardFlash {
  0%   { background: rgba(239,68,68,0.0); }
  30%  { background: rgba(239,68,68,0.15); }
  100% { background: rgba(239,68,68,0.0); }
}
.hazard-flash { animation: hazardFlash 1s ease-out; }

/* ── Win highlight ───────────────────────────────────────── */
@keyframes winPulse {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}
.win-pulse { animation: winPulse 0.8s ease-in-out 3; }

/* ── Corner select pulse ─────────────────────────────────── */
#game-screen.corner-select-mode .board-area {
  cursor: crosshair;
}

/* ── Deploy Expedition Picker Modal ─────────────────────── */
.deploy-picker-modal-box {
  max-width: 780px;
  width: 96%;
  gap: 0;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Side-by-side layout: hero card left, card list right */
.deploy-picker-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* Left column: expedition leader hero card at full standard scale */
.deploy-picker-leader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 16px 14px 16px 16px;
  background: var(--bg3);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  width: 312px;   /* 280px card + 16+16px padding */
  overflow: hidden;
}
.deploy-leader-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: flex-start;
}
/* Card renders at default std-card size (280×450) — no overrides needed */

/* Right column: header + cards + actions */
.deploy-picker-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 16px 16px 16px 14px;
}

/* Narrow viewport: stack vertically, card scales down */
@media (max-width: 620px) {
  .deploy-picker-layout {
    flex-direction: column;
  }
  .deploy-picker-leader {
    width: auto;
    flex-direction: row;
    align-items: flex-start;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    gap: 12px;
  }
  .deploy-picker-leader .std-card {
    width: 110px;
    height: 176px;
    flex-shrink: 0;
  }
  .deploy-picker-leader .std-card__art-spacer {
    flex: 0 0 70px;
  }
  /* On mobile the label stacks above text */
  .deploy-picker-leader .deploy-leader-label {
    display: none;
  }
  .deploy-picker-content {
    padding: 12px 14px;
  }
}

.deploy-picker-modal-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deploy-picker-modal-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deploy-picker-modal-passive {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
  min-width: 0;
}

.deploy-picker-modal-cards {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
}

.deploy-picker-header {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.deploy-picker-title {
  font-size: 0.78rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deploy-picker-ap {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.deploy-ap-used {
  color: var(--accent-hover);
}
.deploy-ap-used.deploy-ap-full {
  color: var(--outcome-victory);
}
.deploy-ap-sep {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}
.deploy-picker-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.deploy-btn-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 8px;
}
.deploy-confirm-btn {
  background: var(--btn-primary-bg);
  border: none;
  border-radius: 7px;
  color: #000;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  white-space: nowrap;
  height: 38px;
}
.deploy-confirm-btn:hover:not(.deploy-confirm-btn--disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.deploy-confirm-btn:active:not(.deploy-confirm-btn--disabled) { transform: scale(0.94) translateY(0); }
.deploy-confirm-btn--disabled {
  background: var(--bg3);
  color: var(--text-muted);
  cursor: not-allowed;
  border: 1px solid var(--border);
}
.deploy-cancel-btn {
  background: transparent;
  border: 1px solid var(--p2-colour);
  border-radius: 7px;
  color: var(--outcome-defeat);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.08s;
  white-space: nowrap;
  height: 38px;
}
.deploy-cancel-btn:hover { background: rgba(239,68,68,0.1); transform: translateY(-1px); }
.deploy-cancel-btn:active { transform: scale(0.94) translateY(0); }

/* Staging hand cards in passive mode */
.card.hand-card-passive {
  cursor: default;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), background 0.18s ease;
}
.card.hand-card-passive:hover {
  border-color: var(--border);
  background: var(--bg3);
  box-shadow: none;
  transform: translateX(-5px);
}
.card.hand-card-passive .card-stripe {
  transition: filter 0.18s ease;
}
.card.hand-card-passive:hover .card-stripe {
  filter: brightness(1.35);
}

/* Cards selectable in deploy picker */
.card.deploy-card-pick {
  cursor: pointer;
  border-color: rgba(255,255,255,0.15);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.card.deploy-card-pick:hover {
  border-color: var(--accent);
  background: var(--accent-bg-08);
}
.card.selected-card.deploy-card-pick {
  border-color: var(--outcome-victory);
  background: rgba(74,222,128,0.1);
  box-shadow: 0 0 0 2px rgba(74,222,128,0.2);
}

/* ── Deploy-picker selected indicator ───────────────────────
   Both states reserve the same stripe width (22px) so the
   card-body left padding never changes and text never reflows.
   Unselected: stripe is transparent (only the 4px colour nub
   shows via a pseudo-element). Selected: full green fill +
   vertical "✓ LOADED" label.
   ─────────────────────────────────────────────────────────── */
.card.deploy-card-pick .card-stripe {
  width: 22px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background 0.22s ease;
}
/* Unselected: show the normal 4px colour nub on the left edge */
.card.deploy-card-pick .card-stripe::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--card-colour, #4b5563);
  border-radius: 6px 0 0 6px;
  transition: width 0.22s cubic-bezier(0.34,1.2,0.64,1),
              background 0.22s ease,
              border-radius 0.22s ease;
}
/* Selected: nub expands to fill full stripe width, turns green */
.card.selected-card.deploy-card-pick .card-stripe {
  background: var(--outcome-victory);
}
.card.selected-card.deploy-card-pick .card-stripe::before {
  width: 22px;
  background: var(--outcome-victory);
  border-radius: 0;
}
/* Vertical "✓ LOADED" text — only on selected */
.card.selected-card.deploy-card-pick .card-stripe::after {
  content: '✓ LOADED';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(0,0,0,0.5);
  pointer-events: none;
}
/* Body left padding: fixed 6px gap from the stripe in both states */
.card.deploy-card-pick .card-body {
  padding-left: 6px;
}

.card.deploy-card-blocked {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Settlement cards */
.card.settlement-card {
  border-color: var(--p3-border-35);
  background: var(--p3-bg-05);
}
.card.settlement-card .card-stripe {
  background: var(--p3-colour);
}
.card.settlement-card .card-type::before {
  content: '⬡ ';
  font-size: 0.6em;
  opacity: 0.7;
}
.card.settlement-card:hover {
  border-color: rgba(167, 243, 208, 0.6);
  background: var(--p3-bg-10);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

/* Environmental cards */
.card.env-card {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(109, 40, 217, 0.07);
}
.card.env-card .card-stripe {
  background: var(--central-stroke-unrev);
}
.card.env-card .card-type::before {
  content: '🌐 ';
  font-size: 0.6em;
  opacity: 0.8;
}
.card.env-card:hover {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(109, 40, 217, 0.14);
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.2);
}

/* Play button on settlement cards in hand */
.btn-settlement-play {
  background: var(--p3-bg-15);
  border: 1px solid var(--p3-border-45);
  border-radius: 5px;
  color: var(--p3-light);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: auto 8px auto auto;
  padding: 3px 7px;
  flex-shrink: 0;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
  align-self: center;
}
.btn-settlement-play:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: var(--p3-colour);
  transform: translateY(-1px);
}
.btn-settlement-play:active {
  transform: scale(0.94) translateY(0);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 0 1fr 300px;
  }
  .left-panel-wrapper { display: none; }

}
@media (max-width: 640px) {
  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .right-panel { max-height: 40vh; }

}

/* ── Active Effects Bar ──────────────────────────────────── */
.active-effects-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 34px;
}
.active-effects-bar.hidden { display: none !important; }

.effect-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.effect-pill-icon { font-size: 0.85rem; line-height: 1; }
.effect-pill-text { line-height: 1.3; }
.effect-pill-by   { opacity: 0.7; font-weight: 400; }

/* Colour variants by effect type */
.effect-pill-hazard {
  background: var(--p2-bg-12);
  border-color: var(--p2-border-35);
  color: var(--p2-light);
}
.effect-pill-beneficial {
  background: var(--p3-bg-12);
  border-color: var(--p3-border-35);
  color: var(--p3-light);
}
.effect-pill-neutral {
  background: var(--accent-bg-12);
  border-color: var(--accent-border-40);
  color: var(--accent-light);
}

/* Per-biome accent */
.effect-pill-barren   { border-left: 3px solid var(--biome-barren-accent); }
.effect-pill-jungle   { border-left: 3px solid var(--biome-jungle-accent); }
.effect-pill-volcanic { border-left: 3px solid var(--biome-volcanic-accent); }

/* ── Resign button (top bar) ─────────────────────────────── */
.btn-resign {
  background: transparent;
  border: 1px solid var(--biome-volcanic);
  border-radius: 6px;
  color: var(--outcome-defeat);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-resign:hover {
  background: var(--p2-bg-12);
  border-color: var(--p2-colour);
  color: var(--p2-light);
}
.btn-resign:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── In-game help button (top bar) ───────────────────────── */
/* ── Help button cluster ─────────────────────────────────── */
.help-btn-cluster {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.btn-topbar-help {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 1.05rem;
  padding: 4px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
  position: relative;
}
.btn-topbar-help:first-child { border-left: none; }
.btn-topbar-help:hover,
.btn-topbar-help.active {
  color: var(--accent-light);
  background: var(--accent-bg-10);
}

/* Log button shares the help-btn-cluster style */
.btn-topbar-log {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 1.05rem;
  padding: 4px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
  position: relative;
}
.btn-topbar-log:hover,
.btn-topbar-log.active {
  color: var(--accent-light);
  background: var(--accent-bg-10);
}

/* ── Top-bar tooltip (JS-positioned, see room.php inline script) ── */
#topbar-tip {
  position: fixed;
  z-index: 9999;
  background: #111827;
  color: #e2e8f0;
  border: 1px solid #374151;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Game Log Popup ──────────────────────────────────────── */
.log-popup {
  position: fixed;
  top: 56px;                         /* flush below top bar */
  right: 0;
  width: 300px;
  max-height: calc(100vh - 56px);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;                     /* always flex — visibility controlled by transform/opacity */
  flex-direction: column;
  z-index: 90;                       /* above board, below modals (150+) */
  box-shadow: -6px 0 24px rgba(0,0,0,0.35);
  overflow: hidden;
}

.log-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.log-popup-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.log-popup-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════════════
   REFERENCE SCREEN — Heroes / Cards / Manual
   ══════════════════════════════════════════════════════════ */

.setup-ref-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ref-link-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}
.ref-link-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--bg3);
}

.ref-screen {
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #090b13; /* solid fallback — starfield shows through on pages where it exists */
}

/* Where the starfield SVG is present, let it show through the ref-screen */
body:has(#page-starfield) .ref-screen {
  background: transparent;
}

.ref-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px 28px;
  background: none;
  border-bottom: none;
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
}

/* Fade the bottom edge of the header into the transparent background */
.ref-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(9,11,19,0.55), transparent);
  pointer-events: none;
  z-index: 1;
}

.ref-back-btn {
  background: rgba(13, 15, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.08s;
  flex-shrink: 0;
}
.ref-back-btn:hover {
  border-color: var(--text-dim);
  color: var(--text);
  background: rgba(13, 15, 28, 0.75);
  transform: translateY(-1px);
}
.ref-back-btn:active { transform: scale(0.94) translateY(0); }

.ref-tabs {
  display: flex;
  gap: 6px;
  background: rgba(13, 15, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.ref-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.08s;
}
.ref-tab:hover { color: var(--text-dim); transform: translateY(-1px); }
.ref-tab:active { transform: scale(0.94) translateY(0); }
.ref-tab.active {
  background: var(--accent-bg-12);
  border-color: var(--accent-border-50);
  color: var(--accent-light);
}

.ref-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 48px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.ref-body > * {
  width: 100%;
  max-width: 1100px;
}
.ref-body.hidden { display: none; }

.ref-body-footer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding: 32px 0 8px;
  width: 100%;
  max-width: 1100px;
}

@media (max-width: 700px) {
  .ref-body { padding: 16px 16px 48px; }
}

.ref-intro {
  background: rgba(13, 15, 28, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}
.ref-intro h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.ref-intro p {
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 720px;
  font-size: 0.9rem;
}

.ref-biome-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ref-biome-section + .ref-biome-section {
  margin-top: 24px;
}

.ref-biome-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.ref-biome-label.biome-barren {
  background: var(--biome-barren-bg-08);
  border: 1px solid var(--biome-barren-border-30);
  color: var(--biome-barren-accent);
}
.ref-biome-label.biome-jungle {
  background: var(--biome-jungle-bg-14);
  border: 1px solid var(--biome-jungle-border-50);
  color: var(--biome-jungle-accent);
}
.ref-biome-label.biome-volcanic {
  background: var(--biome-volcanic-bg-14);
  border: 1px solid var(--biome-volcanic-border-30);
  color: var(--biome-volcanic-accent);
}

.ref-hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-ref-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.hero-ref-card:hover { border-color: var(--text-dim); }

.hero-ref-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hero-ref-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}
.hero-ref-symbol {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}

.hero-ref-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-ref-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
}
.hero-ref-stat span {
  color: var(--text);
  font-weight: 700;
}

.hero-ref-affinity {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}
.hero-ref-affinity.barren   { background: var(--biome-barren-bg-08);   color: var(--biome-barren-accent);   }
.hero-ref-affinity.jungle   { background: var(--biome-jungle-bg-14);   color: var(--biome-jungle-accent);   }
.hero-ref-affinity.volcanic { background: var(--biome-volcanic-bg-14); color: var(--biome-volcanic-accent); }

.hero-ref-passive-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-ref-passive-text {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.hero-ref-lore-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 2px;
}

.hero-ref-immunity {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.ref-card-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.ref-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.card-ref-tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}
.card-ref-tile:hover { border-color: var(--text-dim); }

.card-ref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-ref-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
}
.card-ref-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.card-ref-badge {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
}
.badge-biome-barren   { background: var(--biome-barren-bg-14);   color: var(--biome-barren-accent);   }
.badge-biome-jungle   { background: var(--biome-jungle-bg-22);   color: var(--biome-jungle-accent);   }
.badge-biome-volcanic { background: var(--biome-volcanic-bg-22); color: var(--biome-volcanic-accent); }
.badge-count      { background: rgba(100,100,150,0.2); color: var(--text-dim); border: 1px solid var(--border); }
.badge-slots      { background: var(--accent-bg-15);  color: var(--accent-light); }
.badge-hazard     { background: var(--p2-bg-15);      color: var(--p2-light); }
.badge-beneficial { background: var(--p3-bg-15);      color: var(--p3-light); }

.card-ref-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.ref-manual-content {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.manual-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(13, 15, 28, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}

.manual-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.manual-section-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-bg-15);
  border: 1px solid var(--accent-border-40);
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.manual-para {
  font-size: 0.87rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.manual-para strong {
  color: var(--text);
  font-weight: 600;
}

.manual-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manual-step {
  display: flex;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 16px;
}
.manual-step-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  padding-top: 1px;
}
.manual-step-body {}
.manual-step-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.manual-step-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.manual-step-desc strong { color: var(--text); }

.manual-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.manual-table th {
  text-align: left;
  padding: 7px 12px;
  background: var(--bg3);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.manual-table td {
  padding: 8px 12px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(42,48,80,0.5);
  vertical-align: top;
  line-height: 1.5;
}
.manual-table td:first-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.manual-table tr:last-child td { border-bottom: none; }

.manual-callout {
  background: var(--accent-bg-07);
  border: 1px solid var(--accent-border-25);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.82rem;
  color: #c8a85a;
  line-height: 1.6;
}
.manual-callout strong { color: var(--accent-light); }

.manual-rule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}
.manual-rule-item {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.manual-rule-item::before {
  content: '▸';
  color: var(--text-muted);
  flex-shrink: 0;
}
.manual-rule-item strong { color: var(--text); }

/* Score table (modal) */
.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.score-table th {
  padding: 6px 10px;
  text-align: left;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
.score-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.score-table tr.winner-row td { color: var(--accent-light); font-weight: 700; }


/* ══════════════════════════════════════════════════════════
   ONLINE-ONLY ADDITIONS
   Landing page, lobby, reconnect, toasts, flash messages
   ══════════════════════════════════════════════════════════ */

/* ── Landing Page ────────────────────────────────────────── */
.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 48px 20px;
  gap: 40px;
}

.landing-hero {
  text-align: center;
}
.landing-hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0.06em;
}
.landing-hero .tagline {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
  font-size: 1rem;
}

/* Outer wrapper — contains the splash image and the overlapping content */
.landing-splash-wrap {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-top: -16px; /* tighten up after hero */
}

.landing-splash-img {
  display: block;
  /* Bleed ~15% beyond each side of the wrapper → ~30% wider than the panels */
  width: 130%;
  margin-left: -15%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

/* Content that overlaps the lower portion of the splash image.
   1:1 image height = 130% of wrapper width.
   margin-top: -104% puts the top edge at ~20% down the image
   (130% × 0.8 = 104%). */
.landing-below-splash {
  position: relative;
  z-index: 1;
  margin-top: -104%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 4px;
}

.landing-ref-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* ── Cards (UI containers) ───────────────────────────────── */
.card-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  flex: 1 1 340px;   /* grow to fill, shrink, min 340px before wrapping */
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

.card-box h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Advanced options accordion ──────────────────────────── */
.adv-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
}
.adv-accordion-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.adv-accordion-summary::-webkit-details-marker { display: none; }
.adv-accordion-summary::before {
  content: '▸';
  font-size: 0.75rem;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.adv-accordion[open] .adv-accordion-summary {
  color: var(--text);
}
.adv-accordion[open] .adv-accordion-summary::before {
  transform: rotate(90deg);
}
.adv-accordion-summary:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.adv-accordion-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s ease,
              padding 0.28s cubic-bezier(0.4,0,0.2,1),
              border-top-color 0.28s ease;
}

/* ── Form Elements ───────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.form-group input,
.form-group select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--accent); }

/* ── Buttons (danger) ─────────────────────────────────────── */
.btn-danger {
  background: var(--p2-bg-15);
  border: 1px solid var(--p2-colour);
  border-radius: 7px;
  color: var(--p2-light);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: all 0.15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

/* ── Open Games Section ──────────────────────────────────── */
.open-games-section {
  width: 100%;
  max-width: 820px;
  position: relative;
  z-index: 2;
}

.open-games-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.open-games-header h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.open-game-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.open-game-row:hover {
  border-color: var(--accent);
  background: var(--accent-bg-07);
}

.open-game-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.open-game-host {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.open-game-code {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--mono);
  letter-spacing: 0.08em;
}

.open-game-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Recent Games Log ────────────────────────────────────── */
.outcomes-section {
  width: 100%;
  max-width: 820px;
  position: relative;
  z-index: 2;
}

/* ── My Games inline list (inside join-box) ─────────────── */
.my-games-inline {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-games-inline-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.my-game-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.my-game-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-game-item-name {
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-game-item-room {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--mono);
  letter-spacing: 0.08em;
}

.my-game-item-players {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-game-item-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.my-game-item-btn {
  flex-shrink: 0;
}

.my-game-status {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.my-game-status-lobby {
  background: rgba(245,158,11,0.15);
  color: var(--accent-light);
}
.my-game-status-active {
  background: rgba(16,185,129,0.15);
  color: var(--p3-light);
}
.my-game-status-yourturn {
  background: rgba(245,158,11,0.22);
  color: var(--accent-light);
  border: 1px solid rgba(245,158,11,0.45);
  animation: yourturn-pulse 2s ease-in-out infinite;
}

.my-game-type-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  vertical-align: middle;
}
.my-game-type-open {
  background: rgba(6,182,212,0.12);
  border-color: rgba(6,182,212,0.35);
  color: #67e8f9;
}
.my-game-type-private {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--text-muted);
}
.my-game-type-hotseat {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.40);
  color: var(--accent-light);
}

/* ── Hotseat lobby — name field list ─────────────────────── */
.hotseat-name-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hotseat-name-fields .form-group { margin: 0; }

/* ── Hotseat curtain — full-screen player-switch overlay ─── */
#hotseat-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 6, 12, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;        /* toggled by JS; always visible until first Start Turn */
  align-items: center;
  justify-content: center;
}
/* Fade-in applied only for mid-game turn transitions, not on initial page load */
@keyframes curtain-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#hotseat-curtain.curtain-fading-in {
  animation: curtain-backdrop-in 0.28s ease both;
}

.hotseat-curtain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 52px 48px 52px 54px; /* extra left to clear the stripe */
  background: var(--bg2);
  border: 1.5px solid var(--border); /* overridden inline to player colour */
  border-radius: 18px;
  box-shadow: 0 20px 72px rgba(0,0,0,0.75);
  max-width: 420px;
  width: 90vw;
  position: relative;
  overflow: hidden;
  /* Hidden by default — animation class makes it visible so there is no FOUC */
  opacity: 0;
}
.hotseat-curtain-inner.curtain-entering {
  animation: curtain-slide-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Left colour stripe */
.hotseat-curtain-inner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--curtain-player-colour, var(--accent));
  border-radius: 18px 0 0 18px;
}

/* Entrance: slide down from 32px above + fade in + slight spring overshoot */
@keyframes curtain-slide-in {
  0%   { opacity: 0; transform: translateY(-32px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(4px)   scale(1.01); }
  80%  { transform: translateY(-2px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0)      scale(1);   }
}

/* Child elements slide up + fade in after the box lands */
@keyframes curtain-child-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-label,
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-name,
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-btn {
  animation: curtain-child-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-label { animation-delay: 0.22s; }
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-name  { animation-delay: 0.30s; }
.hotseat-curtain-inner.curtain-entering .hotseat-curtain-btn   { animation-delay: 0.40s; }

/* Keep the old curtain-in name for any residual references */
@keyframes curtain-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1);    }
}

.hotseat-curtain-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0; /* revealed by curtain-child-in animation */
}

.hotseat-curtain-name {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0.03em;
  line-height: 1.1;
  opacity: 0; /* revealed by curtain-child-in animation */
}

.hotseat-curtain-btn {
  margin-top: 10px;
  padding: 13px 36px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  opacity: 0; /* revealed by curtain-child-in animation */
}
@keyframes yourturn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Highlight the whole row when it's the player's turn */
.my-game-item--your-turn {
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.06);
}

/* ── Outcomes header: title + search ─────────────────────── */
.outcomes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.outcomes-header h3 {
  margin: 0;
}
.outcomes-search-wrap {
  flex: 1 1 180px;
  max-width: 280px;
}
.outcomes-search {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.outcomes-search:focus {
  border-color: var(--accent);
}
.outcomes-search::placeholder {
  color: var(--text-muted);
}

/* ── Outcomes pagination ─────────────────────────────────── */
.outcomes-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.outcomes-page-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.outcomes-page-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-bg-10);
}
.outcomes-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.outcomes-page-info {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.outcomes-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.outcomes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.outcome-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.outcome-winner {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-light);
}

.outcome-players {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.outcome-stats {
  display: flex;
  gap: 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

.outcome-stats span { white-space: nowrap; }

.outcome-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.badge-a { background: var(--p1-bg-15);  color: var(--p1-light); }
.badge-b { background: var(--p3-bg-15);  color: var(--p3-light); }
.badge-c { background: rgba(168,85,247,0.2); color: #d8b4fe; }

/* Close button for index.php viewer modals */
.modal-close-x:hover { color: var(--text-heading) !important; }

/* Outcome action area — badge + view buttons side-by-side */
.outcome-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.outcome-view-btn {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.outcome-view-btn:hover {
  background: var(--accent-bg);
  color: var(--accent-light);
  border-color: var(--accent);
}

/* ── Board Viewer (fullscreen overlay) ───────────────────── */
.board-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #090b13;
  display: flex;          /* set by JS — default none */
  align-items: stretch;
  justify-content: stretch;
}

.board-viewer-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(9, 11, 19, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  pointer-events: none; /* let close btn get events via override below */
}

.board-viewer-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-heading);
  flex-shrink: 0;
}

.board-viewer-legend {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex: 1;
}

.board-viewer-close {
  pointer-events: all;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 10px;
  transition: color 0.15s, border-color 0.15s;
}
.board-viewer-close:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.board-viewer-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  z-index: 1;
}

.board-viewer-svg {
  position: absolute;
  top: 48px; /* clear the floating top bar */
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: calc(100% - 48px);
  display: block;
}

.outcomes-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* ── Site Footer ─────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* Hide the page footer while the ref-screen overlay is open */
#ref-screen.active ~ .site-footer,
body:has(#ref-screen.active) .site-footer {
  display: none;
}

/* ── Join / Lobby Overlay ────────────────────────────────── */
.overlay-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  flex-direction: column;
  gap: 24px;
}

/* ── Room Not Found page ─────────────────────────────────── */
.not-found-page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.not-found-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.not-found-icon {
  font-size: 3rem;
  opacity: 0.25;
  line-height: 1;
}

.not-found-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0.04em;
  margin: 0;
}

.not-found-body {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
  max-width: 360px;
}

.not-found-actions {
  margin-top: 8px;
}

/* ── Lobby screen ────────────────────────────────────────── */
.lobby-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lobby-card h2 {
  color: var(--accent-light);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lobby-url-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lobby-url-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px 10px;
  outline: none;
}

.lobby-players {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lobby-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 7px;
  font-size: 0.85rem;
}

.lobby-player-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player-slot {
  color: var(--text-muted);
  font-style: italic;
}

.lobby-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.lobby-expiry-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.7;
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Email Invite Section (lobby, host only) ─────────────── */
.lobby-invite-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.lobby-invite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  border-radius: 4px;
  transition: color 0.15s;
}
.lobby-invite-header:hover { color: var(--accent-light); }
.lobby-invite-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.invite-chevron {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
.lobby-invite-header:hover .invite-chevron { color: var(--accent-light); }

.lobby-invite-body {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Reconnect Banner ─────────────────────────────────────── */
.reconnect-banner {
  background: var(--p2-bg-15);
  border: 1px solid var(--p2-colour);
  border-radius: 6px;
  color: var(--p2-light);
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* ── Turn Indicator ──────────────────────────────────────── */
.turn-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.turn-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Your turn — bright, pulsing, filled */
.turn-indicator--mine {
  animation: turn-indicator-pulse 2.5s ease-in-out infinite;
}

/* Opponent's turn — dim */
.turn-indicator--opponent {
  opacity: 0.55;
}

/* One-shot flash when the turn first becomes yours */
.turn-indicator--new {
  animation: turn-indicator-flash 1.3s ease-out forwards !important;
}

@keyframes turn-indicator-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

@keyframes turn-indicator-flash {
  0%   { opacity: 1; transform: translateY(0);    box-shadow: 0 0 0 0 currentColor; }
  20%  { transform: translateY(-5px) scale(1.07); }
  40%  { transform: translateY(1px)  scale(0.97); }
  60%  { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 6px rgba(0,0,0,0); }
  100% { opacity: 1; transform: translateY(0);    box-shadow: none; }
}

/* ── Turn-change screen-edge flash overlay ───────────────── */
#turn-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  border: 0px solid transparent;
  border-radius: 0;
}

@keyframes turnFlashEdge {
  0%   { border-width: 0px;  opacity: 0; }
  15%  { border-width: 14px; opacity: 0.75; }
  100% { border-width: 14px; opacity: 0; }
}

.turn-flash-active {
  animation: turnFlashEdge 0.8s ease-out forwards;
}

/* ── Error / Flash messages ──────────────────────────────── */
.flash-error {
  background: var(--p2-bg-15);
  border: 1px solid var(--p2-colour);
  border-radius: 7px;
  color: var(--p2-light);
  font-size: 0.82rem;
  padding: 10px 14px;
}

.flash-success {
  background: var(--p3-bg-15);
  border: 1px solid var(--p3-colour);
  border-radius: 7px;
  color: var(--p3-light);
  font-size: 0.82rem;
  padding: 10px 14px;
}

/* ── Invite Code display ─────────────────────────────────── */
.room-code-display {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-light);
  text-align: center;
  background: var(--bg3);
  border-radius: 8px;
  padding: 12px 20px;
}

.passcode-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Top bar turn badge ───────────────────────────────────── */
.top-bar-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.top-turn-badge {
  font-weight: 700;
  font-size: 0.85rem;
}

/* ── Chat Panel ──────────────────────────────────────────── */
.chat-panel {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-msg-header {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.chat-msg-name {
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-msg-time {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.chat-msg-text {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.4;
  word-break: break-word;
  padding-left: 2px;
}

.chat-msg.chat-msg-own .chat-msg-name { color: var(--accent-light); }
.chat-msg.chat-msg-own .chat-msg-text { color: var(--text); }

.chat-input-row {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.78rem;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.chat-input:focus { border-color: var(--text-dim); }
.chat-input::placeholder { color: var(--text-muted); }

.chat-send-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
}
.chat-send-btn:hover {
  background: var(--accent-bg-12);
  border-color: var(--accent);
  color: var(--accent-light);
}

.chat-empty {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

/* log-panel moved to popup — no longer in right column */

/* ── Right Panel Minimise / Maximise ──────────────────────── */

/* Toggle button — small tab anchored to the top of the panel */
.right-panel-toggle {
  flex-shrink: 0;
  align-self: flex-start;
  width: 100%;
  height: 24px;
  background: var(--bg3);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.right-panel-toggle:hover {
  background: var(--bg2);
  color: var(--text);
}
.right-panel-toggle::after {
  content: 'Hand & Chat';
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ── Minimised state ─────────────────────────────────────── */
.right-panel.rp-minimised {
  width: 42px !important;
  min-width: 42px !important;
  flex-shrink: 0;
  overflow: visible;        /* allow card info popup to escape the strip */
}

/* In minimised state the toggle button rotates to show arrow only */
.right-panel.rp-minimised .right-panel-toggle {
  width: 42px;
  height: 42px;
  justify-content: center;
  padding: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.right-panel.rp-minimised .right-panel-toggle::after {
  display: none;
}

/* Grid layout adjustment — override the 340px column when minimised */
.game-layout.rp-minimised-layout {
  grid-template-columns: 310px 1fr 42px;
}



/* Hand/chat panels hidden in minimised state — opacity fade first, then clip via panel overflow:hidden */
.right-panel.rp-minimised .hand-panel,
.right-panel.rp-minimised .chat-panel {
  pointer-events: none;
}

/* In minimised state hide both content panels entirely so the tab strip fills the full height */
.right-panel.rp-minimised .chat-panel,
.right-panel.rp-minimised .hand-panel {
  display: none;
}

/* ── Minimised tab strip ─────────────────────────────────── */
.right-panel-tabs {
  display: none;              /* hidden in maximised state */
  flex-direction: column;
  gap: 3px;
  padding: 6px 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.right-panel.rp-minimised .right-panel-tabs {
  display: flex;
}

/* Individual card tab — a slim vertical strip */
.rp-card-tab {
  position: relative;
  width: 34px;
  min-height: 52px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s,
              transform 0.16s cubic-bezier(0.34,1.4,0.64,1), filter 0.16s ease;
  overflow: visible;
  flex-shrink: 0;
  padding: 4px 0;
}
.rp-card-tab:hover {
  border-color: var(--text-dim);
  background: var(--bg2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transform: translateX(-5px);
  filter: brightness(1.4);
}

/* Left accent stripe (reuses the card-colour variable set per type) */
.rp-card-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--card-colour, #4b5563);
}

/* Rotated card name label */
.rp-card-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 3px;         /* offset from the colour stripe */
}

/* Tiny biome dot below the label */
.rp-card-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--card-colour, #4b5563);
  opacity: 0.7;
}

/* Play button inside a minimised tab — square, centred, equal margins */
.rp-card-tab .btn-settlement-play {
  width: 20px;
  height: 20px;
  /* 3px stripe + equal gap on all sides */
  margin: 4px 4px 4px 7px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 4px;
}

/* Discard state */
.rp-card-tab.rp-tab-discard {
  border-color: rgba(239,68,68,0.5);
}
.rp-card-tab.rp-tab-discard .rp-card-tab-label {
  color: #fca5a5;
}

/* Card-type colour mapping for minimised tabs (mirrors .card[data-type] rules) */
.rp-card-tab[data-type="Move"]          { --card-colour: var(--card-move); }
.rp-card-tab[data-type="Settle"]        { --card-colour: var(--card-settle); }
.rp-card-tab[data-type="Sabotage"]      { --card-colour: var(--card-sabotage); }
.rp-card-tab[data-type="Conquer"]       { --card-colour: var(--card-conquer); }
.rp-card-tab[data-type="Repair"]        { --card-colour: var(--card-repair); }
.rp-card-tab[data-type="Fortify"]       { --card-colour: var(--card-fortify); }
.rp-card-tab[data-type="Gather"]        { --card-colour: var(--card-gather); }
.rp-card-tab[data-type="Deploy"]        { --card-colour: var(--card-deploy); }
.rp-card-tab[data-type="Wayfarer"]      { --card-colour: var(--card-wayfarer); }
.rp-card-tab[data-type="EmblemsCache"]  { --card-colour: var(--card-emblems-cache); }
.rp-card-tab[data-type="OpenCanopy"]    { --card-colour: var(--card-open-canopy); }
.rp-card-tab[data-type="Overgrowth"]    { --card-colour: var(--card-overgrowth); }
.rp-card-tab[data-type="FaultCharge"]   { --card-colour: var(--card-fault-charge); }
.rp-card-tab[data-type="Tremor"]        { --card-colour: var(--card-tremor); }
.rp-card-tab[data-type="ForgeHeat"]     { --card-colour: var(--card-forge-heat); }
.rp-card-tab[data-type="DustStorm"]     { --card-colour: var(--card-dust-storm); }
.rp-card-tab[data-type="ClearSkies"]    { --card-colour: var(--card-clear-skies); }
.rp-card-tab[data-type="CanopyCollapse"]{ --card-colour: var(--card-canopy-collapse); }
.rp-card-tab[data-type="Flourish"]      { --card-colour: var(--card-flourish); }
.rp-card-tab[data-type="Eruption"]      { --card-colour: var(--card-eruption); }
.rp-card-tab[data-type="SeismicPulse"]  { --card-colour: var(--card-seismic-pulse); }
.rp-card-tab[data-type="SupplyDrop"]    { --card-colour: var(--card-supply-drop, #a855f7); }
.rp-card-tab[data-type="Skyhook"]       { --card-colour: var(--card-skyhook, #06b6d4); }

/* ── Notification Toasts ─────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg2);
  border-radius: 10px;
  border-left: 4px solid #ef4444;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 10px 14px;
  pointer-events: all;
  cursor: pointer;
  animation: toast-in 0.38s cubic-bezier(0.34,1.2,0.64,1) both;
  max-width: 360px;
}

.toast.toast-leaving {
  animation: toast-out 0.28s ease-in forwards;
}

.toast.toast-settlement_disrupted  { border-left-color: var(--accent); }
.toast.toast-settlement_captured   { border-left-color: var(--p2-colour); }
.toast.toast-expedition_destroyed  { border-left-color: var(--p2-colour); }
.toast.toast-expedition_recalled   { border-left-color: var(--card-settle); }
.toast.toast-expedition_tremored   { border-left-color: var(--card-conquer); }
.toast.toast-env_hazard            { border-left-color: var(--p1-colour); }
.toast.toast-central_event         { border-left-color: var(--accent-light); }
.toast.toast-path_cut              { border-left-color: var(--accent); }
.toast.toast-chain_broken          { border-left-color: var(--p2-colour); }

.toast-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-heading);
  margin-bottom: 2px;
  line-height: 1.3;
}

.toast-detail {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  align-self: flex-start;
}
.toast-close:hover { color: var(--text); }

@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(110%); }
  60%  { opacity: 1; transform: translateX(-6px);  }
  80%  { transform: translateX(4px);  }
  100% { transform: translateX(0);    }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

/* ── Card-played board overlay ───────────────────────────── */
.card-played-overlay {
  display: none;
  position: fixed;
  z-index: 8000;
  /* Centre over the board area — sits above the board, below modals */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.card-played-overlay.active {
  display: flex;
  animation: card-played-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.card-played-overlay.card-played-leaving {
  animation: card-played-out 0.5s ease forwards;
}
.card-played-by {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
}
/* card-played-inner wraps a .std-card; just override position and shadow */
.card-played-inner {
  position: static;
  display: block;
  box-shadow: 0 12px 48px rgba(0,0,0,0.8), 0 2px 12px rgba(0,0,0,0.5);
}

@keyframes card-played-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}
@keyframes card-played-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  to   { opacity: 0; transform: translate(-50%, -54%) scale(0.95); }
}

/* ── Waiting banner (spectator / not-your-turn) ──────────── */
.waiting-banner {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px 10px;
  font-size: 0.85rem;
}

.waiting-dots span {
  opacity: 0;
  animation: waitDot 1.4s ease-in-out infinite;
}
.waiting-dots span:nth-child(1) { animation-delay: 0s; }
.waiting-dots span:nth-child(2) { animation-delay: 0.22s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes waitDot {
  0%, 60%, 100% { opacity: 0; }
  30%            { opacity: 1; }
}

/* ── Card top-right group (biome badge + ? button) ───────── */
.card-top-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Card ? info button ──────────────────────────────────── */


/* ── Card info popup ─────────────────────────────────────── */
/* Hover popup wrapper — just a fixed-position shell; .std-card inside handles layout */
.card-info-popup {
  display: block;                    /* always in layout — opacity/pointer-events control visibility */
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  overflow: visible; /* allow dual-card row to extend beyond single-card width */
  /* width/height come from the .std-card child */
  opacity: 0;
  pointer-events: none;
}
.card-info-popup.active {
  opacity: 1;
  pointer-events: all;
}
/* Dual-card popup (e.g. Hold-up: effect card + hero card) */
.card-info-popup > div[style*="display:flex"] {
  gap: 10px;
}

/* Badge classes shared by std-card and any legacy uses */
.card-info-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
/* Generic type fallback */
.card-info-badge-type {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border-color: var(--border);
}
.card-info-badge-type-expedition {
  background: rgba(139,92,246,0.14);
  color: #c4b5fd;
  border-color: rgba(139,92,246,0.35);
}
.card-info-badge-type-staging {
  background: rgba(245,158,11,0.14);
  color: var(--p0-light);
  border-color: rgba(245,158,11,0.35);
}
.card-info-badge-biome-barren   { background: var(--biome-barren-bg-14);   color: var(--biome-barren-accent);   border-color: var(--biome-barren-border-30); }
.card-info-badge-biome-jungle   { background: var(--biome-jungle-bg-22);   color: var(--biome-jungle-accent);   border-color: var(--biome-jungle-border-30); }
.card-info-badge-biome-volcanic { background: var(--biome-volcanic-bg-22); color: var(--biome-volcanic-accent); border-color: var(--biome-volcanic-border-30); }
/* Generic fallback — should not normally be hit */
.card-info-badge-subtype {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border-color: var(--border);
}
.card-info-badge-subtype-hazard {
  background: rgba(239,68,68,0.12);
  color: var(--p2-light);
  border-color: rgba(239,68,68,0.35);
}
.card-info-badge-subtype-expansion {
  background: rgba(16,185,129,0.12);
  color: var(--p3-light);
  border-color: rgba(16,185,129,0.35);
}
.card-info-badge-subtype-traversal {
  background: rgba(59,130,246,0.12);
  color: var(--p1-light);
  border-color: rgba(59,130,246,0.35);
}
.card-info-badge-subtype-defence {
  background: rgba(245,158,11,0.12);
  color: var(--p0-light);
  border-color: rgba(245,158,11,0.35);
}

/* ══════════════════════════════════════════════════════════════
   STANDARDISED CARD  — 280 × 450 px
   Art area = top 180px (40%). Info area = bottom 270px (60%).
   Sized to fit the longest card text without scrolling.
   Used in: hover popup, draw-phase reveal, hero reveal, ref screen
   ══════════════════════════════════════════════════════════════ */

.std-card {
  width: 280px;
  height: 450px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #1a1a2e;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Art area — absolute, fills the full card behind all content */
.std-card__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  z-index: 0;
}

.std-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Header area — name, badges and lore at the top, over the art */
.std-card__header {
  position: relative;
  z-index: 2;
  padding: 10px 14px 8px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Spacer that holds a gap in the flex column so the info area stays at the bottom.
   Reduced from 180px to 90px — the header above now occupies the top portion. */
.std-card__art-spacer {
  flex: 0 0 90px;
}

/* Gradient fade from art into the info section — disabled for now */
/* .std-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--bg2, #1e1e2e) 100%);
  pointer-events: none;
} */

/* Bottom half — rules and footer only; name/badges/lore moved to std-card__header */
.std-card__info {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 14px 12px;
  overflow: hidden;
  background: transparent;
}

.std-card__name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-bright, #f1f5f9);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.std-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.std-card__lore {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
  flex-shrink: 0;
}

.std-card__rules {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.55;
  border-left: 2px solid var(--border);
  padding-left: 9px;
  flex-shrink: 0;
  overflow: hidden;
}

.std-card__footer {
  font-size: 0.64rem;
  color: var(--text-muted);
  padding-top: 5px;
  border-top: 1px solid rgba(148,163,184,0.1);
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ── Card stat symbol rows ───────────────────────────────────
   Hero / action card footers: AP diamonds ◆, move arrows ▲,
   base power outlined diamonds ◇.
   ─────────────────────────────────────────────────────────── */

/* Immunity line — sits above the stat row */
.card-footer-immunity {
  display: block;
  font-size: 0.60rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  opacity: 0.85;
}

/* Stat group: label + symbols */
.card-footer-stat {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}
.card-footer-stat-label {
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  margin-right: 3px;
}

/* Separator dot between stat groups */
.card-footer-sep {
  display: inline-block;
  margin: 0 4px;
  color: var(--text-muted);
  opacity: 0.45;
}

/* Deck count */
.card-footer-count {
  display: inline-block;
  white-space: nowrap;
}

/* Individual symbol spans */
.card-sym {
  font-size: 0.62rem;
  line-height: 1;
  display: inline-block;
}
/* AP ◆ — amber/gold */
.card-sym-ap {
  color: #f59e0b;
}
/* Move ▲ — sky-blue */
.card-sym-move {
  color: #38bdf8;
}
.card-sym-move--spent {
  color: var(--text-muted);
  opacity: 0.3;
}
/* Base power ◇ — rose */
.card-sym-power {
  color: #fb7185;
}
/* Zero / none placeholder */
.card-sym-none {
  font-size: 0.60rem;
  color: var(--text-muted);
  opacity: 0.5;
}
/* "0 Base power" label */
.card-sym-zero-power {
  font-size: 0.60rem;
  color: var(--text-muted);
  opacity: 0.65;
  font-style: italic;
}

/* Symbols inside the compact pill (.card-slots on hand/deck cards) */
.card-slots .card-sym-ap {
  font-size: 0.58rem;
  color: #f59e0b;
}

/* ── AP tracker (deploy / drifter picker header) ─────────────
   A row of diamonds: spent (dimmed hollow look) → available (amber).
   ─────────────────────────────────────────────────────────── */
.deploy-ap-tracker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.deploy-ap-tracker .card-sym-ap {
  font-size: 1.05rem;
  transition: color 0.15s, opacity 0.15s;
}
.deploy-ap-tracker .card-sym-ap--spent {
  color: var(--text-muted);
  opacity: 0.35;
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
   ══════════════════════════════════════════════════════════════ */

/* Overlay */
.wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.wizard-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal box — bounces in with the same spring as regular modals when the overlay activates */
.wizard-overlay.active .wizard-box {
  animation: modalBounceIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Wizard child stagger — entry */
.wizard-overlay.active:not(.wizard-closing) .wizard-box > *:nth-child(1)   { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.12s both; }
.wizard-overlay.active:not(.wizard-closing) .wizard-box > *:nth-child(2)   { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.20s both; }
.wizard-overlay.active:not(.wizard-closing) .wizard-box > *:nth-child(3)   { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.27s both; }
.wizard-overlay.active:not(.wizard-closing) .wizard-box > *:nth-child(4)   { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.33s both; }
.wizard-overlay.active:not(.wizard-closing) .wizard-box > *:nth-child(n+5) { animation: modalChildIn 0.30s cubic-bezier(0.2,0,0.4,1.4) 0.38s both; }

/* Wizard child stagger — exit: slow start, accelerates upward */
.wizard-overlay.wizard-closing .wizard-box > *:nth-child(1)   { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.00s both !important; }
.wizard-overlay.wizard-closing .wizard-box > *:nth-child(2)   { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.05s both !important; }
.wizard-overlay.wizard-closing .wizard-box > *:nth-child(3)   { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.10s both !important; }
.wizard-overlay.wizard-closing .wizard-box > *:nth-child(4)   { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.14s both !important; }
.wizard-overlay.wizard-closing .wizard-box > *:nth-child(n+5) { animation: modalChildOut 0.55s cubic-bezier(0.2,0,1,1) 0.17s both !important; }

.wizard-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(700px, 94vw);
  height: min(640px, 92vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 26px 30px 22px;
  position: relative;
  gap: 14px;
  outline: none;
}

/* Close X */
.wizard-close-x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}
.wizard-close-x:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Progress dots */
.wizard-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 2px 0 0;
}
.wizard-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}
.wizard-dot.active  { background: var(--p0-colour); transform: scale(1.2); }
.wizard-dot.done    { background: var(--text-muted); opacity: 0.55; }

/* Visual area */
.wizard-visual {
  min-height: 140px;
  max-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090b13;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
}
.wizard-visual svg {
  width: auto;
  max-width: 100%;
  max-height: 180px;
  height: auto;
}

/* Title & subtitle */
.wizard-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--p0-colour);
  margin: 0;
  line-height: 1.25;
  padding-right: 28px; /* avoid close-x */
}
.wizard-subtitle {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 2px 0 0;
  line-height: 1.45;
}

/* Body */
.wizard-body {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.68;
}
.wizard-body p           { margin: 0 0 9px; }
.wizard-body p:last-child { margin-bottom: 0; }
.wizard-body strong      { color: var(--accent-light); font-weight: 600; }

/* Callout */
.wizard-callout {
  background: rgba(245, 158, 11, 0.09);
  border-left: 3px solid var(--p0-colour);
  border-radius: 0 5px 5px 0;
  padding: 9px 13px;
  font-size: 0.81rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: 10px;
}
.wizard-callout:empty { display: none; }

/* Footer */
.wizard-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;   /* pushes footer to the bottom of the fixed-height flex column */
}

/* Welcome — two stacked/side-by-side CTAs */
.wizard-footer-welcome {
  flex-direction: column;
  gap: 8px;
}
.wiz-cta-main {
  width: 100%;
  font-size: 0.98rem;
  padding: 12px 20px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.btn-wiz-skip {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 0.86rem;
  font-family: var(--font);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}
.btn-wiz-skip:hover { color: var(--text); border-color: var(--text-muted); }

/* Guide page footer — back/counter/next */
.wizard-footer-guide {
  justify-content: space-between;
}
.wiz-btn-prev,
.wiz-btn-next {
  min-width: 88px;
}
.wiz-step-counter {
  font-size: 0.77rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Biome grid (Page 2) ──────────────────────────────── */
.wiz-biome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}
.wiz-biome-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg3);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.wiz-biome-dot {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Hero card (Page 3) ───────────────────────────────── */
.wiz-hero-card-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 4px 8px;
}
.wiz-hero-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 195px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.wiz-hero-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--p0-colour);
  line-height: 1.2;
}
.wiz-hero-biome-badge {
  font-size: 0.72rem;
  background: var(--biome-barren-bg-14);
  color: var(--biome-barren-accent);
  border: 1px solid var(--biome-barren-border-30);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  width: fit-content;
}
.wiz-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wiz-hero-stat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wiz-hero-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wiz-hero-stat-val {
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  color: var(--p0-colour);
}
.wiz-hero-passive-block {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}
.wiz-hero-passive-lbl {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}
.wiz-hero-callouts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  padding-top: 8px;
}
.wiz-hero-callout-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.wiz-callout-arrow { color: var(--p0-colour); flex-shrink: 0; margin-top: 1px; }

/* ── Settlement states table (Page 5) ──────────────────── */
.wiz-table-wrap { margin-top: 10px; overflow-x: auto; }
.wizard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.wizard-table th {
  text-align: left;
  color: var(--text-muted);
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wizard-table td {
  padding: 5px 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(42,48,80,0.45);
}
.wizard-table tr:last-child td { border-bottom: none; }
.wizard-table tr:hover td { background: var(--bg3); }

/* ── Turn steps (Page 7) ────────────────────────────────── */
.wiz-turn-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wiz-turn-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.5;
}
.wiz-step-num {
  background: var(--accent-bg-13);
  border: 1px solid var(--accent-border-28);
  color: var(--p0-colour);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 1px;
}

/* ── Split layout (step 2: hero card + text side-by-side) ── */
.wiz-split-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.wiz-split-card {
  flex-shrink: 0;
  /* Render the std-card at its natural 280×450 — no scaling */
}
.wiz-split-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.wiz-split-text p           { margin: 0 0 9px; }
.wiz-split-text p:last-child { margin-bottom: 0; }
.wiz-split-text strong      { color: var(--accent-light); font-weight: 600; }

/* ── Card types diagram (Page 7 visual) ─────────────────── */
.wiz-card-types {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px;
}
.wiz-card-type-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.wiz-ct-expedition  { background: var(--biome-barren-bg-08);   border-left: 3px solid var(--biome-barren-accent); }
.wiz-ct-staging     { background: rgba(245,158,11,0.09); border-left: 3px solid var(--p0-colour); }
.wiz-ct-icon        { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.wiz-card-type-row strong { color: var(--text); display: block; margin-bottom: 2px; }
.wiz-card-type-row span   { font-size: 0.77rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   FEEDBACK WIDGET
   Intentionally styled as a distinct utility tool —
   different visual language from the game's dark fantasy UI.
   ══════════════════════════════════════════════════════════ */

/* ── Floating tab button ─────────────────────────────────── */
.fb-tab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9800;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 20px;
  color: #a0aec0;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 7px 14px 7px 11px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  user-select: none;
}
.fb-tab:hover {
  background: #3a4a60;
  border-color: #63b3ed;
  color: #bee3f8;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.fb-tab-icon  { font-size: 0.9rem; line-height: 1; }
.fb-tab-label { line-height: 1; }

/* Note: the floating tab is hidden on the active game page via a PHP-rendered
   inline <style> tag in room.php (more reliable than :has() in all environments) */

/* ── Overlay backdrop ────────────────────────────────────── */
.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9850;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;          /* toggled by JS; default: none */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── Modal card ──────────────────────────────────────────── */
/* Uses a neutral off-brand palette to read as a "tool" */
.fb-modal {
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  animation: fb-modal-in 0.2s ease forwards;
}

@keyframes fb-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.fb-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #2d3748;
}

.fb-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}

.fb-modal-subtitle {
  font-size: 0.78rem;
  color: #718096;
  margin-top: 3px;
}

.fb-close {
  background: none;
  border: none;
  color: #718096;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.fb-close:hover { color: #e2e8f0; background: #2d3748; }

/* ── Prompt banner ───────────────────────────────────────── */
.fb-prompt {
  margin: 14px 22px 0;
  background: #2d3748;
  border-left: 3px solid #63b3ed;
  border-radius: 0 6px 6px 0;
  padding: 9px 13px;
  font-size: 0.78rem;
  color: #a0aec0;
  line-height: 1.55;
}
.fb-prompt strong { color: #cbd5e0; }
.fb-prompt em     { font-style: normal; color: #90cdf4; font-weight: 600; }

/* ── Form body ───────────────────────────────────────────── */
.fb-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fb-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fb-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #718096;
}

.fb-req { color: #fc8181; font-weight: 700; }

.fb-input,
.fb-textarea {
  background: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 6px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: none;
}
.fb-input:focus,
.fb-textarea:focus {
  border-color: #63b3ed;
  box-shadow: 0 0 0 2px rgba(99,179,237,0.18);
}
.fb-input::placeholder,
.fb-textarea::placeholder { color: #4a5568; }

.fb-field-hint {
  font-size: 0.68rem;
  color: #4a5568;
}

/* ── Status banners ──────────────────────────────────────── */
.fb-banner {
  border-radius: 6px;
  font-size: 0.82rem;
  padding: 9px 13px;
  line-height: 1.45;
}
.fb-banner-error {
  background: rgba(252,129,129,0.1);
  border: 1px solid rgba(252,129,129,0.35);
  color: #fc8181;
}
.fb-banner-success {
  background: rgba(104,211,145,0.1);
  border: 1px solid rgba(104,211,145,0.35);
  color: #68d391;
}

/* ── Submit button ───────────────────────────────────────── */
.fb-submit {
  background: #2b6cb0;
  border: 1px solid #3182ce;
  border-radius: 7px;
  color: #ebf8ff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 20px;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-end;
}
.fb-submit:hover    { background: #3182ce; border-color: #4299e1; }
.fb-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   JUICE — Session 3 animations
   ═══════════════════════════════════════════════════════════ */

/* ── Group 21 — Std-card hover lift + biome border glow ──── */
/* Only applies in ref-screen context; popup cards stay static */
.ref-screen .std-card,
.ref-biome-section .std-card {
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1),
              box-shadow 0.18s ease,
              border-color 0.18s ease;
}
.ref-screen .std-card:hover,
.ref-biome-section .std-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.4);
  border-color: var(--biome-hover-colour, var(--border));
}
.ref-screen .std-card[data-biome="Barren"]:hover,
.ref-biome-section .std-card[data-biome="Barren"]:hover   { --biome-hover-colour: var(--biome-barren-accent); }
.ref-screen .std-card[data-biome="Jungle"]:hover,
.ref-biome-section .std-card[data-biome="Jungle"]:hover   { --biome-hover-colour: var(--biome-jungle-accent); }
.ref-screen .std-card[data-biome="Volcanic"]:hover,
.ref-biome-section .std-card[data-biome="Volcanic"]:hover { --biome-hover-colour: var(--biome-volcanic-accent); }
.ref-screen .std-card[data-card-type="hero"]:hover,
.ref-biome-section .std-card[data-card-type="hero"]:hover { --biome-hover-colour: var(--accent-light, #fcd34d); }

/* ── Group 4 — Right panel width transition ─────────────── */
.right-panel {
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              min-width 0.28s cubic-bezier(0.4,0,0.2,1);
}
.right-panel .hand-panel,
.right-panel .chat-panel {
  transition: opacity 0.18s ease;
}
.right-panel.rp-minimised .hand-panel,
.right-panel.rp-minimised .chat-panel {
  opacity: 0;
}

/* ── Group 5 — Game log popup slide from right ──────────── */
/* Remove the display:none/flex toggle — use transform + pointer-events instead */
.log-popup {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1),
              opacity 0.22s ease;
}
.log-popup.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Group 10 — Hotseat curtain exit ────────────────────── */
@keyframes curtain-out {
  from { opacity: 1; transform: scale(1);    }
  to   { opacity: 0; transform: scale(0.93); }
}
.hotseat-curtain-exit .hotseat-curtain-inner {
  animation: curtain-out 0.2s ease-in forwards;
}

/* ── Group 13 — Effect pill slide-in / slide-out ─────────── */
@keyframes pillSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes pillFadeOut {
  from { opacity: 1; transform: scale(1);    max-width: 400px; }
  to   { opacity: 0; transform: scale(0.88); max-width: 0;     padding: 0; }
}
.effect-pill {
  animation: pillSlideIn 0.24s cubic-bezier(0.34,1.2,0.64,1) both;
  overflow: hidden;
}
.effect-pill.pill-removing {
  animation: pillFadeOut 0.2s ease-out forwards;
}

/* ── Group 14 — Card info popup fade + scale ────────────── */
@keyframes cardInfoIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}
.card-info-popup {
  transition: opacity 0.1s ease;
}
.card-info-popup.active {
  animation: cardInfoIn 0.12s ease both;
}

/* ── Group 32 — Central hex 3D flip reveal ───────────────── */
@keyframes centralHexFlip {
  0%   { transform: perspective(600px) rotateX(0deg)   translateY(0px); }
  20%  { transform: perspective(600px) rotateX(-40deg) translateY(-18px); }
  55%  { transform: perspective(600px) rotateX(340deg) translateY(-18px); }
  75%  { transform: perspective(600px) rotateX(365deg) translateY(3px); }
  88%  { transform: perspective(600px) rotateX(355deg) translateY(-1px); }
  100% { transform: perspective(600px) rotateX(360deg) translateY(0px); }
}
.central-hex-flip {
  animation: centralHexFlip 0.65s cubic-bezier(0.34,1.2,0.64,1) forwards;
  transform-origin: center center;
}

/* ── Group 16 — Hand panel new card fly-in ───────────────── */
@keyframes handCardFlyIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0)    scale(1);   }
}
.hand-card-fly-in {
  animation: handCardFlyIn 0.28s cubic-bezier(0.34,1.2,0.64,1) both;
}

/* ── Group 8 — Card draw fly clone ──────────────────────── */
.card-draw-fly {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 12px;
  overflow: visible;
}
/* Prevent the cloned card's art from leaking outside during the arc */
.card-draw-fly .std-card {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes cardDrawFly {
  0%   { opacity: 1;   transform: translate(var(--fly-dx), var(--fly-dy))   rotateY(0deg)   scale(0.82); }
  48%  {               transform: translate(var(--mid-dx), var(--mid-dy))   rotateY(90deg)  scale(0.92); }
  100% { opacity: 0;   transform: translate(0px, 0px)                       rotateY(180deg) scale(1);    }
}
.card-draw-fly { animation: cardDrawFly 0.52s ease-in-out forwards; }

/* ── Groups 15 & 29 — Dot spend flash animations ────────── */
@keyframes dotJustSpent {
  0%   { opacity: 1;    transform: scale(1.35); filter: brightness(2.2); }
  100% { opacity: 0.25; transform: scale(0.85); filter: brightness(1); }
}
.card-sym--just-spent {
  animation: dotJustSpent 0.22s ease forwards;
}
/* AP / move dot base transitions for smooth dim */
.card-sym-ap, .card-sym-move {
  transition: opacity 0.18s ease, transform 0.15s ease, color 0.15s ease;
}
.card-sym-ap--spent, .card-sym-move--spent {
  transition: opacity 0.18s ease, transform 0.15s ease;
}

/* Deploy picker card pop on select */
/* card-selected-pop removed — selection uses CSS transition on .selected-card.deploy-card-pick */

/* ── Group 6 — Phase pill swap animation ────────────────── */
@keyframes phasePillExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.82); }
}
@keyframes phasePillEnter {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.phase-pill.pill-exit  { animation: phasePillExit  0.12s ease forwards; }
.phase-pill.pill-enter { animation: phasePillEnter 0.22s cubic-bezier(0.34,1.4,0.64,1) both; }

/* ── Group 19 — Ref-screen fade handled via #ref-screen opacity transition ── */
/* (see #ref-screen / #ref-screen.active rules near top of file) */

/* ── Group 20 — Ref-screen tab fade-in ───────────────────── */
.ref-body-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes refTabFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ref-body.ref-tab-fade-in {
  animation: refTabFadeIn 0.3s ease both;
}