/* Alertas en vivo (meta, regalos y nuevo seguidor) en el estilo consola neón del banner.
   Todas las medidas usan --u (1 px del diseño), así que escalan con el ancho de la fuente. */
@font-face {
  font-family: "Exo 2";
  src: url("../banner/fonts/Exo2-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root { --neon: #b6ff1a; --mint: #9dffcf; --teal: #5fe3b8; --steel: #7b8789; --ink: #050707; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent !important; }
body { font-family: "Exo 2", "Bahnschrift", "Segoe UI", sans-serif; color: #fff; }
body.meta-page { --u: calc(100vw / 560); }
body.follow-page { --u: calc(100vw / 360); }
body.gift-page { --u: calc(100vw / 800); }
i { display: block; font-style: normal; }
[hidden] { display: none !important; }

.chamfer {
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* ---------- Carcasa compartida ---------- */
.shell { position: absolute; inset: 0; --c: calc(var(--u) * 16);
  background: linear-gradient(180deg, #48534f 0%, #1c2325 9%, #0f1314 50%, #1c2325 91%, #3b4547 100%); }
.shell-inner { position: absolute; inset: calc(var(--u) * 3); --c: calc(var(--u) * 14);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 39), #ffffff06 calc(var(--u) * 39) calc(var(--u) * 40)),
    radial-gradient(ellipse 55% 140% at 0% 50%, #b6ff1a17, transparent 65%),
    linear-gradient(180deg, #121819, #070a0a 55%, #0c1011);
  box-shadow: inset 0 calc(var(--u) * 1) 0 #ffffff14; }
.sweep { position: absolute; inset: 0; --c: calc(var(--u) * 16); opacity: 0;
  background: linear-gradient(100deg, transparent 35%, #e2ffb066 50%, transparent 65%) no-repeat;
  background-size: 45% 100%; background-position: -70% 0; }
.accent { position: absolute; left: 0; top: 24%; bottom: 24%; width: calc(var(--u) * 5);
  background: var(--neon); box-shadow: 0 0 calc(var(--u) * 10) #b6ff1a99; }
.corner { position: absolute; width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  border: calc(var(--u) * 3) solid var(--neon); filter: drop-shadow(0 0 calc(var(--u) * 5) #b6ff1a88);
  animation: glow 3.2s ease-in-out infinite; }
.corner.tl { left: calc(var(--u) * -6); top: calc(var(--u) * -6); border-right: 0; border-bottom: 0; }
.corner.br { right: calc(var(--u) * -6); bottom: calc(var(--u) * -6); border-left: 0; border-top: 0; animation-delay: -1.6s; }

/* ---------- Meta de seguidores: medidor circular + etiquetas ---------- */
@property --pct { syntax: "<number>"; inherits: true; initial-value: 0; }
.goal { position: absolute; left: calc(var(--u) * 10); top: calc(50% - var(--u) * 100); width: calc(var(--u) * 540);
  height: calc(var(--u) * 200); filter: drop-shadow(0 0 calc(var(--u) * 10) #b6ff1a2e); animation: glitchIn .7s steps(1, end) both; }
.goal .accent { top: 30%; bottom: 30%; }
.meter { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 14); width: calc(var(--u) * 172); height: calc(var(--u) * 172);
  --pct: 0; transition: --pct 1.1s cubic-bezier(.2, .8, .2, 1); }
.meter > i { position: absolute; border-radius: 50%; }
.halo { inset: calc(var(--u) * -6);
  background: repeating-conic-gradient(#6d7779 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 92%, #000 93% 97%, transparent 98%);
  mask: radial-gradient(circle, transparent 0 92%, #000 93% 97%, transparent 98%); opacity: .7; animation: rotate 40s linear infinite; }
.dial { inset: 0;
  background: conic-gradient(#2f9474 0%, var(--neon) calc(var(--pct) * 1%), #1a2324 calc(var(--pct) * 1%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 64% 84%, transparent 85%), repeating-conic-gradient(#000 0 8.4deg, transparent 8.4deg 10deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle, transparent 0 63%, #000 64% 84%, transparent 85%), repeating-conic-gradient(#000 0 8.4deg, transparent 8.4deg 10deg);
  mask-composite: intersect; filter: drop-shadow(0 0 calc(var(--u) * 6) #b6ff1a77); }
.core { inset: 22%; background: radial-gradient(circle at 50% 40%, #16211b, #060909 72%); box-shadow: inset 0 0 0 calc(var(--u) * 1) #2a3536; }
.dial-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pct { color: var(--neon); font-weight: 800; font-size: calc(var(--u) * 38); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(var(--u) * 12) #b6ff1a77; }
.pct small { font-size: .55em; }
.pct-label { margin-top: calc(var(--u) * 4); color: #8e9a9b; font-weight: 700; font-size: calc(var(--u) * 10); letter-spacing: .2em; }
.info { position: absolute; left: calc(var(--u) * 222); right: calc(var(--u) * 26); top: calc(var(--u) * 26); }
.goal-title { display: flex; align-items: center; gap: calc(var(--u) * 9); color: var(--neon); font-weight: 700;
  font-size: calc(var(--u) * 15); letter-spacing: .2em; text-shadow: 0 0 calc(var(--u) * 8) #b6ff1a55; white-space: nowrap; }
.blip { width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: var(--neon);
  box-shadow: 0 0 calc(var(--u) * 8) var(--neon); animation: blink 1.2s steps(2, jump-none) infinite; }
.goal-count { display: flex; align-items: baseline; gap: calc(var(--u) * 7); margin-top: calc(var(--u) * 12); font-variant-numeric: tabular-nums; }
.goal-count b { display: inline-block; font-weight: 800; font-size: calc(var(--u) * 52); line-height: 1;
  text-shadow: 0 0 calc(var(--u) * 2) #fff9, 0 0 calc(var(--u) * 14) #b6ff1a40; }
.goal-count span { color: #aab6b7; font-weight: 700; font-size: calc(var(--u) * 26); }
.goal-rule { height: calc(var(--u) * 2); margin: calc(var(--u) * 12) 0 calc(var(--u) * 10);
  background: linear-gradient(90deg, var(--neon), #3b4547 45%, transparent); }
.goal-left { color: var(--mint); font-weight: 700; font-size: calc(var(--u) * 19); letter-spacing: .12em; }
.goal-gain { margin-top: calc(var(--u) * 5); color: #8e9a9b; font-weight: 700; font-size: calc(var(--u) * 13); letter-spacing: .16em; }
.goal-gain b { color: var(--neon); }
.plus { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 6); color: var(--neon); font-weight: 800;
  font-size: calc(var(--u) * 28); opacity: 0; text-shadow: 0 0 calc(var(--u) * 10) var(--neon); pointer-events: none; }
.goal.bump .dial { animation: flash .9s ease-out; }
.goal.bump .goal-count b { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.goal.bump .plus { animation: plusUp 1.2s ease-out; }
.goal.done .shell { background: linear-gradient(180deg, var(--neon), #2f9474 50%, var(--neon)); animation: glow 1.4s ease-in-out infinite; }
.goal.done .dial { animation: glow 1s ease-in-out infinite; }
.goal.done .goal-title span { animation: blink 1s steps(2, jump-none) infinite; }

/* ---------- Tarjetas compartidas (seguidor y regalo) ---------- */
.toast { position: absolute; visibility: hidden; filter: drop-shadow(0 0 calc(var(--u) * 10) #b6ff1a33); }
.toast.in { visibility: visible; animation: glitchIn .55s steps(1, end) both; }
.toast.in .sweep { animation: sweep .9s ease-out .15s both; }
.toast.out { animation: crtOff .46s cubic-bezier(.5, 0, .9, .4) both; }
.media { position: absolute; }
.ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--spin), var(--neon), #2f9474 22%, #0d1213 42%, var(--mint) 68%, var(--neon));
  animation: spin 3.5s linear infinite; }
.media-inner { position: absolute; inset: calc(var(--u) * 5); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #1d2b22, #060909 72%); }
.media img, .media svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.toast.in .media img, .toast.in .media svg, .toast.in .monogram { animation: popIn .6s cubic-bezier(.2, 1.5, .4, 1) .18s both; }
.monogram { position: absolute; inset: 0; display: grid; place-items: center; color: var(--neon); font-weight: 800;
  text-shadow: 0 0 calc(var(--u) * 14) #b6ff1a88; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.burst i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--col);
  box-shadow: 0 0 calc(var(--u) * 6) var(--col); opacity: 0; animation: burst 1s cubic-bezier(.15, .7, .3, 1) var(--d) both; }
.label { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9); color: var(--neon); font-weight: 700;
  letter-spacing: .22em; line-height: 1; text-shadow: 0 0 calc(var(--u) * 8) #b6ff1a55; }
.name { position: relative; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  text-shadow: 0 0 calc(var(--u) * 2) #ffffffaa, 0 0 calc(var(--u) * 14) #b6ff1a40; }
.name::before, .name::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; text-shadow: none; }
.name::before { color: var(--neon); }
.name::after { color: #46e6d0; }
.name.glitch::before { animation: splitA .55s steps(1, end) both; }
.name.glitch::after { animation: splitB .55s steps(1, end) both; }
.timer { position: absolute; height: calc(var(--u) * 3); background: #1d2426; }
.timer span { display: block; height: 100%; background: linear-gradient(90deg, #2f9474, var(--neon)); transform-origin: left; }
.toast.in .timer span { animation: drain var(--hold, 3.8s) linear both; }

/* ---------- Nuevo seguidor: tarjeta vertical (fuente 360 × 420) ---------- */
.follow { left: calc(var(--u) * 12); top: calc(50% - var(--u) * 198); width: calc(var(--u) * 336); height: calc(var(--u) * 396); }
.follow .shell { --c: calc(var(--u) * 20); }
.follow .shell-inner { --c: calc(var(--u) * 18);
  background: radial-gradient(ellipse 80% 45% at 50% 28%, #b6ff1a1f, transparent 70%), linear-gradient(180deg, #121819, #070a0a 60%, #0c1011); }
.follow .accent { top: 0; bottom: auto; left: 30%; width: 40%; height: calc(var(--u) * 4); }
.follow .media { left: calc(50% - var(--u) * 86); top: calc(var(--u) * 34); width: calc(var(--u) * 172); height: calc(var(--u) * 172); }
.follow .media img { width: calc(var(--u) * 158); height: calc(var(--u) * 158); border-radius: 50%; object-fit: cover; }
.follow .monogram { font-size: calc(var(--u) * 78); }
.badge { position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 6); width: calc(var(--u) * 42); height: calc(var(--u) * 42);
  display: grid; place-items: center; --c: calc(var(--u) * 9); background: var(--neon); color: var(--ink);
  font-weight: 900; font-size: calc(var(--u) * 34); line-height: 1; box-shadow: 0 0 calc(var(--u) * 12) var(--neon); }
.follow .label { position: absolute; left: 0; right: 0; top: calc(var(--u) * 232); font-size: calc(var(--u) * 15); }
.follow .label .blip { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.follow .name { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 20); top: calc(var(--u) * 258); font-size: calc(var(--u) * 36); }
.follow .handle { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 20); top: calc(var(--u) * 305); text-align: center;
  color: var(--mint); font-weight: 600; font-size: calc(var(--u) * 19); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow .thanks { position: absolute; left: 0; right: 0; top: calc(var(--u) * 336); text-align: center; color: #c9d3d4;
  font-weight: 700; font-size: calc(var(--u) * 14); letter-spacing: .14em; }
.follow .timer { left: calc(var(--u) * 40); right: calc(var(--u) * 40); bottom: calc(var(--u) * 16); }

/* ---------- Regalo: aparece grande en el centro (fuente 800 × 800) ---------- */
.spot { inset: 0; filter: none; }
.spot.in { animation: spotIn .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.spot.out { animation: implode .5s cubic-bezier(.6, 0, .9, .4) both; }
.spot .glow-disc { position: absolute; left: 50%; top: calc(var(--u) * 300); width: calc(var(--u) * 560); height: calc(var(--u) * 560);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #b6ff1a40 0%, #2f947422 35%, #050707aa 55%, transparent 70%); }
.spot.big .glow-disc { background: radial-gradient(circle, #b6ff1a70 0%, #5fe3b833 35%, #050707aa 55%, transparent 70%); }
.spot .rays { position: absolute; left: 50%; top: calc(var(--u) * 300); width: calc(var(--u) * 520); height: calc(var(--u) * 520);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(#b6ff1a2e 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 45%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 30%, #000 45%, transparent 70%); animation: rotate 14s linear infinite; }
.spot .media { left: calc(50% - var(--u) * 150); top: calc(var(--u) * 150); width: calc(var(--u) * 300); height: calc(var(--u) * 300); }
.spot .halo { position: absolute; inset: calc(var(--u) * -18); border-radius: 50%; }
.spot .ring { animation-duration: 2.4s; }
.spot.big .ring { animation-duration: 1.1s; }
.spot .media-inner { inset: calc(var(--u) * 7); }
.spot .media img { width: calc(var(--u) * 220); height: calc(var(--u) * 220); filter: drop-shadow(0 0 calc(var(--u) * 16) #b6ff1a88); }
.spot .media svg { width: calc(var(--u) * 150); height: calc(var(--u) * 150); color: var(--neon); filter: drop-shadow(0 0 calc(var(--u) * 12) #b6ff1a88); }
.qty-badge { position: absolute; right: calc(var(--u) * -14); bottom: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 16);
  --c: calc(var(--u) * 12); background: var(--neon); color: var(--ink); font-weight: 900; font-size: calc(var(--u) * 54); line-height: 1;
  box-shadow: 0 0 calc(var(--u) * 20) var(--neon); }
.spot.in .qty-badge { animation: popIn .55s cubic-bezier(.2, 1.7, .4, 1) .45s both; }
.plate { position: absolute; left: calc(var(--u) * 90); width: calc(var(--u) * 620); top: calc(var(--u) * 500); height: calc(var(--u) * 210); }
.plate .shell { --c: calc(var(--u) * 18); }
.plate .shell-inner { --c: calc(var(--u) * 16); }
.spot.big .plate .shell { background: linear-gradient(180deg, var(--neon), #2f9474 50%, var(--neon)); }
.spot .label { position: absolute; left: 0; right: 0; top: calc(var(--u) * 26); font-size: calc(var(--u) * 18); }
.spot .label .blip { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.spot .name { position: absolute; left: calc(var(--u) * 28); right: calc(var(--u) * 28); top: calc(var(--u) * 56); font-size: calc(var(--u) * 54); }
.spot .line { position: absolute; left: calc(var(--u) * 28); right: calc(var(--u) * 28); top: calc(var(--u) * 126); text-align: center;
  color: var(--mint); font-weight: 600; font-size: calc(var(--u) * 28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot .line b { color: #fff; font-weight: 800; }
.spot .coins { color: #aab6b7; font-weight: 700; font-size: .7em; letter-spacing: .06em; }
.spot .coins::before { content: "◆ "; color: var(--neon); }
.spot .timer { left: calc(var(--u) * 60); right: calc(var(--u) * 60); bottom: calc(var(--u) * 18); }

.tf-debug { position: fixed; right: 6px; top: 6px; z-index: 99; padding: 3px 8px; background: #000c; color: #c9d1d2;
  border: 1px solid #3a4446; font: 600 12px/1.3 Consolas, monospace; }
.tf-debug[data-s="connected"], .tf-debug[data-s="demo"] { color: var(--neon); border-color: #4f7a1a; }

@keyframes glitchIn {
  0% { opacity: 0; transform: none; clip-path: inset(0); }
  8% { opacity: 1; transform: translateX(calc(var(--u) * -14)) skewX(-8deg); clip-path: inset(0 0 62% 0); }
  18% { transform: translateX(calc(var(--u) * 10)); clip-path: inset(38% 0 22% 0); }
  28% { opacity: .4; transform: translateX(calc(var(--u) * -5)); clip-path: inset(70% 0 0 0); }
  40% { opacity: 1; transform: translateX(calc(var(--u) * 6)) skewX(6deg); clip-path: inset(0 0 30% 0); }
  52% { transform: translateX(calc(var(--u) * -2)); clip-path: inset(15% 0 0 0); }
  64%, 100% { opacity: 1; transform: none; clip-path: inset(-30%); }
}
@keyframes crtOff {
  0% { transform: scale(1, 1); opacity: 1; }
  45% { transform: scale(1, .03); filter: brightness(2.4) drop-shadow(0 0 calc(var(--u) * 14) var(--neon)); opacity: 1; }
  80% { transform: scale(.02, .03); filter: brightness(3); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
@keyframes splitA {
  0%, 64%, 100% { opacity: 0; transform: none; }
  8% { opacity: .9; transform: translate(calc(var(--u) * -6), calc(var(--u) * 1)); clip-path: inset(10% 0 55% 0); }
  28% { opacity: .9; transform: translate(calc(var(--u) * 5), 0); clip-path: inset(60% 0 8% 0); }
  52% { opacity: .7; transform: translate(calc(var(--u) * -3), 0); clip-path: inset(30% 0 40% 0); }
}
@keyframes splitB {
  0%, 64%, 100% { opacity: 0; transform: none; }
  18% { opacity: .8; transform: translate(calc(var(--u) * 6), calc(var(--u) * -1)); clip-path: inset(45% 0 20% 0); }
  40% { opacity: .8; transform: translate(calc(var(--u) * -5), 0); clip-path: inset(5% 0 70% 0); }
}
@keyframes sweep { 0% { opacity: 1; background-position: -70% 0; } 100% { opacity: 1; background-position: 170% 0; } }
@keyframes spin { to { --spin: 360deg; } }
@keyframes glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes popIn { 0% { opacity: 0; scale: .2; } 70% { opacity: 1; scale: 1.15; } 100% { opacity: 1; scale: 1; } }
@keyframes pop { 0% { scale: 1; } 40% { scale: 1.3; color: var(--neon); } 100% { scale: 1; } }
@keyframes flash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@keyframes plusUp { 0% { opacity: 0; translate: 0 calc(var(--u) * 14); } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 calc(var(--u) * -18); } }
@keyframes shine { 0%, 35% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
@keyframes stripes { to { background-position: calc(var(--u) * 62) 0; } }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3) rotate(200deg); }
}
@keyframes rotate { to { rotate: 360deg; } }
@keyframes spotIn {
  0% { opacity: 0; scale: .3; filter: brightness(3); }
  12% { opacity: 1; translate: calc(var(--u) * -12) 0; }
  24% { translate: calc(var(--u) * 10) 0; }
  36% { translate: 0 0; }
  70% { scale: 1.06; filter: brightness(1.3); }
  100% { opacity: 1; scale: 1; filter: brightness(1); }
}
@keyframes implode {
  0% { opacity: 1; scale: 1; filter: brightness(1); }
  40% { scale: 1.08; filter: brightness(2.2); }
  100% { opacity: 0; scale: 0; filter: brightness(3); }
}
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

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