:root {
    --bg-dark: #0a0a0e;
    --bg-panel: rgba(255, 255, 255, 0.03);
    --primary: #00f3ff;
    --primary-glow: rgba(0, 243, 255, 0.6);
    --secondary: #bc13fe;
    --secondary-glow: rgba(188, 19, 254, 0.6);
    --text-main: #ffffff;
    --text-muted: #8b9bb4;
    --font-main: 'Outfit', sans-serif;
    --font-arcade: 'Press Start 2P', cursive;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent scrolling while playing */
}

.background-glow {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(188, 19, 254, 0.05) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 10;
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.back-btn {
    text-decoration: none;
    color: var(--text-muted);
    transition: 0.3s;
}

.back-btn:hover {
    color: #fff;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.game-container {
    position: relative;
    width: 800px;
    max-width: 100%;
}

.score-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 40px;
    font-family: var(--font-arcade);
}

.score {
    text-align: center;
}

.score .label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-family: var(--font-main);
    letter-spacing: 2px;
}

.score span:last-child {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.player span:last-child {
    color: var(--primary);
    text-shadow: 0 0 15px var(--primary-glow);
}

.ai span:last-child {
    color: var(--secondary);
    text-shadow: 0 0 15px var(--secondary-glow);
}

.divider {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font-arcade);
}

canvas {
    background: rgba(10, 10, 14, 0.8);
    border: 2px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
    display: block;
    width: 100%;
    /* The board is drawn on a fixed 800x500 surface. It may be displayed smaller than that, but
       only in proportion: aspect-ratio pins the displayed shape to 8:5 so the paddles and the ball
       are never stretched, and height: auto stops the element's 500 height attribute being used as
       a CSS height once the width has been reduced. script.js converts pointer offsets back into
       board units, so the paddle still follows the cursor at any displayed size. */
    aspect-ratio: 8 / 5;
    height: auto;
}

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 14, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: opacity 0.3s;
    padding: 1rem;
    text-align: center;
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* The overlay swaps between a start screen and a result screen by toggling .hidden on its
   individual pieces, but only .overlay.hidden was ever written. So the result block sat visible
   underneath the start screen on first load, and the difficulty buttons stayed on screen after a
   game had finished. These four selectors are what script.js has always assumed existed. */
.overlay > h1.hidden,
.overlay > p.hidden,
.difficulty-options.hidden,
#gameOverMsg.hidden {
    display: none;
}

/* Difficulty buttons. These had no styling at all: three browser-default grey buttons about 21px
   tall on a neon board. Same shape and arcade type as the primary button below, outlined rather
   than filled so the three of them do not shout over the heading, and 44px tall so they can be
   tapped. */
.difficulty-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.btn-difficulty {
    background: rgba(0, 243, 255, 0.08);
    color: var(--primary);
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-radius: 4px;
    padding: 0 20px;
    min-height: 44px;
    font-family: var(--font-arcade);
    font-size: 0.7rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-difficulty:hover,
.btn-difficulty:focus-visible {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 15px var(--primary-glow);
}

#gameOverMsg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* The winner line is set by script.js, which also sets its colour inline. Only its type is set
   here, to match the heading it replaces. */
#winnerText {
    font-family: var(--font-arcade);
    font-size: 1.5rem;
    line-height: 1.4;
}

.overlay h1 {
    font-family: var(--font-arcade);
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary-glow);
}

.overlay p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 15px 40px;
    font-family: var(--font-arcade);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    /* Arcade feel */
    transition: 0.3s;
    box-shadow: 0 0 15px var(--primary-glow);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--primary-glow);
    background: #fff;
}

/* ==========================================================================
   Narrow viewports
   ==========================================================================
   The board scales itself through width: 100% and aspect-ratio, so what is left is the chrome
   around it: a header, a score board padded for a 800px board, and overlay type set in a pixel
   font at 2rem. At 380px the board is about 340x212, and everything inside the overlay has to fit
   in that.
   ========================================================================== */
@media (max-width: 700px) {
    header {
        padding: 14px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .logo {
        font-size: 1.05rem;
    }

    .back-btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    main {
        padding: 12px;
    }

    /* 40px of side padding was set for an 800px board. */
    .score-board {
        padding: 0 8px;
        margin-bottom: 14px;
    }

    .score .label {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    .score span:last-child {
        font-size: 1.5rem;
    }

    .divider {
        font-size: 0.65rem;
    }

    /* A pixel font at 2rem is roughly 32px per character, so the title alone was wider than the
       whole board. The margins shrink with it, because the overlay only has about 212px of height
       to hold a heading, a line of text and a row of buttons. */
    .overlay h1 {
        font-size: 1.05rem;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .overlay p {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }

    .difficulty-options {
        gap: 8px;
    }

    /* Tight enough that all three fit one row at 380px, still 44px tall. */
    .btn-difficulty {
        padding: 0 12px;
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    #gameOverMsg {
        gap: 14px;
    }

    #winnerText {
        font-size: 1.05rem;
    }

    .btn-primary {
        padding: 0 20px;
        min-height: 44px;
        font-size: 0.7rem;
    }
}

/* body has overflow: hidden so the page cannot scroll under the mouse mid-rally. That is right on
   a desktop and wrong anywhere the board plus its chrome is taller than the window, where it hid
   the bottom of the board with no way to reach it. Sideways scrolling stays off. */
@media (max-width: 700px), (max-height: 560px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Nothing here animates on a loop, but the hover scale and the overlay fade are still movement. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn-primary:hover {
        transform: none;
    }
}