:root {
    --bg-color: #1a1a2e;       /* Deep dark blue */
    --accent-main: #0f3460;    /* Lighter blue for UI elements */
    --neon-green: #00ff9d;     /* Ball & Highlights */
    --neon-pink: #ff0055;      /* Player 1 */
    --neon-blue: #00f2ff;      /* Player 2 */
    --text-color: #e94560;     /* Reddish text accent */
    --white: #ffffff;
}

/* Global Styles */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Match desktop layout needs */
    background-color: var(--bg-color);
    color: var(--white);
    font-family: 'Press Start 2P', cursive;
}

canvas {
    border: 4px solid var(--accent-main); /* Define the play area */
    box-shadow: 0 0 20px rgba(0, 242, 244, 0.2);
    background-color: #000;
    display: block;
    border-radius: 4px;
}

/* Desktop Layout Fixes */
.whole-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill body */
    width: 100vw;
    overflow: hidden;
    background-color: var(--bg-color); 
}

/* Scoreboard - Desktop default */
.scoreboard {
    text-align: center;
    font-size: 1.5rem;
    padding: 10px 0; 
    z-index: 10; 
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 0px var(--accent-main);
    flex-shrink: 0; 
}

/* Game Container - Desktop default */
.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* Take remaining height */
    width: 100%;
    position: relative;
    overflow: hidden;
}

#score-left, #score-right {
    border: 2px solid var(--neon-blue);
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-blue);
    display: inline-block;
    width: 40px;
}


#separator {
    color: var(--white);
    animation: blink 1s infinite;
    font-weight: 900;
    /* font-size: 3rem; */
}

@keyframes blink {
    50% { opacity: 0; }
}

.player-nametag {
    color: var(--neon-blue);
}

/* Mobile Controls */
#mobile-controls {
    display: none;
    z-index: 100; /* Above everything */
}

#pause-btn {
    display: none;
    position: fixed;
    bottom: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--neon-blue);
    background-color: var(--bg-color);
    box-shadow: 0 0 10px var(--neon-blue);
    color: var(--neon-green);
    font-size: 2rem;
    padding-bottom: 6px;
    cursor: pointer;
    transition: all 0.35s ease-in-out;
}

#pause-btn.active {
    transform: translate(-50%, -50%) rotate(360deg) scale(45.95);
}

.player1-container, .player2-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

/* Button */
.center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    width: 50px;
    height: 30px;
    position: relative;
    background: none;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    touch-action: none;
}

.top {
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    font-family: poppins;
    font-size: 16px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7mm;
    outline: 2px solid #000;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    top: 10px;
    left: 0;
    border-radius: 7mm;
    outline: 2px solid #000;
    z-index: 1;
}

.bottom::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 9px;
    background: rgb(36, 38, 34);
    bottom: 0;
    left: 15%;
}

.bottom::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 9px;
    background: rgb(36, 38, 34);
    bottom: 0;
    left: 85%;
}

button:active .top, button.pressed .top {
    transform: translateY(6px);
    background: var(--accent-main);
    color: var(--neon-green);
}

button::before {
    position: absolute;
    content: "";
    width: calc(100% + 2px);
    height: 100%;
    background: rgb(140, 140, 140);
    top: 14px;
    left: -1px;
    border-radius: 7mm;
    outline: 2px solid rgb(36, 38, 34);
    z-index: 1;
}

.top::before {
    position: absolute;
    content: "";
    width: 15px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    transform: skewX(30deg);
    left: -20px;
    transition: 0.25s;
}

button:active .top::before, button.pressed .top::before {
    left: calc(100% + 20px);
}

