body, html {
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
    overflow: hidden;
    background-color: #050a10;
}

#game-container { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
}

/* FIX: Added explicit 100% dimensions so the canvas stretches 
   perfectly before the JavaScript engine calculates internal pixel ratios */
#gameCanvas { 
    display: block; 
    width: 100%;
    height: 100%;
}

/* Clean keeping of your UI Layer classes just in case you decide 
   to overlay custom HTML UI windows over the canvas later! */
#ui-layer {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    pointer-events: none; /* Allows mouse clicks to pass through to the game */
}

#begin-screen {
    width: 100%; 
    height: 100%;
    background-color: black;
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: opacity 1.5s ease;
    pointer-events: all;
    z-index: 10;
}

#begin-btn {
    padding: 12px 30px;
    background-color: #808080;
    color: black;
    border: 2px solid white;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold; 
    font-size: 24px;
    cursor: pointer;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

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