:root{
  --bg:#07070b;
  --bg2:#0a0a12;

  --card: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.10);

  --text:#eef0ff;
  --muted: rgba(238,240,255,.72);

  --red:#ff2a2a;
  --red2:#ff6b2a;
  --ok:#22c55e;

  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --r: 22px;
  --max: 1080px;

  --blur: blur(16px);
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.wrap{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* Background */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg__glow{
  position:absolute; inset:auto;
  width: 900px; height: 900px;
  border-radius: 999px;
  filter: blur(80px);
  opacity:.18;
}
.bg__glow--a{
  left:-260px; top:-300px;
  background: radial-gradient(circle, var(--red), transparent 60%);
}
.bg__glow--b{
  right:-320px; top:-220px;
  background: radial-gradient(circle, var(--red2), transparent 60%);
}
.bg__grain{
  position:absolute; inset:0;
  opacity:.07;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.bg__vignette{
  position:absolute; inset:-1px;
  background: radial-gradient(1200px 700px at 50% 28%, transparent 55%, rgba(0,0,0,.70) 100%);
  opacity:.95;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,7,11,.58);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight: 950; }
.brand__dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  box-shadow: 0 0 0 7px rgba(255,42,42,.10);
}

.nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav__link{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(238,240,255,.70);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

.btn{
  border:0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 950;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  transition: transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0) scale(.99); }

.btn--primary{
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #120607;
  box-shadow: 0 18px 44px rgba(255,42,42,.16);
}
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
}
.btn--block{ width:100%; }

/* Page */
.page{ position:relative; z-index:1; padding: 26px 0 44px; }

/* Cards */
.card{
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: 18px;
}
.card--glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
}
.card__title{ font-weight: 950; letter-spacing: -.2px; }
.card__text{ margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
.card__hint{ margin-top: 12px; color: rgba(238,240,255,.56); font-size: 12.5px; }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } }

.hero__left{
  padding: 22px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(238,240,255,.72);
  font-size: 13px;
}
.pill__ping{
  width:10px; height:10px; border-radius:999px;
  background: var(--red);
  box-shadow: 0 0 0 7px rgba(255,42,42,.12);
  animation: ping 1.3s ease-in-out infinite;
}
@keyframes ping{
  0%,100%{ transform: scale(1); opacity:.92; }
  50%{ transform: scale(1.15); opacity:1; }
}
.hero__title{
  margin: 14px 0 10px;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.hero__sub{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15.5px;
}
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.hero__stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){ .hero__stats{ grid-template-columns: 1fr; } }

.stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.stat:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
}
.stat__k{
  font-size: 12px;
  color: rgba(238,240,255,.58);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.stat__v{ margin-top: 8px; font-weight: 950; letter-spacing: -.2px; font-size: 16px; }
.stat__h{ margin-top: 4px; font-size: 12px; color: rgba(238,240,255,.55); }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(238,240,255,.82);
  font-size: 13px;
}
.badge__dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(245,158,11,.95); }
.badge.badge--ok .badge__dot{ background: var(--ok); box-shadow: 0 0 0 7px rgba(34,197,94,.14); }

/* Countdown */
.count{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tbox{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-align:center;

  /* FIX: Hover animation back */
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.tbox:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.16);
}
.tbox__n{ font-size: 26px; font-weight: 950; letter-spacing: -.4px; }
.tbox__l{ margin-top: 3px; font-size: 12px; color: rgba(238,240,255,.62); }

/* Progress Bar */
.progress-bar{
  margin-top: 12px;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red2));
  width: 0%;
  transition: width 0.5s ease;
}

/* Grid */
.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

/* Controls */
.controls{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){ .controls{ grid-template-columns: 1fr; } }
.control__label{
  display:block;
  font-size: 12px;
  color: rgba(238,240,255,.58);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.select{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;

  /* nicer focus */
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.select:focus{
  border-color: rgba(255,42,42,.35);
  box-shadow: 0 0 0 6px rgba(255,42,42,.12);
}

/* Player + Clip list */
.player{
  margin-top: 12px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
}
.player__video{ width: 100%; aspect-ratio: 16/9; display:block; background: rgba(0,0,0,.35); }

.cliplist{ margin-top: 12px; display:grid; gap: 10px; }
.clipRow{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(238,240,255,.92);
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.clipRow:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.clipRow__title{ font-weight: 950; font-size: 13px; text-align:left; }
.clipRow__meta{ font-size: 12px; color: rgba(238,240,255,.55); }
.clipRow.is-active{
  border-color: rgba(34,197,94,.60);
  background: rgba(34,197,94,.08);
}

/* Discord embed */
.embed{
  margin-top: 12px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.embed__frame{ width:100%; height: 360px; border:0; display:block; }

/* Footer */
.footer{
  margin-top: 16px;
  padding: 10px 0 22px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: rgba(238,240,255,.62);
}
.footer__muted{ color: rgba(238,240,255,.55); }

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s var(--ease);
}
.reveal.is-in{ opacity:1; transform: translateY(0); }

/* Desktop vs mobile menu */
.nav--desktop{ display:flex; }
.menuBtn{ display:none; }
@media (max-width: 860px){
  .nav--desktop{ display:none; }
  .menuBtn{ display:inline-flex; }
}
.menuBtn{
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.menuBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.menuIcon{ position:relative; width:20px; height:14px; display:block; }
.menuIcon span{
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(238,240,255,.92);
  transition: transform .22s var(--ease), top .22s var(--ease), opacity .16s var(--ease);
}
.menuIcon span:nth-child(1){ top:0; }
.menuIcon span:nth-child(2){ top:6px; }
.menuIcon span:nth-child(3){ top:12px; }

body.menuOpen .menuIcon span:nth-child(1){ top:6px; transform: rotate(45deg); }
body.menuOpen .menuIcon span:nth-child(2){ opacity:0; transform: translateX(6px); }
body.menuOpen .menuIcon span:nth-child(3){ top:6px; transform: rotate(-45deg); }

/* Sheet */
body.menuOpen{ overflow:hidden; }
body.menuOpen .page{ filter: blur(6px) brightness(.78); }

.sheet{ position:fixed; inset:0; z-index:80; pointer-events:none; }
.sheet__backdrop{
  position:absolute; inset:0;
  border:0;
  background: rgba(0,0,0,.78);
  opacity:0;
  transition: opacity .22s ease;
  cursor:pointer;
}
.sheet__panel{
  position:absolute;
  right: 14px;
  top: calc(70px + env(safe-area-inset-top));
  width: min(360px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  padding: 14px;
  transform: translateY(-8px) scale(.98);
  opacity:0;
  transition: transform .22s var(--ease), opacity .22s ease;
}
.sheet__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.sheet__title{ font-weight:950; }
.sheet__close{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,240,255,.88);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
}
.sheet__nav{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sheet__link{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.sheet__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.sheet__cta{ margin-top:12px; }
.sheet__hint{ margin-top:10px; color: rgba(238,240,255,.55); font-size:12.5px; text-align:center; }

body.menuOpen .sheet{ pointer-events:auto; }
body.menuOpen .sheet__backdrop{ opacity:1; }
body.menuOpen .sheet__panel{ opacity:1; transform: translateY(0) scale(1); }
@media (max-width: 520px){
  .sheet__panel{ left:12px; right:12px; width:auto; }
}

/* ===== CHAT ===== */
.chat{ margin-top: 12px; }
.chat__log{
  height: 320px;
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
@media (max-width: 520px){
  .chat__log{ height: 260px; }
}
.chatMsg{
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.chatMsg__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}
.chatMsg__name{ font-weight: 950; font-size: 13px; }
.chatMsg__time{ font-size: 11px; color: rgba(238,240,255,.55); }
.chatMsg__text{ color: rgba(238,240,255,.86); line-height: 1.4; font-size: 13px; }

.chatMsg--system{
  background: rgba(255,255,255,.02);
  border-style: dashed;
  color: rgba(238,240,255,.68);
}

.chat__bar{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.chat__input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
}
.chat__send{ flex: 0 0 auto; }
.chat__hint{
  margin-top: 8px;
  color: rgba(238,240,255,.55);
  font-size: 12.5px;
}

/* ===== Modal (Username) ===== */
.modal{
  position: fixed;
  inset:0;
  z-index: 120;
  display:none;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
}
.modal__panel{
  position:absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.94);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  backdrop-filter: blur(18px);
  padding: 14px;
}
.modal__title{ font-weight: 950; font-size: 16px; }
.modal__text{ margin-top: 6px; color: rgba(238,240,255,.70); line-height: 1.45; }
.modal__input{
  width:100%;
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
}
.modal__actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

/* ===== Reduced motion =====
   FIX: don't kill hover transitions (that's what made hover feel "dead") */
@media (prefers-reduced-motion: reduce){
  .pill__ping{ animation: none !important; }
  .reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ===== Chat Username row ===== */
.chatUser{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.chatUser__label{ color: rgba(238,240,255,.62); font-size: 12px; }
.chatUser__name{ font-weight: 950; font-size: 12.5px; }
.chatUser__btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,240,255,.9);
  border-radius: 999px;
  padding: 6px 10px;
  cursor:pointer;
  font-weight: 900;
}

/* FIX: typo + make it valid */
.chatBadges{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}

/* Tick Effect */
.tick {
  animation: tick 0.3s ease-in-out;
}

@keyframes tick {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}