/* Show only in Theater Mode */


.theater-background {
 
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('theater.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    image-rendering: pixelated;
}


#screen-container.theater-mode .theater-background {
    display: block;
        width: 100%;

 background-size: 100% 100%; /* Stretch to full width and height */
    background-image: url('theater.png');
}

#screen-container.theater-mode .image-container {
    position: relative;
    height: 62%;
    width: auto;
    z-index: 10;
    transform: translateY(15vh); /* Adjust this value to move it down */
    background-color: transparent;
}   

/* Game Container (relative for proper stacking) */
#screen-container.theater-mode .game-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



#screen-container.theater-mode #game {
    display: block;
    height: 100%;
    width: auto;
      image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translateZ(0); /* Promotes to its own layer */
}

/* Scanline Overlay */
#screen-container.theater-mode #scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* Controls */
#screen-container.theater-mode #scale {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: rgba(0,0,0,0.7);
    padding: 8px 12px;
    border-radius: 8px;
}   

#screen-container.theater-mode .image-container,
#screen-container.theater-mode #theater-wrapper {
    position: relative;
    height: 50%;
    width: auto;
    z-index: 10;
    border: none; /* Remove this border */
}