/* ============================================================
   CHRONOFORGE: SOULBOUND REALMS — Dark Fantasy Stylesheet
   ============================================================ */

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

:root {
  --bg-dark:    #0d0d1a;
  --bg-panel:   #14142a;
  --bg-card:    #1a1a35;
  --border:     #2a2a50;
  --text:       #d0d0e8;
  --text-dim:   #808099;
  --text-bright:#ffffff;
  --gold:       #FFD700;
  --red-danger: #ef4444;
  --green:      #4ade80;
  --purple:     #a855f7;
  --blue:       #60a5fa;

  --res-frag:   #a0672a;
  --res-ess:    #2e7d32;
  --res-energy: #f9a825;
  --res-inf:    #1565c0;
}

html, body { height: 100%; background: var(--bg-dark); color: var(--text); font-family: 'Georgia', serif; overflow: hidden; }

#app { height: 100vh; display: flex; flex-direction: column; }

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ============================================================
   SETUP SCREEN
   ============================================================ */
.setup-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 20px; overflow-y: auto; height: 100vh;
  background: radial-gradient(ellipse at top, #1a0e35 0%, var(--bg-dark) 70%);
}

.setup-title { text-align: center; margin-bottom: 30px; }
.setup-logo { font-size: 60px; margin-bottom: 10px; animation: spin 8s linear infinite; display: inline-block; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.setup-title h1 { font-size: 3em; color: var(--gold); letter-spacing: 6px; text-shadow: 0 0 20px #FFD70088; }
.setup-title h2 { font-size: 1.3em; color: var(--purple); letter-spacing: 3px; margin-top: 4px; }
.setup-subtitle { color: var(--text-dim); margin-top: 12px; font-style: italic; font-size: 1.05em; }

.setup-section { width: 100%; max-width: 900px; margin-bottom: 25px; }
.setup-section h3 { color: var(--gold); margin-bottom: 14px; font-size: 1.1em; letter-spacing: 2px; text-align: center; }

.faction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .faction-grid { grid-template-columns: repeat(2, 1fr); } }

.faction-card {
  background: var(--bg-panel); border: 2px solid var(--border);
  border-radius: 10px; padding: 14px; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.faction-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 16px #00000080; }
.faction-card.selected { border-color: var(--gold) !important; box-shadow: 0 0 20px #FFD70044; }

.faction-icon { font-size: 2em; text-align: center; margin-bottom: 6px; }
.faction-name { font-size: 0.95em; font-weight: bold; text-align: center; margin-bottom: 4px; }
.faction-tagline { font-size: 0.75em; color: var(--text-dim); font-style: italic; text-align: center; margin-bottom: 10px; line-height: 1.4; }
.faction-passive-preview { font-size: 0.7em; color: #9090b0; line-height: 1.4; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }

.faction-start-res { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }

.setup-options { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.setup-option { display: flex; flex-direction: column; gap: 6px; }
.setup-option label { color: var(--text-dim); font-size: 0.85em; letter-spacing: 1px; }
.setup-option input, .setup-option select {
  background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text-bright); border-radius: 6px; padding: 8px 12px;
  font-size: 1em; font-family: inherit; outline: none;
}
.setup-option input:focus, .setup-option select:focus { border-color: var(--gold); }

.selected-faction-display { text-align: center; color: var(--text-dim); margin-bottom: 10px; font-size: 0.9em; }

.btn-start {
  padding: 14px 40px; font-size: 1.2em; font-family: inherit; font-weight: bold;
  letter-spacing: 2px; background: linear-gradient(135deg, #4a148c, #7b1fa2);
  color: white; border: 2px solid #9c27b0; border-radius: 8px; cursor: pointer;
  transition: all 0.2s; text-transform: uppercase;
}
.btn-start:hover:not(:disabled) { background: linear-gradient(135deg, #6a1cad, #9c27b0); transform: translateY(-2px); box-shadow: 0 4px 20px #9c27b044; }
.btn-start:disabled { opacity: 0.4; cursor: not-allowed; }

/* Resource Chips */
.res-chip { font-size: 0.75em; padding: 2px 6px; border-radius: 10px; white-space: nowrap; }
.res-chip.fragments { background: #241a2b; color: #e0a865; }
.res-chip.essence   { background: #12241c; color: #66bb6a; }
.res-chip.energy    { background: #262135; color: #ffd740; }
.res-chip.influence { background: #0e1834; color: #64b5f6; }

/* ============================================================
   GAME SCREEN
   ============================================================ */
.game-screen { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Top Bar ──────────────────────────────────────────────── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px; background: #0a0a18; border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-height: 44px;
}
.game-title { color: var(--gold); font-weight: bold; font-size: 1.05em; letter-spacing: 3px; }
.round-badge { background: #1a1a35; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; color: var(--text-dim); font-size: 0.85em; margin-left: 10px; }
.phase-indicator { color: var(--purple); font-size: 0.95em; font-weight: bold; }
.active-player-indicator { margin-left: 10px; font-size: 0.9em; font-weight: bold; }
.vp-chip { padding: 2px 8px; border-radius: 10px; color: white; font-size: 0.8em; font-weight: bold; margin-left: 4px; }
.vp-scoreboard { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Game Main ────────────────────────────────────────────── */
.game-main { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Board Area ───────────────────────────────────────────── */
.board-area { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; }
.board { display: flex; gap: 8px; flex: 1; min-height: 0; }

/* ── Zone ─────────────────────────────────────────────────── */
.zone {
  flex: 1; display: flex; flex-direction: column;
  background: var(--zone-bg, #141428);
  border: 2px solid var(--zone-color, #333);
  border-radius: 10px; overflow: hidden; min-width: 0;
}
/* zone-collapsed handled by the zone-collapsed class; keep grayscale for backward compat */
.zone-collapsed { opacity: 0.85; }
.zone:not(.zone-collapsed):hover { border-color: color-mix(in srgb, var(--zone-color) 80%, white); }

/* Zone instability visual states */
.zone-stable   { /* default — no extra styling */ }
.zone-unstable { border-color: #b8860b !important; box-shadow: 0 0 6px #b8860b44 inset; }
.zone-dangerous { border-color: #c0392b !important; box-shadow: 0 0 10px #c0392b66 inset; }
.zone-collapse-imminent { border-color: #ff0000 !important; box-shadow: 0 0 16px #ff000099 inset; animation: zone-pulse-danger 0.8s infinite; }
@keyframes zone-pulse-danger { 0%,100% { box-shadow: 0 0 16px #ff000099 inset; } 50% { box-shadow: 0 0 30px #ff0000cc inset; } }

/* Instability meter */
.instability-meter { display: flex; align-items: center; gap: 3px; padding: 4px 8px; background: rgba(0,0,0,0.35); }
.inst-pip { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.inst-pip-empty  { background: #222244; border: 1px solid #333366; }
.inst-pip-ok     { background: #2e7d32; border: 1px solid #388e3c; }
.inst-pip-warn   { background: #b8860b; border: 1px solid #daa520; }
.inst-pip-danger { background: #c0392b; border: 1px solid #e74c3c; }
.inst-label { font-size: 0.62em; color: var(--text-dim); margin-left: 4px; }
.inst-label.warn   { color: #daa520; font-weight: bold; }
.inst-label.danger { color: #e74c3c; font-weight: bold; }

/* Scar badge */
.scar-badge {
  font-size: 0.68em; padding: 2px 7px; margin: 0 8px 4px;
  background: #220b18; border: 1px solid #9b2043;
  border-radius: 4px; color: #ff8080; line-height: 1.4;
}

/* Zone bid section in planning phase */
.zone-bid-section { margin-bottom: 8px; padding: 6px 8px; background: #0a0a20; border: 1px solid var(--border); border-radius: 6px; }
.zone-bid-btn { font-size: 0.68em !important; padding: 4px 8px !important; margin-top: 3px; }
.zone-bid-active { font-size: 0.78em; color: var(--gold); font-weight: bold; }

/* Private objectives */
.pp-private-objectives { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.private-objectives-panel { margin-bottom: 6px; padding: 6px 8px; background: #0d0d20; border: 1px dashed #4a3a70; border-radius: 6px; }
.private-obj {
  font-size: 0.68em; color: #b090e0; padding: 3px 0; line-height: 1.5;
}
.private-obj.complete { color: var(--green); text-decoration: line-through; opacity: 0.7; }

/* Timeline resist banner */
.resist-banner {
  background: #1e0c16; border: 1px solid #a03a50; border-radius: 6px;
  padding: 6px 10px; font-size: 0.72em; color: #ff9d8e;
  margin-bottom: 8px; line-height: 1.5;
}
.resist-banner button {
  font-family: inherit; font-size: 0.9em; padding: 2px 8px;
  background: #35101f; border: 1px solid #c04a55; color: #ff9d8e;
  border-radius: 4px; cursor: pointer; margin-left: 6px;
}
.resist-banner button:hover { background: #4a1628; }

.zone-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: color-mix(in srgb, var(--zone-color) 30%, transparent);
  border-bottom: 1px solid var(--zone-color);
}
.zone-name { font-weight: bold; color: var(--text-bright); font-size: 0.9em; }
.zone-base-res { font-size: 0.8em; color: var(--text-dim); }

.zone-section-label { font-size: 0.7em; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; padding: 0 8px; }

/* Sanctuaries inside zone */
.zone-sanctuaries { padding: 8px; display: flex; flex-direction: column; gap: 5px; }

.sanctuary {
  background: #1a1a30; border: 1.5px solid var(--border);
  border-radius: 7px; padding: 7px 8px; cursor: pointer;
  transition: all 0.15s;
}
.sanctuary:hover { border-color: var(--gold); background: #22223a; }
.sanctuary.controlled { background: #1e1e38; }
.sanctuary-name { font-size: 0.78em; color: var(--text-bright); font-weight: bold; }
.sanctuary-meta { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.sanctuary-vp { font-size: 0.72em; color: var(--gold); font-weight: bold; }
.sanctuary-controller { font-size: 0.72em; font-weight: bold; }
.sanctuary-uncontrolled { font-size: 0.72em; color: var(--text-dim); }
.sanctuary-influence { display: flex; gap: 3px; flex-wrap: wrap; min-height: 8px; margin: 3px 0; }
.inf-pip {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(255,255,255,0.3);
}
.inf-pip.shadow { font-size: 8px; line-height: 10px; text-align: center; }
.sanctuary-action { font-size: 0.68em; color: var(--text-dim); font-style: italic; }

/* Druid Slots */
.zone-druids { padding: 6px 8px; }
.druid-slots { display: flex; gap: 5px; }
.druid-slot {
  width: 32px; height: 32px; border: 1.5px dashed var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.druid-slot.empty:hover { border-color: var(--gold); background: #22221a; }
.druid-slot.occupied { border-style: solid; }
.druid-token { font-size: 1.1em; }

/* Grove Slots */
.zone-groves { padding: 6px 8px; flex: 1; }
.grove-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.grove-slot {
  width: 36px; height: 36px; border: 1.5px dashed var(--border);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.grove-slot.occupied { border-style: solid; background: #1a1a30; }
.grove-icon { font-size: 1.2em; }
.grove-owner-dot { position: absolute; bottom: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; }
.grove-doubled { position: absolute; top: -2px; right: -2px; font-size: 0.55em; background: var(--gold); color: black; border-radius: 3px; padding: 0 2px; font-weight: bold; }

/* ── Side Panel ───────────────────────────────────────────── */
.side-panel { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); overflow: hidden; }

.player-summaries { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.player-summary {
  background: var(--bg-panel); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 8px; transition: all 0.15s;
}
.player-summary.active { border-color: var(--gold) !important; box-shadow: 0 0 8px #FFD70033; }
.player-summary.passed { opacity: 0.6; }

.ps-header { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.ps-icon { font-size: 1em; }
.ps-name { font-size: 0.8em; font-weight: bold; flex: 1; }
.ai-badge, .you-badge { font-size: 0.6em; padding: 1px 4px; border-radius: 3px; background: #1a1a40; }
.you-badge { background: #1a3020; color: var(--green); }
.passed-badge { font-size: 0.6em; color: var(--text-dim); }

.ps-vp { font-size: 0.85em; margin-bottom: 4px; }
.vp-big { font-size: 1.2em; font-weight: bold; color: var(--gold); }
.paradox-pen { color: var(--red-danger); font-size: 0.75em; }

.ps-resources { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 5px; }

.ps-paradox { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.paradox-label { font-size: 0.65em; color: var(--text-dim); }
.paradox-bar { display: flex; gap: 2px; }
.paradox-pip { width: 8px; height: 8px; border-radius: 2px; background: var(--border); }
.paradox-pip.filled { background: #ef4444; }
.paradox-count { font-size: 0.65em; color: #ef9090; }

.ps-groves { display: flex; gap: 3px; flex-wrap: wrap; }
.grove-mini { font-size: 0.85em; padding: 1px 3px; border: 1px solid; border-radius: 3px; }
.no-groves { font-size: 0.65em; color: var(--text-dim); }

/* Game Log */
.game-log { height: 200px; border-top: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.log-title { padding: 5px 10px; font-size: 0.75em; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--bg-dark); }
.log-entries { flex: 1; overflow-y: auto; padding: 5px 8px; }
.log-entry { font-size: 0.72em; padding: 2px 0; border-bottom: 1px solid #1a1a2a; line-height: 1.5; }
.log-action  { color: var(--text-dim); }
.log-round   { color: var(--gold); font-weight: bold; padding: 4px 0; }
.log-collapse{ color: #ff6b35; font-weight: bold; }
.log-paradox { color: #ef4444; }
.log-scoring { color: var(--blue); }
.log-winner  { color: var(--gold); font-size: 0.85em; font-weight: bold; padding: 4px 0; }
.log-card    { color: var(--purple); }
.log-passive { color: #9090c0; }
.log-control { color: var(--green); }
.log-phase   { color: #a0a0c0; font-style: italic; }
.log-ability { color: #e0b060; }
.log-info    { color: var(--text-dim); }

/* ── Player Area ──────────────────────────────────────────── */
.player-area { flex-shrink: 0; display: flex; border-top: 1px solid var(--border); background: #0a0a18; max-height: 240px; overflow: hidden; }

/* Player Panel */
.player-panel { flex: 1; padding: 8px 12px; border-right: 1px solid var(--border); overflow-y: auto; border-top: 3px solid var(--border); }

.pp-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.pp-faction-icon { font-size: 1.3em; }
.pp-faction-name { font-size: 0.9em; font-weight: bold; flex: 1; }
.pp-resources { display: flex; gap: 5px; flex-wrap: wrap; }
.res-chip-lg { font-size: 0.85em; padding: 3px 8px; border-radius: 12px; font-weight: bold; white-space: nowrap; }
.res-chip-lg.fragments { background: #3a2010; color: #e0a060; border: 1px solid #6a4020; }
.res-chip-lg.essence   { background: #0a200c; color: #80cb84; border: 1px solid #1a5020; }
.res-chip-lg.energy    { background: #302000; color: #ffd740; border: 1px solid #604000; }
.res-chip-lg.influence { background: #0a1530; color: #64b5f6; border: 1px solid #1a2560; }

.pp-paradox-compact { font-size: 0.8em; }
.paradox-num { font-weight: bold; color: #ef4444; }
.paradox-num.warning { color: #ff9800; }
.paradox-num.danger  { color: #ef4444; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.5 } }

.pp-druids { font-size: 0.75em; color: var(--text-dim); }

.hand-label { font-size: 0.7em; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
.hand-cards { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.empty-hand { font-size: 0.75em; color: var(--text-dim); font-style: italic; }

.pp-planned { margin-top: 5px; }
.planned-cards { display: flex; gap: 5px; }
.planned-card-slot { background: #1a1a30; border: 1px dashed var(--border); border-radius: 6px; padding: 5px 10px; }
.planned-card-face-down { font-size: 0.75em; color: var(--text-dim); }

.pp-ability { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.ability-label { font-size: 0.68em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.ability-text { font-size: 0.7em; color: #9090b8; margin-left: 4px; }

/* Ritual Cards in Hand */
.ritual-card {
  flex-shrink: 0; width: 120px; min-height: 90px; background: var(--bg-card);
  border: 1.5px solid var(--border); border-radius: 7px; padding: 7px;
  cursor: default; transition: all 0.15s; position: relative;
}
.ritual-card.clickable { cursor: pointer; }
.ritual-card.clickable:hover { transform: translateY(-4px); box-shadow: 0 4px 16px #00000088; }
.ritual-card.unaffordable { opacity: 0.5; }

.card-header { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.card-cat-icon { font-size: 0.85em; }
.card-name { font-size: 0.72em; font-weight: bold; line-height: 1.2; }
.faction-card-badge { font-size: 0.6em; color: var(--gold); margin-bottom: 3px; }
.card-desc { font-size: 0.67em; color: var(--text-dim); line-height: 1.4; margin-bottom: 3px; }
.card-cost { font-size: 0.62em; color: #9090a0; border-top: 1px solid var(--border); padding-top: 3px; }

/* Action Panel */
.action-panel {
  width: 260px; flex-shrink: 0; padding: 8px 10px; overflow-y: auto;
  background: #0d0d20; border-left: 1px solid var(--border);
}
.action-panel.waiting { opacity: 0.7; }
.action-panel-title { font-size: 0.8em; color: var(--gold); font-weight: bold; margin-bottom: 6px; letter-spacing: 1px; }
.action-help { font-size: 0.72em; color: var(--text-dim); margin-bottom: 8px; line-height: 1.5; }
.action-buttons { display: flex; flex-direction: column; gap: 5px; }
.no-actions { font-size: 0.75em; color: var(--text-dim); font-style: italic; }
.ai-indicator { font-size: 0.75em; color: var(--text-dim); font-style: italic; animation: pulse 1.5s infinite; }
.planning-note { font-size: 0.72em; color: var(--green); }

/* Action budget row */
.action-budget { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.action-pip {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block; flex-shrink: 0;
}
.action-pip.free  { background: #4040a0; border: 1px solid #6060c0; }
.action-pip.used  { background: #2a2a2a; border: 1px solid #3a3a3a; }
.actions-remaining { font-size: 0.68em; color: var(--text-dim); }
.actions-exhausted { font-size: 0.68em; color: var(--red-danger); font-weight: bold; animation: pulse 1s infinite; }

.btn-action {
  padding: 6px 10px; font-family: inherit; font-size: 0.75em;
  border-radius: 5px; cursor: pointer; border: 1px solid;
  transition: all 0.15s; text-align: left; line-height: 1.4;
}
.btn-primary  { background: #1a1a40; border-color: #4040a0; color: var(--text); }
.btn-primary:hover  { background: #242460; border-color: var(--blue); color: var(--text-bright); }
.btn-time     { background: #2a0a0a; border-color: #8a2020; color: #f0a0a0; }
.btn-time:hover     { background: #3a1010; border-color: var(--red-danger); }
.btn-danger   { background: #3a0000; border-color: #8b0000; color: #ff8080; }
.btn-danger:hover   { background: #4a0000; border-color: var(--red-danger); }
.btn-cancel   { background: var(--bg-dark); border-color: var(--border); color: var(--text-dim); width: 100%; margin-top: 8px; }
.btn-cancel:hover { border-color: var(--text-dim); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 20px;
}
.modal {
  background: var(--bg-panel); border: 2px solid var(--gold);
  border-radius: 12px; padding: 24px; max-width: 680px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 0 30px #00000088, 0 0 60px #FFD70022;
}
.modal-title { font-size: 1.1em; color: var(--gold); font-weight: bold; margin-bottom: 16px; text-align: center; }
.modal-options { display: flex; flex-direction: column; gap: 8px; }

/* Grove type selection grid */
.grove-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 500px) { .grove-type-grid { grid-template-columns: repeat(2, 1fr); } }
.grove-type-option {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 8px; padding: 12px; cursor: pointer; text-align: center;
  transition: all 0.15s;
}
.grove-type-option:hover { border-color: var(--gold); transform: translateY(-2px); background: #22223a; }
.grove-option-icon { font-size: 1.8em; margin-bottom: 6px; }
.grove-option-name { font-size: 0.82em; font-weight: bold; margin-bottom: 5px; }
.grove-option-normal { font-size: 0.68em; color: var(--text-dim); margin-bottom: 3px; line-height: 1.4; }
.grove-option-collapse { font-size: 0.65em; color: #ff8080; line-height: 1.3; }

/* ============================================================
   SETUP SCREEN — Tutorial & Rules buttons
   ============================================================ */
.setup-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }

.btn-tutorial {
  padding: 14px 30px; font-size: 1.1em; font-family: inherit; font-weight: bold;
  letter-spacing: 1px; background: linear-gradient(135deg, #1a3a1a, #2e7d32);
  color: #a5d6a7; border: 2px solid #388e3c; border-radius: 8px; cursor: pointer;
  transition: all 0.2s;
}
.btn-tutorial:hover { background: linear-gradient(135deg, #2a5a2a, #388e3c); transform: translateY(-2px); box-shadow: 0 4px 20px #2e7d3244; }

.setup-footer-links { display: flex; align-items: center; gap: 10px; margin-top: 6px; opacity: 0.8; }
.btn-rules-link { background: none; border: none; color: var(--blue); font-family: inherit; font-size: 0.9em; cursor: pointer; text-decoration: underline; padding: 0; }
.btn-rules-link:hover { color: var(--text-bright); }
.setup-footer-sep { color: var(--text-dim); }
.setup-version { font-size: 0.8em; color: var(--text-dim); }

/* In-game rules/tutorial buttons */
.btn-rules-ingame {
  padding: 3px 10px; font-size: 0.78em; font-family: inherit;
  background: #1a1a35; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 4px; cursor: pointer; margin-left: 6px; transition: all 0.15s;
}
.btn-rules-ingame:hover { border-color: var(--blue); color: var(--text-bright); }

/* ============================================================
   TUTORIAL OVERLAY
   ============================================================ */
.tutorial-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000; pointer-events: none;
}
.tutorial-overlay.fullscreen-dim {
  background: rgba(0,0,0,0.75);
  pointer-events: all;
  display: flex; align-items: center; justify-content: center;
}

/* Tutorial panel positioning */
.tutorial-panel {
  pointer-events: all;
  background: #12122a;
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 20px 22px;
  width: 480px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 0 40px #00000099, 0 0 80px #FFD70022;
  animation: tutorial-slide-in 0.25s ease-out;
}
@keyframes tutorial-slide-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Positioning variants */
.pos-center .tutorial-panel { /* centered by flexbox on parent */ }
.pos-bottom .tutorial-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.pos-top .tutorial-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.pos-right .tutorial-panel {
  position: fixed;
  bottom: 260px;
  right: 20px;
  left: auto;
  transform: none;
  width: 380px;
}
.pos-left .tutorial-panel {
  position: fixed;
  bottom: 260px;
  left: 20px;
  transform: none;
  width: 380px;
}

.tutorial-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid #2a2a50;
}
.tutorial-progress { font-size: 0.72em; color: var(--text-dim); background: #1a1a35; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.tutorial-title { flex: 1; font-size: 1em; font-weight: bold; color: var(--gold); }
.tutorial-skip { background: none; border: 1px solid #3a3a60; color: var(--text-dim); font-family: inherit; font-size: 0.72em; padding: 3px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.tutorial-skip:hover { border-color: var(--text-dim); color: var(--text); }

.tutorial-body {
  font-size: 0.88em; line-height: 1.7; color: var(--text);
  margin-bottom: 16px;
}
.tutorial-body strong { color: var(--text-bright); }
.tutorial-body em { color: #b0b0d0; font-style: italic; }
.tutorial-body table { width: 100%; font-size: 0.85em; border-collapse: collapse; }
.tutorial-body td { padding: 3px 6px; border-bottom: 1px solid #1a1a30; }

.tutorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.tutorial-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a2a50; transition: all 0.2s;
}
.tutorial-dot.active { background: var(--gold); transform: scale(1.3); }
.tutorial-dot.done  { background: #4a4a80; }

.tutorial-nav { display: flex; gap: 8px; }
.tut-btn {
  padding: 7px 16px; font-family: inherit; font-size: 0.85em;
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.tut-next { background: linear-gradient(135deg, #4a148c, #7b1fa2); color: white; border: 1px solid #9c27b0; font-weight: bold; }
.tut-next:hover { background: linear-gradient(135deg, #6a1cad, #9c27b0); }
.tut-back { background: #1a1a35; color: var(--text-dim); border: 1px solid var(--border); }
.tut-back:hover { border-color: var(--text-dim); color: var(--text); }

/* Spotlight highlight for tutorial */
.tutorial-highlight {
  outline: 3px solid var(--gold) !important;
  outline-offset: 4px;
  border-radius: 8px;
  position: relative;
  z-index: 100;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  animation: tutorial-pulse-border 1.5s infinite;
}
@keyframes tutorial-pulse-border {
  0%,100% { outline-color: var(--gold); box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 16px #FFD70066; }
  50%      { outline-color: #fff8; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 28px #FFD700aa; }
}

/* ============================================================
   RULES MODAL
   ============================================================ */
.rules-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); z-index: 3000;
  display: flex; align-items: stretch; justify-content: center;
  padding: 16px;
}
.rules-modal {
  background: #0f0f22;
  border: 2px solid #3a3a80;
  border-radius: 12px;
  display: flex; flex-direction: column;
  width: 100%; max-width: 980px;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 0 60px #00000099;
}

.rules-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #2a2a50;
  background: #0a0a18; flex-shrink: 0;
}
.rules-modal-header h1 { font-size: 1.15em; color: var(--gold); letter-spacing: 2px; }
.rules-close-btn {
  background: none; border: 1px solid #3a3a60; color: var(--text-dim);
  font-family: inherit; font-size: 0.85em; padding: 5px 12px;
  border-radius: 5px; cursor: pointer;
}
.rules-close-btn:hover { border-color: var(--text-dim); color: var(--text); }

.rules-modal-body {
  display: flex; flex: 1; overflow: hidden;
}
.rules-tabs {
  width: 190px; flex-shrink: 0; border-right: 1px solid #1a1a35;
  overflow-y: auto; padding: 10px 0; background: #0c0c1e;
}
.rules-tab {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; background: none; border: none;
  color: var(--text-dim); font-family: inherit; font-size: 0.8em;
  cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent;
  white-space: nowrap;
}
.rules-tab:hover  { background: #1a1a30; color: var(--text); }
.rules-tab.active { background: #1a1a35; color: var(--gold); border-left-color: var(--gold); }

.rules-content { flex: 1; overflow-y: auto; padding: 24px 28px; }
.rules-section { display: none; }
.rules-section.active { display: block; }
.rules-section h2 { font-size: 1.2em; color: var(--gold); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #2a2a50; }
.rules-section p  { font-size: 0.88em; color: var(--text); line-height: 1.7; margin-bottom: 12px; }

/* Rules table */
.rules-table { width: 100%; border-collapse: collapse; font-size: 0.82em; margin-bottom: 16px; }
.rules-table th { background: #1a1a35; color: var(--gold); padding: 7px 10px; text-align: left; border-bottom: 2px solid #3a3a60; }
.rules-table td { padding: 7px 10px; border-bottom: 1px solid #1a1a30; color: var(--text); vertical-align: top; line-height: 1.5; }
.rules-table tr:hover td { background: #14143a; }
.rules-table strong { color: var(--text-bright); }

/* Rules steps (ordered list) */
.rules-steps { font-size: 0.87em; padding-left: 18px; margin-bottom: 14px; }
.rules-steps li { margin-bottom: 8px; color: var(--text); line-height: 1.6; }
.rules-steps strong { color: var(--text-bright); }

/* Rules box (callout) */
.rules-box {
  background: #1a1a35; border-left: 3px solid var(--gold);
  padding: 10px 14px; border-radius: 0 6px 6px 0;
  font-size: 0.84em; color: var(--text); margin-top: 12px;
  line-height: 1.6;
}

/* Zone grid in rules */
.rules-zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.rules-zone { padding: 12px; border-radius: 8px; font-size: 0.83em; line-height: 1.7; }
.past-zone    { background: #1f1218; border: 1px solid #c1807b; }
.present-zone { background: #0e2a10; border: 1px solid #2E7D32; }
.future-zone  { background: #1a0e2a; border: 1px solid #7B5EA7; }
.rules-zone strong { color: var(--text-bright); display: block; margin-bottom: 5px; }
.rules-zone em { color: var(--text-dim); font-size: 0.92em; }

/* Card categories in rules */
.rules-card-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 600px) { .rules-card-cats { grid-template-columns: repeat(2,1fr); } }
.rules-cat {
  padding: 10px 12px; border-radius: 7px; font-size: 0.78em; line-height: 1.5;
  border: 1px solid var(--border); background: var(--bg-card);
}
.rules-cat em { color: var(--text-dim); display: block; margin-top: 4px; }
.soul      { border-color: #a8385e; } .grove    { border-color: #228B22; }
.sanctuary { border-color: #1565C0; } .time     { border-color: #C62828; }
.movement  { border-color: #4A148C; } .faction  { border-color: #37474F; }

/* ============================================================
   GAME OVER SCREEN
   ============================================================ */
.gameover-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 20px; overflow-y: auto; height: 100vh;
  background: radial-gradient(ellipse at center, #1a0e35 0%, var(--bg-dark) 70%);
}
.gameover-title { font-size: 2.5em; color: var(--gold); letter-spacing: 4px; margin-bottom: 10px; text-shadow: 0 0 20px #FFD70088; }
.gameover-winner { font-size: 1.5em; color: var(--text-bright); margin-bottom: 30px; }
.gameover-scores { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }

.final-score-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  flex-wrap: wrap;
}
.final-score-row.winner-row { border-color: var(--gold); background: #1e1a30; box-shadow: 0 0 12px #FFD70033; }
.rank { font-size: 1.4em; color: var(--text-dim); min-width: 30px; }
.faction-icon-lg { font-size: 1.6em; }
.player-name-final { font-size: 1em; font-weight: bold; min-width: 120px; }
.faction-name-final { font-size: 0.8em; color: var(--text-dim); flex: 1; }
.vp-final { font-size: 1.2em; font-weight: bold; color: var(--gold); min-width: 70px; text-align: right; }
.paradox-final { font-size: 0.8em; color: #ef4444; min-width: 80px; }
.obj-final { font-size: 0.75em; color: var(--green); }

.gameover-buttons { display: flex; gap: 12px; }
.gameover-buttons .btn-action { font-size: 1em; padding: 10px 24px; }

/* ============================================================
   MOBILE RESPONSIVENESS — Tabbed layout for ≤768px screens
   ============================================================ */
@media (max-width: 768px) {

  /* Setup screen tweaks */
  .setup-screen { padding: 20px 14px; }
  .setup-title h1 { font-size: 2em; letter-spacing: 3px; }
  .setup-title h2 { font-size: 1em; }
  .setup-logo { font-size: 44px; }
  .setup-cta-row { flex-direction: column; gap: 10px; align-items: center; }
  .btn-start, .btn-tutorial { width: 100%; max-width: 320px; padding: 14px 20px; }

  /* Mobile game screen: flex column filling 100dvh */
  .mobile-game-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* respects address bar on mobile browsers */
    overflow: hidden;
  }

  /* Compact top bar */
  .mobile-top-bar {
    display: flex !important;
    align-items: center;
    padding: 6px 10px;
    background: #0a0a18;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 48px;
    gap: 8px;
  }
  .mobile-top-bar .game-title { font-size: 0.8em; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
  .mobile-top-center {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; gap: 1px; min-width: 0; overflow: hidden;
  }
  .mobile-top-center .phase-indicator {
    font-size: 0.72em; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
  }
  .mobile-top-center .round-badge { font-size: 0.68em; margin-left: 0; }
  .mobile-active-player { font-size: 0.65em; color: var(--text-dim); }
  .mobile-top-right { display: flex; gap: 4px; flex-shrink: 0; }

  /* Scrollable tab content */
  .mobile-tab-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Bottom navigation bar */
  .mobile-nav {
    display: flex;
    flex-shrink: 0;
    height: 58px;
    background: #0a0a18;
    border-top: 1px solid var(--border);
    z-index: 50;
  }
  .mobile-nav-btn {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--text-dim); font-family: inherit;
    cursor: pointer; position: relative;
    padding: 4px 2px; min-height: 44px; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-btn.active { color: var(--gold); background: #12121e; }
  .mobile-nav-btn:active { background: #1a1a30; }
  .mobile-nav-icon { font-size: 1.3em; line-height: 1; }
  .mobile-nav-label { font-size: 0.58em; margin-top: 2px; letter-spacing: 0.5px; text-transform: uppercase; }
  .mobile-nav-dot {
    position: absolute; top: 5px; right: calc(50% - 16px);
    width: 8px; height: 8px; background: var(--gold);
    border-radius: 50%; animation: pulse 1s infinite;
  }

  /* ── Board tab ──────────────────────────────────────────── */
  .board-mobile { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .board-mobile .zone { flex: none; }
  .board-mobile .zone-name { font-size: 0.95em; }
  .board-mobile .druid-slot { width: 40px; height: 40px; }
  .board-mobile .grove-slot { width: 40px; height: 40px; }
  .board-mobile .sanctuary-name { font-size: 0.85em; }
  .board-mobile .sanctuary { padding: 9px 10px; }

  /* ── Actions tab ─────────────────────────────────────────── */
  .actions-mobile { display: flex; flex-direction: column; min-height: 100%; }
  .mobile-resources-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 12px; background: var(--bg-panel);
    border-bottom: 1px solid var(--border); flex-shrink: 0; align-items: center;
  }
  .mobile-resources-bar .res-chip-lg { font-size: 0.82em; }
  .mobile-resources-bar .pp-paradox-compact { font-size: 0.8em; margin-left: auto; }
  .actions-mobile .action-panel {
    flex: 1; width: 100%; border-left: none; background: transparent;
  }
  .actions-mobile .btn-action { min-height: 48px; font-size: 0.9em; padding: 10px 14px; }
  .actions-mobile .action-panel-title { font-size: 0.9em; }

  /* ── Hand tab ───────────────────────────────────────────── */
  .hand-mobile .player-panel {
    border: none; border-top: 3px solid var(--border);
    max-height: none; overflow-y: visible; padding: 12px;
  }
  .hand-mobile .hand-cards { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
  .hand-mobile .ritual-card { width: calc(50% - 4px); flex-shrink: 0; }

  /* ── Info tab ───────────────────────────────────────────── */
  .info-mobile .player-summaries { flex: none; overflow-y: visible; height: auto; padding: 8px; }
  .info-mobile .game-log { height: 280px; }

  /* ── Touch targets ──────────────────────────────────────── */
  .btn-action { min-height: 44px; }
  .druid-slot { min-width: 40px; min-height: 40px; }
  .grove-type-option { padding: 14px 10px; }
  .btn-rules-ingame { padding: 6px 10px; font-size: 0.8em; min-height: 36px; }

  /* ── Modals: bottom sheet on mobile ────────────────────── */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; max-height: 82vh; max-width: 100%; }

  /* ── Rules modal: horizontal tab strip ──────────────────── */
  .rules-overlay { padding: 0; }
  .rules-modal { border-radius: 0; width: 100%; max-width: 100%; border-left: none; border-right: none; border-bottom: none; }
  .rules-modal-body { flex-direction: column; }
  .rules-tabs {
    width: 100%; display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid #1a1a35;
    height: auto; padding: 0; flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  .rules-tab {
    flex-shrink: 0; border-left: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px; white-space: nowrap;
  }
  .rules-tab.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .rules-content { padding: 14px 16px; }

  /* Rules grids: collapse to 1 column */
  .rules-zone-grid { grid-template-columns: 1fr; }
  .rules-card-cats { grid-template-columns: repeat(2, 1fr); }

  /* ── Tutorial: always at bottom above mobile nav ────────── */
  .tutorial-overlay.fullscreen-dim { align-items: flex-end; padding-bottom: 64px; }
  .pos-bottom .tutorial-panel,
  .pos-top .tutorial-panel,
  .pos-right .tutorial-panel,
  .pos-left .tutorial-panel {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    right: auto; left: auto; bottom: auto; top: auto;
    border-radius: 12px;
  }
  .tutorial-panel { max-width: 100%; }
  .tutorial-overlay.fullscreen-dim .tutorial-panel {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  /* Game over */
  .gameover-title { font-size: 1.8em; }
  .gameover-winner { font-size: 1.1em; text-align: center; }
  .final-score-row { flex-wrap: wrap; gap: 6px; }
  .gameover-buttons { flex-direction: column; align-items: center; }
  .gameover-buttons .btn-action { width: 100%; max-width: 300px; font-size: 1em; }
}

/* Very small screens (iPhone SE, older Androids) */
@media (max-width: 380px) {
  .setup-title h1 { font-size: 1.6em; letter-spacing: 2px; }
  .mobile-nav-label { display: none; }
  .mobile-nav-icon { font-size: 1.5em; }
  .hand-mobile .ritual-card { width: 100%; }
  .mobile-resources-bar .res-chip-lg { font-size: 0.75em; padding: 2px 6px; }
}

/* projected scoring and objective progress */
.score-preview, .objective-progress {
  margin-top: 7px; padding: 7px 8px;
  background: #0f1024; border: 1px solid #2b2b55; border-radius: 7px;
}
.score-preview-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72em; color: var(--gold); font-weight: bold; margin-bottom: 5px;
  letter-spacing: .5px; text-transform: uppercase;
}
.score-preview-title span { font-size: 1.15em; color: var(--text-bright); }
.score-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 8px;
  font-size: 0.68em; line-height: 1.35; color: var(--text-dim);
}
.score-grid strong { color: var(--text); text-align: right; }
.score-grid strong.complete { color: var(--green); }
.score-grid strong.incomplete { color: var(--text-dim); }
.score-grid strong.negative { color: var(--red-danger); }
.objective-row {
  font-size: 0.68em; color: #b8b8d8; padding: 2px 0; line-height: 1.4;
}
.objective-row.complete { color: var(--green); font-weight: bold; }

/* ============================================================ */
/* V7 ADDITIONS                                                */
/* ============================================================ */

/* VP gain pop animation */
@keyframes vpPop {
  0%   { transform: scale(1);   color: inherit; text-shadow: none; }
  35%  { transform: scale(1.4); color: #FFD700; text-shadow: 0 0 12px #FFD700; }
  100% { transform: scale(1);   color: inherit; text-shadow: none; }
}
.vp-pop {
  animation: vpPop 600ms ease-out;
  display: inline-block;
}

/* Color-blind friendly palette overrides (Okabe-Ito) */
body.cb-mode .vp-chip,
body.cb-mode .faction-card-badge { filter: contrast(1.1); }
body.cb-mode [style*="2E7D32"],
body.cb-mode [data-faction="verdant_bloom"] .faction-name { color: #009E73 !important; }
body.cb-mode [data-faction="emberborn_covenant"] .faction-name { color: #D55E00 !important; }
body.cb-mode [data-faction="umbral_circle"] .faction-name { color: #CC79A7 !important; }
body.cb-mode [data-faction="celestial_synod"] .faction-name { color: #0072B2 !important; }
body.cb-mode [data-faction="frostveil_enclave"] .faction-name { color: #56B4E9 !important; }
body.cb-mode [data-faction="serpentkin_circle"] .faction-name { color: #E69F00 !important; }
body.cb-mode .paradox-pip.filled { background: #D55E00 !important; }
body.cb-mode .inst-pip-warn { background: #F0E442 !important; }
body.cb-mode .inst-pip-danger { background: #D55E00 !important; }
body.cb-mode .inst-pip-ok { background: #56B4E9 !important; }

/* Setup screen: per-faction win-rate hint */
.faction-balance-hint {
  font-size: 0.66em; color: #80c9a0; text-align: center;
  margin-top: 4px; opacity: 0.8; font-style: italic;
}

/* Action log panel */
.action-log-panel {
  margin-top: 8px; border: 1px solid var(--border); border-radius: 4px;
  background: #101020; padding: 6px;
}
.action-log-panel summary {
  cursor: pointer; font-size: 0.78em; color: var(--gold); user-select: none;
}
.action-log-entries {
  max-height: 180px; overflow-y: auto; margin-top: 4px;
  font-size: 0.72em; color: var(--text-dim); line-height: 1.4;
}
.action-log-row { padding: 2px 4px; border-bottom: 1px dotted #222; }
.action-log-row:last-child { border-bottom: none; }

/* End game breakdown table */
.gameover-margin {
  text-align: center; color: #b8b8d8; font-size: 0.95em; margin: 8px 0 14px;
}
.gameover-breakdown {
  overflow-x: auto; margin: 12px auto; max-width: 100%;
}
.final-score-table {
  border-collapse: collapse; margin: 0 auto; background: #101020;
  font-size: 0.78em; color: var(--text);
}
.final-score-table th, .final-score-table td {
  padding: 6px 10px; text-align: center; border: 1px solid var(--border);
}
.final-score-table th { background: #1a1a30; color: var(--gold); }
.final-score-table tr.winner-row { background: rgba(255,215,0,0.08); }
.final-score-table tr.winner-row td { font-weight: bold; }


/* ============================================================
   TABLETOP STYLE
   Physical-board direction: wood table, gilded title plaque,
   three painted realms, token trays, and card-like side panels.
   ============================================================ */
:root {
  --v6-wood: #3b2417;
  --v6-wood-dark: #1f120c;
  --v6-brass: #c7a05a;
  --v6-brass-bright: #f0d890;
  --v6-ink: #110d09;
  --v6-panel: rgba(20, 18, 32, .9);
  --v6-card: rgba(29, 26, 44, .94);
  --v6-shadow: 0 18px 42px rgba(0,0,0,.58);
}

html, body {
  background:
    radial-gradient(circle at 50% 18%, rgba(139, 99, 210, .14), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 70px),
    linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 54px),
    linear-gradient(135deg, #0e1020, #131126 45%, #0a0913);
  color: #eadfca;
}

.game-screen:not(.mobile-game-screen) {
  padding: 18px 24px 20px;
  gap: 12px;
  background:
    radial-gradient(ellipse at center, rgba(139, 99, 210, .10), transparent 58%),
    linear-gradient(100deg, rgba(0,0,0,.18), transparent 30%, rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 86px);
}

.game-screen:not(.mobile-game-screen) .top-bar {
  position: relative;
  width: min(760px, 78vw);
  align-self: center;
  min-height: 76px;
  padding: 12px 24px;
  border: 3px solid #3a3160;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 25%),
    radial-gradient(circle at 50% -20%, rgba(225,195,118,.22), transparent 50%),
    linear-gradient(135deg, #1a1d33, #111321 65%, #1a1128);
  box-shadow: var(--v6-shadow), inset 0 0 0 2px rgba(240,216,144,.18);
}
.game-screen:not(.mobile-game-screen) .top-bar::before,
.game-screen:not(.mobile-game-screen) .top-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px; height: 28px;
  border: 3px solid rgba(240,216,144,.45);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 12px rgba(0,0,0,.55);
}
.game-screen:not(.mobile-game-screen) .top-bar::before { left: 18px; }
.game-screen:not(.mobile-game-screen) .top-bar::after { right: 18px; }
.game-title {
  font-size: 1.5em;
  letter-spacing: 4px;
  color: #f6e6ad;
  text-shadow: 0 2px 0 #100a1e, 0 0 18px rgba(240,216,144,.45);
}
.phase-indicator { color: #e6c77d; }
.round-badge, .vp-chip, .btn-rules-ingame {
  border-color: rgba(199,160,90,.45) !important;
  background: rgba(14,13,24,.75) !important;
  color: #f0dfb2 !important;
}

.tabletop-main {
  gap: 14px;
  min-height: 0;
}
.tabletop-board-area {
  padding: 12px;
  border: 3px solid #363058;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%),
    radial-gradient(ellipse at center, rgba(94, 72, 150, .30), transparent 60%),
    rgba(15, 13, 25, .8);
  box-shadow: var(--v6-shadow), inset 0 0 0 2px rgba(229,194,114,.16);
}
.tabletop-board {
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(199,160,90,.55);
  background: #0f0d19;
  box-shadow: inset 0 0 34px rgba(0,0,0,.62);
}
.tabletop-board .zone {
  position: relative;
  border-radius: 0;
  border-width: 0 1px;
  border-color: rgba(236,205,135,.34) !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.12), transparent 19%),
    linear-gradient(180deg, rgba(5,10,8,.08), rgba(0,0,0,.62)),
    var(--zone-bg, #172316) !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,.44);
}
.tabletop-board .zone-past { background-color: #1e1219 !important; }
.tabletop-board .zone-present { background-color: #102219 !important; }
.tabletop-board .zone-future { background-color: #1f1230 !important; }
.tabletop-board .zone::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 15%, transparent 85%, rgba(0,0,0,.22)),
    radial-gradient(circle at 50% 45%, transparent 0 44%, rgba(0,0,0,.28) 70%);
}
.zone-art {
  pointer-events: none;
  display: grid;
  place-items: center;
  min-height: 108px;
  margin: 6px 12px 2px;
  border-radius: 14px;
  opacity: .9;
  background: radial-gradient(circle, rgba(246,222,157,.16), transparent 58%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.zone-art span { font-size: clamp(42px, 5.5vw, 72px); }
.tabletop-board .zone-header {
  justify-content: center;
  gap: 10px;
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(8,7,16,.68), rgba(8,7,16,.18));
  border-bottom: 1px solid rgba(240,216,144,.34);
}
.tabletop-board .zone-name {
  order: 2;
  font-size: 1.35em;
  letter-spacing: 1px;
  color: #fff2c8;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #0d0a18;
}
.tabletop-board .zone-base-res {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 7px;
  border: 1px solid rgba(240,216,144,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
}
.zone-sanctuaries, .zone-druids, .zone-groves { position: relative; z-index: 1; }
.sanctuary, .druid-slot, .grove-slot, .ritual-card, .player-summary, .game-log, .player-panel, .action-panel {
  border-color: rgba(212,177,99,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 16px rgba(0,0,0,.22);
}
.druid-slots, .grove-slots {
  justify-content: center;
  gap: 7px;
}
.druid-slot, .grove-slot {
  width: 44px;
  height: 38px;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  border-radius: 0;
  background: rgba(234,221,176,.08);
}
.druid-token {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(255,240,190,.55);
  box-shadow: 0 4px 9px rgba(0,0,0,.45);
}

.tabletop-side-panel {
  width: 276px;
  padding: 10px;
  border: 3px solid #363058;
  border-radius: 18px;
  background: rgba(19, 17, 30, .85);
  box-shadow: var(--v6-shadow), inset 0 0 0 2px rgba(229,194,114,.12);
}
.player-summary, .game-log, .log-status-panel {
  background: rgba(17, 19, 31, .75) !important;
}
.tabletop-player-area {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 14px;
  padding: 12px;
  border: 3px solid #363058;
  border-radius: 18px;
  background: rgba(20,17,31,.8);
  box-shadow: var(--v6-shadow), inset 0 0 0 2px rgba(229,194,114,.12);
}
.tabletop-player-area .player-panel, .tabletop-player-area .action-panel {
  min-width: 0;
  background: rgba(16,17,28,.86);
}
.ritual-card {
  min-width: 150px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 25%),
    radial-gradient(circle at 50% 12%, rgba(225,195,118,.12), transparent 38%),
    #1c1930;
  border-radius: 8px;
}
.res-chip-lg, .res-chip {
  border: 1px solid rgba(255,235,173,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* V7.9: full-bleed time-flow panorama behind the entire landing screen.
   Art shows clear at the top; indigo rises from ~35% down so cards/text stay readable. */
.setup-screen {
  background:
    linear-gradient(180deg, rgba(11,10,21,0.08) 0%, rgba(11,10,21,0.42) 34%, rgba(11,10,21,0.82) 52%, rgba(11,10,21,0.97) 72%, #0b0a15 100%),
    url('assets/hero.jpg') center top / cover no-repeat fixed;
}
@media (max-width: 768px) {
  /* fixed attachment is unreliable on mobile browsers */
  .setup-screen { background-attachment: scroll, scroll; }
}
.setup-title h1 { color: #f6e6ad; text-shadow: 0 2px 0 #0f0a1e, 0 0 24px rgba(240,216,144,.42); }
.setup-title h2 { color: #d8b66f; }
.faction-card { background: rgba(20,20,34,.9); border-color: rgba(199,160,90,.32); }
.faction-card:hover, .faction-card.selected { border-color: var(--v6-brass-bright) !important; }

@media (max-width: 1100px) {
  .tabletop-side-panel { width: 230px; }
  .tabletop-player-area { grid-template-columns: 1fr; max-height: 36vh; overflow-y: auto; }
}
@media (max-width: 768px) {
  .mobile-game-screen { background: linear-gradient(135deg, #0e1020, #1a1530); }
  .mobile-tab-content { background: rgba(15,13,25,.8); }
}


/* Guided teaching-game coach */
.guided-tutorial-coach {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  width: min(390px, calc(100vw - 28px));
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 13px 14px;
  border: 2px solid #f0d890;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%),
    rgba(16, 13, 27, .97);
  color: #f5e8c8;
  box-shadow: 0 18px 48px rgba(0,0,0,.62), 0 0 28px rgba(240,216,144,.26);
  font-family: Georgia, serif;
}
.guided-tutorial-coach.intro {
  left: 50%; right: auto; bottom: 50%;
  transform: translate(-50%, 50%);
  width: min(520px, calc(100vw - 32px));
}
.gtc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gtc-top strong { color: #ffe7a4; font-size: 1.08em; letter-spacing: .4px; }
.gtc-top button {
  border: 1px solid rgba(240,216,144,.35); background: rgba(0,0,0,.32);
  color: #f5e8c8; border-radius: 999px; width: 28px; height: 28px; cursor: pointer;
}
.gtc-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; margin: 7px 0; line-height: 1.35; }
.gtc-row span {
  align-self: start; text-align: center; padding: 2px 6px; border-radius: 999px;
  background: rgba(240,216,144,.15); color: #f0d890; font-size: .75em; font-weight: bold; text-transform: uppercase;
}
.gtc-row p { margin: 0; font-size: .92em; color: #eadfca; }
.gtc-hint { margin-top: 9px; font-size: .78em; color: #bcae8e; font-style: italic; }
.gtc-primary {
  width: 100%; margin-top: 10px; padding: 10px 14px; cursor: pointer;
  border-radius: 10px; border: 1px solid #f0d890;
  background: linear-gradient(135deg, #4a3a78, #8a63d2);
  color: white; font-family: inherit; font-weight: bold; letter-spacing: .6px;
}
.guided-spotlight, .guided-softlight, .guided-recommended {
  position: relative;
  z-index: 20;
}
.guided-spotlight {
  outline: 3px solid #ffe082 !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(255,224,130,.16), 0 0 28px rgba(255,224,130,.72) !important;
}
.guided-softlight {
  outline: 2px solid rgba(255,224,130,.58) !important;
  outline-offset: 2px;
}
.guided-recommended {
  border-color: #ffe082 !important;
  animation: guidedPulse 1.15s ease-in-out infinite;
}
.guided-recommended::after {
  content: "Recommended";
  position: absolute;
  right: 8px;
  top: -10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ffe082;
  color: #231407;
  font-size: 10px;
  font-weight: bold;
  pointer-events: none;
}
@keyframes guidedPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,224,130,.32), inset 0 0 0 1px rgba(255,255,255,.06); }
  50% { box-shadow: 0 0 0 6px rgba(255,224,130,.16), 0 0 22px rgba(255,224,130,.42); }
}
@media (max-width: 768px) {
  .guided-tutorial-coach {
    left: 10px; right: 10px; bottom: 74px;
    width: auto; max-height: 42vh;
    padding: 11px 12px;
  }
  .guided-tutorial-coach.intro { bottom: 50%; left: 50%; right: auto; width: calc(100vw - 24px); }
  .gtc-row { grid-template-columns: 48px 1fr; }
  .gtc-row p { font-size: .86em; }
}

/* ============================================================
   V7.9 PRESENTATION LAYER
   Zone scenes, setup hero, card frames, board chrome.
   Scoped additively: cb-mode faction colors are untouched.
   ============================================================ */

/* ── App chrome: the Temporal Void ──
   Deep midnight indigo with a violet aurora from above and faint zone-colored
   glows in the corners (amber = Past, green = Present, magenta = Future).
   Dark blue-violet lets the gold titles and painterly art carry the page. */
body {
  background:
    radial-gradient(1400px 900px at 50% -12%, rgba(139, 99, 210, 0.18), transparent 62%),
    radial-gradient(1000px 700px at 108% 108%, rgba(212, 175, 55, 0.07), transparent 58%),
    radial-gradient(900px 650px at -8% 105%, rgba(46, 125, 80, 0.08), transparent 58%),
    radial-gradient(1100px 500px at 82% -6%, rgba(216, 84, 173, 0.07), transparent 55%),
    linear-gradient(178deg, #0e1020 0%, #131126 42%, #0a0913 100%);
  background-attachment: fixed;
}
/* Time-dust: two offset speckle layers, barely visible, fixed so it feels ambient */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 22px 34px, rgba(210, 200, 255, 0.14), transparent 55%),
    radial-gradient(1px 1px at 130px 96px, rgba(255, 235, 190, 0.10), transparent 55%),
    radial-gradient(1.4px 1.4px at 74px 150px, rgba(190, 220, 255, 0.08), transparent 55%);
  background-size: 260px 220px, 340px 280px, 420px 360px;
}
/* Edge vignette pulls focus to the board */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 60%, rgba(4, 3, 10, 0.55) 100%);
}

/* ── Zone scenes: atmospheric SVG layer under all zone content ── */
.zone { position: relative; }
.zone-scene {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.5; pointer-events: none; overflow: hidden;
}
.zone-scene svg { width: 100%; height: 100%; display: block; }
.zone > *:not(.zone-scene) { position: relative; z-index: 1; }
/* Danger states tint the scene, not fight it */
.zone-dangerous .zone-scene { opacity: 0.35; filter: saturate(1.4) hue-rotate(-12deg); }
.zone-collapsed .zone-scene { opacity: 0.18; filter: grayscale(0.9); }

/* Carved-panel look */
.zone {
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.16),
    inset 0 2px 14px rgba(0,0,0,0.55),
    0 3px 10px rgba(0,0,0,0.45);
}

/* ── Setup hero: title floats directly on the full-bleed panorama (see .setup-screen).
   Only a soft localized glow behind the title for readability — no boxed banner. ── */
.setup-hero {
  position: relative;
  margin: -12px -12px 18px -12px;
  padding: 56px 16px 40px;
  background: radial-gradient(ellipse 60% 80% at 50% 45%, rgba(8,7,16,0.52), transparent 78%);
  border-bottom: none;
  box-shadow: none;
  text-align: center;
}
.setup-hero .setup-title h1 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 32px rgba(255,215,0,0.25);
  letter-spacing: 6px;
}
.setup-hero .setup-title h2 { text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
.setup-hero .setup-subtitle { text-shadow: 0 1px 4px rgba(0,0,0,0.95); color: #e8dcc0; }
@media (max-width: 700px) {
  .setup-hero { padding: 26px 12px 18px; }
  .setup-hero .setup-title h1 { letter-spacing: 3px; }
}

/* ── Card frames ── */
.ritual-card {
  background:
    repeating-linear-gradient(-3deg, rgba(255,248,225,0.02) 0 3px, transparent 3px 7px),
    linear-gradient(170deg, #201d33 0%, #191627 55%, #131020 100%);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,235,190,0.06);
  overflow: hidden;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ritual-card .card-header {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-color, #666) 55%, #141414),
    color-mix(in srgb, var(--cat-color, #666) 30%, #101010));
  border-bottom: 1px solid color-mix(in srgb, var(--cat-color, #666) 60%, transparent);
  padding: 4px 7px;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.ritual-card .card-cat-icon { color: #f5e9c8; opacity: 0.95; }
.ritual-card .card-body { position: relative; }
.card-sigil-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.09; color: #ffd700; pointer-events: none; z-index: 0;
}
.ritual-card .card-desc, .ritual-card .faction-card-badge { position: relative; z-index: 1; }
.ritual-card .card-cost { padding: 4px 6px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cost-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; font-size: 0.78em; font-weight: 700;
  background: radial-gradient(circle at 35% 30%, #322c48, #1a1728);
  border: 1px solid rgba(212,175,55,0.35);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.cost-free { font-size: 0.72em; color: #8fa87a; font-style: italic; }
.ritual-card.clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.65), 0 0 12px color-mix(in srgb, var(--cat-color, #ffd700) 30%, transparent);
}
.ritual-card.unaffordable { opacity: 0.55; filter: saturate(0.6); }

/* ── Top bar: brushed metal ── */
.top-bar {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #262630 0%, #16161e 100%);
  border-bottom: 1px solid rgba(212,175,55,0.5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ── Buttons: gentle 3D press ── */
.btn-action, .btn-start, .btn-tutorial, .tut-btn {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.16));
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}
.btn-action:hover:not(:disabled), .btn-start:hover:not(:disabled), .btn-tutorial:hover { filter: brightness(1.12); }
.btn-action:active:not(:disabled), .btn-start:active:not(:disabled), .btn-tutorial:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.3);
}

/* ── V7.9 Typography: ceremonial display + readable body ── */
.setup-title h1, .setup-title h2, .zone-name, .modal-title, .tutorial-title,
.rules-modal-header h1, .log-title, .setup-section h3 {
  font-family: 'Cinzel', 'Georgia', serif;
}
body, .card-desc, .tutorial-body, .rules-content, .faction-tagline, .gtc-row p {
  font-family: 'Alegreya', 'Georgia', serif;
}
.faction-tagline { font-style: italic; }
button, input, select, .res-chip, .cost-chip, .round-badge {
  font-family: 'Alegreya', 'Segoe UI', sans-serif;
}

/* ── V7.9 Optional illustrated assets (auto-detected by probeArtAssets) ── */
.zone-scene-art {
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.zone.has-art { border-color: color-mix(in srgb, var(--zone-color) 70%, #d4af37); }
.faction-card { position: relative; overflow: hidden; }
.faction-portrait {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 20%;
  opacity: 0.22; pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25) 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25) 75%);
}
.faction-card.has-portrait > *:not(.faction-portrait) { position: relative; z-index: 1; }
.faction-card.has-portrait .faction-name, .faction-card.has-portrait .faction-tagline {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ── V7.9 Logo emblem (auto-detected assets/logo.jpg) ── */
.setup-logo-emblem {
  width: clamp(110px, 16vw, 170px);
  height: auto;
  border-radius: 50%;
  /* Emblem sits on near-black; radial mask melts its square edges into the hero */
  -webkit-mask-image: radial-gradient(circle, black 62%, transparent 74%);
  mask-image: radial-gradient(circle, black 62%, transparent 74%);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.7)) drop-shadow(0 0 26px rgba(212,175,55,0.35));
  margin-bottom: 6px;
}

/* ── V7.9 Paths to Victory panel ── */
.victory-paths {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(20, 18, 34, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 6px;
}
.victory-path-row {
  font-size: 0.72em; line-height: 1.55; color: #d8cfae;
  display: flex; justify-content: space-between; gap: 8px;
}
.victory-path-row strong { color: var(--gold, #ffd700); }

/* ── V8: instability danger forecast ── */
.inst-forecast {
  font-size: 0.62em; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; color: #e8c36a;
  background: rgba(184, 134, 11, 0.18); border: 1px solid rgba(184, 134, 11, 0.45);
  white-space: nowrap;
}
.inst-forecast.danger {
  color: #ff8f8f; background: rgba(155, 32, 67, 0.22); border-color: rgba(200, 60, 80, 0.55);
  animation: pulse 2s infinite;
}

/* ── V8: faction opening hint ── */
.faction-opening {
  margin-top: 6px; padding: 5px 8px; font-size: 0.68em; line-height: 1.5;
  color: #cfe3b8; background: rgba(46, 125, 50, 0.12);
  border-left: 2px solid rgba(102, 187, 106, 0.5); border-radius: 0 5px 5px 0;
  text-align: left;
}

/* ── V8: quick rules ── */
.quick-rules {
  max-width: 640px; margin: 0 auto; line-height: 1.65; font-size: 0.92em;
}
.quick-rules h3 { color: var(--gold, #ffd700); margin: 14px 0 4px; }
.quick-rules .qr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 600px) { .quick-rules .qr-cols { grid-template-columns: 1fr; } }