/* File: src/styles/settings.css */
/* ─────────────────────────────────────────────────────────────────────────────
   settings.css — four-tab settings overlay
   ────────────────────────────────────────────────────────────────────────── */

/* ── Overlay root ───────────────────────────────────────────────────────── */
#settings-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

#settings-overlay.is-active {
  display: flex;
}

/* ── Panel wrapper ──────────────────────────────────────────────────────── */
.settings-panel {
  width: min(720px, 96vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.settings-header {
  text-align: center;
  margin-bottom: 12px;
  flex-shrink: 0;
  padding-top: 20px;
}

.settings-title {
  font-size: clamp(calc(16px * var(--txt-scale)), 3.3vw, calc(28px * var(--txt-scale)));
  font-weight: 900;
  background: linear-gradient(90deg, #5a9e30, #9ad450, #5a9e30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-subtitle {
  font-size: calc(12px * var(--txt-scale));
  color: rgba(140, 200, 85, 0.85);
  margin-top: 4px;
}

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.settings-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  border-bottom: 1px solid #1a3412;
  padding-bottom: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
}

.stab {
  font-family: 'ShareTechMono', monospace;
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  padding: 6px 16px;
  cursor: pointer;
  border: 1px solid #1e3412;
  border-bottom: none;
  background: rgba(10, 18, 6, 0.60);
  color: #8fce50;
  transition: background 0.12s, color 0.12s;
  position: relative;
  top: 1px;
}

.stab:hover {
  background: rgba(30, 60, 15, 0.75);
  color: #c0ee80;
}

.stab--active {
  background: rgba(20, 42, 10, 0.95);
  color: #d8ffb0;
  border-color: #2a4a18;
  border-bottom: 1px solid rgba(20, 42, 10, 0.95);
}

/* ── Scrollable body — GameScroll target ────────────────────────────────── */
.settings-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding-right: 12px;
}

/* ── Pane container ─────────────────────────────────────────────────────── */
.settings-pane {
  min-height: 200px;
  padding: 10px 0 4px;
}

.settings-pane-desc {
  font-size: calc(12px * var(--txt-scale));
  color: rgba(180, 230, 120, 0.90);
  margin: 6px 0 14px;
  line-height: 1.5;
}

.settings-section-label {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #8fce50;
  border-bottom: 1px solid rgba(143, 206, 80, 0.4);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

/* ── Zombie Population preset buttons ───────────────────────────────────── */
.zombie-pop-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.zombie-pop-preset-btn {
  font-family: 'ShareTechMono', monospace;
  font-size: calc(11px * var(--txt-scale));
  font-weight: bold;
  padding: 5px 11px;
  cursor: pointer;
  border: 1px solid #2a4a18;
  background: rgba(14, 28, 10, 0.70);
  color: #a0e060;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.zombie-pop-preset-btn:hover {
  background: rgba(40, 80, 20, 0.80);
  border-color: #5a9030;
  color: #c0ee80;
}

/* ── Population slider wrapper ──────────────────────────────────────────── */
.zombie-pop-slider-wrap {
  background: rgba(14, 26, 10, 0.60);
  border: 1px solid #1a3010;
  padding: 10px 12px 12px;
  margin-bottom: 4px;
}

/* ── Generic slider grid (world / player tabs) ──────────────────────────── */
.settings-world-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-world-grid--biomes {
  gap: 14px;
  margin-bottom: 16px;
}

.generic-slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(14, 26, 10, 0.60);
  border: 1px solid #1a3010;
  padding: 8px 12px;
}

.gsr-header {
  display: flex;
  align-items: flex-start; /* Changed from baseline so multi-line text stays aligned nicely */
  justify-content: space-between;
  gap: 8px;
}

.gsr-label {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #a0e060;
  width: 15ch;
  flex-shrink: 0;
  padding-top: 1px; /* Visual alignment with wrapped text */
}

.gsr-desc {
  font-size: calc(11px * var(--txt-scale));
  color: rgba(180, 230, 120, 0.90);
  flex: 1;
  line-height: 1.3;
  /* Removed overflow/ellipsis/nowrap to allow natural multi-line wrapping */
}

.gsr-value {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #c0ee80;
  width: 9ch;
  text-align: right;
  flex-shrink: 0;
  padding-top: 1px; /* Visual alignment with wrapped text */
}

/* ── Biome presets ──────────────────────────────────────────────────────── */
.settings-biome-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.biome-preset-btn {
  font-family: 'ShareTechMono', monospace;
  font-size: calc(11px * var(--txt-scale));
  font-weight: bold;
  padding: 5px 12px;
  cursor: pointer;
  border: 1px solid #2a4a18;
  background: rgba(14, 28, 10, 0.70);
  color: #a0e060;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.biome-preset-btn:hover {
  background: rgba(40, 80, 20, 0.80);
  border-color: #5a9030;
  color: #c0ee80;
}

/* ── Biome preview bar ──────────────────────────────────────────────────── */
.biome-preview {
  margin-top: 4px;
}

.biome-bar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border: 1px solid #1a3010;
}

.biome-bar-seg {
  height: 100%;
  transition: width 0.2s;
  min-width: 0;
}

.biome-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: calc(11px * var(--txt-scale));
  font-weight: bold;
}

/* ── Zombie cards ────────────────────────────────────────────── */
.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.settings-card {
  background: rgba(14, 26, 10, 0.80);
  border: 1px solid #2a4a18;
  padding: 10px 14px 14px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s;
}

