/* ============================================================
   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: #3a2010; color: #d4a060; }
.res-chip.essence   { background: #0a200c; color: #66bb6a; }
.res-chip.energy    { background: #302000; color: #ffd740; }
.res-chip.influence { background: #0a1530; 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 { opacity: 0.5; filter: grayscale(0.8); }
.zone:not(.collapsed):hover { border-color: color-mix(in srgb, var(--zone-color) 80%, white); }

.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: #2a1a0e; border: 1px solid #6B4226; }
.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: #8B4513; } .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; }
}