/* Radio Papá Noel: the menus over the canvas. #capas is a tall 1080 x 1920
   stage (a 9:16 screen standing up) scaled by the script to the screen, so
   every size here is in stage pixels. */
@font-face {
  font-family: "Fredoka";
  src: url("assets/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --noche: #0a1838;
  --rojo: #d92b3a;
  --rojo-oscuro: #9c1422;
  --oro: #ffc94d;
  --crema: #fff3dc;
  --tinta: #10203f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noche); }
body { font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; color: #fff; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#capas { position: fixed; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; pointer-events: none; }
.capa { position: absolute; inset: 0; text-align: center; }
.capa[hidden] { display: none; }
.capa > * { pointer-events: auto; }

.marca { position: absolute; left: 50px; right: 50px; top: 120px; text-shadow: 0 7px 0 rgba(6, 15, 41, 0.55); }
.sobre { margin: 0; -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill; font-size: 48px; font-weight: 500; color: var(--oro); letter-spacing: 0.05em; text-transform: uppercase; }
h1 { margin: 6px 0 0; font-size: 196px; line-height: 0.96; font-weight: 700; letter-spacing: -0.01em; -webkit-text-stroke: 14px var(--tinta); paint-order: stroke fill; }
h1 span { display: block; color: var(--rojo); -webkit-text-stroke: 7px #fff; paint-order: stroke fill; }
.bajada { -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill; margin: 26px auto 0; max-width: 860px; font-size: 48px; line-height: 1.2; font-weight: 500; color: #dbe7ff; }
.marca h2 { margin: 14px 0 0; font-size: 92px; line-height: 1.04; font-weight: 700; -webkit-text-stroke: 12px var(--tinta); paint-order: stroke fill; }

.pie { position: absolute; left: 90px; right: 90px; top: 1440px; display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
.pista { margin: 0; font-size: 42px; font-weight: 600; color: #fff; -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill; }
#final .pie { top: 1190px; gap: 20px; }

.boton { font: inherit; font-weight: 700; font-size: 40px; color: #fff; background: var(--rojo); border: 0; border-radius: 30px; padding: 20px 36px; cursor: pointer; box-shadow: 0 10px 0 var(--rojo-oscuro), 0 22px 30px rgba(6, 15, 41, 0.4); transition: transform 0.08s, box-shadow 0.08s; }
.boton:active { transform: translateY(10px); box-shadow: 0 2px 0 var(--rojo-oscuro), 0 8px 14px rgba(6, 15, 41, 0.4); }
.boton:focus-visible, #barra button:focus-visible { outline: 6px solid var(--oro); outline-offset: 4px; }
.boton.grande { font-size: 110px; padding: 34px 40px 40px; border-radius: 56px; box-shadow: 0 14px 0 var(--rojo-oscuro), 0 30px 40px rgba(6, 15, 41, 0.4); animation: latido 1.6s ease-in-out infinite; }
.boton.chico { font-size: 26px; padding: 12px 24px; border-radius: 18px; box-shadow: 0 6px 0 var(--rojo-oscuro); }
@keyframes latido { 50% { transform: scale(1.04); } }

.puntos { margin: 0; font-size: 64px; font-weight: 600; color: #dbe7ff; text-shadow: 0 6px 0 rgba(6, 15, 41, 0.55); }
.puntos span { font-size: 190px; font-weight: 700; color: var(--oro); line-height: 0.95; }
.estrellas { margin: 0 0 22px; font-size: 96px; line-height: 1; letter-spacing: 0.08em; color: var(--oro); text-shadow: 0 6px 0 rgba(6, 15, 41, 0.55); }
.estrellas i { font-style: normal; color: rgba(255, 255, 255, 0.22); }

/* ---------- Corner buttons (not shown while a child plays) and settings ---------- */
#barra { position: absolute; left: 26px; bottom: 30px; display: flex; gap: 12px; pointer-events: auto; opacity: 0.6; }
#barra button { width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 17px; color: #fff; background: rgba(10, 24, 56, 0.8); cursor: pointer; }
#barra svg { display: block; width: 100%; height: 100%; }
#barra .mudo, #barra .silencio .ondas { display: none; }
#barra .silencio .mudo { display: inline; }
body.jugando #barra { display: none; }
dialog { font: inherit; color: var(--tinta); border: 0; border-radius: 28px; padding: 28px 32px; width: min(520px, 92vw); background: var(--crema); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
dialog::backdrop { background: rgba(6, 15, 41, 0.7); }
dialog h2 { margin: 0 0 18px; font-size: 32px; }
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; font-size: 20px; font-weight: 600; }
.ajuste select, .ajuste input { font: inherit; font-size: 18px; padding: 8px 10px; border-radius: 12px; border: 2px solid #d9c7a2; background: #fff; max-width: 260px; }
.nota { font-size: 16px; color: #5b6784; margin: 18px 0; }
@media (prefers-reduced-motion: reduce) { .boton.grande { animation: none; } }