@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&display=swap');


:root{
--bg:#07070b;
--text:#f4f4f5;
--accent:#8b5cf6;
}


/* KICK */
.kick-icon:hover svg{
color:#53FC18;
filter:drop-shadow(0 0 10px #53FC18);
transform:translateY(-4px) scale(1.08);
}

/* Smooth transitions */
.social-icons svg{
transition:
transform .25s ease,
filter .25s ease,
color .25s ease;
}

.live-status-banner{

display:flex;

align-items:center;
justify-content:center;

gap:.7rem;

margin:1.2rem auto 0;

width:fit-content;

padding:1.05rem 1.8rem;

min-height:72px;

border:1px solid rgba(139,92,246,.18);

background:rgba(139,92,246,.05);

backdrop-filter:blur(12px);

font-family:'Orbitron',sans-serif;

font-size:.9rem;

letter-spacing:.12em;

text-transform:uppercase;

color:rgba(255,255,255,.78);

box-shadow:
0 0 18px rgba(139,92,246,.08);

}

.live-status-label{

font-size:.72rem;

letter-spacing:.22em;

opacity:.5;

text-transform:uppercase;

white-space:nowrap;

}

.live-status-divider{

width:1px;
height:18px;

background:rgba(255,255,255,.12);

}

.live-dot{

width:14px;
height:14px;

border-radius:999px;

background:#ef4444;

box-shadow:0 0 12px #ef4444;

animation:livePulse 1.8s infinite;

}

.live-status-banner.live .live-dot{

background:#22c55e;

box-shadow:0 0 14px #22c55e;

}

@keyframes livePulse{

0%{
opacity:1;
transform:scale(1);
}

50%{
opacity:.55;
transform:scale(1.25);
}

100%{
opacity:1;
transform:scale(1);
}

}

*{
margin:0;
padding:0;
box-sizing:border-box;
cursor:none;
}

body{
background:var(--bg);
color:var(--text);
font-family:Arial,sans-serif;
overflow-x:hidden;
transition:.3s ease;
}

.roast-box{

margin-top:2rem;

display:flex;
justify-content:center;
align-items:center;

min-height:40px;

}

#roastText{

font-family:'Orbitron',sans-serif;

font-size:1rem;
font-weight:600;

letter-spacing:.18em;
text-transform:uppercase;

color:rgba(255,255,255,.58);

padding:.6rem 1.4rem;

border:1px solid rgba(139,92,246,.18);

background:rgba(139,92,246,.04);

backdrop-filter:blur(10px);

box-shadow:
0 0 12px rgba(139,92,246,.08),
inset 0 0 12px rgba(139,92,246,.05);

position:relative;

transition:
opacity .4s ease,
transform .3s ease;

}

#roastText::before,
#roastText::after{

position:absolute;
top:50%;

transform:translateY(-50%);

color:#8b5cf6;

font-size:1.2rem;

opacity:.7;

}

#roastText{

animation:roastPulse 4s ease-in-out infinite;

}

@keyframes roastPulse{

0%{
box-shadow:
0 0 12px rgba(139,92,246,.08);
}

50%{
box-shadow:
0 0 20px rgba(139,92,246,.18);
}

100%{
box-shadow:
0 0 12px rgba(139,92,246,.08);
}

}

.cursor-glow{
position:fixed;
width:120px;
height:120px;
border-radius:999px;
background:radial-gradient(circle, rgba(139,92,246,.28), transparent 70%);
pointer-events:none;
z-index:9999;
transform:translate(-50%,-50%);
mix-blend-mode:screen;
transition:width .2s ease,height .2s ease;
}

.cursor-dot{
position:fixed;
width:12px;
height:12px;
background:#8b5cf6;
border-radius:999px;
pointer-events:none;
z-index:10000;
transform:translate(-50%,-50%);
box-shadow:0 0 18px #8b5cf6;
}

.scanlines{
position:fixed;
inset:0;
background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,.02),
rgba(255,255,255,.02) 1px,
transparent 1px,
transparent 4px
);
pointer-events:none;
}

.grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:50px 50px;
opacity:.2;
}

.noise{
position:fixed;
inset:0;
background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
background-size:4px 4px;
opacity:.12;
}

.background-glow{
position:fixed;
inset:0;
background:
radial-gradient(circle at top left, rgba(139,92,246,.45), transparent 30%),
radial-gradient(circle at bottom right, rgba(168,85,247,.25), transparent 30%);
filter:blur(40px);
}

.orb{
position:fixed;
border-radius:999px;
background:rgba(139,92,246,.18);
filter:blur(90px);
}

.orb-1{
width:250px;
height:250px;
top:10%;
left:10%;
}

.orb-2{
width:300px;
height:300px;
bottom:5%;
right:5%;
}

.orb-3{
width:180px;
height:180px;
top:40%;
right:30%;
}

.corner {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.08);
}

.top-left {
  top: 20px;
  left: 20px;
  border-right: none;
  border-bottom: none;
}

.top-right {
  top: 20px;
  right: 20px;
  border-left: none;
  border-bottom: none;
}

.bottom-left {
  bottom: 20px;
  left: 20px;
  border-right: none;
  border-top: none;
}

.bottom-right {
  bottom: 20px;
  right: 20px;
  border-left: none;
  border-top: none;
}

.container{
position:relative;
z-index:2;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:2rem;
}

.logo{
font-family:'Rajdhani',sans-serif;

font-size:1.6rem;
font-weight:700;

letter-spacing:.14em;

color:white;

text-shadow:
0 0 8px rgba(139,92,246,.35),
0 0 20px rgba(139,92,246,.18);

opacity:.96;

position:relative;

}

.logo::after{

content:'';

position:absolute;
left:0;
bottom:-6px;

width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
rgba(139,92,246,.9),
transparent
);

opacity:.6;

animation:logoScan 3s linear infinite;

}

@keyframes logoScan{

0%{
transform:translateX(-20%);
opacity:.2;
}

50%{
transform:translateX(0%);
opacity:.8;
}

100%{
transform:translateX(20%);
opacity:.2;
}

}

.nav-right{
display:flex;
gap:1rem;
align-items:center;
}

.live-pill{
display:flex;
align-items:center;
gap:.5rem;
font-size:.8rem;
}

.dot{
width:10px;
height:10px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 12px #22c55e;
}


.hud {
  position: absolute;
  font-size: 0.7rem;
  opacity: 0.45;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  letter-spacing: 0.12em;
}

.hud-left {
  top: 120px;
  left: 35px;
}

.hud-right {

top:38px;
right:38px;

text-align:right;

}

.hero{

padding:0 2rem 2rem;

margin-top:-10px;

text-align:center;

}

.tag{
opacity:.6;
letter-spacing:.12em;
}

.logo-text{

position:relative;
display:inline-block;

font-family:'Orbitron',sans-serif;
font-size:clamp(4rem, 10vw, 7rem);
font-weight:900;
letter-spacing:.03em;

color:white;

text-shadow:
0 0 8px rgba(139,92,246,.7),
0 0 20px rgba(139,92,246,.45),
0 0 40px rgba(139,92,246,.25);

animation:glowPulse 4s ease-in-out infinite;

}

.logo-text::before,
.logo-text::after{

content:attr(data-text);

position:absolute;
inset:0;

pointer-events:none;
opacity:.18;

}

.logo-text::before{

transform:translate(-1px,.5px);
color:#8b5cf6;
filter:blur(.4px);

}

.logo-text::after{

transform:translate(1px,-.5px);
color:#60a5fa;
filter:blur(.4px);

}

@keyframes glowPulse{

0%{

text-shadow:
0 0 8px rgba(139,92,246,.6),
0 0 20px rgba(139,92,246,.35);

}

50%{

text-shadow:
0 0 14px rgba(139,92,246,.85),
0 0 30px rgba(139,92,246,.55),
0 0 55px rgba(139,92,246,.3);

}

100%{

text-shadow:
0 0 8px rgba(139,92,246,.6),
0 0 20px rgba(139,92,246,.35);

}

}

.glitch-line{
width:220px;
height:2px;
background:linear-gradient(to right, transparent, var(--accent), transparent);
margin:1rem auto;
}

.subtitle{
max-width:800px;
margin:auto;
opacity:.75;
line-height:1.7;
}

.social-icons{
display:flex;
justify-content:center;
gap:2rem;
margin-top:2.5rem;
flex-wrap:wrap;
}

.social-icons a{
color:var(--text);
transition:.25s ease;
}

.social-icons a:hover{
transform:translateY(-8px) scale(1.1);
color:var(--accent);
}

.social-icons svg{
width:42px;
height:42px;
}

.live-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,360px));

justify-content:center;

gap:1.6rem;

max-width:1200px;

margin:2.2rem auto 0;

}

.stream-card{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

overflow:hidden;

backdrop-filter:blur(14px);

display:flex;

flex-direction:column;

}

.stream-container{

position:relative;

width:100%;

height:260px;

overflow:hidden;

}

.stream-card iframe{

width:100%;

height:100%;

border:none;

display:block;

}

.watch-btn{

display:flex;

align-items:center;

justify-content:center;

padding:1.25rem;

min-height:32px;

background:linear-gradient(
90deg,
#7c4dff,
#9b6dff
);

color:white;

text-decoration:none;

font-weight:800;

letter-spacing:.08em;

font-size:1rem;

transition:
transform .25s ease,
filter .25s ease;

}

.watch-btn:hover{

transform:translateY(2px);

filter:brightness(1.08);

}

.stats-bar{

margin-top:-50px;

padding-top:0;

display:flex;

justify-content:center;

align-items:flex-start;

gap:3.5rem;

flex-wrap:wrap;

width:100%;

max-width:1100px;

margin:0 auto;

padding:.5rem 2rem 0;

position:relative;

z-index:5;

}

.stat{

display:flex;

flex-direction:column;

align-items:center;

min-width:110px;

}

.stat-label{

font-size:.72rem;

letter-spacing:.16em;

opacity:.55;

text-transform:uppercase;

margin-bottom:.35rem;

text-align:center;

line-height:1.3;

}

.stat-value{

font-family:'Orbitron',sans-serif;

font-size:2rem;

font-weight:800;

line-height:1;

}

#youtubeEmbed{
display:none;
}

#twitchEmbed{
display:none;
}

.offline-state{

width:100%;
height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

}

.offline-title{

font-family:'Orbitron',sans-serif;

font-size:1.1rem;

font-weight:800;

letter-spacing:.12em;

margin-bottom:.8rem;

color:white;

}

.offline-sub{

font-size:.8rem;

opacity:.6;

letter-spacing:.08em;

text-transform:uppercase;

}

@media (max-width:1300px){

.hud{

display:none;

}

.logo{

display:flex;

justify-content:center;

width:100%;

text-align:center;

align-self:flex-start;

font-size:2rem;

}

}


@media (max-width:768px){

.hud,
.corner{
display:none;
}

*{
cursor:auto;
}

.cursor-glow,
.cursor-dot{
display:none;
}

nav{

flex-direction:column;

align-items:center;

justify-content:center;

padding:1.2rem 1rem;

gap:1.6rem;

}

.logo{

display:flex;

justify-content:center;

width:100%;

text-align:center;

align-self:flex-start;

font-size:2rem;

}

.stats-bar{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:1.4rem 2rem;

width:100%;

max-width:340px;

margin:auto;

justify-items:center;

}

.stat{

min-width:auto;

}

.stat-label{

font-size:.52rem;

letter-spacing:.12em;

text-align:center;

}

.stat-value{

font-size:1.4rem;

line-height:1;

}

.hero{

padding:1.5rem;

overflow:hidden;

}

.logo-text,
h1{

font-size:clamp(2.8rem, 13vw, 7rem);

line-height:.9;

letter-spacing:-0.02em;

white-space:nowrap;

transform:scaleX(.92);

max-width:100%;

text-align:center;

margin:auto;

}

.roast-box{

width:100%;

padding:0 1rem;

margin-bottom:2rem;

}

#roastText{

width:min(90vw,700px);

max-width:100%;

font-size:clamp(.55rem,2.4vw,.9rem);

letter-spacing:.08em;

padding:.7rem .9rem;

line-height:1.5;

text-align:center;

overflow-wrap:break-word;

}

#roastText::before,
#roastText::after{

display:none;

}

.social-icons{

gap:1.2rem;

flex-wrap:wrap;

justify-content:center;

}

.social-icons svg{

width:32px;
height:32px;

}

.live-grid{

grid-template-columns:1fr;

gap:1.5rem;

}

iframe{

min-height:220px;

}

.glitch-line{

width:140px;

}

}