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

body {
  background: #1a1a2e;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;
  overflow: hidden;
  font-family: sans-serif;
  color: #eee;
}

.hidden { display: none !important; }

/* ── Selection Screen ── */

#selection-screen {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sel-header {
  text-align: center;
  padding: 16px 16px 8px;
  flex-shrink: 0;
  position: relative;
}

.sel-tab-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px;
}

#sel-nav {
  flex-shrink: 0;
  display: flex;
  border-top: 1px solid #1e2f55;
  background: #0a1628;
}

.sel-nav-btn {
  flex: 1;
  padding: 14px 8px;
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  color: #555;
  font-size: 0.9rem;
  font-family: sans-serif;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.sel-nav-btn.sel-nav-active {
  color: #80d8ff;
  border-top-color: #80d8ff;
}

#sel-mission-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #80d8ff;
  letter-spacing: 0.05em;
}

#sel-mission-desc {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 4px;
}

#sel-hero-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}


.sel-map-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  margin-top: 8px;
}

#sel-hero-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-card {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 2px solid #333;
  border-radius: 8px;
  background: #16213e;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.hero-card.selected {
  border-color: #80d8ff;
  background: #0f3460;
}

.hero-card-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.hero-card-name {
  font-size: 0.7rem;
  text-align: center;
  color: #ccc;
  line-height: 1.2;
}

.hero-card-checkmark {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.7rem;
  color: #80d8ff;
  display: none;
}

.hero-card.selected .hero-card-checkmark {
  display: block;
}

/* ── Map Cards ── */

.map-card {
  border: 2px solid #333;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #16213e;
  width: 100%;
}

.map-card:active {
  border-color: #80d8ff;
}

.map-card-title {
  font-size: 0.7rem;
  color: #aaa;
  text-align: center;
  padding: 4px 2px;
  border-bottom: 1px solid #222;
}

/* ── Land Cards ── */

.land-card {
  display: flex;
  align-items: stretch;
  border: 2px solid #333;
  border-radius: 8px;
  overflow: hidden;
  background: #16213e;
  cursor: pointer;
  user-select: none;
}

.land-card.locked {
  opacity: 0.38;
  cursor: default;
}

/* Paywall-locked lands: visible but completely uninteractable */
.land-card.paywall-locked {
  opacity: 0.38;
  pointer-events: none;
}

.land-card:not(.locked):not(.paywall-locked):active {
  border-color: #80d8ff;
}

/* Paywall banner between free and premium lands */
.paywall-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 2px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
}
.paywall-banner-text {
  font-size: 0.8rem;
  color: #aaa;
}
.paywall-unlock-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: #1565c0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
  white-space: nowrap;
}

.land-card-accent {
  width: 5px;
  flex-shrink: 0;
}

.land-card-text {
  flex: 1;
  padding: 10px 16px;
}

.land-card-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.land-card-name {
  font-size: 1rem;
  font-weight: bold;
  color: #e0e0e0;
}

.land-card-desc {
  font-size: 0.82rem;
  color: #888;
  margin-top: 3px;
}

#sel-reset-btn {
  width: 100%;
  padding: 7px;
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  background: transparent;
  color: #555;
  font-family: sans-serif;
  margin-bottom: 8px;
}

/* ── Settings Panel ── */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #1e2f55;
}

.settings-row-label {
  font-size: 0.95rem;
  color: #ddd;
  font-weight: bold;
}

.settings-row-desc {
  font-size: 0.78rem;
  color: #666;
  margin-top: 2px;
}

.settings-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
}

.settings-btn-danger {
  background: #7f1d1d;
  color: #fca5a5;
}

.settings-btn-premium {
  background: #1565c0;
  color: #fff;
}

.settings-section-header {
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a6fa0;
  padding: 18px 0 4px;
}

.settings-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  accent-color: #4a90d9;
  cursor: pointer;
}

/* ── Map Preview Overlay ── */

#map-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#map-preview-canvas {
  max-width: 90vw;
  max-height: 90dvh;
}

/* ── Hero Info Overlay ── */

#hero-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 101;
  overflow-y: auto;
  padding: 20px 16px;
}

#hero-info-panel {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#hero-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: bold;
}

#hero-info-swatch {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.move-card {
  background: #16213e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.move-card-name {
  font-weight: bold;
  font-size: 1rem;
  color: #80d8ff;
}

.move-card-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.move-card-diagram {
  flex-shrink: 0;
  border-radius: 4px;
  background: #0d1b2a;
}

.move-card-text {
  flex: 1;
}

.move-card-desc {
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.4;
}

.move-card-stats {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #ffd020;
}

/* ── Victory Splash ── */

#victory-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 200;
}

