/* =========================================================
   mobile.css — FINALISSIMA LEAGUE
   النسخة المحسّنة للموبايل (v3)
========================================================= */

@media(max-width:480px){

    /* ===== BODY ===== */
    body{
        padding:0 6px 90px !important;
        max-width:100vw !important;
        overflow-x:hidden !important;
    }

    /* ===== BANNER CAROUSEL ===== */
    .text-carousel-wrapper{
        padding:0 4px !important;
        margin:8px auto 6px !important;
    }

    .text-carousel{
        border-radius:14px !important;
        border-width:2px !important;
        aspect-ratio:3/1 !important;
    }

    .text-carousel-dots{
        margin-top:6px !important;
        gap:6px !important;
    }

    .text-dot{
        width:7px !important;
        height:7px !important;
    }

    .text-dot.active{
        width:20px !important;
    }

    /* ===== ROUND SELECTOR ===== */
    .round-selector-row{
        margin:6px 0 2px !important;
        padding:0 4px !important;
        gap:6px !important;
    }

    .round-select-pill{
        font-size:12px !important;
        padding:7px 28px 7px 12px !important;
        min-width:110px !important;
        height:34px !important;
    }

    .settings-btn-inline,
    .download-btn{
        width:38px !important;
        height:34px !important;
        font-size:17px !important;
        border-radius:10px !important;
    }

    .download-btn svg{
        width:15px !important;
        height:15px !important;
    }

    /* ===== HEADER / NAV ===== */
    .round-nav-container{
        gap:8px !important;
    }

    .round-indicator{
        font-size:16px !important;
        padding:5px 12px !important;
        letter-spacing:0.5px !important;
    }

    .nav-arrow-btn{
        width:34px !important;
        height:34px !important;
        font-size:18px !important;
    }

    /* ===== MAIN CONTAINER ===== */
    .main-container{
        padding:0 !important;
    }

    /* ===== FIXTURES ===== */
    #captureFixtures{
        padding:0 !important;
        border-radius:12px !important;
        border-width:2px !important;
        overflow:hidden !important;
    }

    .fixtures-header-box{
        padding:10px 6px !important;
        margin-bottom:0 !important;
        border-radius:0 !important;
    }

    .fixtures-header-title{
        font-size:14px !important;
        letter-spacing:1px !important;
    }

    #fixturesList{
        padding:6px 6px !important;
    }

    .fixture-row{
        padding:8px 4px !important;
        margin-bottom:2px !important;
        border-radius:6px !important;
        gap:2px !important;
        min-height:44px !important;
    }

    .team-box{
        font-size:11px !important;
        gap:3px !important;
        letter-spacing:0 !important;
        font-weight:900 !important;
    }

    .team-box.home > span:first-child{
        max-width:70px !important;
    }

    .team-box.away > span:last-child{
        max-width:70px !important;
    }

    .logo-24{
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        min-height:22px !important;
        max-width:22px !important;
        max-height:22px !important;
        margin:0 3px !important;
    }

    .match-score-center{
        width:110px !important;
        min-width:110px !important;
        padding:6px 4px !important;
        gap:3px !important;
        border-radius:4px !important;
    }

    .score-display{
        font-size:13px !important;
        letter-spacing:0 !important;
        font-weight:900 !important;
    }

    .vs-text{
        font-size:11px !important;
    }

    .score-input{
        width:32px !important;
        height:24px !important;
        font-size:13px !important;
    }

    /* ===== STANDINGS ===== */
    #captureStandings{
        border-width:2px !important;
        border-radius:12px !important;
    }

    #captureStandings::before,
    #captureStandings::after{
        width:36px !important;
    }

    #captureStandings::after{
        background-size:22px 22px !important;
        background-position:center 10px !important;
    }

    .standings-content-area{
        padding:6px 4px 6px 42px !important;
    }

    th{
        font-size:9px !important;
        padding:6px 2px !important;
        font-weight:900 !important;
        letter-spacing:0.3px !important;
    }

    td{
        height:36px !important;
        max-height:36px !important;
        padding:0 2px !important;
    }

    .team-cell{
        font-size:11px !important;
        gap:3px !important;
        padding:0 3px 0 0 !important;
        font-weight:900 !important;
        letter-spacing:0 !important;
    }

    .logo-20{
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        min-height:20px !important;
        max-width:20px !important;
        max-height:20px !important;
        flex-shrink:0 !important;
    }

    .pos-indicator-img{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        min-height:16px !important;
        max-width:16px !important;
        max-height:16px !important;
    }

    .pos-container{
        gap:2px !important;
    }

    .pos-number{
        font-size:11px !important;
        min-width:14px !important;
        font-weight:900 !important;
    }

    .stat-number{
        font-size:11px !important;
        font-weight:900 !important;
    }

    .form-cell{
        gap:1px !important;
    }

    .form-letter{
        width:10px !important;
        font-size:9px !important;
    }

    /* ⭐ نضبط الأعمدة عشان الأسماء الكاملة */
    .col-pos{width:12% !important}
    .col-club{width:48% !important}
    .col-gf{width:15% !important}
    .col-pts{width:12% !important}
    .col-form{width:13% !important}

    /* ===== EDIT PANEL ===== */
    .edit-panel{
        padding:8px !important;
        gap:6px !important;
        margin-bottom:8px !important;
    }

    .edit-action-btn{
        font-size:11px !important;
        padding:10px 12px !important;
        min-width:80px !important;
    }

    /* ===== DOWNLOAD MENU ===== */
    .download-menu{
        min-width:130px !important;
    }

    .download-menu-item{
        padding:8px 10px !important;
        font-size:11px !important;
    }

    /* ===== SETTINGS MODAL ===== */
    .settings-modal{
        padding:6px !important;
    }

    .settings-modal-box{
        height:95vh !important;
        border-radius:14px !important;
        border-width:2px !important;
    }

    .settings-header{
        padding:12px 14px !important;
        font-size:14px !important;
    }

    .settings-close{
        width:28px !important;
        height:28px !important;
        font-size:13px !important;
    }

    .settings-body{
        padding:10px !important;
        gap:6px !important;
    }

    .settings-item{
        padding:12px 14px !important;
        font-size:12px !important;
        gap:10px !important;
    }

    .settings-item .si-icon{
        font-size:17px !important;
        width:24px !important;
    }

    .settings-hint{
        font-size:10px !important;
        padding:8px 4px !important;
    }

    /* ===== LOCKS ===== */
    .lock-item{
        padding:10px 12px !important;
        font-size:11px !important;
    }

    .lock-item-icon{
        font-size:17px !important;
        width:22px !important;
    }

    .lock-item-btn{
        padding:7px 12px !important;
        font-size:10px !important;
        min-width:85px !important;
    }

    .maint-all-btn,
    .maint-open-btn{
        padding:12px 14px !important;
        font-size:12px !important;
    }

    /* ===== MATCHWEEK MANAGER ===== */
    .mwm-round-row{
        padding:10px 12px !important;
    }

    .mwm-round-num{
        font-size:13px !important;
    }

    .mwm-round-meta{
        font-size:9px !important;
    }

    .mwm-btn{
        width:36px !important;
        height:36px !important;
        font-size:15px !important;
    }

    .mwm-editor-title{
        font-size:17px !important;
    }

    .mwm-match-card{
        padding:8px !important;
        gap:5px !important;
    }

    .mwm-team-pick{
        min-height:64px !important;
        padding:6px 4px !important;
    }

    .mwm-team-logo{
        width:28px !important;
        height:28px !important;
    }

    .mwm-team-name{
        font-size:10px !important;
    }

    .mwm-vs-badge{
        width:32px !important;
        height:32px !important;
        font-size:11px !important;
    }

    .mwm-add-btn,
    .mwm-save-btn{
        padding:12px !important;
        font-size:13px !important;
    }

    /* ===== PICKER ===== */
    .mwm-picker-list{
        grid-template-columns:1fr 1fr !important;
    }

    .mwm-picker-item{
        min-height:72px !important;
        padding:8px 4px !important;
    }

    .mwm-picker-item img{
        width:32px !important;
        height:32px !important;
    }

    .mwm-picker-item-name{
        font-size:9px !important;
    }

    /* ===== MAINTENANCE ===== */
    #sectionMaintenance .maint-box{
        padding:28px 18px !important;
    }

    #sectionMaintenance h2{
        font-size:18px !important;
    }

    #sectionMaintenance p{
        font-size:12px !important;
    }

    /* ===== TOAST ===== */
    #toast{
        padding:10px 20px !important;
        font-size:13px !important;
        bottom:80px !important;
    }

    /* ===== ERROR BOX ===== */
    #errorBox{
        padding:8px 12px !important;
        font-size:11px !important;
    }

    /* ===== H2H (Compare) ===== */
    .h2h-intro{
        padding:14px !important;
        border-radius:12px !important;
    }

    .h2h-intro-icon i{
        font-size:34px !important;
    }

    .h2h-intro-title{
        font-size:15px !important;
    }

    .h2h-intro-sub{
        font-size:10px !important;
    }

    .h2h-slots{
        gap:6px !important;
        margin-bottom:14px !important;
    }

    .h2h-slot{
        min-height:100px !important;
        padding:12px 6px !important;
        border-radius:12px !important;
    }

    .h2h-slot-badge{
        width:22px !important;
        height:22px !important;
        font-size:11px !important;
        top:-6px !important;
        right:-6px !important;
    }

    .h2h-slot-plus i{
        font-size:26px !important;
    }

    .h2h-slot-empty{
        font-size:10px !important;
    }

    .h2h-slot-name{
        font-size:11px !important;
    }

    .h2h-slot-nation{
        font-size:9px !important;
    }

    .h2h-logo-slot{
        width:40px !important;
        height:40px !important;
    }

    .h2h-logo-result{
        width:42px !important;
        height:42px !important;
    }

    .h2h-vs{
        font-size:13px !important;
        padding:7px 9px !important;
    }

    .h2h-hint{
        font-size:11px !important;
        padding:26px 14px !important;
    }

    .h2h-results{
        padding:10px !important;
        border-radius:14px !important;
        border-width:2px !important;
    }

    .h2h-results-name{
        font-size:11px !important;
    }

    .h2h-results-team{
        font-size:8px !important;
    }

    .h2h-results-vs{
        font-size:11px !important;
        padding:5px 8px !important;
    }

    .h2h-overall-diff{
        font-size:11px !important;
        padding:9px !important;
    }

    .h2h-row{
        padding:8px 4px !important;
        gap:4px !important;
    }

    .h2h-row-val{
        font-size:11px !important;
        padding:5px 4px !important;
    }

    .h2h-row-icon{
        font-size:16px !important;
    }

    .h2h-row-text{
        font-size:8px !important;
    }

    .h2h-chart-title{
        font-size:11px !important;
    }

    .h2h-chart-wrap{
        height:180px !important;
    }

    .h2h-download-btn,
    .h2h-swap-btn{
        padding:11px !important;
        font-size:12px !important;
    }

    /* ===== DOWNLOAD MODAL (Image) ===== */
    #dlImageModal{
        padding:10px !important;
    }

    #dlImageModal > div:first-child{
        font-size:11px !important;
        padding:6px 10px !important;
        max-width:100% !important;
    }

    #dlDirectBtn,
    #dlCloseBtn{
        padding:11px 20px !important;
        font-size:13px !important;
    }

    /* ===== STATS TABS ===== */
    .stats-tabs{
        gap:5px !important;
        margin:10px 0 !important;
        padding:0 4px !important;
    }

    .stats-tab-btn{
        padding:7px 12px !important;
        font-size:9px !important;
        letter-spacing:0.5px !important;
    }

    /* ===== STATS KPI ===== */
    .stats-kpi-grid{
        gap:6px !important;
    }

    .stats-kpi-card{
        padding:12px 8px !important;
        border-radius:12px !important;
    }

    .stats-kpi-value{
        font-size:22px !important;
    }

    .stats-kpi-label{
        font-size:9px !important;
    }

    /* ===== STATS ROWS ===== */
    .stats-row{
        grid-template-columns:28px 26px 1fr 50px !important;
        padding:8px 4px !important;
        gap:6px !important;
        min-height:46px !important;
    }

    .stats-rank{
        width:24px !important;
        height:24px !important;
        font-size:11px !important;
    }

    .stats-row-logo{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        min-height:26px !important;
    }

    .stats-row-entry{
        font-size:11px !important;
    }

    .stats-row-player{
        font-size:9px !important;
    }

    .stats-row-value-num{
        font-size:14px !important;
    }

    .stats-row-value-label{
        font-size:7px !important;
    }

    /* ===== MONTH TABS ===== */
    .month-tabs{
        gap:5px !important;
        margin:10px 0 !important;
        padding:0 4px !important;
    }

    .month-tab-btn{
        padding:7px 16px !important;
        font-size:10px !important;
        letter-spacing:0.5px !important;
    }

    /* ===== SEARCH ===== */
    .stats-search-input{
        padding:10px 14px !important;
        font-size:12px !important;
    }

    /* ===== PROFILE ===== */
    .stats-profile-card{
        padding:18px 12px !important;
        border-radius:16px !important;
    }

    .stats-profile-entry{
        font-size:16px !important;
    }

    .stats-profile-shirt{
        width:70px !important;
        height:70px !important;
    }

    .stats-stat-value{
        font-size:17px !important;
    }

    /* ===== COUNTDOWN ===== */
    .cd-wrapper{
        padding:14px 10px !important;
        gap:10px !important;
    }

    .cd-label{
        font-size:11px !important;
    }

    .cd-unit{
        min-width:44px !important;
    }

    .cd-num{
        font-size:20px !important;
    }

    .cd-text{
        font-size:8px !important;
    }

    .cd-sep{
        font-size:16px !important;
    }

    .cd-hint{
        font-size:10px !important;
    }

    /* ===== ROUND HIDDEN ===== */
    .round-hidden-msg{
        padding:40px 14px !important;
    }

    .round-hidden-icon{
        font-size:38px !important;
    }

    .round-hidden-title{
        font-size:15px !important;
    }

    .round-hidden-sub{
        font-size:11px !important;
    }

    /* ===== TOTW ===== */
    .totw-tabs{
        margin-bottom:8px !important;
    }

    .totw-tab-btn{
        padding:5px 16px !important;
        font-size:10px !important;
    }

    .totw-pitch{
        border-width:2px !important;
        border-radius:14px !important;
    }

    .totw-pitch-title{
        font-size:10px !important;
        letter-spacing:2px !important;
        padding:4px 22px !important;
    }

    .totw-card{
        width:46px !important;
    }

    .totw-card .tc-shirt{
        width:46px !important;
        height:40px !important;
        padding:3px 3px 0 3px !important;
    }

    .totw-card .tc-name{
        width:46px !important;
        height:11px !important;
        font-size:6px !important;
        margin-top:-5px !important;
    }

    .totw-card .tc-points{
        width:46px !important;
        height:11px !important;
        font-size:7px !important;
    }

    /* ===== CLUBS (Nations) ===== */
    .club-item{
        padding:9px 11px !important;
        border-radius:11px !important;
        gap:8px !important;
    }

    .club-item-logo{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
    }

    .club-item-name{
        font-size:12px !important;
    }

    .club-item-count{
        font-size:9px !important;
    }

    .club-item-arrow{
        font-size:17px !important;
    }

    /* ===== CP Modal ===== */
    .cp-modal-box{
        border-radius:14px !important;
    }

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

    .cp-header-logo{
        width:38px !important;
        height:38px !important;
    }

    .cp-header-title{
        font-size:13px !important;
    }

    .cp-header-sub{
        font-size:9px !important;
    }

    .cp-list-header,
    .cp-player-row{
        grid-template-columns:26px 26px 1fr 48px !important;
        padding:7px 10px !important;
        gap:5px !important;
    }

    .cp-name{
        font-size:11px !important;
    }

    .cp-player{
        font-size:9px !important;
    }

    .cp-points{
        font-size:13px !important;
    }

    /* ===== CHARTS ===== */
    .chart-card{
        padding:10px 8px !important;
        border-radius:14px !important;
    }

    .chart-title{
        font-size:11px !important;
    }

    .chart-sub{
        font-size:8px !important;
        padding:2px 5px !important;
    }

    .chart-wrap{
        height:200px !important;
    }

    .chart-wrap.chart-tall{
        height:300px !important;
    }

    /* ===== TRENDS ===== */
    .trend-row{
        grid-template-columns:32px 1fr 52px !important;
        padding:8px 4px !important;
        gap:6px !important;
        min-height:48px !important;
    }

    .trend-row-logo{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        min-height:32px !important;
    }

    .trend-row-entry{
        font-size:11px !important;
    }

    .trend-row-player{
        font-size:9px !important;
    }

    .trend-row-diff{
        font-size:12px !important;
        min-width:46px !important;
        padding:4px 6px !important;
    }
}

/* ===== VERY SMALL SCREENS ===== */
@media(max-width:360px){

    .text-carousel{
        aspect-ratio:2.8/1 !important;
    }

    .team-box{
        font-size:10px !important;
    }

    .team-box.home > span:first-child{
        max-width:55px !important;
    }

    .team-box.away > span:last-child{
        max-width:55px !important;
    }

    .match-score-center{
        width:95px !important;
        min-width:95px !important;
    }

    .score-display{
        font-size:12px !important;
    }

    .team-cell{
        font-size:10px !important;
    }

    .h2h-logo-slot{
        width:36px !important;
        height:36px !important;
    }

    .stats-tab-btn{
        padding:6px 9px !important;
        font-size:8px !important;
    }

    .cd-num{
        font-size:18px !important;
    }

    .cd-unit{
        min-width:38px !important;
    }
}