@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* ════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════ */
:root {
  --bg:       #0a0c14;
  --bg2:      #0d0f1a;
  --card:     #12141f;
  --card2:    #181b2a;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --red:      #e63946;
  --red-dim:  rgba(230,57,70,0.12);
  --red-glow: rgba(230,57,70,0.28);
  --gold:     #f5a623;
  --teal:     #00d4aa;
  --blue:     #4f8ef7;
  --text:     #f0f2fc;
  --text2:    #9499b4;
  --muted:    #4a4e6a;
  --ff:       'Inter', system-ui, sans-serif;
  --ffd:      'Manrope', sans-serif;
  --ffm:      'SF Mono','Fira Code',monospace;
  --nav:      60px;
  --pad:      40px;   /* main horizontal padding */
  --r:        8px;
  --r2:       14px;
  --ease:     cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff);
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Subtle grain */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.4;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:var(--ff); cursor:pointer; border:none; background:none; color:inherit; }
input, select { font-family:var(--ff); }
ul { list-style:none; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--card2); border-radius:2px; }

/* ── Utilities ── */
.hidden { display:none !important; }
.skel {
  background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.fade-up { opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.fade-up.in { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:200;
  display:flex; align-items:center;
  padding:0 var(--pad); gap:28px;
  background:rgba(10,12,20,0.94);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
#nav.up { box-shadow:0 1px 0 var(--border),0 4px 24px rgba(0,0,0,.35); }

.nav-logo {
  display:flex; align-items:center; gap:8px;
  font-family:var(--ffd); font-size:18px; font-weight:800;
  letter-spacing:-.4px; flex-shrink:0;
  white-space:nowrap;
}
.nav-logo-mark {
  width:30px; height:30px; border-radius:8px;
  background:var(--red); display:flex; align-items:center;
  justify-content:center; font-size:14px;
  box-shadow:0 0 16px var(--red-glow); flex-shrink:0;
}

.nav-links { display:flex; gap:2px; }
.nav-link {
  padding:6px 12px; border-radius:6px;
  font-size:13.5px; font-weight:500; color:var(--text2);
  transition:color .2s,background .2s; cursor:pointer;
  white-space:nowrap;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-link.active { color:var(--text); background:rgba(255,255,255,.07); }

/* Nav dropdown */
.nav-drop { position:relative; }
.nav-drop-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background:var(--card); border:1px solid var(--border2);
  border-radius:12px; padding:4px; min-width:200px;
  box-shadow:0 16px 48px rgba(0,0,0,.6); z-index:300;
}
.nav-drop.open .nav-drop-menu { display:block; animation:dropIn .18s var(--ease); }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.nav-drop-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .15s; cursor:pointer; white-space:nowrap;
}
.nav-drop-item:hover { background:rgba(255,255,255,.06); color:var(--text); }
.nav-drop-sep { height:1px; background:var(--border); margin:3px 0; }

.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Search */
.search-wrap { position:relative; display:flex; align-items:center; }
.search-btn {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:all .2s; flex-shrink:0;
}
.search-btn:hover { color:var(--text); background:rgba(255,255,255,.06); }
.search-box {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:0; overflow:hidden; opacity:0;
  transition:width .3s var(--ease),opacity .3s;
  background:var(--card); border:1px solid var(--border2); border-radius:10px;
  display:flex; align-items:center;
}
.search-box.open { width:260px; opacity:1; padding:0 10px; }
.search-box input {
  background:none; border:none; outline:none;
  color:var(--text); font-size:13px; padding:8px 6px; width:100%;
}
.search-box input::placeholder { color:var(--muted); }

/* Ad blocker chip */
.ab-chip {
  display:flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:6px;
  background:rgba(0,212,170,.07); border:1px solid rgba(0,212,170,.18);
  color:var(--teal); font-size:11px; font-weight:600;
  cursor:pointer; transition:all .2s; flex-shrink:0;
  white-space:nowrap;
}
.ab-chip:hover { background:rgba(0,212,170,.12); }
.ab-chip.off { background:rgba(230,57,70,.07); border-color:rgba(230,57,70,.2); color:var(--red); }
#ab-count { font-family:var(--ffm); font-size:10px; }

/* Auth */
.nav-auth-btn {
  padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600;
  background:var(--red); color:#fff;
  transition:background .2s,transform .15s;
  box-shadow:0 2px 12px var(--red-glow);
  white-space:nowrap; flex-shrink:0;
}
.nav-auth-btn:hover { background:#cc2f3b; transform:translateY(-1px); }
.nav-user-chip {
  display:flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:7px;
  background:var(--card); border:1px solid var(--border2);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.nav-user-chip:hover { background:var(--card2); }
.nav-avatar {
  width:24px; height:24px; border-radius:6px;
  background:var(--red); display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700;
  color:#fff; flex-shrink:0; text-transform:uppercase;
}

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
#hero {
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  padding:0 var(--pad) calc(var(--nav) + 40px);
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 18%;
  transition:opacity .9s var(--ease);
}
.hero-bg.fade { opacity:0; }
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right,rgba(10,12,20,.96) 0%,rgba(10,12,20,.65) 55%,transparent 100%),
    linear-gradient(to top,rgba(10,12,20,1) 0%,rgba(10,12,20,.3) 40%,transparent 70%);
}
.hero-content { position:relative; z-index:2; max-width:540px; }
.hero-label {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red-dim); border:1px solid rgba(230,57,70,.22);
  color:var(--red); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 12px; border-radius:20px; margin-bottom:16px;
}
.hero-label-dot { width:5px; height:5px; border-radius:50%; background:var(--red); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-title {
  font-family:var(--ffd); font-size:clamp(36px,6vw,72px); font-weight:800;
  line-height:.95; letter-spacing:-2px; text-transform:uppercase; margin-bottom:16px;
}
.hero-meta {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:13px; color:var(--text2); flex-wrap:wrap;
}
.hero-rating { color:var(--gold); font-family:var(--ffm); font-weight:600; }
.hero-sep { color:var(--muted); }
.hero-badge {
  background:var(--card2); border:1px solid var(--border2);
  padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; color:var(--text2);
}
.hero-desc {
  font-size:14px; line-height:1.75; color:rgba(240,242,252,.7);
  margin-bottom:24px; max-width:440px;
}
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.hero-dots {
  position:absolute; bottom:calc(var(--nav) + 24px); right:var(--pad); z-index:3;
  display:flex; gap:5px; align-items:center;
}
.hero-dot {
  width:5px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.2); cursor:pointer; transition:all .3s;
}
.hero-dot.on { width:22px; background:var(--red); }
.hero-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(255,255,255,.04); z-index:3; }
.hero-bar { height:100%; background:var(--red); width:0%; transition:width .1s linear; }

