body{
margin:0;
padding:0;
font-family:Arial,sans-serif;
background:#05070f;
color:#fff;
}

.hero{
padding:50px 20px 25px;
text-align:center;
max-width:1200px;
margin:0 auto;
}

.hero h1{
margin:0 0 15px;
line-height:1;
}

.hero p{
font-size:22px;
max-width:900px;
margin:auto;
line-height:1.6;
opacity:.9;
}

.live-grid{
display:grid;
grid-template-columns:repeat(3,minmax(320px,1fr));
gap:28px;
max-width:1450px;
margin:25px auto 80px;
padding:0 30px;
}

.live-box{
position:relative;
padding:45px 30px;
border-radius:30px;
background:
linear-gradient(145deg,
rgba(12,18,35,.95),
rgba(4,8,18,.98));
border:1px solid rgba(255,255,255,.06);
box-shadow:
0 30px 80px rgba(0,0,0,.65),
inset 0 0 25px rgba(255,255,255,.03);
text-align:center;
overflow:hidden;
backdrop-filter:blur(20px);
transition:.35s ease;
}

.live-box::before{
content:"";
position:absolute;
top:-40%;
left:-40%;
width:180%;
height:180%;
background:
radial-gradient(circle,
rgba(56,189,248,.18),
transparent 60%);
animation:energyRotate 10s linear infinite;
}

.live-box:hover{
transform:translateY(-12px);
box-shadow:
0 45px 110px rgba(0,0,0,.75),
0 0 40px rgba(56,189,248,.18);
}

.live-box.highlight{
border:2px solid rgba(250,204,21,.35);
box-shadow:
0 0 70px rgba(250,204,21,.22),
0 40px 110px rgba(0,0,0,.8);
animation:corePulse 3s infinite ease-in-out;
}

.live-box.highlight::before{
background:
radial-gradient(circle,
rgba(250,204,21,.28),
transparent 60%);
}

.live-box.highlight:hover{
transform:scale(1.1) translateY(-6px);
}

.live-box span{
display:block;
font-size:14px;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:18px;
opacity:.8;
font-weight:700;
position:relative;
z-index:2;
}

.live-box h2{
font-size:clamp(38px,3vw,56px);
font-weight:900;
line-height:1.05;
margin:0;
letter-spacing:-1px;
position:relative;
z-index:2;
text-shadow:
0 0 25px rgba(255,255,255,.12);
font-variant-numeric:tabular-nums;
}

.live-box.highlight h2{
color:#facc15;
text-shadow:
0 0 35px rgba(250,204,21,.35);
}

.live-box p{
font-size:24px;
font-weight:800;
margin-top:20px;
color:#22c55e;
position:relative;
z-index:2;
text-shadow:
0 0 20px rgba(34,197,94,.2);
}

.status-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
max-width:1100px;
margin:70px auto;
padding:0 30px;
}

.status-box{
background:#111827;
padding:30px;
border-radius:20px;
text-align:center;
}

.status-box h3{
margin-bottom:15px;
font-size:24px;
}

.status-box p{
font-size:34px;
font-weight:700;
}

.countdowns{
display:flex;
justify-content:center;
gap:60px;
margin:70px 0;
text-align:center;
}

.countdowns h4{
font-size:22px;
margin-bottom:10px;
}

.countdowns p{
font-size:34px;
font-weight:700;
color:#38bdf8;
}

.live-status{
text-align:center;
padding:40px 20px;
}

.live-status h3{
font-size:34px;
margin-bottom:25px;
}

.stats{
display:flex;
justify-content:center;
gap:40px;
font-size:24px;
font-weight:700;
}

.info{
max-width:900px;
margin:35px auto 25px;
padding:0 20px;
text-align:center;
}

.info h3{
font-size:38px;
margin-bottom:25px;
}

.info p{
font-size:21px;
line-height:1.8;
opacity:.9;
}

.cta{
text-align:center;
padding:60px 20px 100px;
}

.cta a{
display:inline-block;
padding:22px 45px;
background:#facc15;
color:#000;
font-size:22px;
font-weight:700;
border-radius:16px;
text-decoration:none;
transition:.3s;
}

.cta a:hover{
transform:scale(1.05);
}

@media(max-width:1000px){
.live-grid{
grid-template-columns:1fr;
}

.status-grid{
grid-template-columns:1fr;
}

.stats{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin-top:20px;
}

.stats div{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
min-width:160px;
border-radius:14px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
white-space:nowrap;
font-size:18px;
font-weight:700;
box-sizing:border-box;
}

.countdowns{
flex-direction:column;
gap:30px;
}
}
@keyframes energyRotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

@keyframes corePulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.03);
}
100%{
transform:scale(1);
}
}
.legal-footer{
margin:80px auto 40px;
padding:30px 20px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.legal-footer a{
color:rgba(255,255,255,.75);
font-size:15px;
text-decoration:none;
transition:.25s ease;
}

.legal-footer a:hover{
color:#facc15;
}
.hero-rules{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:12px;
margin-bottom:0;
}

.hero-rules div{
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
font-size:13px;
font-weight:700;
line-height:1;
white-space:nowrap;
box-shadow:
0 6px 16px rgba(0,0,0,.18);
}