*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

html,body{
min-height:100%;
background:
radial-gradient(circle at top,#273f8f,#061021 58%,#02040a);
color:#fff
}

body{
overflow-x:hidden
}

.shell{
min-height:100vh;
padding-bottom:30px
}

.topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:14px 18px;
background:rgba(0,0,0,.45);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.1)
}

.top-btn,.actions button,.start-btn{
border:none;
border-radius:999px;
padding:12px 18px;
font-weight:1000;
cursor:pointer;
color:#fff;
background:rgba(255,255,255,.12);
text-decoration:none
}

.title-wrap h1{
font-size:clamp(1.5rem,4vw,2.8rem);
text-transform:uppercase;
letter-spacing:.08em
}

.title-wrap p{
opacity:.72;
margin-top:4px
}

.avatar-select{
width:min(1000px,94vw);
margin:24px auto;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1)
}

.avatar-select h2{
margin-bottom:20px;
font-size:2rem;
text-align:center
}

.avatar-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
gap:14px
}

.avatar{
aspect-ratio:1;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.4rem;
background:rgba(255,255,255,.08);
border:2px solid transparent;
cursor:pointer;
transition:.2s;
animation:float 2.6s ease-in-out infinite
}

.avatar.selected{
border-color:#7effc8;
box-shadow:0 0 28px rgba(126,255,200,.6)
}

.avatar:hover{
transform:scale(1.08)
}

.start-btn{
width:100%;
margin-top:20px;
min-height:60px;
background:linear-gradient(180deg,#7effc8,#1fb487);
color:#031b14;
font-size:1rem
}

.players-bar{
width:min(1180px,96vw);
margin:20px auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px
}

.player-card{
padding:14px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
animation:float 2.8s ease-in-out infinite
}

.player-card.active{
outline:4px solid rgba(126,255,200,.9)
}

.player-emoji{
font-size:3rem
}

.player-name{
font-weight:1000
}

.player-score{
font-size:1.3rem;
font-weight:1000
}

.hud{
width:min(1180px,96vw);
margin:14px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}

.hud div{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1)
}

.hud span{
display:block;
opacity:.7;
font-size:.8rem;
text-transform:uppercase;
font-weight:1000
}

.hud strong{
display:block;
margin-top:6px;
font-size:1.4rem
}

.board{
width:min(1180px,96vw);
margin:0 auto;
display:grid;
grid-template-columns:repeat(6,1fr);
gap:8px
}

.category,.clue{
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight:1000;
border:1px solid rgba(255,255,255,.12)
}

.category{
min-height:78px;
padding:10px;
background:linear-gradient(180deg,#142d72,#081942)
}

.clue{
min-height:86px;
cursor:pointer;
background:linear-gradient(180deg,#f6db88,#cf9d35);
color:#1b1000;
font-size:1.4rem;
box-shadow:0 12px 24px rgba(0,0,0,.35)
}

.clue.used{
opacity:.2;
pointer-events:none
}

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.78);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
z-index:100
}

.hidden{
display:none
}

.card{
width:min(760px,94vw);
padding:24px;
border-radius:30px;
background:#081427;
border:1px solid rgba(255,255,255,.1)
}

.clue-meta{
margin-bottom:14px;
font-weight:1000;
opacity:.8
}

.card h2{
font-size:clamp(1.35rem,4vw,2.4rem);
line-height:1.3;
margin-bottom:18px
}

.buzz-area{
margin-bottom:14px;
padding:14px;
border-radius:18px;
background:rgba(126,255,200,.14);
font-weight:1000;
text-align:center;
animation:pulse .6s infinite alternate
}

input{
width:100%;
min-height:62px;
border:none;
border-radius:18px;
padding:14px 16px;
font-size:1.1rem;
font-weight:900;
margin-bottom:16px
}

.result-box{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
line-height:1.6;
font-weight:800;
margin-bottom:14px
}

.actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}

.primary-btn{
background:linear-gradient(180deg,#7effc8,#1fb487)!important;
color:#031b14!important
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

@keyframes pulse{
from{transform:scale(1)}
to{transform:scale(1.04)}
}

@media(max-width:760px){

.topbar{
flex-direction:column;
align-items:stretch
}

.players-bar{
grid-template-columns:1fr 1fr
}

.board{
grid-template-columns:repeat(2,1fr)
}

.actions{
grid-template-columns:1fr
}

.hud{
grid-template-columns:1fr
}

}

.buzz-area{
position:relative;
overflow:hidden;
}

.buzz-area::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
animation:thinkingSweep 1.4s linear infinite;
}

@keyframes thinkingSweep{
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}

.board{
grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(4px,1vw,8px);
}

.category{
min-height:clamp(42px,8vw,78px);
padding:clamp(4px,1.2vw,10px);
font-size:clamp(.48rem,1.6vw,.86rem);
line-height:1.1;
overflow:hidden;
word-break:break-word;
}

.clue{
min-height:clamp(42px,9vw,86px);
font-size:clamp(.8rem,3vw,1.4rem);
border-radius:clamp(8px,2vw,16px);
}

.players-bar{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(5px,1vw,12px);
}

.player-card{
padding:clamp(6px,1.5vw,14px);
border-radius:clamp(12px,3vw,24px);
min-width:0;
}

.player-emoji{
font-size:clamp(1.5rem,6vw,3rem);
}

.player-name{
font-size:clamp(.65rem,2.4vw,1rem);
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.player-score{
font-size:clamp(.8rem,3vw,1.3rem);
}

.hud{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(5px,1vw,12px);
}

.hud div{
padding:clamp(7px,2vw,14px);
border-radius:clamp(10px,2.5vw,18px);
}

.hud span{
font-size:clamp(.52rem,1.8vw,.8rem);
}

.hud strong{
font-size:clamp(.85rem,3vw,1.4rem);
}

.topbar{
gap:8px;
padding:10px;
}

.top-btn{
min-height:40px;
padding:9px 12px;
font-size:clamp(.72rem,2.5vw,1rem);
}

.title-wrap h1{
font-size:clamp(1.15rem,5vw,2.8rem);
}

.title-wrap p{
font-size:clamp(.68rem,2.5vw,1rem);
}

@media(max-width:760px){
.board{
grid-template-columns:repeat(6,minmax(0,1fr));
width:98vw;
gap:4px;
}

.category{
min-height:44px;
font-size:.48rem;
padding:4px 2px;
border-radius:8px;
}

.clue{
min-height:48px;
font-size:.82rem;
border-radius:9px;
}

.players-bar{
width:98vw;
grid-template-columns:repeat(4,minmax(0,1fr));
margin:8px auto;
}

.hud{
width:98vw;
grid-template-columns:repeat(3,minmax(0,1fr));
margin:8px auto;
}

.shell{
padding-bottom:12px;
}

.card{
width:96vw;
padding:16px;
border-radius:22px;
}

.card h2{
font-size:clamp(1.1rem,5vw,1.7rem);
}

input{
min-height:54px;
font-size:1rem;
}

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

@media(max-width:430px){
.category{
font-size:.42rem;
}

.clue{
font-size:.72rem;
min-height:44px;
}

.player-emoji{
font-size:1.45rem;
}
}

.avatar-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
gap:12px;
margin-top:18px;
}

.avatar{
min-height:64px;
border:none;
}