/* ---------------------------------------------------------------
   Encierro · Mayorga — interfaz
   Tipografía gruesa y sombras duras: tiene que leerse corriendo.
---------------------------------------------------------------- */

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #2a1d15;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
  color: #fff;
}

#escena { display: block; width: 100%; height: 100%; }
.oculto { display: none !important; }

/* ------------------------------- HUD ----------------------------- */

#hud {
  position: fixed; left: 0; right: 0;
  top: max(14px, env(safe-area-inset-top));
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 18px; pointer-events: none; z-index: 5;
}

#puntos {
  font-size: clamp(34px, 7vw, 56px); font-weight: 900; line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
}

.sub { font-size: 15px; opacity: .9; margin-top: 4px; text-shadow: 0 2px 4px rgba(0,0,0,.6); }

.der { text-align: right; }
.etq { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; text-shadow: 0 2px 4px rgba(0,0,0,.6); }

.medidor {
  width: min(180px, 34vw); height: 12px; margin-top: 5px;
  border-radius: 7px; background: rgba(0,0,0,.45); overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
}

#ventaja {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #d7263d, #f4a259, #8cc63f);
  transition: width .15s linear;
}

/* Bravura (modo toro): del rojo del toro rajado al dorado del bravo */
#bravura {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #7a1f14, #d7263d, #f4c542);
  transition: width .2s linear;
}
.solo-toro .etq + .medidor { margin-bottom: 2px; }
.solo-toro #racha + .etq, .solo-toro #derribos + #racha + .etq { margin-top: 8px; }

#derribos {
  font-size: clamp(30px, 6vw, 46px); font-weight: 900; line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.45);
}

#racha {
  display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 12px;
  background: #d7263d; font-weight: 900; font-size: 20px;
  animation: late .4s ease-out;
}

@keyframes late { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* ------------------------- Aviso de carril ----------------------- */

#aviso-carril {
  position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%);
  padding: 10px 22px; border-radius: 14px;
  background: rgba(215, 38, 61, .9); font-weight: 900; font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 2px; z-index: 6; pointer-events: none;
  animation: parpadeo .35s ease-in-out infinite alternate;
}

@keyframes parpadeo { from { opacity: 1; } to { opacity: .55; } }

/* --------------------------- Embestida --------------------------- */

#embestida {
  position: fixed; left: 50%; top: 15%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 8; pointer-events: none; text-align: center;
}

.emb-titulo {
  font-size: clamp(38px, 10vw, 76px); font-weight: 900; letter-spacing: 3px; color: #fff;
  -webkit-text-stroke: 2px #7a0010;
  text-shadow: 0 5px 0 #7a0010, 0 0 30px rgba(215, 38, 61, .9);
  animation: latido .3s ease-in-out infinite alternate;
}

@keyframes latido { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Los tres carriles, con el del toro en rojo */
.emb-carriles { display: flex; gap: 10px; }
.emb-carriles span {
  width: clamp(34px, 8vw, 54px); height: clamp(46px, 11vw, 70px); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: clamp(22px, 5vw, 34px);
  background: rgba(0, 0, 0, .45); border: 3px solid rgba(255, 255, 255, .7);
}
.emb-carriles span.peligro { background: #d7263d; border-color: #fff; }
.emb-carriles span.peligro::after { content: '🐂'; }

.emb-texto {
  font-size: clamp(18px, 4.5vw, 26px); font-weight: 900;
  padding: 4px 14px; border-radius: 10px; background: rgba(0, 0, 0, .55);
}

/* Lo que queda de aviso: la duración la pone el juego */
.emb-tiempo {
  width: min(260px, 60vw); height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, .5);
}
#emb-barra { width: 100%; height: 100%; background: #ffd23f; transform-origin: left; }
#emb-barra.corre { animation: vacia linear forwards; }
@keyframes vacia { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Borde rojo latiendo mientras dura el aviso */
#alarma {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 10px rgba(215, 38, 61, .85), inset 0 0 140px 40px rgba(215, 38, 61, .5);
  animation: parpadeo .25s ease-in-out infinite alternate;
}

/* ---------------------------- Rótulos ---------------------------- */

#rotulo {
  position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%);
  font-size: clamp(28px, 7vw, 54px); font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 24px rgba(0,0,0,.4);
  white-space: nowrap; pointer-events: none; z-index: 7;
  animation: salta .5s cubic-bezier(.2,1.6,.4,1);
}

@keyframes salta { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* Destello rojo al tropezar o al cambiar de vuelta */
#destello {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, transparent 45%, rgba(200,16,46,.55));
  opacity: 0; transition: opacity .35s;
}

#destello.rojo { opacity: 1; transition: none; }
#destello.blanco { background: rgba(255, 245, 230, .9); opacity: 1; transition: none; }

/* ---------------------------- Carga ------------------------------ */

#cargando {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: radial-gradient(circle at 50% 40%, #6b3f24, #1c120c);
}

.titulo-carga { font-size: clamp(40px, 11vw, 80px); font-weight: 900; letter-spacing: 12px; opacity: .9; }

.barra { width: min(60vw, 320px); height: 8px; border-radius: 5px; background: rgba(255,255,255,.18); overflow: hidden; }
#barra-relleno { width: 0%; height: 100%; background: #f4a259; transition: width .3s; }
#carga-texto { font-size: 14px; opacity: .7; letter-spacing: 1px; }

/* ----------------------------- Inicio ---------------------------- */

#inicio, #final {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 20px; text-align: center;
  background: linear-gradient(rgba(20,10,6,.25), rgba(20,10,6,.8));
}

#inicio h1 {
  font-size: clamp(46px, 13vw, 104px); font-weight: 900; letter-spacing: 10px; line-height: 1;
  text-shadow: 0 6px 0 #7a1f14, 0 14px 30px rgba(0,0,0,.6);
}

