/* ===== GLOBAL THEME STYLES ===== */

/* ===== LIGHT MODE (DEFAULT) ===== */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    color: #1a1a2e !important;
}

.game-fullscreen {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.animated-background {
    opacity: 0.3 !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.card {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

h1, h2, h3, .subtitle {
    color: #1a1a2e !important;
}

label {
    color: rgba(0, 0, 0, 0.8) !important;
}

.time-input {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a2e !important;
    border: 2px solid rgba(138, 43, 226, 0.3) !important;
}

.result, .auto-result {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.15), rgba(245, 175, 25, 0.05)) !important;
    color: #1a1a2e !important;
}

.info-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(138, 43, 226, 0.05)) !important;
    border: 2px solid rgba(138, 43, 226, 0.3) !important;
}

.info-card p {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* Wordle Light Mode */
.wordle-card {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
}

.wordle-title {
    color: #1a1a2e !important;
}

.wordle-date {
    color: rgba(0, 0, 0, 0.7) !important;
}

.wordle-tile {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
    color: #1a1a2e !important;
}

.wordle-tile.correct {
    background: #6aaa64 !important;
    border-color: #6aaa64 !important;
    color: white !important;
}

.wordle-tile.present {
    background: #c9b458 !important;
    border-color: #c9b458 !important;
    color: white !important;
}

.wordle-tile.absent {
    background: #787c7e !important;
    border-color: #787c7e !important;
    color: white !important;
}

.wordle-key {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.wordle-key.correct {
    background: #6aaa64 !important;
    color: white !important;
}

.wordle-key.present {
    background: #c9b458 !important;
    color: white !important;
}

.wordle-key.absent {
    background: #787c7e !important;
    color: white !important;
}

.wordle-key:hover {
    background: rgba(138, 43, 226, 0.2) !important;
}

.wordle-message {
    color: #1a1a2e !important;
}

/* Cookie Clicker Light Mode */
.cookie-section {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(138, 43, 226, 0.2) !important;
}

.cookie-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    color: #1a1a2e !important;
}

.cookie-title {
    color: #1a1a2e !important;
}

.stat-card {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.15), rgba(245, 175, 25, 0.08)) !important;
    border: 2px solid rgba(245, 175, 25, 0.35) !important;
}

.stat-label {
    color: rgba(0, 0, 0, 0.75) !important;
}

.stat-big-value {
    color: #f5af19 !important;
}

.section-title {
    color: #1a1a2e !important;
    border-bottom: 2px solid rgba(245, 175, 25, 0.35) !important;
}

.upgrade-item,
.building-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.85)) !important;
    border: 1px solid rgba(245, 175, 25, 0.25) !important;
}

.upgrade-item:hover:not(.disabled),
.building-item:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(255, 248, 230, 1), rgba(255, 250, 235, 0.95)) !important;
    border-color: rgba(245, 175, 25, 0.5) !important;
}

.upgrade-item.disabled,
.building-item.disabled {
    background: rgba(200, 200, 200, 0.4) !important;
    opacity: 0.55 !important;
}

.upgrade-name,
.building-name {
    color: #1a1a2e !important;
}

.upgrade-desc,
.building-desc {
    color: rgba(0, 0, 0, 0.65) !important;
}

.upgrade-cost,
.building-cost {
    color: #dc2626 !important;
    font-weight: 800 !important;
}

.stats-display > div {
    background: linear-gradient(135deg, rgba(255, 215, 120, 0.18), rgba(245, 175, 25, 0.1)) !important;
    border: 1px solid rgba(245, 175, 25, 0.3) !important;
    color: #1a1a2e !important;
}

.cookie-card .quest-item {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(248, 249, 250, 0.75)) !important;
    border: 1px solid rgba(245, 175, 25, 0.25) !important;
}

.cookie-card .quest-title {
    color: #1a1a2e !important;
}

.cookie-card .quest-text {
    color: rgba(0, 0, 0, 0.75) !important;
}

.achievement-item.locked {
    background: rgba(200, 200, 200, 0.4) !important;
    opacity: 0.55 !important;
}

.achievement-item.unlocked {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.25), rgba(245, 175, 25, 0.15)) !important;
    border: 2px solid rgba(245, 175, 25, 0.55) !important;
}

.building-count {
    background: #f5af19 !important;
    color: white !important;
}

/* Games Tab Light Mode */
.games-title {
    color: #1a1a2e !important;
    text-shadow: 0 4px 20px rgba(138, 43, 226, 0.4) !important;
}

.game-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 3px solid rgba(138, 43, 226, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.game-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(138, 43, 226, 0.7) !important;
}

.game-card-title {
    color: #1a1a2e !important;
}

