*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html,
body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
background:#071321;
font-family:
Arial,
Helvetica,
sans-serif;
color:white;
}

body{
display:flex;
justify-content:center;
}

#app{
position:relative;

width:min(100vw,480px);

height:100dvh;

max-height:920px;

overflow:hidden;

background:#000;

box-shadow:
0 0 70px rgba(0,0,0,.6);
}

#gameCanvas{
position:absolute;
inset:0;

width:100%;
height:100%;

display:block;
}

.screen{
position:absolute;
inset:0;

z-index:20;

display:none;
}

.screen.active{
display:block;
}


/* ======================
   MENU
   ====================== */

#menu{
background:
linear-gradient(
180deg,
rgba(0,115,230,.08),
rgba(0,0,0,.12)
);
}

.brand{
position:absolute;

left:20px;
top:25px;

font-weight:1000;

font-size:38px;

line-height:.8;

font-style:italic;

text-shadow:
0 4px 0 #422277,
0 7px 18px rgba(0,0,0,.45);
}

.brand span{
display:block;

font-size:42px;

color:#ffd337;
}

.start-card,
.result-card{
position:absolute;

left:18px;
right:18px;

bottom:24px;

padding:21px;

border-radius:27px;

background:
rgba(6,20,38,.91);

border:
1px solid rgba(255,255,255,.23);

box-shadow:
0 18px 45px rgba(0,0,0,.48);

backdrop-filter:
blur(15px);

text-align:center;
}

.tag{
display:inline-block;

padding:
6px 11px;

border-radius:999px;

background:#173d68;

font-size:11px;

font-weight:900;

color:#cceaff;
}

.start-card h1{
margin:
10px 0 6px;

font-size:31px;
}

.start-card p{
margin:
0 0 13px;

font-size:14px;

color:#c9d8e7;

line-height:1.4;
}

.hero-power{
margin:
13px 0;

padding:11px;

border-radius:17px;

border:
1px solid rgba(91,222,255,.46);

background:
linear-gradient(
180deg,
rgba(34,191,255,.24),
rgba(34,93,181,.24)
);

font-weight:1000;

color:#6cdfff;
}

.hero-power small{
display:block;

margin-top:3px;

color:#dff4ff;
}

#play,
#replay{
width:100%;

padding:14px;

border:0;

border-radius:17px;

font-size:22px;

font-weight:1000;

color:#fff;

background:
linear-gradient(
#91ec2c,
#48ac1d
);

box-shadow:
0 7px 0 #286f16;

cursor:pointer;
}

#play:active,
#replay:active{
transform:translateY(3px);

box-shadow:
0 4px 0 #286f16;
}


/* ======================
   HUD
   ====================== */

#raceHUD{
position:absolute;

inset:0;

z-index:10;

display:none;

pointer-events:none;

padding:
max(10px,env(safe-area-inset-top))
10px
max(10px,env(safe-area-inset-bottom));
}

#raceHUD.active{
display:block;
}

.top-row{
display:flex;

gap:7px;

align-items:center;
}

.position-card,
.hud-pill{
padding:
9px 11px;

border-radius:17px;

background:
rgba(4,26,55,.89);

border:
1px solid rgba(255,255,255,.19);

box-shadow:
0 8px 18px rgba(0,0,0,.28);

font-weight:900;
}

.position-card{
margin-right:auto;
}

.position-card strong{
font-size:23px;
}

.progress-card{
margin-top:8px;

padding:10px;

border-radius:18px;

background:
rgba(4,26,55,.84);

border:
1px solid rgba(255,255,255,.18);
}

.progress-label{
font-size:11px;

font-weight:900;
}

.progress-track{
position:relative;

height:10px;

margin-top:7px;

border-radius:999px;

background:#aeb9c5;
}

.progress-fill{
height:100%;

width:0%;

border-radius:999px;

background:
linear-gradient(
90deg,
#15baff,
#57ffa0
);
}

.finish{
position:absolute;

right:-5px;
top:-12px;

font-size:25px;
}

.message{
position:absolute;

left:50%;
bottom:169px;

transform:
translateX(-50%);

min-width:290px;

padding:
9px 13px;

border-radius:999px;

background:
rgba(4,22,43,.90);

border:
1px solid rgba(255,255,255,.18);

text-align:center;

font-size:12px;

font-weight:900;
}

.powers{
position:absolute;

left:8px;
right:8px;

bottom:
max(
8px,
env(safe-area-inset-bottom)
);

display:grid;

grid-template-columns:
1fr 1.08fr 1fr;

gap:8px;

pointer-events:auto;
}

.power{
position:relative;

min-height:124px;

border-radius:23px;

border:
2px solid rgba(255,255,255,.25);

color:#fff;

font-weight:1000;

display:flex;

flex-direction:column;

justify-content:flex-end;

align-items:center;

padding:
10px 7px;

box-shadow:
0 12px 27px rgba(0,0,0,.42);

cursor:pointer;
}

.power-icon{
font-size:40px;

line-height:1;

margin-bottom:8px;

filter:
drop-shadow(
0 5px 8px rgba(0,0,0,.25)
);
}

.power strong{
font-size:17px;
}

.power small{
font-size:11px;

margin-top:4px;
}

.status{
position:absolute;

right:7px;
top:7px;

padding:
4px 7px;

border-radius:11px;

background:
rgba(0,0,0,.32);

font-size:10px;
}

.turbo{
background:
linear-gradient(
#ff7c32,
#d84619
);
}

.freeze{
background:
linear-gradient(
#21c4ff,
#155cbd
);

box-shadow:
0 0 24px rgba(32,198,255,.43),
0 12px 27px rgba(0,0,0,.42);
}

.shield{
background:
linear-gradient(
#7bec3c,
#37a51d
);
}

.power.disabled{
opacity:.66;

filter:
grayscale(.65)
brightness(.8);
}


/* RESULTADO */

.result{
background:
rgba(4,15,28,.83);

backdrop-filter:
blur(8px);
}

.result-card{
top:50%;
bottom:auto;

transform:
translateY(-50%);
}

.result-card h2{
font-size:31px;

margin:
12px 0 5px;
}

.result-card p{
color:#c8d7e7;
}

.result-grid{
display:grid;

grid-template-columns:
repeat(3,1fr);

gap:8px;

margin:
16px 0;
}

.result-grid div{
padding:10px;

border-radius:15px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.11);
}

.result-grid strong{
display:block;

font-size:20px;
}

.result-grid small{
font-size:10px;

color:#bed2e7;
}

.secondary{
width:100%;

margin-top:10px;

padding:12px;

border:0;

border-radius:14px;

background:#173a5b;

color:white;

font-weight:900;
}