/* File: css/style_main.css */

:root {
    --bg-color: #1a1a1a;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; font-family: 'Fredoka One', sans-serif;
    background-color: var(--bg-color);
}

/* ============================================= */
/* --- BINGKAI GAME DENGAN UKURAN DASAR --- */
/* ============================================= */
#game-frame {
    /* Ukuran dasar game kita */
    width: 800px;
    height: 450px;
    
    /* Posisikan titik jangkar (anchor) di tengah */
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Transformasi (skala dan posisi) akan diatur oleh JavaScript */
    transform-origin: center center;
    
    background: #000;
    overflow: hidden;
    
    /* Styling (opsional untuk mobile, lebih terlihat di desktop) */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 3px solid #333;
}


/* ============================================= */
/* --- OVERLAY ROTASI (Tidak berubah) --- */
/* ============================================= */
#rotate-device-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f0f0f0; z-index: 2000; display: none;
    justify-content: center; align-items: center; text-align: center;
}
#rotate-device-overlay .rotate-message { color: #333; font-size: 1.2rem; }
#rotate-device-overlay .rotate-message img { width: 80px; margin: 0 auto 15px; }

@media (orientation: portrait) {
    #rotate-device-overlay { display: flex; }
    #game-frame { display: none; }
}