/* ═══════════════════════════════════════════════════════════════
   PANTALLA DEL STAND (TV 16:9) · /comiccon/pantalla
   Todo está en unidades vw/vh para que llene cualquier TV.
   Abrir en el navegador de la TV y poner pantalla completa (F11).
   ═══════════════════════════════════════════════════════════════ */
/* Solo en la TV: la ruta /comiccon/pantalla pone `tv-mode` en <html>
   (ver Pantalla.tsx). En el prototipo esta regla era global porque el CSS
   solo cargaba en pantalla.html; aquí el CSS es compartido. */
html.tv-mode:fullscreen, html.tv-mode:fullscreen body { height: 100%; overflow: hidden; }
.tv { min-height: 100vh; display: grid; grid-template-columns: 30vw 1fr 27vw; grid-template-rows: auto 1fr auto; gap: 1.4vw; padding: 1.4vw 1.6vw 0; cursor: auto; }
html.tv-mode:fullscreen .tv { height: 100vh; }
.tv.is-cursor-idle, .tv.is-cursor-idle * { cursor: none !important; }
.tv-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.tv-logos { display: flex; align-items: center; gap: 1vw; }
.tv-logos img:first-child { height: 3.2vw; width: auto; }
.tv-logos img:last-child { height: 3.8vw; width: auto; }
.tv-logos span { font-family: var(--f-display); font-weight: 800; color: var(--cc-yellow); font-size: 2vw; }
.tv-clock { display: flex; align-items: center; gap: 1vw; }
.tv-clock .live-pill { font-size: 1vw; padding: .5vw 1vw; }
.tv-clock b { font-family: var(--f-display); font-size: 2.4vw; }
.tv-h { font-size: 1.6vw; margin: 0 0 .8vw; color: var(--cc-yellow); letter-spacing: .02em; }
.tv-h small { font-family: var(--f-text); font-size: .9vw; color: var(--cc-muted); font-weight: 700; margin-left: .6vw; }
.tv-left, .tv-center, .tv-right { min-height: 0; display: flex; flex-direction: column; }
.tv .now-card { padding: 1.2vw; border-radius: 1.6vw; box-shadow: .4vw .4vw 0 var(--cc-blue); margin-bottom: 1.4vw; }
.tv .now-card .lbl { font-size: .9vw; padding: .3vw .8vw; }
.tv .now-card .t { font-size: 2vw; }
.tv .now-card .w { font-size: 1.1vw; }
.tv .now-card img { width: 7vw; height: 7.8vw; }
.tv-next { display: flex; flex-direction: column; gap: .7vw; }
.tv-next .show .time { font-size: 1.3vw; width: 4.6vw; padding-top: .8vw; }
.tv-next .show .box { padding: .6vw .9vw; border-radius: 1vw; }
.tv-next .show img { width: 3vw; height: 3.4vw; }
.tv-next .show .t { font-size: 1.15vw; } .tv-next .show .d { font-size: .9vw; } .tv-next .show .badge { font-size: .7vw; }
.tv-wall { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1vw; min-height: 0; margin-bottom: 1vw; }
.tv-wall .wall { display: contents; }
.tv-wall .wall-tile { aspect-ratio: auto; height: 100%; border-radius: 1.4vw; border-width: .25vw; }
.tv-wall .wall-tile .cap { font-size: .9vw; padding: 1.2vw .8vw .5vw; }
.tv-wall .wall-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 1.4vw; }
.tv-rank { background: #fff; color: var(--ink); border-radius: 1.4vw; border: .25vw solid var(--cc-line); padding: .6vw 1vw; }
.tv-rank .rank-row { font-size: 1.2vw; padding: .55vw .2vw; }
.tv-rank .rank-row b.pos { width: 2.2vw; }
.tv-meta { margin-top: 1.2vw; border-radius: 1.4vw; background: var(--cc-card); border: .15vw solid rgba(255, 255, 255, .18); padding: 1vw; }
.tv-meta .meta-count b { font-size: 3vw; } .tv-meta .meta-count span { font-size: 1.1vw; }
.tv-meta .meta-bar { height: 1.2vw; margin-top: .8vw; }
.tv-meta .tier { font-size: .95vw; margin-top: .4vw; } .tv-meta .tier .n { width: 1.6vw; height: 1.6vw; font-size: .8vw; }
.tv-join { margin-top: auto; margin-bottom: 1vw; display: flex; align-items: center; gap: 1vw; background: var(--cc-yellow); color: var(--ink); border: .25vw solid var(--cc-line); border-radius: 1.4vw; padding: .8vw; }
.tv-qr { flex: none; width: 8vw; height: 8vw; background: #fff; border-radius: .8vw; padding: .3vw; }
.tv-qr :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: contain; }
.tv-join b { display: block; font-family: var(--f-display); font-size: 1.5vw; line-height: 1.15; }
.tv-join span { font-size: 1.05vw; font-weight: 700; }
.tv-ticker { grid-column: 1 / -1; margin: 1vw -1.6vw 0; }
.tv-ticker .ticker { transform: none; margin: 0; }
.tv-ticker .ticker-track span { font-size: 1.8vw; }

/* Ruleta efímera del sorteo en vivo. */
/* En ventana (sin pantalla completa) la tarjeta crece con el contenido y empuja
   la banda amarilla hacia abajo; en completa sigue fija como está. */
html.tv-mode:not(:fullscreen) .roulette-column { min-height: max-content; overflow: visible; }
.tv-roulette-stage { grid-column: 2 / 4; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21vw; align-items: stretch; gap: 1.8vw; position: relative; }
.roulette-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: .18vw solid rgba(255,255,255,.16); border-radius: 1.8vw; padding: .8vw 1.2vw .6vw; box-shadow: .45vw .45vw 0 rgba(0,0,0,.35); }
.roulette-heading { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3vw 1vw; text-align: left; }
.roulette-kicker { grid-column: 1 / -1; margin: 0; display: inline-flex; align-items: center; gap: .5vw; font: 800 .85vw var(--f-text); letter-spacing: .22em; color: var(--cc-yellow); }
.roulette-kicker .dot { width: .7vw; height: .7vw; border-radius: 50%; background: var(--cc-red); box-shadow: 0 0 0 .25vw rgba(236,68,65,.3); animation: aiPulse 1.4s ease-out infinite; }
.roulette-heading .tv-h { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5vw; color: #fff; }
.roulette-count { display: inline-block; vertical-align: middle; margin-left: .7vw; padding: .3vw .8vw; border-radius: 999px; background: var(--cc-yellow); color: var(--ink); border: .15vw solid #0A1228; font: 900 .85vw var(--f-text); letter-spacing: .04em; }
.roulette-refresh { border: .12vw solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; padding: .45vw .8vw; font: 800 .78vw var(--f-text); cursor: pointer; }
.roulette-refresh:hover { background: rgba(255,255,255,.2); }
.roulette-refresh:disabled { opacity: .6; cursor: wait; }
.roulette-wrap { width: min(31vw, 54vh); aspect-ratio: 1; margin: .8vw auto 0; position: relative; flex: none; }
.roulette-glow { position: absolute; inset: -2.2vw; border-radius: 50%; background: radial-gradient(circle, rgba(249,217,74,.28), rgba(51,116,246,.12) 55%, transparent 70%); pointer-events: none; }
.roulette-wheel { position: absolute; inset: 0; border-radius: 50%; border: .55vw solid #fff; box-shadow: 0 0 0 .35vw var(--cc-yellow), 0 0 0 .6vw #0A1228, 0 1.2vw 3vw rgba(0,0,0,.5); transition: transform 5.2s cubic-bezier(.12,.7,.08,1); overflow: hidden; }
.roulette-wheel.is-many { box-shadow: 0 0 0 .35vw var(--cc-yellow), 0 0 0 .6vw #0A1228, 0 1.2vw 3vw rgba(0,0,0,.5), inset 0 0 3vw rgba(255,255,255,.2); }
.roulette-wheel::after { content: ""; position: absolute; z-index: 1; inset: 26%; border-radius: 50%; background: #0D1838; border: .3vw solid #fff; box-shadow: 0 0 0 .25vw var(--cc-yellow); }
.roulette-wheel span { position: absolute; z-index: 2; left: 72%; top: 50%; width: 25%; height: 1.8vw; margin-top: -.9vw; transform-origin: -88% center; display: flex; align-items: center; overflow: visible; }
.roulette-wheel span i { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 .82vw/1 var(--f-display); font-style: normal; color: #0A1228; background: rgba(255,255,255,.94); border: .12vw solid #0A1228; border-radius: 999px; padding: .22vw .5vw; box-shadow: .15vw .15vw 0 rgba(0,0,0,.45); letter-spacing: .01em; }
.roulette-pointer { position: absolute; z-index: 6; left: 50%; translate: -50% 0; top: -1.2vw; width: 0; height: 0; border-left: 1.5vw solid transparent; border-right: 1.5vw solid transparent; border-top: 3.2vw solid var(--cc-red); filter: drop-shadow(0 .25vw 0 #0A1228) drop-shadow(0 .3vw .2vw rgba(0,0,0,.45)); }
.roulette-hub { position: absolute; z-index: 1; inset: 26%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 6deg, transparent 6deg 24deg); }
.roulette-spin { position: absolute; z-index: 3; inset: 0; margin: auto; width: 9.2vw; height: 9.2vw; border-radius: 50%; border: .35vw solid #fff; background: radial-gradient(circle at 50% 30%, #FFE97A, var(--cc-yellow) 55%, #E0A92E); color: var(--ink); font: 900 1.7vw/1 var(--f-display); box-shadow: 0 0 0 .3vw #0A1228, 0 .5vw 1.2vw rgba(0,0,0,.5), inset 0 -.4vw 0 rgba(0,0,0,.18); cursor: pointer; display: grid; place-items: center; align-content: center; gap: .15vw; transition: scale .15s ease; }
.roulette-spin small { font: 800 .68vw var(--f-text); letter-spacing: .18em; }
.roulette-spin:hover:not(:disabled) { scale: 1.05; }
.roulette-spin:disabled { cursor: wait; opacity: .95; }
.roulette-join { text-align: center; background: linear-gradient(180deg, #fff, #FFF6D6); color: var(--ink); border: .3vw solid #0A1228; outline: .25vw solid var(--cc-yellow); border-radius: 1.6vw; padding: 1vw 1vw 1.1vw; box-shadow: .5vw .5vw 0 var(--cc-red); }
.roulette-join-kicker { margin: 0 0 .7vw; display: inline-block; padding: .3vw .9vw; border-radius: 999px; background: var(--ink); color: var(--cc-yellow); font: 800 .78vw var(--f-text); letter-spacing: .14em; }
.roulette-qr { position: relative; width: 13.5vw; height: 13.5vw; margin: 0 auto .8vw; background: #fff; border: .25vw solid #0A1228; border-radius: 1vw; padding: .55vw; box-shadow: .3vw .3vw 0 var(--cc-blue); }
.roulette-qr img { display: block; width: 100%; height: 100%; }
.qr-corner { position: absolute; width: 1.6vw; height: 1.6vw; border: .3vw solid var(--cc-red); }
.qr-corner.tl { top: -.3vw; left: -.3vw; border-right: 0; border-bottom: 0; border-radius: .5vw 0 0 0; }
.qr-corner.tr { top: -.3vw; right: -.3vw; border-left: 0; border-bottom: 0; border-radius: 0 .5vw 0 0; }
.qr-corner.bl { bottom: -.3vw; left: -.3vw; border-right: 0; border-top: 0; border-radius: 0 0 0 .5vw; }
.qr-corner.br { bottom: -.3vw; right: -.3vw; border-left: 0; border-top: 0; border-radius: 0 0 .5vw 0; }
.roulette-join b { display: block; font: 900 1.7vw/1.05 var(--f-display); color: var(--cc-red); text-shadow: .12vw .12vw 0 #0A1228; }
.roulette-join-sub { display: block; margin-top: .5vw; font-weight: 800; font-size: .95vw; color: #26375f; }
.roulette-manual { margin-top: .8vw; padding: .8vw; border-radius: 1vw; background: #0D1838; color: #fff; text-align: left; }
.roulette-manual label { display: block; margin-bottom: .4vw; font-size: .8vw; font-weight: 900; letter-spacing: .06em; color: var(--cc-yellow); }
.roulette-manual > div { display: flex; gap: .4vw; }
.roulette-manual input { min-width: 0; width: 100%; border: .15vw solid #fff; border-radius: .6vw; padding: .55vw .6vw; font: 800 .85vw var(--f-text); text-transform: uppercase; background: #fff; color: #0A1228; }
.roulette-manual button { flex: none; border: .15vw solid #0A1228; border-radius: .6vw; background: var(--cc-yellow); color: var(--ink); padding: .5vw .8vw; font: 900 .8vw var(--f-text); cursor: pointer; box-shadow: .2vw .2vw 0 rgba(0,0,0,.4); }
.roulette-manual button:disabled { opacity: .55; cursor: not-allowed; }
.roulette-manual em { display: block; margin-top: .4vw; font-size: .72vw; line-height: 1.3; color: #C2D0EA; font-style: normal; font-weight: 700; }
.roulette-result { margin-top: .6vw; min-height: 0; flex: 1; display: grid; justify-items: center; align-content: start; }
.roulette-winner { margin: 0 auto; width: min(30vw, 54vh); border-radius: .9vw; padding: .35vw .8vw; background: linear-gradient(180deg, var(--cc-yellow), #f5b93c); color: var(--ink); border: .22vw solid #0A1228; box-shadow: .3vw .3vw 0 var(--cc-red); animation: roulette-winner-in .45s cubic-bezier(.2,1.5,.5,1); }
.roulette-winner span, .roulette-winner small { display: block; font-weight: 900; font-size: .65vw; letter-spacing: .12em; }
.roulette-winner b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 1.4vw var(--f-display); text-shadow: .1vw .1vw 0 #fff; }
.roulette-empty { margin: 0; font: 800 1.2vw var(--f-display); color: var(--cc-muted); }
.roulette-hint { margin: 0; font: 800 .95vw var(--f-text); color: var(--cc-yellow); }
.roulette-confetti { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.roulette-confetti i { position: absolute; top: -3vh; width: .6vw; height: 1.2vw; background: hsl(calc(var(--i) * 47deg) 90% 58%); animation: roulette-confetti-fall 3.4s ease-in forwards; transform: rotate(calc(var(--i) * 29deg)); }
@keyframes roulette-confetti-fall { to { transform: translate(var(--drift), 108vh) rotate(900deg); } }
@keyframes roulette-winner-in { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }