/* ========================================
   MOBILE RESPONSIVE CSS
   สำหรับเกม Insider ให้ใช้งานบนมือถือได้ดี
   ======================================== */

/* ===== BASE MOBILE STYLES ===== */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* ===== HEADER - FIX LOGO OVERLAP ===== */
@media (max-width: 768px) {
    header {
        height: auto !important;
        min-height: 120px;
        padding: 15px 10px !important;
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background-image: url("/static/image/frise.jpg") !important;
        background-repeat: repeat-x !important;
        background-position: bottom center !important;
        background-color: #DE3C31 !important;
        padding-bottom: 40px !important;
    }

    header img {
        max-width: 70% !important;
        width: auto !important;
        height: auto !important;
        max-height: 60px !important;
        display: block !important;
        position: relative;
        z-index: 2;
        margin: 0 auto;
    }
}

/* ===== CONTAINER ===== */
@media (max-width: 768px) {
    .container-fluid {
        padding: 10px !important;
        min-height: calc(100vh - 70px);
        margin-bottom: 70px;
        overflow-x: hidden;
    }
    
    .container {
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    .row {
        margin: 0 !important;
    }
    
    .col-lg-12 {
        padding: 0 !important;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
    footer.footer {
        height: auto !important;
        min-height: 50px !important;
        max-height: 60px !important;
        padding: 8px 10px !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, #302b63 0%, #24243e 100%) !important;
        border-top: 1px solid #4a4580 !important;
        box-sizing: border-box !important;
    }

    footer .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ป้องกันช่องว่างขาวเหนือ footer */
    body {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
        min-height: 100vh !important;
    }

    html.theme-dark body {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
    }

    html.theme-red body {
        background: linear-gradient(135deg, #4a0000 0%, #8b0000 50%, #4a0000 100%) !important;
    }

    html.theme-white body {
        background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 50%, #f5f5f5 100%) !important;
    }

    html.theme-dark footer.footer {
        background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%) !important;
        border-top-color: #444 !important;
    }

    html.theme-red footer.footer {
        background: linear-gradient(135deg, #8b0000 0%, #4a0000 100%) !important;
        border-top-color: #ff4444 !important;
    }

    html.theme-white footer.footer {
        background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%) !important;
        border-top-color: #ccc !important;
    }
    
    .container-fluid {
        min-height: calc(100vh - 60px) !important;
        padding-bottom: 70px !important;
        background: transparent !important;
    }
}

/* ===== BUTTONS ===== */
@media (max-width: 768px) {
    .content button.cta, 
    .content a.cta {
        width: 90% !important;
        max-width: 280px;
        height: auto !important;
        min-height: 45px;
        padding: 12px 15px !important;
        font-size: 16px !important;
        touch-action: manipulation;
        display: block;
        margin: 10px auto !important;
    }

    .btn {
        touch-action: manipulation;
        min-height: 44px;
        padding: 10px 15px;
    }
}

/* ===== LOBBY PAGE ===== */
@media (max-width: 768px) {
    .lobby-container {
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 10px !important;
        padding-bottom: 80px !important; /* เพิ่มที่ว่างสำหรับ footer */
    }
    
    .player-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 15px !important;
    }
    
    .player-info {
        flex-direction: column !important;
        text-align: center;
        gap: 10px !important;
    }
    
    .player-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5em !important;
    }
    
    .player-details h2 {
        font-size: 1.2em !important;
    }
    
    .player-details p {
        font-size: 0.8em !important;
    }
    
    .player-details p code {
        font-size: 0.7em !important;
        display: none; /* ซ่อน playerId บนมือถือ */
    }
    
    .quick-stats {
        gap: 10px !important;
        flex-wrap: wrap;
        justify-content: center !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
    }
    
    .quick-stat-value {
        font-size: 1em !important;
    }
    
    .quick-stat-label {
        font-size: 0.7em !important;
    }
    
    /* Menu Grid - สำคัญมาก */
    .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .menu-item {
        padding: 15px 10px !important;
        border-radius: 12px !important;
        border-width: 2px !important;
        min-height: auto !important;
    }
    
    /* ปุ่ม "เล่นเกม" กินพื้นที่ 2 คอลัมน์ */
    .menu-item.play {
        grid-column: span 2 !important;
        padding: 18px 15px !important;
    }
    
    /* ปุ่มอื่นๆ ขนาดปกติ */
    .menu-item.profile,
    .menu-item.settings {
        grid-column: span 1 !important;
    }
    
    /* ปุ่ม "วิธีเล่น" กินพื้นที่ 2 คอลัมน์ */
    .menu-item.howto {
        grid-column: span 2 !important;
    }
    
    .menu-icon {
        font-size: 1.8em !important;
        margin-bottom: 8px !important;
    }
    
    .menu-item.play .menu-icon {
        font-size: 2.2em !important;
    }
    
    .menu-item.howto .menu-icon {
        font-size: 2em !important;
    }
    
    .menu-title {
        font-size: 0.95em !important;
        margin-bottom: 4px !important;
    }
    
    .menu-item.play .menu-title {
        font-size: 1.2em !important;
    }
    
    .menu-item.howto .menu-title {
        font-size: 1em !important;
    }
    
    .menu-desc {
        font-size: 0.7em !important;
        line-height: 1.3 !important;
    }
    
    /* Leaderboard */
    .leaderboard-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .leaderboard-header h3 {
        font-size: 1em !important;
    }
    
    .leaderboard-item {
        padding: 8px 10px !important;
        gap: 10px !important;
    }
    
    .leaderboard-rank {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8em !important;
    }
    
    .leaderboard-avatar {
        width: 35px !important;
        height: 35px !important;
    }
    
    .leaderboard-avatar-inner {
        font-size: 1.2em !important;
    }
    
    .leaderboard-name {
        font-size: 0.95em !important;
    }
    
    .leaderboard-stats-mini {
        font-size: 0.75em !important;
    }
    
    .leaderboard-wins {
        font-size: 0.9em !important;
    }
    
    /* Bottom links */
    .bottom-links {
        gap: 8px !important;
        margin-bottom: 70px !important; /* ที่ว่างสำหรับ footer */
    }
    
    .bottom-link {
        padding: 10px 15px !important;
        font-size: 0.85em !important;
    }
}

/* ===== SETTINGS PAGE ===== */
@media (max-width: 768px) {
    .settings-container {
        padding: 10px !important;
        margin: 10px auto !important;
    }
    
    .settings-section {
        padding: 15px !important;
    }
    
    .setting-item {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .setting-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .setting-info h3 {
        font-size: 0.95em !important;
        white-space: normal !important;
    }
    
    .setting-info p {
        font-size: 0.75em !important;
    }
    
    .toggle-switch {
        flex-shrink: 0 !important;
    }
    
    .volume-control {
        width: 100% !important;
        justify-content: space-between;
        margin-top: 5px !important;
    }
    
    .volume-slider {
        flex: 1 !important;
        width: auto !important;
    }
    
    .setting-select {
        flex-shrink: 0 !important;
        min-width: 120px !important;
    }
}

/* ===== PROFILE PAGE ===== */
@media (max-width: 768px) {
    .profile-container {
        padding: 10px !important;
        margin: 10px auto !important;
    }
    
    .profile-container h1 {
        font-size: 1.8em !important;
    }
    
    .profile-section {
        padding: 15px !important;
    }
    
    .profile-section h2 {
        font-size: 1.2em !important;
    }
    
    .form-group > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    #playerNameInput {
        width: 100% !important;
    }
    
    #updateNameBtn {
        width: 100% !important;
    }
    
    .color-btn {
        width: 45px !important;
        height: 45px !important;
    }
}

/* ===== ROOM LIST PAGE ===== */
@media (max-width: 768px) {
    .room-list-container {
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 10px !important;
    }
    
    .room-list-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    
    .room-list-header h1 {
        font-size: 1.5em !important;
        text-align: center;
    }
    
    .room-panel {
        padding: 15px !important;
        border-radius: 12px !important;
        min-height: auto !important;
    }
    
    .room-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .room-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .room-actions .btn {
        width: 100% !important;
    }
    
    /* Search and buttons */
    .room-search-container {
        width: 100% !important;
    }
    
    .room-search-container input {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    .room-header-actions {
        width: 100% !important;
        display: flex;
        gap: 8px;
    }
    
    .room-header-actions .btn {
        flex: 1;
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* ===== ROOM LOBBY PAGE ===== */
@media (max-width: 768px) {
    .room-lobby-container {
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 10px !important;
    }
    
    .room-lobby-header {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .room-lobby-header h1 {
        font-size: 1.3em !important;
    }
    
    .room-info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .room-lobby-main {
        flex-direction: column !important;
    }
    
    .room-lobby-chat,
    .room-lobby-players {
        width: 100% !important;
        min-height: 280px !important;
        max-height: 400px !important;
    }
    
    .chat-container {
        height: 350px !important;
    }
    
    .room-lobby-chat .chat-messages {
        height: 220px !important;
        max-height: 220px !important;
        min-height: 220px !important;
    }
    
    /* roomLobby chat area - ใช้ class ที่ถูกต้อง */
    .room-chat-area {
        height: auto !important;
        max-height: none !important;
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .room-chat-messages {
        height: 180px !important;
        max-height: 180px !important;
        min-height: 180px !important;
        overflow-y: auto !important;
        flex-shrink: 0 !important;
    }
    
    .room-card-dark.room-chat-area {
        height: auto !important;
        max-height: none !important;
    }
    
    #lobbyChatMessages {
        height: 180px !important;
        max-height: 180px !important;
    }
    
    /* ปุ่มเริ่มเกม - ต้องแสดงเสมอ */
    .start-game-bar {
        flex-shrink: 0 !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid #333 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .start-game-bar span {
        flex: 1 1 100% !important;
        font-size: 0.85em !important;
        text-align: center !important;
    }
    
    #btnStartGameLobby {
        flex: 1 1 100% !important;
        padding: 12px !important;
        font-size: 1.1em !important;
    }
    
    .player-list-container {
        max-height: 200px !important;
    }
    
    .room-lobby-footer {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    .room-lobby-footer .btn {
        width: 100% !important;
    }
}

/* ===== BOARD PAGE (GAME) ===== */
@media (max-width: 768px) {
    /* Room Info Bar */
    .player + div[style*="text-align: center"] {
        padding: 0 5px !important;
    }
    
    .player + div[style*="text-align: center"] > div {
        padding: 8px 10px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        display: block !important;
        text-align: center !important;
        word-break: break-word;
    }
    
    /* Player name */
    .player {
        margin: 10px 0 !important;
        padding: 0 10px;
        font-size: 14px;
    }
    
    .player strong {
        font-size: 18px !important;
    }
    
    /* Role display */
    .role {
        padding: 10px !important;
        margin: 10px !important;
    }
    
    .role strong {
        font-size: 18px !important;
    }
    
    /* Word display */
    #word {
        margin: 10px !important;
    }
    
    #word span {
        padding: 10px !important;
        font-size: 16px !important;
    }
    
    #word strong {
        font-size: 20px !important;
    }
    
    /* Countdown */
    #countdown, #startGame {
        font-size: 36px !important;
    }
    
    #countdown a, #startGame a {
        font-size: 36px !important;
    }
    
    /* Choose word form */
    #chooseWord {
        padding: 0 10px;
    }
    
    #chooseWord form {
        padding: 0 !important;
    }
    
    #chooseWord input[type="text"] {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px;
        font-size: 16px !important;
    }
    
    #chooseWord button {
        width: 100%;
    }
    
    #chooseWord small {
        display: block;
        margin-top: 8px;
        font-size: 12px;
    }
    
    /* Voting */
    #vote1 h4, #vote2 h4 {
        font-size: 14px !important;
        padding: 0 10px;
    }
    
    #vote1 button {
        padding: 12px 20px !important;
        font-size: 20px !important;
        margin: 5px !important;
    }
    
    #vote1Result {
        padding: 10px !important;
        font-size: 18px !important;
    }
    
    #vote2 .choices {
        padding: 0 10px;
    }
    
    #vote2 .form__group {
        margin-bottom: 8px;
    }
    
    #vote2Result {
        padding: 0 10px;
    }
    
    #vote2Result #finalResult {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    #status p {
        font-size: 14px !important;
        padding: 0 10px;
    }
}

/* ===== SIDEBAR - Desktop (PC) ===== */
#toggleSidebarBtn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10001;
    background-color: #343a40;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7em;
    white-space: nowrap;
}

#toggleSidebarBtn i {
    margin-right: 4px;
}

