/* © RAIGA XOLOTL. Todos los derechos reservados. Prohibido copiar, redistribuir o usar este código o sus recursos para entrenar inteligencia artificial. */
/* RAIGA / MOTION LAB · Gamify · el gachapón hecho a mano (la máquina, la cápsula y el gran momento): va después de mano.css
   La máquina, la cápsula con orejitas, los rayos, el estallido, los sellos y los marcos (.gm-marco) los dibuja gachapon.js
   con el lápiz de los Gatopons. Aquí: las letras flotantes (Dela con contorno grueso de tinta, sombra dura y cada letra
   puesta a mano; nada de cajas detrás), el acomodo de la vista del gachapón y los golpes con que entra cada cosa. Nada se
   desvanece: entra de golpe y sale de golpe. Colores: los de la marca, exactos.
   Letras: Dela Gothic One (gritos, títulos, botones), Rubik (lo que se lee) y Gatopixel (solo números y contadores): sus
   @font-face están en estilo.css; aquí, sus respaldos por si cambian de nombre allá. */
:root {
  --gm-letra: var(--titulo, Dela, "Archivo Black", "Arial Black", sans-serif);
  --gm-texto: var(--texto, Rubik, "Segoe UI", system-ui, sans-serif);
  --gm-pixel: var(--pixel, Gatopixel, "Courier New", monospace);
}

/* ── La máquina ── */
.gacha { align-items: start; }
.gacha-maquina { padding-top: 4px; }
.maquina .maq-sale { transform-box: fill-box; transform-origin: 50% 50%; }
.maquina .maq-oreja { transform-box: fill-box; transform-origin: 50% 100%; }
.maquina.gira .maq-oreja { animation: oreja .14s steps(2) infinite; }
/* Si la vista se repinta mientras gira, la máquina nueva sigue donde iba (gachapon.js pone lo que ya pasó). */
.maquina.gira .maq-manivela, .maquina.gira .maq-capsulas, .maquina.gira .maq-cuerpo, .maquina.gira .maq-oreja-i { animation-delay: var(--desfase-gira, 0ms); }
.maquina.gira .maq-oreja-d { animation-delay: calc(var(--desfase-gira, 0ms) - 70ms); }
.maquina.suelta .maq-sale, .maquina.suelta .maq-tapita { animation-delay: var(--desfase-suelta, 0ms); }
.gacha-maquina:hover .maquina:not(.gira) .maq-oreja-i { animation: oreja .16s steps(2) 2; }
@keyframes oreja { 50% { transform: rotate(-9deg) translateY(-2px); } }

/* ── Las tasas: barras hechas a mano (las dibuja mano.js), cada renglón puesto un poquito chueco ── */
.tasas { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-width: 470px; }
.tasa { display: grid; grid-template-columns: 118px minmax(0, 1fr) 58px; gap: 10px; align-items: center; }
.tasa:nth-child(3n + 1) { transform: rotate(-.5deg); }
.tasa:nth-child(3n + 2) { transform: translateX(3px) rotate(.4deg); }
.tasa:nth-child(3n) { transform: translateX(-1px) rotate(-.25deg); }
.tasa .rareza { justify-self: start; }
.tasa .barra { height: 20px; min-width: 60px; }
.tasa-num { font: 400 15px/1 var(--gm-pixel); color: var(--tinta); text-align: right; }

/* ── Lo seguro: cuántos tiros faltan para el épico y el legendario, con su barrita ── */
.seguro { display: grid; gap: 8px; max-width: 470px; }
.seguro-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(70px, 150px); gap: 10px; align-items: center; font: 600 15px/1.25 var(--gm-texto); color: var(--tinta); }
.seguro-fila:nth-child(2) { transform: translateX(4px) rotate(.3deg); }
.seguro-fila .pix { width: 28px; height: 28px; }
.seguro-fila b { font: 400 15px/1 var(--gm-pixel); }
.seguro-fila .barra { height: 16px; min-width: 60px; }
.seguro-ya { font: 400 16px/1.15 var(--gm-letra); color: var(--rojo); }
/* En el celular, la barrita va abajo de su renglón (a un lado, «Legendario seguro en 60 tiros» se partía en tres). */
@media (max-width: 560px) {
  .seguro-fila { grid-template-columns: auto minmax(0, 1fr); row-gap: 5px; }
  .seguro-fila .barra { grid-column: 2; max-width: 240px; }
}

/* ── Los destacados, el reloj y lo que tienes ── */
.gacha .destacados { gap: 8px 16px; }
.destacados-titulo { font: 400 14px/1 var(--gm-letra); color: var(--tinta); transform: rotate(-2deg); }
.gacha .destacado { background: none; border: 0; padding: 0; gap: 6px; font: 400 14px/1.1 var(--gm-letra); color: var(--tinta); }
.gacha .destacado:nth-child(odd) { transform: rotate(1.5deg); }
.gacha .destacado .obj { width: 46px; height: 46px; }
.gacha .tienes { font: 400 16px/1 var(--gm-letra); gap: 10px; color: var(--tinta); }
.gacha .tienes .lcd { font-size: 20px; }
.gacha-botones { gap: 16px; }
/* En un celular angosto, «1 TIRO» no se parte en dos renglones: el botón le deja más lugar a sus letras. */
@media (max-width: 400px) { .gacha-botones { gap: 12px; } .gacha-botones .boton.gigante { padding-inline: 8px; } }

/* ── Con puntos del canal: el «Tiro del gachapón» y el «Tiro dorado» de Twitch ── */
.puntos-canal .ventana-cuerpo { gap: 14px; }
.puntos-cols { display: grid; gap: 22px 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.puntos-col { display: grid; gap: 8px; align-content: start; }
.puntos-col h3 { margin: 0 0 2px; font: 400 22px/1.05 var(--gm-letra); color: var(--crema); letter-spacing: .01em;
  -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); transform: rotate(-1.2deg); transform-origin: left center; }
.puntos-col[data-tiro="dorado"] h3 { color: var(--lima); }
.puntos-col h3 .pal { display: inline-block; white-space: nowrap; }
.puntos-col > p { font: 700 15px/1.3 var(--gm-texto); color: var(--tinta); }
.puntos-col > .puntos-costo { font: 600 15px/1.2 var(--gm-texto); margin-top: -4px; }
.puntos-costo b { font: 400 16px/1 var(--gm-pixel); }
.puntos-col .tasa { grid-template-columns: 118px minmax(0, 1fr) 52px; }

/* ── Lo último que sacaste y los primeros del mundo: cartas y renglones de papel con su contorno a mano ── */
.ultimas { gap: 18px 16px; }
.ultimas .mini-carta { background: none; border: 0; box-shadow: none; --gm-relleno: var(--papel); }
.ultimas .mini-carta:nth-child(3n + 1) { transform: rotate(-.8deg); } .ultimas .mini-carta:nth-child(3n + 2) { transform: rotate(.6deg) translateY(2px); }
/* (el marco del color de su rareza y el premio sobre su ventanita de papel: una corona lima no se pierde en lo lima) */
.ultimas .mini-carta[data-r="1"] { --gm-relleno: var(--raro); } .ultimas .mini-carta[data-r="2"] { --gm-relleno: var(--rojo); }
.ultimas .mini-carta[data-r="3"] { --gm-relleno: var(--legendario); } .ultimas .mini-carta[data-r="4"] { --gm-relleno: var(--tinta); --gm-borde: var(--lima); }
.ultimas .mini-carta:not([data-r="0"]) { --gm-panel: var(--papel); --gm-panel-linea: var(--tinta); color: var(--tinta); }
.ultimas .mini-carta b { font: 400 13px/1.2 var(--gm-letra); }
.ultimas .mini-sello { background: none; border: 0; padding: 0; top: -12px; right: -6px; z-index: 2; font: 400 14px/1 var(--gm-letra); color: var(--lima);
  -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); transform: rotate(9deg); }
