*{
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
}

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

.hud{
width:min(980px,96vw);
margin:14px auto;
display:grid;
grid-template-columns:repeat(3,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:.76rem;
text-transform:uppercase;
font-weight:1000
}

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

.game-card{
width:min(980px,96vw);
margin:0 auto;
padding:22px;
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)
}

.category-wrap{
display:flex;
justify-content:center;
margin-bottom:18px
}

.category-pill{
padding:10px 16px;
border-radius:999px;
background:rgba(126,255,200,.14);
font-weight:1000;
font-size:.9rem
}

.emoji-wrap{
display:flex;
justify-content:center;
align-items:center;
padding:28px 0
}

.emoji-puzzle{
font-size:clamp(3rem,14vw,7rem);
line-height:1.2;
text-align:center;
word-break:break-word;
padding:24px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 0 40px rgba(126,255,200,.18)
}

.input-wrap{
margin-top:18px
}

input{
width:100%;
min-height:60px;
border:none;
border-radius:18px;
padding:14px 16px;
font-size:1.1rem;
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:.55rem
}

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

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

.emoji-puzzle{
font-size:clamp(2.6rem,16vw,5rem);
padding:16px;
border-radius:18px
}

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

}

.timer-wrap{
width:min(980px,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);
box-shadow:inset 0 2px 8px rgba(0,0,0,.4);
}

.timer-fill{
height:100%;
width:100%;
border-radius:999px;
background:linear-gradient(90deg,#7effc8,#36d399,#facc15,#fb923c,#ef4444);
transition:width .9s linear, filter .25s ease;
box-shadow:0 0 18px rgba(126,255,200,.5);
}

.timer-fill.low{
filter:saturate(1.4) brightness(1.1);
animation:pulseTimer .6s infinite alternate;
}

@keyframes pulseTimer{
from{transform:scaleY(1)}
to{transform:scaleY(1.08)}
}

@media(max-width:700px){
.timer-wrap{
width:98vw;
margin-bottom:10px;
}

.timer-bar{
height:14px;
}
}