/* ==========================================================================
   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;
    }

    /* Teambuilder Synergy Header & Mode Tabs Mobile Adaptation */
    .tb-synergy-header-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tb-synergy-header-row .tb-synergy-title {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        width: 100% !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .tb-synergy-mode-tabs {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        background: rgba(15, 23, 42, 0.85) !important;
        border-radius: 12px !important;
    }

    .tb-syn-mode-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-align: center !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .tb-syn-mode-btn i {
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }

    .tb-syn-mode-btn span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !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;
    }
}


/* ==========================================================================
   MOBILE & RESPONSIVE OVERHAUL: DUEL CALCULATOR & DETAILED ANALYSIS MODAL
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Clash Stage in Detailed Modal */
    .tb-clash-stage {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .tb-clash-vs-emblem {
        margin: 4px auto !important;
        transform: rotate(90deg) !important;
    }

    /* 2. Speed Banner in Duel Tab */
    .tb-duel-speed-banner {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .tb-duel-combatant.our,
    .tb-duel-combatant.opp {
        align-items: center !important;
        text-align: center !important;
    }

    .tb-boost-toggles {
        justify-content: center !important;
    }

    /* 3. Detailed Analysis Modal Layout */
    .tb-detailed-analysis-content,
    .tb-detailed-analysis-content.modern-ui {
        width: 98vw !important;
        max-width: 98vw !important;
        max-height: 95vh !important;
        margin: 4px auto !important;
        border-radius: 12px !important;
    }

    .tb-detailed-header {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .tb-detailed-poke-profile {
        width: 100% !important;
        gap: 10px !important;
    }

    .tb-detailed-title-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tb-detailed-nav-tabs {
        padding: 8px 10px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tb-detailed-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tb-detailed-tab-btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }

    /* 4. Opponent Workspace & Verdict Banner */
    .tb-opp-workspace-container {
        padding: 6px 0 16px 0 !important;
    }

    .tb-opp-section-box {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }

    .tb-opp-verdict-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .tb-opp-verdict-meta {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* 5. Combatant Cards & Header */
    .tb-opp-card {
        padding: 10px 10px !important;
    }

    .tb-opp-card-head {
        gap: 10px !important;
    }

    .tb-opp-card-avatar {
        width: 52px !important;
        height: 52px !important;
    }

    .tb-opp-card-title {
        font-size: 0.95rem !important;
    }

    /* 6. Interactive HP Bar & Presets */
    .tb-hp-interactive-bar-row {
        gap: 6px !important;
    }

    .tb-hp-bar-interactive-track {
        min-width: 100% !important;
        order: 1 !important;
    }

    .tb-hp-step-btn.minus {
        order: 2 !important;
    }

    .tb-hp-step-btn.plus {
        order: 3 !important;
    }

    .tb-hp-presets {
        order: 4 !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 3px !important;
        margin-top: 4px !important;
    }

    .tb-hp-preset-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 4px 2px !important;
        font-size: 0.65rem !important;
    }

    /* 7. Moves Grid */
    .tb-moves-grid {
        grid-template-columns: 1fr !important;
    }

    .tb-tab-moves-list {
        gap: 6px !important;
    }

    .tb-tab-move-card {
        padding: 8px 10px !important;
    }

    /* 8. Environment Accordion & Battle Bar */
    .tb-battle-env-bar {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .tb-env-group {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .tb-env-buttons {
        flex-wrap: wrap !important;
        gap: 3px !important;
    }

    .tb-env-btn {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
    }

    .env-body-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .row-label {
        min-width: unset !important;
    }

    /* 9. Meta Scorecard & Tips */
    .scorecard-columns {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .tb-simple-tips-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* 10. Meta Threats Bar Scroll */
    .tb-duel-meta-pick-bar {
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    .meta-search-trigger-btn {
        padding: 4px 8px !important;
        font-size: 0.68rem !important;
    }

    .meta-threat-btn {
        padding: 2px 7px 2px 4px !important;
        font-size: 0.65rem !important;
    }

    /* 11. Opponent Search Modal Grid */
    .opp-search-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        padding: 10px !important;
        gap: 6px !important;
    }

    .search-card-img {
        width: 42px !important;
        height: 42px !important;
    }

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

@media (max-width: 480px) {
    .tb-opp-slots-grid-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .tb-opp-slot-card {
        min-height: 80px !important;
        padding: 6px 4px !important;
    }

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

    .tb-opp-card-head {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .tb-opp-types-strip {
        justify-content: center !important;
    }

    .tb-card-subaction-row {
        justify-content: center !important;
    }

    .tb-hp-control-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .tb-hp-numbers {
        font-size: 0.72rem !important;
    }
}


/* ==========================================================================
   MOBILE & RESPONSIVE OVERHAUL: ALL PICKERS & SITE-WIDE MODAL CONTAINMENT
   ========================================================================== */
@media (max-width: 768px) {
    /* Teambuilder Pickers (Pokemon, Item, Ability, Nature, Move, Tera) */
    .tb-modal-overlay {
        padding: 8px !important;
    }

    .tb-modal-content {
        width: 100% !important;
        max-width: 98vw !important;
        max-height: 92vh !important;
        padding: 12px 10px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .tb-modal-header {
        margin-bottom: 10px !important;
    }

    .tb-modal-header h3 {
        font-size: 0.95rem !important;
    }

    .tb-modal-search {
        margin-bottom: 10px !important;
    }

    .tb-modal-search input {
        padding: 8px 12px 8px 32px !important;
        font-size: 0.8rem !important;
    }

    .tb-modal-list {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
        gap: 6px !important;
        padding-right: 2px !important;
    }

    .tb-poke-pick-card {
        padding: 6px 4px !important;
        border-radius: 8px !important;
    }

    .tb-poke-pick-card img {
        width: 44px !important;
        height: 44px !important;
    }

    .tb-poke-pick-card .name {
        font-size: 0.68rem !important;
    }

    /* Universal Overflow Prevention for All Main Views */
    #tabPlay,
    #dbViewCards,
    #dbViewPosters,
    #dbViewTable,
    #newsSectionUpdates,
    .news-mode-wrap,
    .tb-workspace-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .tb-modal-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .tb-poke-pick-card img {
        width: 38px !important;
        height: 38px !important;
    }

    .tb-poke-pick-card .name {
        font-size: 0.62rem !important;
    }
}


/* ==========================================================================
   TEAMBUILDER POKEMON SELECT MODAL MOBILE RESPONSIVENESS
   ========================================================================== */
.tb-modal-filter-toggle-row {
    display: none;
    margin-bottom: 8px;
}

.tb-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    color: #34d399;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tb-filter-toggle-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.tb-filter-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

@media (max-width: 850px) {
    .tb-db-modal-content {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 94vh !important;
        max-height: 94vh !important;
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }

    .tb-modal-filter-toggle-row {
        display: block !important;
    }

    /* By default on mobile, collapse the giant filter panel */
    .tb-db-modal-content #tbModalFilters {
        display: none;
        max-height: 220px !important;
        overflow-y: auto !important;
        background: rgba(15, 23, 42, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
    }

    /* When toggled open on mobile */
    .tb-db-modal-content #tbModalFilters.tb-filters-open {
        display: block !important;
    }

    /* Keep Search and Sort row neat and wrap properly */
    .tb-db-modal-content .db-controls {
        margin-bottom: 8px !important;
    }

    .tb-db-modal-content .db-search-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tb-db-modal-content .db-search-wrapper {
        flex: 1 1 180px !important;
        min-width: 140px !important;
    }

    .tb-db-modal-content .db-search-input {
        padding: 7px 10px 7px 30px !important;
        font-size: 0.75rem !important;
    }

    .tb-db-modal-content .db-sort-select {
        flex: 0 0 auto !important;
        padding: 6px 8px !important;
        font-size: 0.72rem !important;
    }

    .tb-db-modal-content .tb-modal-count-badge {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }

    /* Give the cards grid the full remaining height! */
    .tb-db-modal-content .tb-modal-cards-wrap {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 200px !important;
        overflow-y: auto !important;
        padding: 6px 2px 14px !important;
    }

    .tb-db-modal-content .tb-modal-cards-wrap .db-cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Compact card styling inside select modal */
    .tb-db-modal-content .db-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .tb-db-modal-content .db-card-top {
        gap: 10px !important;
    }

    .tb-db-modal-content .db-card-img {
        width: 56px !important;
        height: 56px !important;
    }

    .tb-db-modal-content .db-card-name {
        font-size: 0.88rem !important;
    }

    .tb-db-modal-content .db-card-stats-mini {
        gap: 4px !important;
        margin: 6px 0 !important;
    }

    .tb-db-modal-content .db-stat-item {
        font-size: 0.65rem !important;
        padding: 2px 4px !important;
    }
}


/* ==========================================================================
   FIX STAT FILTER GRID CUTOFF & TEAMBUILDER MODAL SEARCH ON MOBILE
   ========================================================================== */

/* 1. Database & Teambuilder Stat Filters Grid: 1 column on mobile screens so inputs are never cut off */
@media (max-width: 850px) {
    .db-stat-sliders-grid,
    #dbStatSlidersGrid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

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

    .db-stat-name {
        flex: 0 0 75px !important;
        min-width: 75px !important;
        font-size: 0.72rem !important;
    }

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

    .db-stat-num-input {
        width: 55px !important;
        min-width: 44px !important;
        max-width: 80px !important;
        height: 28px !important;
        flex: 1 1 0 !important;
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .db-stat-dash {
        flex: 0 0 auto !important;
        font-size: 0.8rem !important;
        padding: 0 2px !important;
    }

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

    .db-stat-sort-btn {
        width: 24px !important;
        height: 28px !important;
        min-width: 24px !important;
        font-size: 0.75rem !important;
    }

    /* 2. Teambuilder Select Modal: Compact Header & Search Row */
    .tb-db-modal-content {
        padding: 12px 10px !important;
    }

    .tb-db-modal-content .tb-modal-header {
        margin-bottom: 8px !important;
    }

    .tb-db-modal-content .db-controls {
        padding: 8px !important;
        margin-bottom: 8px !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
    }

    .tb-db-modal-content .db-search-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
    }

    .tb-db-modal-content .db-search-wrapper {
        flex: 1 1 160px !important;
        min-width: 140px !important;
        width: auto !important;
        position: relative !important;
    }

    .tb-db-modal-content .db-search-icon {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    .tb-db-modal-content .db-search-input {
        width: 100% !important;
        padding: 8px 10px 8px 30px !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .tb-db-modal-content .db-sort-select {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 7px 10px !important;
        font-size: 0.72rem !important;
        border-radius: 10px !important;
    }

    .tb-db-modal-content .tb-modal-count-badge {
        flex: 0 0 auto !important;
        padding: 7px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 10px !important;
    }
}

/* Fix devMode layout on mobile - prevent excessive empty height under types and stack panels cleanly */
@media (max-width: 900px) {
    #devMode .dev-main-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    #devMode .editor-panel,
    #devMode .slides-list-panel {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #devMode .editor-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    #devMode .editor-panel .action-buttons {
        margin-top: 18px !important;
        padding-top: 10px !important;
    }

    #devMode .editor-panel > div:nth-child(2) {
        flex-direction: column !important;
        gap: 14px !important;
    }

    #devMode .editor-panel > div:nth-child(2) > div:first-child {
        flex: none !important;
        width: 100% !important;
    }

    #devMode #uploadAreaDev {
        min-height: 180px !important;
        max-height: 220px !important;
    }

    #devMode #typeIconsGridDev {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    #devMode #typeIconsGridDev .type-icon-item {
        padding: 6px 3px 5px 3px !important;
    }

    #devMode #typeIconsGridDev .type-icon-item img {
        width: 36px !important;
        height: 36px !important;
    }

    #devMode #typeIconsGridDev .type-icon-item span {
        font-size: 8.5px !important;
    }

    #devMode .slides-list-panel {
        max-height: 520px !important;
    }

    #devMode #pokemonListDev {
        max-height: 380px !important;
    }
}

