*{
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,#13325e,#07101f 60%,#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,.42);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.08)
}

.top-btn,.actions button,.mode-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(1100px,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;
font-size:.74rem;
opacity:.72;
font-weight:1000;
text-transform:uppercase
}

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

.mode-bar{
width:min(1100px,96vw);
margin:0 auto 14px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}

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

.timer-wrap{
width:min(1100px,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(1100px,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)
}

.airport-board{
padding:26px;
border-radius:24px;
background:#08111d;
border:1px solid rgba(255,255,255,.08);
text-align:center;
box-shadow:inset 0 0 30px rgba(0,0,0,.55)
}

.board-label{
font-size:.82rem;
letter-spacing:.28em;
opacity:.65;
font-weight:1000
}

.place-name{
margin:18px 0;
font-size:clamp(2rem,8vw,4.5rem);
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
color:#7effc8;
text-shadow:0 0 18px rgba(126,255,200,.45)
}

.answer-slots{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:24px 0
}

.slot{
width:44px;
height:56px;
border-radius:12px;
background:rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
font-weight:1000;
font-size:1.25rem;
border:1px solid rgba(255,255,255,.1)
}

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

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

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

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

.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
}

.mode-bar{
width:98vw;
gap:6px
}

.mode-btn{
padding:10px 8px;
font-size:.72rem
}

.timer-wrap{
width:98vw
}

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

.airport-board{
padding:16px;
border-radius:18px
}

.place-name{
font-size:clamp(1.5rem,9vw,3rem)
}

.slot{
width:34px;
height:46px;
font-size:1rem
}

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

}