body {
    background-color: #222;
    color: #eee;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    overflow: hidden;
}

h1{
    font-size: 1.2rem;
}

canvas {
    background-color: #5a8c49; /* สีพื้นหญ้า */
    border: 4px solid #3a5c2f;
    display: block;
    margin: 20px auto;

    /* 1. ทำให้มันยืด-หด ตามความกว้าง */
    width: 100%; 
    max-width: 1000px; /* ไม่ให้มันใหญ่เกินขนาดจริงบน Desktop */
    height: auto; /* รักษาสัดส่วน (Aspect Ratio) */
    
    /* 2. สำคัญมาก! ป้องกันภาพเบลอตอนย่อ */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#game-over-text {
    color: red;
    font-size: 2em;
    font-weight: bold;
}

.hidden {
    display: none;
}

#touch-controls {
    /* ซ่อนปุ่มเหล่านี้บน Desktop */
    display: none; 
}

/* * ใช้ Media Query เพื่อสั่งให้แสดงปุ่ม
 * ต่อเมื่อหน้าจอมีขนาดเล็ก (เหมือนมือถือ) 
 * และเป็น "touch screen"
 */
@media (max-width: 1024px) and (pointer: coarse) {
    #touch-controls {
        display: block; /* แสดงปุ่ม */
        user-select: none; /* ป้องกันการเลือกข้อความบนปุ่ม */
    }

    .touch-btn {
        position: absolute; /* ตรึงไว้กับจอ */
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        font-size: 1.5em;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%; /* ทำให้เป็นวงกลม */
        width: 60px;
        height: 60px;
        z-index: 100;
    }

    /* จัดวาง D-Pad ด้านซ้ายล่าง */
    #dpad {
        position: fixed;
        bottom: 30px;
        left: 30px;
        width: 180px; /* ขนาดพื้นที่ D-Pad */
        height: 180px;
    }
    #btn-up    { bottom: 120px; left: 60px; }
    #btn-left  { bottom: 60px;  left: 0px; }
    #btn-right { bottom: 60px;  left: 120px; }
    #btn-down  { bottom: 0px;   left: 60px; }

    /* จัดวางปุ่ม Action ด้านขวาล่าง */
    #action-pad {
        position: fixed;
        bottom: 150px;
        right: 100px;
    }
    #btn-a {
        width: 80px;
        height: 80px;
    }
}

/* * ทำให้ปุ่ม Game Over (ที่เป็นข้อความ) 
 * ดูน่ากดขึ้นบนมือถือ
 */
@media (max-width: 1024px) and (pointer: coarse) {
    #game-over-text {
        cursor: pointer; /* แสดงเป็นรูปมือ */
        padding: 20px;
        background-color: rgba(150, 0, 0, 0.8); /* สีแดงเข้ม */
        border: 3px solid white;
        border-radius: 10px;
        
        /* ทำให้เด้งขึ้นมาอยู่กลางจอ */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%; /* ความกว้าง 80% ของจอ */
        z-index: 300; /* ให้มันอยู่ทับทุกอย่าง */
    }
}