/* ─── FONTS & ROOT ─── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Special+Elite&display=swap');

:root {
  /* ── Dark leather / aged-wood chrome ─────────────────── */
  --bg:            #19120a;
  --surface:       #241a0e;
  --surface2:      #2e2012;
  --surface3:      #3a2818;
  --border:        #5a3e1e;
  --border-light:  #8a5e2a;

  /* ── Parchment / aged paper (play area & cards) ──────── */
  --parchment:        #eeddb8;
  --parchment-dim:    #e0ce9c;
  --parchment-border: #b09450;
  --ink:              #201408;   /* dark ink — text on parchment */
  --ink-dim:          #6b4c24;   /* faded ink */
  --ink-faint:        #9a7448;   /* very faded / pencil */

  /* ── Text (used on dark chrome backgrounds) ─────────── */
  --text:      #ecdcb8;
  --text-dim:  #b09060;
  --text-faint:#7a5e38;

  /* ── Accents ─────────────────────────────────────────── */
  --gold:        #d4a020;
  --gold-dim:    #8a6410;
  --green:       #487830;
  --green-bright:#78b850;
  --red:         #8a3020;
  --red-bright:  #c04838;
  --blue:        #285080;
  --blue-bright: #5090c0;

  /* ── Biome colours ───────────────────────────────────── */
  --tundra:    #7ab3c8;
  --marine:    #2a6a9a;
  --conifer:   #3a6a3a;
  --temperate: #5a8a4a;
  --tropical:  #2a8a3a;
  --grassland: #8a8a3a;
  --desert:    #c8843a;
  --center-rail-width: 110px;
  --control-strip-footprint: 150px;

  --anim-fast: 160ms;
  --anim-med: 360ms;
  --anim-slow: 620ms;
  --anim-bounce: cubic-bezier(0.2, 0.8, 0.2, 1);

  --card-paper: var(--parchment);
  --card-paper-dim: var(--parchment-dim);
  --card-paper-border: var(--parchment-border);
  --card-ink: var(--ink);
  --card-ink-dim: var(--ink-dim);
  --card-ink-faint: var(--ink-faint);
  --card-level-bg: rgba(160,120,50,0.18);
  --card-points: var(--gold-dim);
  --card-stripe: rgba(140,100,40,0.032);
}

body[data-card-theme="paper"] {
  --card-paper: #f8f7f2;
  --card-paper-dim: #efede6;
  --card-paper-border: #b7b4ad;
  --card-ink: #20242a;
  --card-ink-dim: #58616d;
  --card-ink-faint: #7b828c;
  --card-level-bg: rgba(105,118,138,0.14);
  --card-points: #7e6130;
  --card-stripe: rgba(118,124,136,0.03);
}

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

/* Prevent accidental text selection on interactive UI elements */
.hand-card, .compact-card, .eco-tree-node,
.player-chip, .player-strip, .hand-meta, .sort-hand-btn,
.topbar, .topbar-btn, .topbar-menu-item, .end-turn-btn, .phase-btn, .buy-phase-btn, .undo-btn,
.add-ecology-btn, .biome-option, .factor-option,
.ecology-col-header, .deck-visual,
.card-pool-slot, .rail-label, .setup-player-pip,
.ready-btn, .leave-room-btn, .player-strip-trade-btn {
  user-select: none;
}

body {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(110,75,20,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(30,55,15,0.14) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: 'Crimson Pro', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes phasePulse {
  0% {
    opacity: 0.55;
    transform: translateY(-5px);
    text-shadow: 0 0 0 rgba(212,160,32,0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 14px rgba(212,160,32,0.18);
  }
}

@keyframes turnPulse {
  0% {
    box-shadow: 0 0 0 rgba(212,160,32,0);
    transform: scale(0.97);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(212,160,32,0.14);
  }
  100% {
    box-shadow: 0 0 0 rgba(212,160,32,0);
    transform: scale(1);
  }
}

@keyframes deckShift {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes deckPull {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(212,160,32,0);
  }
  35% {
    transform: translateY(-5px);
    box-shadow: 0 8px 22px rgba(212,160,32,0.14);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(212,160,32,0);
  }
}

@keyframes notifIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#asset-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(120,80,20,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(30,60,15,0.18) 0%, transparent 50%),
    rgba(18, 12, 7, 0.96);
}

.asset-loading-card {
  width: min(460px, 100%);
  padding: 32px 28px;
  border: 1px solid rgba(180, 136, 54, 0.45);
  border-radius: 6px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(52,37,21,0.96), rgba(35,24,13,0.98)),
    var(--surface);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.62),
    inset 0 0 0 1px rgba(255,221,151,0.05);
}

.asset-loading-card .setup-title {
  margin-bottom: 8px;
}

.asset-loading-card .setup-subtitle {
  margin-bottom: 28px;
}

.asset-loading-detail {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 6px;
}

.asset-loading-progress {
  margin-top: 18px;
  font-family: 'Special Elite', cursive;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── SHARED SCREEN CHROME ─── */

#gameover-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(120,80,20,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(30,60,15,0.18) 0%, transparent 50%),
    var(--bg);
}

.connecting-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 24px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.waiting-name {
  font-family: 'IM Fell English', serif;
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-top: 12px;
  letter-spacing: 0.08em;
}

/* ─── LOBBY SCREEN ─── */
#lobby-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(120,80,20,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(30,60,15,0.18) 0%, transparent 50%),
    var(--bg);
}

.lobby-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 32px 40px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(180,140,50,0.08),
    0 8px 32px rgba(0,0,0,0.5);
}

.reference-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.reference-link {
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 12px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: all 0.15s;
  cursor: pointer;
}

.reference-link:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: rgba(255,255,255,0.04);
}

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

.lobby-name-row label {
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.lobby-name-row input,
#lobby-room-code {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.lobby-name-row input:focus,
#lobby-room-code:focus {
  border-color: var(--gold-dim);
}

.lobby-divider {
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.lobby-join-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-join-btn {
  width: 100%;
}

.waiting-room-code {
  font-family: 'Special Elite', monospace;
  font-size: 3rem;
  color: var(--gold);
  letter-spacing: 0.35em;
  margin: 4px 0 8px;
  text-indent: 0.35em; /* optical center for letter-spacing */
}

/* ─── SETUP SCREEN ─── */
#setup-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(120,80,20,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(30,60,15,0.18) 0%, transparent 50%),
    var(--bg);
}

.setup-title {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--gold);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 6px;
  text-shadow: 0 0 40px rgba(200,168,75,0.3);
}

.setup-subtitle {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--text-dim);
  font-size: 1.1rem;
  margin-bottom: 50px;
  letter-spacing: 0.1em;
}

.setup-room-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.setup-room-code {
  font-family: 'Special Elite', monospace;
  font-size: 2.2rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  margin-top: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.15s;
}
.setup-room-code:hover { color: var(--gold-bright, #f5d97a); }

.setup-player-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 4px;
}

.setup-player-pip {
  font-size: 0.82rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  color: var(--text-dim);
}

.setup-player-pip-ready {
  border-color: var(--green);
  color: var(--green-bright);
}

.setup-player-pip-me {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.setup-player-waiting {
  font-size: 0.8rem;
  color: var(--text-faint);
  font-style: italic;
}

.player-config-ghost {
  opacity: 0.45;
}

.ready-btn {
  margin-top: 8px;
  padding: 5px 14px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ready-btn:not(:disabled):hover {
  border-color: var(--green);
  color: var(--green-bright);
}

.ready-btn.ready-btn-active {
  background: rgba(74, 124, 78, 0.15);
  border-color: var(--green);
  color: var(--green-bright);
}

.ready-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.setup-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 32px;
  max-width: 900px;
  width: 100%;
  margin-bottom: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(180,140,50,0.07),
    0 6px 24px rgba(0,0,0,0.4);
}

.setup-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.setup-section-header h2 {
  margin-bottom: 0;
  border-bottom: none;
  flex-shrink: 0;
}

.randomize-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.randomize-row input[type="number"] {
  width: 3.5rem;
  padding: 3px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  text-align: center;
}

.randomize-btn {
  padding: 4px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.randomize-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.remind-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.remind-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* Add bottom border under section header to match standalone h2 style */
.setup-section-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.setup-panel h2 {
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.05em;
}

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

.biome-option {
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.biome-option:hover { border-color: var(--border-light); background: var(--surface2); }
.biome-option.selected { border-color: var(--gold); background: rgba(200,168,75,0.08); }
.biome-option.selected::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  color: var(--gold);
  font-size: 0.9rem;
}

.biome-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  margin: 0 auto 8px;
}

.biome-name {
  font-family: 'IM Fell English', serif;
  font-size: 0.95rem;
  color: var(--text);
}

.biome-count { font-size: 0.78rem; color: var(--text-dim); margin-top: 3px; }
.biome-bonus {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  line-height: 1.35;
}

.factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.factor-option {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}

.factor-option:hover { background: var(--surface2); border-color: var(--border-light); }
.factor-option.selected { border-color: var(--gold); background: rgba(200,168,75,0.07); }

.factor-option-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.factor-name { flex: 1; }

.factor-effect {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.35;
  padding-left: 26px; /* align under name, past the checkbox */
}

.factor-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-light);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  color: var(--gold);
  transition: all 0.2s;
}

