*{
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,#17305a,#07101d 58%,#02040a);
color:#fff
}

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

.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,.08)
}

.top-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);
letter-spacing:.08em;
text-transform:uppercase
}

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

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

.hud div{
padding:12px;
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:.72rem;
font-weight:1000;
text-transform:uppercase
}

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

.timer-wrap{
width:min(1000px,96vw);
margin:0 auto 14px
}

.timer-bar{
height:18px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12)
}

.timer-fill{
height:100%;
width:100%;
background:linear-gradient(90deg,#7effc8,#22c55e,#facc15,#fb923c,#ef4444);
transition:width .9s linear
}

.game-card{
width:min(1000px,96vw);
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 24px 70px rgba(0,0,0,.45)
}

.flag-stage{
position:relative;
display:flex;
justify-content:center;
align-items:center;
padding:30px 0 38px
}

.glow-ring{
position:absolute;
width:240px;
height:240px;
border-radius:50%;
background:radial-gradient(circle,#7effc833 0%,transparent 72%);
filter:blur(10px)
}

.flag-holder{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-width:320px;
min-height:220px;
padding:20px;
border-radius:28px;
background:rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 40px rgba(126,255,200,.15)
}

.flag-holder .flag{
transform:scale(6);
image-rendering:auto;
animation:wave 2.8s ease-in-out infinite
}

@keyframes wave{
0%{transform:scale(6) rotate(-1deg)}
50%{transform:scale(6.1) rotate(1deg)}
100%{transform:scale(6) rotate(-1deg)}
}

.choices{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}

.choice-btn{
border:none;
border-radius:22px;
padding:20px 16px;
font-size:1rem;
font-weight:1000;
cursor:pointer;
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.1);
transition:.15s transform ease,.15s background ease
}

.choice-btn:hover{
transform:translateY(-2px)
}

.choice-btn.correct{
background:#15803d;
color:#fff
}

.choice-btn.wrong{
background:#b91c1c;
color:#fff
}

.result-box{
margin-top:18px;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.08);
font-weight:900;
line-height:1.6
}

.hidden{
display:none
}

@media(max-width:700px){

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

.hud{
width:98vw;
gap:5px
}

.hud div{
padding:8px;
border-radius:12px
}

.hud span{
font-size:.52rem
}

.hud strong{
font-size:.9rem
}

.timer-wrap{
width:98vw
}

.game-card{
width:98vw;
padding:14px;
border-radius:20px
}

.flag-holder{
min-width:100%;
min-height:180px;
padding:10px;
border-radius:18px
}

.flag-holder .flag{
transform:scale(4.2)
}

@keyframes wave{
0%{transform:scale(4.2) rotate(-1deg)}
50%{transform:scale(4.3) rotate(1deg)}
100%{transform:scale(4.2) rotate(-1deg)}
}

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

.choice-btn{
padding:16px 12px;
border-radius:16px;
font-size:.92rem
}

}



.flag-holder .flag{
display:inline-block !important;
width:32px !important;
height:32px !important;
background-repeat:no-repeat !important;
}


.flag-holder.f32 .flag{
display:inline-block !important;
width:32px !important;
height:32px !important;
background-repeat:no-repeat !important;
}


.flag-holder{
min-width:220px;
min-height:140px;
}

.flag-holder.f32 .flag{
transform:scale(2.6) !important;
image-rendering:auto !important;
}

@keyframes wave{
0%{transform:scale(4) rotate(-1deg)}
50%{transform:scale(2.68) rotate(1deg)}
100%{transform:scale(4) rotate(-1deg)}
}

@media(max-width:700px){
.flag-holder{
min-height:120px;
}

.flag-holder.f32 .flag{
transform:scale(2.2) !important;
}

@keyframes wave{
0%{transform:scale(3.2) rotate(-1deg)}
50%{transform:scale(2.28) rotate(1deg)}
100%{transform:scale(3.2) rotate(-1deg)}
}
}