html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; /* Letterbox background */
    touch-action: manipulation; /* Prevent double tap zoom */
    user-select: none; /* Disable text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For IE/Edge */
    -moz-user-select: none; /* For Firefox */
}

/* Fallback for 100dvh for older browsers */
body {
    min-height: 100vh;
    min-height: 100dvh; /* Modern mobile browser address bar handling */
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: calc((100dvh / 16) * 9); /* Maximize width based on 9:16 aspect ratio */
    max-height: calc((100dvw / 9) * 16); /* Maximize height based on 9:16 aspect ratio */
    overflow: hidden; /* Ensure content stays within bounds */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Maintain 9:16 aspect ratio within the container */
    /* If container width is less than height, width becomes 100% and height scales */
    /* If container height is less than width, height becomes 100% and width scales */
    object-fit: contain; /* Ensures the canvas content is scaled to fit, maintaining aspect ratio */
}

#ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to canvas */
    color: white;
    font-family: 'Arial', sans-serif;
    padding: 10px;
    box-sizing: border-box;
}

#score-display {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 4vmin; /* Responsive font size */
}

#out-display {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 4vmin; /* Responsive font size */
}