/* ═══════════════════════════════════════════════════════
   LUDORY5 — Mobile & Performance CSS
   Loaded on all pages via <link> in every header
═══════════════════════════════════════════════════════ */

/* ── Base mobile resets ─────────────────────────────── */
*,*::before,*::after{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{max-width:100%;height:auto;display:block}
a{-webkit-tap-highlight-color:transparent}

/* ═══════════════════════════════════════════════════════
   TABLET  ≤ 1024px
═══════════════════════════════════════════════════════ */
@media(max-width:1024px){
    /* Homepage grids: 6 → 4 columns */
    .grid-6x2{
        grid-template-columns:repeat(4,1fr);
        grid-template-rows:repeat(2,130px);
        max-height:272px;
    }
    .card{height:130px}

    /* Featured: 4 → 2 columns */
    .featured-grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(4,170px);
    }
    .featured-card{height:170px}
    .featured-desc-strip{grid-template-columns:repeat(2,1fr)}

    /* Section page grid */
    .grid{grid-template-columns:repeat(4,1fr)}

    /* Game page: stack layout */
    .game-layout{flex-direction:column}
    .game-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:12px}
    .related-grid{grid-template-columns:repeat(4,1fr)}

    /* Footer */
    .footer-links-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════
   MOBILE  ≤ 768px
═══════════════════════════════════════════════════════ */
@media(max-width:768px){

    /* ── HEADER ── */
    .header{padding:0 14px;height:56px}
    .logo img{height:36px}
    .site-title{font-size:13px;letter-spacing:.5px;margin-left:10px;padding-left:10px}
    .search-icon{font-size:20px}
    .back-btn{font-size:12px;padding:6px 12px}

    /* ── SECTIONS ── */
    .section{padding:16px 12px 6px}
    .section-title{font-size:15px}
    .section-title .icon{font-size:18px}
    .arrow-btn{width:34px;height:34px;font-size:15px}

    /* Homepage grids: 6 → 3 columns */
    .grid-6x2{
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:repeat(2,110px);
        max-height:232px;
        gap:8px;
    }
    .card{height:110px;border-radius:8px}
    .card-title{font-size:10px;padding:4px 6px}
    .badge{font-size:8px;padding:2px 5px;top:5px;left:5px}

    /* Featured: 4 → 2 columns */
    .featured-section{padding:16px 12px 6px}
    .featured-grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(4,130px);
        gap:8px;
    }
    .featured-card{height:130px;border-radius:10px}
    .featured-card-title{font-size:12px}
    .featured-badge{font-size:8px;padding:2px 8px}
    .featured-desc-strip{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
    .featured-desc-card{padding:10px 12px}
    .desc-game-name{font-size:11px}
    .desc-why{font-size:11px}

    /* Section page */
    .grid{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
        padding:10px 12px;
    }
    .page-title{padding:16px 12px 6px}
    .page-title h1{font-size:18px}
    .pagination{gap:6px;padding:20px 12px}
    .page-btn{min-width:36px;height:36px;font-size:13px}

    /* Game page */
    .game-layout{padding:10px 12px;gap:12px;flex-direction:column}
    .player-wrap{border-radius:10px}
    .play-circle{width:70px;height:70px}
    .play-circle::after{font-size:26px;margin-left:5px}
    .play-label{font-size:12px;padding:4px 14px}
    .game-title-bar{font-size:15px}
    .fullscreen-btn{font-size:11px;padding:6px 12px}
    .game-desc{font-size:12px}
    .game-sidebar{width:100%;flex-direction:column}
    .related-grid{grid-template-columns:repeat(3,1fr)}
    .related-card{height:80px}

    /* Footer */
    .footer-top{flex-direction:column;gap:28px;padding:32px 20px 24px}
    .footer-brand{width:100%}
    .footer-logo{width:120px}
    .footer-links-grid{grid-template-columns:repeat(2,1fr);gap:20px}
    .footer-stats{padding:16px 20px;flex-wrap:wrap;gap:0}
    .stat-item{flex:1 0 50%;padding:8px 0}
    .stat-divider{display:none}
    .stat-num{font-size:18px}
    .footer-bottom{flex-direction:column;gap:6px;text-align:center;padding:16px 20px}

    /* Search popup */
    #searchResults{grid-template-columns:repeat(3,1fr)}
    .search-box input{font-size:14px;padding:10px 12px}

    /* Ad units */
    .ad-header-banner{min-height:50px}
    .sidebar-ad-box{min-height:80px}
    .game-sidebar .sidebar-ad-box:nth-child(2){display:none} /* hide 2nd sidebar ad on mobile */
}

/* ═══════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 480px
═══════════════════════════════════════════════════════ */
@media(max-width:480px){

    /* Header: hide LUDORY5 text, more room */
    .site-title{display:none}
    .header{padding:0 12px;height:52px}
    .logo img{height:32px}

    /* Grids: 2 columns */
    .grid-6x2{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(2,100px);
        max-height:208px;
        gap:6px;
    }
    .card{height:100px}
    .card-title{font-size:9px}

    /* Featured: 2 columns */
    .featured-grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(4,110px);
        gap:6px;
    }
    .featured-card{height:110px}
    .featured-desc-strip{grid-template-columns:1fr 1fr;gap:6px}

    /* Section page */
    .grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}
    .page-title h1{font-size:16px}

    /* Game page */
    .related-grid{grid-template-columns:repeat(2,1fr)}
    .game-layout{padding:8px}

    /* Search */
    #searchResults{grid-template-columns:repeat(2,1fr)}

    /* Footer simplified */
    .footer-links-grid{grid-template-columns:1fr 1fr}
    .footer-col a{font-size:12px}

    /* Section title smaller */
    .section-title{font-size:13px}
    .section-title .icon{font-size:16px}
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE — Reduce animations on low-end devices
═══════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── Touch-friendly tap targets ── */
@media(hover:none){
    .card:hover{transform:none;box-shadow:none}
    .card:active{transform:scale(0.97);opacity:.9}
    .featured-card:hover{transform:none;box-shadow:none}
    .featured-card:active{transform:scale(0.97)}
    .arrow-btn.active:hover{transform:none}
    .page-btn:hover{transform:none}
}

/* ── Smooth scrolling on iOS ── */
html{-webkit-overflow-scrolling:touch}

/* ── Prevent font size inflation on iOS ── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}