/* Game Tron Theme Styles */
:root {
    --game-bg-dark: #000000;
    --game-text-dark: #00e6ff;
    --game-border-dark: #00e6ff;
    --game-glow-dark: rgba(0, 230, 255, 0.6);
    --game-btn-bg-dark: rgba(0, 0, 0, 0.9);
    --game-btn-hover-dark: rgba(0, 230, 255, 0.3);
    
    --game-bg-light: #f0f4f8;
    --game-text-light: #e85d04;
    --game-border-light: #dc2f02;
    --game-glow-light: rgba(220, 47, 2, 0.6);
    --game-btn-bg-light: rgba(240, 244, 248, 0.9);
    --game-btn-hover-light: rgba(232, 93, 4, 0.3);
}

body {
    background-color: var(--game-bg-dark);
    color: var(--game-text-dark);
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

body.light-mode {
    background-color: var(--game-bg-light);
    color: var(--game-text-light);
}

/* Animation Container */
#animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#animation {
    width: 100%;
    height: 100%;
}

/* Headers */
h1, h2, h3 {
    color: var(--game-text-dark);
    text-shadow: 0 0 10px var(--game-glow-dark);
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: var(--game-text-light);
    text-shadow: 0 0 10px var(--game-glow-light);
}

/* Buttons */
button,
.button,
.choice-button,
#start-button,
#try-again-button,
#back-button,
#reset-button,
#quit-button,
#submit-btn,
#reset-btn,
#rreset-btn,
#tryAgainButton,
#quitButton {
    background-color: var(--game-btn-bg-dark);
    color: var(--game-text-dark);
    border: 2px solid var(--game-border-dark);
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px var(--game-glow-dark);
}

body.light-mode button,
body.light-mode .button,
body.light-mode .choice-button,
body.light-mode #start-button,
body.light-mode #try-again-button,
body.light-mode #back-button,
body.light-mode #reset-button,
body.light-mode #quit-button,
body.light-mode #submit-btn,
body.light-mode #reset-btn,
body.light-mode #rreset-btn,
body.light-mode #tryAgainButton,
body.light-mode #quitButton {
    background-color: var(--game-btn-bg-light);
    color: var(--game-text-light);
    border: 2px solid var(--game-border-light);
    box-shadow: 0 0 10px var(--game-glow-light);
}

button:hover,
.button:hover,
.choice-button:hover,
#start-button:hover,
#try-again-button:hover,
#back-button:hover,
#reset-button:hover,
#quit-button:hover,
#submit-btn:hover,
#reset-btn:hover,
#rreset-btn:hover,
#tryAgainButton:hover,
#quitButton:hover {
    background-color: var(--game-btn-hover-dark);
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--game-glow-dark);
}

body.light-mode button:hover,
body.light-mode .button:hover,
body.light-mode .choice-button:hover,
body.light-mode #start-button:hover,
body.light-mode #try-again-button:hover,
body.light-mode #back-button:hover,
body.light-mode #reset-button:hover,
body.light-mode #quit-button:hover,
body.light-mode #submit-btn:hover,
body.light-mode #reset-btn:hover,
body.light-mode #rreset-btn:hover,
body.light-mode #tryAgainButton:hover,
body.light-mode #quitButton:hover {
    background-color: var(--game-btn-hover-light);
    box-shadow: 0 0 20px var(--game-glow-light);
}

/* Game Containers */
.container,
#game-container {
    position: relative;
    z-index: 1;
}

/* Canvas Elements */
canvas {
    border: 2px solid var(--game-border-dark);
    box-shadow: 0 0 20px var(--game-glow-dark);
}

body.light-mode canvas {
    border: 2px solid var(--game-border-light);
    box-shadow: 0 0 20px var(--game-glow-light);
}

/* Game Board Cells (Tic Tac Toe) */
.cell {
    border: 2px solid var(--game-border-dark);
    color: var(--game-text-dark);
    background-color: rgba(0, 0, 0, 0.5);
}

body.light-mode .cell {
    border: 2px solid var(--game-border-light);
    color: var(--game-text-light);
    background-color: rgba(240, 244, 248, 0.5);
}

/* Memory Game Cards */
.card {
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--game-border-dark);
    color: var(--game-text-dark);
    box-shadow: 0 0 10px var(--game-glow-dark);
}

body.light-mode .card {
    background-color: rgba(240, 244, 248, 0.7);
    border: 2px solid var(--game-border-light);
    color: var(--game-text-light);
    box-shadow: 0 0 10px var(--game-glow-light);
}

/* Input Fields */
input[type="text"],
input[type="number"],
#guess-input {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--game-text-dark);
    border: 2px solid var(--game-border-dark);
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--game-glow-dark);
}

body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode #guess-input {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--game-text-light);
    border: 2px solid var(--game-border-light);
    box-shadow: 0 0 10px var(--game-glow-light);
}

input:focus {
    outline: none;
    box-shadow: 0 0 20px var(--game-glow-dark);
}

body.light-mode input:focus {
    box-shadow: 0 0 20px var(--game-glow-light);
}

/* Popups and Overlays */
.game-over-popup,
#overlay-content,
.popup {
    background-color: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--game-border-dark);
    box-shadow: 0 0 30px var(--game-glow-dark);
    color: var(--game-text-dark);
}

body.light-mode .game-over-popup,
body.light-mode #overlay-content,
body.light-mode .popup {
    background-color: rgba(240, 244, 248, 0.95);
    border: 2px solid var(--game-border-light);
    box-shadow: 0 0 30px var(--game-glow-light);
    color: var(--game-text-light);
}

/* Sidebar */
.sidebar {
    background-color: rgba(0, 0, 0, 0.8);
    border-left: 2px solid var(--game-border-dark);
    color: var(--game-text-dark);
}

body.light-mode .sidebar {
    background-color: rgba(240, 244, 248, 0.9);
    border-left: 2px solid var(--game-border-light);
    color: var(--game-text-light);
}

.sidebar h2 {
    color: var(--game-text-dark);
    text-shadow: 0 0 8px var(--game-glow-dark);
}

body.light-mode .sidebar h2 {
    color: var(--game-text-light);
    text-shadow: 0 0 8px var(--game-glow-light);
}

/* Footer */
footer p,
.copyright-text {
    color: var(--game-text-dark);
    text-shadow: 0 0 8px var(--game-glow-dark);
}

body.light-mode footer p,
body.light-mode .copyright-text {
    color: var(--game-text-light);
    text-shadow: 0 0 8px var(--game-glow-light);
}

/* Score and Timer Displays */
#timer,
#score,
.score-display {
    color: var(--game-text-dark);
    text-shadow: 0 0 10px var(--game-glow-dark);
    font-weight: bold;
}

body.light-mode #timer,
body.light-mode #score,
body.light-mode .score-display {
    color: var(--game-text-light);
    text-shadow: 0 0 10px var(--game-glow-light);
}

/* Result Messages */
.result,
#message {
    color: var(--game-text-dark);
    text-shadow: 0 0 10px var(--game-glow-dark);
}

body.light-mode .result,
body.light-mode #message {
    color: var(--game-text-light);
    text-shadow: 0 0 10px var(--game-glow-light);
}