body { 
    font-family: Arial; 
    background: #2c3e50; 
    color: white; 
    max-height:100vh;
}
.container { 
    height:90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content-wrapper {    
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 80vh
}
#info {
    display: none;
    position: absolute;
    border: 2px solid white;
    padding: 2vh 10vw;
    background-color: slategray;
    top: 50%;
}
button { padding: 0.5rem 1rem; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }
#gameStream { border: 3px solid #3498db; margin: auto; background: black; width: 36rem; height:36rem;}
.game-controls { margin:auto; align-self: center; flex-direction: row; justify-content: center; gap:1rem; margin-bottom: 2vh;}
.control-btn { background: #27ae60; }
.control-btn.pause { background: #8e8882; }
.control-btn.stop { background: #e74c3c; }
.game-controls{display:flex;}
.game-controls-mobile{display:none; margin-bottom: 2vh;}

.arrow-controls {
    display: none;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr);   
    gap: 10px;
}

.arrow-btn {
    font-size: 2rem;
    background: transparent;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.arrow-btn:active {
    background: #1c6ea4;
    transform: scale(0.95);
}

.arrow-btn:nth-child(1) {
    grid-column: 2; 
    grid-row: 1;   
}

.arrow-btn:nth-child(2) {
    grid-column: 1; 
    grid-row: 2;   
}

.arrow-btn:nth-child(3) { 
    grid-column: 2; 
    grid-row: 3;    
}

.arrow-btn:nth-child(4) { 
    grid-column: 3; 
    grid-row: 2;  
}

@media (max-width: 1023px) {
    .arrow-controls {
        display: grid;
    }
    #gameStream {
        width:92vw;
        height:auto;
    }
}

@media (max-width: 570px) {
    .game-controls {display:none;}
    .game-controls-mobile {display:block;}
}

.header {
    display:flex;
    flex-direction: row;
    justify-content: center;
    gap:3rem;
    padding: 10px; 
    background: #34495e; 
    border-radius: 5px;
    margin-bottom:1rem;
}
#gameStatus {
    color: skyblue;
}