/* Todo va en unidades relativas (vmin / dvh) para que cualquier pantalla
   quepa entera sin scroll: el menú nunca debe obligar a rodar la página. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1a2e; font-family: 'Nunito', system-ui, sans-serif; color: #fff; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- pantallas */
.screen { position: fixed; inset: 0; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.2vh, 14px); text-align: center; padding: clamp(6px, 2vh, 18px);
  background: radial-gradient(ellipse at center, rgba(90,40,160,.85), rgba(10,10,30,.95)); z-index: 10; }

.logo { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(30px, 8.5vmin, 92px); margin: 0; line-height: 1;
  color: #ffd23b; -webkit-text-stroke: clamp(1px, .35vmin, 3px) #7a1f1f;
  text-shadow: .6vmin .6vmin 0 #c0392b, 1vmin 1vmin 0 rgba(0,0,0,.35); letter-spacing: 1px;
  transform: rotate(-3deg); animation: wobble 2s ease-in-out infinite; }
.logo span { color: #ff3b3b; -webkit-text-stroke: clamp(1px, .35vmin, 3px) #fff; }
.logo.small { font-size: clamp(26px, 6.5vmin, 70px); }
@keyframes wobble { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }

.paso { margin: 0; font-weight: 900; font-size: clamp(13px, 2.6vmin, 24px); letter-spacing: 1px;
  text-transform: uppercase; color: #ffd23b; text-shadow: 2px 2px 0 #000; }
.hint { max-width: min(700px, 92vw); font-size: clamp(10px, 1.7vmin, 15px); opacity: .85; margin: 0; line-height: 1.35; }

.row { display: flex; align-items: center; gap: clamp(8px, 2vmin, 18px); flex-wrap: wrap; justify-content: center; margin: 0; }

button { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(12px, 2vmin, 18px);
  padding: clamp(4px,1vmin,8px) clamp(10px,2.4vmin,20px); border: 3px solid #000; border-radius: 12px;
  background: #fff; color: #222; cursor: pointer; box-shadow: 4px 4px 0 #000; transition: transform .08s; }
button:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #000; }
button:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }
button.big { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(20px, 4vmin, 36px);
  padding: clamp(4px,1vmin,10px) clamp(16px,4vmin,36px); background: #ff3b3b; color: #fff; -webkit-text-stroke: 1px #000; letter-spacing: 1px; }
button.big.alt { background: #4ecdc4; font-size: clamp(15px, 3vmin, 27px); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- carrusel */
.carrusel { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vmin, 16px); width: 100%; }
.cinta { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vmin, 16px); }

.flecha { font-size: clamp(22px, 5vmin, 44px); line-height: 1; width: clamp(36px, 7vmin, 62px); height: clamp(36px, 7vmin, 62px);
  padding: 0; border-radius: 50%; background: #ffd23b; display: flex; align-items: center; justify-content: center; }

.tarjeta { width: clamp(74px, 15.5vmin, 150px); border-radius: clamp(10px, 2vmin, 18px); padding: clamp(4px,1vmin,10px);
  background: rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.22); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .16s, border-color .16s, background .16s;
  opacity: .6; transform: scale(.84); }
.tarjeta .visual { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 7vmin, 66px); line-height: 1; }
.tarjeta img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(2px 2px 0 #000); }
.tarjeta .nombre { font-weight: 900; font-size: clamp(9px, 1.6vmin, 14px); line-height: 1.1; min-height: 2.2em;
  display: flex; align-items: center; text-align: center; }
.tarjeta.sel { opacity: 1; transform: scale(1.06); border-color: #ffd23b; background: rgba(255,210,59,.2);
  box-shadow: 0 0 0 3px #000, 0 0 clamp(10px,2vmin,22px) rgba(255,210,59,.65); }
.tarjeta.bloqueada { filter: grayscale(1); opacity: .35; cursor: not-allowed; }
.tarjeta.bloqueada.sel { border-color: #888; box-shadow: 0 0 0 3px #000; background: rgba(255,255,255,.08); }
.tarjeta.bloqueada .nombre { display: block; }   /* si no, el (aún no) se parte a media palabra */
.tarjeta.bloqueada .nombre::after { content: ' (aún no)'; opacity: .8; font-weight: 700; }
.cinta.girando .tarjeta { transition: none; }

/* ---------------------------------------------------------------- mandos */
.pads { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 20px; }
.pad { font-weight: 900; font-size: clamp(9px, 1.5vmin, 13px); padding: 3px 10px; border-radius: 999px;
  border: 2px solid #000; background: #2ecc40; color: #062; }
.pad.none { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.35); }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
/* en columna, para que el nivel y el escenario no se monten uno sobre otro
   cuando la ventana es estrecha */
#top { position: absolute; top: clamp(4px, 1vh, 12px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 8px; }
#timer { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(26px, 5.5vmin, 46px); line-height: 1;
  color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 3px 3px 0 #000; }
#timer.low { color: #ff3b3b; animation: pulse .5s infinite; }
#level, #place { font-weight: 900; text-shadow: 2px 2px 0 #000; white-space: nowrap;
  max-width: 96vw; overflow: hidden; text-overflow: ellipsis; }
#level { font-size: clamp(9px, 1.6vmin, 14px); letter-spacing: 2px; }
#place { font-size: clamp(10px, 1.8vmin, 15px); color: #ffd23b; }
@keyframes pulse { 50% { transform: scale(1.12); } }

#cards { position: absolute; left: 0; right: 0; bottom: clamp(4px, 1.2vh, 12px);
  display: flex; gap: 12px; justify-content: center; padding: 0 8px; flex-wrap: wrap; }
.card { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.55); border: 3px solid var(--pc);
  border-radius: 16px; padding: 5px 14px 5px 5px; min-width: min(230px, 70vw); transition: transform .1s; }
.card.ko { opacity: .45; filter: grayscale(1); }
.card.frenzy { animation: rainbow .4s linear infinite; }
@keyframes rainbow { 0% { border-color:#ff3b3b } 33% { border-color:#ffd23b } 66% { border-color:#2ecc40 } 100% { border-color:#3b7bff } }
.card img { width: clamp(34px, 6vmin, 54px); height: clamp(34px, 6vmin, 54px); object-fit: contain; filter: drop-shadow(2px 2px 0 #000); }
.card .nm { font-weight: 900; font-size: clamp(10px, 1.6vmin, 14px); color: var(--pc); }
.card .sc { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(18px, 3.2vmin, 26px); line-height: 1; }
.card .hp { font-size: clamp(10px, 1.7vmin, 14px); letter-spacing: -2px; }
.card .cb { font-weight: 900; font-size: clamp(9px, 1.5vmin, 13px); color: #ffd23b; min-height: 14px; }
.card .mr { height: 6px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; margin-top: 3px; }
.card .mr i { display: block; height: 100%; width: 0; background: #7ed957; transition: width .12s linear; }
.card.dizzy { animation: tilt .35s ease-in-out infinite; }
.card.dizzy .mr i { background: #b6ff3b; }
@keyframes tilt { 0%,100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) } }

/* ---------------------------------------------------------------- avisos */
#banner { position: fixed; top: 30%; left: 50%; transform: translate(-50%,-50%) scale(0);
  font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(34px, 8vmin, 110px); color: #ffd23b;
  -webkit-text-stroke: 3px #000; text-shadow: 6px 6px 0 #c0392b; pointer-events: none; z-index: 6; white-space: nowrap; }
#banner.show { animation: bang 1.4s ease-out forwards; }
@keyframes bang { 0% { transform: translate(-50%,-50%) scale(0) rotate(-20deg); opacity: 1 } 15% { transform: translate(-50%,-50%) scale(1.3) rotate(4deg) } 25% { transform: translate(-50%,-50%) scale(1) rotate(-2deg) } 80% { opacity: 1 } 100% { transform: translate(-50%,-50%) scale(1.2); opacity: 0 } }

/* controles táctiles: joystick abajo-izquierda, acción abajo-derecha */
/* los dos círculos miden lo mismo (--tsize) y comparten margen inferior, así
   quedan del mismo tamaño y alineados en horizontal */
#touch { display: none; --tsize: clamp(110px, 28vmin, 160px); --tmargen: clamp(14px, 4vw, 40px); }
body.tactil #touch { display: block; }
.tzona { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(10px, 3vh, 28px));
  width: var(--tsize); height: var(--tsize); box-sizing: border-box; margin: 0;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#stick { left: calc(env(safe-area-inset-left, 0px) + var(--tmargen));
  display: flex; align-items: center; justify-content: center; }
.tbase { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: rgba(0,0,0,.28);
  border: 4px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.tnub { width: 46%; height: 46%; border-radius: 50%; background: rgba(255,255,255,.75);
  border: 3px solid #000; box-shadow: 2px 3px 0 rgba(0,0,0,.5); }
#stick.on .tbase { background: rgba(0,0,0,.4); }
#tact { right: calc(env(safe-area-inset-right, 0px) + var(--tmargen)); border-radius: 50%;
  font-size: clamp(44px, 12vmin, 68px); line-height: 1; padding: 0; cursor: pointer;
  background: rgba(231,76,60,.8); border: 4px solid #000; box-shadow: 3px 4px 0 rgba(0,0,0,.55); }
#tact.on { transform: scale(.9); background: rgba(255,210,59,.9); }
/* en táctil las tarjetas no pueden quedar debajo de los controles */
body.tactil #cards { padding: 0 clamp(140px, 34vmin, 210px); }
@media (max-aspect-ratio: 1/1) {
  body.tactil #cards { padding: 0 8px; bottom: calc(clamp(110px, 28vmin, 160px) + clamp(20px, 5vh, 44px)); }
}

/* OCULTO (2026-09-12, lo pidió Joseph: estorbaba). Las tarjetas del jugador de
   abajo se siguen montando y actualizando en game.js; para recuperarlas basta
   con borrar esta regla. */
#cards { display: none !important; }

/* guía de controles arriba a la derecha: "Moverse" con las cuatro flechas y
   "Golpear" con la tecla del dispositivo que se esté usando (game.js,
   Controles). En móviles y tablets no sale: allí están los controles táctiles. */
#guia { position: absolute; top: clamp(6px, 1.4vh, 16px); right: clamp(8px, 1.6vw, 22px);
  display: flex; align-items: flex-start; gap: clamp(12px, 2.4vmin, 26px); --gy: #ffe600; }
body.tactil #guia { display: none; }
.gcol { display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .7vmin, 7px); }
.gtit { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(14px, 2.8vmin, 28px); line-height: 1;
  color: var(--gy); -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 #000; }
#guia svg { display: block; filter: drop-shadow(1.5px 1.5px 0 #000); }
.flechas { width: clamp(50px, 10vmin, 100px); height: clamp(50px, 10vmin, 100px); }
.flechas polygon, .flechas use { fill: none; stroke: var(--gy); stroke-width: 4; stroke-linejoin: round; }
.tecla { height: clamp(28px, 5vmin, 50px); display: flex; align-items: center; justify-content: center; }
.tecla.teclado { box-sizing: border-box; min-width: clamp(86px, 15vmin, 150px); padding: 0 .8em;
  border: 3px solid var(--gy); border-radius: 3px; box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #000;
  font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(13px, 2.4vmin, 23px); color: var(--gy);
  -webkit-text-stroke: .5px #000; text-shadow: 1.5px 1.5px 0 #000; }
.tecla svg { width: auto; height: 100%; }
.tecla circle { fill: rgba(0,0,0,.35); stroke: var(--gy); stroke-width: 3; }
.tecla.ps .glifo { fill: none; stroke: #8fb8ff; stroke-width: 4; stroke-linecap: round; }   /* la ✕ azul de PlayStation */
.tecla .glifo { fill: #5dc21e; font: 900 22px 'Nunito', sans-serif; }                          /* la A verde de Xbox */

/* relojito de reaparición: --queda va de 1 a 0 mientras el jugador está fuera */
#respawn { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; --queda: 1; }
#respawn .reloj { position: relative; width: clamp(110px, 26vmin, 170px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 5px solid #000; box-shadow: 0 0 0 4px #fff, 5px 6px 0 4px rgba(0,0,0,.45);
  animation: latido 1s ease-in-out infinite; }
#respawn .esfera { position: absolute; inset: 6%; border-radius: 50%;
  background: conic-gradient(#ffd23b calc(var(--queda) * 360deg), rgba(255,255,255,.12) 0);
  transform: scaleX(-1); }          /* la cuña que queda se vacía en sentido horario */
#respawn .aguja { position: absolute; left: 50%; top: 50%; width: 5px; height: 44%; margin-left: -2.5px;
  background: #000; border-radius: 3px; transform-origin: 50% 0;
  transform: rotate(calc(180deg + (1 - var(--queda)) * 360deg)); }
#respawn .aguja { z-index: 2; }
#respawn .aguja::after { content: ''; position: absolute; left: 50%; top: 0; width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #000; border: 2px solid #fff; }
#respawn .cara { position: absolute; left: 50%; top: 50%; width: 34%; opacity: .85; transform: translate(-50%, -50%);
  border-radius: 50%; filter: drop-shadow(2px 2px 0 #000) grayscale(.6); pointer-events: none; }
#respawn .rtexto { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(20px, 5vmin, 34px); color: #fff;
  -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; white-space: nowrap; }
#respawn .rtexto b { color: #ffd23b; font-weight: normal; }
@keyframes latido { 50% { transform: scale(1.05); } }

#floats { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.ft { position: absolute; left: 0; top: 0; font-family: 'Luckiest Guy', Impact, sans-serif;
  -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; white-space: nowrap; will-change: transform, opacity; }

/* ---------------------------------------------------------------- final */
/* la carta que sale en la ruleta pega un brinco antes de pasar de pantalla */
.tarjeta.tocado { animation: tocado .5s ease-out; }
@keyframes tocado {
  0% { transform: scale(1.06); }
  35% { transform: scale(1.3) rotate(-3deg); }
  70% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1.06); }
}

/* ---------------------------------------------------------------- la foto */
#fotoImg { max-width: min(86vw, 900px); max-height: 62dvh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.boton { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(15px, 3vmin, 27px);
  padding: clamp(4px,1vmin,10px) clamp(16px,4vmin,36px); border: 3px solid #000; border-radius: 12px;
  background: #ffd23b; color: #222; box-shadow: 4px 4px 0 #000; text-decoration: none; cursor: pointer; }
.boton:hover { transform: translate(-1px,-1px); }
/* el fogonazo del disparo */
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; }
#flash.go { animation: fogonazo .5s ease-out; }
@keyframes fogonazo { 0% { opacity: 0 } 8% { opacity: .95 } 100% { opacity: 0 } }

/* ------------------------------------------------------------- podio final */
/* transparente: detrás está el podio de verdad, en 3D */
.screen.abierto { background: linear-gradient(rgba(10,6,24,.72) 0%, rgba(10,6,24,0) 26%, rgba(10,6,24,0) 66%, rgba(10,6,24,.82) 94%);
  justify-content: space-between; padding: clamp(6px,2vh,18px) clamp(6px,2vw,20px); }