/* Theme controls stay in the header on both desktop and mobile. */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 350px;
  min-width: 0;
}
.nav-tools .nav-search-wrap { flex: 1; width: auto; min-width: 0; margin: 0; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 84px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: var(--bg-panel-solid);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--gold-bright); }
.theme-icon { flex-shrink: 0; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }
@media (min-width: 761px) and (max-width: 1100px) {
  .nav-tools { margin-left: auto; }
}
@media (max-width: 760px) {
  .nav-tools { flex: auto; width: 100%; }
  .theme-toggle { min-height: 42px; }
}

/* Warm ivory, forest jade and antique gold preserve the game's identity. */
html[data-theme="light"] {
  color-scheme: light;
  --bg-abyss: #f7f6ef;
  --bg-obsidian: #fcfbf7;
  --bg-panel: rgba(255, 255, 252, 0.96);
  --bg-panel-solid: #fffefa;
  --bg-card: #fffefa;
  --gold-bright: #735014;
  --gold-main: #926416;
  --gold-dim: #78591e;
  --jade-bright: #08664d;
  --jade-main: #087953;
  --jade-dark: #064e3b;
  --text-main: #203333;
  --text-muted: #4c6263;
  --text-dim: #5a6e6e;
  --border-gold: rgba(140, 107, 46, 0.30);
  --border-subtle: rgba(29, 68, 53, 0.14);
  --shadow-heavy: 0 18px 45px rgba(42, 61, 44, 0.10);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 3%, rgba(27, 144, 103, 0.07), transparent 36%),
    radial-gradient(circle at 90% 16%, rgba(203, 162, 73, 0.11), transparent 38%),
    linear-gradient(180deg, #faf9f2, #f3f5ed 55%, #f8f7ef);
}
html[data-theme="light"] .top-nav {
  background: rgba(255, 254, 248, 0.95);
  box-shadow: 0 4px 24px rgba(36, 57, 40, 0.06);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active { background: #f2e8cc; }
html[data-theme="light"] .nav-search-input,
html[data-theme="light"] .sort-select {
  background: #fffefa;
  border-color: var(--border-gold);
}
html[data-theme="light"] .nav-search-input::placeholder { color: #657776; opacity: 1; }
html[data-theme="light"] .nav-search-input:focus { box-shadow: 0 0 0 3px rgba(8, 102, 77, 0.13); }
html[data-theme="light"] .spotlight-backdrop {
  background:
    linear-gradient(125deg, rgba(255, 254, 246, 0.96), rgba(249, 249, 238, 0.93) 55%, rgba(247, 250, 241, 0.97)),
    url('assets/brand/maharlika-frontier-key-art.webp') center/cover no-repeat;
}
html[data-theme="light"] .spotlight-glow { opacity: 0.10; }
html[data-theme="light"] .hero-name-title {
  background: linear-gradient(180deg, #203e36, #766021);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
html[data-theme="light"] .hero-epithet,
html[data-theme="light"] .pill-element {
  color: color-mix(in srgb, var(--accent-hero) 35%, #173a33 65%);
}
html[data-theme="light"] .pill-badge,
html[data-theme="light"] .meta-box,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .skill-detail-card,
html[data-theme="light"] .tactical-box,
html[data-theme="light"] .resonance-readout {
  background: rgba(255, 255, 252, 0.94);
  border-color: var(--border-subtle);
  box-shadow: 0 2px 10px rgba(36, 57, 40, 0.025);
}
html[data-theme="light"] .pill-element { border-color: var(--border-gold); }
html[data-theme="light"] .pill-role { background: #f5edd6; border-color: var(--border-gold); }
html[data-theme="light"] .rating-track { background: #e1e9e1; }
html[data-theme="light"] .stat-box,
html[data-theme="light"] .stage-mode-tabs,
html[data-theme="light"] .ascension-strip-wrap {
  background: #f8f8ef;
  border-color: var(--border-subtle);
}
html[data-theme="light"] .stage-viewport {
  background: radial-gradient(circle at 50% 65%, rgba(211, 183, 115, 0.14), transparent 65%), #f3f2e8;
  box-shadow: inset 0 0 30px rgba(111, 118, 84, 0.06);
}
html[data-theme="light"] .stage-main-img { filter: drop-shadow(0 8px 18px rgba(36, 57, 40, 0.16)); }
html[data-theme="light"] .stage-caption-bar { background: #fffefa; border-color: var(--border-subtle); }
html[data-theme="light"] .action3d-window { box-shadow: 0 10px 22px rgba(36, 57, 40, 0.15); }
html[data-theme="light"] .frame-btn,
html[data-theme="light"] .evo-thumb,
html[data-theme="light"] .skill-tab-btn,
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .preset-btn {
  background: #fffefa;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
html[data-theme="light"] .stage-tab-btn.active,
html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .pose-btn.active {
  background: linear-gradient(135deg, #f0dc9b, #e7c579);
  color: #42320c;
  border-color: #b89a4d;
  box-shadow: 0 3px 10px rgba(146, 100, 22, 0.10);
}
html[data-theme="light"] .frame-btn.active,
html[data-theme="light"] .card-btn.squad-add.in-squad {
  background: #08664d;
  color: #ffffff;
  border-color: #08664d;
}
html[data-theme="light"] .evo-thumb:hover,
html[data-theme="light"] .evo-thumb.active,
html[data-theme="light"] .skill-tab-btn.active {
  background: linear-gradient(150deg, #fcf3d8, #eaf3e8);
  border-color: #af954e;
  color: var(--gold-bright);
  box-shadow: 0 3px 10px rgba(146, 100, 22, 0.08);
}
html[data-theme="light"] .skill-orb {
  background: radial-gradient(circle at 30% 30%, #fffdf5, #e9e4cb);
  border-color: var(--border-gold);
}
html[data-theme="light"] .skill-chip { background: #f1f3ed; border-color: var(--border-subtle); }
html[data-theme="light"] .skill-chip.cost { background: #e8f3eb; border-color: #b8d5c5; }
html[data-theme="light"] .skill-chip.mult { background: #f6ecd4; border-color: var(--border-gold); }
html[data-theme="light"] .tactical-box.caution { border-left-color: #ad5a17; }
html[data-theme="light"] .tactical-box.caution strong { color: #8e4611; }
html[data-theme="light"] .filter-console { box-shadow: 0 8px 28px rgba(36, 57, 40, 0.06); }
html[data-theme="light"] .hero-card { border-color: var(--border-subtle); box-shadow: 0 6px 20px rgba(36, 57, 40, 0.08); }
html[data-theme="light"] .hero-card:hover { box-shadow: 0 12px 28px rgba(36, 57, 40, 0.14); }
html[data-theme="light"] .hero-card.selected { border-color: #087953; box-shadow: 0 0 0 2px #087953, 0 6px 20px rgba(36, 57, 40, 0.08); }
html[data-theme="light"] .hero-card-art-wrap { background: #e5e7da; }
html[data-theme="light"] .hero-card-shade { background: linear-gradient(180deg, transparent 40%, rgba(255, 254, 250, 0.12) 70%, #fffefa 100%); }
html[data-theme="light"] .hero-card-body { background: #fffefa; }
html[data-theme="light"] .hero-card-footer { border-color: var(--border-subtle); }
html[data-theme="light"] .card-role-chip { color: #fff0c5; background: rgba(39, 30, 11, 0.88); }
html[data-theme="light"] .card-btn { background: #f5edd8; border-color: var(--border-gold); }
html[data-theme="light"] .card-btn:hover { background: #ead495; color: #42320c; }
html[data-theme="light"] .card-btn.squad-add { background: #e7f1e8; color: #08664d; border-color: #a9cbb7; }
html[data-theme="light"] .squad-lab-panel {
  background:
    linear-gradient(135deg, rgba(255, 254, 247, 0.96), rgba(247, 250, 241, 0.96)),
    url('assets/brand/diwa-gate-sanctuary.webp') center/cover no-repeat;
}
html[data-theme="light"] .squad-slot { background: #f1f3e8; }
html[data-theme="light"] .squad-inspect { color: #fffdf0; background: #17251e; }
html[data-theme="light"] .leader-crown { background: #f1d079; color: #42320c; }
html[data-theme="light"] .resonance-readout > div:last-child { border-color: var(--border-subtle) !important; }
html[data-theme="light"] footer { border-color: var(--border-subtle); }
html[data-theme="light"] .skip-link { background: #f1d079; color: #42320c; }
@media (max-width: 760px) {
  html[data-theme="light"] .mobile-bottom-dock { background: rgba(255, 254, 248, 0.97); box-shadow: 0 -4px 20px rgba(36, 57, 40, 0.09); }
  html[data-theme="light"] .dock-btn { background: #f5f2e6; border-color: var(--border-gold); color: #654915; }
  html[data-theme="light"] .dock-btn:active { background: #ead495; }
}