*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   FONDO
========================= */

body{

  min-height:100vh;

  background:
  radial-gradient(circle at top,#0f172a,#020617);

  font-family:Arial,sans-serif;

  color:white;

  text-align:center;

  overflow-x:hidden;

  padding:15px 0 30px;

}

/* =========================
   CONTENEDOR
========================= */

.container{

  width:100%;

  max-width:360px;

  margin:auto;

}

/* =========================
   TITULO
========================= */

h1{

  font-size:26px;

  margin-bottom:5px;

}

/* =========================
   TEXTO
========================= */

p{

  font-size:13px;

  opacity:.85;

  margin-bottom:10px;

}

/* =========================
   CARRETERA REALISTA
========================= */

#gameArea{

  width:260px;
  height:420px;

  margin:auto;

  position:relative;

  overflow:hidden;

  border-radius:20px;

  background:

  linear-gradient(
    to bottom,
    rgba(255,255,255,.10),
    transparent 25%
  ),

  linear-gradient(
    100deg,
    #14532d 0 18%,
    transparent 18%
  ),

  linear-gradient(
    260deg,
    #14532d 0 18%,
    transparent 18%
  ),

  linear-gradient(
    to bottom,
    #4b5563 0%,
    #1f2937 55%,
    #111827 100%
  );

  clip-path:polygon(
    30% 0%,
    70% 0%,
    100% 100%,
    0% 100%
  );

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

  box-shadow:
  0 15px 35px rgba(0,0,0,.8);

}

/* =========================
   LINEA CENTRAL
========================= */

#gameArea::before{

  content:"";

  position:absolute;

  top:0;

  left:50%;

  transform:translateX(-50%);

  width:18px;

  height:100%;

  background:

  linear-gradient(
    to right,
    #facc15 0 6px,
    transparent 6px 12px,
    #facc15 12px 18px
  );

  z-index:1;

}

/* =========================
   LINEAS BLANCAS
========================= */

.roadLine{

  width:6px;
  height:80px;

  background:white;

  position:absolute;

  left:127px;

  border-radius:10px;

  opacity:.9;

  z-index:2;

}

/* =========================
   CARRO
========================= */

#player,
.enemy{

  width:55px;
  height:95px;

  position:absolute;

  border-radius:18px;

  z-index:5;

}

/* =========================
   CARRO JUGADOR
========================= */

#player{

  bottom:10px;

  left:102px;

  background:
  linear-gradient(
    #ff4b4b,
    #991b1b
  );

  box-shadow:
  0 0 25px rgba(255,0,0,.7);

  transition:left .12s linear;

}

/* =========================
   VIDRIOS
========================= */

#player::before,
.enemy::before{

  content:"";

  position:absolute;

  top:10px;
  left:10px;

  width:35px;
  height:24px;

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

  border-radius:10px;

}

/* =========================
   LLANTAS
========================= */

#player::after,
.enemy::after{

  content:"";

  position:absolute;

  left:-7px;
  top:24px;

  width:69px;
  height:50px;

  border-left:7px solid #020617;

  border-right:7px solid #020617;

}

/* =========================
   ENEMIGOS
========================= */

.enemy{

  background:
  linear-gradient(
    #fde047,
    #ca8a04
  );

}

.enemy.red{
  background:linear-gradient(#ff4b4b,#7f1d1d);
}

.enemy.blue{
  background:linear-gradient(#38bdf8,#1d4ed8);
}

.enemy.yellow{
  background:linear-gradient(#fde047,#ca8a04);
}

.enemy.green{
  background:linear-gradient(#4ade80,#166534);
}

/* =========================
   PANEL
========================= */

.panel{

  margin-top:12px;

}

/* =========================
   SCORE
========================= */

.scoreBox{

  width:220px;

  margin:0 auto 10px;

  padding:8px;

  font-size:15px;

  font-weight:bold;

  border-radius:12px;

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

}

/* =========================
   BOTONES
========================= */

button{

  padding:7px 12px;

  font-size:12px;

  font-weight:bold;

  border:none;

  border-radius:10px;

  cursor:pointer;

  color:white;

  margin:3px;

}

/* BOTON START */

.btnStart{

  background:#16a34a;

}

/* BOTON RESET */

.btnReset{

  background:#dc2626;

}

/* =========================
   CONTROLES
========================= */

.controls{

  margin-top:10px;

  display:flex;

  justify-content:center;

  gap:10px;

}

/* BOTONES MOVIL */

.btnControl{

  width:48px;
  height:42px;

  font-size:20px;

  background:#1e293b;

}