/* ==========================================================================
   POKE DIV GAME - COMPREHENSIVE MOBILE RESPONSIVE STYLESHEET
   (Smartphones 320px - 480px, Phablets 481px - 640px, Tablets <= 768px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS & TOUCH OPTIMIZATION
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden !important;
    background: #0a0a1a !important;
    min-height: 100% !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%) !important;
    min-height: 100vh !important;
}

/* Eliminate tap delay on mobile touch devices */
button,
a,
input,
select,
textarea,
.tab-btn,
.site-mode-btn,
.game-tab,
.db-view-btn,
.type-btn,
.db-pokemon-card,
.tb-slot-card,
.user-avatar-wrap,
.global-mode-btn,
.db-item-tag-badge,
.tb-item-quick-tag {
    touch-action: manipulation;
}

/* Disable hover tooltips on touch-only devices */
@media (hover: none) {
    .db-floating-tip {
        display: none !important;
    }
}

/* ==========================================================================
   TABLET & MOBILE BREAKPOINT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Root & Body Padding --- */
    body {
        padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px)) 8px !important;
        font-size: 13px !important;
    }

    /* Prevent iOS Safari auto-zoom on input focus */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* --- Universal Card & Container Boundary Containment --- */
    .games-mode-wrap,
    .teambuilder-mode-wrap,
    #tabDatabase,
    .news-mode-wrap,
    .main-menu,
    .tab-content,
    .join-card,
    .uk-panel,
    .uk-container,
    .pres-card,
    .db-controls,
    .db-header {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* --- Universal Button & Interactive Elements Boundary Constraint --- */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .btn,
    .tab-btn,
    .site-mode-btn,
    .global-mode-btn,
    .filter-tag,
    .filter-gen,
    .types-game-type-btn,
    .type-btn,
    .opt-btn,
    .tb-btn,
    .tl-btn,
    .db-pill,
    .mg-filter-btn,
    .mg-opt-btn,
    .mg-btn-next,
    .uk-primary-btn,
    .uk-ghost-btn,
    .join-btn,
    .reveal-btn,
    .reveal-next-btn,
    .dexid-mode-btn,
    .dexid-rounds-btn,
    .better-rounds-btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }

    /* --- Override Giant Inline / Fixed Paddings (50px, 80px, 60px, etc.) --- */
    button[style*="50px"],
    button[style*="80px"],
    button[style*="60px"],
    button[style*="40px"],
    button[style*="30px"],
    #tabDexid button,
    #tabBetter button,
    #tabPlay button,
    #dexidGameScreen button,
    #betterGameScreen button,
    #betterEndScreen button,
    #dexidEndScreen button,
    .confirm-modal-buttons button,
    .modal-buttons button,
    .prompt-modal-buttons button,
    .completion-modal-content button,
    .pres-card button,
    .tl-actions button,
    .room-btn,
    .btn-confirm,
    .btn-cancel,
    .hosting-donate-btn,
    .uk-primary-btn,
    .uk-ghost-btn,
    .reveal-btn,
    .reveal-next-btn,
    #revealPresBtn,
    .close-pres-btn,
    #closePresBtn,
    #roomLeaveBtn {
        padding: 8px 14px !important;
        font-size: clamp(0.62rem, 2.5vw, 0.78rem) !important;
        min-height: 36px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Header / Top Bar (Exact Match to User Arrows) ---
       Row 1: [Поддержать] (top-left) | POKE DIV logo + online (center)
       Row 2: Avatar + Name + Badges (left/center) | [Выйти] (row 2 far-right, after gamepad)
    */
    .user-bar {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 6px 8px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 6px 8px !important;
    }

    .user-bar:not([style*="display: none"]):not([style*="display:none"]) {
        display: grid !important;
    }

    .user-bar[style*="none"],
    #userBar[style*="none"],
    #guestBar[style*="none"] {
        display: none !important;
    }

    /* ROW 1: [Поддержать] on top-left */
    .top-bar-donate-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        padding: 5px 12px !important;
        min-width: 95px !important;
        font-size: 0.64rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* ROW 1: Logo & Online count */
    .top-bar-brand {
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 6px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .top-bar-brand h1 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: clamp(0.82rem, 3.2vw, 1.05rem) !important;
    }

    .poke-div-logo-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .admin-header-online-badge {
        margin-left: 6px !important;
        padding: 2px 7px !important;
        font-size: 0.58rem !important;
        border-radius: 10px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .user-bar-actions {
        display: contents !important;
    }

    /* ROW 2: User profile, sprite and notification/gamepad badges */
    .user-bar-info {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 0.68rem !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .user-bar-info .admin-badge,
    .user-bar-info .notif-badge {
        margin-left: auto !important;
    }

    /* ROW 2: [Выйти] / [Войти в аккаунт] placed directly to the right of gamepad icon */
    .user-bar-logout,
    .guest-bar-login {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        padding: 4px 8px !important;
        font-size: clamp(0.55rem, 2.2vw, 0.65rem) !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .top-bar-donate-btn i,
    .user-bar-logout i,
    .guest-bar-login i {
        font-size: 0.68rem !important;
    }

    .user-bar-info .admin-badge,
    .user-bar-info .notif-badge {
        margin-left: auto !important;
    }

    .user-avatar-wrap {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
    }

    .user-name-image {
        height: 26px !important;
        width: 26px !important;
        flex-shrink: 0 !important;
    }


    /* --- Mode Switcher (4 Modes) -> 2x2 Clean Grid --- */
    .mode-switcher-header {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
        border-radius: 16px !important;
        background: rgba(15, 52, 96, 0.45) !important;
        backdrop-filter: blur(10px) !important;
    }

    .mode-switcher-header .site-mode-btn {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 10px 6px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .mode-switcher-header .site-mode-btn i {
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }

    .mode-switcher-header .site-mode-btn span {
        font-size: 0.63rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* --- Tabs & Subtabs (Wrap Neatly Inside Card Boundaries) --- */
    .games-mode-wrap > .tabs,
    .db-tabs-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .tabs-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 4px !important;
        padding: 4px 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .tabs-row .tab-btn,
    .tab-btn.game-tab,
    .tab-btn.db-view-btn {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        font-size: 0.65rem !important;
        padding: 6px 10px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        position: relative !important;
    }

    /* Disable all giant pseudo-elements that blow out mobile width */
    .tab-btn::before,
    .tab-btn:hover::before,
    .tab-btn::after,
    .tab-btn:hover::after,
    .tab-btn.game-tab.active::after,
    .tab-btn.active::after {
        display: none !important;
    }

    .tab-btn.game-tab i,
    .tab-btn.db-view-btn i {
        font-size: 0.72rem !important;
        margin-right: 0 !important;
    }

    .tabs-row--other {
        border-top: 1px solid rgba(233, 69, 96, 0.15) !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
    }

    /* --- Minigame Setup Toolbar (#tabPlay) --- */
    #tabPlay > div:first-child,
    .tab-content > div:first-child[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 8px !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #tabPlay > div:first-child > div,
    .tab-content > div:first-child[style*="justify-content: space-between"] > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 5px !important;
    }

    .global-mode-btn {
        padding: 6px 10px !important;
        font-size: 0.58rem !important;
        border-radius: 20px !important;
        flex: 0 1 auto !important;
        max-width: 100% !important;
    }

    #gameMusicSelect,
    #gameBgSelect {
        max-width: 130px !important;
        font-size: 0.58rem !important;
        padding: 6px 8px !important;
    }

    /* --- DexID & Better Game Screens --- */
    #tabDexid > div,
    #tabBetter > div,
    #dexidStartScreen,
    #dexidGameScreen,
    #dexidEndScreen,
    #betterStartScreen,
    #betterGameScreen,
    #betterEndScreen {
        padding: 20px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #tabDexid > div > div[style*="display:flex"],
    #tabBetter > div > div[style*="display:flex"],
    #dexidEndScreen > div[style*="display:flex"],
    #betterEndScreen > div[style*="display:flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .dexid-rounds-btn,
    .better-rounds-btn {
        padding: 6px 12px !important;
        min-width: 36px !important;
        font-size: 0.72rem !important;
    }

    .dexid-mode-btn {
        padding: 8px 12px !important;
        font-size: 0.68rem !important;
    }

    /* --- Minigame Grid & Cards --- */
    .games-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .game-card,
    .collection-card {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        min-height: auto !important;
    }

    /* --- "Угадай Тип" (Guess Type Game) --- */
    .types-game-types-grid,
    .types-game-real-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .type-btn,
    .types-game-type-btn {
        min-height: 40px !important;
        padding: 6px 2px !important;
        font-size: 0.62rem !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .type-btn img,
    .types-game-type-btn img {
        width: 16px !important;
        height: 16px !important;
    }

    /* --- Minigame Components (.mg-) --- */
    .mg-options-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .mg-opt-btn {
        padding: 10px 12px !important;
        font-size: 0.72rem !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mg-filters-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .mg-filter-btn {
        padding: 5px 10px !important;
        font-size: 0.62rem !important;
        border-radius: 8px !important;
    }

    .mg-btn-next,
    .mg-btn-share {
        padding: 8px 16px !important;
        font-size: 0.72rem !important;
        border-radius: 10px !important;
    }

    /* --- "Поке-Вордли" (Pokedle) --- */
    .pokedle-container,
    .pokedle-history-container,
    .pokedle-board {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        padding: 6px 0 !important;
    }

    .pokedle-row,
    .pokedle-guess-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        min-width: 320px !important;
        justify-content: center !important;
        margin-bottom: 6px !important;
    }

    .pokedle-cell,
    .pokedle-guess-cell {
        width: 44px !important;
        height: 44px !important;
        font-size: 0.58rem !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 2px !important;
        box-sizing: border-box !important;
    }

    /* --- "Силуэт" & "По крику" --- */
    #tabSilhouette canvas,
    .silhouette-canvas,
    .silhouette-img-wrap {
        max-width: min(220px, 70vw) !important;
        max-height: min(220px, 70vw) !important;
        margin: 0 auto 12px auto !important;
    }

    .cry-play-btn,
    .cries-speaker-btn {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.6rem !important;
        border-radius: 50% !important;
        margin: 0 auto 14px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- "У кого лучше" (Better Game) Comparison Cards --- */
    .better-cards-wrap,
    .better-arena-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .better-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- "Тир-лист" (Tier List Maker) --- */
    .tl-container {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .tl-row {
        display: flex !important;
        flex-direction: row !important;
        min-height: 52px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }

    .tl-label-col {
        width: 48px !important;
        min-width: 48px !important;
        font-size: 0.8rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tl-items-col {
        flex: 1 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 4px !important;
    }

    .tl-pool {
        max-height: 180px !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }

    .tl-pokemon-thumb {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    /* --- Leaderboard, Histories & Database Table Containers --- */
    .leaderboard-table-wrapper,
    .histories-table-wrapper,
    .db-table-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    .leaderboard-table,
    .histories-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* Database Table: Keep standard table layout so columns and pokemon sprites NEVER collapse */
    .db-table {
        display: table !important;
        width: 100% !important;
        min-width: 680px !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    .db-table thead { display: table-header-group !important; }
    .db-table tbody { display: table-row-group !important; }
    .db-table tr { display: table-row !important; }
    .db-table th,
    .db-table td {
        display: table-cell !important;
        vertical-align: middle !important;
    }

    .db-table th.th-id { width: 52px !important; min-width: 52px !important; text-align: center !important; }
    .db-table th.th-img { width: 64px !important; min-width: 64px !important; text-align: center !important; }
    .db-table td.td-id { width: 52px !important; min-width: 52px !important; text-align: center !important; font-size: 0.68rem !important; }
    .db-table td:nth-child(2) { width: 64px !important; min-width: 64px !important; text-align: center !important; padding: 4px 2px !important; }
    
    /* Enlarged, crisp Pokemon sprites in database table (50x50px) */
    .db-table-img,
    .db-table td img.db-table-img,
    .db-table tbody tr td:nth-child(2) img {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) !important;
    }

    .db-table th.th-name,
    .db-table td.db-table-name-cell {
        min-width: 130px !important;
    }

    .db-table .db-table-name-txt {
        font-size: 0.74rem !important;
    }

    .db-table-type-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .db-table-mini-holder {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    /* --------------------------------------------------------------------------
       DATABASE (POKEDEX & ENCYCLOPEDIA)
       -------------------------------------------------------------------------- */
    .db-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
    }

    /* Hide oversized standalone red icon on mobile to save valuable vertical viewport */
    .db-header-icon,
    .db-header .db-header-icon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    .db-header-text h2 {
        font-size: clamp(0.95rem, 3.8vw, 1.2rem) !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    .db-header-text p {
        font-size: 0.56rem !important;
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 320px !important;
    }

    /* Prevent stuck floating hover tooltips on mobile/touch screens */
    .db-floating-tip {
        display: none !important;
    }


    /* Database Header Stats (.db-header-stat) - Fit numbers in 1 line */
    .db-header-stats {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-header-stat {
        flex: 1 1 0 !important;
        max-width: 140px !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
        border-radius: 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .db-header-stat-value {
        display: block !important;
        white-space: nowrap !important;
        font-family: 'Minecraft', monospace !important;
        font-size: clamp(0.72rem, 3.2vw, 1.05rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-header-stat-label {
        display: block !important;
        white-space: nowrap !important;
        font-size: 0.52rem !important;
        margin-top: 3px !important;
        letter-spacing: 0.3px !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Universal nowrap on stat numbers and score values to prevent line breaks */
    .db-header-stat-value,
    .db-header-stat-label,
    .lb-stat-value,
    .lbn-stat-value,
    .uk-score-val,
    .mg-hud-val,
    .completion-score-value,
    .db-profile-stat-num,
    .tb-ev-counter,
    .pres-counter {
        white-space: nowrap !important;
        word-break: normal !important;
    }

    .db-header-actions {
        width: 100% !important;
        text-align: center !important;
    }

    .db-beginner-guide-btn {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 0.65rem !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .db-controls {
        padding: 10px !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-search-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .db-search-wrapper {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .db-search-input {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 34px 10px 36px !important;
        border-radius: 12px !important;
    }

    .db-sort-select {
        flex: 1 1 auto !important;
        max-width: calc(100% - 90px) !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        font-size: 0.65rem !important;
    }

    .db-view-toggle {
        flex: 0 0 auto !important;
    }

    /* Filter pills container: wrap neatly */
    .db-filter-pills,
    .filter-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-pill {
        padding: 4px 8px !important;
        font-size: 0.62rem !important;
        border-radius: 16px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .filter-tag {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 4px 8px !important;
        font-size: 0.62rem !important;
    }

    /* Generation filter grid */
    .filter-gen-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .filter-gen {
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px 2px !important;
        font-size: 0.65rem !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    /* Filter pills horizontal swipe container */
    .db-filter-row,
    .db-gen-filters,
    .db-type-filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 4px 2px 8px 2px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-home-pill-btn,
    .db-filter-pill {
        flex: 0 0 auto !important;
        padding: 6px 10px !important;
        font-size: 0.62rem !important;
        border-radius: 10px !important;
    }

    /* --- "Характеристики" Stat Filter Grid & Inputs (Min/Max Never Cut Off) --- */
    .db-stat-filters-container,
    .db-stat-filter-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- "Характеристики" Stat Filter Grid & Inputs (Wide, Touch-Friendly, Full-Width) --- */
    .db-stat-sliders-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-stat-filter-item {
        padding: 5px 10px !important;
        gap: 8px !important;
        height: 36px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    .db-stat-name {
        font-size: clamp(0.68rem, 2.6vw, 0.78rem) !important;
        gap: 6px !important;
        flex: 0 0 80px !important;
        min-width: 80px !important;
        letter-spacing: 0 !important;
    }

    .db-stat-name i {
        font-size: 0.65rem !important;
    }

    .db-stat-inputs-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 190px !important;
    }

    .db-stat-num-input {
        width: 60px !important;
        min-width: 48px !important;
        max-width: 85px !important;
        flex: 1 1 0 !important;
        height: 26px !important;
        font-size: 0.74rem !important;
        padding: 2px 6px !important;
        text-align: center !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        letter-spacing: 0 !important;
    }

    .db-stat-num-input::placeholder {
        font-size: 0.62rem !important;
        letter-spacing: 0 !important;
        opacity: 0.65 !important;
    }

    .db-stat-dash {
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .db-stat-sort-toggles {
        display: flex !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .db-stat-sort-btn {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
    }

    /* Pokemon Grid in Database */
    .db-pokemon-grid,
    .pokemon-list-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-pokemon-card {
        padding: 10px 8px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .db-card-sprite {
        width: 72px !important;
        height: 72px !important;
        margin: 0 auto 6px auto !important;
    }

    .db-card-name-ru {
        font-size: 0.72rem !important;
    }

    /* Database Detail Modal */
    .db-detail-modal-body {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .db-detail-left,
    .db-detail-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .db-detail-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        border-radius: 50% !important;
        background: rgba(233, 69, 96, 0.4) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
    }

    /* 3D Viewer & Model container on mobile */
    .db-profile-img-wrap.is-home-3d {
        width: min(220px, 70vw) !important;
        height: min(220px, 70vw) !important;
        margin: 0 auto 12px auto !important;
        border-radius: 18px !important;
    }

    /* Evolution chain horizontal swipe */
    .db-evo-chain,
    .db-evolution-tree,
    .evolution-tree-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px 4px 12px 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-evo-node {
        flex: 0 0 auto !important;
        min-width: 85px !important;
    }

    /* Type Matrix & Nature Matrix */
    .db-type-matrix-table,
    .db-nature-matrix-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Pokemon Profile: Movepool (Learnsets) Section --- */
    .db-profile-learnsets-section {
        padding: 14px 10px !important;
        border-radius: 16px !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .db-learnset-sec-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-learnset-title-text {
        font-size: clamp(0.9rem, 3.8vw, 1.15rem) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-learnset-game-switcher {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-learnset-game-label {
        font-size: 0.68rem !important;
        color: rgba(255, 255, 255, 0.75) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    .db-learnset-game-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        font-size: clamp(0.62rem, 2.6vw, 0.72rem) !important;
        border-radius: 10px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        background: rgba(15, 23, 42, 0.95) !important;
        border: 1px solid rgba(233, 69, 96, 0.45) !important;
        color: #ffffff !important;
    }

    .db-learnset-tabs {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 8px !important;
    }

    .db-learnset-tab-btn {
        padding: 6px 10px !important;
        font-size: clamp(0.55rem, 2.2vw, 0.65rem) !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .db-learnset-tab-count {
        padding: 1px 5px !important;
        font-size: 0.52rem !important;
        border-radius: 6px !important;
    }

    .db-learnset-filter-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-learnset-search {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        font-size: 0.68rem !important;
    }

    .db-learnset-select:not(.db-learnset-game-select) {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        font-size: 0.68rem !important;
    }

    .db-learnset-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --------------------------------------------------------------------------
       TEAMBUILDER
       -------------------------------------------------------------------------- */
    .teambuilder-mode-wrap {
        padding: 12px 8px !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tb-top-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .tb-top-row-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tb-team-name-group {
        min-width: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .tb-team-name-input,
    .tb-team-select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tb-actions-group,
    .tb-team-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .tb-btn,
    .tb-team-btn {
        flex: 1 1 calc(50% - 4px) !important;
        padding: 8px 6px !important;
        font-size: 0.63rem !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 34px !important;
        box-sizing: border-box !important;
    }

    .tb-top-row-gimmicks {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .tb-toggles-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .tb-toggle-pill {
        font-size: 0.6rem !important;
        padding: 5px 8px !important;
    }

    /* 6 Pokemon Slots Grid -> 2x3 Grid */
    .tb-slots-grid-row,
    .tb-team-slots,
    .tb-opp-slots-grid-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tb-slot-card,
    .tb-opp-slot-card {
        padding: 8px 6px !important;
        border-radius: 12px !important;
        min-height: 84px !important;
        box-sizing: border-box !important;
    }

    .tb-slot-avatar,
    .tb-opp-slot-avatar {
        width: 44px !important;
        height: 44px !important;
    }

    .tb-slot-name {
        font-size: 0.65rem !important;
    }

    /* Teambuilder stats, sliders, moves */
    .tb-opp-arena-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .tb-opp-stats-strip {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .tb-opp-config-selectors,
    .tb-opp-ev-sliders-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .tb-opp-team-summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* --------------------------------------------------------------------------
       NEWS & COMMUNITY WALL (.news-mode-wrap)
       -------------------------------------------------------------------------- */
    .news-subtabs-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-subtabs-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 4px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: none !important;
        padding-bottom: 4px !important;
        overflow: visible !important;
    }

    .news-subtab-btn {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 7px 10px !important;
        font-size: clamp(0.6rem, 2.4vw, 0.72rem) !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .news-subtab-btn i {
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
    }

    .news-subtab-btn span {
        white-space: nowrap !important;
    }

    .news-subtab-badge {
        font-size: 0.5rem !important;
        padding: 1px 5px !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    .news-subtab-btn.active::after {
        display: none !important;
    }

    .news-subtabs-actions {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .news-manage-muted-btn {
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }

    .news-category-pills,
    .comm-actions-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-cat-btn {
        padding: 5px 8px !important;
        font-size: 0.62rem !important;
        border-radius: 8px !important;
        flex: 0 1 auto !important;
    }

    .comm-action-btn {
        padding: 7px 10px !important;
        font-size: 0.65rem !important;
        border-radius: 8px !important;
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Translation Comparison Row (.comm-trans-compare-row) - Stack vertically so text always fits */
    .comm-trans-compare-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(15, 23, 42, 0.7) !important;
        border-radius: 10px !important;
    }

    .comm-trans-box {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 10px !important;
        background: rgba(10, 15, 30, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important;
    }

    .comm-trans-label {
        font-size: 0.56rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        letter-spacing: 0.3px !important;
    }

    .comm-trans-value {
        font-family: 'Minecraft', monospace !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        flex: 1 1 auto !important;
    }

    .comm-trans-arrow {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0.75rem !important;
        color: rgba(233, 69, 96, 0.7) !important;
        transform: rotate(90deg) !important;
        margin: -2px 0 !important;
    }

    .comm-trans-poke-card {
        padding: 8px 10px !important;
        gap: 10px !important;
    }

    .comm-trans-poke-avatar-box {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }

    .comm-trans-poke-img {
        width: 44px !important;
        height: 44px !important;
    }

    .comm-trans-poke-eng-name {
        font-size: 0.85rem !important;
    }

    .comm-trans-poke-cur-tag {
        font-size: 0.72rem !important;
    }

    /* Universal text containment to ensure long text never breaks cards */
    .news-post-card,
    .comm-post-card,
    .comm-reasoning-box,
    .comm-admin-comment,
    .db-pokemon-card,
    .tb-slot-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* --------------------------------------------------------------------------
       PRESENTATION & ROOM MODES
       -------------------------------------------------------------------------- */
    .pres-header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pres-header h3 {
        font-size: 0.8rem !important;
    }

    .pres-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .pres-card-container,
    .pres-sidebar,
    #gameSidebar,
    .types-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .join-card {
        width: 100% !important;
        max-width: 360px !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
    }

    .join-code {
        width: 100% !important;
        max-width: 200px !important;
        font-size: 2.2rem !important;
        padding: 8px 12px !important;
    }

    /* --------------------------------------------------------------------------
       MODALS, POPUPS & DRAWERS
       -------------------------------------------------------------------------- */
    .modal-content,
    .auth-card,
    .completion-single,
    .completion-modal-content,
    .guessed-pokemon-modal,
    .clear-random-modal,
    .tl-pool-modal,
    .mode-setup-modal,
    .collection-picker-modal,
    .db-detail-modal,
    .hosting-donate-modal,
    #templateModal .modal-content,
    #gameInviteModal .modal-content,
    #inviteWaitModal .modal-content,
    #avatarUploadModal .modal-content,
    #adminNameImageModal .modal-content,
    #adminSendNotifModal .modal-content {
        width: calc(100vw - 16px) !important;
        max-width: 96vw !important;
        box-sizing: border-box !important;
        padding: 14px 10px !important;
        border-radius: 16px !important;
        margin: 10px auto !important;
    }

    .modal-two-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .modal-filters {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal-buttons,
    .confirm-modal-buttons,
    .prompt-modal-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .modal-buttons button,
    .confirm-modal-buttons button,
    .prompt-modal-buttons button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 90px !important;
    }

    .auth-overlay,
    .modal-overlay,
    .hosting-modal-overlay {
        padding: 8px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    /* Keep hidden modals hidden */
    [style*="display: none"],
    [style*="display:none"],
    .auth-overlay[style*="none"],
    .hosting-modal-overlay[style*="none"],
    .modal[style*="none"] {
        display: none !important;
    }

    /* Friends & Chats Drawer */
    #friendsChatsPanel {
        width: 100% !important;
        max-width: 100% !important;
    }

    #chatWindow {
        height: calc(100vh - 160px) !important;
        max-height: 70vh !important;
    }
}

/* ==========================================================================
   EXTRA COMPACT SMARTPHONES (max-width: 480px & 360px)
   ========================================================================== */
@media (max-width: 480px) {
    body {
        padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)) 4px !important;
    }

    .user-bar,
    #guestBar {
        padding: 6px 8px !important;
        border-radius: 12px !important;
    }

    .top-bar-brand h1 {
        font-size: 0.95rem !important;
    }

    .mode-switcher-header .site-mode-btn {
        padding: 8px 4px !important;
    }

    .mode-switcher-header .site-mode-btn i {
        font-size: 0.78rem !important;
    }

    .mode-switcher-header .site-mode-btn span {
        font-size: 0.58rem !important;
    }

    .tab-btn.game-tab,
    .tab-btn.db-view-btn {
        padding: 6px 8px !important;
        font-size: 0.62rem !important;
        min-height: 32px !important;
    }

    .games-grid {
        gap: 6px !important;
    }

    .type-btn,
    .types-game-type-btn {
        min-height: 38px !important;
        font-size: 0.58rem !important;
        padding: 6px 2px !important;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .db-card-sprite {
        width: 60px !important;
        height: 60px !important;
    }

    .db-card-name-ru {
        font-size: 0.68rem !important;
    }

    .tb-btn,
    .tb-team-btn {
        flex: 1 1 100% !important;
    }

    .db-header-stat {
        padding: 5px 3px !important;
    }

    .db-header-stat-value {
        font-size: 0.85rem !important;
    }

    .db-header-stat-label {
        font-size: 0.48rem !important;
    }

    .db-profile-learnsets-section {
        padding: 10px 8px !important;
        border-radius: 12px !important;
    }

    .db-learnset-tab-btn {
        padding: 5px 8px !important;
        font-size: 0.58rem !important;
    }
}

@media (max-width: 360px) {
    .mode-switcher-header {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .games-grid {
        grid-template-columns: 1fr !important;
    }

    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .tb-slots-grid-row,
    .tb-team-slots {
        grid-template-columns: 1fr !important;
    }

    .db-header-stat-value {
        font-size: 0.72rem !important;
    }

    .db-header-stat-label {
        font-size: 0.42rem !important;
    }

    .top-bar-donate-btn {
        padding: 4px 10px !important;
        min-width: 88px !important;
        font-size: 0.58rem !important;
    }

    .user-bar-logout,
    .guest-bar-login {
        padding: 3px 6px !important;
        font-size: 0.52rem !important;
    }

    .db-stat-sliders-grid {
        grid-template-columns: 1fr !important;
    }

    .db-learnset-tab-btn {
        padding: 4px 6px !important;
        font-size: 0.52rem !important;
    }
}