/* Light Mode Fixes for Canvas-Based Games */

/* Canvas background fix - make it light in light mode */
html.light-mode canvas,
:root.light-mode canvas {
    background: #f1f5f9 !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Glass panels - better visibility in light mode */
html.light-mode .glass-panel,
:root.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Overlays (Game Over, Pause, Shop) */
html.light-mode #gameOverlay,
html.light-mode #pauseOverlay,
html.light-mode #shop,
html.light-mode .modal,
:root.light-mode #gameOverlay,
:root.light-mode #pauseOverlay,
:root.light-mode #shop,
:root.light-mode .modal {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    color: #1e293b !important;
}

/* Stats and info panels */
html.light-mode .stat,
html.light-mode .upgrade-card,
html.light-mode .weapon-card,
:root.light-mode .stat,
:root.light-mode .upgrade-card,
:root.light-mode .weapon-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

/* Text in overlays */
html.light-mode #gameOverlay *,
html.light-mode #pauseOverlay *,
html.light-mode #shop *,
:root.light-mode #gameOverlay *,
:root.light-mode #pauseOverlay *,
:root.light-mode #shop * {
    color: #1e293b !important;
}

/* Specific text color fixes */
html.light-mode #gameOverlay h2,
html.light-mode #pauseOverlay h2,
html.light-mode #shop h2,
:root.light-mode #gameOverlay h2,
:root.light-mode #pauseOverlay h2,
:root.light-mode #shop h2 {
    color: #0f172a !important;
}

/* Buttons in light mode */
html.light-mode button,
:root.light-mode button {
    color: #1e293b;
}

html.light-mode .glass-panel button,
:root.light-mode .glass-panel button {
    color: #1e293b !important;
}

/* Ensure score displays are visible */
html.light-mode [class*="score"],
html.light-mode [id*="score"],
html.light-mode [id*="Score"],
:root.light-mode [class*="score"],
:root.light-mode [id*="score"],
:root.light-mode [id*="Score"] {
    color: #0f172a !important;
}

/* Make sure all game stats are readable */
html.light-mode .text-2xl,
html.light-mode .text-xl,
html.light-mode .text-lg,
:root.light-mode .text-2xl,
:root.light-mode .text-xl,
:root.light-mode .text-lg {
    color: #0f172a !important;
}

/* Secondary text in light mode */
html.light-mode .text-sm,
:root.light-mode .text-sm {
    color: #475569 !important;
}

/* Aim Trainer specific fixes */
html.light-mode #aimTrainerCanvas,
:root.light-mode #aimTrainerCanvas {
    background: #e2e8f0 !important;
}

/* Space Shooter specific fixes */
html.light-mode #spaceCanvas,
:root.light-mode #spaceCanvas {
    background: #dbeafe !important;
}

/* Breakout specific fixes */
html.light-mode #brickcrusherCanvas,
:root.light-mode #brickcrusherCanvas {
    background: #e0e7ff !important;
}

/* Color Fusion specific fixes */
html.light-mode #colorCanvas,
:root.light-mode #colorCanvas {
    background: #fce7f3 !important;
}