:root {
  --ink: #0b0418;
  --gold: #ffc21a;
  --violet: #8a2be2;
  --magenta: #ff2bd0;
  --celeste: #6ec6f2;
  --display: "Bangers", Impact, "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07031a; overflow: hidden; overscroll-behavior: none; }

/* El escenario se diseña a 900 de ancho; la altura se adapta al teléfono y luego se escala. */
#stage { position: fixed; left: 50%; top: 50%; width: 900px; height: var(--h, 1600px); transform: translate(-50%, -50%) scale(var(--s, .4)); overflow: hidden; background: #07031a; contain: strict; }
#cam { position: absolute; inset: 0; }
.band, .band-in, .figclip { position: absolute; inset: 0; }
.par { position: absolute; inset: 0; will-change: transform; }
.bg { position: absolute; left: -40px; display: block; }
.figclip { pointer-events: none; }
.fig { position: absolute; will-change: transform; filter: drop-shadow(0 18px 22px rgba(4, 0, 20, .55)); }
.fig svg { display: block; overflow: visible; }

.wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 170px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 18%, var(--gold) 34%, var(--ink) 52%, var(--ink) 74%, transparent),
    radial-gradient(var(--ink) 40%, transparent 42%) 0 0 / 16px 16px; }

.flyball { position: absolute; left: 0; top: 0; width: 150px; height: 150px; will-change: transform; pointer-events: none; }
.flyball svg { width: 100%; height: 100%; display: block; overflow: visible; }

#seams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Placas de nombre */
.plate { position: absolute; display: inline-block; transform: translate(-50%, -50%); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55)); will-change: transform; }
.plate-edge { clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); padding: 6px; }
.plate-core { clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); padding: 6px 54px 2px; background: linear-gradient(180deg, #171046, #05031c 62%, #1b0f55); }
.plate.is-dana .plate-edge { background: linear-gradient(100deg, #fff, var(--magenta) 30%, var(--violet) 72%, #fff); }
.plate.is-dana .plate-core { background: linear-gradient(180deg, #33106d, #12032f 62%, #4a1287); }
.plate.is-ball .plate-edge { background: linear-gradient(100deg, #fff, var(--celeste) 28%, var(--gold) 74%, #fff); }
.plate-word { position: relative; display: block; font: 400 104px/1.02 var(--display); letter-spacing: .035em; white-space: nowrap; }
.t-back, .t-front { display: block; }
.t-back { color: #2c2c3f; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 #09051b, 6px 6px 0 #09051b; }
.t-front { position: absolute; inset: 0; color: transparent; background: linear-gradient(180deg, #fff 8%, #e7ecf7 44%, #8b95ad 54%, #fff 88%); -webkit-background-clip: text; background-clip: text; }
.plate-ball { position: absolute; left: 50%; bottom: -30px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--gold), 0 0 16px rgba(255, 194, 26, .8); }
.plate-ball svg { width: 100%; height: 100%; display: block; }

/* Título */
#title { position: absolute; left: 50%; top: 0; margin: 0; display: flex; white-space: nowrap; font: 400 172px/1 var(--display); letter-spacing: .012em; transform-origin: 50% 50%; }
.arc { display: inline-block; position: relative; }
.l { display: inline-block; position: relative; will-change: transform, opacity; }
#title .t-back { color: #6b2c00; -webkit-text-stroke: 15px var(--ink); paint-order: stroke fill;
  text-shadow: 1px 2px 0 #7f3a00, 2px 4px 0 #7f3a00, 3px 6px 0 #6b2c00, 4px 8px 0 #5a2400, 5px 10px 0 #461b00, 6px 12px 0 #2f1200, 8px 15px 0 var(--ink), 9px 18px 0 var(--ink); }
#title .t-front { background: linear-gradient(180deg, #fff 10%, #fff3bd 38%, #ffc21a 52%, #ff8a00 76%, #ffd65c 94%); -webkit-background-clip: text; background-clip: text; }
#shine { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%); background-size: 250% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000, #000); }
#ring { position: absolute; width: 260px; height: 260px; left: 320px; border-radius: 50%; border: 12px solid #fff; pointer-events: none; opacity: 0; }

#flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 12%, #fff, rgba(255, 220, 130, .4) 42%, transparent 72%); opacity: 0; pointer-events: none; }
#confetti, #sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bit { position: absolute; top: -40px; will-change: transform; }
.spark { position: absolute; width: 34px; height: 34px; opacity: 0; will-change: transform, opacity; }
.spark svg { width: 100%; height: 100%; display: block; }

/* Capa de símbolos manga para las próximas páginas */
.manga { position: absolute; pointer-events: none; overflow: visible; z-index: 30; }