/* ═══════════════════════════════════════════
   FAV365 — Dark Navy + Pink
═══════════════════════════════════════════ */
:root {
  --bg:    #0e1120;
  --bg2:   #131726;
  --bg3:   #1a1f35;
  --bg4:   #202540;
  --pk:    #ff2d6e;
  --pk2:   #e0235d;
  --pk-gl: rgba(255,45,110,.22);
  --t1:    #ffffff;
  --t2:    #9aa0bc;
  --t3:    #545a7a;
  --bd:    rgba(255,255,255,.07);
  --r:     10px;
  --r2:    8px;
  --nav-h: 54px;
  --tr:    .18s ease;
}

/* ── RESET ───────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--t1);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
main { flex:1; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:0; outline:0; background:none; cursor:pointer; }
ul { list-style:none; }
.container { max-width:1280px; margin:0 auto; padding:0 16px; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 16px;
  border-radius:var(--r); font-size:13px; font-weight:700;
  white-space:nowrap; transition:all var(--tr); border:0;
}
.btn-ghost {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:var(--t1);
}
.btn-ghost:hover { background:rgba(255,255,255,.12); }
.btn-pink {
  background:var(--pk); color:#fff;
  box-shadow:0 4px 18px var(--pk-gl);
}
.btn-pink:hover { background:var(--pk2); transform:translateY(-1px); box-shadow:0 6px 24px var(--pk-gl); }
.btn-outline-white {
  background:transparent; color:var(--t2);
  border:1px solid rgba(255,255,255,.15);
  height:40px; padding:0 28px; font-size:13px;
}
.btn-outline-white:hover { border-color:var(--pk); color:var(--pk); }
.btn--full { width:100%; }
.badge {
  display:inline-block; padding:1px 6px;
  border-radius:5px; font-size:9px; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--pk); color:#fff; vertical-align:middle;
}

/* ── LOGO ────────────────────────────────────── */
.logo-text {
  font-size:22px; font-weight:900;
  letter-spacing:-.01em; color:var(--t1);
  white-space:nowrap; line-height:1;
}
.logo-text--lg { font-size:28px; }
.logo-fav { color:var(--pk); }

/* ── HEADER ──────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  background:var(--bg2);
  border-bottom:1px solid var(--bd);
  backdrop-filter:blur(8px);
}
.header-row {
  display:flex; align-items:center;
  height:var(--nav-h);
  padding:0 20px; gap:8px;
}
.brand { flex-shrink:0; }

/* Burger — hidden desktop */
.burger {
  display:none; flex-direction:column; gap:4px;
  align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.06);
  flex-shrink:0;
  transition:background var(--tr);
}
.burger:hover { background:rgba(255,255,255,.1); }
.burger span {
  display:block; width:18px; height:2px;
  background:var(--t1); border-radius:2px;
  transition:transform .3s, opacity .2s;
}

/* Desktop nav */
.main-nav {
  display:flex; align-items:center;
  gap:2px; flex:1; padding:0;
  list-style: none;
}
.main-nav li a {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--t2);
  transition:color var(--tr), background var(--tr);
  white-space:nowrap;
}
.main-nav li a:hover { color:var(--t1); background:rgba(255,255,255,.06); }
.header-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }

/* ── MOBILE DRAWER ───────────────────────────── */
.mob-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:299;
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.mob-overlay.is-open { opacity:1; visibility:visible; }

.mob-drawer {
  position:fixed; top:0; left:0; bottom:0;
  width:min(300px,84vw); z-index:300;
  background:linear-gradient(180deg, var(--bg2) 0%, #0c0f1a 100%);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  transform:translateX(-105%);
  transition:transform .32s cubic-bezier(.4,0,.15,1);
  box-shadow:20px 0 60px rgba(0,0,0,.6);
}
.mob-drawer.is-open { transform:translateX(0); }

.mob-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; flex-shrink:0;
  border-bottom:1px solid var(--bd);
}
.mob-head .logo-text { font-size:22px; }
.mob-close {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:var(--t2);
  transition:all var(--tr);
}
.mob-close:hover { background:rgba(255,45,110,.15); color:var(--pk); }

