:root { --brand: #E50914; }

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background:#000; overflow-x:hidden; }

/* Hide scrollbars on rows but keep scroll */
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }

/* Page scrollbar */
body::-webkit-scrollbar { width:10px; }
body::-webkit-scrollbar-track { background:#000; }
body::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:8px; }
body::-webkit-scrollbar-thumb:hover { background:#3a3a3a; }

/* Card hover — per-card isolation (fixes play icon showing on all cards) */
.poster-card { position:relative; transition: transform .25s ease; }
.poster-card:hover { transform: scale(1.06); z-index:20; }
.poster-card img { transition: filter .25s ease, transform .25s ease; }
.poster-overlay, .poster-play { opacity:0; transition: opacity .25s ease; pointer-events:none; }
.poster-card:hover .poster-overlay, .poster-card:hover .poster-play { opacity:1; }
@media (hover:none) { .poster-overlay, .poster-play { opacity:0 !important; } }

.tile-card { transition: transform .2s ease; }
.tile-card:hover { transform: scale(1.05); }

/* Row scroll buttons */
.row-wrap:hover .row-arrow { opacity:1; }
.row-arrow { opacity:0; transition:opacity .2s ease; }

/* Fade in */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.fade-in { animation: fadeIn .4s ease; }
@keyframes slideUp { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
.slide-up { animation: slideUp .45s cubic-bezier(.2,.7,.2,1); }

/* Hero text slide */
@keyframes heroIn { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
.hero-content { animation: heroIn .6s ease; }

/* Modal backdrop */
.modal-backdrop { backdrop-filter: blur(8px); background:rgba(0,0,0,.75); }

/* Top10 big number */
.rank-num {
  font-size:150px;
  font-weight:900;
  color:#0a0a0a;
  -webkit-text-stroke: 2.5px #3d3d3d;
  line-height:.75;
  letter-spacing:-8px;
  flex-shrink:0;
}
@media (min-width:640px){ .rank-num { font-size:170px; } }

/* Spinner */
.spinner { border:3px solid rgba(255,255,255,.15); border-top-color:var(--brand); border-radius:50%; width:44px; height:44px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Scale line-clamp */
.clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Nav pill active */
.nav-item.active { background:#f2f2f2; color:#000; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.nav-item.active i { color:#000; }

/* ===== Glass surfaces ===== */
.glass-nav {
  background: rgba(20,20,20,.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
#navbar.nav-scrolled .glass-nav {
  background: rgba(12,12,12,.7);
  border-color: rgba(255,255,255,.12);
}
.glass-tile {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.glass-tile:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: scale(1.05);
}
.glass-panel {
  background: rgba(18,18,18,.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
}

/* smooth modal */
#modal-root { transition: opacity .3s ease; }

/* server tab */
.server-tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Skeleton */
.skel { background:linear-gradient(90deg,#151515 25%,#222 37%,#151515 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }