/* EL GRAN CONCURSO — pantalla principal (diseñada a 1920×1080 y escalada a la ventana) */
:root {
  --pink: #ff2bd6; --cyan: #23d5ff; --yellow: #ffd23f; --orange: #ff8a1f; --purple: #6a2cff;
  --deep: #12062b; --ink: #1d0b47; --green: #2eff7a; --red: #ff2a4a;
  --font: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --display: 'Lilita One', 'Arial Black', 'Segoe UI Black', sans-serif;
  --s: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--font); user-select: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--s)); transform-origin: center; pointer-events: none; }
#stage .interactive, #stage button, #stage select, #stage input, #stage label { pointer-events: auto; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- texto televisivo */
.tv {
  font-family: var(--display); color: var(--fill, var(--yellow)); letter-spacing: 1px; line-height: 0.95;
  text-shadow:
    -4px -4px 0 var(--edge, #2a0866), 4px -4px 0 var(--edge, #2a0866), -4px 4px 0 var(--edge, #2a0866), 4px 4px 0 var(--edge, #2a0866),
    0 -5px 0 var(--edge, #2a0866), 0 5px 0 var(--edge, #2a0866), -5px 0 0 var(--edge, #2a0866), 5px 0 0 var(--edge, #2a0866),
    0 9px 0 var(--ext, #c2410c), 0 13px 0 var(--ext2, #7c2d12), 0 17px 0 #21064f, 0 24px 30px rgba(0, 0, 0, .55), 0 0 60px var(--glow, rgba(255, 210, 63, .45));
}
.tv.pink { --fill: #ff6ae6; --ext: #a1128a; --ext2: #5c0a50; --glow: rgba(255, 43, 214, .5); }
.tv.cyan { --fill: #7ff0ff; --ext: #0b7fa5; --ext2: #0a4766; --glow: rgba(35, 213, 255, .5); }
.tv.green { --fill: #7dffa8; --ext: #0f8f45; --ext2: #075228; --glow: rgba(46, 255, 122, .5); }
.tv.red { --fill: #ff6b7d; --ext: #a3122a; --ext2: #5e0716; --glow: rgba(255, 42, 74, .55); }
.tv.white { --fill: #ffffff; --ext: #8a7bb8; --ext2: #43356e; --glow: rgba(255, 255, 255, .35); }

.burst {
  position: absolute; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--b1, #ff2bd6) 0deg 9deg, var(--b2, #6a1cff) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 70%);
  mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 70%);
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.panel {
  background: linear-gradient(180deg, #4b23c9 0%, #2a1092 45%, #170857 100%);
  border: 5px solid #fff; border-radius: 30px;
  box-shadow: 0 0 0 7px rgba(35, 213, 255, .35), 0 0 40px rgba(35, 213, 255, .35), 0 16px 0 rgba(0, 0, 0, .35), inset 0 5px 0 rgba(255, 255, 255, .28), inset 0 -10px 30px rgba(0, 0, 0, .35);
}

.btn {
  font-family: var(--display); font-size: 44px; letter-spacing: 1px; color: #2a0866; cursor: pointer;
  background: linear-gradient(180deg, #fff27a 0%, #ffd23f 45%, #ff9d1f 100%);
  border: 5px solid #fff; border-radius: 999px; padding: 14px 54px 10px;
  box-shadow: 0 9px 0 #b3540b, 0 16px 30px rgba(0, 0, 0, .5), inset 0 4px 0 rgba(255, 255, 255, .6);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.btn:active { transform: translateY(6px); box-shadow: 0 3px 0 #b3540b, 0 6px 14px rgba(0, 0, 0, .5); }
.btn:disabled { filter: grayscale(.85) brightness(.7); cursor: not-allowed; transform: none; }
.btn.small { font-size: 30px; padding: 8px 30px 6px; }
.btn.alt { background: linear-gradient(180deg, #9ff5ff 0%, #23d5ff 50%, #1785ff 100%); box-shadow: 0 9px 0 #0a4c99, 0 16px 30px rgba(0, 0, 0, .5), inset 0 4px 0 rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- logotipo */
.logo { position: absolute; text-align: center; transform-origin: center; }
.logo .burst { left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; opacity: .85; z-index: -1; }
.logo .l1 { font-size: 96px; --fill: #fff; --ext: #8a2be2; --ext2: #4b0f8a; transform: rotate(-4deg); display: inline-block; }
.logo .l2 { font-size: 210px; margin-top: -6px; display: block; animation: logoPulse 2.4s ease-in-out infinite; }
.logo .stars { position: absolute; inset: -40px; pointer-events: none; }
.logo .stars i { position: absolute; font-style: normal; color: #fff; text-shadow: 0 0 20px #fff, 0 0 40px var(--cyan); animation: twinkle 1.6s ease-in-out infinite; }
@keyframes logoPulse { 50% { transform: scale(1.035) rotate(-1deg); } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.logo.intro { animation: logoIn 1s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes logoIn { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* ---------------------------------------------------------------- portada */
#title .logo { left: 0; right: 0; top: 120px; }
#title .setup { position: absolute; left: 50%; top: 590px; transform: translateX(-50%); width: 1180px; padding: 30px 44px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
#title .setup h3 { grid-column: 1 / -1; font-family: var(--display); font-size: 34px; color: var(--yellow); text-align: center; letter-spacing: 1px; }
.opt { display: flex; flex-direction: column; gap: 8px; font-size: 26px; font-weight: 700; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; font: 800 24px var(--font); color: #fff; background: rgba(255, 255, 255, .1); border: 3px solid rgba(255, 255, 255, .35); border-radius: 14px; padding: 8px 6px 4px; cursor: pointer; }
.seg button.on { background: var(--yellow); color: #2a0866; border-color: #fff; box-shadow: 0 0 20px rgba(255, 210, 63, .6); }
.opt select, .opt input[type=range] { font: 700 22px var(--font); width: 100%; }
.opt select { background: #1b0a52; color: #fff; border: 3px solid rgba(255, 255, 255, .4); border-radius: 12px; padding: 8px; }
.opt input[type=range] { accent-color: var(--yellow); height: 30px; }
#title .go { position: absolute; left: 50%; top: 940px; transform: translateX(-50%); font-size: 62px; padding: 16px 80px 10px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-8px) scale(1.03); } }
#title .err { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 26px; color: #ffb3c0; background: rgba(60, 0, 20, .8); padding: 8px 20px; border-radius: 12px; }

/* ---------------------------------------------------------------- sala de espera */
#lobby .logo { left: 60px; top: 50px; transform: scale(.62); transform-origin: top left; }
#lobby .join { position: absolute; right: 70px; top: 40px; width: 860px; padding: 26px 36px; display: grid; grid-template-columns: 330px 1fr; gap: 10px 34px; align-items: center; }
#lobby .join h2 { grid-column: 1 / -1; font-family: var(--display); font-size: 46px; text-align: center; color: var(--yellow); }
#lobby .qr { width: 330px; height: 330px; background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 0 0 6px var(--pink), 0 0 40px rgba(255, 43, 214, .6); }
#lobby .qr svg, #lobby .qr img { width: 100%; height: 100%; display: block; }
#lobby .how { font-size: 28px; font-weight: 700; line-height: 1.25; }
#lobby .how b { color: var(--cyan); display: block; font-size: 24px; overflow-wrap: anywhere; line-height: 1.15; margin: 2px 0 4px; }
#lobby .code { display: flex; gap: 12px; margin: 14px 0 6px; }
#lobby .code span { font-family: var(--display); font-size: 84px; width: 96px; height: 116px; display: grid; place-items: center; color: #2a0866; background: linear-gradient(#fff, #ffe680); border-radius: 18px; box-shadow: 0 8px 0 #c48a00, 0 0 30px rgba(255, 210, 63, .5); }
#lobby .count { font-size: 26px; opacity: .85; }
#lobby .plist { position: absolute; left: 70px; top: 480px; width: 860px; display: flex; flex-wrap: wrap; gap: 12px; }
#lobby .pchip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 4px 6px; border-radius: 999px; background: rgba(20, 6, 50, .8); border: 4px solid var(--c); font-size: 28px; font-weight: 800; animation: popIn .4s cubic-bezier(.2, 1.8, .4, 1) both; }
#lobby .pchip .em { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c); font-size: 32px; }
#lobby .pchip .x { cursor: pointer; opacity: .6; font-size: 22px; padding: 0 6px; background: none; border: 0; color: #fff; }
#lobby .pchip .x:hover { opacity: 1; color: var(--red); }
#lobby .pchip.off { opacity: .5; }
#lobby .startbox { position: absolute; left: 70px; top: 610px; display: flex; align-items: center; gap: 24px; }
#lobby .hint { font-size: 26px; opacity: .8; max-width: 520px; }
#lobby .conn { position: absolute; right: 74px; top: 570px; font-size: 20px; opacity: .65; }

/* ---------------------------------------------------------------- etiquetas sobre los atriles */
#tags { position: absolute; inset: 0; }
.tag { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tag > * { position: absolute; left: 0; transform: translateX(-50%); }
.tag .lock { bottom: 0; width: 76px; height: 76px; border-radius: 50%; background: var(--c); border: 5px solid #fff; display: grid; place-items: center; font-size: 42px; font-weight: 900; box-shadow: 0 0 30px var(--c); animation: popIn .35s cubic-bezier(.2, 1.8, .4, 1) both; }
.tag .letter { bottom: 0; width: 86px; height: 86px; border-radius: 50%; border: 6px solid #fff; display: grid; place-items: center; font: 400 54px var(--display); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); animation: popIn .35s cubic-bezier(.2, 1.8, .4, 1) both; }
.tag .letter.ok { box-shadow: 0 0 0 6px var(--green), 0 0 40px var(--green); }
.tag .letter.ko { box-shadow: 0 0 0 6px var(--red), 0 0 30px var(--red); filter: saturate(.6); }
.tag .letter.ko::after { content: '✕'; position: absolute; right: -14px; top: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--red); font-size: 26px; display: grid; place-items: center; border: 3px solid #fff; }
.tag .order { bottom: 92px; font: 400 40px var(--display); color: var(--yellow); text-shadow: 0 3px 0 #000, 0 0 16px #000; }
.tag .off { bottom: 0; font-size: 22px; font-weight: 800; background: rgba(0, 0, 0, .75); padding: 4px 12px; border-radius: 10px; white-space: nowrap; color: #ffb3c0; }
.tag .energy { bottom: 0; width: 230px; height: 46px; border-radius: 999px; background: rgba(10, 2, 30, .85); border: 4px solid #fff; overflow: hidden; box-shadow: 0 0 20px var(--c); }
.tag .energy i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #fff 0%, var(--c) 35%, var(--c) 70%, rgba(0, 0, 0, .3) 100%); transform-origin: left; transition: background .3s; }
.tag .energy b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 28px var(--display); text-shadow: 0 2px 0 #000, 0 0 8px #000; }
.tag .energy.low { animation: lowE .4s ease-in-out infinite alternate; }
.tag .energy.stop { box-shadow: 0 0 0 4px var(--green), 0 0 30px var(--green); }
@keyframes lowE { to { box-shadow: 0 0 0 4px var(--red), 0 0 30px var(--red); } }
.tag .out { bottom: 0; font: 400 34px var(--display); color: #fff; background: #3b0a14; border: 4px solid var(--red); padding: 6px 16px 2px; border-radius: 14px; transform: translateX(-50%) rotate(-6deg); white-space: nowrap; }
.tag .bombi { bottom: 0; font-size: 92px; filter: drop-shadow(0 0 20px #ff5a00); animation: bombWobble .5s ease-in-out infinite alternate; }
.pop { position: absolute; transform: translate(-50%, -50%); font: 400 64px var(--display); white-space: nowrap; animation: popUp 1.8s ease-out forwards; z-index: 20; }
@keyframes popUp { 0% { transform: translate(-50%, -20%) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -260%) scale(1); opacity: 0; } }
@keyframes popIn { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }
#lobby .pchip { animation-name: popIn2; }
@keyframes popIn2 { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------------------------------------------------------------- pregunta */
#question { position: absolute; left: 150px; width: 1620px; top: 72px; min-height: 220px; padding: 46px 230px 34px 60px; display: flex; align-items: center; justify-content: center; text-align: center; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
#question.off { transform: translateY(-420px) rotate(-3deg); opacity: 0; }
#question .qtext { font-size: 56px; font-weight: 800; line-height: 1.12; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
#question .cat { position: absolute; left: 40px; top: -34px; font: 400 34px var(--display); padding: 10px 26px 4px; border-radius: 16px; border: 4px solid #fff; background: var(--cc, var(--pink)); transform: rotate(-2.5deg); box-shadow: 0 8px 0 rgba(0, 0, 0, .3); text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
#question .num { position: absolute; right: 230px; top: -30px; font: 400 30px var(--display); padding: 8px 22px 2px; border-radius: 14px; border: 4px solid #fff; background: #1b0a52; transform: rotate(2deg); }
#question .pts { position: absolute; right: 56px; bottom: -34px; font: 400 40px var(--display); color: #2a0866; background: linear-gradient(#fff27a, #ffd23f); border: 4px solid #fff; border-radius: 16px; padding: 6px 20px 0; box-shadow: 0 6px 0 #b3540b; }
.layout-bomb #question { left: 110px; width: 1300px; padding-right: 230px; }
.layout-bomb #answers { left: 110px; width: 1300px; }
.layout-bomb #question .num { right: 60px; }
.layout-pixel #question { display: none; }

#timer { position: absolute; right: 182px; top: 94px; width: 176px; height: 176px; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
#timer.off { transform: scale(0); }
#timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#timer .bg { fill: #12062b; stroke: rgba(255, 255, 255, .25); stroke-width: 14; }
#timer .fg { fill: none; stroke: var(--yellow); stroke-width: 14; stroke-linecap: round; transition: stroke .3s; }
#timer .n { position: absolute; inset: 0; display: grid; place-items: center; font: 400 72px var(--display); }
#timer.hurry .fg { stroke: var(--red); }
#timer.hurry { animation: hurry .5s ease-in-out infinite alternate; }
@keyframes hurry { to { transform: scale(1.1); } }
.layout-bomb #timer { right: 530px; }
.layout-pixel #timer { right: auto; left: 770px; top: 575px; }

#answers { position: absolute; left: 150px; width: 1620px; top: 332px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; }
.ans {
  position: relative; display: flex; align-items: center; height: 136px; border-radius: 999px; padding-right: 30px;
  background: linear-gradient(180deg, #3f1fb0 0%, #24107a 50%, #160850 100%); border: 5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .35), inset 0 4px 0 rgba(255, 255, 255, .25), 0 0 0 5px var(--k);
  transition: opacity .4s, filter .4s, transform .4s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s;
  opacity: 0; transform: translateX(-140px) scale(.7);
}
.ans:nth-child(even) { transform: translateX(140px) scale(.7); }
.ans.in { opacity: 1; transform: none; }
.ans .key { flex: none; width: 136px; height: 136px; margin: -5px 0 -5px -5px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 40%), var(--k); border: 5px solid #fff; font: 400 76px var(--display); text-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.ans .txt { flex: 1; padding: 0 18px 0 26px; font-size: 44px; font-weight: 800; line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.ans .chips { display: flex; gap: 6px; flex-direction: row-reverse; }
.ans.dim { opacity: .28; filter: grayscale(.9); transform: scale(.96); }
.ans.right { border-color: var(--green); box-shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 0 0 7px var(--green), 0 0 60px var(--green); transform: scale(1.05); animation: rightPulse .8s ease-in-out infinite alternate; }
.ans.right::after { content: '✔'; position: absolute; right: -24px; top: -26px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #053b1a; font-size: 44px; border: 5px solid #fff; animation: popIn2 .4s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes rightPulse { to { box-shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 0 0 11px var(--green), 0 0 90px var(--green); } }
.ans.picked { box-shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 0 0 9px var(--yellow), 0 0 50px var(--yellow); }
.chip { width: 70px; height: 70px; border-radius: 50%; border: 5px solid var(--c); background: #fff; display: grid; place-items: center; font-size: 40px; box-shadow: 0 0 14px var(--c); animation: popIn2 .35s cubic-bezier(.2, 1.8, .4, 1) both; }

/* ---------------------------------------------------------------- cartela de ronda */
#roundcard { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(60, 10, 140, .55), rgba(5, 0, 20, .92) 70%); }
#roundcard .burst { width: 2400px; height: 2400px; left: 50%; top: 45%; margin: -1200px 0 0 -1200px; opacity: .7; }
#roundcard .inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
#roundcard .rn { font: 400 46px var(--display); color: #2a0866; background: linear-gradient(#fff27a, #ffd23f); border: 5px solid #fff; border-radius: 18px; padding: 8px 34px 2px; transform: rotate(-3deg); box-shadow: 0 8px 0 #b3540b; }
#roundcard .ri { font-size: 190px; line-height: 1; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 40px rgba(255, 255, 255, .4)); animation: iconBounce 1.2s ease-in-out infinite; }
#roundcard .rt { font-size: 156px; max-width: 1700px; }
#roundcard .rr { max-width: 1300px; font-size: 38px; font-weight: 700; line-height: 1.25; padding: 24px 40px; }
#roundcard.show .inner > * { animation: cardIn .7s cubic-bezier(.2, 1.6, .4, 1) both; }
#roundcard.show .inner > :nth-child(2) { animation-delay: .1s; }
#roundcard.show .inner > :nth-child(3) { animation-delay: .25s; }
#roundcard.show .inner > :nth-child(4) { animation-delay: .9s; }
@keyframes cardIn { from { transform: scale(0) rotate(-12deg); opacity: 0; } to { opacity: 1; } }
@keyframes iconBounce { 50% { transform: translateY(-20px) rotate(6deg) scale(1.05); } }
#roundcard .ri { animation: cardIn .7s cubic-bezier(.2, 1.6, .4, 1) both, iconBounce 1.2s ease-in-out 1s infinite; }

/* ---------------------------------------------------------------- cortinilla */
#wipe { position: absolute; inset: -200px; pointer-events: none; transform: translateX(-140%) skewX(-18deg); background: repeating-linear-gradient(90deg, var(--pink) 0 120px, var(--yellow) 120px 240px, var(--cyan) 240px 360px, var(--purple) 360px 480px); z-index: 50; }
#wipe.go { animation: wipe 1.1s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes wipe { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(140%) skewX(-18deg); } }

/* ---------------------------------------------------------------- rótulo central */
#banner { position: absolute; left: 0; right: 0; top: 380px; text-align: center; font-size: 200px; z-index: 30; opacity: 0; }
#banner.show { animation: bannerIn 1.6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes bannerIn { 0% { transform: scale(0) rotate(-10deg); opacity: 0; } 18% { transform: scale(1.15) rotate(2deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 80% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.3); } }

#flash { position: absolute; inset: -100px; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
#flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- subtítulos del presentador */
#subtitle { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(200px); max-width: 1500px; display: flex; align-items: stretch; z-index: 25; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55)); }
#subtitle.show { transform: translateX(-50%) translateY(0); }
#subtitle .who { font: 400 30px var(--display); background: linear-gradient(180deg, #ff6ae6, #c4129f); padding: 16px 24px 10px; border-radius: 20px 0 0 20px; border: 4px solid #fff; border-right: 0; display: flex; align-items: center; white-space: nowrap; }
#subtitle .txt { background: linear-gradient(180deg, #ffffff, #e9e3ff); color: #1d0b47; font-size: 36px; font-weight: 800; line-height: 1.15; padding: 14px 30px 10px; border-radius: 0 20px 20px 0; border: 4px solid #fff; }
.layout-q #subtitle { bottom: auto; top: 6px; max-width: 1000px; transform: translateX(-50%) translateY(-200px); }
.layout-q #subtitle.show { transform: translateX(-50%) translateY(0); }
.layout-q #subtitle .txt { font-size: 30px; padding: 8px 24px 4px; }
.layout-q #subtitle .who { font-size: 24px; padding: 8px 18px 4px; }

/* ---------------------------------------------------------------- elección de categoría */
#catpick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 70px; gap: 34px; }
#catpick h2 { font-size: 80px; text-align: center; }
#catpick .who { font-size: 40px; font-weight: 800; background: rgba(10, 2, 30, .8); padding: 8px 30px 4px; border-radius: 999px; border: 4px solid var(--c); }
#catpick .cards { display: flex; gap: 46px; }
.ccard { width: 420px; height: 360px; border-radius: 34px; border: 6px solid #fff; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .35), transparent 60%), var(--cc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 0 rgba(0, 0, 0, .35), 0 0 40px var(--cc); animation: cardIn .6s cubic-bezier(.2, 1.6, .4, 1) both; transition: transform .5s, opacity .5s, filter .5s; }
.ccard:nth-child(2) { animation-delay: .12s; } .ccard:nth-child(3) { animation-delay: .24s; }
.ccard .ci { font-size: 140px; line-height: 1; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); }
.ccard .cn { font: 400 50px var(--display); text-align: center; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); padding: 0 20px; line-height: 1; }
.ccard .ck { font: 400 36px var(--display); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--k); border: 4px solid #fff; }
.ccard.chosen { transform: scale(1.18) rotate(-2deg); box-shadow: 0 0 0 10px var(--yellow), 0 0 80px var(--yellow); z-index: 2; }
.ccard.gone { transform: scale(.7) translateY(80px); opacity: 0; filter: grayscale(1); }

/* ---------------------------------------------------------------- clasificación */
#board { position: absolute; left: 50%; top: 40px; width: 1280px; height: 700px; margin-left: -640px; padding: 30px 40px; }
#board h2 { text-align: center; font-size: 78px; margin: -6px 0 18px; }
#board .rows { position: relative; height: 560px; }
.brow { position: absolute; left: 0; right: 0; height: 84px; display: flex; align-items: center; gap: 18px; transition: top .9s cubic-bezier(.5, 0, .2, 1); animation: rowIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rowIn { from { transform: translateX(-200px); opacity: 0; } }
.brow .rk { width: 70px; height: 70px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 400 40px var(--display); background: #2a1092; border: 4px solid #fff; }
.brow.first .rk { background: linear-gradient(#fff27a, #ffb300); color: #5a2800; }
.brow .em { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 44px; background: var(--c); border: 4px solid #fff; }
.brow .nm { width: 300px; flex: none; font-size: 42px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .bar { flex: 1; height: 54px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; border: 3px solid rgba(255, 255, 255, .4); }
.brow .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, #fff 0%, var(--c) 30%, var(--c) 70%, rgba(0, 0, 0, .25) 100%); transition: width 1.2s cubic-bezier(.3, 0, .2, 1); }
.brow .sc { width: 190px; text-align: right; font: 400 54px var(--display); color: var(--yellow); }

/* ---------------------------------------------------------------- píxeles */
#pixel { position: absolute; inset: 0; }
#pixel .frame { position: absolute; left: 230px; top: 40px; width: 680px; height: 680px; padding: 16px; border-radius: 34px; }
#pixel canvas { width: 640px; height: 640px; border-radius: 20px; display: block; image-rendering: pixelated; background: #000; }
#pixel .side { position: absolute; left: 980px; top: 40px; width: 760px; display: flex; flex-direction: column; gap: 18px; }
#pixel .val { text-align: center; padding: 18px; }
#pixel .val small { display: block; font-size: 30px; font-weight: 800; opacity: .85; }
#pixel .val b { font-size: 120px; display: block; }
#pixel .q { font-size: 44px; font-weight: 800; text-align: center; }
#pixel .opts { display: grid; gap: 14px; }
#pixel .opts .ans { height: 96px; }
#pixel .opts .ans .key { width: 96px; height: 96px; font-size: 52px; }
#pixel .opts .ans .txt { font-size: 38px; }
#pixel .bar { position: absolute; left: 230px; top: 735px; width: 680px; height: 22px; border-radius: 999px; background: rgba(0, 0, 0, .5); border: 3px solid #fff; overflow: hidden; }
#pixel .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); transform-origin: left; }
#pixel .who { position: absolute; left: 570px; top: 330px; transform: translate(-50%, -50%); font-size: 74px; white-space: nowrap; z-index: 3; }

/* ---------------------------------------------------------------- bomba */
#bomb { position: absolute; right: 70px; top: 30px; width: 400px; text-align: center; }
#bomb .bombw { position: relative; width: 340px; height: 340px; margin: 0 auto; animation: bombWobble 0.6s ease-in-out infinite alternate; }
#bomb.fast .bombw { animation-duration: .18s; }
#bomb svg { width: 100%; height: 100%; overflow: visible; }
#bomb .spark { position: absolute; width: 70px; height: 70px; left: 236px; top: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, #ffe066 30%, #ff7a00 55%, transparent 70%); animation: spark .12s linear infinite alternate; }
@keyframes spark { to { transform: scale(1.4) rotate(40deg); opacity: .7; } }
@keyframes bombWobble { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(5deg) scale(1.05); } }
#bomb .holder { margin-top: 6px; font-size: 40px; font-weight: 800; background: rgba(10, 2, 30, .85); border: 4px solid var(--c, #fff); border-radius: 18px; padding: 8px 14px 4px; }
#bomb .holder small { display: block; font-size: 24px; opacity: .8; }
#boom { position: absolute; width: 900px; height: 900px; transform: translate(-50%, -50%) scale(0); border-radius: 50%; background: radial-gradient(circle, #fff 0 10%, #ffe066 22%, #ff7a00 40%, #b3002d 58%, rgba(40, 0, 0, 0) 70%); z-index: 35; pointer-events: none; }
#boom.go { animation: boom 1.1s ease-out forwards; }
@keyframes boom { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 40% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
#flyer { position: absolute; font-size: 110px; transform: translate(-50%, -50%); z-index: 33; transition: left .9s cubic-bezier(.5, 0, .3, 1), top .9s cubic-bezier(.3, -0.6, .5, 1); filter: drop-shadow(0 0 20px #ff7a00); }

/* ---------------------------------------------------------------- final */
#finalhead { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-size: 52px; white-space: nowrap; }

/* ---------------------------------------------------------------- ganador */
#winner { position: absolute; inset: 0; }
#winner .burst { width: 2200px; height: 2200px; left: 50%; top: 18%; margin: -1100px 0 0 -1100px; --b1: #ffd23f; --b2: #ff8a1f; opacity: .55; }
#winner .wt { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 110px; }
#winner .wn { position: absolute; left: 0; right: 0; top: 170px; text-align: center; font-size: 170px; }
#winner .rank { position: absolute; right: 80px; top: 380px; width: 640px; padding: 22px 30px; display: flex; flex-direction: column; gap: 10px; }
#winner .rank .r { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 800; animation: rowIn .5s both; }
#winner .rank .r .em { width: 56px; height: 56px; border-radius: 50%; background: var(--c); border: 3px solid #fff; display: grid; place-items: center; font-size: 32px; }
#winner .rank .r .pos { width: 50px; font: 400 40px var(--display); color: var(--yellow); }
#winner .rank .r .p { margin-left: auto; font: 400 36px var(--display); color: var(--cyan); }
#winner .acts { position: absolute; left: 80px; top: 420px; display: flex; flex-direction: column; gap: 26px; }

/* ---------------------------------------------------------------- HUD (fuera del escenario) */
#hud { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 100; opacity: .35; transition: opacity .3s; }
#hud:hover { opacity: 1; }
#hud button { width: 46px; height: 46px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .5); background: rgba(20, 6, 50, .8); color: #fff; font-size: 22px; cursor: pointer; }
#status { position: fixed; left: 12px; bottom: 12px; z-index: 100; font: 700 14px var(--font); padding: 6px 12px; border-radius: 10px; background: rgba(120, 0, 30, .85); display: none; }
#status.show { display: block; }

.fadein { animation: fadeIn .5s both; }
@keyframes fadeIn { from { opacity: 0; } }
.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translate(-50%, -50%) scale(var(--s)) translate(-14px, 8px); } 40% { transform: translate(-50%, -50%) scale(var(--s)) translate(12px, -10px); } 60% { transform: translate(-50%, -50%) scale(var(--s)) translate(-8px, 6px); } 80% { transform: translate(-50%, -50%) scale(var(--s)) translate(6px, -4px); } }