/* Shared mobile overrides. Load AFTER the page and game stylesheets.
   Keep fixed dialogs viewport-relative: no transforms/contain on layout parents. */
@media (max-width: 768px) {
    :root { --mobile-nav-space: calc(84px + env(safe-area-inset-bottom, 0px)); }
    html, body { width: 100%; min-width: 0; }
    .app-layout { width: 100%; height: 100vh; height: 100dvh; }
    .main-content {
        min-width: 0; height: 100vh; height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) var(--mobile-nav-space) max(10px, env(safe-area-inset-left));
        overflow-y: auto; scroll-padding-bottom: var(--mobile-nav-space);
    }
    .mobile-container {
        padding: 12px max(10px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        min-width: 0;
    }
    .tab-pane { padding: 0; min-width: 0; }
    /* The legacy tab entrance leaves transform:translateY(0), capturing fixed dialogs. */
    .tab-pane, .tab-pane.active { transform: none; transition: opacity .2s ease; }
    .game-card, #tab-profile > .game-card {
        margin: 0 0 16px; padding: 12px !important; min-width: 0;
        overflow: visible;
    }
    .game-card h2 { font-size: clamp(18px, 5vw, 24px); }
    .game-card h2, .game-card h3, .arena-title, .coin-card, .modal-content,
    .admin-modal-content, .balance-card { overflow-wrap: anywhere; }
    .top-bar {
        height: auto; flex-shrink: 0; padding: 10px; gap: 10px;
        margin-bottom: 16px !important;
    }
    .top-bar > div:last-child { flex-wrap: wrap; min-width: 0; width: 100%; gap: 8px !important; }
    .top-bar .btn { width: auto; flex: 1 1 110px; }
    .balance-card { flex-wrap: wrap; max-width: 100%; }
    .mobile-header {
        flex-wrap: wrap; gap: 8px;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
    }
    .mobile-header > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .mobile-header > div:last-child { flex-wrap: wrap; }
    .sidebar {
        width: 100%; min-width: 0; max-width: none; height: auto;
        padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        overflow: visible; gap: 8px;
    }
    .sidebar .menu, .mobile-nav {
        min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-padding-inline: 8px; scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar .menu { padding: 4px 2px 8px; }
    .mobile-nav { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
    .sidebar .menu-btn, .m-tab-btn { flex: 0 0 auto; min-height: 44px; padding: 10px 12px; }
    .sidebar .user-snippet { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
    button, .btn, .full-arena-link, .full-profile-link, .file-upload-btn,
    .sound-setting, .online-player-item, .give-item, .give-user {
        min-height: 44px; touch-action: manipulation;
    }
    button { min-width: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
    textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #7de6ff; outline-offset: 2px; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px !important;
        user-select: text; scroll-margin-block: 20px;
    }
    .input-box { min-width: 0; max-width: 100%; }
    .input-box input, .input-box select, .input-box textarea { width: 100%; }
    .password-wrapper { min-width: 0; }
    .password-wrapper .eye-btn { width: 44px; min-height: 44px; right: 4px; }
    .file-upload-btn, .full-profile-link { display: flex; align-items: center; justify-content: center; padding: 10px; }
    .controls-row { padding: 12px 0; gap: 12px; align-items: stretch !important; }
    .controls-row > .input-box { width: 100% !important; max-width: none !important; }
    .controls-row > div { min-width: 0; max-width: 100%; }
    #tab-chicken .controls-row > div { flex-wrap: wrap; gap: 10px !important; }
    #tab-chicken .controls-row > div > .input-box { flex: 1 0 100%; width: 100% !important; }
    #tab-chicken .controls-row > div > div:last-child { min-width: 0; max-width: 100%; }
    #tab-chicken .controls-row > div > div:last-child > div { flex-wrap: wrap; }
    #tab-chicken .game-card > div:not(.chicken-arena):not(.controls-row),
    #tab-durak .game-card > div:first-of-type,
    #tab-durak .game-card > div:first-of-type > div,
    #tab-durak .cards-arena > div:first-child { flex-wrap: wrap; gap: 10px; }
    #tab-chicken .controls-row button { min-width: 0 !important; flex: 1 1 140px; height: auto !important; }
    .arena-header { flex-wrap: wrap; }
    .arena-header > div { min-width: 0; }
    .arena-currency { margin-left: 0; }
    .visual-game .mines-arena, .mines-arena {
        grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 5px;
        padding: 4px; width: 100%; max-width: 480px;
    }
    .visual-game .mine-tile, .mine-tile { width: 100%; height: auto; min-height: 44px; aspect-ratio: 1; }
    .dice-options, .roulette-buttons { flex-wrap: wrap; gap: 8px; }
    .dice-btn, .r-btn { flex: 1 1 120px; padding: 10px; }
    .roulette-ring { width: min(220px, 100%); height: auto; aspect-ratio: 1; }
    .dice-faces { flex-wrap: wrap; }
    .hand-container { max-width: 100%; flex-wrap: wrap; }
    .playing-card { flex-shrink: 0; }
    .exchange-grid, .shop-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .coin-card, .shop-card { min-width: 0; max-width: 100%; }
    .market-card .coin-header { flex-wrap: wrap; }
    .market-quote { text-align: left; }
    .market-actions .btn { flex: 1 1 100px; }
    .coin-chart-canvas { max-width: 100%; }
    .leaderboard-table, .admin-table {
        display: block; width: 100%; max-width: 100%; overflow-x: auto;
        overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    }
    .leaderboard-table th, .leaderboard-table td, .admin-table th, .admin-table td { padding: 10px; }
    #tab-profile .game-card > div { flex-wrap: wrap; }
    #tab-profile .game-card > div > div { min-width: 0 !important; max-width: 100%; }
    #tab-profile [onclick^="setEmojiAvatar"] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
    #tab-profile .game-card > div > div > div { flex-wrap: wrap; }
    .security-actions .btn { flex: 1 1 140px; }
    .session-row { flex-wrap: wrap; }
    .chat-container { margin: 0; height: 60vh; height: 60dvh; min-height: 240px; max-width: 100%; }
    .chat-messages { min-height: 0; padding: 10px; }
    .chat-input-row { flex-shrink: 0; padding: 8px; gap: 8px; }
    .chat-input-row input { min-width: 0; width: 0; }
    .chat-input-row .btn { flex: 0 0 auto; width: auto; padding: 10px; }
    .chat-avatar { width: 44px; height: 44px; }
    .chat-author { min-height: 44px; }
    .modal {
        /* inset:0 on a fixed element already sizes it to the viewport.
           vh/dvh heights are redundant here and can lag one frame behind
           a viewport resize, briefly mis-centering dialog content. */
        inset: 0; width: 100%; height: 100%; z-index: 10000;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        overflow-y: auto; overscroll-behavior: contain;
    }
    .modal-content, .admin-modal-content {
        width: 100% !important; max-width: 520px !important; min-width: 0;
        /* % of the fixed modal (definite height via inset:0), no vh lag on resize. */
        max-height: calc(100% - 20px);
        padding: 16px !important; gap: 12px; overflow-y: auto;
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .admin-modal-content { max-width: 740px !important; }
    .modal-content > *, .admin-modal-content > * { flex-shrink: 0; min-width: 0; max-width: 100%; }
    .modal-content > div, .admin-modal-content > div { flex-wrap: wrap; }
    .modal-content h2, .admin-modal-content h2 { font-size: 20px; }
    .modal-content button, .admin-modal-content button { width: auto; }
    #authModal [onclick="toggleAuthMode()"] { min-height: 44px; display: grid; align-items: center; }
    #toastContainer, .chat-toast-region {
        width: auto; top: max(12px, env(safe-area-inset-top)); bottom: auto;
        left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    }
    .ludka-toast { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
    .game-card, #tab-profile > .game-card { padding: 10px !important; }
    .chat-input-row { flex-wrap: wrap; }
    .chat-input-row input { flex-basis: 100%; width: 100%; }
    .chat-input-row .btn { width: 100%; }
    .visual-game .dice-board, .visual-game .roulette-display { padding-inline: 6px; }
}