#victory-text {
  font-size: clamp(3rem, 18vw, 7rem);
  font-weight: bold;
  color: #ffd020;
  text-shadow: 0 0 40px rgba(255,208,32,0.6), 0 4px 8px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
}

#victory-sub {
  font-size: 1.1rem;
  color: #aaa;
}

#victory-rewards,
#defeat-rewards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  width: 90%;
}

.reward-line {
  font-size: 1rem;
  color: #e0e0e0;
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 4px 14px;
  width: 100%;
  text-align: center;
}

.reward-levelup {
  color: #ffd020;
  font-weight: bold;
  background: rgba(255,208,32,0.12);
}

.reward-shard {
  color: #80cbc4;
  background: rgba(128,203,196,0.12);
}

.reward-exp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 14px;
}

.reward-exp-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #e0e0e0;
}

.reward-exp-levelling .reward-exp-label {
  color: #ffd020;
  font-weight: bold;
}

.reward-exp-level {
  color: #e0e0e0;
  font-size: 0.8rem;
  align-self: center;
}

.reward-exp-levelling .reward-exp-level {
  color: #ffd020;
  font-weight: bold;
}

.reward-exp-improvement {
  font-size: 1.05rem;
  font-weight: bold;
  color: #ffd020;
  margin-top: 4px;
}

.reward-exp-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.reward-exp-fill {
  height: 100%;
  background: #42a5f5;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.reward-exp-sources {
  font-size: 0.75rem;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.reward-src-row {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

/* ── Defeat Splash ── */

#defeat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 200;
}

#defeat-text {
  font-size: clamp(3rem, 18vw, 7rem);
  font-weight: bold;
  color: #ef5350;
  text-shadow: 0 0 40px rgba(239,83,80,0.6), 0 4px 8px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
}

#defeat-sub {
  font-size: 1.1rem;
  color: #aaa;
}

/* ── Game Screen ── */

#game-screen {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ui-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px;
  height: 36px;
  box-sizing: border-box;
  background: #16213e;
  flex-shrink: 0;
}

#turn-label {
  font-size: 1rem;
  font-weight: bold;
  flex: 1;
}

#pass-btn {
  padding: 2px 12px;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #ccc;
  font-family: sans-serif;
  flex-shrink: 0;
  visibility: visible;
}

#objective-label {
  font-size: 0.8rem;
  font-weight: bold;
  flex: 1;
  text-align: right;
}

#objective-label.obj-red    { color: #ef5350; }
#objective-label.obj-yellow { color: #ffd020; }
#objective-label.obj-green  { color: #66bb6a; }

#map-name-label {
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  color: #7890a8;
  padding: 1px 0;
  flex-shrink: 0;
  min-height: 0;
}
#map-name-label:empty { display: none; }

#game-canvas {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
}

#action-log {
  width: 100%;
  height: 90px;
  background: #16213e;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #aad4f5;
  overflow-y: auto;
}

/* ── Run Continue Overlay ── */

#run-continue-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; z-index: 200;
}
#run-continue-text { font-size: 1.4rem; color: #ffd020; font-weight: bold; }
#run-continue-btn, #run-home-btn {
  font-size: 1.1rem; padding: 12px 32px;
  border-radius: 8px; border: none; cursor: pointer;
  font-family: sans-serif;
}
#run-continue-btn { background: #444; color: #ccc; }
#run-home-btn { background: #1565c0; color: #fff; }

/* ── Land Unlock Hints ── */