.settings-card--disabled { opacity: 0.42; }

.card-accentbar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0.7;
}
.settings-card--disabled .card-accentbar { opacity: 0.3; }

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

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

.card-name {
  font-size: calc(14px * var(--txt-scale)); font-weight: bold; color: #b0e870; flex-shrink: 0;
}

.card-tagline {
  font-size: calc(11px * var(--txt-scale)); color: rgba(180, 230, 120, 0.90); flex: 1;
  /* Removed overflow/ellipsis/nowrap to allow natural multi-line wrapping */
  line-height: 1.3;
}

.card-toggle {
  font-size: calc(11px * var(--txt-scale)); font-weight: bold; padding: 4px 10px; cursor: pointer;
  border: 1px solid; font-family: 'ShareTechMono', monospace; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.card-toggle--on  { background: rgba(28,68,14,0.75); border-color: #4a8a28; color: #90e050; }
.card-toggle--on:hover  { background: rgba(50,110,25,0.85); }
.card-toggle--off { background: rgba(44,12,12,0.75); border-color: #5a1a1a; color: #a04040; }
.card-toggle--off:hover { background: rgba(80,18,18,0.85); }

.card-body { display: flex; gap: 0; align-items: flex-start; }
.card-body--disabled { opacity: 0.4; pointer-events: none; }
.card-divider { width:1px; align-self: stretch; background: rgba(40,70,22,0.30); margin: 0 14px; flex-shrink: 0; }
.card-col { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.card-col-label { font-size:calc(10px * var(--txt-scale)); font-weight:bold; color:rgba(160, 210, 100, 0.90); letter-spacing:0.06em; margin-bottom:2px; }

/* ── Shared slider styles ────────────────────────────────────────────────── */
.slider-row {
  display: flex; align-items: center; gap: 8px;
}

.slider-label {
  font-size: calc(11px * var(--txt-scale)); 
  color: rgba(180, 230, 120, 0.90); 
  width: 8ch; 
  flex-shrink: 0;
}

.slider-value {
  font-size: calc(11px * var(--txt-scale)); 
  font-weight: bold; 
  color: #c0ee80;
  width: 5ch; 
  text-align: right; 
  flex-shrink: 0;
}

.slider-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}

.slider-natural-tick {
  position: absolute; top: 1px; bottom: 1px; width: 2px;
  background: rgba(140,200,100,0.55); pointer-events: none;
  transform: translateX(-50%); z-index: 1;
}

input[type="range"].slider {
  width: 100%; height: 12px; -webkit-appearance: none; appearance: none;
  background: rgba(0,0,0,0.45); outline: none;
  border: 0.5px solid rgba(40,70,22,0.45); cursor: pointer; padding: 0;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 3px; height: 18px; background: #8fce50; cursor: pointer;
}
input[type="range"].slider::-moz-range-thumb {
  width: 3px; height: 18px; background: #8fce50; border: none; cursor: pointer;
}
input[type="range"].slider:hover::-webkit-slider-thumb,
input[type="range"].slider:hover::-moz-range-thumb { background: #c0ee80; }
input[type="range"].slider:disabled { cursor: default; }
input[type="range"].slider:disabled::-webkit-slider-thumb,
input[type="range"].slider:disabled::-moz-range-thumb { background: #3a5a22; }

/* ── Footer — stays fixed at bottom, outside scroll area ────────────────── */
.settings-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 18px;
  flex-shrink: 0;
  border-top: 1px solid #1a3412;
  background: rgba(6, 14, 4, 0.85);
}

.settings-btn {
  font-family: 'ShareTechMono', monospace; font-size: calc(11px * var(--txt-scale)); font-weight: bold;
  padding: 5px 22px; cursor: pointer; border: 1px solid; transition: background 0.15s, color 0.15s;
}

.settings-btn--secondary {
  background: rgba(10,18,6,0.60); border-color: #1e3412; color: #6aaa38;
}
.settings-btn--secondary:hover {
  background: rgba(30,52,18,0.75); border-color: #4a7a28; color: #a0e060;
}

.settings-back-btn {
  background: transparent; border: none; font-family: 'ShareTechMono', monospace;
  font-size: calc(12px * var(--txt-scale)); color: rgba(160, 210, 100, 0.90); cursor: pointer; padding: 4px 8px;
  transition: color 0.15s;
}
.settings-back-btn:hover { color: rgba(200, 250, 140, 0.95); }

.aff-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.aff-row .card-toggle {
  flex-shrink: 0;
  min-width: 14ch;
  font-size: calc(11px * var(--txt-scale));
}
.aff-desc {
  font-size: calc(11px * var(--txt-scale));
  color: rgba(180, 230, 120, 0.90);
  line-height: 1.5;
  padding-top: 3px;
}

/* 1. Hide verbose descriptions and subtext */
.is-handheld .eb-empty-sub,             
.is-handheld .inv-hint,                 
.is-handheld .eb-inv-hint,              
.is-handheld .stat-hint,                
.is-handheld .card-tagline,             
.is-handheld #vital-hp-value,           
.is-handheld #vital-nut-value,
.is-handheld #vital-en-value,
.is-handheld .db-welcome-footnote {
  display: none !important;
}

/* On handheld, we NO LONGER hide descriptions in the settings tabs! */
/* Just make sure there's enough space for them. */

.is-handheld .tt-lbl,
.is-handheld .tt-val {
  font-size: 14px !important;
}

.is-handheld .tt-title {
  font-size: 18px !important;
}