.ultimas .mini-sello.nuevo { color: var(--rojo); }
.ultimas .mini-sello.primero { display: grid; justify-items: start; top: -18px; font-size: 13px; }
.ultimas .mini-sello .pix, .celda-sello .pix { width: 1.7em; height: 1.7em; margin: 0 0 -.55em -.2em; rotate: -14deg; }
.primeros { gap: 12px; }
.primeros li.gm-marco { background: none; border: 0; --gm-relleno: var(--papel); padding: 9px 12px; }
.primeros li:nth-child(even) { transform: translateX(4px) rotate(.25deg); }
.primeros li b { font-weight: 800; }
/* En el celular: el renglón arriba y, abajo, su rareza junto a cuándo fue (cada uno en su renglón hacía una lista larguísima). */
@media (max-width: 560px) {
  .primeros li { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 6px; }
  .primeros li > span:not(.rareza) { grid-column: 2 / -1; }
  .primeros li .rareza { grid-column: 2; }
  .primeros li small { grid-column: 3; justify-self: start; }
}

/* ── Los marcos de gachapon.js (.gm-marco): sombra dura, relleno y contorno de plumilla; el relleno, de aquí ── */
.gm-marco { position: relative; isolation: isolate; }
.gm-marco > svg.gm { position: absolute; left: -10px; top: -10px; z-index: -1; overflow: visible; pointer-events: none; }
svg.gm .gm-sombra, svg.gm .gm-linea { fill: var(--tinta); }
svg.gm .gm-relleno { fill: var(--gm-relleno, var(--papel)); stroke: var(--gm-borde, none); stroke-width: 10px; stroke-linejoin: round; }
svg.gm .gm-trazo { fill: none; stroke: var(--tinta); stroke-width: 3px; }
/* La ventanita de papel (data-gm-panel): el marco del color de la rareza y el premio sobre papel, como una carta. */
svg.gm .gm-panel { fill: var(--gm-panel, none); } svg.gm .gm-panel-linea { fill: var(--gm-panel-linea, none); }