.factor-option.selected .factor-check { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.factor-type-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.tag-biotic  { background: rgba(74,124,78,0.25); color: var(--green-bright); }
.tag-abiotic { background: rgba(42,90,122,0.25); color: var(--blue-bright); }

.players-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.player-config {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  flex: 1;
  min-width: 200px;
}

.player-config h3 {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 12px;
}

.you-badge {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--green-bright);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.bot-badge {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.field-row { margin-bottom: 10px; }
.field-row label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 4px; }

input[type="text"], input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 3px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

input[type="text"]:focus, input[type="number"]:focus { border-color: var(--gold-dim); }
input[type="text"]:disabled, input[type="number"]:disabled { opacity: 0.5; cursor: not-allowed; }

.settings-section-label {
  font-family: 'Crimson Pro', serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 4px;
  margin-bottom: 12px;
}

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

.setting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setting-field label {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.setting-field input[type="number"] {
  text-align: center;
  font-size: 1.05rem;
  padding: 8px 10px;
}

.setting-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.setting-field-checkbox label {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.setup-host-note {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 14px;
  font-style: italic;
}

/* Hide native number spinners — values are controlled by keyboard/direct input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.start-btn {
  background: var(--gold);
  color: var(--bg);
  font-family: 'IM Fell English', serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  padding: 14px 24px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  margin: 0 auto;
}

.start-btn:hover { background: #debb66; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,168,75,0.3); }
.start-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.setup-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.leave-room-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
  transition: color 0.15s;
}
.leave-room-btn:hover { color: var(--red-bright); }

/* ─── GAME SCREEN ─── */
#game-screen {
  display: flex;
  flex-direction: column;
  /* Scale up by 20%: shrink the logical size so it fills the viewport after scaling */
  width: calc(100vw / 1.30);
  height: calc(100vh / 1.30);
  transform: scale(1.30);
  transform-origin: top left;
  overflow: hidden;
}


.topbar {
  display: none;
}

.topbar-left  { flex-shrink: 0; }
.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.topbar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-round {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar-phase {
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
  transform-origin: center;
}

.topbar-phase-detail {
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  line-height: 1.1;
  text-align: center;
  transform-origin: center;
}

.topbar-phase.phase-change-pulse,
.topbar-phase-detail.phase-change-pulse {
  animation: phasePulse var(--anim-med) var(--anim-bounce);
}

.topbar-phase.phase-draw { color: #6ab0d4; }
.topbar-phase.phase-buy  { color: var(--gold); }
.topbar-phase.phase-main { color: #7ac47f; }
.topbar-phase.phase-end  { color: var(--text-dim); }

.topbar-phase-detail.phase-draw { color: #6ab0d4; }
.topbar-phase-detail.phase-buy  { color: var(--gold); }
.topbar-phase-detail.phase-main { color: #7ac47f; }
.topbar-phase-detail.phase-end  { color: var(--text-dim); }

.topbar-title-wrap {
  position: relative;
  flex-shrink: 0;
}

.topbar-title {
  font-family: 'IM Fell English', serif;
  font-size: 1.2rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  width: 100%;
  display: block;
}
.topbar-title:hover { color: var(--gold-dim, #c8a84b); }

/* Dropdown menu */
.topbar-menu {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--surface);
  border: 1.5px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.58);
  min-width: 220px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar-menu[hidden] { display: none; }

.topbar-menu-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.topbar-menu-item:last-child { border-bottom: none; }
.topbar-menu-item:hover { background: var(--bg); color: var(--text); }

.topbar-menu-abandon { color: var(--danger, #b05050); }
.topbar-menu-abandon:hover { background: rgba(139,58,58,0.12); color: #c06060; }

.phase-btn {
  background: rgba(74,124,78,0.2);
  border: 1px solid var(--green);
  color: var(--green-bright);
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  order: 30;
  width: 100%;
}
.phase-btn:hover { background: rgba(74,124,78,0.35); }
.phase-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.buy-phase-btn {
  background: rgba(200,168,75,0.15);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  order: 29;
  width: 100%;
}
.buy-phase-btn:hover { background: rgba(200,168,75,0.28); }

.undo-btn {
  background: rgba(120,100,80,0.15);
  border: 1px solid rgba(180,150,110,0.4);
  color: rgba(200,180,150,0.85);
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  order: 28;
  width: 100%;
}
.undo-btn:hover { background: rgba(120,100,80,0.3); }

.hidden { display: none; }

.turn-indicator {
  background: rgba(200,168,75,0.15);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 0.85rem;
  color: var(--gold);
  flex-shrink: 0;
  text-align: center;
  width: 100%;
  transform-origin: center;
}

.turn-indicator.opponent-turn {
  background: rgba(90,90,64,0.2);
  border-color: var(--border);
  color: var(--text-dim);
}

.turn-indicator.turn-change-pulse {
  animation: turnPulse var(--anim-med) var(--anim-bounce);
}

.score-chips { display: flex; gap: 8px; margin-left: auto; }

.score-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.score-chip span { color: var(--gold); font-weight: 600; }
.score-chip.winning { border-color: var(--gold-dim); background: rgba(200,168,75,0.1); }

.topbar-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  width: 100%;
}

.topbar-btn:hover { border-color: var(--border-light); color: var(--text); }

a.topbar-btn {
  display: block;
  text-decoration: none;
  text-align: center;
}

.end-turn-btn {
  background: rgba(74,124,78,0.2);
  border: 1px solid var(--green);
  color: var(--green-bright);
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.end-turn-btn:hover { background: rgba(74,124,78,0.35); }
.end-turn-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── PLAYER STRIP ─── */
.player-strip {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 12px;
  position: absolute;
  left: 0;
  right: calc(var(--center-rail-width) + var(--control-strip-footprint));
  top: -34px;
  z-index: 2;
  overflow-x: clip;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}

.player-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 6px 12px;
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface2);
  user-select: none;
  position: relative;
  /* Tab notch at bottom — covers strip's bottom border when active */
  margin-bottom: 0;
}

.player-chip:hover { border-color: var(--border-light); background: var(--surface3); }

.player-chip.player-chip-factor-target {
  border-color: var(--gold);
  background: rgba(200,168,75,0.12);
  box-shadow: inset 0 0 0 1px rgba(200,168,75,0.22), 0 0 12px rgba(200,168,75,0.18);
}

.player-chip.viewing {
  border-color: var(--gold);
  border-width: 2px;
  background: linear-gradient(to bottom, var(--surface3), var(--surface));
  box-shadow: 0 -4px 14px rgba(200,140,20,0.35), inset 0 1px 0 rgba(200,140,20,0.2);
  z-index: 1;
  padding: 5px 16px 8px 16px; /* wider tab */
  margin-bottom: -2px; /* overlap the hand-area border so it reads as one piece */
}

.player-chip.viewing .player-chip-name {
  color: var(--gold);
  font-size: 1rem;
}

.player-chip.viewing .player-chip-score {
  font-size: 0.8rem;
}

.player-chip.active-turn { border-color: var(--green); }

.player-chip-name {
  font-family: 'IM Fell English', serif;
  font-size: 0.88rem;
  color: var(--text);
}

.player-chip-hand {
  font-family: 'Special Elite', cursive;
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.player-chip-score {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
}

.player-chip-turn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  flex-shrink: 0;
}

.player-chip-trade-btn {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  line-height: 1;
}
.player-chip-trade-btn:hover { opacity: 1; }

/* ─── PLAY AREA ─── */
.play-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.hand-area {
  flex-shrink: 0;
  background: linear-gradient(to top, var(--bg), var(--surface));
  /* no gap — card spacing handled via margin-left */
  padding: 4px 20px 8px 8px;
  display: flex;
  gap: 0;
  /* clip only clips without creating a BFC, so overflow-y stays visible (cards can rise above) */
  overflow-x: clip;
  overflow-y: visible;
  min-height: 90px;
  max-height: 90px;
  align-items: flex-end;
  scroll-behavior: smooth;
}

.hand-area.hand-bottom {
  border-top: 2px solid var(--border);
  box-shadow: 0 -3px 16px rgba(0,0,0,0.4);
  padding-top: 20px;
}

.bottom-dock {
  position: relative;
  flex-shrink: 0;
  /* stacking context above .center-area so hovered hand cards paint on top of the playfield */
  z-index: 10;
}

/* Left meta block: sort button + card count */
.hand-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  align-self: stretch;
  justify-content: center;
}

.sort-hand-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Special Elite', cursive;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sort-hand-btn:hover { border-color: var(--border-light); color: var(--text); }

.hand-count {
  font-family: 'Special Elite', cursive;
  font-size: 0.6rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Center area */
.center-area {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.ecology-panes {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.player-ecology-row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  border-bottom: 1px solid var(--parchment-border);
  position: relative;
}

.player-ecology-row:last-child { border-bottom: none; }

.player-ecology-row.field-factor-drop-target,
.eco-tree-wrapper.field-factor-drop-target {
  box-shadow: inset 0 0 0 1px rgba(200,168,75,0.18);
}

.player-ecology-row.field-factor-drop-active,
.eco-tree-wrapper.field-factor-drop-active {
  box-shadow:
    inset 0 0 0 2px rgba(200,168,75,0.42),
    inset 0 0 38px rgba(200,168,75,0.1);
}

.player-ecology-row.field-ecology-drop-target {
  box-shadow: inset 0 0 0 1px rgba(72,120,48,0.18);
}

.player-ecology-row.field-ecology-drop-active {
  box-shadow:
    inset 0 0 0 2px rgba(72,120,48,0.42),
    inset 0 0 42px rgba(72,120,48,0.1);
}

/* Stacked page-edge strips — visible at the outer left and right of the open book */
.player-ecology-row::before,
.player-ecology-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 2;
  pointer-events: none;
  /* Thin horizontal lines = individual page edges */
  background: repeating-linear-gradient(
    to left,
    #ede3c8 0px, #ede3c8 2px,
    rgba(125,90,32,0.28) 2px, rgba(125,90,32,0.28) 3px
  );
}
.player-ecology-row::before {
  left: 0;
  border-right: 1px solid rgba(110,78,25,0.45);
}
.player-ecology-row::after {
  right: 0;
  border-left: 1px solid rgba(110,78,25,0.45);
}

.player-label-strip { display: none; }

/* ─── PAGE HEADER — player name + score pinned above the scrolling columns ─── */
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 50px;
  z-index: 1;
  pointer-events: none;
  border-bottom: 1px solid rgba(160,120,50,0.18);
}

.page-header-name {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header-score {
  font-family: 'Special Elite', cursive;
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Ecologies scroll — parchment journal page */
.ecologies-row {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  position: relative;
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 0% 100%, rgba(120,85,20,0.2) 0%, transparent 48%),
    radial-gradient(ellipse at 100% 0%, rgba(60,85,20,0.15) 0%, transparent 48%),
    radial-gradient(ellipse at 0% 0%, rgba(120,85,20,0.12) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(80,60,20,0.14) 0%, transparent 35%);
  box-shadow: inset 2px 0 20px rgba(120,85,20,0.1), inset -2px 0 20px rgba(120,85,20,0.1);
}

/* Left and right page halves — each fills half the open spread */
.page-left,
.page-right {
  flex: 1 0 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 46px 20px 38px 20px;
  min-width: min-content;
}
.page-left {
  /* Shadow curling toward the binding on the right edge */
  background-image: linear-gradient(to right,
    transparent 55%,
    rgba(42,25,7,0.06) 78%,
    rgba(42,25,7,0.18) 92%,
    rgba(32,18,4,0.32) 100%
  );
}
.page-right {
  justify-content: flex-start;
  /* Mirror shadow on the left edge */
  background-image: linear-gradient(to left,
    transparent 55%,
    rgba(42,25,7,0.06) 78%,
    rgba(42,25,7,0.18) 92%,
    rgba(32,18,4,0.32) 100%
  );
}

/* ─── BOOK SPINE — structural flex gap at true center ─────────────────────── */
.book-spine {
  flex-shrink: 0;
  width: 0px;
  align-self: stretch;
  pointer-events: none;
  position: relative;
  /* Spine channel — dark trough between the two page shadows */
  background: linear-gradient(to right,
    rgba(32,18,4,0.28)  0%,
    rgba(32,18,4,0.10) 30%,
    rgba(32,18,4,0.06) 50%,
    rgba(32,18,4,0.10) 70%,
    rgba(32,18,4,0.28) 100%
  );
}
.book-spine::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: .5px; margin-left: -1px;
  background: rgba(50,28,8,0.25);
}

/* ─── NARROW: single right-page view — hide left page, spine bleeds from left ─── */
@media (max-width: 1000px) {
  .page-left  { display: none; }
  .book-spine { display: none; }

  .page-right {
    padding-left: 36px;
    background-image:
      linear-gradient(to right,
        rgba(32,18,4,0.38) 0px,
        rgba(42,25,7,0.22) 3px,
        rgba(42,25,7,0.08) 18px,
        transparent        40px
      );
  }

  .ecologies-row {
    box-shadow: inset -2px 0 20px rgba(120,85,20,0.1);
  }

  /* Narrow left strip = inner page edge near spine */
  .player-ecology-row::before {
    width: 4px;
    background: linear-gradient(to right, rgba(32,18,4,0.3), rgba(32,18,4,0.06) 70%, transparent);
    border-right: 1px solid rgba(80,52,16,0.5);
    box-shadow: none;
  }

  .page-header {
    padding-left: 36px;
  }
}

/* ─── CONTROL STRIP — panel tucked into bottom-right of the play field ─── */
.control-strip {
	position: absolute;
	bottom: 0;
	right: calc(var(--center-rail-width) - 3px);
	width: 160px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 12px 10px 10px;
	background: linear-gradient(180deg, #ede3c8 0%, #e6d9b6 100%);
	border: none;
	border-bottom: none;
	border-right: none;
	box-shadow: -2px -2px 4px rgba(0,0,0,0.22), -1px -1px 6px rgba(0,0,0,0.14), inset 0 1px 0px rgba(255,240,190,0.35);
	transform: rotate(-2deg);
	transition: transform 220ms cubic-bezier(0.22, 0.74, 0.2, 1);
	z-index: 3;
	overflow: visible;
}

.control-strip.opponent-turn-offset {
  transform: translateY(40px) rotate(-2deg);
}

/* Torn paper edges */
.control-strip::before,
.control-strip::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Torn left edge */
.control-strip::before {
  top: 0;
  left: -10px;
  width: 16px;
  bottom: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 800'><path d='M16,0 C13.21,0.97 9.48,2.91 6.69,3.88 C7.21,4.42 7.89,5.51 8.41,6.05 C8.90,7.04 9.56,9.01 10.06,10 C9.72,10.55 9.28,11.66 8.94,12.21 C8.54,13.93 8.00,17.37 7.6,19.09 C7.04,20.88 6.30,24.45 5.74,26.24 C5.84,26.89 5.98,28.18 6.08,28.83 C5.80,29.64 5.44,31.27 5.16,32.08 C5.02,32.54 4.83,33.47 4.69,33.93 C4.26,34.59 3.70,35.92 3.27,36.58 C3.41,37.34 3.59,38.84 3.73,39.6 C3.16,40.25 2.40,41.55 1.83,42.2 C1.73,42.92 1.60,44.35 1.5,45.07 C1.50,45.91 1.50,47.61 1.5,48.45 C1.50,49.43 1.50,51.38 1.5,52.36 C1.50,52.94 1.50,54.11 1.5,54.69 C2.14,55.47 2.98,57.02 3.62,57.8 C4.22,58.52 5.01,59.96 5.61,60.68 C6.21,61.66 7.00,63.62 7.6,64.6 C7.11,65.56 6.46,67.49 5.97,68.45 C5.42,69.18 4.70,70.65 4.15,71.38 C3.94,72.13 3.66,73.63 3.45,74.38 C3.58,75.22 3.76,76.89 3.89,77.73 C4.08,77.99 4.34,78.50 4.54,78.76 C3.96,79.30 3.17,80.38 2.59,80.92 C2.54,81.88 2.48,83.79 2.43,84.75 C2.35,85.58 2.25,87.22 2.18,88.05 C1.98,88.69 1.70,89.98 1.5,90.62 C2.19,91.56 3.11,93.44 3.8,94.38 C4.47,95.30 5.37,97.13 6.05,98.04 C5.58,99.00 4.95,100.92 4.48,101.88 C4.12,102.16 3.63,102.70 3.27,102.98 C3.61,103.90 4.05,105.72 4.39,106.64 C4.46,108.73 4.54,112.91 4.61,115 C5.35,117.87 6.33,123.61 7.07,126.48 C7.33,127.05 7.69,128.18 7.95,128.74 C8.06,129.63 8.20,131.41 8.31,132.3 C8.51,134.48 8.79,138.85 8.99,141.03 C9.19,141.50 9.45,142.46 9.65,142.93 C9.73,143.59 9.84,144.91 9.92,145.57 C10.45,145.86 11.14,146.44 11.67,146.73 C11.29,147.05 10.78,147.69 10.4,148.01 C10.96,148.97 11.71,150.91 12.27,151.87 C11.75,152.20 11.06,152.86 10.54,153.19 C11.10,153.74 11.84,154.84 12.4,155.39 C12.23,155.96 12.00,157.09 11.83,157.66 C11.47,160.14 11.00,165.10 10.64,167.58 C10.48,167.96 10.27,168.71 10.11,169.09 C10.48,169.38 10.98,169.94 11.35,170.23 C11.16,170.54 10.92,171.17 10.73,171.48 C11.26,171.85 11.97,172.59 12.5,172.96 C12.37,173.31 12.20,174.03 12.07,174.38 C11.32,177.08 10.32,182.50 9.57,185.2 C10.21,185.50 11.06,186.11 11.7,186.41 C11.50,187.24 11.24,188.90 11.04,189.73 C11.66,190.05 12.48,190.69 13.1,191.01 C13.18,191.53 13.28,192.57 13.36,193.09 C13.32,193.36 13.26,193.91 13.22,194.18 C13.43,194.76 13.71,195.92 13.92,196.5 C13.54,197.35 13.04,199.06 12.66,199.91 C12.83,200.58 13.06,201.91 13.23,202.58 C12.76,203.55 12.14,205.48 11.67,206.45 C11.95,206.82 12.31,207.57 12.59,207.94 C11.52,210.65 10.09,216.08 9.02,218.79 C9.42,219.76 9.96,221.69 10.36,222.66 C10.46,223.64 10.61,225.61 10.71,226.59 C10.94,227.28 11.24,228.65 11.47,229.33 C12.21,229.99 13.20,231.29 13.94,231.95 C13.96,232.23 13.98,232.79 14,233.07 C14.00,233.39 14.00,234.02 14,234.34 C14.00,234.90 14.00,236.02 14,236.58 C13.53,237.47 12.89,239.26 12.42,240.15 C12.53,240.72 12.67,241.88 12.78,242.45 C12.26,243.38 11.58,245.25 11.06,246.19 C11.77,246.54 12.71,247.24 13.42,247.59 C13.59,248.00 13.83,248.81 14,249.21 C14.00,250.02 14.00,251.63 14,252.44 C12.24,255.26 9.91,260.92 8.15,263.74 C7.83,264.27 7.40,265.32 7.08,265.85 C7.08,266.81 7.08,268.73 7.08,269.69 C7.75,270.15 8.65,271.09 9.33,271.55 C8.80,273.76 8.10,278.17 7.57,280.38 C6.95,281.29 6.13,283.11 5.52,284.02 C5.08,284.36 4.50,285.04 4.07,285.38 C4.77,285.74 5.70,286.47 6.4,286.83 C5.99,287.42 5.45,288.62 5.04,289.21 C4.44,289.56 3.64,290.27 3.04,290.63 C3.34,291.22 3.73,292.41 4.03,293 C4.21,293.38 4.46,294.15 4.64,294.53 C4.02,295.12 3.18,296.29 2.56,296.88 C3.29,297.74 4.25,299.46 4.98,300.32 C5.57,301.27 6.36,303.18 6.95,304.13 C7.12,305.03 7.35,306.82 7.52,307.72 C6.81,308.69 5.85,310.64 5.14,311.61 C4.94,312.35 4.68,313.84 4.48,314.58 C4.37,315.06 4.21,316.03 4.1,316.51 C6.09,318.33 8.74,321.98 10.73,323.8 C11.38,325.84 12.26,329.90 12.91,331.94 C11.33,334.45 9.23,339.46 7.66,341.97 C7.21,342.48 6.60,343.51 6.15,344.02 C5.71,344.82 5.12,346.43 4.68,347.23 C4.62,347.92 4.53,349.29 4.47,349.97 C4.12,350.79 3.65,352.42 3.3,353.24 C3.76,354.13 4.38,355.93 4.85,356.82 C5.18,357.77 5.61,359.66 5.94,360.61 C6.42,362.50 7.05,366.26 7.53,368.15 C6.95,368.63 6.18,369.60 5.6,370.09 C6.03,370.77 6.60,372.12 7.03,372.8 C6.47,373.11 5.72,373.74 5.16,374.05 C4.58,374.73 3.81,376.10 3.23,376.78 C3.26,377.67 3.30,379.45 3.33,380.34 C4.05,380.99 5.00,382.29 5.72,382.94 C5.07,383.68 4.21,385.15 3.56,385.89 C3.76,386.19 4.04,386.77 4.24,387.07 C4.71,388.01 5.34,389.88 5.81,390.82 C6.04,391.55 6.36,393.01 6.59,393.74 C6.08,394.71 5.40,396.65 4.89,397.62 C5.73,400.25 6.85,405.50 7.69,408.12 C7.43,408.49 7.07,409.21 6.81,409.58 C6.22,410.07 5.42,411.04 4.83,411.53 C4.37,413.07 3.77,416.16 3.31,417.71 C3.77,418.56 4.39,420.25 4.85,421.1 C4.94,421.89 5.06,423.49 5.15,424.28 C5.50,424.96 5.95,426.32 6.3,427 C6.83,427.61 7.54,428.84 8.07,429.45 C7.41,429.96 6.53,430.99 5.87,431.5 C5.98,432.09 6.12,433.27 6.23,433.86 C5.55,434.86 4.66,436.86 3.98,437.86 C4.36,438.71 4.86,440.42 5.23,441.27 C5.30,442.20 5.38,444.06 5.45,444.99 C5.99,445.72 6.70,447.16 7.24,447.89 C6.51,448.34 5.55,449.23 4.82,449.68 C5.05,450.12 5.37,450.99 5.6,451.42 C6.33,452.28 7.31,454.00 8.05,454.86 C7.90,455.47 7.71,456.70 7.56,457.31 C7.65,457.79 7.77,458.74 7.86,459.22 C7.50,459.61 7.01,460.39 6.65,460.78 C6.25,461.61 5.73,463.27 5.33,464.1 C5.67,464.79 6.11,466.17 6.45,466.86 C6.23,468.56 5.95,471.94 5.73,473.64 C6.32,474.46 7.10,476.12 7.69,476.94 C7.64,477.56 7.58,478.81 7.54,479.43 C6.86,480.29 5.96,482.01 5.28,482.87 C4.56,483.69 3.60,485.35 2.88,486.17 C5.81,487.43 9.71,489.96 12.64,491.22 C13.05,491.56 13.59,492.23 14,492.56 C14.00,493.23 14.00,494.58 14,495.25 C14.00,495.72 14.00,496.65 14,497.12 C14.00,497.37 14.00,497.87 14,498.12 C14.00,498.53 14.00,499.34 14,499.75 C13.28,500.26 12.33,501.29 11.61,501.8 C12.00,502.39 12.53,503.59 12.92,504.18 C13.19,505.03 13.56,506.72 13.83,507.57 C13.88,508.28 13.95,509.71 14,510.42 C14.00,510.71 14.00,511.27 14,511.56 C14.00,512.33 14.00,513.86 14,514.63 C14.00,515.59 14.00,517.50 14,518.46 C13.30,518.91 12.36,519.81 11.66,520.26 C11.79,520.76 11.96,521.77 12.09,522.28 C12.24,524.46 12.44,528.81 12.59,530.99 C13.01,531.86 13.58,533.60 14,534.47 C13.48,535.34 12.78,537.07 12.26,537.94 C11.81,538.28 11.22,538.97 10.77,539.31 C11.26,541.49 11.92,545.84 12.42,548.02 C11.19,549.73 9.54,553.15 8.31,554.86 C8.07,555.71 7.74,557.41 7.5,558.26 C7.67,559.51 7.89,562.02 8.06,563.27 C7.42,563.91 6.56,565.20 5.92,565.84 C6.66,566.84 7.64,568.84 8.38,569.84 C8.67,570.39 9.07,571.50 9.36,572.05 C9.25,572.36 9.11,572.99 9.01,573.3 C9.45,574.04 10.05,575.52 10.49,576.26 C10.60,576.52 10.74,577.05 10.85,577.31 C10.38,577.87 9.76,578.97 9.29,579.53 C9.12,580.28 8.89,581.78 8.72,582.53 C9.21,583.20 9.87,584.53 10.36,585.2 C10.88,586.10 11.56,587.90 12.08,588.8 C12.41,589.54 12.84,591.03 13.17,591.78 C12.55,592.50 11.72,593.95 11.1,594.68 C11.46,595.28 11.94,596.49 12.3,597.09 C12.20,597.65 12.07,598.78 11.97,599.34 C11.63,599.66 11.18,600.32 10.84,600.64 C11.04,601.28 11.31,602.56 11.51,603.2 C11.99,603.65 12.64,604.54 13.12,604.99 C13.38,605.75 13.74,607.26 14,608.02 C14.00,608.57 14.00,609.67 14,610.22 C14.00,610.96 14.00,612.45 14,613.19 C11.09,615.46 7.21,620.00 4.3,622.27 C4.33,623.02 4.37,624.52 4.4,625.27 C4.89,625.95 5.55,627.30 6.04,627.98 C6.26,628.88 6.55,630.67 6.77,631.57 C6.96,632.28 7.22,633.69 7.41,634.4 C8.03,635.00 8.87,636.20 9.49,636.8 C9.70,637.15 9.99,637.84 10.2,638.19 C10.59,638.82 11.12,640.09 11.51,640.72 C9.50,642.35 6.81,645.61 4.8,647.24 C4.94,648.14 5.12,649.94 5.26,650.84 C4.68,651.66 3.90,653.30 3.32,654.12 C5.00,657.12 7.23,663.11 8.91,666.1 C8.91,666.67 8.92,667.83 8.92,668.4 C8.99,668.86 9.09,669.79 9.16,670.25 C9.33,670.87 9.57,672.10 9.74,672.72 C9.09,673.67 8.21,675.57 7.56,676.52 C8.00,677.13 8.60,678.36 9.04,678.97 C7.79,681.88 6.13,687.70 4.89,690.61 C5.59,691.43 6.53,693.09 7.23,693.91 C7.98,694.61 8.97,696.01 9.72,696.71 C9.91,697.63 10.17,699.49 10.36,700.41 C9.94,700.94 9.38,702.01 8.96,702.55 C9.43,702.87 10.04,703.51 10.51,703.83 C10.62,704.42 10.76,705.61 10.87,706.2 C10.72,706.77 10.53,707.90 10.38,708.47 C10.05,709.27 9.62,710.86 9.29,711.66 C9.21,711.92 9.11,712.45 9.03,712.71 C8.35,713.51 7.45,715.10 6.78,715.9 C7.45,716.66 8.34,718.19 9.01,718.95 C9.29,719.61 9.68,720.93 9.96,721.59 C10.06,722.30 10.19,723.70 10.29,724.41 C10.21,724.99 10.11,726.16 10.04,726.74 C10.24,727.66 10.52,729.49 10.72,730.41 C10.92,731.39 11.18,733.34 11.38,734.32 C11.32,735.17 11.25,736.88 11.19,737.73 C11.56,739.59 12.04,743.30 12.41,745.16 C12.45,745.42 12.51,745.95 12.55,746.21 C12.80,746.81 13.13,748.00 13.38,748.59 C13.57,748.98 13.81,749.77 14,750.16 C11.92,752.52 9.14,757.24 7.06,759.6 C8.73,761.25 10.97,764.56 12.64,766.21 C12.53,766.86 12.38,768.14 12.27,768.79 C12.34,769.12 12.44,769.79 12.51,770.12 C9.37,772.10 5.18,776.04 2.04,778.02 C2.07,778.66 2.11,779.94 2.14,780.58 C3.35,782.04 4.98,784.96 6.19,786.42 C5.61,786.82 4.84,787.62 4.26,788.02 C4.50,788.49 4.83,789.42 5.07,789.89 C4.70,790.73 4.20,792.41 3.83,793.25 C4.02,793.93 4.28,795.30 4.47,795.98 C4.70,796.77 5.02,798.37 5.25,799.16 C4.96,799.37 4.57,799.79 4.28,800 L16,800 Z' fill='%23ede3c8'/><path d='M16,0 C13.21,0.97 9.48,2.91 6.69,3.88 C7.21,4.42 7.89,5.51 8.41,6.05 C8.90,7.04 9.56,9.01 10.06,10 C9.72,10.55 9.28,11.66 8.94,12.21 C8.54,13.93 8.00,17.37 7.6,19.09 C7.04,20.88 6.30,24.45 5.74,26.24 C5.84,26.89 5.98,28.18 6.08,28.83 C5.80,29.64 5.44,31.27 5.16,32.08 C5.02,32.54 4.83,33.47 4.69,33.93 C4.26,34.59 3.70,35.92 3.27,36.58 C3.41,37.34 3.59,38.84 3.73,39.6 C3.16,40.25 2.40,41.55 1.83,42.2 C1.73,42.92 1.60,44.35 1.5,45.07 C1.50,45.91 1.50,47.61 1.5,48.45 C1.50,49.43 1.50,51.38 1.5,52.36 C1.50,52.94 1.50,54.11 1.5,54.69 C2.14,55.47 2.98,57.02 3.62,57.8 C4.22,58.52 5.01,59.96 5.61,60.68 C6.21,61.66 7.00,63.62 7.6,64.6 C7.11,65.56 6.46,67.49 5.97,68.45 C5.42,69.18 4.70,70.65 4.15,71.38 C3.94,72.13 3.66,73.63 3.45,74.38 C3.58,75.22 3.76,76.89 3.89,77.73 C4.08,77.99 4.34,78.50 4.54,78.76 C3.96,79.30 3.17,80.38 2.59,80.92 C2.54,81.88 2.48,83.79 2.43,84.75 C2.35,85.58 2.25,87.22 2.18,88.05 C1.98,88.69 1.70,89.98 1.5,90.62 C2.19,91.56 3.11,93.44 3.8,94.38 C4.47,95.30 5.37,97.13 6.05,98.04 C5.58,99.00 4.95,100.92 4.48,101.88 C4.12,102.16 3.63,102.70 3.27,102.98 C3.61,103.90 4.05,105.72 4.39,106.64 C4.46,108.73 4.54,112.91 4.61,115 C5.35,117.87 6.33,123.61 7.07,126.48 C7.33,127.05 7.69,128.18 7.95,128.74 C8.06,129.63 8.20,131.41 8.31,132.3 C8.51,134.48 8.79,138.85 8.99,141.03 C9.19,141.50 9.45,142.46 9.65,142.93 C9.73,143.59 9.84,144.91 9.92,145.57 C10.45,145.86 11.14,146.44 11.67,146.73 C11.29,147.05 10.78,147.69 10.4,148.01 C10.96,148.97 11.71,150.91 12.27,151.87 C11.75,152.20 11.06,152.86 10.54,153.19 C11.10,153.74 11.84,154.84 12.4,155.39 C12.23,155.96 12.00,157.09 11.83,157.66 C11.47,160.14 11.00,165.10 10.64,167.58 C10.48,167.96 10.27,168.71 10.11,169.09 C10.48,169.38 10.98,169.94 11.35,170.23 C11.16,170.54 10.92,171.17 10.73,171.48 C11.26,171.85 11.97,172.59 12.5,172.96 C12.37,173.31 12.20,174.03 12.07,174.38 C11.32,177.08 10.32,182.50 9.57,185.2 C10.21,185.50 11.06,186.11 11.7,186.41 C11.50,187.24 11.24,188.90 11.04,189.73 C11.66,190.05 12.48,190.69 13.1,191.01 C13.18,191.53 13.28,192.57 13.36,193.09 C13.32,193.36 13.26,193.91 13.22,194.18 C13.43,194.76 13.71,195.92 13.92,196.5 C13.54,197.35 13.04,199.06 12.66,199.91 C12.83,200.58 13.06,201.91 13.23,202.58 C12.76,203.55 12.14,205.48 11.67,206.45 C11.95,206.82 12.31,207.57 12.59,207.94 C11.52,210.65 10.09,216.08 9.02,218.79 C9.42,219.76 9.96,221.69 10.36,222.66 C10.46,223.64 10.61,225.61 10.71,226.59 C10.94,227.28 11.24,228.65 11.47,229.33 C12.21,229.99 13.20,231.29 13.94,231.95 C13.96,232.23 13.98,232.79 14,233.07 C14.00,233.39 14.00,234.02 14,234.34 C14.00,234.90 14.00,236.02 14,236.58 C13.53,237.47 12.89,239.26 12.42,240.15 C12.53,240.72 12.67,241.88 12.78,242.45 C12.26,243.38 11.58,245.25 11.06,246.19 C11.77,246.54 12.71,247.24 13.42,247.59 C13.59,248.00 13.83,248.81 14,249.21 C14.00,250.02 14.00,251.63 14,252.44 C12.24,255.26 9.91,260.92 8.15,263.74 C7.83,264.27 7.40,265.32 7.08,265.85 C7.08,266.81 7.08,268.73 7.08,269.69 C7.75,270.15 8.65,271.09 9.33,271.55 C8.80,273.76 8.10,278.17 7.57,280.38 C6.95,281.29 6.13,283.11 5.52,284.02 C5.08,284.36 4.50,285.04 4.07,285.38 C4.77,285.74 5.70,286.47 6.4,286.83 C5.99,287.42 5.45,288.62 5.04,289.21 C4.44,289.56 3.64,290.27 3.04,290.63 C3.34,291.22 3.73,292.41 4.03,293 C4.21,293.38 4.46,294.15 4.64,294.53 C4.02,295.12 3.18,296.29 2.56,296.88 C3.29,297.74 4.25,299.46 4.98,300.32 C5.57,301.27 6.36,303.18 6.95,304.13 C7.12,305.03 7.35,306.82 7.52,307.72 C6.81,308.69 5.85,310.64 5.14,311.61 C4.94,312.35 4.68,313.84 4.48,314.58 C4.37,315.06 4.21,316.03 4.1,316.51 C6.09,318.33 8.74,321.98 10.73,323.8 C11.38,325.84 12.26,329.90 12.91,331.94 C11.33,334.45 9.23,339.46 7.66,341.97 C7.21,342.48 6.60,343.51 6.15,344.02 C5.71,344.82 5.12,346.43 4.68,347.23 C4.62,347.92 4.53,349.29 4.47,349.97 C4.12,350.79 3.65,352.42 3.3,353.24 C3.76,354.13 4.38,355.93 4.85,356.82 C5.18,357.77 5.61,359.66 5.94,360.61 C6.42,362.50 7.05,366.26 7.53,368.15 C6.95,368.63 6.18,369.60 5.6,370.09 C6.03,370.77 6.60,372.12 7.03,372.8 C6.47,373.11 5.72,373.74 5.16,374.05 C4.58,374.73 3.81,376.10 3.23,376.78 C3.26,377.67 3.30,379.45 3.33,380.34 C4.05,380.99 5.00,382.29 5.72,382.94 C5.07,383.68 4.21,385.15 3.56,385.89 C3.76,386.19 4.04,386.77 4.24,387.07 C4.71,388.01 5.34,389.88 5.81,390.82 C6.04,391.55 6.36,393.01 6.59,393.74 C6.08,394.71 5.40,396.65 4.89,397.62 C5.73,400.25 6.85,405.50 7.69,408.12 C7.43,408.49 7.07,409.21 6.81,409.58 C6.22,410.07 5.42,411.04 4.83,411.53 C4.37,413.07 3.77,416.16 3.31,417.71 C3.77,418.56 4.39,420.25 4.85,421.1 C4.94,421.89 5.06,423.49 5.15,424.28 C5.50,424.96 5.95,426.32 6.3,427 C6.83,427.61 7.54,428.84 8.07,429.45 C7.41,429.96 6.53,430.99 5.87,431.5 C5.98,432.09 6.12,433.27 6.23,433.86 C5.55,434.86 4.66,436.86 3.98,437.86 C4.36,438.71 4.86,440.42 5.23,441.27 C5.30,442.20 5.38,444.06 5.45,444.99 C5.99,445.72 6.70,447.16 7.24,447.89 C6.51,448.34 5.55,449.23 4.82,449.68 C5.05,450.12 5.37,450.99 5.6,451.42 C6.33,452.28 7.31,454.00 8.05,454.86 C7.90,455.47 7.71,456.70 7.56,457.31 C7.65,457.79 7.77,458.74 7.86,459.22 C7.50,459.61 7.01,460.39 6.65,460.78 C6.25,461.61 5.73,463.27 5.33,464.1 C5.67,464.79 6.11,466.17 6.45,466.86 C6.23,468.56 5.95,471.94 5.73,473.64 C6.32,474.46 7.10,476.12 7.69,476.94 C7.64,477.56 7.58,478.81 7.54,479.43 C6.86,480.29 5.96,482.01 5.28,482.87 C4.56,483.69 3.60,485.35 2.88,486.17 C5.81,487.43 9.71,489.96 12.64,491.22 C13.05,491.56 13.59,492.23 14,492.56 C14.00,493.23 14.00,494.58 14,495.25 C14.00,495.72 14.00,496.65 14,497.12 C14.00,497.37 14.00,497.87 14,498.12 C14.00,498.53 14.00,499.34 14,499.75 C13.28,500.26 12.33,501.29 11.61,501.8 C12.00,502.39 12.53,503.59 12.92,504.18 C13.19,505.03 13.56,506.72 13.83,507.57 C13.88,508.28 13.95,509.71 14,510.42 C14.00,510.71 14.00,511.27 14,511.56 C14.00,512.33 14.00,513.86 14,514.63 C14.00,515.59 14.00,517.50 14,518.46 C13.30,518.91 12.36,519.81 11.66,520.26 C11.79,520.76 11.96,521.77 12.09,522.28 C12.24,524.46 12.44,528.81 12.59,530.99 C13.01,531.86 13.58,533.60 14,534.47 C13.48,535.34 12.78,537.07 12.26,537.94 C11.81,538.28 11.22,538.97 10.77,539.31 C11.26,541.49 11.92,545.84 12.42,548.02 C11.19,549.73 9.54,553.15 8.31,554.86 C8.07,555.71 7.74,557.41 7.5,558.26 C7.67,559.51 7.89,562.02 8.06,563.27 C7.42,563.91 6.56,565.20 5.92,565.84 C6.66,566.84 7.64,568.84 8.38,569.84 C8.67,570.39 9.07,571.50 9.36,572.05 C9.25,572.36 9.11,572.99 9.01,573.3 C9.45,574.04 10.05,575.52 10.49,576.26 C10.60,576.52 10.74,577.05 10.85,577.31 C10.38,577.87 9.76,578.97 9.29,579.53 C9.12,580.28 8.89,581.78 8.72,582.53 C9.21,583.20 9.87,584.53 10.36,585.2 C10.88,586.10 11.56,587.90 12.08,588.8 C12.41,589.54 12.84,591.03 13.17,591.78 C12.55,592.50 11.72,593.95 11.1,594.68 C11.46,595.28 11.94,596.49 12.3,597.09 C12.20,597.65 12.07,598.78 11.97,599.34 C11.63,599.66 11.18,600.32 10.84,600.64 C11.04,601.28 11.31,602.56 11.51,603.2 C11.99,603.65 12.64,604.54 13.12,604.99 C13.38,605.75 13.74,607.26 14,608.02 C14.00,608.57 14.00,609.67 14,610.22 C14.00,610.96 14.00,612.45 14,613.19 C11.09,615.46 7.21,620.00 4.3,622.27 C4.33,623.02 4.37,624.52 4.4,625.27 C4.89,625.95 5.55,627.30 6.04,627.98 C6.26,628.88 6.55,630.67 6.77,631.57 C6.96,632.28 7.22,633.69 7.41,634.4 C8.03,635.00 8.87,636.20 9.49,636.8 C9.70,637.15 9.99,637.84 10.2,638.19 C10.59,638.82 11.12,640.09 11.51,640.72 C9.50,642.35 6.81,645.61 4.8,647.24 C4.94,648.14 5.12,649.94 5.26,650.84 C4.68,651.66 3.90,653.30 3.32,654.12 C5.00,657.12 7.23,663.11 8.91,666.1 C8.91,666.67 8.92,667.83 8.92,668.4 C8.99,668.86 9.09,669.79 9.16,670.25 C9.33,670.87 9.57,672.10 9.74,672.72 C9.09,673.67 8.21,675.57 7.56,676.52 C8.00,677.13 8.60,678.36 9.04,678.97 C7.79,681.88 6.13,687.70 4.89,690.61 C5.59,691.43 6.53,693.09 7.23,693.91 C7.98,694.61 8.97,696.01 9.72,696.71 C9.91,697.63 10.17,699.49 10.36,700.41 C9.94,700.94 9.38,702.01 8.96,702.55 C9.43,702.87 10.04,703.51 10.51,703.83 C10.62,704.42 10.76,705.61 10.87,706.2 C10.72,706.77 10.53,707.90 10.38,708.47 C10.05,709.27 9.62,710.86 9.29,711.66 C9.21,711.92 9.11,712.45 9.03,712.71 C8.35,713.51 7.45,715.10 6.78,715.9 C7.45,716.66 8.34,718.19 9.01,718.95 C9.29,719.61 9.68,720.93 9.96,721.59 C10.06,722.30 10.19,723.70 10.29,724.41 C10.21,724.99 10.11,726.16 10.04,726.74 C10.24,727.66 10.52,729.49 10.72,730.41 C10.92,731.39 11.18,733.34 11.38,734.32 C11.32,735.17 11.25,736.88 11.19,737.73 C11.56,739.59 12.04,743.30 12.41,745.16 C12.45,745.42 12.51,745.95 12.55,746.21 C12.80,746.81 13.13,748.00 13.38,748.59 C13.57,748.98 13.81,749.77 14,750.16 C11.92,752.52 9.14,757.24 7.06,759.6 C8.73,761.25 10.97,764.56 12.64,766.21 C12.53,766.86 12.38,768.14 12.27,768.79 C12.34,769.12 12.44,769.79 12.51,770.12 C9.37,772.10 5.18,776.04 2.04,778.02 C2.07,778.66 2.11,779.94 2.14,780.58 C3.35,782.04 4.98,784.96 6.19,786.42 C5.61,786.82 4.84,787.62 4.26,788.02 C4.50,788.49 4.83,789.42 5.07,789.89 C4.70,790.73 4.20,792.41 3.83,793.25 C4.02,793.93 4.28,795.30 4.47,795.98 C4.70,796.77 5.02,798.37 5.25,799.16 C4.96,799.37 4.57,799.79 4.28,800' fill='none' stroke='%235c3d0e' stroke-width='0.7' opacity='0.5'/></svg>");
  background-repeat: repeat-y;
  background-size: 16px 200px;
  filter: drop-shadow(-3px -3px 2px rgba(0,0,0,0.15));
}

.cs-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(140,105,40,0.22);
  flex-shrink: 0;
}

.control-strip .topbar-round {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.control-strip .topbar-phase {
  font-size: 0.92rem;
}
.control-strip .topbar-phase-detail {
  font-size: 0.8rem;
}

.control-strip .turn-indicator {
  font-size: 0.78rem;
  padding: 5px 7px;
  text-align: center;
  flex-shrink: 0;
}

.cs-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-strip .phase-btn,
.control-strip .buy-phase-btn,
.control-strip .undo-btn {
  font-family: 'IM Fell English', serif;
  font-size: 0.82rem;
  padding: 7px 6px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-radius: 2px;
  width: 100%;
}

/* ── Parchment-surface color overrides (all defaults assume dark leather) ── */
.control-strip .topbar-round {
  color: var(--ink-faint);
}
.control-strip .topbar-phase,
.control-strip .topbar-phase-detail {
  color: var(--ink-dim);
}
.control-strip .topbar-phase.phase-draw,
.control-strip .topbar-phase-detail.phase-draw { color: #2a6898; }
.control-strip .topbar-phase.phase-buy,
.control-strip .topbar-phase-detail.phase-buy  { color: #8a5c10; }
.control-strip .topbar-phase.phase-main,
.control-strip .topbar-phase-detail.phase-main { color: #3a6020; }
.control-strip .topbar-phase.phase-end,
.control-strip .topbar-phase-detail.phase-end  { color: var(--ink-faint); }

.control-strip .turn-indicator {
  color: var(--ink);
  background: rgba(74,124,78,0.1);
  border-color: rgba(74,124,78,0.4);
}
.control-strip .turn-indicator.opponent-turn {
  color: var(--ink-dim);
  background: rgba(0,0,0,0.04);
  border-color: rgba(140,105,40,0.22);
}

.control-strip .phase-btn {
  color: #2d5a20;
  border-color: rgba(74,124,78,0.55);
  background: rgba(74,124,78,0.08);
}
.control-strip .phase-btn:hover { background: rgba(74,124,78,0.18); }
.control-strip .phase-btn:disabled {
  color: var(--ink-faint);
  border-color: rgba(140,105,40,0.25);
  background: transparent;
}
.control-strip .buy-phase-btn {
  color: #7a4e0a;
  border-color: rgba(160,120,40,0.5);
  background: rgba(160,120,40,0.08);
}
.control-strip .buy-phase-btn:hover { background: rgba(160,120,40,0.16); }
.control-strip .undo-btn {
  color: var(--ink-dim);
  border-color: rgba(140,105,40,0.3);
  background: transparent;
}
.control-strip .undo-btn:hover { background: rgba(0,0,0,0.06); }

/* ─── CENTER RAIL — leather sidebar ─── */
.center-rail {
  width: var(--center-rail-width);
  flex-shrink: 0;
  background:
    /* Sheen highlight — top-left specular */
    linear-gradient(160deg, rgba(255,220,140,0.055) 0%, transparent 42%),
    /* Leather cross-grain simulation */
    repeating-linear-gradient(-55deg, transparent, transparent 3px, rgba(0,0,0,0.028) 3px, rgba(0,0,0,0.028) 6px),
    repeating-linear-gradient(35deg, transparent, transparent 4px, rgba(0,0,0,0.018) 4px, rgba(0,0,0,0.018) 8px),
    /* Base leather — warm dark brown */
    linear-gradient(180deg, #2d1f0f 0%, #1e1408 40%, #251a0b 70%, #1b1107 100%);
  border-left: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  gap: 8px;
  overflow-y: auto;
  /* Book spine: gold highlight line, dark shadow edge, deep shadow onto the page */
  box-shadow:
    -1px 0 0 0 rgba(200,160,60,0.28),
    -4px 0 0 0 #100a04,
    -16px 0 28px rgba(0,0,0,0.5);
  min-height: 0;
  position: relative;
  z-index: 4;
}

.rail-topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
}

.rail-topbar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.rail-center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.rail-label {
  font-size: 0.62rem;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  text-align: center;
}

/* ── Pocket wrapper — flex column, no border of its own ── */
.deck-pocket {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  width: 98px;
  align-items: center;
}

/* Stacked paper cards peeking behind the main deck-visual */
.deck-pocket::before,
.deck-pocket::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  bottom: 40px;
  border: 1.5px solid rgba(176, 148, 80, 0.5);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
  transform-origin: bottom center;
}

.deck-pocket::before {
  background: #d9cc9a;
  transform: rotate(-3deg) translateX(-1px);
}

.deck-pocket::after {
  background: #e0d4a6;
  transform: rotate(2.2deg) translateX(1px) translateY(1px);
}

/* Hide stacked cards behind pocket when empty */
.deck-pocket:has([data-depth="empty"])::before,
.deck-pocket:has([data-depth="empty"])::after,
.deck-pocket:has([data-depth="few"])::before,
.deck-pocket:has([data-depth="few"])::after {
  display: none;
}

.deck-pocket:has([data-depth="some"])::after {
  display: none;
}

/* ── The card(s) — parchment face that sticks up from the pocket ── */
.deck-visual {
  width: 90px;
  box-sizing: border-box;
  background: var(--card-paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1.5px solid var(--card-paper-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, filter 0.15s;
  font-size: 0.75rem;
  color: var(--ink-dim);
  gap: 2px;
  position: relative;
  z-index: 1;
  margin: 0 4px;
}

#deck-visual {
  background-image: linear-gradient(rgba(20, 12, 6, 0.06), rgba(20, 12, 6, 0.06)), url('/resources/img_card_art/card_back.png');
  background-size: cover;
  background-position: top;
}

/* ── Leather pocket body — holds the label below the card(s) ── */
.deck-pocket-body {
  background:
    repeating-linear-gradient(-55deg, transparent, transparent 3px, rgba(0,0,0,0.028) 3px, rgba(0,0,0,0.028) 6px),
    repeating-linear-gradient(35deg, transparent, transparent 4px, rgba(0,0,0,0.018) 4px, rgba(0,0,0,0.018) 8px),
    linear-gradient(to bottom, #2a1c0c, #1b1107);
	border-top: 2px solid rgba(190,148,52,0.62);
	border-radius: 0 0 3px 3px;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-height: 50px;
  width: 98px;
  box-sizing: border-box;
	position: relative;
	box-shadow: -1px 0 0 0 rgba(200,160,60,0.28), -2px 0 0 0 #100a04, -2px 0 28px rgba(0,0,0,0.5);
  z-index: 2;
}

.deck-pocket-body::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  top: 0;
  border-left: 1.5px dashed rgba(190, 148, 52, 0.38);
  border-right: 1.5px dashed rgba(190, 148, 52, 0.38);
  border-bottom: 1.5px dashed rgba(190, 148, 52, 0.38);
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

.deck-visual:hover { border-color: var(--gold-dim); filter: brightness(0.97); }
.deck-visual.drop-target-valid { border-color: var(--green-bright); box-shadow: 0 0 10px rgba(106,173,110,0.3); }
.deck-visual.deck-shift { animation: deckShift var(--anim-med) var(--anim-bounce); }

.deck-label {
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  color: var(--text);
  transition: color 0.2s;
}

.deck-count { font-size: 0.7rem; color: var(--text-dim); }

/* ── Discard pocket — top card preview ── */
#discard-visual {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: visible;
  gap: 0;
  max-height: 38px;
}

.discard-top-card {
  position: relative;
  overflow: hidden;
  height: 68px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 5px 3px;
  position: relative;
  top: 0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
}

.discard-top-card > *:not(.card-art-bg) { z-index: 1; }

/* ── Discard pocket body — two-row layout ── */
.discard-pocket-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}

.deck-pocket .discard-pocket-body:hover .deck-label {
  color: var(--gold-dim);
}

.discard-pocket-body:hover .deck-label { color: var(--gold-dim); }

.deck-pocket-body .deck-count {
  font-size: 0.7rem;
  color: rgba(200, 160, 60, 0.65);
}

.card-pool-slots { display: flex; flex-direction: column; gap: 5px; }

.pool-card {
  flex-shrink: 0;
  width: 90px;
  max-width: 90px;
  height: 68px;
  border: 1.5px solid var(--card-paper-border);
  border-radius: 2px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
              opacity 0.13s ease;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.25);
}

.pool-card.card-enter {
  animation: cardEnter var(--anim-med) var(--anim-bounce);
}

.pool-card-takeable { cursor: pointer; }
.pool-card-takeable:hover {
  transform: translateY(-16px);
  border-color: var(--gold);
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  z-index: 50;
}

.pool-card-empty {
  border-style: dashed;
  border-color: var(--border);
  background: var(--surface2);
  color: var(--text-faint);
  font-size: 0.68rem;
  align-items: center;
  justify-content: center;
  cursor: default;
  box-shadow: none;
  width: 90px;
  max-width: 90px;
  height: 68px;
}

.pool-card-name {
  font-size: 0.72rem;
  color: var(--card-ink);
  font-family: 'Crimson Pro', serif;
  line-height: 1.2;
}

.pool-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pool-card-level {
  font-size: 0.62rem;
  font-family: 'Special Elite', cursive;
  color: var(--card-ink-dim);
  background: var(--card-level-bg);
  padding: 1px 4px;
  border-radius: 2px;
}

.pool-card-pts {
  font-size: 0.68rem;
  color: var(--card-points);
  font-weight: 600;
}

/* Discard pile modal card list */
.discard-modal {
  width: min(960px, 92vw);
  max-width: 960px;
}

.discard-modal-summary {
  margin-top: 8px;
  margin-bottom: 14px;
  padding-right: 28px;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.discard-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.discard-card-entry {
  background: var(--card-paper);
  border: 1.5px solid var(--card-paper-border);
  border-radius: 2px;
  padding: 13px 12px 8px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name order"
    "meta meta";
  gap: 6px 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  min-height: 62px;
}

.discard-card-biome-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 2px 2px 0 0;
  display: flex;
  overflow: hidden;
  z-index: 1;
}

.discard-card-biome-bar > span {
  flex: 1;
}

.discard-entry-name {
  grid-area: name;
  font-family: 'Crimson Pro', serif;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.25;
  min-width: 0;
}

.discard-entry-order {
  grid-area: order;
  justify-self: end;
  align-self: start;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.discard-entry-meta {
  grid-area: meta;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.discard-entry-level {
  font-family: 'Special Elite', cursive;
  font-size: 0.6rem;
  color: var(--ink-dim);
  background: rgba(160,120,50,0.18);
  padding: 1px 4px;
  border-radius: 2px;
}

.discard-entry-pts {
  font-size: 0.68rem;
  color: var(--gold-dim);
  font-weight: 600;
}

.discard-empty {
  font-style: italic;
  color: var(--text-faint);
  font-size: 0.88rem;
  padding: 12px 0;
  text-align: center;
}

/* ─── ECOLOGY COLUMN ─── */
.ecology-column {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  padding-bottom: 6px;
}

.ecology-column.drop-target-active {
  background: rgba(72,120,48,0.07);
  outline: 2px dashed var(--green);
  outline-offset: -2px;
  border-radius: 2px;
}
.ecology-column.drop-target-active .empty-card-slot {
  border-color: var(--green);
  color: var(--ink-dim);
}

.ecology-column.drop-target-valid-zone {
  outline: 2px dashed var(--green-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

.ecology-column.drop-target-invalid-zone {
  outline: 2px dashed var(--red-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

.biome-header {
  width: 100%;
  height: 34px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  color: var(--card-ink);
}

.biome-pts {
  font-size: 0.62rem;
  color: var(--card-points);
  font-weight: 600;
  margin-left: 6px;
  margin-right: 6px;
  flex-shrink: 0;
}

.biome-healthy-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-ink-dim);
  margin-top: 2px;
  opacity: 0;
}

.biome-healthy-label.is-healthy {
  opacity: 1;
}

.biome-header:hover { filter: brightness(1.1); box-shadow: 0 3px 10px rgba(0,0,0,0.25); }

/* Biome header highlighted as drop target for producers/SD */
.biome-header.prey-target {
  outline: 2px dashed var(--green);
  outline-offset: 2px;
}
.biome-header.drop-target-header {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
  filter: brightness(1.2);
}

/* Starving organism — prey card has disappeared, will be removed at end of turn */
.compact-card.starving {
  outline: 2px solid rgba(180, 40, 20, 0.8);
  outline-offset: 1px;
  background: rgba(180, 40, 20, 0.08);
}
.compact-card.starving .card-mini-name {
  color: rgba(180, 40, 20, 0.9);
}
.eco-tree-node.starving .eco-tree-node-inner {
  border-color: rgba(180, 40, 20, 0.7) !important;
  background: rgba(180, 40, 20, 0.08) !important;
}
.eco-tree-node.starving .eco-tree-node-name {
  color: rgba(180, 40, 20, 0.9);
}

/* Compact card highlighted as valid prey */
.compact-card.prey-target {
  outline: 2px dashed var(--green);
  outline-offset: 1px;
}
.compact-card.prey-drag-over {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  background: rgba(72,120,48,0.12);
}

.healthy-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--card-paper-border);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}

/* healthy state: background set inline to biome colour; just add glow */
.healthy-dot.healthy { box-shadow: 0 0 5px rgba(0,0,0,0.3); }

/* Card stack wrapper — sits at the bottom of the column, wraps content tightly */
.ecology-card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Scroll wrapper — chevrons + fade overlay */
.eco-cards-scroll-wrap {
  position: relative;
  width: 100%;
}

.eco-cards-scroll-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(232,218,184,0.88));
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.18s;
}
.eco-cards-scroll-wrap.scroll-at-bottom::after { opacity: 0; }

.eco-scroll-chevron {
  position: absolute;
  left: 50%;
  background: rgba(218,203,160,0.95);
  border: 1px solid rgba(140,105,40,0.45);
  border-radius: 10px;
  color: var(--ink-dim);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, color 0.15s;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.eco-scroll-chevron-up   { top: 0; transform: translateX(-50%) translateY(-50%); }
.eco-scroll-chevron-down { bottom: 0; transform: translateX(-50%) translateY(50%); }
.eco-scroll-chevron.visible { opacity: 1; pointer-events: auto; }
.eco-scroll-chevron:hover { color: var(--ink); background: rgba(225,210,168,1); }

/* Scrollable cards area — header + healthy label stay pinned below */
.eco-cards-scroll {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: clamp(240px, 42vh, 440px);
  overflow-y: auto;
  overflow-x: visible;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.eco-cards-scroll::-webkit-scrollbar { display: none; }

.ecology-card-stack .biome-header { margin-top: 4px; }

/* Healthy glow wraps only the card stack, not the empty space above */
.ecology-card-stack.ecology-healthy {
  box-shadow:
    0 0 0 2px var(--biome-glow),
    0 0 18px var(--biome-glow);
  border-radius: 3px;
}

/* Header picks up the same colour but more subtly */
.biome-header.biome-healthy {
  box-shadow:
    0 0 0 1px var(--biome-glow),
    0 0 10px var(--biome-glow);
}

.biome-header.biome-healthy .healthy-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 8px var(--biome-glow);
}

/* ─── PERSISTENT PLAYER EFFECTS BAR (above ecology columns) ─── */
.persistent-effects-bar {
  position: absolute;
  top: 45px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  z-index: 2;
}

.persistent-effects-drop-zone {
  min-width: 190px;
  padding: 6px 8px 8px;
  border: 1px dashed rgba(200,168,75,0.34);
  border-radius: 4px;
  background: rgba(255,248,232,0.34);
}

.persistent-effects-drop-active {
  border-color: var(--gold);
  background: rgba(200,168,75,0.12);
  box-shadow: 0 0 0 1px rgba(200,168,75,0.18), 0 6px 18px rgba(0,0,0,0.12);
}

.persistent-effects-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.persistent-effects-empty {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px dashed rgba(160,120,50,0.28);
  border-radius: 2px;
  color: var(--text-faint);
  font-size: 0.74rem;
  font-style: italic;
  background: rgba(255,255,255,0.45);
}

.persistent-effects-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-shrink: 0;
}

/* ─── ATTACHED FACTOR BADGES (compact ecology column) ─── */
.ecology-factor-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ecology-factor-badge {
  width: 160px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(140,100,40,0.028) 3px, rgba(140,100,40,0.028) 4px),
    var(--parchment);
  border: 1.5px solid var(--parchment-border);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  cursor: default;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}

.ecology-factor-badge.card-enter {
  animation: cardEnter var(--anim-med) var(--anim-bounce);
}

/* Card-like effect chips when shown at the top of the field */
.persistent-effects-bar .ecology-factor-badge {
  margin: 0;
}

.persistent-effects-bar .ecology-factor-badge::before {
  display: none;
}

.persistent-effects-bar .persistent-effect-card .card-level-badge {
  min-width: 24px;
}

.persistent-effects-bar .persistent-effect-card[data-factor-type="abiotic"] .card-level-badge {
  background: rgba(40, 70, 140, 0.18);
  color: #2a4a8c;
}

.persistent-effects-bar .persistent-effect-card[data-factor-type="biotic"] .card-level-badge {
  background: rgba(140,120,50,0.18);
  color: var(--ink-dim);
}

/* ─── FACTOR NODES IN FOOD WEB TREE ─── */
.eco-tree-node-inner-factor {
  border-style: dashed !important;
}

.eco-tree-factor-abiotic {
  background: rgba(228, 237, 252, 0.95) !important;
  border-color: rgba(40, 80, 160, 0.5) !important;
}

.eco-tree-factor-abiotic .eco-tree-node-level { color: #3a5ca0; }
.eco-tree-factor-abiotic .eco-tree-node-name  { color: #1e3870; }

.eco-tree-factor-biotic {
  background: rgba(252, 232, 228, 0.95) !important;
  border-color: rgba(160, 50, 40, 0.5) !important;
}

.eco-tree-factor-biotic .eco-tree-node-level { color: #a03030; }
.eco-tree-factor-biotic .eco-tree-node-name  { color: #6e1e18; }

/* ─── COMPACT CARD ─── */
.compact-card {
  width: 160px;
  height: 40px;
  border: 1.5px solid var(--card-paper-border);
  border-radius: 2px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
  display: flex;
  align-items: center;
  padding: 0 7px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  gap: 5px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: element;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}

.compact-card.card-enter {
  animation: cardEnter var(--anim-med) var(--anim-bounce);
}

.compact-card:hover {
  border-color: var(--ink-dim);
  background: var(--card-paper-dim);
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  z-index: 50;
}

/* Left accent bar showing biome colour on compact cards — flex container for multi-biome segments */
.compact-card-biome-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 1px 0 0 1px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.compact-card-biome-bar > span { flex: 1; }

.compact-card.highlighted   { border-color: var(--green); box-shadow: 0 0 8px rgba(72,120,48,0.3); }
.compact-card.eaten-by-highlighted { border-color: var(--red-bright); box-shadow: 0 0 8px rgba(192,80,80,0.3); }
.compact-card.dragging { visibility: hidden; }

.card-level-badge {
  font-size: 0.62rem;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--card-level-bg);
  color: var(--card-ink-dim);
  font-family: 'Special Elite', cursive;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
}

.card-mini-name {
  font-size: 0.72rem;
  color: var(--card-ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Crimson Pro', serif;
}

.card-pts { font-size: 0.68rem; color: var(--card-points); flex-shrink: 0; font-weight: 600; }

.card-pts-boosted {
  color: #4f8a54;
  text-shadow: 0 0 8px rgba(110, 185, 116, 0.22);
}

.empty-card-slot {
  width: 100%;
  height: 38px;
  border: 1.5px dashed var(--card-paper-border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--card-ink-faint);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Special Elite', cursive;
  letter-spacing: 0.05em;
}

.empty-card-slot:hover { border-color: var(--card-ink-dim); color: var(--card-ink-dim); }
.empty-card-slot.valid-drop { border-color: var(--green); color: var(--green); background: rgba(72,120,48,0.06); }
.empty-card-slot.invalid-drop { border-color: var(--red-bright); color: var(--red-bright); }

.add-ecology-btn {
  flex-shrink: 0;
  width: 172px;
  border: 2px dashed var(--card-paper-border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--card-ink-faint);
  font-size: 0.7rem;
  height: 54px;
  align-self: flex-end;
}

.add-ecology-btn:hover          { border-color: var(--gold); color: var(--card-ink-dim); }
.add-ecology-btn.add-ecology-highlighted { border-color: var(--gold); color: var(--card-ink-dim); background: rgba(180,140,20,0.08); }
.add-ecology-btn.add-ecology-drag-over  { border-color: var(--green); color: var(--green); background: rgba(72,120,48,0.08); border-style: solid; }
.add-ecology-btn-icon { font-size: 1.4rem; line-height: 1; }

/* ─── HAND CARDS ─── */
.hand-card {
  flex-shrink: 0;
  width: 90px;
  max-width: 90px;
  height: 68px;
  border: 1.5px solid var(--card-paper-border);
  border-radius: 2px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
  cursor: pointer;
  /* List properties explicitly so z-index never transitions (instant stacking) */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
              opacity 0.13s ease, max-width 0.13s ease,
              padding-left 0.13s ease, padding-right 0.13s ease, margin-left 0.13s ease;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.25);
  /* Overlap set dynamically by JS in renderHand() */
  margin-left: 0;
}

.hand-card.card-enter {
  animation: cardEnter var(--anim-med) var(--anim-bounce);
}

.hand-card.hand-card-arrival-target,
.compact-card.hand-card-arrival-target {
  opacity: 0;
}

.compact-card.buy-tray-arrival-target {
  opacity: 0;
}

html.buy-tray-animating,
body.buy-tray-animating {
  overflow: hidden !important;
}

.hand-arrival-ghost {
  position: fixed;
  margin: 0;
  pointer-events: none;
  z-index: 1200;
  transform-origin: center center;
  will-change: transform, opacity;
  box-shadow: 0 18px 34px rgba(0,0,0,0.3);
}

.buy-tray-arrival-ghost {
  z-index: 1400;
  box-shadow:
    0 0 0 1px rgba(255, 226, 154, 0.75),
    0 18px 34px rgba(0,0,0,0.34);
}

.field-arrival-target {
  opacity: 0;
}

.field-arrival-ghost {
  position: fixed;
  margin: 0;
  pointer-events: none;
  z-index: 1190;
  transform-origin: center center;
  will-change: transform, opacity;
  box-shadow: 0 16px 30px rgba(0,0,0,0.26);
}

/* Selected card stays risen and gold */
.hand-card.selected-card {
  border-color: var(--gold);
  transform: translateY(-14px);
  z-index: 45;
  box-shadow: 0 12px 28px rgba(180,130,20,0.35);
}

/* Hovering a specific card: rise above all others (defined after .selected-card so it wins) */
.hand-card:hover {
  border-color: var(--gold);
  transform: translateY(-16px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  z-index: 50;
}

.hand-card.pin-hover {
  border-color: var(--gold);
  transform: translateY(-16px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  z-index: 50;
}

.hand-area.hand-top .hand-card:hover { transform: translateY(6px); }
.hand-area.hand-top .hand-card.pin-hover { transform: translateY(6px); }

/* Art watermark shared by hand cards, compact cards, and eco-tree nodes */
.card-art-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  border-radius: 1px;
}
/* Keep all other card children above the art */
.hand-card > *:not(.card-art-bg),
.compact-card > *:not(.card-art-bg),
.persistent-effect-card > *:not(.card-art-bg),
.eco-tree-node-inner > *:not(.card-art-bg),
.biome-option > *:not(.card-art-bg),
.factor-option > *:not(.card-art-bg),
.pool-card > *:not(.card-art-bg),
.biome-header > *:not(.card-art-bg) {
  z-index: 1;
}

.hand-card.dragging {
  max-width: 10px;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0 !important;
  transform: none !important;
  pointer-events: none;
}

.hand-card.hand-card-traded {
  display: none;
  }

.hand-card-name {
  font-size: 0.72rem;
  color: var(--card-ink);
  font-family: 'Crimson Pro', serif;
  line-height: 1.2;
}

.hand-card-meta { display: flex; justify-content: space-between; align-items: flex-end; }

.hand-card-level {
  font-size: 0.62rem;
  font-family: 'Special Elite', cursive;
  color: var(--card-ink-dim);
  background: var(--card-level-bg);
  padding: 1px 4px;
  border-radius: 2px;
}

.hand-card-pts { font-size: 0.68rem; color: var(--card-points); font-weight: 600; }

.hand-card.factor-card { border-color: rgba(60,100,40,0.5); }
.hand-card.biome-card  { border-color: rgba(180,140,20,0.55); }

/* Biome colour header strip on hand cards — flex container for multi-biome segments */
.hand-card-biome-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  display: flex;
}
.hand-card-biome-bar > span { flex: 1; }

/* Playable highlight (main phase, pref enabled) */
.hand-card.playable-card {
  border-color: rgba(80,160,80,0.65);
  box-shadow: 0 0 0 1px rgba(80,160,80,0.3) inset;
}
.hand-card.playable-card.selected-card { border-color: var(--gold); }

/* "New this turn" pip — floats above the card so overlap doesn't hide it */
.new-card-pip {
  position: absolute;
  bottom: calc(100% + 3px);
  /* left: 50%; */
  /* transform: translateX(-50%); */
  font-size: 0.5rem;
  font-family: 'Special Elite', cursive;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: rgba(80,160,80,0.88);
  border-radius: 2px;
  padding: 1px 4px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 100;
}

.hand-pin-dot {
  position: absolute;
  bottom: calc(100% - 1px);
  right: 0;
  min-width: 0;
  height: auto;
  border: none;
  border-radius: 2px;
  background: rgba(55, 95, 150, 0.88);
  color: rgba(255, 244, 214, 0.96);
  font-size: 0.5rem;
  font-family: 'Special Elite', cursive;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  padding: 1px 4px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  transition: transform 0.12s, background 0.15s;
}

.hand-pin-dot:hover {
  background: rgba(72, 122, 192, 0.94);
  transform: scale(1.08);
}

/* ─── CARD TOOLTIP ─── */
.card-tooltip {
  position: fixed;
  z-index: 1000;
  width: 220px;
  background: var(--surface);
  border: 1.5px solid var(--border-light);
  border-radius: 5px;
  padding: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  overflow: hidden;
}

/* Full-bleed art banner at top of tooltip */
.tooltip-art {
  display: none;
  width: calc(100% + 28px);
  height: fit-content;
  object-fit: cover;
  object-position: center center;
  margin: -14px -14px 12px -14px;
  border-radius: 4px 4px 0 0;
}
.tooltip-art.loaded { display: block; }

.card-tooltip.visible { opacity: 1; }

.tooltip-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }

.tooltip-name { font-family: 'IM Fell English', serif; font-size: 1rem; color: var(--text); line-height: 1.2; }
.tooltip-pts  { font-size: 1rem; color: var(--gold); font-weight: 600; flex-shrink: 0; }

.tooltip-level {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 8px;
}

.tooltip-biomes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.tooltip-biome-tag { font-size: 0.68rem; padding: 2px 6px; border-radius: 2px; color: white; }

.tooltip-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tooltip-section-label { font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
.tooltip-section-content { font-size: 0.82rem; color: var(--text-dim); font-style: italic; line-height: 1.4; }

.tooltip-trophic-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.trophic-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Special Elite', cursive;
  border: 1.5px solid rgba(160,160,160,0.3);
  color: rgba(160,160,160,0.4);
  background: transparent;
  letter-spacing: 0.02em;
}

.trophic-chip.filled {
  /* background, borderColor, color are set inline via biome colour */
  font-weight: 700;
}


/* ─── BIOME TREE MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 28px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-overlay-journal {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  padding: 20px;
}

.modal-overlay-journal .modal {
  pointer-events: all;
}

.modal-journal {
  background:
    linear-gradient(180deg, rgba(52,37,21,0.96), rgba(35,24,13,0.98)),
    var(--surface);
  border: 1px solid rgba(180, 136, 54, 0.55);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.62),
    inset 0 0 0 1px rgba(255,221,151,0.05);
}

.modal-title { font-family: 'IM Fell English', serif; font-size: 1.6rem; color: var(--gold); margin-bottom: 6px; }

.modal-close-btn {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s;
}
.modal-close-btn:hover { color: var(--text); }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 28px; height: 28px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}

.modal-close:hover { border-color: var(--border-light); color: var(--text); }

/* ─── Settings Modal ─── */
.settings-pref-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.settings-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.settings-pref-row:hover { background: var(--surface2); }

.settings-pref-label {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--text);
}

.settings-pref-row-volume {
  cursor: default;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface3);
}

.settings-pref-row-theme {
  cursor: default;
  align-items: stretch;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--surface3);
}

.settings-pref-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-theme-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.settings-theme-option input[type="radio"] {
  accent-color: var(--gold);
}

.settings-theme-card {
  position: relative;
  min-height: 88px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.settings-theme-option:hover .settings-theme-card {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.settings-theme-option input[type="radio"]:checked + .settings-theme-card {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,160,32,0.2), 0 10px 22px rgba(0,0,0,0.24);
}

.settings-theme-card-parchment {
  border-color: var(--parchment-border);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(140,100,40,0.032) 3px, rgba(140,100,40,0.032) 4px),
    var(--parchment);
}

.settings-theme-card-paper {
  border-color: #b7b4ad;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(232,236,242,0.44)),
    repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(118,124,136,0.03) 3px, rgba(118,124,136,0.03) 4px),
    #f8f7f2;
}

.settings-theme-biome-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--marine), var(--temperate), var(--desert));
}

.settings-theme-name {
  font-size: 0.82rem;
  line-height: 1.2;
  font-family: 'Crimson Pro', serif;
  color: var(--ink);
}

.settings-theme-card-paper .settings-theme-name {
  color: #20242a;
}

.settings-theme-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.settings-theme-level {
  font-size: 0.62rem;
  font-family: 'Special Elite', cursive;
  color: var(--ink-dim);
  background: rgba(160,120,50,0.18);
  padding: 1px 4px;
  border-radius: 2px;
}

.settings-theme-card-paper .settings-theme-level {
  color: #58616d;
  background: rgba(105,118,138,0.14);
}

.settings-theme-pts {
  font-size: 0.68rem;
  color: var(--gold-dim);
  font-weight: 600;
}

.settings-theme-card-paper .settings-theme-pts {
  color: #7e6130;
}

.sfx-volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sfx-volume-control input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
}

.mute-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mute-btn:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.mute-btn.active {
  background: rgba(180, 140, 60, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.sfx-volume-val {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-dim);
  min-width: 36px;
  text-align: right;
}

.settings-pref-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── Producer / Decomposer Choice Modal ─── */
.psd-choice-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

.psd-choice-btn {
  font-size: 0.95rem;
  padding: 10px 22px;
}

.psd-choice-cancel {
  display: block;
  margin: 14px auto 0;
}

/* ─── ECOLOGY FOOD WEB TREE (inline, replaces ecology columns) ─── */

.eco-tree-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.eco-tree-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(to bottom, var(--surface2), var(--surface));
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.eco-tree-panel-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.eco-tree-title {
  font-family: 'IM Fell English', serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.eco-tree-tab-row {
  display: flex;
  align-items: flex-end;
  padding: 10px 14px 0;
  gap: 3px;
  background: var(--bg);
  flex-shrink: 0;
}

.eco-tree-tab-row .eco-tree-close-btn {
  margin-left: auto;
  margin-bottom: 2px;
  align-self: center;
}

.eco-tree-tab {
  border: 1px solid rgba(176,140,76,0.35);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom, rgba(50,34,14,0.5), rgba(35,22,6,0.65));
  color: var(--text-dim);
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  padding: 5px 16px 7px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  text-transform: uppercase;
  position: relative;
}

.eco-tree-tab:hover {
  color: var(--text);
  border-color: rgba(200,160,60,0.55);
  background: linear-gradient(to bottom, rgba(65,44,16,0.55), rgba(45,29,8,0.68));
}

.eco-tree-tab.active {
  background: linear-gradient(to bottom, var(--surface3), var(--surface2));
  border-color: rgba(176,140,76,0.65);
  padding-top: 10px;
  z-index: 1;
}

.eco-tree-close-btn {
	font-family: 'Special Elite', cursive;
	font-size: 0.72rem;
	background: linear-gradient(to top, var(--bg), var(--surface));
	border: 1px solid var(--border);
	color: var(--text-dim);
	padding: 4px 12px;
	cursor: pointer;
	border-radius: 3px;
	letter-spacing: 0.05em;
	transition: all 0.15s;
}
.eco-tree-close-btn:hover { border-color: var(--gold-dim); color: var(--text); }

.eco-tree-scroll {
  flex: 1;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Same parchment as the ecology columns */
  background-color: var(--parchment);
  background-image:
    linear-gradient(rgba(160,120,50,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,120,50,0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 0% 100%, rgba(110,80,20,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, rgba(50,80,20,0.08) 0%, transparent 45%);
  background-size: 36px 36px, 36px 36px, auto, auto;
}

/* The tree canvas sits below the biome info header */
.eco-tree-scroll > .eco-tree-area {
  padding: 20px 20px 56px 100px;
  box-sizing: content-box;
}

/* ─── Biome details header in the food-web tree view ─── */
.eco-biome-info {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 28px 14px;
  border-bottom: 1px solid;          /* colour set inline */
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px 22px;
  align-items: start;
}

.eco-biome-info-main {
  min-width: 0;
}

.eco-biome-info-name {
  font-family: 'IM Fell English', serif;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.15;
  margin-bottom: 0;
  /* colour set inline */
}

.eco-biome-info-factors {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
}

.eco-biome-info-factor-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.eco-biome-info-factor-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.eco-biome-info-factors .tree-biome-factor-card {
  width: 148px;
}

.eco-biome-info-pts {
  font-size: 0.78rem;
  color: var(--gold-dim);
  font-weight: 600;
  margin-bottom: 6px;
}

.eco-biome-info-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}

.eco-biome-healthy-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  border: 1px solid rgba(120, 160, 90, 0.5);
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 4px;
}

.eco-biome-info-bonus {
  font-family: 'Crimson Pro', serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.eco-biome-info-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-faint);
  line-height: 1.45;
}

/* The absolutely-positioned canvas; sized to content */
.eco-tree-area {
  position: relative;
  flex-shrink: 0;
}

/* Individual card node */
.eco-tree-node {
  position: absolute;
  box-sizing: border-box;
}

.eco-tree-node-inner {
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--card-paper-border);
  border-radius: 3px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  position: relative;
  overflow: hidden;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1);
}

/* Stronger healthy state on food web biome node */
.eco-tree-node-biome.eco-healthy .eco-tree-node-inner {
  box-shadow:
    0 0 0 2px rgba(120, 160, 90, 0.4),
    0 0 14px rgba(120, 160, 90, 0.35);
}

.eco-tree-node-inner:hover {
  border-color: var(--card-ink-dim);
  box-shadow: 0 5px 14px rgba(0,0,0,0.24);
}

/* Biome root node */
.eco-tree-node-biome .eco-tree-node-inner {
  font-family: 'Special Elite', cursive;
  letter-spacing: 0.05em;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper-dim);
}

