/* FILE: styles.css - Styles for Cojoro: Tic-Tac-D'oh! game interface */
/*
 * Styles for the **Cojoro: Tic-Tac-D'oh!** game, defining the visual design and layout.
 * - Provides a **dark theme** with a gradient background for better contrast.
 * - Uses **Roboto** font for a modern, clean look across all elements.
 * - Includes responsive design for mobile portrait screens.
 * @author Adrian Ramon
 * @email nairda.nomar@gmail.com
 * @lastUpdated April 17, 2025
 * @version 0.14
 */

/* SECTION: Root Variables - Global design settings */
/*
 * Defines global CSS custom properties for consistent styling across the game.
 * - Stores **colors** for backgrounds, text, and accents.
 * - Defines **fonts**, **spacing**, and **animation** durations for reusability.
 * - Ensures **consistency** and ease of maintenance.
 */
:root {
    /* Purpose: Color variables */
    --background-gradient-start: #1e3a8a; /* Dark blue */
    --background-gradient-end: #6b7280; /* Dark gray */
    --secondary-background: #374151; /* Dark gray for sections */
    --cell-gradient-start: #4b5e7d; /* Darker cell background start */
    --cell-gradient-end: #3b4c66; /* Darker cell background end */
    --primary-text: #fff; /* White */
    --secondary-text: #d1d5db; /* Light gray */
    --player-x: #2dd4bf; /* Teal for 'X' */
    --player-o: #ff6b6b; /* Coral for 'O' */
    --timer: #22c55e; /* Bright green for timers */
    --button-gradient-start: #5eead4; /* Teal button start */
    --button-gradient-end: #2dd4bf; /* Teal button end */
    --button-gradient-hover-start: #2dd4bf; /* Teal hover/active start */
    --button-gradient-hover-end: #14b8a6; /* Teal hover/active end */
    --border: #6b7280; /* Gray border/outline */

    /* Purpose: Font variables */
    --font-family: 'Roboto', Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* Purpose: Spacing and sizing variables */
    --border-radius-large: 10px; /* Sections */
    --border-radius-medium: 8px; /* Buttons */
    --border-radius-small: 5px; /* Inputs */
    --padding-section: 10px;
    --padding-button: 8px 15px;
    --padding-input: 3px; /* Reduced for smaller input/select height */
    --margin-bottom-large: 20px;
    --margin-bottom-medium: 15px;
    --margin-bottom-small: 12px; /* Increased for timer settings rows */
    --box-shadow-section: 0 2px 10px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 0 10px var(--player-x);
    --box-shadow-active: 0 0 15px var(--player-x);

    /* Purpose: Animation variables */
    --transition-slow: 0.3s; /* Color, background */
    --transition-fast: 0.2s; /* Transform, shadow */
}

/* SECTION: Body - Overall page styling */
/*
 * Styles the body element to set the global background, font, and layout.
 * - Applies a **dark gradient background** for contrast and depth.
 * - Uses **Roboto** font for consistency across the game.
 * - Centers content with **flexbox** for alignment.
 */
body {
    /* Purpose: Background and layout */
    background: linear-gradient(to bottom right, var(--background-gradient-start), var(--background-gradient-end));
    color: var(--primary-text);
    font-family: var(--font-family);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* SECTION: Game Container - Main game wrapper styling */
/*
 * Styles the #game container to center and style the main game area.
 * - Centers content with **flexbox** for alignment.
 * - Adds a **double border** with teal accent for a playful look.
 * - Applies a **subtle background** and shadow for depth.
 */
#game {
    /* Purpose: Layout and appearance */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    border: 4px double var(--player-x);
    border-radius: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    /* Ensure footer stays at the bottom */
    min-height: 80vh; /* Full viewport height for consistent layout */
}

/* SECTION: Main Content - Wrapper for centering main content */
/*
 * Styles the #main-content wrapper to center the main game elements vertically.
 * - Groups **main elements** (title, mode selection, settings, board) for centering.
 * - Uses **flexbox** to center content vertically within #game.
 * - Applies **gap** for consistent spacing between child elements.
 */
#main-content {
    /* Purpose: Centering and spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Add consistent spacing between child elements */
    flex: 1; /* Allow the wrapper to grow and center within #game */
    justify-content: center; /* Center content vertically */
}

/* SECTION: Title - Game title styling */
/*
 * Styles the h1 element to display the game title prominently.
 * - Uses a **larger font size** to make the title stand out.
 * - Adds a **teal text shadow** for a glowing effect.
 * - Centers the title with **proper spacing** below.
 */
h1 {
    /* Purpose: Title styling */
    font-size: 3em;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--margin-bottom-large);
    margin-top: 0; /* Remove default margin for consistent spacing */
    text-shadow: 0 0 10px var(--player-x); /* Teal shadow for glow */
}

/* SECTION: Header Section - Mode selection and timer settings */
/*
 * Styles the mode selection and timer settings sections with a consistent look.
 * - Uses a **dark background** to match the theme.
 * - Applies **rounded corners** and a shadow for a modern appearance.
 * - Centers content for visual balance.
 * - Hides mode selection and timer settings when game is started.
 */
#mode-selection, #timer-settings {
    /* Purpose: Appearance and layout */
    background: var(--secondary-background);
    border-radius: var(--border-radius-large);
    padding: var(--padding-section);
    margin-bottom: var(--margin-bottom-large);
    box-shadow: var(--box-shadow-section);
    display: flex; /* Changed to flex for better layout control */
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: center; /* Center buttons */
    gap: 10px; /* Add spacing between buttons */
    max-width: 100%; /* Ensure container doesn't exceed parent width */
    opacity: 1;
    transition: opacity var(--transition-slow) ease-in-out;
}

#game.game-started #mode-selection,
#game.game-started #timer-settings {
    /* Purpose: Hide when game is started */
    display: none;
    opacity: 0;
}

#mode-selection button {
    /* Purpose: Button styling */
    padding: var(--padding-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    background: linear-gradient(to bottom, var(--button-gradient-start), var(--button-gradient-end));
    color: #333;
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    flex: 1 1 200px; /* Allow buttons to grow but set a minimum width */
    max-width: 220px; /* Limit button width to prevent congestion */
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-slow), color var(--transition-slow);
}

#mode-selection button:hover {
    /* Purpose: Hover effect */
    background: linear-gradient(to bottom, var(--button-gradient-hover-start), var(--button-gradient-hover-end));
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.05);
}

#mode-selection button.active {
    /* Purpose: Active state */
    background: linear-gradient(to bottom, var(--button-gradient-hover-start), var(--button-gradient-hover-end));
    box-shadow: var(--box-shadow-active);
    color: var(--primary-text);
}

#timer-settings {
    /* Purpose: Spacing and layout for timer settings */
    margin-bottom: var(--margin-bottom-large);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#timer-settings .timer-setting {
    /* Purpose: Styling for individual timer setting rows */
    display: flex;
    align-items: center;
    margin-bottom: var(--margin-bottom-small);
}

#timer-settings label {
    /* Purpose: Label styling */
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 1em;
    margin-right: 10px;
}

#timer-settings input {
    /* Purpose: Input styling with reduced size */
    padding: var(--padding-input);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 0.9em; /* Slightly smaller text */
    background: var(--cell-gradient-start);
    color: var(--primary-text);
    border: 2px solid var(--border);
    border-radius: var(--border-radius-small);
    width: 50px; /* Reduced width */
    height: 20px; /* Explicit height for smaller box */
    text-align: center; /* Center text */
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

#timer-settings input:focus {
    /* Purpose: Focus effect */
    border-color: var(--player-x);
    box-shadow: 0 0 8px var(--player-x);
    outline: none;
}

#timer-settings select {
    /* Purpose: Dropdown styling with reduced size */
    padding: var(--padding-input);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 0.9em; /* Slightly smaller text */
    background: var(--cell-gradient-start);
    color: var(--primary-text);
    border: 2px solid var(--border);
    border-radius: var(--border-radius-small);
    width: 60px; /* Reduced width */
    height: 30px; /* Explicit height for smaller box */
    text-align: center; /* Center text */
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

#timer-settings select:focus {
    /* Purpose: Focus effect for dropdown */
    border-color: var(--player-x);
    box-shadow: 0 0 8px var(--player-x);
    outline: none;
}

