@media (max-width: 1400px) and (orientation: landscape) {
    h1 {
        display: none;
    }

    #fullscreenBtn {
        display: none;
    }

    #mobileControls.show {
        display: flex; 
    }

    body {
        display: flex;
        justify-content: center;  
        align-items: center; 
        background-image: none;
        background-color: black;
    }

    canvas {
        width: 100vw;
        height: 100vh;
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }

    #mobileControls button {
        width: 40px;
        height: 40px;
        font-size: 15px; 
    }   

    .button-line {
        position: absolute;
        top: 10px; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        padding: 6px;
        cursor: pointer;
        background: rgba(128, 128, 128, 0.25);
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    #playButton {
        position: absolute;
        top: calc(18% - 25px);           
        left: 50%;
        transform: translateX(-50%);
        font-size: 4vh;       
        padding: 1.5vh 3vw;   
    }

    #overlayImpressum {
        display: flex;            
        align-items: center;      
        justify-content: center; 
        position: absolute;       
        top: inherit;                
        left: 50%;
        transform: translateX(-50%);
        letter-spacing: 2px;      
        font-size: 16px;          
        padding: 5px 20px;
        z-index: 1001;
        bottom: 10px;
        height: 35px;
    }

    .impressum-content {
        height: auto;
        max-height: 90vh;
        min-height: 500px; 
    }

    .impressum-content h2 {
        margin-bottom: 0px;
    }

    #gameOverOverlay, #youWinOverlay {
        position: absolute;        
        top: 50%;        
        left: 50%;             
        transform: translate(-50%, -50%);  
        width: 100vw;
        height: 100vh;                
        z-index: 1001;    
    }

    #gameOverOverlay img, #youWinOverlay img {        
        object-fit: cover;
        width: 100%;
        height: 100%;
        object-fit: cover;  
    }

   .button-gameover {
        display: flex;  
        align-items: center;        
        justify-content: space-around;    
        top: 65%;
        left: 50%;
        gap: 15px;
        position: absolute;
        transform: translate(-50%);
    }

    .overlay {
        position: absolute;        
        top: 50%;        
        left: 50%;             
        transform: translate(-50%, -50%);  
        width: 100vw;
        height: 100vh;
        z-index: 1002;              
    }

    .overlay-content {
        font-size: clamp(12px, 3vw, 12px);
        gap: 5px;
    }

    .overlay-content button {
        margin-top: 0px;
    }

    .impressum-content {
        justify-content: flex-start;
    }
}

@media (orientation: portrait) {
    #rotateMessage {
        display: flex;
    }
    canvas {
        display: none;
    }

    .button-line {
        display: none;
    }
}

@media only screen and (max-width: 720px) {
    canvas {
        width: 100%;
    }
}

@media (max-height: 690px) {
    h1 {
        display: none;
    }

    canvas {
        width: 100vw;
        height: 100vh;
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }

    .button-line {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        padding: 6px;
        cursor: pointer;
        background: rgba(128, 128, 128, 0.25);
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    #overlayImpressum {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: inherit;
        left: 50%;
        transform: translateX(-50%);
        letter-spacing: 2px;
        font-size: 16px;
        padding: 5px 20px;
        z-index: 1001;
        bottom: 10px;
        height: 35px;
    }

    #gameOverOverlay img, #youWinOverlay img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #gameOverOverlay, #youWinOverlay {
        position: absolute;        
        top: 50%;        
        left: 50%;             
        transform: translate(-50%, -50%);  
        width: 100vw;
        height: 100vh;                
        z-index: 1001;    
    }

    .overlay{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 100vh;
        z-index: 1002;
        max-width: 1300px
    }

    .button-gameover {
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn-i {
        bottom: 20px;
        padding: 25px 2px;
        z-index: 1003;
    }

    .btn-impressum {
        margin-bottom: 60px;
    }
}

@media (max-height: 450px) and (orientation: landscape) {
    #playButton {
        top: 19%;
    }
}

@media (max-height: 350px) { 
    .btn-i {
        bottom: 10px;
        padding: 10px 2px;
    }

    .overlay-content button {
        margin-top: -6px;
    }
}

@keyframes rotatePhone {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@media (orientation: portrait) {
    .phone {
        animation: rotatePhone 2s infinite ease-in-out;
    }
}