.land-unlock-hint { font-size: 0.8rem; white-space: nowrap; }
.debug-challenge-btn { padding: 4px 10px; font-size: 0.75rem; background: #3a2a00; color: #ffd020; border: 1px solid #665500; border-radius: 4px; cursor: pointer; font-family: sans-serif; white-space: nowrap; }
.settings-debug-section { margin-top: 14px; border-top: 1px solid #333; padding-top: 10px; }
.settings-debug-toggle { width: 100%; text-align: left; padding: 8px 10px; background: #1e1e1e; color: #aaa; border: 1px solid #444; border-radius: 6px; font-size: 0.82rem; cursor: pointer; font-family: sans-serif; }
.settings-debug-content { padding: 8px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.settings-debug-land { font-size: 0.72rem; color: #888; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.settings-debug-land-toggle { width: 100%; text-align: left; padding: 5px 8px; background: #181818; color: #999; border: 1px solid #333; border-radius: 4px; font-size: 0.75rem; cursor: pointer; font-family: sans-serif; margin-top: 4px; }
.land-unlock-ready { color: #ffd020; }
.land-unlock-locked { color: #888; }
.land-unlock-done { color: #4caf50; }

/* ── Shard Display ── */

#sel-shard-display {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 0.85rem;
  color: #ffd020;
  font-weight: bold;
}

.hero-select-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 14px;
}

.hero-select-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s, opacity 0.1s;
  display: block;
}

.hero-select-icon.selected {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.hero-select-icon:not(.selected) {
  opacity: 0.32;
  filter: grayscale(0.4);
}

.hero-select-icon:active {
  transform: scale(0.88);
}

.hero-select-hint {
  text-align: center;
  font-size: 0.72rem;
  color: #888;
  margin-top: -8px;
  padding-bottom: 4px;
}

/* Selection screen action row */

.sel-action-row {
  display: flex;
  gap: 8px;
}

#sel-party-btn {
  flex: 1;
  padding: 9px;
  border: 1px solid #1a4a7a;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: bold;
  cursor: pointer;
  background: #0d2847;
  color: #80d8ff;
  font-family: sans-serif;
}

#sel-reset-btn {
  padding: 9px 14px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  background: transparent;
  color: #555;
  font-family: sans-serif;
}

/* ── History Tab ── */

#unlock-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-land-header {
  font-size: 0.7rem;
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 0 4px 8px;
  border-left: 3px solid #444;
  margin-top: 6px;
}

.history-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.history-item {
  flex: 1;
  min-width: 0;
  border: 1px solid #1e2f55;
  border-radius: 6px;
  background: #0f1a2e;
  overflow: hidden;
}

.history-summary {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ccc;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.history-summary::-webkit-details-marker { display: none; }

.history-summary::before {
  content: '▸';
  margin-right: 8px;
  color: #555;
  font-size: 0.75rem;
  transition: transform 0.15s;
}

details[open] > .history-summary::before {
  content: '▾';
}

.history-body {
  padding: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #1e2f55;
  padding-top: 10px;
}

.history-beat {
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
}

.history-speaker {
  font-weight: bold;
  color: #80d8ff;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.history-replay-btn {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 12px;
  font-size: 0.8rem;
  background: #1a3a6a;
  color: #80d8ff;
  border: 1px solid #2a5a9a;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  white-space: nowrap;
}

.history-replay-btn:active {
  background: #1565c0;
}

.history-empty {
  font-size: 0.85rem;
  color: #444;
  text-align: center;
  padding: 32px 0;
}

/* ── Dialog Overlay ── */

#dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 150;
  padding: 16px;
}

#dialog-box {
  width: 100%;
  max-width: 480px;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


#dialog-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}

.dialog-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dialog-entry-speaker {
  font-size: 0.75rem;
  font-weight: bold;
  color: #80d8ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dialog-entry-text {
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.5;
}

#dialog-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.dialog-choice-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #2a3a5a;
  border-radius: 6px;
  background: #16213e;
  color: #ccc;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  font-family: sans-serif;
}

#dialog-tap-hint {
  font-size: 0.75rem;
  color: #444;
  text-align: right;
}

/* ── Dialog History Overlay ── */

#history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 160;
  padding: 16px;
  overflow-y: auto;
}

#history-panel {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #2a3a5a;
  font-size: 0.85rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#history-close-btn {
  font-size: 0.8rem;
  color: #80d8ff;
  background: transparent;
  border: 1px solid #2a3a5a;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: sans-serif;
}

#history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

.history-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-entry-speaker {
  font-size: 0.72rem;
  font-weight: bold;
  color: #80d8ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history-entry-text {
  font-size: 0.9rem;
  color: #bbb;
  line-height: 1.5;
}

/* ── Training Overlay ── */

#training-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 160;
  padding: 16px;
}

#training-box {
  width: 100%;
  max-width: 380px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
#training-box::-webkit-scrollbar { display: none; }

#training-title {
  font-size: 0.75rem;
  color: #ffd020;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#training-hero-name {
  font-size: 0.85rem;
  color: #888;
}

#training-move-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #80d8ff;
}

#training-diagram {
  align-self: center;
  border-radius: 6px;
  background: #0d1b2a;
}

#training-move-desc {
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.4;
}

#training-btns {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

#training-learn-btn, #training-continue-btn, #training-home-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
}

#training-learn-btn { background: #1565c0; color: #fff; }
#training-continue-btn { background: #444; color: #ccc; }
#training-home-btn { background: #1565c0; color: #fff; }

#training-story {
  font-size: 0.88rem;
  color: #bbb;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a3a5a;
  margin-bottom: 4px;
}
#training-story p { margin-bottom: 6px; }
#training-story p:last-child { margin-bottom: 0; }
#training-story em { color: #80d8ff; font-style: normal; }

/* ── Mechanic Tutorial Overlay ── */

#mechanic-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 160;
  padding: 16px;
}