.mob-nav { flex:1; overflow-y:auto; padding:10px 10px; overscroll-behavior:contain; }
.mob-nav ul { display:flex; flex-direction:column; gap:1px; }
.mob-nav li a {
  display:flex; align-items:center;
  padding:13px 18px; border-radius:10px;
  font-size:15px; font-weight:600; color:var(--t2);
  transition:all .2s ease;
  border-left:3px solid transparent;
}
.mob-nav li a:hover,
.mob-nav li a:active {
  background:rgba(255,255,255,.05);
  color:var(--t1);
  border-left-color:var(--pk);
}

.mob-actions {
  display:flex; flex-direction:column; gap:8px;
  padding:16px 16px 24px;
  border-top:1px solid var(--bd);
  flex-shrink:0;
}
.mob-actions .btn { height:44px; font-size:15px; border-radius:10px; }

/* ── HERO BANNER ─────────────────────────────── */
.hero-section { background:var(--bg); padding:18px 0; overflow:hidden; }
.hero-outer { max-width:1400px; margin:0 auto; padding:0 16px; }
.hero-banner {
  position:relative; overflow:hidden;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.hero-link { display:block; }
.hero-pic {
  width:100%; height:auto;
  aspect-ratio:1280/460;
  object-fit:cover; display:block;
}
.hero-caption {
  position:absolute; top:50%; left:6%;
  transform:translateY(-50%);
  max-width:420px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  border-radius: 10px;
    padding: 14px;
    background-color: #131726;
}
.hero-label {
  font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--pk); margin-bottom:10px;
}
.hero-title {
  font-size:clamp(24px,3.5vw,46px);
  font-weight:900; line-height:1.1;
  margin-bottom:20px;
}
.hero-title span { color:var(--pk); }
.hero-cta { height:44px; padding:0 26px; font-size:14px; }

/* ── FILTER TABS ─────────────────────────────── */
.filter-section { padding:16px 0 0; }
.filter-scroll { overflow-x:auto; scrollbar-width:none; }
.filter-scroll::-webkit-scrollbar { display:none; }
.filter-tabs { display:flex; gap:6px; padding-bottom:2px; width:max-content; }
.ftab {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 16px; border-radius:50px;
  font-size:13px; font-weight:600;
  color:var(--t2); background:var(--bg3);
  border:1px solid rgba(255,255,255,.06);
  transition:all var(--tr); white-space:nowrap;
  cursor:pointer; line-height:1.4;
}
.ftab:hover { color:var(--t1); border-color:rgba(255,255,255,.14); background:var(--bg4); }
.ftab--active { background:var(--pk)!important; color:#fff!important; border-color:var(--pk)!important; box-shadow:0 0 16px var(--pk-gl); }

/* ── GAMES ───────────────────────────────────── */
.games-section { padding:20px 0 28px; }
.games-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.games-title { font-size:18px; font-weight:800; }
.see-all { font-size:12px; font-weight:700; color:var(--pk); border-bottom:1px solid rgba(255,45,110,.3); }
.see-all:hover { color:#ff6b9a; }

.games-scroll {
  overflow:hidden;
  padding-bottom:8px;
}

.games-grid { display:grid; grid-template-columns:repeat(9, 1fr); gap:10px; padding: 10px;}

.game-card {
  position:relative;
  border-radius:var(--r2); overflow:hidden;
  background:var(--bg3); cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.game-badge {
  position:absolute; top:5px; left:5px; z-index:6;
  padding:2px 7px; border-radius:5px;
  font-size:8px; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--pk); color:#fff; line-height:1.4;
}
.game-img { position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--bg3); }
.game-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .35s ease;
}
.game-name {
  padding:5px 6px; font-size:10.5px; font-weight:600;
  color:var(--t2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  text-align:center; background:var(--bg3);
}

/* Hover overlay — only on hover */
.game-hover {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,17,32,.65);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .22s ease;
}
.game-card:hover .game-hover { opacity:1; }
.game-card:hover .game-img img { transform:scale(1.08); filter:brightness(.8); }
.game-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 0 2px var(--pk); z-index:5; }

