*{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,#263d7a,#07111f 58%,#02040a);
color:#fff
}
body{
overflow-x:hidden
}
.game-shell{
min-height:100vh;
padding-bottom:24px
}
.top-bar{
position:sticky;
top:0;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px 18px;
background:rgba(0,0,0,.42);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.1)
}
.top-bar h1{
font-size:clamp(1.4rem,4vw,2.6rem);
letter-spacing:.08em;
text-transform:uppercase
}
.top-bar p{
opacity:.75;
margin-top:4px
}
.top-btn,.next-btn,.choice-btn{
border:none;
cursor:pointer;
font-weight:1000
}
.top-btn{
min-height:46px;
border-radius:999px;
padding:11px 18px;
background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
color:white;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 24px rgba(0,0,0,.25)
}
.hud{
width:min(940px,94vw);
margin:18px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}
.hud div{
border-radius:20px;
padding:14px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.1)
}
.hud span{
display:block;
opacity:.65;
text-transform:uppercase;
font-size:.78rem;
font-weight:1000;
letter-spacing:.08em
}
.hud strong{
display:block;
margin-top:7px;
font-size:1.35rem
}
.game-card{
width:min(940px,94vw);
margin:0 auto;
border-radius:30px;
padding:24px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 28px 70px rgba(0,0,0,.42)
}
.meta-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:18px
}
.meta-row span{
border-radius:999px;
padding:8px 12px;
background:rgba(126,255,200,.14);
border:1px solid rgba(126,255,200,.25);
font-weight:1000
}
#questionEl{
font-size:clamp(1.35rem,4vw,2.4rem);
line-height:1.25;
margin-bottom:22px
}
.choices{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px
}
.choice-btn{
min-height:72px;
border-radius:20px;
padding:14px;
background:linear-gradient(180deg,#f8e3a0,#d7a84e);
color:#211505;
font-size:1.05rem;
box-shadow:0 14px 30px rgba(0,0,0,.28)
}
.choice-btn.correct{
background:linear-gradient(180deg,#7effc8,#1fb487);
color:#031b14
}
.choice-btn.wrong{
background:linear-gradient(180deg,#ff8e8e,#c93434);
color:#fff
}
.choice-btn:disabled{
cursor:default
}
.answer-box{
margin-top:18px;
border-radius:22px;
padding:16px;
background:rgba(0,0,0,.32);
border:1px solid rgba(255,255,255,.12);
line-height:1.55;
font-weight:800
}
.answer-box strong{
color:#7effc8
}
.next-btn{
width:100%;
margin-top:16px;
min-height:58px;
border-radius:20px;
background:linear-gradient(180deg,#7effc8,#1fb487);
color:#031b14;
font-size:1.05rem
}
.hidden{
display:none
}
@media(max-width:720px){
.top-bar{
align-items:stretch;
flex-direction:column
}
.hud{
grid-template-columns:1fr
}
.choices{
grid-template-columns:1fr
}
.game-card{
padding:18px;
border-radius:24px
}
}