*{
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,#304b95,#07111f 58%,#02040a);
color:#fff
}

body{
overflow-x:hidden
}

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

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

.top-btn{
min-height:46px;
padding:10px 18px;
border-radius:999px;
border:none;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
font-weight:1000;
background:rgba(255,255,255,.12);
color:white
}

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

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

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

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

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

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

.game-card{
width:min(960px,94vw);
margin:0 auto;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 20px 60px rgba(0,0,0,.45)
}

.question-box{
margin-bottom:24px
}

.question-box h2{
font-size:clamp(1.3rem,3vw,2.2rem);
line-height:1.3
}

.answer-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:22px
}

.tile{
width:54px;
height:60px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.7rem;
font-weight:1000;
background:linear-gradient(180deg,#f9e4a8,#d7a94b);
color:#241500;
box-shadow:0 10px 24px rgba(0,0,0,.35)
}

.tile.space{
background:transparent;
box-shadow:none
}

.answer-input{
width:100%;
min-height:62px;
padding:14px 18px;
border-radius:20px;
border:none;
outline:none;
font-size:1.2rem;
font-weight:900;
text-transform:uppercase;
margin-bottom:18px
}

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

.game-btn{
min-height:60px;
border:none;
border-radius:18px;
font-size:1rem;
font-weight:1000;
cursor:pointer;
background:rgba(255,255,255,.12);
color:white
}

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

.game-btn.danger{
background:linear-gradient(180deg,#ff8e8e,#ca3737)
}

.result-box{
margin-top:18px;
padding:18px;
border-radius:20px;
background:rgba(0,0,0,.3);
line-height:1.6;
font-weight:800
}

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

.hidden{
display:none
}

@media(max-width:720px){

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

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

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

.tile{
width:46px;
height:54px;
font-size:1.4rem
}

}