/* SameSpot Module 1 CSS */
:root{
 --bg:#0b1020;--panel:rgba(255,255,255,.08);--text:#f5f7ff;
 --muted:#b9bfd8;--p1:#7c5cff;--p2:#00d4ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Poppins,Arial,sans-serif;
background-color:var(--bg);
background-image:
radial-gradient(ellipse 900px 520px at 50% -12%,rgba(255,221,150,.09),transparent 62%),
linear-gradient(180deg,#07080f,#0d1120 55%,#090b14);
color:var(--text);
overflow-x:hidden;
min-height:100vh;
position:relative;
}
body::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-2;
pointer-events:none;
background:radial-gradient(circle at 12% 22%,rgba(220,38,38,.22),transparent 38%);
animation:sirenRed 4s ease-in-out infinite;
}
body::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-2;
pointer-events:none;
background:
radial-gradient(circle at 88% 78%,rgba(37,99,235,.26),transparent 38%),
radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 100%);
animation:sirenBlue 4s ease-in-out infinite;
}
@keyframes sirenRed{
0%,100%{opacity:.45}
50%{opacity:1}
}
@keyframes sirenBlue{
0%,100%{opacity:1}
50%{opacity:.45}
}
.container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
}
.logo{font-size:2rem;font-weight:800}
.logo span{
background:linear-gradient(90deg,var(--p1),var(--p2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
nav a{
color:var(--muted);
text-decoration:none;
margin-left:22px;
transition:.25s;
}
nav a:hover{color:#fff}
.loginBtn,.primary,.cta button{
background:linear-gradient(90deg,var(--p1),var(--p2));
border:none;
padding:14px 28px;
border-radius:999px;
color:#fff;
font-weight:700;
cursor:pointer;
}
.secondary{
background:transparent;
border:1px solid rgba(255,255,255,.2);
padding:14px 28px;
border-radius:999px;
color:#fff;
cursor:pointer;
}
.hero{
display:flex;
justify-content:center;
align-items:center;
gap:60px;
padding:80px 20px;
max-width:1200px;
margin:auto;
flex-wrap:wrap;
}
.heroLeft{max-width:560px}
.heroLeft h1{font-size:4rem;line-height:1.1}
.heroLeft h1 span{
background:linear-gradient(90deg,var(--p1),var(--p2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.heroLeft p{margin-top:20px;color:var(--muted);font-size:1.1rem}
.heroButtons{display:flex;gap:16px;margin-top:30px}
.phone{
width:330px;
background:var(--panel);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.15);
border-radius:28px;
padding:24px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.phoneHeader{font-weight:700;margin-bottom:16px}
.question{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.option{
padding:14px;
margin-bottom:10px;
border-radius:14px;
background:rgba(255,255,255,.08);
transition:.25s;
}
.option:hover{transform:translateX(6px);background:rgba(255,255,255,.13)}
.games{padding:70px 20px;max-width:1200px;margin:auto}
.games h2{text-align:center;font-size:2.4rem;margin-bottom:40px}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:24px;
}
.card{
background:var(--panel);
border:1px solid rgba(255,255,255,.1);
border-radius:24px;
padding:28px;
text-align:center;
transition:.3s;
backdrop-filter:blur(14px);
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,212,255,.15);
}
.emoji{font-size:2.5rem;margin-bottom:10px}
.stats{
display:flex;
justify-content:center;
gap:30px;
padding:40px 20px;
flex-wrap:wrap;
}
.stat{
background:var(--panel);
padding:25px 35px;
border-radius:18px;
text-align:center;
}
.cta{
text-align:center;
padding:80px 20px;
}
footer{
padding:40px;
text-align:center;
color:var(--muted);
}
@media(max-width:768px){
nav{display:none}
.heroLeft h1{font-size:2.6rem}
.hero{padding-top:40px}
.heroButtons{flex-direction:column}
.phone{width:100%}
}

/* Chat widget */
.chatBox{
margin-top:25px;
background:var(--panel);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
backdrop-filter:blur(14px);
}
.chatBox h3{margin-bottom:12px;font-size:1.1rem}
.chatMessages{
max-height:220px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
padding-right:4px;
}
.chatMessage{
background:rgba(255,255,255,.06);
border-radius:12px;
padding:8px 12px;
font-size:.92rem;
}
.chatUser{font-weight:700;color:var(--p2);margin-right:6px;display:inline}
.chatText{color:var(--text);word-break:break-word}
.chatTime{color:var(--muted);font-size:.72rem;margin-top:4px}
.chatForm{
display:flex;
gap:10px;
margin-top:14px;
}
.chatForm input{
flex:1;
padding:12px 14px;
border:none;
border-radius:12px;
font-size:15px;
font-family:inherit;
}
.chatForm button{
background:linear-gradient(90deg,var(--p1),var(--p2));
border:none;
padding:0 20px;
border-radius:12px;
color:#fff;
font-weight:700;
cursor:pointer;
}
.chatMessages::-webkit-scrollbar{width:6px}
.chatMessages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:10px}

/* Host badge in player lists */
.player.host{
border:1px solid rgba(255,209,102,.4);
background:rgba(255,209,102,.08);
display:flex;
align-items:center;
gap:8px;
}
.hostTag{
background:linear-gradient(90deg,#ffd166,#ffb347);
color:#1a1a1a;
font-size:.7rem;
font-weight:800;
padding:2px 10px;
border-radius:999px;
text-transform:uppercase;
letter-spacing:.5px;
}