@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Lilita+One&display=swap');

/* Subasta Empresarial · escenario 1920 × 1080.
   El coordinador aplica translate(-50%, -50%) scale(k) a #stage.
   Las pantallas sólo usan las clases del contrato y elementos semánticos.
   Decoración: aria-hidden="true" en .deco y alt="" en sus imágenes.
   Para identificar equipos: style="--team-color:var(--se-team-1)".
   Los estados de respuesta deben acompañarse de texto o un aria-label.
*/
:root {
  --se-purple: #5B0BC9;
  --se-purple-dark: #3D0590;
  --se-purple-light: #7B2FF7;
  --se-cyan: #9EF0F0;
  --se-yellow: #FFE84D;
  --se-pink: #FFB3B8;
  --se-gold: #FFB020;
  --se-green: #8EDC9A;
  --se-ok: #2EE59D;
  --se-bad: #FF4D6D;
  --se-ink: #1A0B3B;
  --se-white: #FFFFFF;
  --se-font-title: 'Lilita One', system-ui, sans-serif;
  --se-font-body: 'Fredoka', system-ui, sans-serif;
  --se-radius-pill: 999px;
  --se-radius: 24px;
  --se-shadow: 0 10px 0 rgba(0,0,0,.25);
  --se-team-1: #FF8B78;
  --se-team-2: #52E5DE;
  --se-team-3: #FFE84D;
  --se-team-4: #BAF552;
  --se-team-5: #FFB052;
  --se-team-6: #FFA5E1;
  --se-outline: 4px solid var(--se-ink);
  --se-shadow-pill: 0 9px 0 var(--se-purple-dark), 0 15px 28px #1A0B3B26;
  --se-glow: 0 0 48px #FFE84D4D;
  --se-ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body.se-app {
  overflow: hidden;
  background: var(--se-purple);
  color: var(--se-white);
  font-family: var(--se-font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), select:not(:disabled) { cursor: pointer; }
img, svg { max-width: 100%; vertical-align: middle; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea, a { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 5px solid var(--se-ink); outline-offset: 6px; box-shadow: 0 0 0 11px var(--se-yellow); }
::selection { color: var(--se-ink); background: var(--se-yellow); }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: center;
  isolation: isolate;
  background: var(--se-purple);
}
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 100px 140px 126px;
  isolation: isolate;
  color: var(--se-white);
  background:
    radial-gradient(ellipse at 50% 6%, #9A63FF59, transparent 65%),
    linear-gradient(180deg, var(--se-purple) 55%, var(--se-purple-dark));
}
.screen--active { display: flex; }
.screen::before, .screen::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}
.screen::before {
  inset: 0;
  background:
    conic-gradient(from 155deg at 14% -10%, transparent 0deg, #FFFFFF0F 15deg, transparent 31deg),
    conic-gradient(from 173deg at 86% -10%, transparent 0deg, #FFFFFF0F 15deg, transparent 31deg);
}
.screen::after {
  right: 50px;
  bottom: 32px;
  left: 50px;
  height: 12px;
  border-radius: var(--se-radius-pill);
  background: radial-gradient(circle, var(--se-yellow) 0 3px, transparent 4px) 0 0 / 42px 12px;
  opacity: .8;
  filter: drop-shadow(0 0 5px #FFE84D80);
}
.screen > header { z-index: 1; max-width: 100%; text-align: center; }
.screen > footer { z-index: 1; display: flex; align-items: center; justify-content: center; gap: 24px; }
.screen > p { max-width: 1280px; text-align: center; }
.title-xl, .title-lg {
  font-family: var(--se-font-title);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}
.title-xl { font-size: 152px; letter-spacing: -2px; }
.title-lg { font-size: 100px; letter-spacing: -1px; }
.subtitle { font-size: 36px; font-weight: 500; line-height: 1.35; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 56px 24px;
  border: var(--se-outline);
  border-radius: var(--se-radius-pill);
  color: var(--se-purple);
  background: var(--se-white);
  box-shadow: var(--se-shadow-pill);
  vertical-align: middle;
}
.pill--yellow { color: var(--se-purple-dark); background: var(--se-yellow); }
.pill--cyan { color: var(--se-purple-dark); background: var(--se-cyan); }
.pill--purple { color: var(--se-yellow); background: var(--se-purple); }

/* Controles compartidos: relieve en reposo, presión al hacer clic. */
.btn, .btn-next, .hud__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 18px;
  min-height: 76px;
  padding: 14px 34px;
  overflow: hidden;
  border: var(--se-outline);
  border-radius: var(--se-radius-pill);
  background: var(--se-purple);
  color: var(--se-white);
  box-shadow: 0 7px 0 var(--se-ink);
  font-family: var(--se-font-body);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms var(--se-ease), box-shadow 160ms var(--se-ease), background-color 160ms;
}
.btn--primary { color: var(--se-ink); background: var(--se-yellow); }
.btn--ghost { color: var(--se-white); border-color: #FFFFFF99; background: #3D059066; box-shadow: 0 7px 0 #1A0B3B66; }
.btn--big { min-height: 104px; padding: 22px 52px; font-size: 40px; }
.btn--primary::after {
  position: absolute;
  inset: -70% auto -70% -50%;
  width: 30%;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #FFFFFF85, transparent);
  transform: translateX(-150%) rotate(20deg);
}
.btn-next {
  position: absolute;
  z-index: 4;
  right: 72px;
  bottom: 70px;
  width: 154px;
  height: 86px;
  min-height: 0;
  padding: 17px 31px;
  border-color: var(--se-yellow);
  background: var(--se-purple);
  color: var(--se-yellow);
  font-size: 56px;
  line-height: 1;
  box-shadow: 0 8px 0 var(--se-ink), var(--se-glow);
}
.btn-next img, .btn-next svg { width: 80px; max-height: 48px; object-fit: contain; }
.btn:disabled, .btn-next:disabled, .hud__btn:disabled, .chip:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.btn[aria-pressed='true'], .hud__btn[aria-pressed='true'] { color: var(--se-ink); background: var(--se-cyan); }
@media (hover: hover) {
  .btn:hover:not(:disabled), .btn-next:hover:not(:disabled), .hud__btn:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 11px 0 var(--se-ink), 0 0 30px #FFE84D26; }
  .btn--primary:hover:not(:disabled)::after { animation: se-shine 700ms var(--se-ease) both; }
}
.btn:active:not(:disabled), .btn-next:active:not(:disabled), .hud__btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 var(--se-ink); }

/* Portada: las dos píldoras son texto real, nunca una imagen del título. */
.screen--cover { gap: 54px; padding-top: 122px; padding-bottom: 134px; }
.screen--cover > header { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 1280px; }
.screen--cover header > .subtitle:first-child { color: var(--se-cyan); font-size: 28px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; }
.screen--cover .title-xl { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.screen--cover .title-xl .pill:first-child { padding-right: 100px; padding-left: 100px; transform: rotate(-6deg) translateX(-106px); }
.screen--cover .title-xl .pill:nth-child(2) { transform: rotate(3deg) translateX(46px); }
.screen--cover > p { max-width: 940px; }
.screen--cover > footer { flex-wrap: wrap; }
.screen--cover .deco--piggy { top: 136px; right: 50px; width: 390px; rotate: 12deg; }
.screen--cover .deco--coins { bottom: 93px; left: 38px; width: 410px; rotate: -8deg; }
.screen--cover .deco--bills { top: 100px; left: 46px; width: 270px; rotate: -22deg; }
.screen--cover .deco--bills ~ .deco--bills { top: auto; right: 30px; bottom: 100px; left: auto; rotate: 20deg; }

/* Reglas: títulos inclinados, una idea principal por pantalla. */
.screen--rules { gap: 46px; padding-right: 370px; padding-left: 370px; }
.screen--rules .title-lg { transform: rotate(-4deg); }
.screen--rules > p { max-width: 1130px; padding: 30px 44px; border: var(--se-outline); border-radius: 36px; color: var(--se-purple-dark); background: var(--se-pink); box-shadow: var(--se-shadow); font-size: 46px; line-height: 1.3; }
.screen--rules > p strong { color: var(--se-purple-dark); font-weight: 700; }
.screen--rules > aside {
  max-width: 1130px;
  padding: 28px 42px;
  border: var(--se-outline);
  border-radius: var(--se-radius);
  color: var(--se-purple-dark);
  background: var(--se-yellow);
  box-shadow: var(--se-shadow);
  font-size: 32px;
  line-height: 1.4;
  text-align: center;
}
.screen--rules > aside strong { color: var(--se-purple-dark); }
.screen--rules .deco--piggy { top: 280px; right: 36px; width: 320px; rotate: 12deg; }
.screen--rules .deco--coins { left: 35px; bottom: 100px; width: 320px; }

/* Tres columnas: los rótulos y los montos siguen siendo texto real. */
.screen--bets { gap: 58px; padding: 102px 112px 140px; }
.screen--bets .title-lg { max-width: 1400px; font-size: 88px; }
.screen--bets > .bet-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.screen--bets .bet-panel > article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 525px;
  padding: 32px;
  border: 4px solid var(--se-cyan);
  border-radius: 52px;
  color: var(--se-white);
  background: var(--se-purple);
  box-shadow: 0 13px 0 var(--se-ink), inset 0 3px 0 #FFFFFF33;
}
.screen--bets .bet-panel > article:nth-child(2) { color: var(--se-purple-dark); background: var(--se-cyan); border-color: var(--se-ink); transform: translateY(-12px) rotate(-2deg); }
.screen--bets .bet-panel h3 { font-size: 36px; font-weight: 500; }
.screen--bets .bet-panel img { width: 188px; height: 164px; object-fit: contain; }
.screen--bets .chip { min-width: 224px; min-height: 140px; font-size: 76px; }

.screen--timer-rule { gap: 40px; }
.screen--timer-rule > header { max-width: 1230px; }
.screen--timer-rule .title-lg { font-size: 82px; }
.screen--timer-rule .timer { width: 336px; height: 336px; font-size: 142px; border-width: 12px; box-shadow: 0 14px 0 var(--se-ink), 0 0 90px #FFE84D40; }
.screen--timer-rule .timer small { font-family: var(--se-font-body); font-size: 36px; }
.screen--timer-rule .subtitle { max-width: 1020px; }
.screen--timer-rule .deco--bills { left: 105px; top: 390px; width: 290px; }
.screen--timer-rule .deco--piggy { right: 100px; bottom: 200px; width: 300px; }

/* Equipos: seis nombres sin desplazamiento dentro del escenario. */
.screen--setup { gap: 28px; padding: 88px 235px 96px; }
.screen--setup .title-lg { font-size: 88px; }
.screen--setup > header .subtitle { margin-top: 14px; font-size: 30px; }
.screen--setup form { display: flex; flex-direction: column; gap: 22px; width: 100%; }
.screen--setup fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  min-width: 0;
  margin: 0;
  padding: 20px 28px 24px;
  border: 3px solid #9EF0F070;
  border-radius: 32px;
  background: #3D059080;
}
.screen--setup legend { padding: 0 12px; color: var(--se-cyan); font-size: 25px; }
.screen--setup label { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 26px; }
.screen--setup label:has(.team-tag) { flex-direction: row; align-items: center; gap: 14px; }
.screen--setup input, .screen--setup select, .bet-row input {
  min-width: 0;
  width: 100%;
  min-height: 70px;
  padding: 12px 22px;
  border: 3px solid var(--se-ink);
  border-radius: 19px;
  color: var(--se-ink);
  background: var(--se-white);
  box-shadow: 0 5px 0 #1A0B3B50;
  font-size: 30px;
  font-weight: 500;
}
.screen--setup input::placeholder { color: #6A607A; opacity: 1; }
.screen--setup input[aria-invalid='true'], .bet-row input[aria-invalid='true'] { border-color: var(--se-bad); box-shadow: 0 0 0 3px var(--se-bad); }
.screen--setup input:disabled, .screen--setup select:disabled { opacity: .6; cursor: not-allowed; }
.screen--setup form > footer { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 6px; }
.screen--setup form > p { font-size: 25px; text-align: center; }
.screen--setup .team-tag { min-width: 70px; width: 70px; min-height: 64px; padding: 8px; }

/* Preguntas: celeste, blobs blancos y morado. El texto largo ocupa varias líneas. */
.screen--question {
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  padding: 126px 128px 88px;
  color: var(--se-purple-dark);
  background: var(--se-cyan);
}
.screen--question::before {
  inset: 0;
  background:
    radial-gradient(ellipse 800px 560px at -9% 8%, #FFFFFFDD 70%, transparent 70.3%),
    radial-gradient(ellipse 740px 590px at 109% 108%, #FFFFFFD9 70%, transparent 70.3%),
    radial-gradient(ellipse 180px 120px at 90% 18%, #FFFFFF75 70%, transparent 70.5%);
}
.screen--question::after { background-image: radial-gradient(circle, var(--se-purple) 0 3px, transparent 4px); filter: none; opacity: .35; }
.q-number {
  align-self: flex-start;
  max-width: calc(100% - 180px);
  padding: 10px 35px 14px;
  border: 3px solid var(--se-purple-dark);
  border-radius: var(--se-radius-pill);
  color: var(--se-white);
  background: var(--se-purple);
  box-shadow: 0 7px 0 var(--se-purple-dark);
  font-family: var(--se-font-title);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  transform: rotate(-2deg);
}
.q-text {
  z-index: 1;
  max-width: calc(100% - 170px);
  margin: 8px 0 0;
  color: var(--se-purple-dark);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.screen--question > .q-text { max-width: calc(100% - 170px); text-align: left; }
.q-options { z-index: 1; display: flex; flex-direction: column; gap: 19px; width: 100%; margin: 16px 0 0; padding: 0; list-style: none; }
.q-options > li { min-width: 0; }
.q-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 116px;
  padding: 19px 34px 19px 20px;
  border: 4px solid var(--se-purple-dark);
  border-radius: 68px;
  color: var(--se-white);
  background: linear-gradient(180deg, #7020E0, var(--se-purple));
  box-shadow: 0 8px 0 var(--se-purple-dark);
  font-size: 35px;
  font-weight: 500;
  line-height: 1.22;
  text-align: left;
  transition: transform 180ms var(--se-ease), opacity 180ms, box-shadow 180ms, background-color 180ms;
}
.q-option__letter {
  display: flex;
  flex: 0 0 66px;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 3px solid #FFFFFF66;
  border-radius: 50%;
  color: var(--se-purple-dark);
  background: var(--se-cyan);
  font-family: var(--se-font-title);
  font-size: 39px;
}
.q-option__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.q-option[aria-pressed='true'] { outline: 5px solid var(--se-yellow); outline-offset: 3px; }
.q-option--correct {
  z-index: 2;
  border-color: #075C42;
  color: var(--se-ink);
  background: var(--se-ok);
  box-shadow: 0 8px 0 #075C42, 0 0 38px #2EE59DAA;
  transform: scale(1.025);
}
.q-option--correct .q-option__letter { color: #075C42; background: var(--se-white); border-color: #075C42; }
.q-option--wrong { border-color: #900B38; color: var(--se-ink); background: var(--se-bad); box-shadow: 0 8px 0 #900B38; }
.q-option--wrong .q-option__letter { color: #900B38; background: var(--se-white); border-color: #900B38; }
.q-option--dim { opacity: .45; box-shadow: 0 4px 0 var(--se-purple-dark); }
.q-option:disabled { cursor: default; }
.q-option:disabled:not(.q-option--correct):not(.q-option--wrong):not(.q-option--dim) { opacity: .72; }
@media (hover: hover) {
  .q-option:hover:not(:disabled):not(.q-option--correct):not(.q-option--wrong):not(.q-option--dim) { transform: translateX(9px); box-shadow: -6px 8px 0 var(--se-purple-dark), 0 0 0 3px var(--se-yellow); }
  .chip:hover:not(:disabled) { transform: translateY(-5px) rotate(-3deg); }
}
.q-option:active:not(:disabled):not(.q-option--correct) { transform: translateY(4px); box-shadow: 0 3px 0 var(--se-purple-dark); }
.screen--question > footer { margin-top: auto; justify-content: flex-start; max-width: calc(100% - 200px); padding-top: 10px; }
.screen--question > footer .subtitle { font-size: 26px; text-align: left; }
.screen--question .btn--ghost { color: var(--se-purple-dark); border-color: var(--se-purple-dark); background: #FFFFFF80; }

/* Contenedor compatible con el anillo SVG que monta SE.FX. */
.timer {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 7px solid var(--se-yellow);
  border-radius: 50%;
  color: var(--se-yellow);
  background: var(--se-purple-dark);
  box-shadow: 0 8px 0 var(--se-ink);
  font-family: var(--se-font-title);
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.timer > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.timer:has(> svg) { border: 0; box-shadow: none; background: transparent; }
.screen--question > .timer { position: absolute; z-index: 2; top: 128px; right: 124px; }

/* Apuestas: colores de equipo siempre acompañados por un nombre. */
.chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 112px;
  min-height: 68px;
  padding: 12px 23px;
  border: 4px dashed var(--se-ink);
  border-radius: var(--se-radius-pill);
  color: var(--se-ink);
  background: var(--se-yellow);
  box-shadow: 0 6px 0 var(--se-ink), inset 0 0 0 4px #FFFFFF55;
  font-family: var(--se-font-title);
  font-size: 34px;
  line-height: 1.1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 160ms var(--se-ease), box-shadow 160ms;
}
.chip--20 { background: var(--se-yellow); }
.chip--50 { background: var(--se-cyan); }
.chip--100 { background: var(--se-pink); }
.chip--custom { border-style: solid; color: var(--se-white); background: var(--se-purple); font-family: var(--se-font-body); font-size: 28px; font-weight: 600; }
.chip[aria-pressed='true'] { outline: 4px solid var(--se-white); outline-offset: 4px; transform: translateY(-4px); }
.chip:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--se-ink); }
.bet-panel { padding: 24px 28px; border: 3px solid #9EF0F080; border-radius: 32px; color: var(--se-white); background: var(--se-purple-dark); box-shadow: var(--se-shadow); }
.bet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 0; }
.bet-row + .bet-row { border-top: 2px solid #FFFFFF26; }
.bet-row input { width: 176px; min-height: 64px; }
.bet-row .team-tag { margin-right: auto; max-width: 420px; }
.team-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 22px;
  border: 3px solid var(--se-ink);
  border-radius: var(--se-radius-pill);
  color: var(--se-ink);
  background: var(--team-color, var(--se-cyan));
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Final: luz central y título grande, sin destellos intermitentes. */
.screen--allin {
  gap: 32px;
  background:
    radial-gradient(ellipse at 50% 45%, #7B2FF799, transparent 63%),
    repeating-conic-gradient(from 2deg at 50% 45%, #FFE84D08 0deg 10deg, transparent 10deg 23deg),
    var(--se-purple-dark);
}
.screen--allin .title-xl { color: var(--se-yellow); font-size: 240px; letter-spacing: -4px; text-shadow: 0 12px 0 var(--se-ink), 0 0 65px #FFE84D55; transform: rotate(-5deg); }
.screen--allin > header > .subtitle { margin-bottom: 32px; color: var(--se-cyan); font-weight: 600; letter-spacing: 5px; text-transform: uppercase; }
.screen--allin > .subtitle { max-width: 1150px; font-size: 48px; }
.screen--allin > .subtitle strong { color: var(--se-yellow); }
.screen--allin .deco--coins { width: 390px; left: 30px; bottom: 120px; }
.screen--allin .deco--bills { width: 330px; right: 30px; top: 175px; }
.screen--podium { justify-content: flex-start; gap: 32px; padding-top: 100px; }
.screen--podium .title-lg { color: var(--se-yellow); text-shadow: 0 8px 0 var(--se-ink); }
.screen--podium > header .subtitle { margin-top: 18px; }
.screen--podium > img { width: 240px; height: 210px; object-fit: contain; }
/* Podio estático de referencia. El componente real tiene su propio CSS. */
.screen--podium > ol {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  width: 1260px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.screen--podium > ol > li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  min-height: 224px;
  padding: 24px;
  border: var(--se-outline);
  border-radius: 36px 36px 14px 14px;
  color: var(--se-ink);
  background: var(--se-cyan);
  box-shadow: 0 12px 0 var(--se-ink);
}
.screen--podium > ol > li:first-child { order: 2; min-height: 302px; background: var(--se-yellow); }
.screen--podium > ol > li:nth-child(2) { order: 1; }
.screen--podium > ol > li:nth-child(3) { order: 3; min-height: 192px; background: var(--se-pink); }
.screen--podium > ol strong { font-family: var(--se-font-title); font-size: 60px; font-weight: 400; }
.screen--podium > footer { margin-top: 14px; }
.screen--thanks { gap: 54px; color: var(--se-purple-dark); background: var(--se-cyan); }
.screen--thanks::before { background: radial-gradient(ellipse at 50% 20%, #FFFFFF99, transparent 70%); }
.screen--thanks::after { background-image: radial-gradient(circle, var(--se-purple) 0 3px, transparent 4px); opacity: .35; filter: none; }
.screen--thanks .pill--purple { color: var(--se-white); }
.screen--thanks .btn--ghost { color: var(--se-purple-dark); border-color: var(--se-purple-dark); background: #FFFFFF99; }
.screen--thanks .title-xl { display: flex; flex-direction: column; align-items: center; gap: 22px; font-size: 132px; }
.screen--thanks .title-xl > .pill:first-child { transform: rotate(-5deg); }
.screen--thanks .title-xl > .pill:nth-child(2) { transform: rotate(3deg); }
.screen--thanks .deco--piggy { top: 98px; right: 55px; width: 300px; }
.screen--thanks .deco--coins { bottom: 90px; left: 40px; width: 340px; }

/* Decoración sin capturar clics ni animar filtros. */
.deco { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.deco__item { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 14px 0 #1A0B3B33); }
.deco--piggy { top: 140px; right: 60px; width: 350px; }
.deco--coins { bottom: 80px; left: 50px; width: 340px; }
.deco--bills { top: 95px; left: 70px; width: 245px; rotate: -16deg; }
.deco--sparkle { top: 134px; left: 26%; width: 74px; filter: drop-shadow(0 0 17px #FFE84D44); }
.deco--sparkle:nth-of-type(even) { top: auto; right: 14%; bottom: 165px; left: auto; width: 92px; rotate: 12deg; }
.deco--sparkle:nth-of-type(3n) { top: 350px; left: 9%; width: 54px; }
.deco--sparkle:nth-of-type(4n + 1) { top: 170px; right: 23%; bottom: auto; left: auto; width: 45px; }
.hud {
  position: absolute;
  z-index: 20;
  top: 22px;
  right: 68px;
  left: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  color: var(--se-white);
  font-size: 24px;
  font-weight: 600;
}
.hud > span:not(.hud__spacer) { padding: 9px 22px; border: 2px solid #FFFFFF66; border-radius: var(--se-radius-pill); background: var(--se-purple-dark); }
.hud__spacer { flex: 1; }
.hud__btn { min-width: 66px; min-height: 60px; padding: 8px 16px; border-width: 3px; font-size: 28px; box-shadow: 0 4px 0 var(--se-ink); }
.hud > .btn { min-height: 60px; padding: 10px 20px; font-size: 24px; }

/* Dos colores de foco siguen siendo visibles sobre cualquier equipo o fondo. */
.btn:focus-visible, .btn-next:focus-visible, .hud__btn:focus-visible,
.q-option:focus-visible, .chip:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 5px solid var(--se-yellow);
  outline-offset: 5px;
  box-shadow: 0 0 0 13px var(--se-ink);
}

/* Movimiento reutilizable: transform y amplitudes suaves. */
@keyframes se-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes se-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes se-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-5deg); } 93% { transform: rotate(5deg); } }
@keyframes se-spin-slow { to { transform: rotate(360deg); } }
@keyframes se-shine { from { transform: translateX(-150%) rotate(20deg); } to { transform: translateX(850%) rotate(20deg); } }
@keyframes se-pop-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.anim-float { animation: se-float 5s ease-in-out infinite; }
.anim-pulse { animation: se-pulse 3s ease-in-out infinite; }
.anim-wiggle { animation: se-wiggle 6s ease-in-out infinite; }
.deco__item:nth-child(2n) { animation-delay: -1.6s; }
.deco__item:nth-child(3n) { animation-delay: -3.2s; }
.screen:not(.screen--active) .anim-float, .screen:not(.screen--active) .anim-pulse, .screen:not(.screen--active) .anim-wiggle { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen *, .screen::before, .screen::after, .screen *::before, .screen *::after,
  .deco__item, .anim-float, .anim-pulse, .anim-wiggle, .hud * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .q-option--correct { transform: none; }
  .btn:hover:not(:disabled), .btn-next:hover:not(:disabled), .chip:hover:not(:disabled),
  .hud__btn:hover:not(:disabled), .q-option:hover:not(:disabled),
  .btn:active:not(:disabled), .btn-next:active:not(:disabled), .chip:active:not(:disabled),
  .hud__btn:active:not(:disabled), .q-option:active:not(:disabled) { transform: none; }
}