.game-card-desc {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* Changelog Light Mode */
.changelog-title {
    color: #1a1a2e !important;
}

.changelog-subtitle {
    color: rgba(0, 0, 0, 0.7) !important;
}

.changelog-content {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 2px solid rgba(138, 43, 226, 0.3) !important;
}

.changelog-content:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(138, 43, 226, 0.5) !important;
}

.changelog-version {
    color: #1a1a2e !important;
}

.changelog-date {
    color: rgba(0, 0, 0, 0.6) !important;
}

.changelog-list li {
    background: rgba(255, 255, 255, 0.5) !important;
    border-left-color: rgba(138, 43, 226, 0.5) !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

.changelog-list li:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    border-left-color: rgba(138, 43, 226, 0.8) !important;
}

/* Leaderboard Light Mode */
.leaderboard-main-title {
    color: #1a1a2e !important;
}

.leaderboard-subtitle {
    color: rgba(0, 0, 0, 0.7) !important;
}

.leaderboard-tab-btn {
    color: #1a1a2e !important;
}

.leaderboard-entry {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a2e !important;
}

.sort-select {
    color: #1a1a2e !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

.sort-select option {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

.leaderboard-controls label {
    color: #1a1a2e !important;
}

/* ===== DARK MODE ===== */
body.dark-mode {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 100%) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .game-fullscreen {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 100%) !important;
}

body.dark-mode .animated-background {
    opacity: 0.6 !important;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 100%) !important;
}

body.dark-mode .animated-background .gradient-orb {
    opacity: 0.8 !important;
}

body.dark-mode .card {
    background: rgba(25, 25, 45, 0.95) !important;
    color: #e0e0e0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .subtitle {
    color: #ffffff !important;
}

body.dark-mode label {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .time-input {
    background: rgba(40, 40, 70, 0.8) !important;
    color: #ffffff !important;
    border: 2px solid rgba(138, 43, 226, 0.5) !important;
}

body.dark-mode .result,
body.dark-mode .auto-result {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.2), rgba(245, 175, 25, 0.08)) !important;
    color: #ffffff !important;
}

body.dark-mode .info-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.15)) !important;
    border: 2px solid rgba(138, 43, 226, 0.5) !important;
}