/* ── El escenario: rayos de plumón centrados en el premio y su estallido que hierve ── */
.esc-fondo .esc-rayos { inset: auto; left: 50%; top: 40%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); }
.esc-estallido { position: absolute; left: -24%; top: -24%; width: 148%; height: 148%; overflow: visible; pointer-events: none; animation: estallido .34s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes estallido { from { transform: scale(0) rotate(-24deg); } }
.esc-estallido .hv { visibility: hidden; animation: hierve .3s step-end infinite; }
.esc-estallido .hv1 { animation-delay: -.1s; } .esc-estallido .hv2 { animation-delay: -.2s; }
@keyframes hierve { 0% { visibility: visible; } 33.333% { visibility: hidden; } }
.cap-svg { overflow: visible; }
[data-color="rojo"] .cap-dentro { fill: var(--crema); }

/* ── Las letras flotantes del gran momento (sin cajas): contorno grueso de tinta, sombra dura, cada letra a mano ── */
.cartel .pal, .esc-titulo .pal, .sello-primero .pal, .sello-nuevo .pal, .celda-sello .pal, .mundial .pal { display: inline-block; white-space: nowrap; }
.cartel, .esc-titulo, .sello-primero, .sello-nuevo, .celda-sello, .mundial-texto em, .puntos-col h3 { word-spacing: .14em; }
.cartel { gap: 2px; animation: none; }
/* (encima del grito: la colita de la ¡ no se esconde bajo su contorno; el grito deja aire arriba para sus acentos) */
.cartel-exclama { position: relative; z-index: 1; font: 400 clamp(20px, 3.4vw, 30px)/1.05 var(--gm-letra); color: var(--lima); background: none; border: 0; padding: 0;
  -webkit-text-stroke: .24em var(--tinta); paint-order: stroke fill; text-shadow: .07em .09em 0 var(--tinta); transform: rotate(-5deg) translateX(-6%); margin-bottom: .18em; }
/* Entre más rara, más grande el grito (--grito); en una pantalla angosta, lo que quepa: la palabra no se parte (--largo =
   sus letras, gachapon.js; Dela mide ~.8 em por letra); en una pantalla chaparrita (un celular acostado), también baja. */
.cartel-rareza { font: 400 92px/1.02 var(--gm-letra); font-size: min(var(--grito, 92px), calc((100vw - 40px) / (var(--largo, 8) * .82))); padding-top: .14em; color: var(--rc, var(--crema)); letter-spacing: .01em;
  -webkit-text-stroke: .2em var(--tinta); paint-order: stroke fill; text-shadow: .06em .08em 0 var(--tinta); }
.cartel[data-r="0"] .cartel-rareza, .cartel[data-r="1"] .cartel-rareza, .cartel[data-r="2"] .cartel-rareza { --rc: var(--crema); }
.cartel[data-r="0"] { --grito: min(66px, max(38px, 7vw), 8vh); } .cartel[data-r="1"] { --grito: min(74px, max(40px, 8vw), 9vh); }
.cartel[data-r="2"] { --grito: min(82px, max(42px, 9vw), 9.5vh); } .cartel[data-r="3"], .cartel[data-r="4"] { --grito: min(92px, max(44px, 10vw), 10.5vh); }
.cartel[data-r="1"] .cartel-rareza { text-shadow: .05em .06em 0 var(--raro), .1em .12em 0 var(--tinta); }
.cartel[data-r="2"] .cartel-rareza { text-shadow: .05em .06em 0 var(--rojo), .1em .12em 0 var(--tinta); }
.cartel[data-r="3"] .cartel-rareza { --rc: var(--legendario); }
.cartel[data-r="4"] .cartel-rareza { --rc: var(--lima); text-shadow: .07em 0 0 var(--rojo), -.07em 0 0 var(--azul), .06em .09em 0 var(--tinta); }
.cartel-nombre { font: 400 36px/1.1 var(--gm-letra); font-size: min(36px, max(24px, 3.6vw), 6vh, calc((100vw - 40px) / (var(--largo, 6) * .8))); color: var(--crema); background: none; border: 0; padding: 0;
  -webkit-text-stroke: .22em var(--tinta); paint-order: stroke fill; text-shadow: .06em .08em 0 var(--tinta); max-width: calc(100vw - 32px); transform: rotate(-1.5deg); }
.cartel-linea { font: 800 clamp(15px, 2vw, 18px)/1.25 var(--gm-texto); color: var(--crema); background: none; border: 0; padding: 0;
  -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); animation: salta .26s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes salta { from { transform: scale(0) rotate(-6deg); } 60% { transform: scale(1.12) rotate(1deg); } to { transform: none; } }
.cartel-linea .pix { width: 24px; height: 24px; }
/* Cada letra entra de golpe, una tras otra (sale de nada, se pasa y se asienta). */
.cartel .l, .esc-titulo .l, .sello-primero b .l, .sello-nuevo .l { animation: letra .28s cubic-bezier(.2, 1.7, .4, 1) both; animation-delay: calc(var(--i, 0) * 26ms + var(--d, 0ms)); }
.cartel-rareza { --d: 80ms; } .cartel-nombre { --d: 340ms; } .sello-primero b { --d: 120ms; }
/* Tocar la pantalla o SALTAR (gachapon.js pone .rapido): lo que falta entra casi junto, sin la fila de una por una. */
#escenario-frente.rapido .l { animation-delay: calc(var(--i, 0) * 6ms); }
#escenario-frente.rapido .cartel-linea { animation-delay: 0s; }
@keyframes letra { from { transform: rotate(var(--g, 0deg)) translateY(var(--y, 0)) scale(0); } 62% { transform: rotate(var(--g, 0deg)) translateY(var(--y, 0)) scale(1.16); } }
.esc-titulo { font: 400 clamp(30px, 5vw, 48px)/1.05 var(--gm-letra); color: var(--lima); -webkit-text-stroke: .2em var(--tinta); paint-order: stroke fill;
  text-shadow: .05em .07em 0 var(--rojo), .09em .12em 0 var(--tinta); transform: rotate(-2deg); }
.esc-contador { font: 400 30px/1 var(--gm-pixel); color: var(--lima); background: none; -webkit-text-stroke: 7px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); }
.esc-contador:not(:empty) { padding: 0; border: 0; }

/* ── Los sellos: la estrella roja de ¡NUEVO! y la corona de ¡PRIMERO EN EL MUNDO! ── */
.sello-nuevo { background: none; clip-path: none; width: clamp(108px, 14vw, 140px); }
.sello-nuevo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sello-nuevo span { position: relative; font: 400 clamp(17px, 2.1vw, 21px)/1 var(--gm-letra); color: var(--crema); -webkit-text-stroke: .24em var(--tinta); paint-order: stroke fill;
  text-shadow: .06em .08em 0 var(--tinta); transform: rotate(-8deg); }