/* SECTION: Game Info Section - Turn, timer, and wins display */
/*
 * Styles the turn display, game timer, and wins display with a consistent dark theme.
 * - Uses a **dark background** for contrast against the body.
 * - Applies **rounded corners** and a shadow for depth.
 * - Centers content for visual balance.
 * - Hides these elements until the game starts.
 */
#turn, #game-timer, #wins {
    /* Purpose: Appearance and layout */
    background: var(--secondary-background);
    border-radius: var(--border-radius-large);
    padding: var(--padding-section);
    margin-bottom: var(--margin-bottom-large);
    box-shadow: var(--box-shadow-section);
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity var(--transition-slow) ease-in-out;
}

#game.game-started #turn,
#game.game-started #game-timer,
#game.game-started #wins {
    /* Purpose: Show when game is started */
    display: block;
    opacity: 1;
}

#turn {
    /* Purpose: Turn display styling */
    font-size: 1.8em;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--margin-bottom-medium);
}

#turn .player-x {
    /* Purpose: Player X styling */
    color: var(--player-x);
    font-weight: var(--font-weight-bold);
}

#turn .player-o {
    /* Purpose: Player O styling */
    color: var(--player-o);
    font-weight: var(--font-weight-bold);
}

#game-timer {
    /* Purpose: Game timer styling */
    font-size: 1.2em;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--margin-bottom-medium);
    color: var(--timer);
}

#wins {
    /* Purpose: Wins display styling */
    font-size: 1.2em;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--margin-bottom-large);
}

#player-x-wins {
    /* Purpose: Player X wins styling */
    color: var(--player-x);
    margin-right: 20px;
}

#player-o-wins {
    /* Purpose: Player O wins styling */
    color: var(--player-o);
}

/* SECTION: Multiplayer Section - Room creation, joining, and listing controls */
/*
 * Styles the multiplayer section for creating, joining, and listing game rooms.
 * - Applies a **fade-in animation** for smooth visibility transitions.
 * - Uses **dark backgrounds** for inputs and buttons to match the theme.
 * - Centers content for visual balance and organizes buttons and inputs clearly.
 */
#multiplayer {
    /* Purpose: Layout and animation */
    margin-bottom: var(--margin-bottom-large);
    display: none;
    opacity: 0;
    transition: opacity var(--transition-slow) ease-in-out;
}

#multiplayer.visible {
    /* Purpose: Visibility state */
    display: block;
    opacity: 1;
}

#multiplayer-buttons {
    /* Purpose: Container for initial buttons */
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: var(--margin-bottom-small);
}

#room-input {
    /* Purpose: Container for room ID input and join button */
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: var(--margin-bottom-small);
}

#roomId {
    /* Purpose: Room ID input styling */
    padding: var(--padding-input);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 1em;
    background: var(--cell-gradient-start);
    color: var(--primary-text);
    border: 2px solid var(--border);
    border-radius: var(--border-radius-small);
    width: 120px; /* Narrower width */
    text-align: center; /* Center text */
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

#roomId:focus {
    /* Purpose: Focus effect */
    border-color: var(--player-x);
    box-shadow: 0 0 8px var(--player-x);
    outline: none;
}

#createGame, #listGames, #joinGame {
    /* Purpose: Button styling for create, list, and join actions */
    padding: var(--padding-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    background: linear-gradient(to bottom, var(--button-gradient-start), var(--button-gradient-end));
    color: var(--primary-text);
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-slow);
}

#createGame:hover, #listGames:hover, #joinGame:hover {
    /* Purpose: Hover effect */
    background: linear-gradient(to bottom, var(--button-gradient-hover-start), var(--button-gradient-hover-end));
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.05);
}

#room-list {
    /* Purpose: Room list container styling */
    margin-top: var(--margin-bottom-small);
    background: var(--secondary-background);
    border-radius: var(--border-radius-large);
    padding: var(--padding-section);
    box-shadow: var(--box-shadow-section);
}

#room-list-message {
    /* Purpose: Room list message styling */
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 1em;
    margin-bottom: var(--margin-bottom-small);
    color: var(--primary-text);
}