.eco-tree-node-level {
  font-family: 'Special Elite', cursive;
  font-size: 0.56rem;
  color: var(--card-ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.eco-tree-node-name {
  font-family: 'Crimson Pro', serif;
  font-size: 0.88rem;
  color: var(--card-ink);
  text-align: center;
  line-height: 1.2;
  font-weight: 400;
}

.eco-tree-node-pts {
  font-size: 0.65rem;
  color: var(--card-points);
  line-height: 1;
  font-weight: 600;
}

.eco-tree-node-pts-boosted {
  color: #4f8a54;
  text-shadow: 0 0 8px rgba(110, 185, 116, 0.22);
}

/* Tree node interaction states */
.eco-tree-node.eco-tree-prey-target .eco-tree-node-inner {
  border-color: var(--green);
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(72,120,48,0.25), 0 3px 8px rgba(0,0,0,0.18);
  background: rgba(72,120,48,0.08);
}

.eco-tree-node.eco-tree-drag-over .eco-tree-node-inner {
  border-color: var(--green);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(72,120,48,0.35), 0 4px 12px rgba(0,0,0,0.2);
  background: rgba(72,120,48,0.14);
}

.eco-tree-node.eco-tree-dragging {
  opacity: 0.4;
}

/* Edge hover highlighting */
.eco-tree-area.eco-tree-has-hover path {
  opacity: 0.1;
  transition: opacity 0.12s;
}
.eco-tree-area.eco-tree-has-hover path.eco-edge-hi {
  opacity: 1;
  stroke-width: 2.6px;
}
/* Long-range routed edges are dashed and slightly dimmer at rest */
.eco-tree-area path[stroke-dasharray] {
  opacity: 0.6;
}
.eco-tree-area.eco-tree-has-hover path[stroke-dasharray].eco-edge-hi {
  opacity: 0.9;
}

/* Column header labels */
.eco-tree-col-label {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Special Elite', cursive;
  font-size: 0.6rem;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Biome picker */
.biome-picker-options { display: flex; flex-direction: column; gap: 10px; }

.biome-picker-option {
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.biome-picker-option:hover { border-color: var(--gold-dim); background: var(--surface2); }
.biome-picker-option.selected { border-color: var(--gold); background: rgba(200,168,75,0.08); }

.biome-picker-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.biome-picker-name { font-family: 'IM Fell English', serif; font-size: 1rem; color: var(--text); }
.biome-picker-bonus { font-size: 0.78rem; color: var(--text-dim); font-style: italic; margin-top: 2px; }

/* Factor target list */
.factor-target-list { display: flex; flex-direction: column; gap: 8px; }

.factor-target-option {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.9rem;
}

.factor-target-option:hover { border-color: var(--gold-dim); background: var(--surface2); }
.factor-target-option.selected { border-color: var(--gold); background: rgba(200,168,75,0.07); }

/* ─── BUY CARD MODAL ─── */
.buy-modal-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 10px 0 4px;
}
.buy-modal-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}
#buy-card-modal .modal {
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 48px));
  overflow: hidden;
}
.buy-hand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.buy-hand-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}
.buy-hand-card:hover { border-color: var(--gold-dim); background: var(--surface2); }
.buy-hand-card.buy-card-selected { border-color: var(--gold); background: rgba(200,168,75,0.1); }
.buy-card-name { flex: 1; }
.buy-card-level { font-size: 0.75rem; color: var(--text-dim); }
.buy-selected-list .buy-hand-card {
  width: 100%;
  height: 42px;
  padding: 0 28px 0 7px;
  border-width: 1.5px;
  border-color: var(--card-paper-border);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
  cursor: default;
  gap: 5px;
}
.buy-selected-list .buy-hand-card:hover {
  border-color: var(--card-ink-dim);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper-dim);
}
.buy-selected-list .buy-hand-card.buy-card-selected {
  border-color: var(--gold);
  background:
    linear-gradient(0deg, rgba(200,168,75,0.08), rgba(200,168,75,0.08)),
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper);
}
.buy-drop-zone {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  max-height: 320px;
  border: 1px dashed rgba(205, 171, 93, 0.55);
  border-radius: 6px;
  background: rgba(255, 244, 214, 0.05);
  padding: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.buy-drop-zone.drag-over {
  border-color: var(--gold);
  background: rgba(200,168,75,0.1);
  box-shadow: 0 0 0 1px rgba(200,168,75,0.2), inset 0 0 14px rgba(200,168,75,0.08);
}
.buy-drop-hint {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  padding: 22px 12px;
}
.buy-selected-list {
  flex: 1 1 auto;
  margin-bottom: 0;
  max-height: 280px;
  overflow-y: auto;
}
.buy-selected-list:empty {
  display: none;
}
.buy-remove-card {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--card-ink-faint);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.buy-remove-card:hover {
  color: var(--red-bright);
}
.hand-card.buy-discard-picked {
  display: none;
  pointer-events: none;
}
.buy-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buy-selected-count {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.choice-selected-count {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* End phase prompt — no backdrop, floats above the hand so the field stays visible */
#end-phase-prompt.open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 160px;
}
#end-phase-prompt .modal {
  pointer-events: all;
  max-width: 320px;
  text-align: center;
  border-color: var(--border-light);
  box-shadow: 0 8px 36px rgba(0,0,0,0.7);
}
#end-phase-prompt .buy-modal-desc {
  margin-bottom: 16px;
  color: var(--text-dim);
}
#end-phase-prompt .buy-prompt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.end-phase-keep-btn {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  padding: 10px 22px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(55,105,60,0.3);
  border: 1px solid rgba(80,150,85,0.55);
  color: var(--text);
  transition: background 0.15s, transform 0.12s;
}
.end-phase-keep-btn:hover {
  background: rgba(55,105,60,0.5);
  transform: translateY(-1px);
}