@media (max-width: 480px) {
    #devMode #typeIconsGridDev {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }
}

/* Admin Pokémon Advanced Editor Styles */
.admin-poke-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    padding: 7px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-poke-tab-btn:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #fff;
}

.admin-poke-tab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(198, 42, 71, 0.5));
    border-color: #ff4d6d;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 77, 109, 0.3);
}

.admin-poke-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-poke-field label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   GLOBAL MOBILE OVERHAUL: PROFILE, FILTERS, EVOLUTIONS & MODALS (<= 768px & <= 480px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Profile Top Navigation & Prev/Next Bar */
    .db-profile-nav-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
    }

    .db-profile-nav-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .db-profile-nav-left .db-profile-btn.primary {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }

    .db-profile-search-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        position: relative !important;
    }

    .db-profile-search-input {
        width: 100% !important;
        font-size: 0.72rem !important;
        padding: 6px 10px 6px 28px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    .db-profile-search-icon {
        left: 8px !important;
        font-size: 0.7rem !important;
    }

    .db-profile-nav-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .db-profile-nav-right {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .db-profile-nav-right .db-profile-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 0.62rem !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 2. Forms & Gen Selector Bars (Touch Scrollable) */
    .db-profile-forms-section,
    .db-profile-gens-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-profile-forms-label,
    .db-profile-gens-label {
        font-size: 0.65rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .db-profile-forms-pills,
    .db-profile-gens-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-profile-forms-pills::-webkit-scrollbar,
    .db-profile-gens-pills::-webkit-scrollbar {
        height: 3px !important;
    }

    .db-profile-form-pill,
    .db-profile-gen-pill {
        flex: 0 0 auto !important;
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* 3. Hero Grid (Card Left & Right stacked cleanly) */
    .db-profile-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-profile-card-left,
    .db-profile-card-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 14px 10px !important;
        border-radius: 16px !important;
    }

    .db-profile-card-top-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .db-profile-media-toggles {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .db-profile-toggle-group {
        display: inline-flex !important;
        gap: 3px !important;
    }

    .db-view-mode-btn,
    .db-shiny-btn,
    .db-scale-btn {
        padding: 4px 8px !important;
        font-size: 0.62rem !important;
        border-radius: 6px !important;
    }

    .db-profile-img-wrap {
        width: min(240px, 75vw) !important;
        height: min(240px, 75vw) !important;
        margin: 8px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .db-profile-img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .db-profile-name-ru {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
        line-height: 1.2 !important;
    }

    .db-profile-types {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .db-profile-type-badge {
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
        border-radius: 8px !important;
    }

    .db-profile-cry-row {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .db-profile-cry-btn {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
    }

    .db-profile-physical-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .db-profile-physical-item {
        padding: 8px !important;
        border-radius: 10px !important;
    }

    /* 4. Stats Grid, Bars & Numbers */
    .db-profile-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-profile-stat-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-profile-stat-name {
        flex: 0 0 65px !important;
        min-width: 65px !important;
        font-size: 0.68rem !important;
    }

    .db-profile-stat-num {
        flex: 0 0 45px !important;
        min-width: 45px !important;
        font-size: 0.72rem !important;
        text-align: right !important;
    }

    .db-profile-bar-bg {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 8px !important;
        border-radius: 4px !important;
    }

    .db-profile-stat-total {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        margin-top: 6px !important;
        border-radius: 10px !important;
    }

    /* 5. Defense Multipliers Dropdown on Mobile */
    .db-defense-filter-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-defense-selectors {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-def-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .db-def-row-label {
        min-width: 105px !important;
        max-width: 115px !important;
        gap: 4px !important;
    }

    .db-def-badge {
        min-width: 38px !important;
        font-size: 0.58rem !important;
        padding: 1px 4px !important;
    }

    .db-def-title {
        font-size: 0.65rem !important;
    }

    .db-def-btn {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
        min-height: 24px !important;
    }

    .db-def-btn-text {
        font-size: 0.62rem !important;
    }

    .db-def-menu {
        width: min(340px, 92vw) !important;
        right: 0 !important;
        left: auto !important;
        padding: 8px !important;
    }

    .db-def-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        max-height: 220px !important;
    }

    .db-def-type-pill {
        padding: 3px 5px !important;
        font-size: 0.62rem !important;
    }

    /* 6. Evolution Chain Section */
    .db-profile-evo-section {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 10px !important;
        border-radius: 16px !important;
    }

    .db-profile-evo-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }

    .db-evo-linear-wrap,
    .db-evo-special-grid,
    .db-evo-branch-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: max-content !important;
    }

    .db-evo-card {
        flex: 0 0 auto !important;
        min-width: 95px !important;
        max-width: 110px !important;
        padding: 8px 6px !important;
        box-sizing: border-box !important;
    }

    .db-evo-sprite {
        width: 58px !important;
        height: 58px !important;
    }

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

    .db-evo-arrow-wrap {
        flex: 0 0 auto !important;
        gap: 3px !important;
        padding: 0 4px !important;
    }

    .db-evo-method-text {
        font-size: 0.58rem !important;
        max-width: 80px !important;
    }

    /* 7. Effectiveness Box & Type Badges */
    .db-profile-efx-box {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .efx-group-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 6px 0 !important;
    }

    .efx-types-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .efx-type-chip {
        padding: 3px 7px !important;
        font-size: 0.62rem !important;
    }

    /* 8. Move Modal & General Modals Mobile Ergonomics */
    .db-move-modal-content,
    .db-detail-modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 10px auto !important;
        padding: 16px 12px !important;
        max-height: 90vh !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .db-move-table-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        padding: 6px 0 !important;
    }

    .db-move-table-label {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .db-move-table-val {
        font-size: 0.72rem !important;
    }
}

/* Extra small devices (<= 380px) */
@media (max-width: 380px) {
    .db-def-row-label {
        min-width: 90px !important;
        max-width: 98px !important;
    }

    .db-def-title {
        font-size: 0.6rem !important;
    }

    .db-profile-stat-name {
        flex: 0 0 52px !important;
        min-width: 52px !important;
        font-size: 0.62rem !important;
    }

    .db-profile-stat-num {
        flex: 0 0 38px !important;
        min-width: 38px !important;
        font-size: 0.66rem !important;
    }
}

/* ==========================================================================
   ENHANCED POLISH & FIXES FOR MOBILE VIEWPORT (ALL SCREENS <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent any horizontal screen shake or overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* 1. Header & Top Bar - Ultra Clean Rows & No Overlaps */
    .user-bar {
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        padding: 8px 10px !important;
        align-items: center !important;
    }

    .top-bar-donate-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        min-width: 85px !important;
        height: 28px !important;
        line-height: 1 !important;
    }

    .top-bar-brand {
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding-left: 4px !important;
    }

    .top-bar-brand h1 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        width: auto !important;
    }

    .user-bar-info {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .user-bar-name-wrap {
        min-width: 0 !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #userBarName {
        font-size: 0.72rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        max-width: 100% !important;
    }

    .user-bar-logout,
    .guest-bar-login {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        height: 28px !important;
        padding: 4px 10px !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
    }

    /* 2. Floating Widgets (Language Switcher, Social, Notifications) */
    .lang-switch-floating {
        top: 8px !important;
        right: 48px !important;
        z-index: 9999 !important;
    }

    .social-block {
        top: 8px !important;
        right: 8px !important;
        z-index: 9999 !important;
    }

    .social-toggle {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .social-panel {
        right: 0 !important;
        width: 160px !important;
    }

    /* 3. Lobby Modes Grid (#gameModesPanel) */
    .lobby-modes-container {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    .lobby-header-bar {
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .lobby-icon-box {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }

    .lobby-main-heading {
        font-size: 1.05rem !important;
    }

    .lobby-ambient-panel {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .lobby-ambient-trigger {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 130px !important;
        padding: 6px 8px !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }

    .lobby-trigger-label {
        font-size: 0.52rem !important;
    }

    .lobby-trigger-value {
        font-size: 0.68rem !important;
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .lobby-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .lobby-card {
        padding: 12px 12px 10px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    .lobby-card-icon-frame {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    .lobby-card-name {
        font-size: 0.88rem !important;
        margin-bottom: 4px !important;
    }

    .lobby-card-description {
        font-size: 0.6rem !important;
        line-height: 1.35 !important;
    }

    /* 4. Minigame Setup Screens (DexID, Better, Silhouette, Cries, Matchup, Evolution, Shiny) */
    #tabDexid > div,
    #tabBetter > div,
    #tabGuessWho > div,
    #tabSilhouette > div,
    #tabCries > div {
        padding: 24px 10px !important;
    }

    #tabDexid button,
    #tabBetter button,
    #tabGuessWho button,
    #tabPlay button.dexid-mode-btn,
    #tabPlay button.dexid-rounds-btn {
        min-width: auto !important;
        max-width: 100% !important;
    }

    /* Big Start/Room Action Buttons on Mobile Screens */
    #tabDexid button[onclick*="dexid"],
    #tabBetter button[onclick*="better"],
    #tabGuessWho button[onclick*="gw"] {
        flex: 1 1 calc(50% - 6px) !important;
        padding: 12px 16px !important;
        font-size: 0.76rem !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    /* 5. Minigame Answer Choice Grids */
    .dexid-options-grid,
    .silhouette-options-grid,
    .cries-options-grid,
    .evolution-options-grid,
    .matchup-options-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .silhouette-options-grid button,
    .cries-options-grid button,
    .evolution-options-grid button,
    .matchup-options-grid button {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 0.78rem !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }

    /* 6. Guess Type Real Grid & Play Arena */
    .types-game-container {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .types-game-header {
        padding: 8px 12px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    .types-game-score {
        font-size: 1.15rem !important;
        padding: 2px 12px !important;
    }

    .types-game-section {
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    .types-game-section-header {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 6px !important;
    }

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

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

    /* 7. Presentation Fullscreen Card on Mobile */
    .fullscreen-presentation {
        padding: 10px 8px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .fullscreen-presentation .pres-content {
        padding: 8px 4px !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .fullscreen-presentation .pres-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 12px !important;
        flex-direction: column !important;
        gap: 12px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .fullscreen-presentation .pres-image-area {
        min-width: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .fullscreen-presentation .pres-image-area img {
        max-height: 35vh !important;
        width: auto !important;
        max-width: 85% !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
    }

    .fullscreen-presentation .pres-info-area {
        width: 100% !important;
        text-align: center !important;
    }

    .fullscreen-presentation .pres-pokemon-name {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        letter-spacing: 1px !important;
    }

    .fullscreen-presentation .pres-description {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        padding: 10px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }

    .fullscreen-presentation .reveal-btn {
        padding: 10px 16px !important;
        font-size: 0.82rem !important;
        border-radius: 20px !important;
        height: 42px !important;
    }

    .fullscreen-presentation .pres-nav {
        margin-top: 14px !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .fullscreen-presentation .pres-nav-btn {
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 0.72rem !important;
        border-radius: 20px !important;
    }

    .fullscreen-presentation .pres-counter {
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.72rem !important;
        border-radius: 20px !important;
    }

    /* 8. Tierlist Board & Controls on Mobile */
    .tl-header {
        padding: 10px 8px !important;
    }

    .tl-header h2 {
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
    }

    .tl-header p {
        font-size: 0.65rem !important;
        margin-bottom: 10px !important;
    }

    .tl-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .tl-actions .tl-btn {
        flex: 1 1 calc(50% - 4px) !important;
        padding: 6px 8px !important;
        font-size: 0.62rem !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
    }

    .tl-zoom-wrap {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 4px !important;
    }

    .tl-pool-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .tl-search {
        width: 100% !important;
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
    }

    /* 9. All Modals & Completion Popups Touch Ergonomics */
    .modal-content,
    .completion-single,
    .completion-modal-content,
    .auth-card {
        padding: 16px 12px !important;
        border-radius: 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .completion-single h2,
    .completion-modal-content h2 {
        font-size: 1.15rem !important;
        margin-bottom: 8px !important;
    }

    .completion-single p,
    .completion-modal-content p {
        font-size: 0.72rem !important;
    }

    /* 10. Help & Feedback Cards (#tabHelp) */
    .help-hero {
        padding: 16px 10px !important;
    }

    .help-hero-icon {
        font-size: 2rem !important;
        margin-bottom: 6px !important;
    }

    .help-hero h2 {
        font-size: 1.15rem !important;
    }

    .help-hero p {
        font-size: 0.68rem !important;
    }

    .help-cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .help-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }

    .help-card-title {
        font-size: 0.85rem !important;
    }

    .help-card-desc {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important;
    }

    .types-game-type-btn {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 0.52rem !important;
        padding: 2px 2px !important;
    }

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

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

/* --- FIX: АУРА И РАМКА АВАТАРА (БЕЗ ОБРЕЗКИ И АРТЕФАКТОВ) --- */
.user-bar,
.user-bar-info,
.user-bar-actions {
    overflow: visible !important;
}

.user-avatar-wrap {
    overflow: visible !important;
    position: relative !important;
    margin: 2px 4px !important;
}

.user-avatar-wrap .user-avatar-img,
.user-avatar-wrap #userAvatarIcon {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.user-avatar-wrap[class*="frame-"]::before,
.user-avatar-wrap.has-custom-frame::before {
    box-sizing: border-box !important;
    pointer-events: none !important;
}

/* ==========================================================================
   FIX: LOBBY AMBIENT & DEV TRIGGERS (КНОПКИ САУНДТРЕК, ОБОИ, РЕДАКТОР)
   ========================================================================== */
@media (max-width: 768px) {
    .lobby-ambient-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    .lobby-ambient-trigger {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 48px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        position: relative !important;
    }

    /* Иконка (нота, обои, ключ/инструменты) - просторная, центрированная */
    .lobby-trigger-icon-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.05rem !important;
        flex-shrink: 0 !important;
    }

    /* Текстовый блок (лейбл + название трека/обоев) */
    .lobby-trigger-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 8px !important;
    }

    .lobby-trigger-label {
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 2px !important;
    }

    .lobby-trigger-value {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Значок настроек (ползунки / стрелка) - справа с безопасным отступом */
    .lobby-trigger-arrow {
        margin-left: auto !important;
        margin-right: 2px !important;
        flex-shrink: 0 !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================================================
   FIX: COMPACT 2-COLUMN LOBBY CARDS GRID & STREAMLINED AMBIENT TOOLBAR
   ========================================================================== */
/* Стили для десктопа: компактная группа значок + тег */
.lobby-card-header-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 768px) {
    /* 1. Сетка карточек режимов: аккуратные 2 колонки */
    .lobby-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Карточка компактная, информативная */
    .lobby-card {
        padding: 10px 8px 8px 8px !important;
        min-height: 125px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Верхняя строка: левая группа (тег + значок напротив) и статус справа */
    .lobby-card-top {
        margin-bottom: 6px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    /* Левая группа: тег слева, значок НАПРОТИВ (справа от тега в одну строку) */
    .lobby-card-header-left {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .lobby-card-tag {
        order: 1 !important;
        font-size: 0.52rem !important;
        padding: 2px 5px !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 82px !important;
        flex-shrink: 1 !important;
    }

    /* Значок: встает НАПРОТИВ тега (после тега) */
    .lobby-card-icon-frame {
        order: 2 !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        border-radius: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Значок для Комнаты: квадратный с закруглением как у всех, без круглых обводок */
    .lobby-card-room .lobby-card-icon-frame,
    .icon-room {
        border-radius: 7px !important;
        background: rgba(78, 205, 196, 0.12) !important;
        border: 1px solid rgba(78, 205, 196, 0.35) !important;
        color: #4ecdc4 !important;
        box-shadow: none !important;
    }

    .lobby-card-status {
        font-size: 0.54rem !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .lobby-card-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    .lobby-card-name {
        font-size: 0.78rem !important;
        margin-bottom: 3px !important;
        line-height: 1.15 !important;
    }

    /* Возвращаем компактное мини-описание (до 2 строк) */
    .lobby-card-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.54rem !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 4px !important;
    }

    /* 5-я карточка («Комната») во всю ширину как полноценная карточка в стиле остальных */
    .lobby-card:nth-child(5),
    .lobby-card-room {
        grid-column: 1 / -1 !important;
        min-height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 10px 10px 8px 10px !important;
    }

    .lobby-card-room .lobby-card-top {
        display: flex !important;
        margin-bottom: 6px !important;
    }

    .lobby-card-room .lobby-card-tag {
        max-width: none !important;
    }

    .lobby-card-room .lobby-card-info {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .lobby-card-room .lobby-card-name {
        margin-bottom: 3px !important;
        font-size: 0.8rem !important;
    }

    .lobby-card-room .lobby-card-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.54rem !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 4px !important;
    }

    /* 2. Плавающие кнопки переключения языка и соцсетей автора */
    /* Убираем их наложение на карточки в шапке */
    .lang-switch-floating {
        top: 6px !important;
        right: 44px !important;
        z-index: 99 !important;
        opacity: 0.85 !important;
    }

    .lang-switch-floating:hover,
    .lang-switch-floating:active {
        opacity: 1 !important;
    }

    .social-block {
        top: 6px !important;
        right: 6px !important;
        z-index: 99 !important;
        opacity: 0.85 !important;
    }

    .social-block:hover,
    .social-block:active {
        opacity: 1 !important;
    }
}

@media (max-width: 360px) {
    .lobby-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .lobby-card {
        padding: 8px 6px !important;
        min-height: 115px !important;
    }
    .lobby-card-name {
        font-size: 0.72rem !important;
    }
    .lobby-card-description {
        font-size: 0.5rem !important;
        -webkit-line-clamp: 2 !important;
    }
}


/* --- FIX MOBILE OVERFLOW & VERTICAL BUTTONS IN LAUNCH SCREEN --- */
@media (max-width: 768px) {
    /* 1. Prevent container clipping and horizontal overflow */
    .leaderboard-launch-section,
    #tabPlay .leaderboard-launch-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* 2. Preset 10/25/50 buttons in a clean 3-column row */
    .leaderboard-launch-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .leaderboard-launch-btn {
        min-width: 0 !important;
        width: 100% !important;
        padding: 12px 4px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .leaderboard-launch-count {
        font-size: 1.6rem !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }

    .leaderboard-launch-label {
        font-size: 0.58rem !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
    }

    /* 3. Custom stepper row */
    .leaderboard-launch-custom-row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 10px !important;
        gap: 8px !important;
        margin: 0 auto 16px auto !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .leaderboard-launch-custom-label {
        font-size: 0.75rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    .launch-stepper-control {
        padding: 2px 4px !important;
    }

    .launch-step-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .leaderboard-launch-custom-input {
        width: 50px !important;
        font-size: 0.95rem !important;
    }

    .leaderboard-launch-custom-btn {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* 4. Progressive toggle & Guessed badges fix */
    .progressive-mode-toggle {
        padding: 12px 12px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .progressive-toggle-label {
        width: 100% !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .progressive-toggle-title {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    .progressive-toggle-hint {
        font-size: 0.62rem !important;
    }

    /* Guessed badge: full width, horizontal row, buttons NEVER wrap vertically */
    .progressive-guessed-badge {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }

    .progressive-guessed-badge .guessed-info {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .progressive-guessed-badge .guessed-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    .progressive-view-btn,
    .progressive-reset-btn {
        padding: 6px 10px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        writing-mode: horizontal-tb !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        height: 32px !important;
        min-width: fit-content !important;
        width: auto !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   FIX: PROGRESSIVE GUESSED BADGE COMPACT LAYOUT FOR MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    .progressive-mode-toggle {
        padding: 10px 10px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .progressive-toggle-label {
        width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .progressive-toggle-title {
        font-size: 0.76rem !important;
        line-height: 1.2 !important;
    }

    .progressive-toggle-hint {
        font-size: 0.58rem !important;
    }

    /* Плашка отгаданных: компактная, без распирания за край */
    .progressive-guessed-badge {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        border-radius: 10px !important;
    }

    .progressive-guessed-badge .guessed-info {
        font-size: 0.68rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
    }

    .progressive-guessed-badge .guessed-info i {
        font-size: 0.72rem !important;
    }

    .progressive-guessed-badge .guessed-info strong {
        font-size: 0.82rem !important;
    }

    .progressive-guessed-badge .guessed-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    .progressive-view-btn,
    .progressive-reset-btn {
        padding: 5px 7px !important;
        font-size: 0.58rem !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        writing-mode: horizontal-tb !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        height: 28px !important;
        min-width: 0 !important;
        width: auto !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        border-radius: 7px !important;
        letter-spacing: 0 !important;
    }

    .progressive-view-btn i,
    .progressive-reset-btn i {
        font-size: 0.62rem !important;
    }
}

@media (max-width: 380px) {
    /* На особо узких экранах переносим действия на вторую строку для идеального комфорта */
    .progressive-guessed-badge {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .progressive-guessed-badge .guessed-info {
        justify-content: center !important;
    }

    .progressive-guessed-badge .guessed-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .progressive-view-btn,
    .progressive-reset-btn {
        flex: 1 1 0 !important;
        height: 28px !important;
    }
}


/* ==========================================================================
   FIX: DEFENSE MULTIPLIER ROWS OVERFLOW (POKEDEX / DATABASE)
   ========================================================================== */
@media (max-width: 768px) {
    .db-def-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        padding: 5px 6px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Метка не ограничена узким max-width и не сжимает текст на кнопку */
    .db-def-row-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 62% !important;
    }

    /* Бейдж: теперь достаточно широкий и однострочный для 0.25x */
    .db-def-badge {
        min-width: 46px !important;
        width: auto !important;
        max-width: 52px !important;
        font-size: 0.52rem !important;
        padding: 2px 4px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Название резиста не налезает на кнопку */
    .db-def-title {
        font-size: 0.58rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
        letter-spacing: 0 !important;
    }

    /* Обёртка кнопки занимает оставшееся место справа без наложения */
    .db-def-dropdown-wrapper {
        flex: 1 1 auto !important;
        min-width: 70px !important;
        max-width: 38% !important;
        position: relative !important;
    }

    .db-def-btn {
        width: 100% !important;
        padding: 3px 6px !important;
        font-size: 0.56rem !important;
        min-height: 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    .db-def-btn-text {
        font-size: 0.56rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
    }

    .db-def-chevron {
        font-size: 0.52rem !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 380px) {
    .db-def-row-label {
        max-width: 60% !important;
        gap: 4px !important;
    }

    .db-def-badge {
        min-width: 42px !important;
        font-size: 0.48rem !important;
        padding: 2px 3px !important;
    }

    .db-def-title {
        font-size: 0.52rem !important;
    }

    .db-def-dropdown-wrapper {
        max-width: 40% !important;
        min-width: 60px !important;
    }

    .db-def-btn {
        padding: 2px 4px !important;
    }

    .db-def-btn-text {
        font-size: 0.52rem !important;
    }
}


/* ==========================================================================
   FIX: TYPE EFFECTIVENESS MATRIX TABLE (18x18) FOR MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Контейнер матрицы: полная ширина, безопасные отступы */
    .db-type-matrix-container,
    .db-nature-matrix-container {
        padding: 10px 8px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Легенда: аккуратный перенос и читаемый размер */
    .db-type-matrix-legend {
        gap: 8px 12px !important;
        margin-bottom: 10px !important;
        font-size: 0.62rem !important;
        width: 100% !important;
    }

    .db-type-matrix-legend .legend-item {
        gap: 5px !important;
        font-size: 0.62rem !important;
    }

    .legend-box {
        width: 22px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
        border-radius: 4px !important;
    }

    .db-matrix-dl-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        justify-content: center !important;
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }

    /* 3. Горизонтальный скролл контейнера */
    .db-matrix-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        max-height: 72vh !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        position: relative !important;
    }

    /* 4. Таблица: ОБЯЗАТЕЛЬНО display: table (не block!), чтобы работали thead и sticky */
    .db-type-matrix-table,
    .db-nature-matrix-table {
        display: table !important;
        width: max-content !important;
        min-width: 580px !important;
        border-collapse: separate !important;
        border-spacing: 2px !important;
    }

    /* 5. Липкий верхний левый угол */
    .db-matrix-corner {
        position: sticky !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 20 !important;
        background: #0f172a !important;
        min-width: 82px !important;
        max-width: 82px !important;
        padding: 4px 6px !important;
        font-size: 0.52rem !important;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) !important;
    }

    .corner-atk, .corner-def {
        font-size: 0.52rem !important;
        line-height: 1.1 !important;
    }

    /* 6. Липкая верхняя строка колонок (типы защиты) */
    .db-type-matrix-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #0f172a !important;
    }

    .db-matrix-th-col {
        padding: 2px !important;
    }

    .db-matrix-header-badge {
        width: 25px !important;
        height: 25px !important;
        border-radius: 6px !important;
    }

    .db-matrix-hdr-icon {
        width: 15px !important;
        height: 15px !important;
    }

    /* 7. Липкий левый столбец строк (атакующие типы) */
    .db-matrix-th-row {
        position: sticky !important;
        left: 0 !important;
        z-index: 9 !important;
        background: #111827 !important;
        padding: 3px 6px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        font-size: 0.58rem !important;
        border-radius: 6px !important;
        gap: 4px !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3) !important;
        box-sizing: border-box !important;
    }

    .db-matrix-row-icon {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .db-matrix-row-text {
        font-size: 0.54rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
    }

    /* 8. Ячейки множителей (компактные квадраты 26x26) */
    .db-matrix-cell {
        height: 25px !important;
        min-width: 25px !important;
        width: 25px !important;
        font-size: 0.6rem !important;
        border-radius: 4px !important;
        padding: 0 !important;
    }

    .db-matrix-cell:hover {
        transform: none !important;
    }
}


/* Стили для десктопа: значок слева, тег справа, без сжатия и без статуса Выбрать/выбран */
.lobby-card-top {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
}

.lobby-card-header-left {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
}

.lobby-card-icon-frame {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
}

.lobby-card-tag {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.lobby-card-status {
    display: none !important;
}