/* ===== SIDEBAR - Mobile ===== */
@media (max-width: 768px) {
    #toggleSidebarBtn {
        top: auto !important;
        bottom: 75px !important;
        right: 10px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        border-radius: 20px;
        z-index: 10001 !important;
    }

    #toggleSidebarBtn i {
        margin-right: 4px !important;
    }

    #playerSidebar {
        width: 85% !important;
        max-width: 280px;
        right: -85% !important;
        padding: 15px !important;
    }

    #playerSidebar.open {
        right: 0 !important;
    }

    #playerSidebar h4 {
        font-size: 14px !important;
    }

    #playerSidebar h5 {
        font-size: 12px !important;
    }

    #onlinePlayerList li {
        font-size: 13px !important;
        padding: 5px 0;
    }

    #kickPlayerSection label {
        font-size: 11px !important;
    }
    
    #kickPlayerSelect {
        font-size: 14px !important;
    }
}

/* ===== CHAT ===== */
@media (max-width: 768px) {
    .chat-box {
        position: fixed !important;
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        right: 10px !important;
        left: 10px !important;
        bottom: 75px !important;
        height: 60vh !important;
        max-height: 400px !important;
        border-radius: 12px !important;
        z-index: 10003 !important;
    }

    .chat-header {
        padding: 10px 12px !important;
    }

    .chat-title {
        font-size: 14px !important;
    }

    .chat-messages {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .chat-message-bubble {
        font-size: 13px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        max-width: 85% !important;
    }

    .chat-message-info {
        font-size: 10px !important;
    }

    .chat-input-wrap {
        padding: 8px !important;
    }


/* ให้ SweetAlert แสดงอยู่เหนือกล่องแชทเสมอ (เช่น popup "วิธีใช้") */
.swal2-container {
    z-index: 11000 !important;
}
    #chatInput {
        font-size: 16px !important;
        padding: 10px !important;
        min-height: 42px;
    }

    .btn-chat-send {
        padding: 10px 14px !important;
        font-size: 14px !important;
        min-width: 55px;
    }

    .chat-toggle {
        bottom: 15px !important;
        right: 10px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        border-radius: 25px !important;
        z-index: 10004 !important;
    }

    /* GM Quick Reply */
    .gm-quick-reply {
        padding: 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .gm-quick-label {
        width: 100% !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
    }

    .gm-reply-btn {
        flex: 1 !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        min-width: 0 !important;
    }

    /* Reply Preview */
    .chat-reply-preview-bar {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ===== NOTIFICATIONS ===== */
@media (max-width: 768px) {
    .notification-center {
        width: 90% !important;
        max-width: 320px !important;
    }

    .notification {
        padding: 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* ===== MODALS & SWEETALERT ===== */
@media (max-width: 768px) {
    #returnToLobbyModal > div,
    #adminRevealModal > div {
        padding: 20px !important;
        margin: 20px !important;
        border-radius: 10px !important;
        max-width: 90% !important;
    }

    #returnToLobbyModal h3 {
        font-size: 18px !important;
    }

    #returnToLobbyModal p {
        font-size: 14px !important;
    }

    /* SweetAlert */
    .swal2-popup {
        width: 90% !important;
        max-width: 340px !important;
        padding: 15px !important;
        font-size: 14px !important;
    }

    .swal2-title {
        font-size: 16px !important;
    }

    .swal2-html-container {
        font-size: 13px !important;
    }

    .room-popup {
        max-width: 95% !important;
    }

    .room-popup .swal2-title {
        font-size: 1.1em !important;
        padding: 12px 15px !important;
    }

    .room-popup .swal2-html-container {
        padding: 12px !important;
    }

    .room-popup .swal2-actions {
        padding: 0 12px 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .room-btn-confirm,
    .room-btn-cancel {
        width: 100% !important;
        padding: 12px 16px !important;
    }

    .room-form-input {
        padding: 12px !important;
        font-size: 16px !important;
    }

    .room-slider-value {
        font-size: 0.85em !important;
        padding: 4px 10px !important;
    }
}

/* ===== ADMIN CONTROLS (BOTTOM BAR) ===== */
@media (max-width: 768px) {
    div[style*="position:fixed"][style*="bottom:24px"] {
        bottom: 70px !important;
        padding: 0 10px !important;
        gap: 8px !important;
    }

    div[style*="position:fixed"][style*="bottom:24px"] .btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
        min-width: 100px;
    }
}

/* ===== MUSIC CONTROLS ===== */
@media (max-width: 768px) {
    #music-controls {
        top: 8px !important;
        left: 8px !important;
        padding: 4px !important;
    }

    #music-toggle-btn {
        width: 25px !important;
        height: 25px !important;
    }
}