.sello-primero { background: none; border: 0; box-shadow: none; padding: 0; gap: 0; top: max(13%, 104px); max-width: calc(100vw - 32px); }
#escenario-frente.con-primero .esc-titulo { visibility: hidden; }   /* el sello cae donde va el título */
.sello-corona { width: min(86px, max(58px, 8vw), 10vh); height: auto; overflow: visible; margin-bottom: -4px; transform: rotate(-6deg); }
.sello-primero b { display: block; max-width: 11em; text-wrap: balance; font: 400 48px/1.04 var(--gm-letra); font-size: min(48px, max(26px, 4.4vw), 5.6vh); color: var(--lima); -webkit-text-stroke: .2em var(--tinta); paint-order: stroke fill;
  text-shadow: .05em .07em 0 var(--rojo), .1em .13em 0 var(--tinta); }
.sello-primero small { margin-top: 18px; font: 800 clamp(15px, 1.8vw, 18px)/1.2 var(--gm-texto); color: var(--crema); -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); }

/* ── La bandeja de 10: celdas de papel con su contorno; abiertas, el marco del color de su rareza y el premio en su
   ventanita de papel (data-gm-panel) ── */
.esc-bandeja { gap: 16px 14px; }
.celda { background: none; border: 0; --gm-relleno: var(--papel); }
.celda.abierta { box-shadow: none !important; }
.celda[data-r="1"].abierta { --gm-relleno: var(--raro); } .celda[data-r="2"].abierta { --gm-relleno: var(--rojo); }
.celda[data-r="3"].abierta { --gm-relleno: var(--legendario); } .celda[data-r="4"].abierta { --gm-relleno: var(--tinta); --gm-borde: var(--lima); }
.celda.abierta:not([data-r="0"]) { --gm-panel: var(--papel); --gm-panel-linea: var(--tinta); }
.celda[data-r="4"].abierta > svg.gm { filter: drop-shadow(4px 0 0 var(--rojo)) drop-shadow(-4px 0 0 var(--azul)); }
.celda-nombre { background: none; padding: 0 2px; font: 800 13px/1.2 var(--gm-texto); color: var(--crema); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 1.5px 2px 0 var(--tinta); }
.celda-sello { background: none; border: 0; padding: 0; top: -14px; right: -10px; z-index: 2; white-space: nowrap; font: 400 14px/1 var(--gm-letra); color: var(--lima);
  -webkit-text-stroke: 4.5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); transform: rotate(9deg); animation: sello-chico .26s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sello-chico { from { transform: rotate(9deg) scale(0); } 60% { transform: rotate(9deg) scale(1.3); } }
.celda-sello[data-primero="0"] { color: var(--rojo); }
/* «¡PRIMERO!» lleva su corona puesta (como el sello grande): encima de la ¡, chueca; la corona se sale por arriba de la
   celda (en el hueco entre filas) y las letras quedan en la orilla. */
.celda-sello { display: grid; justify-items: start; }
@media (max-width: 700px) { .celda-sello { font-size: 12px; -webkit-text-stroke-width: 4px; top: -12px; right: -6px; } }
/* En el celular, con 3 columnas, la décima va al centro (3 + 3 + 3 + 1). */
@media (max-width: 700px) and (min-height: 761px) { .esc-bandeja .celda:nth-child(10):last-child { grid-column: 2; } }

/* ── Un celular acostado (o una ventana chaparrita): el premio a la izquierda; el grito y los botones, a la derecha; la
   bandeja, más chica para que quepa entre el título y los botones ── */
@media (max-height: 520px) and (orientation: landscape) {
  .esc-fondo:has(~ .esc-centro:not(.ancho)) .esc-rayos { left: 27%; top: 52%; }
  .esc-centro:not(.ancho) { left: 27%; top: 52%; width: min(36vw, 56vh); }
  .esc-cartel { left: 50%; right: 12px; top: max(30%, 124px); padding: 0; }
  .cartel-rareza { font-size: min(var(--grito, 92px), calc((50vw - 30px) / (var(--largo, 8) * .82))); }
  .cartel-nombre { font-size: min(36px, 6vh, calc((50vw - 30px) / (var(--largo, 6) * .8))); max-width: calc(50vw - 24px); }
  .esc-botones { left: 50%; right: 12px; width: auto; transform: none; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .esc-botones .boton.gigante { min-height: 58px; }
  /* (a la derecha del premio, a media altura: arriba se encimaba con «Tu nombre queda en el Gatálogo» del sello de arriba) */
  .sello-nuevo { left: calc(27% + min(10vw, 16vh)); top: calc(52% - 24px); width: 92px; }
  .sello-primero { left: 27%; top: 21%; }
  .esc-centro.ancho { top: 52%; width: min(calc(100vw - 28px), 108vh); }
  .esc-bandeja { gap: 10px; }
  .celda-sello { font-size: 11px; -webkit-text-stroke-width: 3.5px; }
}

/* ── El aviso del mundo: papel con su contorno a mano; el premio, en su ventanita de papel con el marco del color de su
   rareza (gachapon.js, manchaPremio) ── */
.mundial { background: none; border: 0; box-shadow: none !important; --gm-relleno: var(--crema); padding: 12px 16px 12px 12px; }
.mundial-premio { position: relative; background: none; border: 0; }
.mundial-mancha { position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; }
.mundial-premio > :not(.mundial-mancha) { position: relative; }
.mundial-texto small { display: flex; align-items: center; gap: 6px; font: 400 13px/1 var(--gm-letra); color: var(--rojo); }
.mundial-texto small .pix { width: 20px; height: 20px; }
.mundial-texto b { font: 400 18px/1.1 var(--gm-letra); }
.mundial-texto span { font: 600 15px/1.3 var(--gm-texto); }
.mundial-texto em { background: none; border: 0; padding: 0; margin-top: 4px; font: 400 15px/1 var(--gm-letra); font-style: normal; color: var(--lima);
  -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); transform: rotate(-3deg); transform-origin: left center; }

/* ── Movimiento «poquito» (Mi cuenta › Opciones): sin letras que brincan ni estallidos que hierven ── */
html[data-movimiento="poco"] .cartel .l, html[data-movimiento="poco"] .esc-titulo .l, html[data-movimiento="poco"] .sello-primero b .l, html[data-movimiento="poco"] .sello-nuevo .l,
html[data-movimiento="poco"] .esc-estallido, html[data-movimiento="poco"] .esc-estallido .hv, html[data-movimiento="poco"] .cartel-linea, html[data-movimiento="poco"] .celda-sello { animation: none !important; }
html[data-movimiento="poco"] .esc-estallido .hv0 { visibility: visible; }

/* ── Mientras está el gran momento, los avisos de arriba no tapan la cápsula (los del servidor ya esperan; esto es para los
   que salieron justo antes de abrirla) ── */
html.con-escenario .avisos { visibility: hidden; }
/* Un logro o un nivel que se gana con ese mismo tiro (su sello sale 2 s a media pantalla, justo donde cae la cápsula):
   mientras está el gran momento, sale abajo, donde los botones aparecen hasta el final. */
html.con-escenario .nivel-sube { top: calc(100% - 104px - env(safe-area-inset-bottom, 0px)); }
/* (un celular acostado: la cápsula va a la izquierda; el sello, a la derecha, donde el grito sale después) */
@media (max-height: 520px) and (orientation: landscape) { html.con-escenario .nivel-sube { left: 74%; top: 60%; } }

/* En un celular, «¡OTRAS 10!» y «¡QUÉ BIEN!» caben en un renglón (partidos, el «10!» quedaba solo abajo). */
@media (max-width: 440px) { .esc-botones { gap: 10px; } .esc-botones .boton.gigante { font-size: 17px; padding-inline: 6px; } }

/* ── El foco en los botones del gran momento: una raya crema punteada, no la caja de siempre ── */
#escenario-frente .boton:focus-visible { outline: 3px dashed var(--crema); outline-offset: 7px; box-shadow: none; }