/* Root Variables */
:root {
    --color-background: #f9fafb;
    --color-text: #1b1818;

    --body-bg-color: hsl(210, 20%, 98%);
    --color-primary: #3498db; /* Blue */
    --color-secondary: #e74c3c; /* Red */
    --color-tertiary: #ffa500; /* Yellow */
    --color-quaternary: #08a80a; /* Green */
    --color-accent: #aaaaaa;
    --color-muted: #555555;
}

/* Dark Mode Variables */
body.dark-mode {
    --color-background: #292929;
    --color-text: #dbdbdb;
    --color-primary: #00cde2; /* Cyan */
    --color-secondary: #dd01e0; /* Magenta */
    --color-tertiary: #ffa500; /* Orange */
    --color-quaternary: #6eeb00; /* Vibrant Green */
    --color-muted: #cccccc;
}

/* Base Body Styles */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 18px;
    display: flex;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Prevents scrollbars on small viewports */
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Ensure content inside remains centered */
    overflow: hidden; /* Prevents overflow issues */
}

/* Game Container */
.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

/* Canvas Element */
#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100vw; /* Make sure it doesn’t exceed the viewport width */
    max-height: 100vh; /* Make sure it doesn’t exceed the viewport height */
    background-color: var(--color-background); /* Optional: ensures no flash */
}

/* Scoreboard */
.scoreboard {
    font-size: 24px;
    color: var(--color-text);
    /* position: absolute; */
    top: 20px; /* Increased spacing from the top */
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px; /* Extra padding to prevent cramming */
}

/* Status Information */
#statusInfo {
    font-size: 20px;
    color: var(--color-primary);
    /* position: absolute; */
    bottom: 70px; /* Moved further from the bottom */
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
}

/* Control Information */
#controlInfo {
    font-size: 16px;
    color: var(--color-text);
    /* position: absolute; */
    bottom: 20px; /* Further distance from the bottom */
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
}

/* Headers */
h1,
h2,
h3 {
    line-height: 1.2;
}

/* Header Section */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background);
}

/* Dark Mode Toggle Button */
#dark-mode-toggle {
    margin-right: 10px;
}

/* Game Container */
.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
}

/* Scoreboard */
.scoreboard {
    font-size: 24px;
    margin-top: 10px;
    color: var(--color-text);
}

/* Status Information */
#statusInfo {
    font-size: 20px;
    margin-top: 10px;
    color: var(--color-primary);
}

/* Control Information */
#controlInfo {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--color-text);
}

/* Reflex Game */

/* Game Rules */
.game-rules {
    margin-top: 20px;
    text-align: left;
    color: var(--color-text);
}

.game-rules h2 {
    margin-bottom: 10px;
}

/* Navbar */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--color-text);
    padding: 0px 15px;
    display: inline-block;
}

nav ul li a:hover {
    color: var(--color-primary);
}

/* Active Page Highlight */
nav ul li a.active {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Footer */
footer {
    text-align: center;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    width: 100%;
    margin-top: auto;
}

/* Footer Links */
footer a {
    color: var(--color-primary);
    text-decoration: none;
}

footer a:hover {
    color: var(--color-secondary);
}

/* Word Game Specific Styles */

/* Target the letters display in the word game */
#wordGame #letters {
    font-size: 48px; /* Adjust the size as needed */
    margin: 20px 0;
}

/* Target the message element in the word game */
#wordGame #message {
    font-size: 24px;
    margin: 10px 0;
}

/* Style the input container in the word game */
#wordGame #inputContainer {
    margin: 20px 0;
}

/* Increase the size of the input field */
#wordGame #wordInput {
    font-size: 24px;
    padding: 10px;
    width: 300px; /* Adjust the width as needed */
    box-sizing: border-box;
}

/* Increase the size of the submit button */
#wordGame #submitBtn {
    font-size: 24px;
    padding: 10px 20px;
    margin-left: 10px;
}

/* Adjust the winner message font size */
#wordGame #winnerMessage {
    font-size: 32px;
    margin: 20px 0;
    color: var(--color-primary);
}

/* Math Game Specific Styles */

/* Target the equation display in the math game */
#mathGame #equation {
    font-size: 48px; /* Increased size */
    margin: 20px 0;
}

/* Target the answer buttons in the math game */
#mathGame .answers {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

#mathGame .answer-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#mathGame .answer-row:first-child {
    /* Center the single button */
    justify-content: center;
}

#mathGame .answer-row:last-child button {
    margin: 0 10px;
}

#mathGame .answer-btn {
    font-size: 32px; /* Increased size */
    padding: 10px 20px;
    min-width: 100px;
}

/* Adjust the message font size */
#mathGame #message {
    font-size: 24px;
    margin: 10px 0;
}

/* Reflex Game Specific Styles */

/* Target the equation display in the math game */
#reflexGame #equation {
    font-size: 48px; /* Increased size */
    margin: 20px 0;
}

/* Target the answer buttons in the math game */
#reflexGame .answers {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

#reflexGame .answer-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#reflexGame .answer-row:first-child {
    /* Center the single button */
    justify-content: center;
}

#reflexGame .answer-row:last-child button {
    margin: 0 10px;
}

#reflexGame .answer-btn {
    font-size: 32px; /* Increased size */
    padding: 10px 20px;
    min-width: 100px;
}

/* Adjust the message font size */
#reflexGame #message {
    font-size: 24px;
    margin: 10px 0;
}

/* Target the rules display display in the reflex game */
#reflexGame #rulesDisplay {
    font-size: 22px; /* Increased size */
}