/** * Theme system: dark (default) and light * Add class "theme-light" to for light theme */ /* ========== GAME ICONS (from public/images/icons/) ========== */ .icon-img { display: inline-block; vertical-align: middle; } .icon-sm { width: 16px; height: 16px; object-fit: contain; } .icon-md { width: 18px; height: 18px; object-fit: contain; } .icon-lg { width: 20px; height: 20px; object-fit: contain; } .icon-xl { width: 24px; height: 24px; object-fit: contain; } .icon-2xl { width: 32px; height: 32px; object-fit: contain; } .icon-3xl { width: 40px; height: 40px; object-fit: contain; } /* ========== DARK THEME (default) ========== */ :root, html.theme-dark { --theme-bg-body: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%); --theme-text-primary: #e2e8f0; --theme-text-secondary: #cbd5e1; --theme-text-muted: #94a3b8; --theme-text-dim: #64748b; --theme-accent: #818cf8; --theme-accent-hover: #6366f1; --theme-accent-dark: #4f46e5; --theme-bg-card: rgba(15, 23, 42, 0.6); --theme-bg-card-alt: rgba(30, 41, 59, 0.5); --theme-bg-header: rgba(2, 6, 23, 0.9); --theme-bg-input: rgba(15, 23, 42, 0.6); --theme-border: rgba(71, 85, 105, 0.5); --theme-border-light: rgba(71, 85, 105, 0.3); --theme-modal-bg: rgba(15, 23, 42, 0.98); --theme-tooltip-bg: rgba(15, 23, 42, 0.98); --theme-tooltip-border: #4f46e5; --theme-scrollbar-track: rgba(51, 65, 85, 0.3); --theme-scrollbar-thumb: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); } /* ========== LIGHT THEME ========== */ html.theme-light { --theme-bg-body: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%); --theme-text-primary: #020617; --theme-text-secondary: #0f172a; --theme-text-muted: #1e293b; --theme-text-dim: #334155; --theme-accent: #4338ca; --theme-accent-hover: #3730a3; --theme-accent-dark: #312e81; --theme-bg-card: rgba(255, 255, 255, 0.95); --theme-bg-card-alt: rgba(248, 250, 252, 0.95); --theme-bg-header: rgba(255, 255, 255, 0.95); --theme-bg-input: rgba(255, 255, 255, 0.98); --theme-border: rgba(30, 41, 59, 0.25); --theme-border-light: rgba(30, 41, 59, 0.15); --theme-modal-bg: rgba(255, 255, 255, 0.98); --theme-tooltip-bg: rgba(255, 255, 255, 0.98); --theme-tooltip-border: #4338ca; --theme-scrollbar-track: rgba(30, 41, 59, 0.1); --theme-scrollbar-thumb: linear-gradient(180deg, #6366f1 0%, #4338ca 100%); } /* ========== FOCUS VISIBLE (a11y) ========== */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--theme-accent, #818cf8); outline-offset: 2px; } /* ========== BASE OVERRIDES ========== */ html.theme-light body { background: var(--theme-bg-body) !important; color: var(--theme-text-primary) !important; } /* Text colors - high contrast for light theme */ html.theme-light .text-slate-200, html.theme-light .text-slate-100 { color: var(--theme-text-primary) !important; } html.theme-light .text-slate-300, html.theme-light .text-slate-300\/80, html.theme-light .text-slate-300\/90 { color: var(--theme-text-secondary) !important; } html.theme-light .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light .text-slate-500 { color: var(--theme-text-dim) !important; } /* Accent / gold class */ html.theme-light .gold { color: var(--theme-accent) !important; } /* Backgrounds */ html.theme-light .bg-slate-950, html.theme-light .bg-slate-950\/90, html.theme-light .bg-slate-950\/60, html.theme-light .bg-slate-950\/40 { background-color: var(--theme-bg-card) !important; } html.theme-light .bg-slate-900, html.theme-light .bg-slate-900\/60, html.theme-light .bg-slate-900\/40 { background-color: var(--theme-bg-card-alt) !important; } html.theme-light .bg-slate-800 { background-color: rgba(248, 250, 252, 0.9) !important; } /* Borders */ html.theme-light .border-slate-700, html.theme-light .border-slate-700\/50, html.theme-light .border-slate-700\/30 { border-color: var(--theme-border) !important; } html.theme-light .border-slate-600, html.theme-light .border-slate-600\/50, html.theme-light .border-slate-600\/40, html.theme-light .border-slate-600\/30 { border-color: var(--theme-border) !important; } html.theme-light .border-slate-500\/50 { border-color: var(--theme-border) !important; } /* Header */ html.theme-light header.border-b { border-color: var(--theme-border) !important; } html.theme-light .bg-slate-950\/90 { background-color: var(--theme-bg-header) !important; } /* Dividers */ html.theme-light .bg-slate-600\/60 { background-color: var(--theme-border) !important; } /* Page tabs */ html.theme-light .page-tabs { background: var(--theme-bg-card-alt) !important; border-color: var(--theme-border) !important; } html.theme-light .page-tab:not(.active) { color: var(--theme-text-muted) !important; } html.theme-light .page-tab:not(.active):hover { color: var(--theme-text-primary) !important; background: rgba(67, 56, 202, 0.12) !important; border-color: rgba(67, 56, 202, 0.2) !important; } html.theme-light .page-tab.active { color: #fff !important; background: linear-gradient(180deg, #4338ca 0%, #3730a3 50%, #312e81 100%) !important; border-color: rgba(67, 56, 202, 0.5) !important; } /* Header buttons */ html.theme-light .header-btn { background: var(--theme-bg-card-alt) !important; border-color: var(--theme-border) !important; color: var(--theme-text-muted) !important; } html.theme-light .header-btn:hover { color: var(--theme-accent) !important; background: rgba(67, 56, 202, 0.15) !important; border-color: rgba(67, 56, 202, 0.35) !important; } html.theme-light .header-btn.header-btn-logout { color: #b91c1c !important; } html.theme-light .header-btn.header-btn-logout:hover { color: #991b1b !important; background: rgba(185, 28, 28, 0.12) !important; border-color: rgba(185, 28, 28, 0.3) !important; } /* Locale buttons active state */ html.theme-light .locale-btn.bg-indigo-600\/50, html.theme-light .bg-indigo-600\/50 { background-color: rgba(67, 56, 202, 0.4) !important; } /* Form inputs */ html.theme-light input, html.theme-light select, html.theme-light textarea { background-color: var(--theme-bg-input) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: var(--theme-text-dim) !important; } /* Modals */ html.theme-light #modal-overlay { background-color: rgba(15, 23, 42, 0.6) !important; } html.theme-light #modal-content { background-color: var(--theme-modal-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html.theme-light #modal-close { color: var(--theme-accent) !important; } html.theme-light #modal-close:hover { color: var(--theme-text-primary) !important; } /* Item tooltip */ html.theme-light #item-tooltip { background: var(--theme-tooltip-bg) !important; border-color: var(--theme-tooltip-border) !important; color: var(--theme-text-primary) !important; } html.theme-light #item-tooltip .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light #item-tooltip .text-slate-500 { color: var(--theme-text-dim) !important; } html.theme-light #item-tooltip .text-amber-400\/90 { color: #b45309 !important; } /* Codex overlay */ html.theme-light #codex-overlay { background-color: rgba(15, 23, 42, 0.75) !important; } /* Onboarding modal */ html.theme-light #onboarding-overlay { background-color: rgba(15, 23, 42, 0.7) !important; } html.theme-light #onboarding-overlay .bg-slate-900 { background-color: var(--theme-modal-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html.theme-light #onboarding-overlay h2 { color: var(--theme-text-primary) !important; } html.theme-light #onboarding-overlay .text-slate-300 { color: var(--theme-text-secondary) !important; } html.theme-light #onboarding-overlay .text-indigo-400 { color: var(--theme-accent) !important; } /* Scrollbar */ html.theme-light .scrollbar-custom::-webkit-scrollbar-track { background: var(--theme-scrollbar-track) !important; } html.theme-light .scrollbar-custom::-webkit-scrollbar-thumb { background: var(--theme-scrollbar-thumb) !important; } html.theme-light .scrollbar-custom { scrollbar-color: #4338ca var(--theme-scrollbar-track) !important; } /* Error/session messages */ html.theme-light .bg-rose-900\/30 { background-color: rgba(254, 226, 226, 0.9) !important; } html.theme-light .border-rose-500\/50 { border-color: rgba(185, 28, 28, 0.5) !important; } html.theme-light .text-rose-200 { color: #991b1b !important; } /* Indigo accent overrides for light theme */ html.theme-light .text-indigo-400, html.theme-light .text-indigo-400\/80, html.theme-light .text-indigo-400\/90, html.theme-light .text-indigo-300 { color: var(--theme-accent) !important; } /* Gradient backgrounds for light theme */ html.theme-light .bg-gradient-to-b.from-slate-800\/50.to-slate-900\/60, html.theme-light .from-slate-800\/50, html.theme-light .to-slate-900\/60 { background: var(--theme-bg-card-alt) !important; } /* Shadow overrides - lighter shadows for light theme */ html.theme-light .shadow-indigo-950\/30 { box-shadow: 0 25px 50px -12px rgba(67, 56, 202, 0.15) !important; } /* Leaderboard buttons */ html.theme-light .leaderboard-btn { color: var(--theme-text-muted) !important; } html.theme-light .leaderboard-btn.active { background-color: rgba(67, 56, 202, 0.25) !important; border-color: rgba(67, 56, 202, 0.5) !important; color: var(--theme-accent) !important; } html.theme-light .leaderboard-btn:hover { color: var(--theme-text-primary) !important; } /* Leaderboard table */ html.theme-light .bg-slate-800\/50 { background-color: rgba(248, 250, 252, 0.8) !important; } html.theme-light .divide-slate-700\/30 > *, html.theme-light [class*="divide-slate"] > * { border-color: var(--theme-border-light) !important; } /* Combat HP bars - keep visible on light */ html.theme-light .bg-gray-800 { background-color: #e2e8f0 !important; } /* Gradient blocks - use solid light bg for light theme */ html.theme-light .bg-gradient-to-br.from-slate-800\/80.to-slate-900\/80, html.theme-light .bg-gradient-to-b.from-slate-800\/50.to-slate-900\/60 { background: var(--theme-bg-card-alt) !important; } html.theme-light .bg-slate-800\/60, html.theme-light .bg-slate-800\/40, html.theme-light .bg-slate-800\/30, html.theme-light .bg-slate-800\/20, html.theme-light .bg-slate-800\/10, html.theme-light .bg-slate-700\/80, html.theme-light .bg-slate-700\/60, html.theme-light .bg-slate-700\/50, html.theme-light .bg-slate-700\/40 { background-color: rgba(248, 250, 252, 0.95) !important; } /* Inventory tab */ html.theme-light #inventory-tab, html.theme-light #combat-zone-bg, html.theme-light #combat-tab .border-t { background-color: var(--theme-bg-card) !important; } html.theme-light .equip-slot.bg-slate-900\/50 { background-color: rgba(241, 245, 249, 0.9) !important; } html.theme-light #inventory-grid thead.bg-slate-950 { background-color: var(--theme-bg-card) !important; } html.theme-light .inventory-item:hover { background-color: rgba(241, 245, 249, 0.7) !important; } html.theme-light .inventory-refresh-btn, html.theme-light .inventory-filter-type, html.theme-light .inventory-filter-rarity, html.theme-light .inventory-filter-useful { background-color: rgba(248, 250, 252, 0.95) !important; color: var(--theme-text-secondary) !important; } html.theme-light .inventory-refresh-btn:hover, html.theme-light .inventory-filter-type:hover, html.theme-light .inventory-filter-rarity:hover, html.theme-light .inventory-filter-useful:hover { background-color: rgba(67, 56, 202, 0.12) !important; color: var(--theme-accent) !important; } /* Inventory subtabs: active uses indigo gradient — default body text would be illegible */ html.theme-light #inventory-tab .inventory-subtab.from-indigo-600 { color: #fff !important; } html.theme-light #inventory-tab .inventory-subtab.hover\:bg-slate-700\/60:hover { background-color: rgba(226, 232, 240, 0.95) !important; } /* Craft: material exchange panel */ html.theme-light .material-exchange-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 45%, rgba(238, 242, 255, 0.94) 100%) !important; border-color: rgba(99, 102, 241, 0.3) !important; box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.1), 0 8px 16px -8px rgba(15, 23, 42, 0.06) !important; } html.theme-light .material-exchange-panel .material-exchange-ratio-badge { background-color: rgba(238, 242, 255, 0.98) !important; border-color: rgba(99, 102, 241, 0.35) !important; color: #3730a3 !important; } html.theme-light .material-exchange-step { background-color: rgba(255, 255, 255, 0.82) !important; border-color: rgba(148, 163, 184, 0.45) !important; } html.theme-light .material-exchange-upgrade-cell { background-color: rgba(236, 253, 245, 0.95) !important; border-color: rgba(16, 185, 129, 0.38) !important; } html.theme-light .material-exchange-downgrade-cell { background-color: rgba(255, 251, 235, 0.96) !important; border-color: rgba(245, 158, 11, 0.42) !important; } html.theme-light .material-exchange-panel input[type="number"] { background-color: var(--theme-bg-input) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html.theme-light .material-exchange-panel .material-exchange-max { background-color: #e2e8f0 !important; color: #4338ca !important; border-color: rgba(148, 163, 184, 0.45) !important; } html.theme-light .material-exchange-panel .material-exchange-max:hover:not(:disabled) { background-color: rgba(67, 56, 202, 0.14) !important; color: var(--theme-accent-dark) !important; } html.theme-light .material-exchange-downgrade-cell .material-exchange-submit { background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%) !important; color: #0f172a !important; border: 1px solid rgba(180, 83, 9, 0.35) !important; } html.theme-light .material-exchange-downgrade-cell .material-exchange-submit:hover:not(:disabled) { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important; color: #020617 !important; } html.theme-light .material-exchange-upgrade-cell .material-exchange-submit { border: 1px solid rgba(5, 150, 105, 0.45) !important; } html.theme-light .material-exchange-upgrade-cell .material-exchange-submit:hover:not(:disabled) { filter: brightness(1.03); } /* Shop: buttons in light theme (all premium CTA + consumables gold tab) */ html.theme-light #shop-tab .shop-buy-btn.bg-amber-600, html.theme-light #shop-tab .shop-buy-btn.bg-amber-500, html.theme-light #shop-tab .premium-buy-gold.bg-amber-600, html.theme-light #shop-tab .premium-buy-gold.bg-amber-500, html.theme-light #shop-tab .premium-activate-bp.bg-amber-600, html.theme-light #shop-tab .premium-activate-bp.bg-amber-500, html.theme-light #shop-tab .premium-buy-dungeon.bg-amber-600, html.theme-light #shop-tab .premium-buy-dungeon.bg-amber-500, html.theme-light #shop-tab .premium-buy-dungeon-bundle.bg-amber-600, html.theme-light #shop-tab .premium-buy-dungeon-bundle.bg-amber-500, html.theme-light #shop-tab .premium-buy-consumable.bg-amber-600, html.theme-light #shop-tab .premium-buy-consumable.bg-amber-500, html.theme-light #shop-tab .premium-buy-consumable-bundle.bg-amber-600, html.theme-light #shop-tab .premium-buy-consumable-bundle.bg-amber-500, html.theme-light #shop-tab a.bg-amber-600, html.theme-light #shop-tab a.bg-amber-500 { background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important; color: #1e293b !important; border: 1px solid rgba(180, 83, 9, 0.4) !important; } html.theme-light #shop-tab .shop-buy-btn.bg-amber-600:hover, html.theme-light #shop-tab .shop-buy-btn.bg-amber-500:hover, html.theme-light #shop-tab .premium-buy-gold.bg-amber-600:hover, html.theme-light #shop-tab .premium-buy-gold.bg-amber-500:hover, html.theme-light #shop-tab .premium-activate-bp.bg-amber-600:hover, html.theme-light #shop-tab .premium-activate-bp.bg-amber-500:hover, html.theme-light #shop-tab .premium-buy-dungeon.bg-amber-600:hover, html.theme-light #shop-tab .premium-buy-dungeon.bg-amber-500:hover, html.theme-light #shop-tab .premium-buy-dungeon-bundle.bg-amber-600:hover, html.theme-light #shop-tab .premium-buy-dungeon-bundle.bg-amber-500:hover, html.theme-light #shop-tab .premium-buy-consumable.bg-amber-600:hover, html.theme-light #shop-tab .premium-buy-consumable.bg-amber-500:hover, html.theme-light #shop-tab .premium-buy-consumable-bundle.bg-amber-600:hover, html.theme-light #shop-tab .premium-buy-consumable-bundle.bg-amber-500:hover, html.theme-light #shop-tab a.bg-amber-600:hover, html.theme-light #shop-tab a.bg-amber-500:hover { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important; color: #0f172a !important; } html.theme-light #shop-tab .shop-buy-btn.bg-slate-700, html.theme-light #shop-tab .premium-buy-gold.bg-slate-700, html.theme-light #shop-tab .premium-activate-bp.bg-slate-700, html.theme-light #shop-tab .premium-buy-dungeon.bg-slate-700, html.theme-light #shop-tab .premium-buy-dungeon-bundle.bg-slate-700, html.theme-light #shop-tab .premium-buy-consumable.bg-slate-700, html.theme-light #shop-tab .premium-buy-consumable-bundle.bg-slate-700, html.theme-light #shop-tab span.bg-slate-700.text-slate-400 { background-color: #e2e8f0 !important; color: #64748b !important; border: 1px solid rgba(100, 116, 139, 0.3) !important; } /* Donation: indigo CTA — читаемый на светлой теме */ html.theme-light #shop-tab #donation-code-refresh.bg-indigo-600 { background: linear-gradient(180deg, #4f46e5 0%, #4338ca 50%, #3730a3 100%) !important; color: #fff !important; border: 1px solid rgba(55, 48, 163, 0.45) !important; } html.theme-light #shop-tab #donation-code-refresh.bg-indigo-600:hover { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%) !important; } html.theme-light #shop-tab .shop-subtab.bg-slate-700\/60 { background-color: rgba(67, 56, 202, 0.2) !important; color: var(--theme-accent) !important; border-color: var(--theme-accent) !important; } html.theme-light #shop-tab .shop-subtab:not([class*="border-amber"]) { color: var(--theme-text-muted) !important; } html.theme-light #shop-tab .shop-subtab:not([class*="border-amber"]):hover { color: var(--theme-text-primary) !important; background-color: rgba(67, 56, 202, 0.1) !important; } /* Daily quests tab - light theme */ html.theme-light #daily-quests-tab, html.theme-light #daily-quests-tab .rounded-xl.overflow-hidden { background: var(--theme-bg-card) !important; } html.theme-light #daily-quests-tab .px-4.sm\:px-6.py-4 { background-color: var(--theme-bg-card-alt) !important; } html.theme-light #daily-quests-tab .dq-quest { background-color: rgba(248, 250, 252, 0.9) !important; border-color: var(--theme-border) !important; } html.theme-light #daily-quests-tab .text-amber-200\/90 { color: #b45309 !important; } html.theme-light #daily-quests-tab .text-violet-200\/90 { color: #6d28d9 !important; } html.theme-light #daily-quests-tab .bg-indigo-900\/30 { background-color: rgba(67, 56, 202, 0.15) !important; border-color: rgba(67, 56, 202, 0.3) !important; } html.theme-light #daily-quests-tab .bg-indigo-900\/30 .text-indigo-200 { color: var(--theme-accent) !important; } html.theme-light #daily-quests-tab .bg-emerald-900\/40 { background-color: rgba(5, 150, 105, 0.2) !important; border-color: rgba(5, 150, 105, 0.35) !important; } html.theme-light #daily-quests-tab .bg-emerald-900\/40.text-emerald-200, html.theme-light #daily-quests-tab .bg-emerald-900\/40 .text-emerald-200 { color: #047857 !important; } /* Shop premium: donation code block - light bg in light theme */ html.theme-light #donation-code-value { background-color: rgba(248, 250, 252, 0.95) !important; color: var(--theme-accent) !important; border: 1px solid var(--theme-border) !important; } html.theme-light #donation-code-value:hover { background-color: rgba(241, 245, 249, 0.98) !important; } /* Runes / pet: disabled CTA (plain bg-slate-700 outside #shop-tab) */ html.theme-light .rune-upgrade-btn.bg-slate-700, html.theme-light .pet-allocate-btn.bg-slate-700 { background-color: #cbd5e1 !important; color: #475569 !important; } html.theme-light .rune-upgrade-btn.bg-amber-600 { color: #1e293b !important; } html.theme-light #runes-tab .bg-slate-900\/60 { background-color: rgba(248, 250, 252, 0.9) !important; } /* Dungeon: Max floor and Entries today blocks */ html.theme-light .bg-amber-900\/20 { background-color: rgba(251, 191, 36, 0.2) !important; border-color: rgba(180, 83, 9, 0.35) !important; } html.theme-light .bg-amber-900\/20 .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light .bg-amber-900\/20 .text-amber-400 { color: #b45309 !important; } html.theme-light .bg-slate-700\/50 .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light .bg-slate-700\/50 .text-slate-200 { color: var(--theme-text-primary) !important; } html.theme-light .bg-indigo-900\/30 { background-color: rgba(67, 56, 202, 0.15) !important; } html.theme-light .bg-indigo-900\/30 .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light .bg-indigo-900\/30 .text-indigo-300 { color: var(--theme-accent) !important; } /* Battle pass modal */ html.theme-light #modal-content .bg-slate-800\/50, html.theme-light #modal-content .bg-slate-800\/60, html.theme-light #modal-content .bg-slate-800\/40, html.theme-light #modal-content .bg-slate-800\/30, html.theme-light #modal-content .bg-slate-800\/20, html.theme-light #modal-content .bg-slate-800\/10, html.theme-light #modal-content .bg-slate-700\/50, html.theme-light #modal-content .bg-slate-700\/80, html.theme-light #modal-content .bg-slate-700\/40 { background-color: rgba(248, 250, 252, 0.95) !important; } html.theme-light #modal-content .bg-slate-800\/60 .text-slate-400, html.theme-light #modal-content .bg-slate-700\/80 .text-slate-300 { color: var(--theme-text-muted) !important; } html.theme-light #modal-content .bg-amber-900\/40 { background-color: rgba(251, 191, 36, 0.25) !important; } html.theme-light #modal-content .bg-amber-900\/40 .text-amber-400 { color: #b45309 !important; } html.theme-light #modal-content .bg-purple-900\/40 { background-color: rgba(147, 51, 234, 0.2) !important; } html.theme-light #modal-content .bg-purple-900\/40 .text-purple-400 { color: #6b21a8 !important; } html.theme-light #modal-content .bg-amber-900\/20 { background-color: rgba(251, 191, 36, 0.15) !important; } html.theme-light #modal-content .bg-amber-900\/20 .text-amber-400 { color: #b45309 !important; } html.theme-light #modal-content .bg-purple-900\/20 { background-color: rgba(147, 51, 234, 0.15) !important; } html.theme-light #modal-content .bg-purple-900\/20 .text-purple-400 { color: #6b21a8 !important; } html.theme-light #modal-content .bg-slate-700 { background-color: #e2e8f0 !important; } html.theme-light #modal-content .bg-slate-700 .text-slate-300 { color: var(--theme-text-secondary) !important; } html.theme-light #modal-content .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light #modal-content .text-slate-300 { color: var(--theme-text-secondary) !important; } html.theme-light #modal-content .text-slate-500 { color: var(--theme-text-dim) !important; } html.theme-light #modal-content .text-amber-400 { color: #b45309 !important; } html.theme-light #modal-content .text-amber-400\/90 { color: #b45309 !important; } html.theme-light #modal-content .bp-claim-btn { color: #1e293b !important; } /* Battle pass modal: dedicated contrast tuning */ html.theme-light #modal-content .bp-modal { color: #0f172a !important; } html.theme-light #modal-content .bp-modal .text-slate-200, html.theme-light #modal-content .bp-modal .text-slate-300, html.theme-light #modal-content .bp-modal .text-slate-400, html.theme-light #modal-content .bp-modal .text-slate-500 { color: #334155 !important; } html.theme-light #modal-content .bp-modal .bp-table th { color: #1e293b !important; } html.theme-light #modal-content .bp-modal .bp-premium-reward { color: #92400e !important; } html.theme-light #modal-content .bp-modal .bp-status-ready { color: #a16207 !important; font-weight: 600; } html.theme-light #modal-content .bp-modal .bp-status-claimed { color: #047857 !important; font-weight: 600; } /* Codex: contrast in any theme */ #codex-toc-list .codex-toc-item { color: #3f2f1e; transition: background-color .15s ease, color .15s ease; } #codex-toc-list .codex-toc-item:hover { background: rgba(180, 83, 9, 0.16); color: #2b1d0e; } #codex-toc-list .codex-section-label { color: #6b3f16; } #codex-page-body .codex-entry-title { color: #2b1d0e; } #codex-page-body .codex-entry-text { color: #3f2f1e; } #codex-toc-list .codex-empty, #codex-page-body .codex-empty { color: #7c5a2a; } html.theme-light #codex-content { background-color: #f8f4ec !important; } html.theme-light #codex-toc-list .codex-toc-item { color: #2c2116; } html.theme-light #codex-page-body .codex-entry-text { color: #2e2418; } /* Confirm dialog buttons */ html.theme-light #modal-content .confirm-cancel-btn { background-color: rgba(248, 250, 252, 0.95) !important; color: var(--theme-text-secondary) !important; border: 1px solid var(--theme-border) !important; } html.theme-light #modal-content .confirm-cancel-btn:hover { background-color: rgba(226, 232, 240, 0.95) !important; } html.theme-light #modal-content .confirm-ok-btn.bg-amber-600, html.theme-light #modal-content .confirm-ok-btn.bg-amber-500 { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important; color: #1e293b !important; } html.theme-light #modal-content .confirm-ok-btn.bg-rose-600, html.theme-light #modal-content .confirm-ok-btn.bg-rose-500 { background: linear-gradient(180deg, #e11d48 0%, #be123c 100%) !important; color: #fff !important; } /* Library: TOC sidebar and content */ html.theme-light nav .bg-slate-900\/80, html.theme-light .bg-slate-900\/80 { background-color: var(--theme-bg-card) !important; } html.theme-light .bg-slate-900\/40 { background-color: var(--theme-bg-card-alt) !important; } html.theme-light .bg-slate-800\/80, html.theme-light .bg-slate-800\/30, html.theme-light .bg-slate-800\/40 { background-color: rgba(248, 250, 252, 0.95) !important; } html.theme-light .prose-invert, html.theme-light .prose-invert.prose-slate { color: var(--theme-text-secondary) !important; } html.theme-light .prose-invert h2, html.theme-light .prose-invert h3, html.theme-light .prose-invert h4 { color: var(--theme-text-primary) !important; } html.theme-light .prose-invert a { color: var(--theme-accent) !important; } html.theme-light .prose-invert p, html.theme-light .prose-invert li, html.theme-light .prose-invert td { color: var(--theme-text-secondary) !important; } html.theme-light nav a:hover { background-color: rgba(67, 56, 202, 0.12) !important; color: var(--theme-accent) !important; } /* Auth form card (login, register) */ html.theme-light .auth-card { background-color: var(--theme-bg-card) !important; border-color: rgba(67, 56, 202, 0.4) !important; } html.theme-light .auth-card .gold { color: var(--theme-accent) !important; } html.theme-light .auth-card label { color: var(--theme-text-muted) !important; } html.theme-light .auth-card .text-slate-400 { color: var(--theme-text-muted) !important; } html.theme-light .auth-card a.gold { color: var(--theme-accent) !important; } /* Primary/action buttons - ensure contrast on light */ html.theme-light .bg-indigo-700\/80, html.theme-light .bg-indigo-600, html.theme-light .bg-indigo-800\/60, html.theme-light .hover\:bg-indigo-600:hover, html.theme-light .hover\:bg-indigo-500:hover, html.theme-light .hover\:bg-indigo-700\/60:hover { color: #fff !important; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-bg-card-alt); color: var(--theme-text-muted); cursor: pointer; transition: all 0.2s ease; } .theme-toggle:hover { color: var(--theme-accent); border-color: rgba(67, 56, 202, 0.4); } .theme-toggle svg { width: 18px; height: 18px; } html.theme-dark .theme-icon-light { display: none !important; } html.theme-dark .theme-icon-dark { display: block !important; } html.theme-light .theme-icon-dark { display: none !important; } html.theme-light .theme-icon-light { display: block !important; } /* Combat tick log (hero / monster rows) — light theme */ html.theme-light #combat-log .combat-log-tick-row { background: var(--theme-bg-card-alt); border-color: var(--theme-border); } html.theme-light #combat-log .combat-log-tick-slot { background: rgba(241, 245, 249, 0.85); } html.theme-light #combat-log .combat-log-tick-name { color: var(--theme-text-secondary); } html.theme-light #combat-log .combat-log-tick-hero { color: rgba(67, 56, 202, 0.95); } html.theme-light #combat-log .combat-log-tick-monster { color: rgba(180, 83, 9, 0.95); } html.theme-light #combat-log .combat-log-tick-slot--empty { color: var(--theme-text-dim); } html.theme-light #combat-log .combat-log-tick-ac-num { color: var(--theme-text-primary); } html.theme-light #combat-log .combat-tick-crit .combat-log-tick-ac-num { color: #dc2626; } html.theme-light #combat-log .combat-log-tick-ac-na { color: var(--theme-text-muted); } html.theme-light #combat-log .combat-log-visual-row { background: rgba(241, 245, 249, 0.6); border-bottom-color: var(--theme-border-light); } html.theme-light #combat-log .combat-log-visual-damage { color: var(--theme-text-primary); } html.theme-light #combat-log .combat-log-visual-na { color: var(--theme-text-muted); } html.theme-light #combat-tab .monster-eq-slot { background: rgba(241, 245, 249, 0.9); }