*{box-sizing:border-box; margin:0; padding:0;}
html{ touch-action: pan-x pan-y; -ms-touch-action: pan-x pan-y; }
:root{
    --card:#072e2c; --border:rgba(255,255,255,.09); --gold-border:rgba(251,191,36,.45);
    --gold:#fbbf24; --text:#fff; --muted:#9fb8b5;
}
body{
    min-height:100vh; font-family:'Hind Siliguri', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--text); padding-bottom:30px;
    touch-action: pan-x pan-y; -ms-touch-action: pan-x pan-y;
    /* ✅ newhome.php-এর সাথে হুবহু মেলানো ব্যাকগ্রাউন্ড */
    background:
        radial-gradient(circle at 15% 0%, rgba(16,185,129,.10), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(251,191,36,.08), transparent 45%),
        linear-gradient(180deg, #01201d 0%, #011412 60%, #010c0b 100%);
}
::-webkit-scrollbar{ display:none; }

/* Header */
.top{ display:flex; align-items:center; gap:12px; padding:18px 16px; position:sticky; top:0; z-index:20;
    background:rgba(3,36,36,.97); border-bottom:1px solid var(--border); }
.top a{ width:42px; height:42px; border-radius:13px; background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; font-size:19px; }
.top h1{ flex:1; text-align:center; font-size:24px; font-weight:900; padding-right:42px; letter-spacing:.3px; }

/* Provider Tabs */
.tabs-wrap{ padding:18px 16px 8px; overflow-x:auto; white-space:nowrap; }
.tab-btn{ display:inline-flex; align-items:center; padding:12px 24px; border-radius:24px; font-size:17px; font-weight:900; letter-spacing:.4px;
    background:var(--card); border:1px solid var(--border); color:#e2f2f0; margin-right:10px; cursor:pointer;
    transition:.2s; position:relative; }
.tab-btn.active{ background:linear-gradient(135deg,#fbbf24,#d97706); color:#1a1400; border-color:transparent;
    box-shadow:0 6px 16px -4px rgba(251,191,36,.5); }
.tab-btn:active{ transform:scale(.94); }

/* Search Row */
.search-row{ display:flex; gap:10px; padding:16px; }
.search-box{ flex:1; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border);
    border-radius:17px; padding:14px 17px; }
.search-box input{ flex:1; background:none; border:none; outline:none; color:#fff; font-size:17px; font-weight:600; }
.search-box input::placeholder{ color:var(--muted); }
.search-box i{ color:var(--muted); font-size:17px; }
.icon-toggle{ width:52px; height:52px; border-radius:17px; background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; flex-shrink:0;
    transition:.2s; font-size:19px; }
.icon-toggle.active{ background:linear-gradient(135deg,#fbbf24,#d97706); color:#1a1400; border-color:transparent; }

/* Grid — ✅ সব স্ক্রিন সাইজেই সবসময় ৩টা করে গেম এক সারিতে */
.grid-wrap{ padding:12px 16px; }
.games-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.game-card{ background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; position:relative;
    cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; animation:fadeIn .3s ease both;
    box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.game-card:active{ transform:scale(.95); }
@media (hover:hover){ .game-card:hover{ transform:translateY(-4px); box-shadow: 0 12px 24px rgba(251,191,36,.18); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.game-img-wrap{ position:relative; width:100%; aspect-ratio:0.85/1; overflow:hidden; background:#000; }
.game-img-wrap img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease, transform .3s ease; }
.game-img-wrap img.loaded{ opacity:1; }
@media (hover:hover){ .game-card:hover .game-img-wrap img{ transform:scale(1.08); } }

.provider-badge{ position:absolute; bottom:8px; left:8px;
    color:#1a1400; background:linear-gradient(135deg,#fde68a,#fbbf24); font-size:14px; font-weight:900;
    -webkit-text-stroke: 0.4px #1a1400;
    padding:5px 11px; border-radius:9px; letter-spacing:.6px; text-transform:uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.fav-btn{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.6);
    display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; transition:.15s; border:1px solid rgba(255,255,255,.15); }
.fav-btn.active i{ color:#ff4d6d; }
.fav-btn:not(.active) i{ color:#fff; }
.fav-btn:active{ transform:scale(1.3); }
.fav-btn i{ font-size:15px; }

.game-name{ padding:10px 12px 12px; font-size:14.5px; font-weight:900; color:#ffffff; letter-spacing:.1px;
    line-height:1.3; text-align:center;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    min-height:38px; }

.empty-state{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); font-size:16px; }
.empty-state i{ font-size:40px; margin-bottom:14px; display:block; color:var(--border); }

.load-more-btn{ display:block; width:calc(100% - 32px); margin:20px auto 0; padding:16px; border-radius:16px;
    background:var(--card); border:1px solid var(--border); color:var(--gold); font-weight:800; font-size:16px; cursor:pointer; }

/* Skeleton */
.skeleton{ background:linear-gradient(90deg, #072e2c 25%, #0d3d3a 50%, #072e2c 75%); background-size:200% 100%;
    animation:shimmer 1.3s ease-in-out infinite; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }