/* ================================================================
   ✅ Mobile / iPad / Tablet — ป้องกัน zoom + เต็มจออัตโนมัติ
   ================================================================ */

/* ป้องกัน double-tap zoom ทุก element */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

html {
    /* ป้องกัน iOS Safari address bar bounce */
    overflow: hidden;
    overscroll-behavior: none;
    /* ใช้ dvh แทน vh เพื่อรองรับ iOS Safari dynamic viewport */
    height: 100%;
    height: -webkit-fill-available;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #0f0f0f;
    font-family: 'Prompt', sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    /* iOS Safari: เต็มจอรวม notch */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* lock height */
    height: 100%;
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    position: fixed;
    width: 100%;
}

#game-container {
    /* ขนาดคงที่ตรงกับ Phaser world — viewport-scaler.ts จัดการ scale/position ผ่าน JS */
    width: 1180px;
    height: 768px;
    overflow: hidden;
    /* ป้องกัน touch gesture ที่ทำให้ canvas scroll/zoom */
    touch-action: none;
    -ms-touch-action: none;
    position: fixed;
    top: 0;
    left: 0;
}

/* ป้องกัน Phaser canvas ถูก pinch-zoom หรือ scroll */
#game-container canvas {
    touch-action: none;
    -ms-touch-action: none;
    display: block;
    /* ป้องกัน iOS tap highlight สีฟ้า */
    -webkit-tap-highlight-color: transparent;
    /* ป้องกัน long-press context menu บน iOS */
    -webkit-touch-callout: none;
    /* ป้องกัน text selection */
    user-select: none;
    -webkit-user-select: none;
}

#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f8f9fa;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#login-overlay.show {
    display: flex;
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 380px;
    text-align: center;
    color: #333;
}


.login-card h2 { margin-top: 0; color: #212529; font-weight: 600; }
.subtitle { color: #6c757d; font-size: 14px; margin-bottom: 24px; }


.social-btn-group { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.social-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid #dee2e6;
    background: white; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }


.divider { display: flex; align-items: center; color: #adb5bd; font-size: 12px; margin: 24px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #dee2e6; }
.divider::before { margin-right: 10px; }
.divider::after { margin-left: 10px; }


input {
    width: 100%; padding: 12px 16px; margin-bottom: 12px;
    border: 1px solid #ced4da; border-radius: 8px; box-sizing: border-box;
    font-family: 'Prompt', sans-serif; font-size: 14px;
    color: #495057;
    transition: border-color 0.2s;
}
input:focus { outline: none; border-color: #ff5722; }


button#login-btn {
    width: 100%; padding: 12px; margin-top: 8px;
    background-color: #ff5722;
    color: white; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: background-color 0.2s;
}
button#login-btn:hover { background-color: #e64a19; }


#error-msg { color: #dc3545; font-size: 14px; margin-top: 12px; display: none; }