/* ============================================================
   Gala · tokens
   Terciopelo de teatro + champán. Bodoni para el espectáculo,
   Jost para leer.
   ============================================================ */
:root {
  --velvet: #1c0a1a;
  --velvet-2: #2a0f24;
  --curtain: #4a1230;
  --champagne: #ecd08c;
  --gold: #b8893b;
  --ivory: #f6eedc;
  --rose: #d9a5a0;
  --muted: rgba(246, 238, 220, .62);
  --line: rgba(236, 208, 140, .22);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --body: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--velvet);
  color: var(--ivory);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* Telón: luz cenital sobre terciopelo */
.stage-bg {
  background:
    radial-gradient(ellipse 60% 55% at 50% -8%, rgba(236, 208, 140, .20), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, var(--curtain) 0%, var(--velvet-2) 38%, var(--velvet) 100%);
}

/* ---------- avatar / monograma ---------- */
.avatar {
  position: relative;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #5a1a3c, var(--velvet-2));
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(184, 137, 59, .18);
  overflow: hidden;
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.avatar span {
  font-family: var(--display);
  color: var(--champagne);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- odómetro ---------- */
.odo { display: inline-flex; line-height: 1; font-variant-numeric: lining-nums; }
.odo .d { display: inline-block; height: 1em; overflow: hidden; }
.odo .d > i {
  display: flex; flex-direction: column; font-style: normal;
  transition: transform 900ms cubic-bezier(.2, .9, .2, 1.05);
}
.odo .d > i > b { height: 1em; font-weight: inherit; text-align: center; }
.odo .sep { width: .18em; }

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

/* ============================================================
   Fondo de gala: reflectores que barren, destellos dorados,
   luz de piso, grano de película y viñeta.
   ============================================================ */
.gala-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 45% at 50% 112%, rgba(236, 208, 140, .22), transparent 65%),
    radial-gradient(ellipse 70% 55% at 15% -5%, rgba(140, 30, 90, .45), transparent 70%),
    radial-gradient(ellipse 60% 60% at 95% 10%, rgba(90, 20, 70, .5), transparent 70%),
    linear-gradient(180deg, #1c0619 0%, #11040f 60%, #0b0209 100%);
}
.gala-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gala-bg::before {          /* viñeta */
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .6));
}
.gala-bg::after {           /* grano */
  content: ""; position: absolute; inset: 0; z-index: 4; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.beam {
  position: absolute; bottom: -6vh; width: 34vmax; height: 150vmax; z-index: 1;
  transform-origin: 50% 100%; filter: blur(22px); mix-blend-mode: screen; opacity: .85;
  transition: transform 2.2s cubic-bezier(.22, 1, .36, 1);
}
.beam::before {          /* el cono: se recorta aquí y el desenfoque del padre lo suaviza */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255, 238, 196, .30), rgba(255, 238, 196, .09) 45%, transparent 80%);
  clip-path: polygon(48% 100%, 52% 100%, 88% 0, 12% 0);
}
.beam.l { left: 12%; animation: sweepL 13s ease-in-out infinite alternate; }
.beam.r { left: 88%; animation: sweepR 16s ease-in-out infinite alternate; }
.beam.c { left: 50%; opacity: .55; animation: sweepC 21s ease-in-out infinite alternate; }
@keyframes sweepL { from { transform: translateX(-50%) rotate(-30deg); } to { transform: translateX(-50%) rotate(22deg); } }
@keyframes sweepR { from { transform: translateX(-50%) rotate(28deg); } to { transform: translateX(-50%) rotate(-20deg); } }
@keyframes sweepC { from { transform: translateX(-50%) rotate(-12deg); } to { transform: translateX(-50%) rotate(12deg); } }
/* en la revelación los reflectores apuntan al ganador */
body.revealing .beam { animation: none; }
body.revealing .beam.l { transform: translateX(-50%) rotate(34deg); }
body.revealing .beam.r { transform: translateX(-50%) rotate(-34deg); }
body.revealing .beam.c { transform: translateX(-50%) rotate(0deg); opacity: .8; }

/* ---------- dorado metálico ---------- */
.foil {
  background: linear-gradient(100deg, #8f6424 0%, #e9c677 18%, #fff4d2 27%, #d9ae5c 38%, #9a6c28 52%, #e6c47a 70%, #fff0c4 78%, #b8893b 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 8s ease-in-out infinite;
  filter: drop-shadow(0 .06em .12em rgba(0, 0, 0, .45));
}
@keyframes foil { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Bodoni tiene trazos muy finos que se pierden en el proyector: se usa la variante óptica de
   texto pequeño (hilos más gruesos), más peso y un contorno dorado fino que los rellena. */
.brand-name {
  font-family: var(--display); font-weight: 800; letter-spacing: 0; line-height: .92;
  font-optical-sizing: none; font-variation-settings: "opsz" 9;
  -webkit-text-stroke: .014em #c9a35a; paint-order: stroke fill;
}
.edition { font-family: var(--body); font-weight: 400; letter-spacing: .38em; color: var(--champagne); white-space: nowrap; }
/* títulos grandes en Bodoni: hilos más gruesos, sin contorno */
.display-solid { font-optical-sizing: none; font-variation-settings: "opsz" 14; }
.edition.ruled { display: flex; align-items: center; gap: .9em; }
.edition.ruled::before, .edition.ruled::after { content: ""; height: 1px; width: 3.2em; background: linear-gradient(90deg, transparent, var(--gold)); }
.edition.ruled::after { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { .beam, .foil { animation: none !important; } }

/* ---------- logo de la marca: máscara pintada con el mismo dorado animado ---------- */
.brand-logo-wrap { display: inline-flex; align-items: center; line-height: 0; -webkit-text-stroke: 0;
  filter: drop-shadow(0 .05em .1em rgba(0, 0, 0, .5)) drop-shadow(0 0 .3em rgba(236, 208, 140, .22)); }
.brand-logo {
  display: block; height: var(--logo-h, 1.25em); aspect-ratio: 2161 / 606;
  background: linear-gradient(100deg, #8f6424 0%, #e9c677 18%, #fff4d2 27%, #d9ae5c 38%, #9a6c28 52%, #e6c47a 70%, #fff0c4 78%, #b8893b 100%);
  background-size: 240% 100%; animation: foil 8s ease-in-out infinite;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
@media (prefers-reduced-motion: reduce) { .brand-logo { animation: none; } }

/* ---------- empate: círculo dividido ---------- */
.split-s { position: absolute; inset: 0; }
.split-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.split-s .ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.6em; }
.avatar.split { position: relative; overflow: hidden; }
.split-cut { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.split-cut line { stroke: #ecd08c; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-width: 3px; filter: drop-shadow(0 0 3px rgba(236, 208, 140, .9)); }