.end-phase-end-btn {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  padding: 10px 22px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(130,45,45,0.25);
  border: 1px solid rgba(170,65,65,0.5);
  color: #cc8080;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.end-phase-end-btn:hover {
  background: rgba(130,45,45,0.45);
  color: #dda0a0;
  transform: translateY(-1px);
}

.end-phase-timer-bg {
  width: 100%;
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}

.end-phase-timer-bar {
  height: 100%;
  width: 100%;
  background: var(--gold);
  border-radius: 4px;
  transform-origin: left center;
}

/* Buy phase prompt */
#buy-phase-prompt {
  pointer-events: none;
}
#buy-phase-prompt .modal {
  max-width: 340px;
  text-align: center;
  pointer-events: all;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
#buy-phase-prompt .buy-modal-desc {
  margin-bottom: 20px;
}
#buy-phase-prompt .buy-prompt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
#buy-phase-prompt .buy-prompt-skip {
  background: #666;
}
#buy-phase-prompt .buy-prompt-skip:hover {
  background: #888;
}

/* ─── SELECTION INFO BAR ─── */
.selection-info {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(200,168,75,0.12);
  border-top: 1px solid var(--gold-dim);
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--gold);
  z-index: 300;
  display: none;
  align-items: center;
  gap: 12px;
}

