:root{

--navy:#06264a;
--teal:#27c9b0;
--light:#f7fbfb;
--slate:#e7eef2;

--text:#12304f;

}


*{
box-sizing:border-box;
}


html,body{

margin:0;
height:100%;

font-family:
Inter,
Manrope,
Arial,
sans-serif;

}



body{

background:#021421;

overflow-x:hidden;

}



/* stadium background */

.background{

position:fixed;
inset:0;

background-image:
linear-gradient(
90deg,
rgba(1,15,30,.95),
rgba(1,15,30,.35)
),
url("assets/courtcast-broadcast-event-bg-v1.png");


background-size:cover;

background-position:
75% center;


z-index:-1;

}



/* main */

.welcome{

min-height:100dvh;

display:flex;

justify-content:center;

align-items:center;

padding:12px;

}


/* white outer card */

.glass-card{

width:min(390px,100%);

background:
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(230,239,244,.96)
);

border-radius:24px;

padding:14px;

}



/* logo */

.logo-box{

background:white;

border-radius:16px;

padding:16px;

display:flex;

justify-content:center;

align-items:center;

aspect-ratio:16/7;

}


.logo-box img{

width:85%;

max-width:280px;

}


.logo-box img{

width:100%;

max-width:300px;

}



/* tagline */

.tagline{

text-align:center;

font-size:13px;

line-height:1.35;

font-weight:600;

color:#344b62;

padding:14px 12px;

margin:0;

}



/* event */


.event-card{

background:

rgba(255,255,255,.75);


border-radius:18px;

padding:16px;

}



.event-card small,
.system-card h2{

font-size:11px;

letter-spacing:.18em;

font-weight:800;

color:#668092;

}



.event-card h1{

font-size:22px;

line-height:1.2;

margin:12px 0 8px;

color:var(--navy);

}



.event-card p{

margin:0;

color:#657c90;

font-size:15px;

line-height:1.5;

}



/* stats */

.stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-top:20px;

}



.stats div{

background:#eef8f7;

border-radius:14px;

padding:10px;

text-align:center;

}



.stats strong{

display:block;

font-size:34px;

color:#22bda7;

}



.stats span{

font-size:11px;

color:#557080;

}




/* button */


.live-button{

width:100%;

height:48px;

margin:20px 0;


border:0;

border-radius:12px;

background:

linear-gradient(
90deg,
#36cdb4,
#27bca8
);


font-weight:900;

letter-spacing:.08em;

color:white;

cursor:pointer;

}



/* system */

.system-card{

background:

rgba(255,255,255,.75);


border-radius:18px;

padding:14px;


}



.system-card h2{

margin-top:0;

}



.status{

display:flex;

align-items:center;

gap:12px;

padding:8px 0;

font-size:14px;

color:#29445c;

}



.status i{

width:9px;

height:9px;

background:#28d79c;

border-radius:50%;

box-shadow:

0 0 12px #28d79c;

}



@media(max-height:700px){

.glass-card{

transform:scale(.9);

}

}


@media(max-width:430px) and (max-height:850px){

.glass-card{

padding:12px;

}


.logo-box{

padding:12px;

}


.event-card h1{

font-size:21px;

}


.tagline{

font-size:12px;

padding:10px;

}


.stats strong{

font-size:28px;

}


.live-button{

margin:14px 0;

}


.status{

padding:5px 0;

font-size:13px;

}

}