/* media queries for Mobile Responsive Landscape Design*/
@media (max-width: 925px) {
    .whole-container {
        display: block; /* revert to block for absolute positioning context */
    }

    .player-nametag {
        display: none;
    }

    .player1-container, .player2-container {
        display: none;
    }

    #mobile-controls {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Let clicks pass through broadly, re-enable on specific elements if needed */
    }
    
    #mobile-controls > * {
        pointer-events: auto; /* Re-enable pointer events for controls */
    }

    .touch-zone {
        position: fixed;
        width: 50vw;
        height: 50vh;
        z-index: 20;
        opacity: 0; /* Fully transparent */
        touch-action: none; /* Prevent browser gestures */
    }
    .top-left {
        top: 0; 
        left: 0;
    }
    .bottom-left {
        bottom: 0; 
        left: 0;
    }
    .top-right {
        top: 0; 
        right: 0;
    }
    .bottom-right {
        bottom: 0; 
        right: 0;
    }

    #play-btn {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        z-index: 100;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--accent-main);
        color: var(--neon-green);
        font-size: 2rem;
        padding-bottom: 6px;
        cursor: pointer;
    }

    #play-btn:active {
        transform: translate(-50%, -50%) rotate(90deg) scale(0.95);
    }

    .game-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        width: 100vh; /* Swap width/height for rotation */
        height: 100vw;
        display: flex;
        justify-content: center; 
        align-items: center;
        z-index: 1;
        overflow: hidden;
    }

    .scoreboard {
        position: fixed;
        /* "Right" side in portrait is "Bottom" visually if not rotated? No.
           If game is rotated 90deg, "Right" side of phone is "Top" of the game area?
           User said: "middle right corner (saying in perspective of potrait orientation of the mobile since the scoreboard is rotated by 80 degree)"
           Rotated 90deg:
           Phone Top -> Left
           Phone Bottom -> Right
           Phone Left -> Bottom
           Phone Right -> Top
           
           Wait. The user says "middle right corner (portrait orientation)".
           If I hold phone in portrait:
           [   ]
           [ S ]  <- Scoreboard on right edge
           [   ]
           
           If entire game is rotated 90deg (landscape simulation):
           The "Right" edge of portrait phone corresponds to the "Bottom" edge of the rotated container?
           Let's visualize.
           0deg (Portrait):
           Top: Camera
           Right: Power button
           Bottom: Charging port
           Left: Volume buttons
           
           Rotate 90deg (Landscape, Camera on Left):
           Top: Right side of phone (Power button)
           Right: Bottom of phone (Charging port)
           Bottom: Left side of phone (Volume buttons)
           Left: Top of phone (Camera)
           
           If we rotate content 90deg:
           `transform: rotate(90deg)`
           The content's "Top" points to the phone's "Right".
           The content's "Right" points to the phone's "Bottom".
           
           User wants scoreboard on "middle right corner (portrait orientation)".
           If portrait is held:
           Right side is the vertical edge on the right.
           
           So in rotated coordinate system (since everything is rotated 90deg):
           We want the scoreboard to appear at the "Top" of the landscape screen?
           If phone is portrait, "Right" is "Top" in landscape (if camera left).
           
           Let's assume standard rotation.
           Let's stick to placing it `right: 0` in the rotated container?
           No, the scoreboard is likely `fixed` relative to viewport.
           
           If I want it on the physical Right edge of the device:
           `right: 0; top: 50%; transform: translateY(-50%) rotate(90deg);`
           Wait, if I rotate it 90deg, text runs vertically? Yes, likely desired if the game is landscape.
           
           If the game is landscape (rotated), the text should be horizontal relative to the GAME.
           So if the game is rotated 90deg, the text should also be rotated 90deg to match the game.
           
           If the scoreboard is `fixed` at `right: 0`, and rotated 90deg:
           It will be vertical text on the right edge.
           Is that what is wanted? "middle right corner ... since the scoreboard is rotated"
           
           Let's try to center it on the Right edge.
        */
        top: 50%;
        right: -30px; /* Offset to keep it near edge but visible */
        left: auto; /* Unset left */
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        width: auto;
        pointer-events: none;
        flex-direction: row;
        gap: 15px;
    }

    /* Override scoreboard items for mobile to fit better */
    #score-left, #score-right {
        padding: 5px 10px;
        width: 30px;
        font-size: 1rem;
    }

    #pause-btn {
        display: none;
        position: fixed;
        top: 50%;
        left: 5%;
        transform: translate(-50%, -50%) rotate(90deg);
        z-index: 100;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--accent-main);
        color: var(--neon-green);
        font-size: 2rem;
        padding-bottom: 6px;
        cursor: pointer;
    }

    #pause-btn:active {
        transform: translate(-50%, -50%) rotate(90deg) scale(0.95);
    }

        /* On mobile, canvas fills the rotated container */
        width: 100% !important; 
        height: 100% !important;
        margin: auto;
        border: 4px solid var(--neon-blue); /* Distinct border */
        background-color: #000; /* Ensure black bg */
        box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    }

    .player1-container{
        position: fixed;
        bottom: 20px; /* Reduced from 40 */
        left: 20px;
        flex-direction: column; /* Vertical stack */
        gap: 15px;
        z-index: 30;
        pointer-events: auto;
    }

    .player2-container {
        position: fixed;
        bottom: 20px; /* Reduced from 40 */
        right: 20px;
        flex-direction: column; /* Vertical stack */
        gap: 15px;
        z-index: 30;
        pointer-events: auto;
    }

    button {
        opacity: 0.7;
    }
    button.pressed {
        opacity: 1;
    }
    button:before {
        content: none;
    }

}