/* =========================================================
   ¿Quién quiere ser San Franciscano?
   Estilos del escenario de juego
   ========================================================= */

:root{
  /* Marco tallado */
  --marco-1:#aab6c9;
  --marco-2:#8d9bb2;
  --marco-3:#74839c;
  --marco-borde:#5f6d85;

  /* Tablero */
  --tablero-1:#123a7d;
  --tablero-2:#0d2b60;
  --tablero-3:#091f49;
  --cian:#3fd8ff;
  --cian-suave:#a9ecff;

  /* Acentos */
  --oro-1:#ffe066;
  --oro-2:#ffb31f;
  --oro-3:#f08a00;
  --verde:#2fbf5c;
  --azul:#1f8fe0;
  --rojo:#ef4444;
  --violeta:#7b62ff;
  --naranja:#ff8a1f;

  --texto:#ffffff;
  --sombra-btn:0 6px 0 rgba(0,0,0,.28), 0 12px 22px rgba(4,17,45,.35);
  --radio:26px;
  --fuente-titulo:"Baloo 2","Trebuchet MS",'Segoe UI',system-ui,sans-serif;
  --fuente-texto:"Nunito",'Segoe UI',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}
body{
  margin:0;
  font-family:var(--fuente-texto);
  color:#0f1d38;
  background:
    radial-gradient(120% 80% at 50% 110%, #ffe9c9 0%, rgba(255,233,201,0) 55%),
    radial-gradient(90% 70% at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg,#eef1f6 0%,#e3e7ef 55%,#dfe3ec 100%);
  background-attachment:fixed;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Escenario ---------------- */
.escena{
  position:relative;
  max-width:1140px;
  margin:0 auto;
  padding:18px 16px 48px;
}
/* En pantallas anchas se reserva el hueco derecho del cronómetro */
@media (min-width:1025px){
  .escena{padding-right:158px;}
}

/* ---------------- Título curvo ---------------- */
.titulo{margin:0 auto -46px;max-width:760px;position:relative;z-index:5;}
.titulo svg{display:block;width:100%;height:auto;overflow:visible;}
.titulo text{
  font-family:var(--fuente-titulo);
  font-weight:800;
  fill:url(#oroGrad);
  stroke:#12315f;
  stroke-width:9px;
  paint-order:stroke fill;
  stroke-linejoin:round;
  letter-spacing:.5px;
}
.titulo__sup{font-size:76px;}
.titulo__inf{font-size:112px;}

/* ---------------- Marco tallado ---------------- */
.marco{
  position:relative;
  border-radius:34px;
  padding:26px 74px;
  background:
    linear-gradient(180deg,var(--marco-1) 0%,var(--marco-2) 45%,var(--marco-3) 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 26px 46px rgba(24,38,70,.28);
  border:3px solid var(--marco-borde);
}
/* Bisel interior tallado */
.marco::before{
  content:"";position:absolute;inset:10px;border-radius:26px;
  border:3px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.10);
  pointer-events:none;
}
/* Columnas laterales con motivos geométricos rústicos */
.marco__lateral{
  position:absolute;top:26px;bottom:26px;width:56px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='210' viewBox='0 0 56 210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 14 L40 27 L28 40 L16 27 Z'/%3E%3Cpath d='M28 21 L33 27 L28 33 L23 27 Z'/%3E%3Cpath d='M16 56 L28 66 L40 56'/%3E%3Cpath d='M16 70 L28 80 L40 70'/%3E%3Cpath d='M28 98 c-11 9 -11 27 0 36 c11 -9 11 -27 0 -36'/%3E%3Cpath d='M28 98 v36'/%3E%3Cpath d='M16 156 L28 146 L40 156'/%3E%3Cpath d='M16 170 L28 160 L40 170'/%3E%3Ccircle cx='28' cy='192' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:center top;
  opacity:.85;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.22));
}
.marco__lateral--izq{left:12px;}
.marco__lateral--der{right:12px;transform:scaleX(-1);}

/* ---------------- Tablero azul ---------------- */
.tablero{
  position:relative;
  border-radius:var(--radio);
  padding:20px 22px 24px;
  min-height:400px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(63,216,255,.20) 0%, rgba(63,216,255,0) 55%),
    linear-gradient(165deg,var(--tablero-1) 0%,var(--tablero-2) 55%,var(--tablero-3) 100%);
  border:3px solid rgba(63,216,255,.55);
  box-shadow:
    0 0 0 6px rgba(9,24,56,.55),
    inset 0 0 60px rgba(0,0,0,.45),
    0 0 34px rgba(63,216,255,.28);
  color:var(--texto);
  overflow:hidden;
}

/* ---------------- Pantallas ---------------- */
.pantalla{display:none;}
.pantalla--activa{display:block;animation:aparecer .45s ease both;}
@keyframes aparecer{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}

/* ---------------- Cabecera del juego ---------------- */
.cabecera{
  display:flex;align-items:center;justify-content:center;
  gap:14px;position:relative;margin-bottom:10px;
}
.cabecera__centro{text-align:center;}
.cabecera__pregunta{
  margin:0;font-family:var(--fuente-titulo);font-size:clamp(20px,3.2vw,30px);
  font-weight:800;letter-spacing:1px;text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.cabecera__nivel{
  margin:2px 0 0;font-size:clamp(12px,1.7vw,15px);font-weight:800;
  letter-spacing:1.5px;color:#bcd6ff;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.nivel--facil{color:#5ef08a;}
.nivel--medio{color:#ffc93c;}
.nivel--dificil{color:#ff7a7a;}
.cabecera__valor{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:1px 9px;color:#fff;font-size:.85em;letter-spacing:.5px;
}
.marcador{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--fuente-titulo);font-weight:800;
  font-size:clamp(13px,1.9vw,17px);color:#5a3600;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--oro-1),var(--oro-2));
  border:2px solid #b06f00;border-radius:999px;
  padding:6px 16px;white-space:nowrap;
  box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6);
}
.marcador--sube{animation:marcadorSube .5s ease;}
@keyframes marcadorSube{0%{transform:translateY(-50%) scale(1);}45%{transform:translateY(-50%) scale(1.16);}100%{transform:translateY(-50%) scale(1);}}

/* ---------------- Barra de progreso ---------------- */
.progreso{
  height:7px;border-radius:999px;margin:6px auto 16px;max-width:82%;
  background:rgba(255,255,255,.13);overflow:hidden;
}
.progreso__barra{
  display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--cian),#7cf2c0);
  box-shadow:0 0 12px rgba(63,216,255,.8);
  transition:width .5s cubic-bezier(.34,1.3,.5,1);
}

/* ---------------- Tarjeta de pregunta ---------------- */
.tarjeta{
  position:relative;
  margin:0 34px 22px;
  padding:16px 24px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,32,72,.95),rgba(8,25,58,.95));
  border:3px solid var(--cian);
  box-shadow:0 0 22px rgba(63,216,255,.35), inset 0 2px 0 rgba(255,255,255,.08);
  text-align:center;
}
/* conectores laterales estilo circuito */
.tarjeta::before,.tarjeta::after,
.opcion::before{
  content:"";position:absolute;top:50%;width:30px;height:3px;
  background:var(--cian);box-shadow:0 0 10px rgba(63,216,255,.9);
  transform:translateY(-50%);
}
.tarjeta::before{left:-32px;}
.tarjeta::after{right:-32px;}
.tarjeta__dato{
  margin:0 0 8px;font-style:italic;font-weight:700;
  font-size:clamp(13px,1.85vw,16px);color:var(--cian-suave);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.tarjeta__pregunta{
  margin:0;font-family:var(--fuente-titulo);font-weight:800;
  font-size:clamp(17px,2.6vw,25px);line-height:1.22;
  text-transform:uppercase;letter-spacing:.4px;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.tarjeta--entra{animation:entraTarjeta .5s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes entraTarjeta{
  from{opacity:0;transform:translateX(60px) rotateY(-14deg);}
  to{opacity:1;transform:none;}
}
.tarjeta--sale{animation:saleTarjeta .3s ease-in both;}
@keyframes saleTarjeta{to{opacity:0;transform:translateX(-50px) scale(.96);}}

/* ---------------- Opciones ---------------- */
.opciones{
  list-style:none;margin:0 34px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;
}
.opcion{
  position:relative;width:100%;
  display:flex;align-items:center;gap:10px;
  padding:11px 16px 11px 11px;
  border:none;border-radius:999px;cursor:pointer;
  font-family:var(--fuente-texto);font-weight:800;
  font-size:clamp(13px,1.75vw,17px);color:#fff;text-align:left;
  box-shadow:var(--sombra-btn);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  animation:entraOpcion .45s cubic-bezier(.2,.9,.3,1.25) both;
}
.opciones li:nth-child(1) .opcion{animation-delay:.06s;}
.opciones li:nth-child(2) .opcion{animation-delay:.13s;}
.opciones li:nth-child(3) .opcion{animation-delay:.2s;}
.opciones li:nth-child(4) .opcion{animation-delay:.27s;}
@keyframes entraOpcion{from{opacity:0;transform:translateY(18px) scale(.94);}to{opacity:1;transform:none;}}

.opcion--1{background:linear-gradient(180deg,#9a86ff,var(--violeta));}
.opcion--2{background:linear-gradient(180deg,#43a9f0,var(--azul));}
.opcion--3{background:linear-gradient(180deg,#4fd47c,var(--verde));}
.opcion--4{background:linear-gradient(180deg,#ff6b6b,var(--rojo));}

.opciones li:nth-child(odd) .opcion::before{left:-28px;width:28px;}
.opciones li:nth-child(even) .opcion::before{right:-28px;width:28px;left:auto;}

.opcion__num{
  flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.85);
  font-family:var(--fuente-titulo);font-weight:800;font-size:15px;line-height:1;
}
.opcion__texto{flex:1 1 auto;line-height:1.15;text-shadow:0 2px 3px rgba(0,0,0,.35);}
.opcion__letra{
  flex:0 0 auto;visibility:hidden;opacity:0;transform:scale(.5);
  font-family:var(--fuente-titulo);font-weight:800;font-size:19px;color:#6b4200;
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.opcion:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.08);}
.opcion:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28);}
.opcion:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.opcion:disabled{cursor:default;}
.opcion--apagada{filter:grayscale(.65) brightness(.6);opacity:.65;}

/* Respuesta correcta: se resalta en amarillo con su letra */
.opcion--correcta{
  background:linear-gradient(180deg,var(--oro-1),var(--oro-2))!important;
  color:#5a3600;filter:none!important;opacity:1!important;
  box-shadow:0 6px 0 rgba(0,0,0,.28), 0 0 30px rgba(255,196,50,.85);
  animation:pulsoCorrecta .7s cubic-bezier(.2,1.3,.4,1) both;
}
.opcion--correcta .opcion__texto{text-shadow:none;}
.opcion--correcta .opcion__num{background:rgba(255,255,255,.65);border-color:#8a5a00;color:#5a3600;}
.opcion--correcta .opcion__letra{visibility:visible;opacity:1;transform:scale(1);}
@keyframes pulsoCorrecta{
  0%{transform:scale(1);}
  40%{transform:scale(1.06);}
  70%{transform:scale(.99);}
  100%{transform:scale(1);}
}
.opcion--fallo{
  background:linear-gradient(180deg,#8d97ad,#5f6b82)!important;
  animation:temblor .45s ease both;
}
@keyframes temblor{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(7px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(3px);}
}

/* ---------------- Pie ---------------- */
.pie{
  min-height:38px;margin:14px 34px 0;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.pie__racha{
  margin:0;font-weight:800;font-size:13px;letter-spacing:.5px;
  color:#ffd166;background:rgba(255,209,102,.14);
  border:1px solid rgba(255,209,102,.45);border-radius:999px;padding:3px 12px;
}
.pie__aviso{margin:0;font-weight:800;font-size:clamp(13px,1.8vw,16px);min-height:20px;text-align:center;}
.pie__aviso--bien{color:#7cf2a5;}
.pie__aviso--mal{color:#ffb0b0;}

/* Puntos flotantes */
.flotante{
  position:absolute;left:50%;top:46%;transform:translateX(-50%);
  font-family:var(--fuente-titulo);font-weight:800;font-size:44px;
  color:var(--oro-1);text-shadow:0 4px 0 rgba(0,0,0,.4);
  pointer-events:none;z-index:9;
  animation:sube 1.15s ease-out forwards;
}
@keyframes sube{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6);}
  25%{opacity:1;transform:translate(-50%,-6px) scale(1.15);}
  100%{opacity:0;transform:translate(-50%,-90px) scale(1);}
}

/* ---------------- Cronómetro ---------------- */
.crono{
  position:absolute;right:-8px;top:158px;width:216px;z-index:6;
  filter:drop-shadow(0 14px 26px rgba(20,40,80,.35));
}
.crono__corona{
  position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  width:34px;height:26px;border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#ffd05c,var(--oro-3));
  border:3px solid #b45c00;
}
.crono__corona::after{
  content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:14px;height:12px;border-radius:4px;background:rgba(120,60,0,.55);
}
.crono__boton{
  position:absolute;right:16px;top:6px;width:26px;height:20px;border-radius:6px;
  background:linear-gradient(180deg,#ffd05c,var(--oro-3));
  border:3px solid #b45c00;transform:rotate(38deg);
}
.crono__cuerpo{
  position:relative;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #0c2856 0%, #071b3e 70%, #05142f 100%);
  border:10px solid transparent;
  background-origin:border-box;
  box-shadow:
    0 0 0 6px #ffb01f,
    0 0 0 10px #e07f00,
    0 0 34px rgba(63,216,255,.55),
    inset 0 0 30px rgba(0,0,0,.6);
  display:grid;place-items:center;
  overflow:hidden;
}
/* sector que se consume con el tiempo */
.crono__sector{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.22) calc(var(--p,0)*1turn), rgba(255,255,255,0) 0);
  transition:background .2s linear;
}
/* marcas del dial */
.crono__marcas{
  position:absolute;inset:6px;border-radius:50%;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(255,176,31,.95) 0deg 2.2deg,
    rgba(255,176,31,0) 2.2deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 0 68%, #000 69% 100%);
          mask:radial-gradient(circle, transparent 0 68%, #000 69% 100%);
}
.crono__centro{position:relative;text-align:center;z-index:2;padding:0 8px;}
.crono__label{
  margin:0;font-family:var(--fuente-titulo);font-weight:800;
  font-size:12px;letter-spacing:.6px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.7);
}
.crono__digitos{
  margin:0;font-family:var(--fuente-titulo);font-weight:800;
  font-size:46px;line-height:1;color:#ffe23d;
  text-shadow:0 0 16px rgba(255,214,0,.75), 0 3px 0 rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums;
}
/* estado de urgencia: menos de 10 segundos */
.crono--urgente .crono__cuerpo{
  box-shadow:
    0 0 0 6px #ff5a3c,
    0 0 0 10px #b81f00,
    0 0 44px rgba(255,80,60,.85),
    inset 0 0 30px rgba(0,0,0,.6);
  animation:latido .6s ease-in-out infinite;
}
.crono--urgente .crono__digitos{color:#ff6b6b;text-shadow:0 0 20px rgba(255,60,60,.9);animation:parpadeo .6s steps(1,end) infinite;}
@keyframes latido{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
@keyframes parpadeo{0%,60%{opacity:1;}61%,100%{opacity:.32;}}
.crono--tic{animation:tic .18s ease;}
@keyframes tic{0%{transform:rotate(0);}50%{transform:rotate(-2.5deg);}100%{transform:rotate(0);}}

/* ---------------- Botones ---------------- */
.btn{
  font-family:var(--fuente-titulo);font-weight:800;cursor:pointer;
  border-radius:999px;border:none;transition:transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-3px);filter:brightness(1.07);}
.btn:active{transform:translateY(2px);}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.btn--jugar{
  font-size:clamp(18px,2.4vw,23px);color:#5a3600;padding:13px 40px;
  background:linear-gradient(180deg,var(--oro-1),var(--oro-2));
  border:3px solid #b06f00;
  box-shadow:0 6px 0 #9c6100, 0 14px 24px rgba(0,0,0,.3);
}
.btn--sec{
  font-size:clamp(14px,1.9vw,17px);color:#dbe9ff;padding:11px 26px;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.35);
}

/* ---------------- Pantalla de inicio ---------------- */
.inicio{text-align:center;padding:14px 10px 8px;max-width:640px;margin:0 auto;}
.inicio__lema{margin:0;color:var(--oro-1);font-weight:800;letter-spacing:3px;font-size:14px;}
.inicio__titulo{
  margin:8px 0 10px;font-family:var(--fuente-titulo);font-weight:800;
  font-size:clamp(20px,3.2vw,30px);line-height:1.15;text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.inicio__texto{margin:0 auto 18px;max-width:520px;font-size:clamp(13px,1.8vw,16px);color:#cfe2ff;line-height:1.5;}
.inicio__texto strong{color:#fff;}
.modos{border:none;margin:0 0 20px;padding:0;display:grid;gap:10px;}
.modos__titulo{
  font-family:var(--fuente-titulo);font-weight:800;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;color:#9fc4ff;margin-bottom:8px;padding:0;
}
.modo{position:relative;display:block;cursor:pointer;}
.modo input{position:absolute;opacity:0;width:0;height:0;}
.modo__cuerpo{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.2);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.modo:hover .modo__cuerpo{transform:translateY(-2px);background:rgba(255,255,255,.12);}
.modo__nombre{font-family:var(--fuente-titulo);font-weight:800;font-size:clamp(15px,2vw,18px);}
.modo__detalle{font-size:13px;color:#a9c6ee;}
.modo input:checked + .modo__cuerpo{
  background:linear-gradient(180deg,rgba(255,224,102,.28),rgba(255,179,31,.2));
  border-color:var(--oro-1);box-shadow:0 0 20px rgba(255,196,50,.35);
}
.modo input:focus-visible + .modo__cuerpo{outline:3px solid #fff;outline-offset:2px;}
.inicio__ayuda{margin:14px 0 0;font-size:12.5px;color:#9fc4ff;}
kbd{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  border-radius:6px;padding:1px 7px;font-family:var(--fuente-titulo);font-size:12px;
}

/* ---------------- Pantalla final ---------------- */
.fin{text-align:center;padding:10px 6px;}
.fin__medalla{margin:0;font-size:56px;line-height:1;animation:medalla .9s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes medalla{from{transform:scale(0) rotate(-40deg);opacity:0;}to{transform:none;opacity:1;}}
.fin__rango{
  margin:6px 0 2px;font-family:var(--fuente-titulo);font-weight:800;
  font-size:clamp(20px,3vw,29px);color:var(--oro-1);text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.fin__puntos{margin:0 0 14px;font-family:var(--fuente-titulo);font-weight:800;font-size:clamp(32px,5vw,48px);}
.fin__puntos small{font-size:.4em;color:#a9c6ee;font-weight:700;letter-spacing:2px;}
.fin__stats{
  list-style:none;margin:0 auto 16px;padding:0;max-width:460px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.fin__stats li{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:10px 6px;
}
.fin__stats b{display:block;font-family:var(--fuente-titulo);font-size:24px;color:#fff;}
.fin__stats span{font-size:12px;color:#a9c6ee;letter-spacing:.6px;}
.repaso{
  max-width:640px;margin:0 auto 18px;text-align:left;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:12px 18px;max-height:230px;overflow:auto;
}
.repaso__titulo{margin:2px 0 8px;font-family:var(--fuente-titulo);font-size:16px;color:#9fc4ff;letter-spacing:1px;text-transform:uppercase;}
.repaso__lista{margin:0;padding-left:20px;}
.repaso__lista li{margin-bottom:9px;font-size:13.5px;line-height:1.45;color:#dbe9ff;}
.repaso__lista b{color:var(--oro-1);}
.fin__botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------------- Controles de audio ---------------- */
.controles{
  position:absolute;left:18px;top:0;z-index:7;
  display:flex;gap:8px;
}
.control{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.75);border:2px solid rgba(90,110,140,.4);
  color:#1a2c50;font-family:var(--fuente-titulo);font-weight:800;font-size:13px;
  border-radius:999px;padding:6px 14px;cursor:pointer;
  box-shadow:0 4px 12px rgba(30,50,90,.2);
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.control:hover{transform:translateY(-2px);background:#fff;}
.control:focus-visible{outline:3px solid #ffb31f;outline-offset:2px;}
.control--mudo{opacity:.55;}
.control--mudo .control__txt{text-decoration:line-through;}
/* La pista suena, pero el elemento no se ve */
#musica{display:none;}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .escena{padding-top:10px;}
  .crono{width:170px;right:-14px;top:112px;}
  .crono__digitos{font-size:36px;}
  .crono__label{font-size:10px;}
  .marco{padding:22px 60px;}
  .marco__lateral{width:44px;background-size:44px auto;}
}

@media (max-width:820px){
  .titulo{margin-bottom:-30px;max-width:96%;}
  .marco{padding:18px 16px;border-radius:26px;}
  .marco__lateral{display:none;}
  .marco::before{inset:7px;}
  .tablero{padding:16px 14px 20px;}
  .tarjeta{margin:0 4px 18px;}
  .tarjeta::before,.tarjeta::after,.opcion::before{display:none;}
  .opciones{margin:0 4px;grid-template-columns:1fr;gap:10px;}
  .pie{margin:12px 4px 0;}
  /* En móvil el cronómetro se coloca junto al título, sin taparlo */
  .escena{display:flex;flex-wrap:wrap;align-items:center;padding-top:16px;}
  .titulo{order:1;flex:1 1 55%;min-width:0;max-width:none;margin:0 0 -14px;}
  .crono{order:2;position:static;flex:0 0 96px;width:96px;margin:0 2px 0 6px;align-self:center;}
  .marco{order:3;flex:1 1 100%;margin-top:6px;}
  .crono__corona{top:-14px;width:22px;height:16px;border-width:2px;}
  .crono__boton{width:16px;height:12px;right:8px;top:2px;border-width:2px;}
  .crono__cuerpo{border-width:6px;box-shadow:0 0 0 4px #ffb01f,0 0 0 7px #e07f00,0 0 22px rgba(63,216,255,.5),inset 0 0 20px rgba(0,0,0,.6);}
  .crono__label{font-size:8px;letter-spacing:0;}
  .crono__digitos{font-size:26px;}
  .cabecera{flex-direction:column;gap:6px;}
  .marcador{position:static;transform:none;}
  .marcador--sube{animation:marcadorSubeMovil .5s ease;}
  @keyframes marcadorSubeMovil{0%{transform:scale(1);}45%{transform:scale(1.16);}100%{transform:scale(1);}}
  .controles{position:fixed;left:10px;bottom:10px;top:auto;}
  .control{font-size:12px;padding:5px 11px;}
  .fin__stats{grid-template-columns:1fr 1fr 1fr;}
}

@media (max-width:420px){
  .crono{width:96px;}
  .crono__digitos{font-size:22px;}
  .opcion{padding:9px 12px 9px 9px;}
  .fin__medalla{font-size:44px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}