.ghov-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 14px; height:26px; border-radius:6px;
  font-size:11px; font-weight:800;
  transition:transform .15s, filter .15s;
}
.ghov-btn:hover { transform:scale(1.06); filter:brightness(1.1); }
.ghov-play { background:var(--pk); color:#fff; box-shadow:0 4px 14px var(--pk-gl); }

.show-more-wrap { text-align:center; padding:20px 0 0; }

/* ── CONTENT / RT ────────────────────────────── */
.content-section { padding:28px 0 36px; border-top:1px solid var(--bd); }
.content-section--solo { padding-top:32px; border:0; }
.rt-wrap h1 { font-size:clamp(22px,2.8vw,34px); font-weight:900; margin-bottom:16px; letter-spacing:-.01em; }
.rt-wrap h2 { font-size:clamp(18px,2vw,24px); font-weight:800; margin:24px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--bd); }
.rt-wrap h3 { font-size:16px; font-weight:700; margin:18px 0 8px; }
.rt-wrap p  { font-size:15px; color:var(--t2); line-height:1.8; margin-bottom:12px; }
.rt-wrap ul, .rt-wrap ol { margin:0 0 12px 18px; }
.rt-wrap li { font-size:15px; color:var(--t2); margin-bottom:5px; line-height:1.7; }
.rt-wrap ul li { list-style:disc; }
.rt-wrap ul li::marker { color:var(--pk); }
.rt-wrap ol li { list-style:decimal; }
.rt-wrap strong { color:var(--t1); font-weight:800; }
.rt-wrap blockquote {
  margin:14px 0; padding:12px 16px;
  background:rgba(255,45,110,.07);
  border-left:4px solid var(--pk);
  border-radius:0 var(--r2) var(--r2) 0;
  font-size:14px; color:var(--t2); line-height:1.75;
}
.rt-wrap blockquote p { margin-bottom:0; }
.rt-wrap img { border-radius:var(--r); border:1px solid var(--bd); box-shadow:0 10px 32px rgba(0,0,0,.4); margin:12px 0; }

/* Table */
.table-wrap {
  overflow-x:auto; margin:16px 0 20px;
  border-radius:12px; border:1px solid var(--bd);
  scrollbar-width:thin; scrollbar-color:var(--pk) rgba(255,255,255,.05);
}
.table-wrap::-webkit-scrollbar { height:4px; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--pk); border-radius:999px; }
.rt-wrap table { display:table; width:100%; border-collapse:separate; border-spacing:0; min-width:480px; font-size:14px; }
.rt-wrap table:not(.table-wrap > table) { display:block; overflow-x:auto; border:1px solid var(--bd); border-radius:12px; margin:16px 0; }
.rt-wrap thead th {
  padding:11px 14px; text-align:left;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:rgba(255,255,255,.55); white-space:nowrap;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--bd);
}
.rt-wrap thead tr th:first-child { border-radius:11px 0 0 0; }
.rt-wrap thead tr th:last-child  { border-radius:0 11px 0 0; }
.rt-wrap tbody td {
  padding:11px 14px; font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle; white-space:nowrap; color:var(--t2);
}
.rt-wrap tbody td:first-child { font-weight:700; color:var(--t1); }
.rt-wrap tbody tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.rt-wrap tbody tr:hover td { background:rgba(255,45,110,.06); }
.rt-wrap tbody tr:last-child td { border-bottom:0; }
.rt-wrap tbody tr:last-child td:first-child { border-radius:0 0 0 11px; }
.rt-wrap tbody tr:last-child td:last-child  { border-radius:0 0 11px 0; }