#mechanic-box {
  width: 100%;
  max-width: 380px;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

#mechanic-title {
  font-size: 0.75rem;
  color: #ffd020;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mechanic-section {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: #16213e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 10px;
}

.mechanic-section-diagram {
  flex-shrink: 0;
  border-radius: 4px;
  background: #0d1b2a;
}

.mechanic-section-desc {
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.4;
}

#mechanic-got-it-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
  background: #1565c0;
  color: #fff;
}

/* ── Hero Join Selection Overlay ── */

#hero-join-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 170;
  padding: 16px;
}

#hero-join-box {
  width: 100%;
  max-width: 380px;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

#hero-join-title {
  font-size: 0.75rem;
  color: #ffd020;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#hero-join-new-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#hero-join-new-icon {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
}

#hero-join-new-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #e8e8e8;
}

#hero-join-prompt {
  font-size: 0.85rem;
  color: #aaa;
}

#hero-join-party-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}

#hero-join-count {
  font-size: 0.8rem;
  color: #888;
}

#hero-join-confirm-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
  background: #1565c0;
  color: #fff;
}

#hero-join-confirm-btn:disabled {
  background: #333;
  color: #666;
  cursor: default;
}

/* ── Voidlands Complete Overlay ── */

#voidlands-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 170;
  padding: 16px;
}

#voidlands-complete-box {
  width: 100%;
  max-width: 380px;
  background: #0d0d1a;
  border: 1px solid #4a2a6a;
  border-radius: 12px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

#voidlands-complete-title {
  font-size: 1.2rem;
  color: #ffd020;
  font-weight: bold;
  letter-spacing: 0.05em;
}

#voidlands-complete-text {
  font-size: 0.85rem;
  color: #b0b8cc;
  line-height: 1.6;
}

#voidlands-complete-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

#voidlands-play-again-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
  background: #7b1fa2;
  color: #fff;
}

#voidlands-home-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: sans-serif;
  background: #1565c0;
  color: #fff;
}

/* ── Hero Required for Unlock Overlay ── */

#hero-req-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 170;
  padding: 16px;
}

#hero-req-box {
  width: 100%;
  max-width: 380px;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

#hero-req-title {
  font-size: 0.75rem;
  color: #ffd020;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#hero-req-desc {
  font-size: 0.85rem;
  color: #b0b8cc;
  line-height: 1.5;
}

#hero-req-hero-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
}

.hero-icon-wrapper {
  position: relative;
  display: inline-block;
}

.hero-icon-wrapper.hero-req-needed {
  background-image:
    linear-gradient(#ffd020, #ffd020), linear-gradient(#ffd020, #ffd020),
    linear-gradient(#ffd020, #ffd020), linear-gradient(#ffd020, #ffd020),
    linear-gradient(#ffd020, #ffd020), linear-gradient(#ffd020, #ffd020),
    linear-gradient(#ffd020, #ffd020), linear-gradient(#ffd020, #ffd020);
  background-size:
    2px 10px, 10px 2px,
    2px 10px, 10px 2px,
    2px 10px, 10px 2px,
    2px 10px, 10px 2px;
  background-position:
    left 0 top 0,    left 0 top 0,
    right 0 top 0,   right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0;
  background-repeat: no-repeat;
}

#hero-req-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#hero-req-start-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
  background: #1565c0;
  color: #fff;
}

#hero-req-back-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: sans-serif;
  background: transparent;
  color: #888;
}

/* ── Patreon / Purchase Overlay ── */

.purchase-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
}

.purchase-box {
  width: 100%;
  max-width: 360px;
  background: #0f1b35;
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.purchase-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffd020;
  text-align: center;
  letter-spacing: 0.04em;
}

.purchase-desc {
  font-size: 0.88rem;
  color: #b0b8cc;
  text-align: center;
  line-height: 1.5;
}

.purchase-desc a {
  color: #80d8ff;
  text-decoration: underline;
}

.purchase-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #2a3a5a;
  border-radius: 8px;
  background: #16213e;
  color: #e0e8ff;
  font-size: 1rem;
  font-family: sans-serif;
  outline: none;
  text-align: center;
  letter-spacing: 0.08em;
}

.purchase-input:focus {
  border-color: #1565c0;
}

.purchase-error {
  font-size: 0.82rem;
  color: #ef5350;
  text-align: center;
}

.purchase-btns {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.purchase-cancel-btn {
  flex: 1;
  padding: 11px;
  border: 1px solid #444;
  border-radius: 8px;
  background: transparent;
  color: #888;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: sans-serif;
}

.purchase-unlock-btn {
  flex: 2;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: #1565c0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  font-family: sans-serif;
}