:root{
  --bg:#07090e;
  --text:#f2f4f8;
  --muted:#9aa3b4;
  --red:#e50914;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
.bottom-fade{
  position:fixed;left:0;right:0;bottom:0;height:40px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, #000 100%);
}

/* HERO — background image only here */
.hero{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#000}
.hero-bg{
  position:absolute;inset:0;
  background:url('bg.jpg') center/cover no-repeat;
  opacity:.62;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,9,14,.45) 0%, rgba(7,9,14,.88) 100%);
}
.hero-content{position:relative;z-index:2;max-width:900px;width:100%;padding:60px 20px 46px}
.hero-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.hero-logo{width:46px;height:46px;border-radius:50%;object-fit:cover}
.hero-name{font-weight:800;font-size:34px;letter-spacing:0;color:#fff}
.kicker{font-size:13px;font-weight:700;letter-spacing:2px;color:#dbe3f0;margin-bottom:22px}

/* DARK SEARCH BAR (no focus styling) */
.search-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(13,17,24,.88);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:6px 6px 6px 18px;max-width:620px;margin:0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.search-icon{width:20px;height:20px;color:#8e96a6;flex-shrink:0}
.search-wrap input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:15px;color:#fff;padding:12px 0;
}
.search-wrap input::placeholder{color:#6b7484}
.clear-btn{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;margin-right:4px}

/* CATEGORY BUTTONS — centered, flat, no animation */
.cat-row{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin:24px auto 0;max-width:720px;
}
.cat-btn{
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#a7aebc;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:13.5px;font-weight:600;
  padding:10px 22px;border-radius:999px;cursor:pointer;
  text-transform:capitalize;
}
.cat-btn:hover{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.cat-btn.active{background:#fff;color:#555;border-color:#fff}
.cat-btn .cdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e96a6;margin-right:8px;flex-shrink:0}
.cat-btn:hover .cdot{background:#fff}
.cat-btn.active .cdot{background:var(--red)}
.cat-btn .n{opacity:.7;font-weight:600;margin-left:6px;font-size:12px}
.cat-btn.active .n{opacity:.7}
.skeleton-btn{opacity:.5;pointer-events:none}
/* BODY — simple poster cards */
.container{max-width:1600px;margin:0 auto;padding:18px 56px 110px}
.status-msg{color:var(--muted);padding:20px 4px;font-size:14px}
.row-title{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px}
.row-title h2{font-size:20px;font-weight:800}
.row-title span{color:var(--muted);font-size:13px}
.grid{
  display:grid;gap:30px 24px;
  grid-template-columns:repeat(4, 1fr);
}
.card{display:flex;flex-direction:column;gap:8px}
.poster-wrap{
  position:relative;display:block;aspect-ratio:16/9;background:#111;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.poster-wrap img{width:100%;height:100%;object-fit:cover;display:block}
/* Bottom readability gradient + in-poster title */
.poster-wrap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.88) 100%);
  pointer-events:none;
}
.poster-text{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:1;
  display:flex;flex-direction:column;gap:2px;
}
.poster-cat{font-size:9px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#ffd166}
.poster-title{
  font-size:14px;font-weight:700;line-height:1.35;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* External caption (mobile only) */
.card-foot{display:none}
/* Pinned Discord card */
.card.pin .poster-wrap{border:2px solid #ffd166}
.pin-tag{
  position:absolute;top:10px;right:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.7px;
  padding:6px 14px;border-radius:999px;
}
/* LIVE + countdown chips — same pill style as category buttons */
.badge-live,
.match-time{
  position:absolute;top:10px;right:10px;
  display:flex;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.7px;
  padding:6px 14px;border-radius:999px;
}
.match-time{color:#e6ebf3;font-variant-numeric:tabular-nums}
.badge-live .pulse{width:8px;height:8px;border-radius:50%;background:#ff3b46;animation:pulse 1.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,70,.7)}
  70%{box-shadow:0 0 0 8px rgba(255,59,70,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,70,0)}
}
/* 24/7 CHANNELS SLIDER (square tiles, no names) */
.slider-wrap{position:relative;margin:26px 0 6px}
.slider-top{display:flex;justify-content:flex-end;margin-bottom:8px}
.slider-nav{display:flex;gap:8px}
.slider-nav[hidden]{display:none}
.cat-btn.nav-btn{padding:6px 16px;font-size:16px;line-height:1}
.slider-row{
  display:flex;gap:14px;overflow-x:auto;
  scroll-behavior:smooth;padding:4px 2px;
  scrollbar-width:none;
}
.slider-row::-webkit-scrollbar{display:none}
.ch-tile{
  position:relative;flex:0 0 auto;
  width:200px;aspect-ratio:1/1;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
}
.ch-tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Skeleton loading (matches card layout) */
.skel-poster{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(100deg,#141a25 40%,#232d40 50%,#141a25 60%);
  background-size:200% 100%;
  animation:shimmer 1.2s infinite linear;
}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-title{
  position:absolute;left:12px;right:40%;bottom:10px;height:14px;border-radius:6px;
  background:rgba(255,255,255,.14);
}
.empty{
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.2);
  padding:40px;border-radius:var(--radius);text-align:center;color:var(--muted);
}
.footer{border-top:1px solid rgba(255,255,255,.08);padding:56px 20px 70px;text-align:center;background:rgba(0,0,0,.5)}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:12px}
.foot-logo{width:52px;height:52px;border-radius:50%;object-fit:cover}
.foot-name{font-weight:800;font-size:32px;letter-spacing:0;color:#fff}
.foot-tagline{font-size:19px;font-weight:700;margin-top:16px}
.foot-disclaimer{font-size:13px;color:var(--muted);max-width:640px;margin:14px auto 0;line-height:1.6}
.foot-copy{font-size:13px;color:var(--muted);margin-top:10px}
/* Desktop: lock layout so shrinking the window keeps the same look (scrolls instead) */
@media(min-width:641px){
  body{min-width:1100px}
}
/* Desktop only: play icon reveal + dim on hover */
@media(min-width:641px){
  .poster-wrap,.ch-tile{transition:border-color .25s ease}
  .poster-wrap img,.ch-tile img{transition:opacity .25s ease,transform .35s ease}
  .play-hover{
    position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.8);
    transition:opacity .25s ease,transform .25s ease;
    pointer-events:none;
  }
  .play-circle{
    width:60px;height:60px;border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .play-circle svg{width:26px;height:26px;fill:#111;margin-left:3px}
  .poster-wrap:hover img,.ch-tile:hover img{opacity:.55;transform:scale(1.06)}
  .poster-wrap:hover,.ch-tile:hover{border-color:#ffd166}
  .poster-wrap:hover .play-hover,.ch-tile:hover .play-hover{opacity:1;transform:scale(1)}
}
/* Mobile: responsive 2-per-row */
@media(max-width:640px){
  .hero{min-height:520px}
  .hero-content{padding:50px 12px 40px}
  .container{padding:14px 20px 90px}
  .grid{grid-template-columns:repeat(2, 1fr);gap:16px 12px}
  .poster-text{display:none}
  .card-foot{display:block;padding:6px 2px 0}
  .card-foot .c{font-size:11px;font-weight:400;color:#ffd166;text-transform:uppercase;letter-spacing:1px}
  .card-foot .t{font-size:12.5px;font-weight:600;line-height:1.4}
  .ch-tile{width:150px}
}