#room-list-buttons {
    /* Purpose: Room list buttons container styling */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-list-button {
    /* Purpose: Individual room button styling */
    padding: var(--padding-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    background: linear-gradient(to bottom, var(--button-gradient-start), var(--button-gradient-end));
    color: var(--primary-text);
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-slow);
}

.room-list-button:hover {
    /* Purpose: Hover effect for room buttons */
    background: linear-gradient(to bottom, var(--button-gradient-hover-start), var(--button-gradient-hover-end));
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.05);
}

/* SECTION: Game Board - 3x3 grid and cell styling */
/*
 * Styles the game board and its cells with a dark theme and animations.
 * - Uses a **grid layout** for the 3x3 board with even spacing.
 * - Applies a **radial gradient glow** behind the board for visual flair.
 * - Styles cells with **dark backgrounds** and animations for placement and wins.
 */
#board {
    /* Purpose: Grid layout */
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-gap: 10px;
    margin: 0 auto;
    width: 470px;
    position: relative;
    z-index: 1;
}

#board::before {
    /* Purpose: Background glow effect */
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle at center, rgba(45, 212, 191, 0.3), transparent);
    z-index: -1;
}

.cell {
    /* Purpose: Cell styling */
    width: 150px;
    height: 150px;
    background: linear-gradient(to bottom, var(--cell-gradient-start), var(--cell-gradient-end));
    border: none;
    box-shadow: 0 0 0 2px var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    position: relative;
    transition: box-shadow var(--transition-slow), background var(--transition-slow);
    border-radius: var(--border-radius-medium);
}

.cell.x {
    /* Purpose: 'X' styling */
    color: var(--player-x);
    box-shadow: 0 0 0 2px var(--player-x);
    animation: pop 0.3s ease-in;
}

.cell.o {
    /* Purpose: 'O' styling */
    color: var(--player-o);
    box-shadow: 0 0 0 2px var(--player-o);
    animation: pop 0.3s ease-in;
}

.cell:not(.x):not(.o):hover {
    /* Purpose: Hover effect */
    background: linear-gradient(to bottom, #5b6e8d, var(--cell-gradient-start));
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
}

.timer {
    /* Purpose: Timer styling */
    position: absolute;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    bottom: 5px;
    right: 5px;
    color: var(--timer);
}

.fade {
    /* Purpose: Fade animation */
    animation: fadeOut 1s linear forwards;
}

@keyframes fadeOut {
    to { opacity: 0; }
}

@keyframes pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.cell.strike-horizontal::after {
    /* Purpose: Horizontal strike animation */
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    top: 50%;
    left: 10%; /* Adjusted to start within cell */
    transform: translateY(-50%);
    animation: drawLineHorizontal 0.5s forwards;
}

.cell.strike-vertical::after {
    /* Purpose: Vertical strike animation */
    content: '';
    position: absolute;
    width: 4px;
    height: 0;
    left: 50%;
    top: 10%; /* Adjusted to start within cell */
    transform: translateX(-50%);
    animation: drawLineVertical 0.5s forwards;
}

.cell.strike-diagonal-right::after {
    /* Purpose: Diagonal right strike animation */
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    top: 50%;
    left: 10%; /* Adjusted to start within cell */
    transform: rotate(45deg);
    animation: drawLineDiagonal 0.5s forwards;
}

.cell.strike-diagonal-left::after {
    /* Purpose: Diagonal left strike animation */
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    top: 50%;
    left: 10%; /* Adjusted to start within cell */
    transform: rotate(-45deg);
    animation: drawLineDiagonal 0.5Unchanged: forwards;
}

@keyframes drawLineHorizontal {
    from { width: 0; }
    to { width: 80%; } /* Adjusted to stay within cell */
}

@keyframes drawLineVertical {
    from { height: 0; }
    to { height: 80%; } /* Adjusted to stay within cell */
}

@keyframes drawLineDiagonal {
    from { width: 0; }
    to { width: 80%; } /* Adjusted to stay within cell */
}

.cell.x.strike-horizontal::after,
.cell.x.strike-vertical::after,
.cell.x.strike-diagonal-right::after,
.cell.x.strike-diagonal-left::after {
    /* Purpose: 'X' strike color */
    background: var(--player-x);
}

.cell.o.strike-horizontal::after,
.cell.o.strike-vertical::after,
.cell.o.strike-diagonal-right::after,
.cell.o.strike-diagonal-left::after {
    /* Purpose: 'O' strike color */
    background: var(--player-o);
}

#turn[data-player="X"] ~ #board .cell:not(.x):not(.o):hover {
    /* Purpose: Hover effect for 'X' turn */
    box-shadow: 0 0 0 2px var(--player-x);
}

#turn[data-player="O"] ~ #board .cell:not(.x):not(.o):hover {
    /* Purpose: Hover effect for 'O' turn */
    box-shadow: 0 0 0 2px var(--player-o);
}

/* SECTION: Footer - Version and modification date display */
/*
 * Styles the footer section with version and modification date.
 * - Centers the text with **no top border** for a cleaner look.
 * - Uses a **light gray** color for secondary text.
 * - Applies **Roboto** font for consistency.
 */
#version {
    /* Purpose: Footer styling */
    font-size: 0.8em;
    font-weight: var(--font-weight-regular);
    color: var(--secondary-text);
    margin-top: auto; /* Push footer to bottom of #game container */
    text-align: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px; /* Add bottom padding for spacing */
    white-space: pre-wrap; /* Preserve whitespace */
    letter-spacing: 1px; /* Slight increase for readability */
}

/* SECTION: Notification Overlay - Custom notification styling */
/*
 * Styles the custom notification overlay for in-game messages.
 * - Uses a **dark backdrop** to dim the background.
 * - Styles the notification with a **dark background** and teal border.
 * - Applies **Roboto** font and animations for a modern look.
 */
#notification-overlay {
    /* Purpose: Overlay styling */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#notification {
    /* Purpose: Notification box styling */
    background: var(--secondary-background);
    border: 2px solid var(--player-x);
    border-radius: var(--border-radius-large);
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    animation: pop 0.3s ease-in;
}

#notification-message {
    /* Purpose: Message text styling */
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 1.5em;
    color: var(--primary-text);
    margin-bottom: 15px;
}

#notification-buttons {
    /* Purpose: Button container styling */
    display: flex;
    justify-content: center;
    gap: 10px;
}

.notification-button {
    /* Purpose: Individual button styling */
    padding: var(--padding-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    background: linear-gradient(to bottom, var(--button-gradient-start), var(--button-gradient-end));
    color: #333;
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-slow);
}

.notification-button:hover {
    /* Purpose: Hover effect */
    background: linear-gradient(to bottom, var(--button-gradient-hover-start), var(--button-gradient-hover-end));
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.05);
}

/* SECTION: Media Query - Responsive styling for mobile portrait */
/*
 * Adjusts styling for mobile portrait screens (max-width: 600px).
 * - Reduces **font sizes** and **spacing** for smaller screens.
 * - Scales down the **grid** and **cells** to fit within #game container.
 * - Ensures **consistent layout** for #game container.
 * - Maintains **dark theme** consistency across devices.
 */