body.dark-mode .info-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Wordle Dark Mode */
body.dark-mode .wordle-card {
    background: rgba(25, 25, 45, 0.95) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .wordle-title {
    color: #ffffff !important;
}

body.dark-mode .wordle-date {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .wordle-tile {
    background: rgba(40, 40, 70, 0.8) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;
}

body.dark-mode .wordle-tile.correct {
    background: #6aaa64 !important;
    border-color: #6aaa64 !important;
    color: white !important;
}

body.dark-mode .wordle-tile.present {
    background: #c9b458 !important;
    border-color: #c9b458 !important;
    color: white !important;
}

body.dark-mode .wordle-tile.absent {
    background: #787c7e !important;
    border-color: #787c7e !important;
    color: white !important;
}

body.dark-mode .wordle-key {
    background: rgba(40, 40, 70, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
}

body.dark-mode .wordle-key.correct {
    background: #6aaa64 !important;
    color: white !important;
}

body.dark-mode .wordle-key.present {
    background: #c9b458 !important;
    color: white !important;
}

body.dark-mode .wordle-key.absent {
    background: #787c7e !important;
    color: white !important;
}

body.dark-mode .wordle-key:hover {
    background: rgba(138, 43, 226, 0.4) !important;
}

body.dark-mode .wordle-message {
    color: #ffffff !important;
}

/* Cookie Clicker Dark Mode */
body.dark-mode .cookie-section {
    background: rgba(30, 30, 55, 0.6) !important;
    border: 2px solid rgba(138, 43, 226, 0.4) !important;
}

body.dark-mode .cookie-card {
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(15, 15, 35, 0.9)) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .cookie-title {
    color: #ffffff !important;
}

body.dark-mode .stat-card {
    background: linear-gradient(135deg, rgba(255, 215, 120, 0.15), rgba(245, 175, 25, 0.08)) !important;
    border: 2px solid rgba(245, 175, 25, 0.35) !important;
}

body.dark-mode .stat-label {
    color: rgba(255, 255, 255, 0.75) !important;
}

body.dark-mode .section-title {
    color: #ffffff !important;
    border-bottom: 2px solid rgba(245, 175, 25, 0.45) !important;
}

body.dark-mode .upgrade-item,
body.dark-mode .building-item {
    background: linear-gradient(180deg, rgba(40, 40, 70, 0.7), rgba(30, 30, 55, 0.6)) !important;
    border: 1px solid rgba(245, 175, 25, 0.2) !important;
}

body.dark-mode .upgrade-item:hover:not(.disabled),
body.dark-mode .building-item:hover:not(.disabled) {
    background: linear-gradient(180deg, rgba(60, 60, 100, 0.85), rgba(50, 50, 85, 0.75)) !important;
    border-color: rgba(245, 175, 25, 0.45) !important;
}

body.dark-mode .upgrade-item.disabled,
body.dark-mode .building-item.disabled {
    background: rgba(30, 30, 50, 0.4) !important;
    opacity: 0.45 !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

body.dark-mode .upgrade-name,
body.dark-mode .building-name {
    color: #e0e0e0 !important;
}

body.dark-mode .upgrade-desc,
body.dark-mode .building-desc {
    color: rgba(255, 255, 255, 0.65) !important;
}

body.dark-mode .upgrade-cost,
body.dark-mode .building-cost {
    color: #ff6b6b !important;
    font-weight: 800 !important;
}

body.dark-mode .stats-display > div {
    background: linear-gradient(135deg, rgba(255, 215, 120, 0.12), rgba(245, 175, 25, 0.06)) !important;
    border: 1px solid rgba(245, 175, 25, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode .cookie-card .quest-item {
    background: linear-gradient(90deg, rgba(40, 40, 70, 0.6), rgba(30, 30, 55, 0.5)) !important;
    border: 1px solid rgba(245, 175, 25, 0.2) !important;
}

body.dark-mode .cookie-card .quest-title {
    color: #ffffff !important;
}

body.dark-mode .cookie-card .quest-text {
    color: rgba(255, 255, 255, 0.75) !important;
}

body.dark-mode .achievement-item.locked {
    background: rgba(50, 50, 75, 0.4) !important;
    opacity: 0.45 !important;
}

body.dark-mode .achievement-item.unlocked {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.3), rgba(245, 175, 25, 0.18)) !important;
    border: 2px solid rgba(245, 175, 25, 0.65) !important;
}

body.dark-mode .building-count {
    background: #cc8a00 !important;
    color: #ffffff !important;
}

/* Games Tab Dark Mode */
body.dark-mode .games-title {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(138, 43, 226, 0.8) !important;
}

body.dark-mode .game-card {
    background: rgba(30, 30, 55, 0.85) !important;
    border: 3px solid rgba(138, 43, 226, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .game-card:hover {
    background: rgba(45, 45, 80, 0.9) !important;
    border-color: rgba(138, 43, 226, 0.9) !important;
}

body.dark-mode .game-card-title {
    color: #ffffff !important;
}

body.dark-mode .game-card-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tab Navigation Dark Mode */
body.dark-mode .tab-navigation {
    background: rgba(15, 15, 35, 0.6);
}

body.dark-mode .tab-btn {
    background: rgba(40, 40, 70, 0.4);
    border-color: rgba(138, 43, 226, 0.5);
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .tab-btn:hover {
    background: rgba(138, 43, 226, 0.35);
    border-color: rgba(138, 43, 226, 0.7);
}

body.dark-mode .theme-toggle-btn-global {
    background: rgba(138, 43, 226, 0.25);
    border-color: rgba(138, 43, 226, 0.6);
}

body.dark-mode .theme-toggle-btn-global:hover {
    background: rgba(138, 43, 226, 0.4);
}

/* Leaderboard Dark Mode */
body.dark-mode .leaderboard-main-title {
    color: #ffffff !important;
}

body.dark-mode .leaderboard-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .leaderboard-tab-btn {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .leaderboard-entry {
    background: rgba(30, 30, 55, 0.6) !important;
    color: #ffffff !important;
}

body.dark-mode .sort-select {
    color: #ffffff !important;
}

/* Changelog Dark Mode */
body.dark-mode .changelog-title {
    color: #ffffff !important;
}

body.dark-mode .changelog-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .changelog-content {
    background: rgba(30, 30, 55, 0.6) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
}

body.dark-mode .changelog-content:hover {
    background: rgba(40, 40, 70, 0.7) !important;
    border-color: rgba(138, 43, 226, 0.6) !important;
}

body.dark-mode .changelog-version {
    color: #ffffff !important;
}

body.dark-mode .changelog-date {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .changelog-list li {
    background: rgba(40, 40, 70, 0.4) !important;
    border-left-color: rgba(138, 43, 226, 0.6) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .changelog-list li:hover {
    background: rgba(50, 50, 85, 0.5) !important;
    border-left-color: rgba(138, 43, 226, 0.9) !important;
}

/* Cookie Consent Banner (always dark) */
.cookie-consent-banner {
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(10, 10, 30, 0.98));
}