/* ════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 22px; border-radius:var(--r);
  font-size:13.5px; font-weight:600; cursor:pointer; border:none;
  transition:all .2s var(--ease); white-space:nowrap;
}
.btn-red  { background:var(--red); color:#fff; box-shadow:0 4px 18px var(--red-glow); }
.btn-red:hover { background:#cc2f3b; transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.08); color:var(--text); border:1px solid rgba(255,255,255,.1); }
.btn-ghost:hover { background:rgba(255,255,255,.13); }
.btn-sm { padding:8px 16px; font-size:12.5px; }

/* ════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════ */
#page { padding-top:40px; }
.section { margin-bottom:48px; }

/* Section header — always aligned with --pad */
.sec-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); margin-bottom:16px;
}
.sec-title {
  display:flex; align-items:center; gap:9px;
  font-family:var(--ffd); font-size:17px; font-weight:800;
}
.sec-bar { width:3px; height:18px; background:var(--red); border-radius:2px; flex-shrink:0; }
.sec-lbl { font-size:11px; font-weight:600; color:var(--muted); font-family:var(--ffm); letter-spacing:.5px; }
.see-all { font-size:12.5px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:3px; transition:color .2s; cursor:pointer; }
.see-all:hover { color:var(--red); }

/* Tab pills */
.tabs { display:flex; gap:6px; padding:0 var(--pad); margin-bottom:16px; }
.tab {
  padding:6px 16px; border-radius:20px;
  font-size:13px; font-weight:600; color:var(--muted);
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:all .2s;
}
.tab:hover { color:var(--text); border-color:var(--border2); }
.tab.on { background:var(--red); color:#fff; border-color:transparent; box-shadow:0 0 16px var(--red-glow); }

/* Genre chips */
.genres {
  display:flex; gap:7px; padding:0 var(--pad); margin-bottom:32px;
  overflow-x:auto; scrollbar-width:none;
}
.genres::-webkit-scrollbar { display:none; }
.genre {
  flex-shrink:0; padding:5px 13px; border-radius:20px;
  font-size:12px; font-weight:600; color:var(--text2);
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:all .2s;
}
.genre:hover { color:var(--text); border-color:var(--border2); }
.genre.on { color:var(--red); border-color:rgba(230,57,70,.4); background:var(--red-dim); }

/* ════════════════════════════════════════════════
   CARD ROWS
   All rows use --pad for left/right padding so they
   align perfectly with section headers above them.
   ════════════════════════════════════════════════ */
.row {
  display:flex; gap:14px;
  padding:4px var(--pad) 16px;
  overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.row::-webkit-scrollbar { display:none; }

/* ── Standard card ── */
.card {
  flex:0 0 160px; cursor:pointer; scroll-snap-align:start;
  transition:transform .3s var(--ease);
}
.card:hover { transform:translateY(-5px); }
.card:hover .c-img { filter:brightness(.55); }
.card:hover .c-over { opacity:1; }
.card:hover .c-play { transform:scale(1); }

.c-poster {
  position:relative; border-radius:var(--r);
  overflow:hidden; aspect-ratio:2/3;
  background:var(--card); margin-bottom:9px;
  box-shadow:0 3px 14px rgba(0,0,0,.45);
  transition:box-shadow .3s;
}
.card:hover .c-poster { box-shadow:0 8px 28px rgba(0,0,0,.65); }
.c-img { width:100%; height:100%; object-fit:cover; transition:filter .3s; }
.c-over {
  position:absolute; inset:0; background:rgba(10,12,20,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.c-play {
  width:46px; height:46px; border-radius:50%;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  font-size:17px; transform:scale(.7);
  box-shadow:0 0 28px var(--red-glow),0 0 0 8px rgba(230,57,70,.12);
  transition:transform .28s cubic-bezier(.34,1.6,.64,1);
}
.c-type {
  position:absolute; top:7px; left:7px;
  background:var(--red); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.6px;
  padding:2px 6px; border-radius:3px;
}
.c-type.tv { background:var(--blue); }
.c-star {
  position:absolute; top:7px; right:7px;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  color:var(--gold); font-family:var(--ffm); font-size:10px; font-weight:500;
  padding:2px 6px; border-radius:4px;
  display:flex; align-items:center; gap:3px;
}
.c-new {
  position:absolute; bottom:7px; left:7px;
  background:var(--teal); color:#000;
  font-size:9px; font-weight:800; letter-spacing:.4px;
  padding:2px 6px; border-radius:3px;
}
.c-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); }
.c-progress-bar { height:100%; background:var(--red); }
.c-title {
  font-size:12.5px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px;
}
.c-sub { font-size:11px; color:var(--muted); font-family:var(--ffm); }

/* ── Top 10 ─────────────────────────────────────
   The giant number (c-num) sits below-left of the poster,
   bleeding outside the card boundary.

   Fix: give the row the same --pad as sec-header (already done),
   and push each card right with margin-left so the number
   from the left card doesn't overlap the right card's poster.
   First card gets no margin — its number bleeds left into the row padding.
   ─────────────────────────────────────────────── */
.card-t10 { flex:0 0 152px; }
.row-top10 .card-t10 + .card-t10 { margin-left:30px; }

.c-num {
  position:absolute;
  bottom:-10px; left:-20px;
  font-family:var(--ffd);
  font-size:96px; font-weight:800; line-height:1;
  color:var(--bg);
  -webkit-text-stroke:2px rgba(255,255,255,.09);
  pointer-events:none; user-select:none; z-index:1;
}

/* ── Banner (wide) cards ── */
.card-banner { flex:0 0 280px; }
.card-banner .c-poster { aspect-ratio:16/9; }
.card-banner .c-img { object-position:center top; }

/* ════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════ */
#modal-wrap {
  position:fixed; inset:0;
  background:rgba(10,12,20,.88); backdrop-filter:blur(18px);
  z-index:500; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:opacity .3s;
}
#modal-wrap.open { opacity:1; pointer-events:all; }
#modal {
  background:var(--card); border:1px solid var(--border2); border-radius:18px;
  width:100%; max-width:840px; max-height:92dvh;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--card2) transparent;
  transform:translateY(20px) scale(.97);
  box-shadow:0 24px 80px rgba(0,0,0,.75);
  transition:transform .35s cubic-bezier(.34,1.2,.64,1);
}
#modal-wrap.open #modal { transform:none; }

