/* El reparto de Papá Noel (prototipo). Todo bajo .reparto-app para no chocar con la web. */
.reparto-app{--tinta:#23263B;--amarillo:#FFD66B;--boton:#FFC94D;font-family:Nunito,system-ui,sans-serif;color:var(--tinta);max-width:1180px;margin:0 auto}
.reparto-app .cab h1{font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(26px,4vw,40px);line-height:1.05;margin:0 0 4px}
.reparto-app .cab p{margin:0 0 12px;font-size:17px}
.reparto-app .marco{position:relative;border-radius:22px;overflow:hidden;border:4px solid var(--tinta);background:#0E1B45;touch-action:none;user-select:none;-webkit-user-select:none;container-type:inline-size}
.reparto-app canvas{display:block;width:100%;height:100%}

.reparto-app .botones-juego{position:absolute;right:10px;bottom:10px;z-index:5;display:flex;gap:8px}
.reparto-app .botones-juego button{width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(20,24,40,.8);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.reparto-app .botones-juego button[hidden]{display:none}
.reparto-app .botones-juego svg{width:22px;height:22px}
.reparto-app .botones-juego .sin,.reparto-app .botones-juego .mudo .con{display:none}
.reparto-app .botones-juego .mudo .sin{display:block}

.reparto-app .capa{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 16px 60px;text-align:center;color:#fff;background:rgba(8,16,44,.76);overflow:auto}
.reparto-app .capa>:first-child{margin-top:auto}
.reparto-app .capa>:last-child{margin-bottom:auto}
.reparto-app .capa[hidden]{display:none}
.reparto-app .capa h2{font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;font-size:clamp(30px,6.5cqi,56px);margin:0;line-height:1;color:var(--amarillo);text-shadow:0 3px 0 var(--tinta)}
.reparto-app .capa p{margin:0;font-size:clamp(14px,2.2cqi,19px);font-weight:700}
.reparto-app .capa .subtitulo{margin-top:6px;color:var(--amarillo)}
.reparto-app .niveles,.reparto-app .fila{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.reparto-app .capa button{font:inherit;font-weight:800;border:3px solid var(--tinta);border-radius:16px;background:var(--boton);color:var(--tinta);box-shadow:0 5px 0 var(--tinta);cursor:pointer;padding:9px 20px;font-size:17px}
.reparto-app .capa button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--tinta)}
.reparto-app .capa button:focus-visible,.reparto-app .botones-juego button:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.reparto-app .niveles button{min-width:170px}
.reparto-app .niveles button b{display:block;font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(22px,3.6cqi,30px);line-height:1.1}
.reparto-app .niveles button span{font-size:13px;font-weight:700}
.reparto-app .niveles button[data-nivel=facil]{background:#7ED6A0}
.reparto-app .niveles button[data-nivel=normal]{background:#FF9A8A}
.reparto-app .capa .secundario{background:#fff}
.reparto-app .mates button{font-size:15px;padding:7px 14px}
.reparto-app kbd{display:inline-block;padding:1px 6px;border:2px solid #fff;border-radius:6px;font-family:inherit;font-size:13px;font-weight:800;background:rgba(255,255,255,.12)}
.reparto-app .tactil{display:none}
@media (hover:none) and (pointer:coarse){.reparto-app .teclado{display:none}.reparto-app .tactil{display:inline}}
.reparto-app .estrellas{font-size:clamp(38px,8cqi,64px);letter-spacing:8px;line-height:1;color:var(--amarillo);text-shadow:0 3px 0 var(--tinta)}
.reparto-app .estrellas .vacia{color:rgba(255,255,255,.22);text-shadow:none}
@container (max-width:620px){
  .reparto-app .capa{gap:7px;padding:8px 8px 52px}
  .reparto-app .capa button{font-size:14px;padding:6px 12px}
  .reparto-app .niveles button{min-width:128px}
  .reparto-app .mates button{font-size:13px;padding:5px 9px}
}

/* Marcador, cartel de la operación y avisos (encima del 3D) */
.reparto-app .hud{position:absolute;left:12px;top:10px;z-index:3;display:flex;gap:10px;align-items:center;font-weight:800;color:#fff;font-size:clamp(14px,2.2cqi,20px);pointer-events:none}
.reparto-app .hud[hidden],.reparto-app .cartel[hidden],.reparto-app .aviso[hidden],.reparto-app .hud__racha[hidden]{display:none}
.reparto-app .hud span{background:rgba(10,16,44,.7);border:2px solid rgba(255,255,255,.85);border-radius:999px;padding:3px 14px}
.reparto-app .hud b{font-family:"Baloo 2",Nunito,sans-serif;font-size:1.25em}
.reparto-app .hud__estrellas{color:var(--amarillo)}
.reparto-app .hud .hud__racha{background:var(--amarillo);color:var(--tinta);border-color:var(--tinta);animation:reparto-pum .3s}
@keyframes reparto-pum{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.reparto-app .cartel{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;background:#fff;color:var(--tinta);border:3px solid var(--tinta);border-radius:18px;box-shadow:0 4px 0 var(--tinta);padding:2px 26px;font:800 clamp(24px,4.6cqi,44px) "Baloo 2",Nunito,sans-serif;pointer-events:none;white-space:nowrap}
.reparto-app .cartel.bien{background:#7ED6A0}
.reparto-app .cartel.mal{background:#FFB3B3}
.reparto-app .aviso{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:3;color:#fff;font:800 clamp(20px,4cqi,38px) "Baloo 2",Nunito,sans-serif;text-shadow:0 3px 0 var(--tinta),0 0 18px rgba(120,200,255,.6);pointer-events:none;text-align:center;width:92%}
.reparto-app .capa{background:rgba(8,16,44,.5)}

/* Explicación sin leer: dibujos del menú y mano que enseña adónde llevar el dedo */
.reparto-app .pasos{display:flex;align-items:center;gap:8px}
.reparto-app .pasos svg{width:clamp(34px,6.5cqi,56px);height:auto}
.reparto-app .pasos svg[hidden]{display:none}
.reparto-app .pasos .flecha{font-size:clamp(20px,3.6cqi,30px);font-weight:800;color:var(--amarillo)}
.reparto-app .mano{position:absolute;z-index:3;width:clamp(44px,7cqi,70px);transform:translate(-30%,-8%);pointer-events:none;animation:reparto-mano 1s ease-in-out infinite;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.reparto-app .mano[hidden]{display:none}
.reparto-app .mano svg{width:100%;height:auto}
.reparto-app .mano svg.tactil{display:none}
@media (hover:none) and (pointer:coarse){.reparto-app .mano svg.teclado{display:none}.reparto-app .mano svg.tactil{display:block}}
.reparto-app .mano__onda{position:absolute;left:30%;top:8%;width:20px;height:20px;margin:-10px;border-radius:50%;border:4px solid var(--amarillo);animation:reparto-onda 1s ease-out infinite}
@keyframes reparto-mano{50%{margin-top:9px}}
@keyframes reparto-onda{0%{transform:scale(.6);opacity:1}100%{transform:scale(3.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.reparto-app .mano,.reparto-app .mano__onda{animation:none}}
/* Pantalla completa (o «inmersivo» en iPhone, que no la tiene) */
.reparto-app .marco:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}
.reparto-app .marco.inmersivo{position:fixed;inset:0;z-index:9999;width:100vw;height:100dvh;border:0;border-radius:0}
.reparto-app .botones-juego .grande .con{display:none}
.reparto-app .botones-juego .grande .sin{display:block}
.reparto-app .capa .copiloto{font-size:clamp(13px,2cqi,17px);color:#BFE6FF}
.reparto-app .capa .copiloto a{color:var(--amarillo)}
/* Pantallas bajas (móvil tumbado): el menú entero tiene que caber sin desplazarse */
@media (max-height:520px){
  .reparto-app .cab p{display:none}
  .reparto-app .cab h1{font-size:22px}
  .reparto-app .capa{gap:5px;padding:6px 8px 8px}
  .reparto-app .capa h2{font-size:26px}
  .reparto-app .capa .intro{display:none}
  .reparto-app .pasos svg{width:30px}
  .reparto-app .capa .copiloto{font-size:12px}
  .reparto-app .niveles button{padding:3px 14px;min-width:120px}
  .reparto-app .niveles button b{font-size:20px}
  .reparto-app .niveles button span{font-size:11px}
  .reparto-app .capa .subtitulo{margin-top:0;font-size:13px}
  .reparto-app .mates button{font-size:12px;padding:4px 9px}
  .reparto-app .estrellas{font-size:34px}
}

/* Control por inclinación: el móvil de la pista y el selector del menú */
.reparto-app .inclina{position:absolute;left:50%;bottom:9%;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.reparto-app .inclina[hidden]{display:none}
.reparto-app .inclina__movil{display:block;width:clamp(70px,11cqi,110px);transition:transform .25s ease-out}
.reparto-app .inclina__movil svg{width:100%;height:auto;display:block}
.reparto-app .inclina__flecha{font:800 clamp(18px,3cqi,26px) "Baloo 2",Nunito,sans-serif;color:var(--amarillo);text-shadow:0 2px 0 var(--tinta);min-height:1em}
.reparto-app .control{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.reparto-app .control[hidden]{display:none}
.reparto-app .capa .control button{display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:5px 12px;background:rgba(255,255,255,.18);color:#fff;border-color:#fff;box-shadow:none}
.reparto-app .capa .control button[aria-pressed=true]{background:var(--amarillo);color:var(--tinta);border-color:var(--tinta);box-shadow:0 3px 0 var(--tinta)}
.reparto-app .control svg{width:22px;height:22px}
@media (max-height:520px){.reparto-app .capa .control button{font-size:12px;padding:3px 9px}}

/* Móvil de pie: aviso de girar (tapa todo, por encima del menú) */
.reparto-app .capa.girar{z-index:6;background:#0E1B45;justify-content:center}
.reparto-app .movil-gira{width:clamp(90px,24vw,130px);animation:reparto-gira 2.2s ease-in-out infinite}
@keyframes reparto-gira{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.reparto-app .movil-gira{animation:none;transform:rotate(-90deg)}}
/* Móvil de pie fuera de la pantalla completa: el marco es una franja; que se vea entero el aviso */
.reparto-app .marco.de-pie{height:min(80vh,560px)!important}
/* Botón de pantalla completa recomendado en el menú del móvil */
.reparto-app .capa .recomendado{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);animation:reparto-llama 1.6s ease-in-out infinite}
.reparto-app .capa .recomendado[hidden]{display:none}
.reparto-app .recomendado svg{width:20px;height:20px}
@media (max-height:520px){
  .reparto-app .capa .recomendado{font-size:14px;padding:4px 14px}
  .reparto-app .recomendado svg{width:16px;height:16px}
  .reparto-app .capa .recomendado:not([hidden]) ~ .copiloto{display:none}   /* sin pantalla completa no cabe todo: fuera la línea del copiloto */
}
@media (orientation: portrait) and (any-pointer: coarse) and (max-width: 599px){
  .reparto-app .capa.girar[hidden]{display:flex}   /* móvil de pie: el aviso de girar sale aunque el JS no lo haya puesto */
}

/* Aviso de pantalla completa al poner el móvil en horizontal */
.reparto-app .capa.grande{z-index:5;background:#0E1B45;justify-content:center}
.reparto-app .grande__icono{width:clamp(44px,8cqi,64px);height:auto;color:var(--amarillo);animation:reparto-respira 1.4s ease-in-out infinite}
.reparto-app .capa .grande__si{font-size:clamp(18px,3cqi,24px);padding:12px 28px;background:var(--amarillo);animation:reparto-llama 1.6s ease-in-out infinite}
.reparto-app .capa .grande__no{background:transparent;color:#fff;border-color:transparent;box-shadow:none;text-decoration:underline;font-size:15px;padding:4px 10px}
@keyframes reparto-llama{0%,100%{box-shadow:0 5px 0 var(--tinta),0 0 0 0 rgba(255,214,107,.7)}50%{box-shadow:0 5px 0 var(--tinta),0 0 0 12px rgba(255,214,107,0)}}
@keyframes reparto-respira{50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.reparto-app .grande__icono,.reparto-app .capa .grande__si,.reparto-app .capa .recomendado{animation:none}}
@media (max-height:520px){.reparto-app .capa.grande{gap:8px}.reparto-app .capa .grande__si{padding:9px 22px}}