🚗 CARRERAS PRO 3D
\*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:'Courier New',monospace;font-weight:bold}
html,body{width:100%;height:100%;overflow:hidden;background:#000;touch-action:none;position:fixed}
#gameCanvas{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#87CEEB 0%,#E0F6FF 100%);z-index:1;border:min(1vw,8px) solid #222;box-shadow:inset 0 0 min(5vw,40px) rgba(0,0,0,.7)}
/\* 🎮 INTERFAZ - VOLVER AL MENÚ \*/
.volver-menu{position:absolute;top:min(2vw,8px);left:min(3vw,12px);z-index:200;
background:rgba(0,0,0,.85);color:#fff;
border:min(0.5vw,2px) solid #ff4444;padding:min(1vw,4px) min(2vw,10px);font-size:min(3.5vw,16px);
box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000, 0 0 min(1.5vw,6px) rgba(255,68,68,.4);
border-radius:min(1.5vw,6px);cursor:pointer}
/\* 🎮 BOTÓN DE PAUSA NUEVO \*/
.boton-pausa{position:absolute;top:min(2vw,8px);right:min(3vw,12px);z-index:200;
background:rgba(0,0,0,.85);color:#ffff00;
border:min(0.5vw,2px) solid #ffff00;padding:min(1vw,4px) min(2vw,10px);font-size:min(3.5vw,16px);
box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000, 0 0 min(1.5vw,6px) rgba(255,255,0,.4);
border-radius:min(1.5vw,6px);cursor:pointer}
/\* 🎮 INTERFAZ ADAPTABLE \*/
.interface{position:absolute;z-index:100;
background:rgba(0,0,0,.85);color:#00ff66;
border:min(0.5vw,2px) solid #00ff66;padding:min(1vw,4px) min(2vw,8px);font-size:min(3.2vw,14px);
box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000, 0 0 min(1.5vw,6px) rgba(0,255,100,.4);
border-radius:min(1.5vw,6px);backdrop-filter:blur(2px)}
#score{top:min(2vw,8px);left:min(25vw,100px)}
#metaPuntos{top:min(2vw,8px);left:50%;transform:translateX(-50%);color:#ffff00;border-color:#ffff00;box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000, 0 0 min(1.5vw,6px) rgba(255,255,0,.4)}
/\* 🆕 BARRA DE VIDA \*/
#vidaContainer{top:min(2vw,8px);right:min(18vw,150px);display:flex;align-items:center;gap:min(1.5vw,6px)}
#barraVida{width:min(30vw,120px);height:min(3.5vw,14px);background:#333;border:min(0.5vw,2px) solid #fff;border-radius:min(2vw,7px);overflow:hidden}
#vidaRelleno{width:100%;height:100%;background:linear-gradient(90deg, #ff3333 0%, #ffff00 50%, #00cc00 100%);transition:width 0.2s ease}
#textoVida{color:#fff;font-size:min(3vw,12px);min-width:min(9vw,35px);text-align:right}
/\* 🆕 VUELTAS PARA MODO VERSUS \*/
#vueltasInfo{top:min(12vw,45px);left:50%;transform:translateX(-50%);color:#ff6600;border-color:#ff6600;box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000, 0 0 min(1.5vw,6px) rgba(255,102,0,.4);display:none}
/\* 🆕 MINIMAPA \*/
#minimapa{position:absolute;bottom:min(15vw,60px);left:50%;transform:translateX(-50%);width:min(35vw,150px);height:min(35vw,150px);
background:rgba(0,0,0,.7);border:min(0.7vw,2px) solid #fff;border-radius:50%;
box-shadow:0 0 min(2vw,8px) rgba(255,255,255,.3);overflow:hidden;display:none}
/\* 🆕 CUADRADOS DE HABILIDADES \*/
.habilidad-cuadro{position:absolute;top:50%;transform:translateY(-50%);width:min(15vw,70px);height:min(15vw,70px);
background:rgba(0,0,0,.85);border:min(0.5vw,2px) solid #fff;border-radius:min(2vw,8px);
display:flex;align-items:center;justify-content:center;
font-size:min(6vw,28px);box-shadow: min(0.7vw,3px) min(0.7vw,3px) 0 #000;z-index:150}
#cuadroVelocidad{left:min(2vw,15px);border-color:#ffcc00;color:#ffcc00}
#cuadroImpulso{left:min(20vw,95px);border-color:#ff6600;color:#ff9933}
#cuadroEscudo{right:min(20vw,95px);border-color:#00ccff;color:#00ccff}
#cuadroBola{right:min(2vw,15px);border-color:#9933ff;color:#cc99ff}
.cantidad-habilidad{position:absolute;bottom:-min(2vw,8px);right:-min(2vw,8px);
background:#ff3333;color:#fff;width:min(5.5vw,24px);height:min(5.5vw,24px);
border-radius:50%;font-size:min(3vw,12px);display:flex;align-items:center;justify-content:center;
border:min(0.3vw,1px) solid #fff}
.screen{position:absolute;width:100%;height:100%;
background:rgba(0,0,0,.85);display:flex;flex-direction:column;
align-items:center;justify-content:center;z-index:999;color:#FFF;
backdrop-filter:blur(4px);padding:min(5vw,20px);overflow-y:auto}
h1{font-size:min(13vw,56px);margin-bottom:min(6vw,25px);color:#ff2222;
text-shadow: min(0.7vw,3px) min(0.7vw,3px) 0 #ffff00, 0 0 min(4vw,20px) rgba(255,0,0,.6);text-align:center}
h2{font-size:min(9vw,36px);margin-bottom:min(5vw,20px);color:#ffff00;text-align:center}
#victoriaTexto{color:#00ff66;text-shadow:min(0.5vw,2px) min(0.5vw,2px) 0 #000;font-size:min(11vw,48px);margin-bottom:min(6vw,25px);display:none;text-align:center}
#pausaTexto{color:#ffff00;text-shadow:min(0.5vw,2px) min(0.5vw,2px) 0 #000;font-size:min(11vw,48px);margin-bottom:min(6vw,25px);display:none;text-align:center}
.button{background:linear-gradient(#222 0%, #444 100%);
border:min(1vw,4px) solid #00ff66;color:#00ff66;
padding:min(3vw,12px) min(6vw,25px);margin:min(1.5vw,6px);font-size:min(5vw,20px);
cursor:pointer;width:min(75vw,280px);
box-shadow: min(1.5vw,6px) min(1.5vw,6px) 0 #000, 0 0 min(3vw,12px) rgba(0,255,100,.3);
border-radius:min(2vw,8px);transition:all .1s ease}
.button:active{box-shadow: min(0.5vw,2px) min(0.5vw,2px) 0 #000;transform:translate(min(1vw,4px),min(1vw,4px));
background:linear-gradient(#444 0%, #222 100%)}
.button-tienda{border-color:#ffcc00;color:#ffcc00}
.button-tienda:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:min(1.5vw,6px) min(1.5vw,6px) 0 #000}
.button-modos{border-color:#9933ff;color:#cc99ff}
/\* CONTROLES \*/
#controles{position:absolute;bottom:min(5vw,20px);left:50%;transform:translateX(-50%);display:flex;gap:min(12vw,50px);z-index:100}
.btn{width:min(22vw,100px);height:min(22vw,100px);
background:linear-gradient(#333 0%, #555 100%);
border:min(1vw,4px) solid #fff;color:#FFF;font-size:min(8vw,38px);
display:flex;align-items:center;justify-content:center;
cursor:pointer;box-shadow: min(1.8vw,7px) min(1.8vw,7px) 0 #000, 0 0 min(3vw,12px) rgba(255,255,255,.2);
border-radius:min(3vw,12px);transition:all .1s ease}
.btn:active{box-shadow: min(0.7vw,2px) min(0.7vw,2px) 0 #000;transform:translate(min(1.2vw,5px),min(1.2vw,5px));
background:linear-gradient(#555 0%, #333 100%)}
#btnIzq{background:linear-gradient(#0066cc 0%, #0088ff 100%);border-color:#88ccff}
#btnDer{background:linear-gradient(#cc2200 0%, #ff4422 100%);border-color:#ff9988}
#btnPoder{background:linear-gradient(#9900cc 0%, #cc33ff 100%);border-color:#dd99ff}
#gameOver{display:none}
#nivelesLista{display:none;flex-direction:column;gap:min(2vw,8px);margin-top:min(5vw,20px);max-height:70vh;overflow-y:auto;padding:min(2.5vw,10px);width:100%;align-items:center}
#tienda{display:none;flex-direction:column;gap:min(3vw,12px);margin-top:min(5vw,20px);padding:min(4vw,15px);background:rgba(0,0,0,0.7);border-radius:min(2.5vw,10px);border:min(0.7vw,2px) solid #ffcc00;width:min(85vw,380px);align-items:center}
#modosLista{display:none;flex-direction:column;gap:min(2vw,8px);margin-top:min(5vw,20px);padding:min(3vw,12px);width:100%;align-items:center}
#totalCoins{margin-top:min(4vw,15px);font-size:min(7vw,28px);color:#ffdd00;text-shadow:min(0.5vw,2px) min(0.5vw,2px) 0 #aa7700, 0 0 min(2vw,8px) #ffcc00}
CARRERAS PRO 3D
🪙 MONEDAS: 0
🟢 JUGAR RÁPIDO
📋 NIVELES
🎮 MODOS DE JUEGO
🛒 TIENDA
🟢 NIVEL 1 - FÁCIL
🟢 NIVEL 2
🟢 NIVEL 3
🟡 NIVEL 4
🟡 NIVEL 5
🟡 NIVEL 6
🟠 NIVEL 7
🟠 NIVEL 8
🔴 NIVEL 9 - JEFE
🔴 NIVEL 10 - JEFE FINAL
⬅️ VOLVER
🎮 ELIGE UN MODO
🤝 VERSUS IA (CIRCULAR)
🏎️ CARRERA CLÁSICA
⬅️ VOLVER
🛒 TIENDA DE HABILIDADES
🛡️ ESCUDO - 50 monedas
⚡ RAYO - 40 monedas
🚀 IMPULSO - 60 monedas
💥 BOLA DE ENERGÍA - 70 monedas
⬅️ VOLVER
⏸️ JUEGO PAUSADO
▶️ CONTINUAR
🏠 MENÚ PRINCIPAL
💀 GAME OVER 💀
🎉 ¡VICTORIA! 🎉
Ganaste 500 monedas
PUNTOS: 0
🔄 JUGAR DE NUEVO
🏠 MENÚ PRINCIPAL
⬅️ MENÚ
⏸️ PAUSA
PUNTOS: 0
META: 300
VUELTA: 1 / 2
⚡0
🚀0
🛡️0
💥0