@media only screen and (max-width: 600px) and (orientation: portrait) {
    /* SECTION: Game Width Adjustment - Experiment with #game width */
    /*
     * Allows manual adjustment of the **#game** container width in mobile portrait.
     * - Provides a configurable **width** setting for experimentation.
     * - Suggests trying different values to find the best fit.
     * - Example values to try:
     *   - **90vw**: Current setting, slightly narrower than viewport.
     *   - **100vw**: Full viewport width, removes side margins.
     *   - **400px**: Fixed width, may not scale with screen size.
     *   - **80%**: Percentage of parent container, responsive but may feel cramped.
     */
    #game {
        /* Purpose: Configurable width for experimentation */
        width: 95vw; /* Slightly narrower than viewport */
        /* To experiment, try replacing the width value above with one of the following:
           - width: 100vw; (Full viewport width, removes side margins)
           - width: 400px; (Fixed width, consistent but may overflow on small screens)
           - width: 80%; (80% of parent, responsive but may feel cramped)
           Adjust this value and test on your device to find the best fit. */
    }

    #game {
        /* Purpose: Other layout adjustments */
        max-width: none;
        padding: 0;
        border-radius: 15px;
        box-shadow: none;
        /* Ensure consistent height */
        min-height: 95vh; /* Slightly less than full viewport height */
        /* Try these alternatives for height:
           - min-height: 100vh; (Full viewport height)
           - min-height: 500px; (Minimum height of 500px)
           - height: 600px; (Fixed height, may cause overflow) */
    }

    #main-content {
        /* Purpose: Adjust spacing between child elements */
        gap: 15px; /* Increase gap for more space between containers */
        justify-content: center; /* Ensure centering */
    }

    h1 {
        /* Purpose: Fix position of title in mobile portrait */
        position: absolute; /* Position relative to #game */
        top: 60px; /* Distance from the top of #game container */
        /* Experiment with different positions by changing the top value:
           - top: 10px; (Closer to the top)
           - top: 30px; (Slightly lower)
           - top: 50px; (Further down)
           Adjust this value and test on your device to find the best position. */
        font-size: 2.3em;
        margin-bottom: 5px; /* Reduce spacing below title */
        padding: 0 10px; /* Add padding to prevent text from touching edges */
    }

    #main-content {
        /* Purpose: Adjust spacing to avoid overlap with fixed h1 */
        gap: 15px;
        justify-content: center;
        padding-top: 60px; /* Ensure space for the absolutely positioned h1 */
        /* Experiment with padding-top to match the top value of h1:
           - padding-top: 50px; (If top: 10px, adjust for h1 height)
           - padding-top: 70px; (If top: 30px, adjust for h1 height)
           - padding-top: 90px; (If top: 50px, adjust for h1 height)
           Adjust this value to ensure other elements don't overlap with h1. */
    }

    #mode-selection, #timer-settings {
        /* Purpose: Adjust padding and spacing */
        padding: 8px;
        margin-bottom: 10px; /* Reduce margin to minimize vertical space */
        gap: 8px; /* Reduce gap for mobile */
    }

    #mode-selection {
        /* Purpose: Stack buttons vertically */
        flex-direction: column; /* Stack buttons one per row */
        align-items: stretch; /* Ensure buttons take full width */
        padding: 10px 20px; /* Add more padding for better spacing */
    }

    #mode-selection button {
        /* Purpose: Adjust button size for stacking */
        padding: 8px 10px; /* Slightly taller buttons for better tap area */
        font-size: 0.9em; /* Slightly larger font for readability */
        flex: none; /* Remove flex-grow to prevent stretching */
        max-width: none; /* Allow buttons to take full width */
        width: 100%; /* Full width of the container */
        margin: 0; /* Remove margin for consistent spacing via gap */
    }

    #timer-settings .timer-setting {
        /* Purpose: Adjust row spacing for mobile */
        margin-bottom: 8px; /* Slightly increased for separation */
    }

    #timer-settings label {
        /* Purpose: Reduce label size */
        font-size: 0.8em;
        margin-right: 5px;
    }

    #timer-settings input {
        /* Purpose: Reduce input size for mobile */
        padding: 2px; /* Further reduced padding */
        font-size: 0.8em;
        width: 45px; /* Smaller width */
        height: 18px; /* Smaller height */
    }

    #timer-settings select {
        /* Purpose: Reduce dropdown size for mobile */
        padding: 2px; /* Further reduced padding */
        font-size: 0.8em;
        width: 65px; /* Smaller width */
        height: 26px; /* Smaller height */
    }

    #turn, #game-timer, #wins {
        /* Purpose: Adjust padding and spacing */
        padding: 8px;
        margin-bottom: 10px; /* Reduce margin to minimize vertical space */
        margin-left: 10px; /* Add margin to prevent touching edges */
        margin-right: 10px; /* Add margin to prevent touching edges */
    }

    #turn {
        /* Purpose: Reduce turn display size and spacing */
        font-size: 1.2em;
        margin-bottom: 5px; /* Reduce spacing below */
    }

    #game-timer {
        /* Purpose: Reduce timer size and spacing */
        font-size: 0.9em;
        margin-bottom: 5px; /* Reduce spacing below */
    }

    #wins {
        /* Purpose: Reduce wins display size and spacing */
        font-size: 0.9em;
        margin-bottom: 10px; /* Reduce spacing below */
    }

    #player-x-wins {
        /* Purpose: Adjust spacing */
        margin-right: 10px;
    }

    #multiplayer {
        /* Purpose: Adjust spacing */
        margin-bottom: 10px; /* Reduce margin to minimize vertical space */
        margin-left: 10px; /* Add margin to prevent touching edges */
        margin-right: 10px; /* Add margin to prevent touching edges */
    }

    #multiplayer-buttons {
        /* Purpose: Adjust button container for mobile */
        flex-direction: column;
        gap: 8px;
    }

    #room-input {
        /* Purpose: Adjust input container for mobile */
        flex-direction: column;
        gap: 8px;
        align-items: center; /* Center items for better alignment */
    }

    #roomId {
        /* Purpose: Reduce input size for mobile */
        padding: 3px;
        font-size: 0.8em;
        width: 120px; /* Match desktop width */
        text-align: center; /* Center text */
    }

    #createGame, #listGames, #joinGame {
        /* Purpose: Reduce button size */
        padding: 6px 10px;
        font-size: 0.8em;
        width: 100%;
        max-width: 150px;
    }

    #room-list {
        /* Purpose: Adjust room list container for mobile */
        padding: 8px;
        margin-top: 8px;
    }

    #room-list-message {
        /* Purpose: Reduce message size */
        font-size: 0.8em;
        margin-bottom: 8px;
    }

    #room-list-buttons {
        /* Purpose: Adjust button container for mobile */
        gap: 6px;
    }

    .room-list-button {
        /* Purpose: Reduce room button size */
        padding: 6px 10px;
        font-size: 0.8em;
    }

    #board {
        /* Purpose: Scale down grid to fit within #game container */
        grid-template-columns: repeat(3, calc((90vw - 60px) / 3)); /* Base cell size on #game width (90vw), subtract padding and gaps */
        grid-gap: 5px; /* Reduced gap for better fit */
        width: calc(90vw - 40px); /* Match #game width, subtract padding */
        margin: 0 20px; /* Add padding to prevent touching edges */
    }

    .cell {
        /* Purpose: Scale down cells to fit within #board */
        width: calc((90vw - 60px) / 3); /* Match grid column width */
        height: calc((90vw - 60px) / 3); /* Maintain square aspect ratio */
        font-size: 1.8em; /* Reduce font size for smaller cells */
        box-shadow: 0 0 0 2px var(--border);
        /* Try these alternatives for height:
           - height: calc((90vw - 80px) / 3); (Smaller cells by increasing subtracted margin)
           - width: 90px; height: 90px; (Fixed size, requires adjusting #board grid-template-columns) */
    }

    .cell.x {
        /* Purpose: Adjust 'X' border */
        box-shadow: 0 0 0 2px var(--player-x);
    }

    .cell.o {
        /* Purpose: Adjust 'O' border */
        box-shadow: 0 0 0 2px var(--player-o);
    }

    .timer {
        /* Purpose: Reduce timer size */
        font-size: 10px;
        bottom: 3px;
        right: 3px;
    }

    #version {
        /* Purpose: Footer styling in mobile */
        font-size: 0.6em;
        margin-top: auto; /* Push footer to bottom of #game container */
        padding-top: 8px;
        padding-bottom: 8px; /* Add bottom padding for spacing */
        padding-left: 10px; /* Add padding to prevent touching edges */
        padding-right: 10px; /* Add padding to prevent touching edges */
        width: 100%; /* Ensure full width within #game */
    }

    #notification {
        /* Purpose: Adjust notification padding */
        padding: 15px;
        margin: 0 10px; /* Add margin to prevent touching edges */
    }

    #notification-message {
        /* Purpose: Reduce message size */
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    #notification-buttons {
        /* Purpose: Adjust button container for mobile */
        flex-direction: column;
        gap: 8px;
    }

    .notification-button {
        /* Purpose: Reduce button size */
        padding: 6px 10px;
        font-size: 0.8em;
    }
}