/* ===== PROFILE PAGE ===== */
@media (max-width: 768px) {
    .profile-container {
        max-width: 100% !important;
        padding: 10px !important;
    }
    
    .profile-card {
        padding: 15px !important;
    }
    
    .profile-header {
        flex-direction: column !important;
        text-align: center;
    }
    
    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }
    
    .color-picker {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 10px !important;
        justify-items: center !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    .color-option {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Color buttons on profile page */
    .color-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin: 3px !important;
    }
    
    .form-group > div[style*="flex-wrap"] {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        max-width: 280px !important;
    }
}

/* ===== ADMIN PLAYER PAGE ===== */
@media (max-width: 768px) {
    #playerList {
        padding: 0 10px !important;
        margin: 10px auto !important;
    }

    #playerList li {
        font-size: 14px !important;
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #playerList li a.remove {
        padding: 5px 10px;
    }

    #roundTimeForm {
        padding: 0 10px;
        margin-bottom: 20px;
    }

    #roundTimeForm .form-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #roundTimeForm label {
        font-size: 14px !important;
    }

    #roundTimeForm select {
        width: 100% !important;
        display: block !important;
    }

    #roundTimeForm button {
        width: 100%;
    }
    
    #playerAddForm {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}

/* ===== WELCOME PAGE ===== */
@media (max-width: 768px) {
    .homelink {
        font-size: 12px !important;
        padding: 0 10px;
    }
    
    .content h2 {
        font-size: 18px !important;
        margin: 10px 0 !important;
    }
    
    .inline-block {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}

/* ===== TYPOGRAPHY ===== */
@media (max-width: 768px) {
    .content h2 {
        font-size: 18px !important;
        margin: 8px 0 !important;
    }

    .content ul li {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    input[type='checkbox'] + label,
    input[type='radio'] + label {
        font-size: 16px !important;
        line-height: 20px !important;
    }
}

/* ===== FORMS ===== */
@media (max-width: 768px) {
    .form-control {
        font-size: 16px !important;
        padding: 10px !important;
        min-height: 44px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        height: 50px !important;
        padding: 5px 0;
    }
    
    header img {
        max-height: 40px;
    }
    
    .container-fluid {
        min-height: calc(100vh - 50px);
        margin-bottom: 50px;
    }
    
    footer.footer {
        min-height: 50px;
    }
    
    .chat-box {
        height: 70vh !important;
        max-height: 250px !important;
    }
    
    .lobby-container {
        padding: 5px !important;
    }
    
    .player-card {
        padding: 10px !important;
    }
}

/* ===== VERY SMALL SCREENS ===== */
@media (max-width: 360px) {
    .content h2 {
        font-size: 16px !important;
    }
    
    .player strong {
        font-size: 16px !important;
    }
    
    #countdown, #startGame {
        font-size: 30px !important;
    }
    
    .btn-chat-send {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .gm-reply-btn {
        font-size: 10px !important;
        padding: 6px 4px !important;
    }
    
    .menu-icon {
        font-size: 2em !important;
    }
    
    .menu-title {
        font-size: 1em !important;
    }
    
    .chat-toggle {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .chat-box {
        width: 350px !important;
        right: 15px !important;
        left: auto !important;
    }
    
    #playerSidebar {
        width: 280px !important;
        right: -280px !important;
    }
    
    .lobby-container {
        max-width: 700px !important;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== FIX TOUCH ISSUES ===== */
button, 
a, 
input, 
select, 
textarea {
    touch-action: manipulation;
}

/* Prevent zoom on input focus (iOS) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ===== SAFE AREA (NOTCH PHONES) ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    footer.footer {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    
    .chat-toggle {
        bottom: max(15px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    }
    
    .chat-box {
        bottom: max(75px, calc(env(safe-area-inset-bottom) + 65px)) !important;
    }
    
    #toggleSidebarBtn {
        bottom: max(75px, calc(env(safe-area-inset-bottom) + 65px)) !important;
    }
}