.lugar { font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: #f6d7b0; margin-top: -6px; }

.modos { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.modo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(230px, 44vw); padding: 16px 12px;
  border: 2px solid rgba(255,255,255,.2); border-radius: 18px;
  background: rgba(0,0,0,.38); color: #fff; font-family: inherit; cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}

.modo:hover { transform: translateY(-2px); }
.modo.elegido { border-color: #f4a259; background: rgba(120, 50, 20, .55); }
.modo-icono { font-size: 38px; }
.modo-nombre { font-size: 21px; font-weight: 900; letter-spacing: 1px; }
.modo-texto { font-size: 13px; line-height: 1.35; opacity: .85; }
.modo-record { font-size: 13px; color: #f6d7b0; margin-top: 2px; }

#btn-jugar {
  width: clamp(96px, 22vw, 124px); height: clamp(96px, 22vw, 124px);
  border: none; border-radius: 50%; background: #f4a259; color: #5a2308;
  font-size: clamp(40px, 10vw, 54px); cursor: pointer;
  box-shadow: 0 8px 0 #a8551d, 0 14px 30px rgba(0,0,0,.5);
}

#btn-jugar:active { transform: translateY(6px); box-shadow: 0 2px 0 #a8551d; }

.ayuda { font-size: 14px; line-height: 1.7; opacity: .8; }
.ayuda b { display: inline-block; min-width: 24px; padding: 0 5px; border-radius: 5px; background: rgba(255,255,255,.18); }
.calidad { font-size: 11px; opacity: .45; letter-spacing: 1px; }

/* ----------------------------- Final ----------------------------- */

#final h2 { font-size: clamp(40px, 11vw, 78px); font-weight: 900; letter-spacing: 6px; text-shadow: 0 5px 0 #7a1f14; }
#final-motivo { font-size: 17px; opacity: .85; }
#final-puntos { font-size: clamp(54px, 15vw, 110px); font-weight: 900; line-height: 1; color: #f4a259; font-variant-numeric: tabular-nums; }
#final-detalle { font-size: 16px; opacity: .8; }
#final-record { font-size: 20px; font-weight: 900; color: #8cc63f; animation: late .5s ease-out; }

.botones { display: flex; gap: 12px; margin-top: 8px; }

.botones button {
  padding: 13px 26px; border: none; border-radius: 14px;
  font-family: inherit; font-size: 18px; font-weight: 900; cursor: pointer;
}

#btn-otra { background: #f4a259; color: #5a2308; }
#btn-menu { background: rgba(255,255,255,.18); color: #fff; }

/* ----------------------------- Sonido ---------------------------- */

#btn-sonido {
  position: fixed; z-index: 25;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; line-height: 46px; cursor: pointer;
}

/* ------------------------------ Móvil ---------------------------- */

/* Si no cabe, que se pueda deslizar el menú (con "safe" el centrado no
   se come la parte de arriba cuando sobra contenido) */
#inicio, #final { overflow-y: auto; justify-content: safe center; }

/* Con el dedo no hay flechas: se explica el gesto, y al revés */
.ayuda-tactil { display: none; }
@media (pointer: coarse) {
  .ayuda-teclado { display: none; }
  .ayuda-tactil { display: block; }
}

/* Móvil en vertical: las tarjetas de modo, más justas */
@media (max-width: 420px) {
  #inicio { padding-bottom: 72px; }          /* que los créditos no queden bajo el botón de sonido */
  .modos { gap: 8px; flex-wrap: nowrap; }
  .modo { width: calc(50vw - 24px); padding: 12px 8px; }
  .modo-texto { font-size: 12px; }
  #hud { padding: 0 12px; }
}

/* Móvil tumbado: apenas hay alto, menú compacto */
@media (max-height: 520px) {
  #inicio { gap: 10px; padding: 10px; }
  #inicio h1 { font-size: 42px; letter-spacing: 6px; }
  .lugar { margin-top: -4px; }
  .modo { padding: 8px 10px; gap: 3px; }
  .modo-icono { font-size: 26px; }
  .modo-texto { display: none; }
  #btn-jugar { width: 72px; height: 72px; font-size: 32px; }
  .ayuda { display: none; }
  #embestida { top: 8%; gap: 4px; }
  .emb-titulo { font-size: 40px; }
  .emb-carriles span { width: 34px; height: 42px; font-size: 22px; }
  #final { gap: 10px; }
  .conc-premio { display: none; }
  #concurso { padding: 6px 12px; }
}

/* ---------------------------- Concurso --------------------------- */

#concurso {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 18px; border-radius: 16px; max-width: min(520px, 94vw); text-align: center;
  background: linear-gradient(135deg, rgba(244, 162, 89, .95), rgba(200, 40, 50, .92));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
.conc-titulo { font-weight: 900; letter-spacing: 3px; font-size: 16px; }
.conc-premio { font-size: 14px; }
.conc-premio b { white-space: nowrap; }
.conc-cuenta { font-size: 12px; opacity: .92; }
.conc-botones { display: flex; gap: 14px; align-items: center; margin-top: 5px; }
.conc-botones button, #btn-tabla-final {
  padding: 7px 16px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 900; background: #fff; color: #7a1f14;
}
.conc-botones a { color: #fff; font-size: 14px; }

/* La clasificación, por encima de todo */
#tabla {
  position: fixed; inset: 0; z-index: 27; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 7, 4, .72);
}
.tabla-caja {
  width: min(460px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 16px; border-radius: 18px; background: #2a1d15; box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.tabla-cabeza { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
#tabla-cerrar { border: none; background: none; color: #fff; font-size: 22px; cursor: pointer; }
.tabla-pestanas { display: flex; gap: 8px; margin: 12px 0 6px; }
.tabla-pestanas button {
  flex: 1; padding: 8px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .3); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.tabla-pestanas button.elegida { border-color: #f4a259; background: rgba(120, 50, 20, .6); }
#tabla-lista { list-style: none; margin-top: 8px; }
#tabla-lista li {
  display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px;
}
#tabla-lista li.primero { color: #ffd23f; font-weight: 900; }
#tabla-lista li.tabla-vacia { display: block; text-align: center; opacity: .75; }
.t-puesto { text-align: right; opacity: .8; }
.t-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-detalle { font-size: 12px; opacity: .6; }
.t-puntos { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Enviar la puntuación, en la pantalla del final */
#envio {
  display: flex; flex-direction: column; gap: 8px; width: min(380px, 92vw);
  padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .42); text-align: left;
}
.envio-titulo { font-weight: 900; font-size: 16px; text-align: center; }
.envio-campo {
  font-family: inherit; font-size: 16px; padding: 10px 12px; border: none; border-radius: 10px;
  -webkit-user-select: text; user-select: text;
}
.envio-acepto { font-size: 13px; line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; }
.envio-acepto input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.envio-acepto a { color: #f6d7b0; }
#envio-boton {
  padding: 11px; border: none; border-radius: 12px; background: #f4a259; color: #5a2308;
  font-family: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
}
#envio-boton:disabled { opacity: .5; cursor: default; }
.envio-estado { min-height: 18px; font-size: 14px; text-align: center; color: #f6d7b0; }