/* 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 } }

#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); }