:root{
  --bg:#08070a;
  --gold:#ffb347;
  --orange:#ff5e1a;
  --red:#e01414;
  --card:#141014;
  --line:rgba(255,150,60,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  touch-action:pan-y;
  overscroll-behavior-x:none;
}
body{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  touch-action:pan-y;
  overscroll-behavior-x:none;
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(255,90,20,.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 90%, rgba(224,20,20,.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(255,180,60,.12), transparent 60%),
    var(--bg);
  color:#f5f0e8;
  font-family:'Oswald',sans-serif;
  min-height:100%;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

#embers{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}

/* ---------- Header ---------- */
.topbar{
  position:relative; z-index:2;
  flex-shrink:0;
  background:#000;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 20px rgba(255,94,26,.15);
}
.topbar-logo{ height:60px; width:auto; filter:invert(1) brightness(1.05); }

/* ---------- Stage ---------- */
.stage{
  position:relative; z-index:1;
  overflow:hidden;
  flex:1;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.glow{
  position:absolute;
  top:-40px; left:50%; transform:translateX(-50%);
  width:90%; max-width:600px; height:300px;
  background:radial-gradient(circle, rgba(255,120,30,.35), transparent 70%);
  filter:blur(30px);
  z-index:-1;
  animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{opacity:.6; transform:translateX(-50%) scale(1);}
  50%{opacity:1; transform:translateX(-50%) scale(1.08);}
}

.hero-logo{
  width:min(280px, 60vw);
  filter:drop-shadow(0 0 25px rgba(255,110,20,.45));
  margin-bottom:6px;
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:2px;
  font-size:15px;
  padding:7px 18px;
  border-radius:30px;
  margin:10px 0 4px;
}
.badge-live{
  background:linear-gradient(90deg,#e01414,#ff5e1a);
  box-shadow:0 0 18px rgba(255,60,20,.55);
  animation:flicker 1.8s ease-in-out infinite;
}
.badge-live .dot{
  width:8px; height:8px; border-radius:50%;
  background:#fff; display:inline-block;
  animation:blink 1.2s ease-in-out infinite;
}
.badge-offline{ background:#2c2c2c; color:#bbb; }
.badge-soon{ background:linear-gradient(90deg,#3a2410,#5a3210); color:var(--gold); border:1px solid var(--line); }

@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes flicker{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}

.stream-title{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:1px;
  font-size:clamp(20px,4vw,30px);
  margin:8px 0 22px;
  color:#fff;
  text-shadow:0 0 18px rgba(255,120,40,.35);
}

/* ---------- Player ---------- */
.player-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:var(--card);
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:0 0 0 1px rgba(255,140,50,.35), 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,90,20,.15);
}
.player-frame::before{
  content:'';
  position:absolute; inset:-2px;
  border-radius:18px;
  padding:2px;
  background:linear-gradient(120deg,var(--red),var(--orange),var(--gold),var(--orange),var(--red));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:borderFlow 6s linear infinite;
  z-index:2;
  pointer-events:none;
}
@keyframes borderFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.player-frame iframe{
  width:100%; height:100%; border:0; position:relative; z-index:1;
}
.player-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:#c9c1b6;
}
.flame-icon{ font-size:44px; filter:drop-shadow(0 0 14px rgba(255,110,20,.6)); }
.player-placeholder .small{ font-size:13px; opacity:.65; }

/* ---------- Social ---------- */
.social-row{
  margin-top:26px;
  margin-bottom:20px;
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
}
.social-row a{
  color:#e8ddce;
  text-decoration:none;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:.2s;
}
.social-row a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ---------- Footer ---------- */
.footer{
  position:relative; z-index:1;
  flex-shrink:0;
  text-align:center;
  font-size:11px;
  letter-spacing:1.5px;
  color:#8a8378;
  padding:30px 14px 30px;
}
.footer a{ color:var(--gold); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

@media (max-width:480px){
  .stage{ padding:16px 16px 16px; gap:0; }
  .glow{ height:220px; top:-20px; }
  .hero-logo{ width:min(190px, 50vw); margin-bottom:2px; }
  .badge{ font-size:13px; padding:5px 14px; margin:6px 0 2px; }
  .stream-title{ font-size:16px; margin:6px 0 14px; }
  .social-row{ margin-top:16px; margin-bottom:6px; gap:16px; }
  .footer{ padding:16px 14px 20px; font-size:10px; }
  .topbar{ padding:8px 0; }
  .topbar-logo{ height:44px; }
}