.m-hero { position:relative; height:320px; overflow:hidden; border-radius:18px 18px 0 0; }
.m-hero-img { width:100%; height:100%; object-fit:cover; }
.m-hero-grad {
  position:absolute; inset:0;
  background:linear-gradient(to top,var(--card) 0%,rgba(18,20,31,.5) 55%,transparent 100%);
}
.m-close {
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%; z-index:5;
  background:rgba(10,12,20,.7); backdrop-filter:blur(8px);
  border:1px solid var(--border2); color:var(--text2); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.m-close:hover { background:var(--red); color:#fff; border-color:var(--red); }
.m-watchlist-btn {
  position:absolute; top:14px; right:58px;
  width:34px; height:34px; border-radius:50%; z-index:5;
  background:rgba(10,12,20,.7); backdrop-filter:blur(8px);
  border:1px solid var(--border2); color:var(--text2); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.m-watchlist-btn:hover { border-color:var(--red); color:var(--red); }
.m-watchlist-btn.saved { color:var(--red); border-color:rgba(230,57,70,.4); background:var(--red-dim); }

.m-body { padding:0 32px 32px; }
.m-title { font-family:var(--ffd); font-size:clamp(22px,4vw,40px); font-weight:800; letter-spacing:-1px; margin-bottom:10px; }
.m-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; font-size:12.5px; color:var(--text2); }
.m-tag { background:var(--card2); border:1px solid var(--border); padding:2px 9px; border-radius:4px; font-size:10.5px; font-weight:700; letter-spacing:.5px; }
.m-tag.hd  { color:var(--teal); border-color:rgba(0,212,170,.25); background:rgba(0,212,170,.07); }
.m-tag.type{ color:var(--blue); border-color:rgba(79,142,247,.25); background:rgba(79,142,247,.07); }
.m-rating  { color:var(--gold); font-family:var(--ffm); font-weight:600; }
.m-overview{ font-size:13.5px; line-height:1.8; color:rgba(240,242,252,.72); margin-bottom:24px; }

/* seasons */
.seasons-wrap  { margin-bottom:22px; }
.seasons-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.ep-row   { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.ep-btn   { padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600; background:var(--card2); border:1px solid var(--border); color:var(--text2); cursor:pointer; transition:all .18s; }
.ep-btn:hover { color:var(--text); border-color:var(--border2); }
.ep-btn.on{ background:var(--red); border-color:var(--red); color:#fff; }

/* servers */
.server-wrap { margin-bottom:22px; }
.server-head { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.server-head::after { content:''; flex:1; height:1px; background:var(--border); }
.sh-note { font-size:10px; letter-spacing:.5px; text-transform:none; font-weight:400; }
.srv-grid { display:flex; flex-wrap:wrap; gap:7px; }
.srv-btn  { display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:7px; font-size:12.5px; font-weight:600; background:var(--card2); border:1px solid var(--border); color:var(--text2); cursor:pointer; transition:all .2s; }
.srv-btn:hover { border-color:var(--border2); color:var(--text); transform:translateY(-1px); }
.srv-btn.on   { border-color:var(--red); background:var(--red-dim); color:var(--text); box-shadow:0 0 14px var(--red-glow); }
.srv-btn.champ{ border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.07); }
.srv-btn.champ .srv-name { color:var(--gold); }
.srv-dot      { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.srv-dot.best { background:#00d4aa; box-shadow:0 0 5px rgba(0,212,170,.5); }
.srv-dot.great{ background:#4f8ef7; box-shadow:0 0 5px rgba(79,142,247,.5); }
.srv-dot.good { background:var(--gold); }
.srv-dot.ok   { background:var(--muted); }
.srv-ads      { font-size:9.5px; font-weight:700; letter-spacing:.3px; padding:1px 5px; border-radius:3px; }
.ads-none { background:rgba(0,212,170,.12); color:var(--teal); }
.ads-low  { background:rgba(245,166,35,.12); color:var(--gold); }
.ads-med  { background:rgba(245,166,35,.08); color:rgba(245,166,35,.7); }
.ads-high { background:rgba(230,57,70,.12); color:var(--red); }

/* player */
#player-box { display:none; border-radius:var(--r2); overflow:hidden; aspect-ratio:16/9; background:#000; border:1px solid var(--border); position:relative; margin-bottom:8px; }
#player-box.show { display:block; }
#player-frame { width:100%; height:100%; border:none; opacity:0; transition:opacity .4s; }
#player-loading { position:absolute; inset:0; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:13px; }
.spin { width:32px; height:32px; border:2.5px solid var(--card2); border-top-color:var(--red); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ════════════════════════════════════════════════
   AUTH MODAL
   ════════════════════════════════════════════════ */
#auth-modal {
  position:fixed; inset:0; z-index:600;
  background:rgba(10,12,20,.92); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#auth-modal.open { opacity:1; pointer-events:all; }
.auth-box {
  background:var(--card); border:1px solid var(--border2); border-radius:18px;
  width:100%; max-width:400px; padding:36px 32px;
  transform:translateY(16px) scale(.97);
  box-shadow:0 24px 64px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.34,1.2,.64,1);
  position:relative;
}
#auth-modal.open .auth-box { transform:none; }
.auth-close {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background:var(--card2); border:1px solid var(--border);
  color:var(--text2); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.auth-close:hover { background:var(--red); color:#fff; border-color:var(--red); }
.auth-logo { font-family:var(--ffd); font-size:22px; font-weight:800; margin-bottom:4px; }
.auth-sub  { font-size:13px; color:var(--text2); margin-bottom:28px; }
.auth-tabs { display:flex; gap:4px; margin-bottom:24px; background:var(--card2); padding:4px; border-radius:9px; }
.auth-tab  { flex:1; text-align:center; padding:7px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s; }
.auth-tab.on { background:var(--bg); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.auth-field { margin-bottom:16px; }
.auth-field label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px; letter-spacing:.3px; }
.auth-field input {
  width:100%; padding:10px 14px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border2);
  color:var(--text); font-size:13.5px; outline:none; transition:border-color .2s;
}
.auth-field input:focus { border-color:var(--red); }
.auth-err    { font-size:12.5px; color:var(--red); margin-bottom:12px; min-height:18px; }
.auth-submit {
  width:100%; padding:12px; border-radius:8px;
  background:var(--red); color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; border:none; transition:all .2s;
  box-shadow:0 4px 16px var(--red-glow); font-family:var(--ff);
}
.auth-submit:hover { background:#cc2f3b; transform:translateY(-1px); }
.auth-footer { font-size:12px; color:var(--muted); margin-top:16px; text-align:center; line-height:1.6; }
.auth-footer a { color:var(--text2); cursor:pointer; }
.auth-footer a:hover { color:var(--red); }

/* ════════════════════════════════════════════════
   WELCOME POPUP (3s auto-dismiss)
   ════════════════════════════════════════════════ */
#welcome-popup {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:700; width:min(420px,calc(100vw - 32px));
  background:var(--card); border:1px solid var(--border2); border-radius:16px;
  padding:20px 22px; box-shadow:0 16px 48px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
#welcome-popup.show { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.wp-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.wp-icon {
  width:40px; height:40px; border-radius:10px; background:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; box-shadow:0 0 16px var(--red-glow);
}
.wp-title { font-family:var(--ffd); font-size:15px; font-weight:800; }
.wp-sub   { font-size:12px; color:var(--text2); margin-top:1px; }
.wp-desc  { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:14px; }
.wp-actions { display:flex; gap:8px; }
.wp-timer { width:100%; height:2px; background:var(--border); border-radius:1px; margin-top:14px; overflow:hidden; }
.wp-timer-bar { height:100%; background:var(--red); animation:wpTimer 3s linear forwards; }
@keyframes wpTimer { from{width:100%} to{width:0%} }

/* ════════════════════════════════════════════════
   PAGE OVERLAY (terms/privacy/settings/profile)
   ════════════════════════════════════════════════ */
#page-overlay {
  position:fixed; inset:0; z-index:550;
  background:rgba(10,12,20,.93); backdrop-filter:blur(20px);
  overflow-y:auto; padding:var(--nav) 20px 60px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#page-overlay.open { opacity:1; pointer-events:all; }
.po-inner {
  max-width:720px; margin:40px auto 0;
  background:var(--card); border:1px solid var(--border2); border-radius:18px;
  padding:40px; position:relative;
  animation:poIn .35s var(--ease);
}
@keyframes poIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.po-close {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:var(--card2); border:1px solid var(--border);
  color:var(--text2); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.po-close:hover { background:var(--red); color:#fff; border-color:var(--red); }
.po-inner h1  { font-family:var(--ffd); font-size:30px; font-weight:800; letter-spacing:-1px; margin-bottom:6px; }
.po-sub       { font-size:12px; color:var(--muted); margin-bottom:28px; }
.po-inner h2  { font-family:var(--ffd); font-size:16px; font-weight:700; margin:24px 0 8px; }
.po-inner p   { font-size:13.5px; line-height:1.8; color:rgba(240,242,252,.75); margin-bottom:12px; }
.po-inner ul  { padding-left:18px; margin-bottom:12px; }
.po-inner li  { font-size:13.5px; line-height:1.8; color:rgba(240,242,252,.75); margin-bottom:4px; list-style:disc; }
.po-inner a   { color:var(--red); }
.po-divider   { height:1px; background:var(--border); margin:22px 0; }
code { background:var(--card2); border:1px solid var(--border); padding:1px 5px; border-radius:3px; font-family:var(--ffm); font-size:12px; color:var(--teal); }

/* settings */
.setting-row { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.setting-row:last-of-type { border-bottom:none; }
.setting-info  { flex:1; min-width:160px; }
.setting-label { font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:2px; }
.setting-desc  { font-size:12px; color:var(--muted); line-height:1.5; }
.setting-select {
  background:var(--card2); border:1px solid var(--border2); color:var(--text);
  border-radius:7px; padding:7px 28px 7px 10px;
  font-family:var(--ff); font-size:12.5px; cursor:pointer;
  min-width:160px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234a4e6a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:14px;
}
.setting-select:focus { outline:none; border-color:var(--red); }
.tog { display:flex; align-items:center; cursor:pointer; flex-shrink:0; }
.tog input { display:none; }
.tog-track { width:40px; height:22px; border-radius:11px; background:var(--card2); border:1px solid var(--border2); position:relative; transition:background .2s; }
.tog input:checked + .tog-track { background:var(--red); border-color:var(--red); }
.tog-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.tog input:checked + .tog-track .tog-thumb { transform:translateX(18px); }

/* ════════════════════════════════════════════════
   PROFILE PANEL
   ════════════════════════════════════════════════ */
.profile-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.profile-avatar { width:50px; height:50px; border-radius:13px; background:var(--red); display:flex; align-items:center; justify-content:center; font-family:var(--ffd); font-size:21px; font-weight:800; color:#fff; box-shadow:0 0 20px var(--red-glow); text-transform:uppercase; flex-shrink:0; }
.profile-name   { font-family:var(--ffd); font-size:20px; font-weight:800; }
.profile-meta   { font-size:12px; color:var(--muted); margin-top:2px; }
.profile-signout{ margin-left:auto; padding:7px 14px; border-radius:7px; background:rgba(230,57,70,.1); border:1px solid rgba(230,57,70,.25); color:var(--red); font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--ff); transition:all .2s; }
.profile-signout:hover { background:rgba(230,57,70,.2); }

.profile-tabs { display:flex; gap:4px; margin-bottom:22px; background:var(--bg2); padding:4px; border-radius:10px; border:1px solid var(--border); }
.profile-tab   { flex:1; text-align:center; padding:8px 10px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .2s; white-space:nowrap; }
.profile-tab:hover { color:var(--text); }
.profile-tab.on{ background:var(--card2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3); }

.profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:14px; }

.empty-state       { text-align:center; padding:60px 20px; }
.empty-state-icon  { font-size:40px; margin-bottom:12px; }
.empty-state-title { font-family:var(--ffd); font-size:18px; font-weight:700; margin-bottom:8px; }
.empty-state-desc  { font-size:13px; color:var(--muted); }

/* ════════════════════════════════════════════════
   LEADERBOARD
   ════════════════════════════════════════════════ */
.lb-info-bar { font-size:11.5px; color:var(--text2); background:rgba(0,212,170,.05); border:1px solid rgba(0,212,170,.12); border-radius:7px; padding:9px 13px; margin-bottom:16px; line-height:1.65; }
.lb-list { display:flex; flex-direction:column; gap:6px; }
.lb-row  { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; background:var(--bg2); border:1px solid var(--border); transition:border-color .2s; }
.lb-row:hover { border-color:var(--border2); }
.lb-me   { background:rgba(230,57,70,.05); border-color:rgba(230,57,70,.2) !important; }
.lb-rank { font-family:var(--ffd); font-size:17px; font-weight:800; min-width:30px; text-align:center; flex-shrink:0; }
.lb-avatar { width:34px; height:34px; border-radius:8px; background:var(--card2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:var(--ffd); font-size:14px; font-weight:700; text-transform:uppercase; color:var(--text); flex-shrink:0; }
.lb-me .lb-avatar { background:var(--red); color:#fff; border-color:transparent; }
.lb-info { flex:1; min-width:0; }
.lb-name { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.lb-you  { font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:var(--red-dim); border:1px solid rgba(230,57,70,.3); color:var(--red); padding:1px 6px; border-radius:3px; }
.lb-bar-wrap { height:3px; background:var(--border2); border-radius:2px; overflow:hidden; }
.lb-bar  { height:100%; background:linear-gradient(to right,var(--red),#ff6b7a); border-radius:2px; transition:width .6s var(--ease); }
.lb-time { font-family:var(--ffm); font-size:12px; font-weight:500; color:var(--text2); white-space:nowrap; flex-shrink:0; }

/* ════════════════════════════════════════════════
   SEARCH PAGE
   ════════════════════════════════════════════════ */
#search-page { display:none; padding:calc(var(--nav) + 32px) var(--pad) 60px; }
#search-page.show { display:block; }
.search-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px; }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
#footer {
  margin-top:60px; border-top:1px solid var(--border);
  padding:32px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-link  { font-size:12.5px; color:var(--muted); transition:color .2s; cursor:pointer; white-space:nowrap; }
.footer-link:hover { color:var(--red); }
.footer-copy { font-size:12px; color:var(--muted); }

/* ════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
   ════════════════════════════════════════════════ */
@media (max-width:900px) {
  :root { --pad:28px; }
  .card { flex:0 0 148px; }
  .card-banner { flex:0 0 250px; }
  .card-t10 { flex:0 0 140px; }
  .row { gap:12px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --nav:56px; --pad:16px; }

  /* Nav — hide text links, keep essentials */
  #nav { padding:0 16px; gap:12px; }
  .nav-links { display:none; }
  .nav-logo  { font-size:16px; }
  .nav-logo-mark { width:26px; height:26px; font-size:12px; }
  #ab-label  { display:none; } /* just show count */
  .ab-chip   { padding:5px 8px; }

  /* Hero */
  #hero { padding:0 var(--pad) calc(var(--nav) + 24px); min-height:480px; }
  .hero-title { letter-spacing:-1px; }
  .hero-desc  { display:none; } /* save space on mobile */
  .hero-dots  { right:var(--pad); bottom:calc(var(--nav) + 12px); }
  .hero-actions { gap:8px; }
  .btn { padding:10px 18px; font-size:13px; }
  .btn-sm { padding:8px 14px; font-size:12px; }

  /* Cards */
  .card { flex:0 0 132px; }
  .card-banner { flex:0 0 210px; }
  .card-t10 { flex:0 0 128px; }
  .row-top10 .card-t10 + .card-t10 { margin-left:24px; }
  .c-num { font-size:76px; bottom:-8px; left:-16px; }

  /* Modal */
  #modal { border-radius:14px; }
  .m-hero { height:200px; border-radius:14px 14px 0 0; }
  .m-body { padding:0 18px 24px; }
  .m-title { font-size:clamp(20px,5vw,28px); }
  .m-meta  { gap:7px; font-size:11.5px; }

  /* Auth */
  .auth-box { padding:26px 20px; border-radius:14px; }

  /* Page overlay */
  .po-inner { padding:24px 18px; border-radius:14px; margin-top:20px; }
  .po-inner h1 { font-size:24px; }

  /* Profile */
  .profile-tabs { gap:3px; }
  .profile-tab  { padding:7px 8px; font-size:11.5px; }
  .profile-grid { grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:10px; }

  /* Footer */
  #footer { padding:24px var(--pad); flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; }

  /* Welcome popup */
  #welcome-popup { bottom:16px; }
  .wp-actions { flex-direction:column; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤400px)
   ════════════════════════════════════════════════ */
@media (max-width:400px) {
  :root { --pad:12px; }
  .card { flex:0 0 118px; }
  .card-banner { flex:0 0 190px; }
  .card-t10 { flex:0 0 115px; }
  .row { gap:10px; }
  .c-num { font-size:64px; left:-12px; }
  .profile-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}

/* ════════════════════════════════════════════════
   LARGE SCREENS (≥1400px)
   ════════════════════════════════════════════════ */
@media (min-width:1400px) {
  :root { --pad:60px; }
  .card { flex:0 0 175px; }
  .card-banner { flex:0 0 320px; }
  .card-t10 { flex:0 0 165px; }
}