.selection-info.visible { display: flex; }

/* Choice modal — transparent overlay so players can inspect the field while choosing */
#choice-modal {
  pointer-events: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
#choice-modal .modal {
  pointer-events: all;
  box-shadow: 0 4px 32px rgba(0,0,0,0.75);
}

.cancel-btn {
  background: none;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
}

.cancel-btn:hover { background: rgba(200,168,75,0.1); }

/* ─── GAME LOG PANEL ─── */
/* ─── GAME LOG PANEL ─── */
.log-panel {
  position: absolute;
  top: 0; right: var(--center-rail-width);
  z-index: 2;
  width: 246px;           /* 320px ÷ 1.3 — appears as ~320px after scale */
  /* 90px = hand area in #game-screen coords (90 × 1.3 ≈ 117px screen) */
  height: calc(100% - 90px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 4px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(246px);
  transform-origin: top right;
  pointer-events: none;
  box-shadow: -10px 0 24px rgba(0,0,0,0.28);
  transition: transform 0.24s cubic-bezier(0.16, 0.78, 0.24, 1);
  will-change: transform;
}

.log-panel.open,
.log-panel.closing {
  display: flex;
}

.log-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

.log-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'IM Fell English', serif;
  font-size: 0.95rem;
  color: var(--gold);
  flex-shrink: 0;
}

.log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 190px;
  display: flex;
  flex-direction: column;
}

.log-empty {
  padding: 20px 14px;
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
}

/* Turn group */
.log-turn-group {
  border-bottom: 1px solid var(--border);
}
.log-turn-group:last-child { border-bottom: none; }

.log-turn-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 4px;
  background: var(--surface2);
  position: sticky;
  top: 0;
  z-index: 1;
}

.log-turn-num {
  font-size: 0.68rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  flex-shrink: 0;
}

.log-turn-player {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}
.log-turn-player[data-pidx="0"] { color: var(--gold); }
.log-turn-player[data-pidx="1"] { color: #5ba8a8; }
.log-turn-player[data-pidx="2"] { color: #c87090; }
.log-turn-player[data-pidx="3"] { color: #9090d8; }

/* Entries within a turn group */
.log-turn-entries {
  padding: 2px 0 5px;
}

.log-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 12px 2px 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.log-action-icon {
  flex-shrink: 0;
  width: 15px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-faint);
}

.log-entry-detail { flex: 1; }

/* Action-specific accents */
.log-action-ecology_died { color: var(--text); }
.log-action-ecology_died .log-action-icon { color: var(--red); }
.log-action-game_start   { color: var(--text); }
.log-action-game_start   .log-action-icon { color: var(--green); }
.log-action-trade_complete .log-action-icon { color: var(--gold); }
.log-action-ecology_pruned    .log-action-icon { color: #e08050; }
.log-action-ecology_destroyed { color: var(--text); }
.log-action-ecology_destroyed .log-action-icon { color: var(--red); }
.log-action-end_turn     { opacity: 0.5; }
.log-action-draw_deck    { opacity: 0.6; }
.log-action-draw_instead { opacity: 0.6; }

/* Card name references */
.log-card-ref {
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px dotted var(--text-dim);
  transition: color 0.12s, border-color 0.12s;
}
.log-card-ref:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.log-card-name {
  font-style: normal;
  color: var(--text);
}

/* ─── NOTIFICATIONS ─── */
.notif-stack {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 400;
  pointer-events: none;
}

.notif {
  background: var(--surface);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 10px 20px;
  font-family: 'IM Fell English', serif;
  color: var(--gold);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  max-width: 400px;
  white-space: normal;
  word-break: break-word;
}

.notif.show {
  opacity: 1;
  animation: notifIn var(--anim-med) var(--anim-bounce);
}
.notif.notif-error { border-color: var(--red); color: var(--red-bright); }

/* ─── YOUR TURN BANNER ─── */
@keyframes yourTurnIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  35%  { transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

.your-turn-banner {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  pointer-events: none;
  display: none;
  will-change: transform, opacity;
}

.your-turn-banner.show {
  display: block;
  animation: yourTurnIn 1.8s ease forwards;
}

.your-turn-text {
  font-family: 'IM Fell English', serif;
  font-size: 3.2rem;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(200,168,75,0.6), 0 2px 8px rgba(0,0,0,0.9);
  white-space: nowrap;
  letter-spacing: 0.06em;
  border: 2px solid var(--gold-dim);
  background: rgba(10, 10, 10, 0.82);
  padding: 18px 48px;
  border-radius: 4px;
}

/* ─── TRADE MODAL ─── */
/* Trade floats at top-centre without blocking the game or the hand */
#trade-modal {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 52px;
}

#trade-modal .trade-modal-inner {
  pointer-events: auto;
}

.trade-modal-inner {
  max-width: 720px;
  width: 95vw;
  max-height: 55vh;
  overflow-y: auto;
}

.trade-modal-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 16px;
}

.trade-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trade-side-label {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

.trade-drop-zone {
  min-height: 100px;
  border: 1.5px dashed var(--parchment-border);
  border-radius: 3px;
  background: rgba(238,221,184,0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 6px;
  gap: 5px;
  transition: border-color 0.15s, background 0.15s;
}

.trade-drop-zone.drag-over {
  border-color: var(--gold);
  background: rgba(212,160,32,0.08);
}

.trade-drop-zone.confirmed {
  border-color: var(--green);
  background: rgba(72,120,48,0.06);
}

.trade-drop-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-style: italic;
  pointer-events: none;
  padding: 12px 8px;
  text-align: center;
}

/* Trade offer cards use the same compact-card treatment as the field */
.trade-chip {
  width: 100%;
  height: 42px;
  padding: 0 28px 0 7px;
  cursor: default;
}
.trade-chip:hover {
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--card-stripe) 3px, var(--card-stripe) 4px),
    var(--card-paper-dim);
}

.trade-chip-remove {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--card-ink-faint);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.trade-chip-remove:hover { color: var(--red-bright); }

.trade-side-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* mini draggable hand cards inside trade modal */
.trade-hand-chip {
  border: 1.5px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.78rem;
  cursor: grab;
  background: var(--surface2);
  font-family: 'Crimson Pro', serif;
  color: var(--text);
  user-select: none;
  transition: border-color 0.12s;
}
.trade-hand-chip:hover { border-color: var(--gold-dim); }
.trade-hand-chip.in-offer { opacity: 0.4; cursor: not-allowed; }

.trade-divider {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--border-light);
  padding-top: 28px;
}

.trade-side-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.trade-confirm-btn {
  background: rgba(74,124,78,0.2);
  border: 1px solid var(--green);
  color: var(--green-bright);
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  padding: 6px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.trade-confirm-btn:hover { background: rgba(74,124,78,0.35); }

.trade-unconfirm-btn {
  background: rgba(139,58,58,0.15);
  border: 1px solid var(--red);
  color: var(--red-bright);
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  padding: 6px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.trade-unconfirm-btn:hover { background: rgba(139,58,58,0.3); }

.trade-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.trade-status {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
}

.trade-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.trade-cancel-btn:hover { border-color: var(--red); color: var(--red-bright); }

.trade-btn {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.trade-btn:hover { background: rgba(200,168,75,0.1); }


/* ─── DICE BANNER ─── */
.dice-banner {
  position: fixed;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  z-index: 450;
  background: var(--surface);
  border: 1.5px solid var(--gold-dim);
  border-radius: 5px;
  padding: 12px 24px;
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  color: var(--gold);
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  pointer-events: none;
  animation: fadeInOut 4s ease forwards;
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.disconn-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(139,58,58,0.9);
  color: var(--text);
  text-align: center;
  padding: 8px;
  font-size: 0.9rem;
  z-index: 600;
  border-bottom: 1px solid var(--red-bright);
}

/* ─── GAME OVER SCREEN ─── */
.gameover-scores {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0;
}

.gameover-score-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 28px;
  text-align: center;
  min-width: 160px;
}

.gameover-score-card.winner { border-color: var(--gold); box-shadow: 0 0 20px rgba(200,168,75,0.2); }
.gameover-score-name { font-family: 'IM Fell English', serif; font-size: 1.1rem; color: var(--gold); margin-bottom: 8px; }
.gameover-score-vp { font-size: 2rem; color: var(--text); font-weight: 600; }
.gameover-score-label { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }

.gameover-ecologies {
  font-size: 0.9rem;
  color: var(--text-dim);
  max-width: 600px;
  text-align: center;
  line-height: 1.6;
}

.gameover-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
}

.gameover-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  padding: 6px 20px;
  transition: color 0.15s, border-color 0.15s;
}