/* Pagination */
.pagination-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:20px; }
.pagination-list li a,
.pagination-list li span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:8px; font-size:13px; font-weight:600;
  background:var(--bg3); color:var(--t2); border:1px solid var(--bd);
  transition:all var(--tr);
}
.pagination-list li a:hover { border-color:var(--pk); color:var(--pk); }
.pagination-list li .active,
.pagination-list li span.current { background:var(--pk); color:#fff; border-color:var(--pk); }

/* ── FOOTER ──────────────────────────────────── */
.site-footer { background:#09090f; border-top:1px solid var(--bd); flex-shrink:0; }
.footer-inner { padding:36px 16px 20px; max-width:1280px; margin:0 auto; }
.footer-cols { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:28px; margin-bottom:24px; }
.footer-logo { margin-bottom:12px; display:inline-block; }
.footer-logo .logo-text { font-size:24px; }
.footer-desc { font-size:12.5px; color:var(--t3); line-height:1.7; max-width:38ch; margin-bottom:14px; }
.footer-badges { display:flex; gap:6px; flex-wrap:wrap; }
.fb {
  padding:3px 10px; border-radius:5px; font-size:10px; font-weight:800;
  letter-spacing:.06em;
  background:rgba(255,255,255,.07); color:var(--t2); border:1px solid rgba(255,255,255,.1);
}
.fb--pink { background:rgba(255,45,110,.15); color:var(--pk); border-color:rgba(255,45,110,.3); }
.f-head {
  font-size:10px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:12px;
}
.f-col ul { display:flex; flex-direction:column; gap:6px; }
.f-col a { font-size:13px; color:var(--t3); transition:color var(--tr); }
.f-col a:hover { color:var(--pk); }
.footer-pay { margin-bottom:24px; }
.pay-icons { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pay-badge {
  padding:4px 12px; border-radius:6px; font-size:11px; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); color:var(--t2);
}
.footer-copy {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
  padding-top:18px; border-top:1px solid var(--bd);
  font-size:11.5px; color:var(--t3);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (min-width:900px) and (max-width:1199px) {
  .games-grid { grid-template-columns:repeat(6, 1fr); }
}

@media (max-width:899px) {

  .container { padding:0 10px; }
  * { min-width:0; }

  /* Header */
  .header-row { padding:0 10px; }
  .logo-text { font-size:20px; }
  .main-nav { display:none!important; }
  .burger { display:flex; }
  .header-actions .btn-ghost { display:none; }
  .header-actions .btn-pink { height:34px; padding:0 14px; font-size:12px; }

  /* Hero */
  .hero-section { padding:10px 0; }
  .hero-outer { padding:0 10px; }
  .hero-banner { border-radius:12px; }
  .hero-pic { aspect-ratio:unset; height:clamp(200px,56vw,340px); object-fit:cover; object-position:center top; }
  .hero-caption { top:auto; bottom:16px; left:12px; right:12px; transform:none; max-width:100%; }
  .hero-label { font-size:9px; margin-bottom:4px; }
  .hero-title { font-size:clamp(15px,5vw,22px); margin-bottom:10px; line-height:1.2; }
  .hero-cta { height:36px; padding:0 18px; font-size:13px; }

  /* Filters */
  .filter-section { padding:10px 0 0; }
  .filter-scroll { padding:0 10px; }
  .ftab { padding:6px 12px; font-size:12px; }

  /* Games — horizontal scroll */
  .games-section { padding:16px 0 20px; }
  .games-head { margin-bottom:10px; padding:0 4px; }
  .games-title { font-size:15px; }
  .games-scroll {
    overflow-x:auto; overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--pk) rgba(255,255,255,.05);
  }
  .games-scroll::-webkit-scrollbar { height:4px; }
  .games-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.04); border-radius:999px; }
  .games-scroll::-webkit-scrollbar-thumb { background:var(--pk); border-radius:999px; }
  .games-grid {
    grid-template-columns:repeat(18, 105px);
    gap:8px; width:max-content;
  }
  .game-name { font-size:9.5px; padding:4px 5px; }
  .show-more-wrap { padding-top:14px; }
  .game-card:hover { transform:none; box-shadow:none; }

  /* Content */
  .content-section { padding:20px 0 24px; }
  .rt-wrap h1 { font-size:clamp(18px,5.5vw,26px); }
  .rt-wrap p { font-size:14px; }
  .rt-wrap h2 { font-size:clamp(15px,4.5vw,20px); }

  /* Footer */
  .footer-inner { padding:24px 10px 14px; }
  .footer-cols { grid-template-columns:1fr 1fr; gap:18px; }
  .footer-copy { flex-direction:column; gap:4px; font-size:10.5px; }
}

@media (max-width:480px) {
  .footer-cols { grid-template-columns:1fr; }
  .games-grid { grid-template-columns:repeat(18, 90px); }
}