/** * 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%); --theme-success: #34d399; --theme-success-fg: #ecfdf5; --theme-danger: #fb7185; --theme-danger-fg: #fff1f2; --theme-warning: #fbbf24; --theme-warning-fg: #1c1917; --theme-shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; --theme-glow-accent: 0 0 24px rgba(129, 140, 248, 0.22); --theme-glow-rare: 0 0 14px rgba(59, 130, 246, 0.35); --theme-glow-epic: 0 0 16px rgba(168, 85, 247, 0.4); --theme-glow-legendary: 0 0 18px rgba(249, 115, 22, 0.45); } /* ========== 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%); --theme-success: #059669; --theme-success-fg: #ecfdf5; --theme-danger: #e11d48; --theme-danger-fg: #fff1f2; --theme-warning: #d97706; --theme-warning-fg: #1c1917; --theme-shadow-elevated: 0 18px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06) inset; --theme-glow-accent: 0 0 20px rgba(67, 56, 202, 0.18); --theme-glow-rare: 0 0 12px rgba(37, 99, 235, 0.25); --theme-glow-epic: 0 0 14px rgba(126, 34, 206, 0.28); --theme-glow-legendary: 0 0 16px rgba(194, 65, 12, 0.3); } /* ========== 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; } html.theme-light #daily-btn.daily-btn--claim-ready { color: #92400e !important; border-color: rgba(217, 119, 6, 0.65) !important; background: linear-gradient(180deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.88) 100%) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.45), 0 2px 12px rgba(245, 158, 11, 0.28) !important; animation: daily-gift-header-pulse-light 2.4s ease-in-out infinite; } html.theme-light #daily-btn.daily-btn--claim-ready:hover { color: #78350f !important; border-color: rgba(180, 83, 9, 0.7) !important; background: linear-gradient(180deg, rgba(254, 249, 195, 0.98) 0%, rgba(253, 224, 71, 0.35) 100%) !important; } @keyframes daily-gift-header-pulse-light { 0%, 100% { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 2px 10px rgba(245, 158, 11, 0.2) !important; } 50% { box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.55), 0 3px 16px rgba(245, 158, 11, 0.38) !important; } } @media (prefers-reduced-motion: reduce) { html.theme-light #daily-btn.daily-btn--claim-ready { animation: none !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-monster.monster-name--affix { color: rgba(157, 23, 77, 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); } html.theme-light #game-day-activity-strip { background: var(--theme-bg-card-alt) !important; border-color: var(--theme-border) !important; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.05) !important; } /* Dashboard: activity feed + retention row (styles live in game/dashboard inline CSS) */ html.theme-light .game-activity-feed-wrap { background: linear-gradient(90deg, rgba(248, 250, 252, 0.98) 0%, rgba(238, 242, 255, 0.92) 50%, rgba(248, 250, 252, 0.98) 100%) !important; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06) !important; border-color: var(--theme-border) !important; } html.theme-light .game-activity-feed__label { color: var(--theme-text-dim) !important; } html.theme-light .game-activity-feed__item { background: rgba(255, 255, 255, 0.94) !important; border-color: var(--theme-border) !important; } html.theme-light .game-activity-feed__main { color: var(--theme-text-primary) !important; } html.theme-light .game-activity-feed__sub { color: var(--theme-text-muted) !important; } html.theme-light .game-activity-feed__item--defeat { background: rgba(254, 226, 226, 0.88) !important; border-color: rgba(248, 113, 113, 0.45) !important; } html.theme-light .game-activity-feed__item--defeat .game-activity-feed__main { color: #991b1b !important; } html.theme-light .game-activity-feed__item--defeat .game-activity-feed__sub { color: #b91c1c !important; } html.theme-light .game-activity-feed__dot { background: #94a3b8 !important; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35) !important; } html.theme-light #game-retention-bar { background: var(--theme-bg-card-alt) !important; border-color: var(--theme-border) !important; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.05) !important; } html.theme-light .game-retention-caption { color: var(--theme-text-dim) !important; } html.theme-light .retention-mini-chip { background: rgba(255, 255, 255, 0.96) !important; border-color: var(--theme-border) !important; } html.theme-light .retention-mini-chip__title { color: var(--theme-text-primary) !important; } html.theme-light .retention-mini-chip__sub { color: var(--theme-text-muted) !important; } html.theme-light .game-day-activity-rarity-dot { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.28) !important; } html.theme-light .game-day-activity-items-total { color: var(--theme-text-primary) !important; } html.theme-light .game-day-activity-rarity-count { color: var(--theme-text-muted) !important; } html.theme-light .retention-mini-chip--dq { border-left-color: rgba(67, 56, 202, 0.85) !important; } html.theme-light .retention-mini-chip--claim { background: rgba(251, 191, 36, 0.22) !important; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.38) !important; } html.theme-light .game-retention-cell--warm { background: rgba(251, 191, 36, 0.2) !important; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.42) !important; } .gold { color: var(--theme-accent, #818cf8); } .game-tab-skeleton { display: flex; flex-direction: column; gap: 1rem; text-align: left; max-width: 36rem; margin: 0 auto; } .game-tab-skeleton__line { height: 0.85rem; border-radius: 0.35rem; background: linear-gradient(90deg, rgba(51, 65, 85, 0.35) 0%, rgba(71, 85, 105, 0.55) 50%, rgba(51, 65, 85, 0.35) 100%); background-size: 200% 100%; animation: game-skeleton-shimmer 1.35s ease-in-out infinite; } html.theme-light .game-tab-skeleton__line { background: linear-gradient(90deg, rgba(226, 232, 240, 0.9) 0%, rgba(203, 213, 225, 0.95) 50%, rgba(226, 232, 240, 0.9) 100%); background-size: 200% 100%; } .game-tab-skeleton__line--short { width: 42%; } .game-tab-skeleton__line--medium { width: 68%; } .game-tab-skeleton__block { height: 5.5rem; border-radius: 0.65rem; border: 1px solid rgba(71, 85, 105, 0.35); background: rgba(15, 23, 42, 0.35); position: relative; overflow: hidden; } html.theme-light .game-tab-skeleton__block { border-color: rgba(30, 41, 59, 0.15); background: rgba(248, 250, 252, 0.85); } .game-tab-skeleton__block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.08) 50%, transparent 100%); background-size: 200% 100%; animation: game-skeleton-shimmer 1.35s ease-in-out infinite; } @keyframes game-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes tab-panel-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .tab-content.tab-content--enter { animation: tab-panel-enter 0.22s ease-out both; } @media (prefers-reduced-motion: reduce) { .game-tab-skeleton__line, .game-tab-skeleton__block::after { animation: none !important; } .tab-content.tab-content--enter { animation: none !important; } #pet-tab .pet-skill-row--can-learn { animation: none !important; } } /* ========== PET SKILLS (list + detail) ========== */ #pet-tab .pet-skill-browser__hint { color: var(--theme-text-muted); } #pet-tab .pet-skill-points-pill__box { display: inline-flex; align-items: baseline; gap: 0.2rem; padding: 0.4rem 0.85rem; border-radius: 0.55rem; background: linear-gradient( 175deg, color-mix(in srgb, var(--theme-bg-header) 50%, var(--theme-bg-card-alt)), color-mix(in srgb, #000 25%, var(--theme-bg-card-alt)) ); border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); } html.theme-light #pet-tab .pet-skill-points-pill__box { background: linear-gradient(175deg, var(--theme-bg-card-alt), color-mix(in srgb, var(--theme-bg-header) 40%, var(--theme-bg-card-alt))); } #pet-tab .pet-skill-points-pill__avail { font-size: 1.2rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, #fcd34d 55%, var(--theme-accent)); text-shadow: 0 0 18px color-mix(in srgb, #fbbf24 25%, transparent); } #pet-tab .pet-skill-points-pill__sep { font-size: 0.85rem; font-weight: 600; color: var(--theme-text-muted); opacity: 0.85; } #pet-tab .pet-skill-points-pill__earned { font-size: 0.95rem; font-weight: 700; color: var(--theme-text-secondary); } #pet-tab .pet-skill-row { cursor: pointer; -webkit-tap-highlight-color: transparent; border-color: var(--theme-border) !important; background: color-mix(in srgb, var(--theme-bg-card-alt) 88%, var(--theme-bg-header)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent); } #pet-tab .pet-skill-row:hover { border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-bg-header) 35%, var(--theme-bg-card-alt)) !important; } #pet-tab .pet-skill-row:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } #pet-tab .pet-skill-row--selected { border-color: color-mix(in srgb, var(--theme-accent) 55%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-accent) 9%, var(--theme-bg-card-alt)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--theme-accent) 22%, transparent); } #pet-tab .pet-skill-row--learned:not(.pet-skill-row--selected) { border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border)) !important; } #pet-tab .pet-skill-row--blocked { opacity: 0.88; filter: saturate(0.75); } #pet-tab .pet-skill-row__desc { word-break: break-word; } #pet-tab .pet-skill-row__status { color: var(--theme-text-muted); } #pet-tab .pet-skill-row--blocked .pet-skill-row__status { color: color-mix(in srgb, var(--theme-danger) 75%, var(--theme-text-muted)); } #pet-tab .pet-skill-pip { width: 0.45rem; height: 0.45rem; border-radius: 9999px; flex-shrink: 0; } #pet-tab .pet-skill-pip--on { background: linear-gradient(160deg, #fff5, var(--theme-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 45%, transparent), 0 0 6px color-mix(in srgb, var(--theme-accent) 25%, transparent); } #pet-tab .pet-skill-pip--off { background: color-mix(in srgb, var(--theme-text-dim) 22%, var(--theme-bg-card-alt)); box-shadow: inset 0 0 0 1px var(--theme-border-light); opacity: 0.65; } @keyframes pet-skill-row-ready { 0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 0 0 0 transparent; } 50% { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 0 0 1px color-mix(in srgb, var(--theme-accent) 45%, transparent), 0 0 14px color-mix(in srgb, var(--theme-accent) 12%, transparent); } } #pet-tab .pet-skill-row--can-learn:not(.pet-skill-row--selected) { animation: pet-skill-row-ready 2.6s ease-in-out infinite; } html.theme-light #pet-tab .pet-skill-row--can-learn:not(.pet-skill-row--selected) { animation: pet-skill-row-ready 2.6s ease-in-out infinite; } #pet-tab .pet-skill-detail-aside { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); } html.theme-light #pet-tab .pet-skill-detail-aside { box-shadow: inset 0 1px 0 #fff9; } #pet-tab .pet-skill-detail-rank-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.28rem 0.55rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-bg-header)); border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border)); color: var(--theme-text-secondary); } #pet-tab .pet-skill-detail-status--maxed { color: color-mix(in srgb, #fbbf24 88%, var(--theme-text-primary)); } #pet-tab .pet-skill-detail-status--blocked { color: var(--theme-danger); } #pet-tab .pet-skill-detail-status--ready { color: var(--theme-success); } #pet-tab .pet-skill-detail-status--nopoints { color: var(--theme-text-muted); } #pet-tab .pet-skill-detail-panel__table-wrap { border: 1px solid var(--theme-border-light); border-radius: 0.5rem; background: color-mix(in srgb, var(--theme-bg-header) 28%, var(--theme-bg-card-alt)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent); } .pet-skill-tier-table { border-collapse: collapse; } #pet-tab .pet-skill-tier-table thead { background: color-mix(in srgb, var(--theme-bg-header) 58%, transparent); color: var(--theme-text-muted); } #pet-tab .pet-skill-tier-table th, #pet-tab .pet-skill-tier-table td { border-bottom: 1px solid var(--theme-border-light); } #pet-tab .pet-skill-tier-table tbody tr:last-child td { border-bottom: none; } .pet-skill-tier-row--current { background: color-mix(in srgb, var(--theme-accent) 12%, transparent); } .pet-skill-tier-row--next { box-shadow: inset 3px 0 0 var(--theme-success); } #pet-tab .pet-skill-prereq-row--met { background: color-mix(in srgb, var(--theme-success) 10%, var(--theme-bg-card-alt)); color: var(--theme-text-secondary); } #pet-tab .pet-skill-prereq-row--unmet { background: color-mix(in srgb, var(--theme-danger) 10%, var(--theme-bg-card-alt)); color: var(--theme-danger); } .pet-skill-panel-learn-btn { color: #f8fafc; background: linear-gradient(90deg, var(--theme-accent-dark), var(--theme-accent)); border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, transparent); box-shadow: var(--theme-glow-accent); } .pet-skill-panel-learn-btn:hover { background: linear-gradient(90deg, var(--theme-accent-hover), var(--theme-accent)); filter: brightness(1.05); } .pet-skill-panel-learn-btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } html.theme-light .pet-skill-panel-learn-btn { color: #f8fafc; }