.gameover-tab:hover { color: var(--text); border-color: var(--border-light); }
.gameover-tab.active { color: var(--gold); border-color: var(--gold); border-bottom-color: transparent; }

.gameover-tab-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameover-stats-table {
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 20px 0 8px;
  width: 100%;
  max-width: 560px;
}

.gameover-stats-table th,
.gameover-stats-table td {
  border: 1px solid var(--border);
  padding: 7px 14px;
  text-align: center;
}

.gameover-stats-table th {
  background: var(--surface);
  color: var(--text-dim);
  font-family: 'IM Fell English', serif;
  font-weight: normal;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gameover-stats-table td:first-child { text-align: left; font-weight: 600; }

.gameover-charts-row {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 860px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.gameover-chart-wrap {
  flex: 1 1 360px;
  min-width: 0;
}

.gameover-chart-title {
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.04em;
}

.gameover-chart {
  width: 100%;
  height: 180px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}

.gameover-ecology-breakdown {
  width: 100%;
  max-width: 860px;
  margin-top: 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.gameover-eco-player {
  flex: 1 1 260px;
  min-width: 0;
}

.gameover-eco-player-name {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.gameover-eco-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}

.gameover-eco-table th,
.gameover-eco-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: center;
}

.gameover-eco-table th {
  background: var(--surface);
  color: var(--text-dim);
  font-weight: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gameover-eco-table td:first-child { text-align: left; }
.gameover-eco-table tr.eco-total td { color: var(--text-dim); font-style: italic; border-top: 1px solid var(--border-light); }
.gameover-eco-table tr.eco-factor-row td { border-top: none; font-size: 0.78rem; background: rgba(255,255,255,0.02); }

.gameover-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.gameover-newgame-btn {
  background: transparent;
  border-color: var(--border-light);
  color: var(--text-dim);
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ─── REPLAY SCREEN ──────────────────────────────────────────────────────── */

#replay-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Crimson Pro', serif;
}

/* ── List view ── */

.replay-list-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 32px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface2), var(--bg));
}

.replay-list-title {
  font-family: 'IM Fell English', serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.replay-back-btn {
  font-family: 'Special Elite', cursive;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.replay-back-btn:hover { border-color: var(--gold-dim); color: var(--text); }

.replay-file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 32px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  flex: 1;
}

.replay-card {
  background: linear-gradient(to bottom, var(--surface2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}
.replay-card:hover { border-color: var(--gold-dim); }

.replay-card-room {
  font-family: 'Special Elite', cursive;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.replay-card-players {
  font-family: 'IM Fell English', serif;
  font-size: 1.1rem;
  color: var(--text);
}

.replay-card-meta {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.replay-open-btn {
  align-self: flex-start;
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, var(--surface3), var(--surface2));
  border: 1px solid rgba(176,140,76,0.5);
  color: var(--gold);
  padding: 5px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.replay-open-btn:hover { border-color: var(--gold); background: linear-gradient(to bottom, rgba(176,140,76,0.22), rgba(176,140,76,0.1)); }

.replay-loading, .replay-empty {
  color: var(--text-dim);
  font-style: italic;
  padding: 32px 0;
  text-align: center;
}

/* ── Viewer view ── */

#replay-viewer-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.replay-viewer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface2), var(--bg));
  flex-shrink: 0;
}

.replay-viewer-title {
  font-family: 'Special Elite', cursive;
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  color: var(--gold);
  text-transform: uppercase;
}

.replay-viewer-players {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  color: var(--text-dim);
  margin-left: auto;
}

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

/* Turn list (left panel) */

.replay-round-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 8px 6px;
  background: var(--surface);
}

.replay-round-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.12s;
  width: 100%;
}
.replay-round-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
.replay-round-btn.active { background: var(--surface2); border-color: rgba(176,140,76,0.6); color: var(--text); }
.replay-round-btn.active .replay-round-label em { color: var(--gold); }

.replay-round-label { font-size: 0.88rem; }
.replay-round-label em { font-style: normal; }
.replay-round-score { font-size: 0.72rem; color: var(--text-faint); }

/* Action panel (right panel) */

.replay-action-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.replay-panel-heading {
  font-family: 'IM Fell English', serif;
  font-size: 1.1rem;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.replay-panel-state {
  display: flex;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--text-faint);
  font-style: italic;
}

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

.replay-action-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid transparent;
  background: var(--surface);
  font-size: 0.92rem;
}

.replay-action-verb {
  font-family: 'Special Elite', cursive;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
  min-width: 90px;
}

.replay-action-detail { color: var(--text); }

/* Action colour coding */
.act-play     { border-left-color: rgba(80,160,80,0.55);  background: rgba(80,160,80,0.06); }
.act-factor   { border-left-color: rgba(160,80,200,0.55); background: rgba(160,80,200,0.06); }
.act-ecology  { border-left-color: rgba(200,160,32,0.55); background: rgba(200,160,32,0.06); }
.act-draw     { border-left-color: rgba(80,140,200,0.45); background: rgba(80,140,200,0.05); }
.act-buy      { border-left-color: rgba(200,140,32,0.5);  background: rgba(200,140,32,0.05); }
.act-discard  { border-left-color: rgba(160,100,60,0.4);  background: rgba(160,100,60,0.04); }
.act-danger   { border-left-color: rgba(200,60,60,0.6);   background: rgba(200,60,60,0.06); }
.act-end      { border-left-color: var(--border); }
.act-system   { border-left-color: rgba(150,150,150,0.3); background: rgba(150,150,150,0.04); font-style: italic; }

.replay-no-actions {
  color: var(--text-faint);
  font-style: italic;
  font-size: 0.9rem;
}

.replay-panel-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.replay-score-chip {
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 10px;
}
.replay-score-chip strong { color: var(--gold); }
.replay-score-chip.faint { color: var(--text-faint); }

/* Controls */

.replay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, var(--surface), var(--bg));
  flex-shrink: 0;
}

.replay-ctrl-btn {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  background: linear-gradient(to bottom, var(--surface3), var(--surface2));
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.replay-ctrl-btn:hover { border-color: var(--gold-dim); color: var(--text); }
.replay-play-btn { border-color: rgba(176,140,76,0.5); color: var(--gold); }

.replay-progress {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-faint);
  font-style: italic;
}

/* Gameover replay button */
.gameover-replay-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
}
.gameover-replay-btn:hover { border-color: var(--gold-dim); color: var(--text); }

/* ─── REPLAY CONTROL BAR (inside #game-screen) ───────────────────────────── */

#replay-control-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(to top, var(--surface2), var(--bg));
  border-top: 2px solid rgba(176,140,76,0.45);
  z-index: 200;
}

.replay-bar-left  { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.replay-bar-center { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.replay-bar-speed { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.replay-bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 12px; }
.replay-speed-btn.active {
  background: linear-gradient(to bottom, rgba(176,140,76,0.22), rgba(176,140,76,0.1));
  border-color: var(--gold);
  color: var(--gold);
}

.replay-bar-btn {
  font-family: 'Special Elite', cursive;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  background: linear-gradient(to bottom, var(--surface3), var(--surface2));
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.replay-bar-btn:hover { border-color: var(--gold-dim); color: var(--text); }
.replay-bar-back  { border-color: var(--border); }
.replay-bar-play  { border-color: rgba(176,140,76,0.55); color: var(--gold); }
.replay-bar-label { font-size: 0.7rem; color: var(--text-faint); font-family: 'Special Elite', cursive; letter-spacing: 0.05em; }

.replay-persp-btn.active {
  background: linear-gradient(to bottom, rgba(176,140,76,0.22), rgba(176,140,76,0.1));
  border-color: var(--gold);
  color: var(--gold);
}

.replay-bar-info {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Replay-active: suppress interactivity on the playfield */
body.replay-active #phase-btn,
body.replay-active #undo-btn,
body.replay-active #buy-phase-btn,
body.replay-active .topbar-menu-abandon {
  pointer-events: none;
}

body.replay-active #hand-bottom {
  opacity: 0.85;
}

/* Replay control bar adds ~44px of logical height (×1.3 scale = ~57px visual).
   Shrink the fixed log panel so it doesn't overlap the bar or the hand. */
body.replay-active .log-panel {
  height: calc(100vh - 174px);
}

/* Log heading for replay */
.log-replay-heading {
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  color: var(--gold);
  padding: 6px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.log-entry-current {
  background: rgba(176, 140, 76, 0.12);
  border-left: 2px solid var(--gold);
  padding-left: 6px;
  margin-left: -8px;
}

/* Drag ghost: the cloned card element gets a subtle lift shadow */
#drag-ghost-wrapper, body > .hand-card, body > .compact-card {
  box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
  opacity: 0.95 !important;
}

/* Lobby replays button — styled like a reference link */
.lobby-replays-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── FIELD JOURNAL — DECK/DISCARD POCKET DEPTH ─────────────────────────────
   The card element grows taller as the pile fills so more card face is visible
   above the leather pocket rim — like papers sitting in a pocket slot.
   Card-edge stripes at the top indicate how many cards are stacked.
   data-depth is set by render.js: "empty" | "few" | "some" | "many" | "full"
──────────────────────────────────────────────────────────────────────────── */

/* "empty": stub — barely any card, faded */
.deck-visual[data-depth="empty"] {
	min-height: 26px;
	opacity: 0.0;
	background: none;
	border: 1.5px dotted var(--border-light);
	border-bottom: none;
}

.deck-visual[data-depth="empty"] .deck-count {
  color: var(--);
}

/* "few" (1–4): one card-edge stripe, modest height */
.deck-visual[data-depth="few"] {
  min-height: 38px;
  background-color: var(--parchment);
}

/* "some" (5–14): two card-edge stripes */
.deck-visual[data-depth="some"] {
  min-height: 48px;
  background-color: var(--parchment);
}

/* "many" (15–29) and "full" (30+): three card-edge stripes, tallest */
.deck-visual[data-depth="many"],
.deck-visual[data-depth="full"] {
  min-height: 40px;

   background: var(--parchment);
}

/* Rail labels get a leather-ink treatment */
.rail-label {
  color: rgba(200,170,110,0.55);
  border-bottom-color: rgba(200,160,60,0.2);
  letter-spacing: 0.14em;
}

/* Deck / discard labels — ink on parchment card face */
.deck-count {
  color: var(--ink-dim);
}

/* ─── DRAW CARDS MODAL ─────────────────────────────────────────────────────── */
.draw-cards-modal-inner {
  max-width: 520px;
  text-align: center;
}

.draw-cards-progress {
  font-family: 'Special Elite', cursive;
  font-size: 2rem;
  color: var(--ink);
  margin: 8px 0 20px;
  letter-spacing: 0.04em;
}

.draw-cards-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-bottom: 8px;
}

.draw-source-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 110px;
  min-height: 80px;
  padding: 14px 16px;
  border: 1.5px solid var(--card-paper-border);
  border-radius: 4px;
  background: var(--card-paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  font-family: 'Crimson Pro', serif;
}

.draw-source-btn:hover {
  border-color: var(--gold);
  background: rgba(200,170,90,0.12);
  transform: translateY(-2px);
}

.draw-source-btn:active { transform: translateY(0); }

.draw-source-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.draw-source-sublabel {
  font-size: 0.72rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.draw-source-deck { min-width: 90px; }
.draw-source-keep { border-color: var(--green, #5a8a50); }
.draw-source-keep:hover { background: rgba(90,138,80,0.1); border-color: var(--green-bright, #6aad6e); }
.draw-source-redraw { border-color: var(--ink-dim); }

/* ─── DRAW CARDS FLOATING PANEL ────────────────────────────────────────────── */
.draw-cards-panel {
  display: none;
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--modal-bg, #2a1a08);
  border: 1px solid var(--gold-dim, #8a6a2a);
  border-radius: 8px;
  padding: 14px 24px 16px;
  text-align: center;
  min-width: 200px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  pointer-events: auto;
}
.draw-cards-panel.open { display: block; }

.draw-cards-panel-title {
  font-family: 'IM Fell English', serif;
  font-size: 0.78rem;
  color: var(--gold, #c8a84a);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.draw-cards-panel-fraction {
  font-family: 'Special Elite', cursive;
  font-size: 2rem;
  color: var(--parchment, #e8d9aa);
  line-height: 1.1;
}

.draw-cards-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

/* Highlight deck/discard when they are valid draw targets */
.draw-source-active {
  outline: 2px solid var(--gold, #c8a84a) !important;
  filter: brightness(1.05);
}

/* ── Debug Panel ─────────────────────────────────────────────────────────── */
.debug-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 2000;
  background: rgba(30, 20, 10, 0.85);
  border: 1px solid var(--gold, #c8a84a);
  color: var(--gold, #c8a84a);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.debug-toggle-btn:hover { opacity: 1; }

.debug-panel {
  position: fixed;
  bottom: 64px;
  right: 16px;
  z-index: 2000;
  width: 280px;
  background: rgba(20, 14, 6, 0.96);
  border: 1px solid var(--gold, #c8a84a);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.debug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold, #c8a84a);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.debug-panel-close {
  background: none;
  border: none;
  color: var(--gold, #c8a84a);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  opacity: 0.7;
}
.debug-panel-close:hover { opacity: 1; }
.debug-card-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(200,168,74,0.4);
  border-radius: 4px;
  color: #e8d9aa;
  padding: 6px 8px;
  font-size: 0.82rem;
  outline: none;
}
.debug-card-search:focus { border-color: var(--gold, #c8a84a); }
.debug-card-results {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 6px;
}
.debug-card-result {
  display: flex;
  flex-direction: column;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  border-bottom: 1px solid rgba(200,168,74,0.1);
}
.debug-card-result:hover { background: rgba(200,168,74,0.12); }
.debug-card-result-name { color: #e8d9aa; font-size: 0.82rem; }
.debug-card-result-meta { color: rgba(200,168,74,0.6); font-size: 0.72rem; }

.debug-force-healthy-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--gold, #c8a84a);
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
}
.debug-force-healthy-label:hover { opacity: 1; }
.debug-force-healthy-label input[type="checkbox"] {
  accent-color: var(--gold, #c8a84a);
  width: 12px;
  height: 12px;
  cursor: pointer;
}