/* 1. Menghilangkan margin bawaan browser dan membuat background di luar game menjadi gelap */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Warna gelap estetik untuk area kosong di desktop */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Menghilangkan scrollbar miring yang mengganggu */
}

/* 2. Pengaturan Canvas agar Responsif dan Besar */
#canvas {
    background-color: #30c0df;
    border: 2px solid black;
    display: block;
    
    /* MEMBUAT GAME BESAR DI DESKTOP: Mengambil 100% tinggi layar monitor */
    height: 100vh; 
    
    /* MENJAGA RASIO: Mengunci rasio 2:3 sesuai dengan width="276" dan height="414" di HTML */
    aspect-ratio: 276 / 414; 
    
    /* PROTEKSI MOBILE: Jika dibuka di HP yang sangat ramping, lebar game tidak akan luber */
    max-width: 100vw;
    max-height: 100vh;
    
    /* Memastikan posisi tetap tepat di tengah */
    margin: auto; 
    
    /* ANTI BLUR: Menjaga gambar pixel art tetap tajam dan bersih saat ditarik menjadi besar */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}