/* =========================================================================
   STREAMER VS VIEWER V2 — "LA ARENA" · css/svv-v4.css  (4E · dirección e-sports / match event)
   Cargado EXCLUSIVAMENTE desde streamer-vs-viewer/index.html (al final del <head>).

   REGLAS
   - Todo selector va bajo `body.svv-page` o clases `.svv-*`. Nada global.
   - No se edita ningún archivo compartido (style.css, v3-theme.css).
   - Geo = naranja/dorado (lado izquierdo). Viewers = violeta (lado derecho). Blanco "clash" = el choque.
   - Tipografía: Barlow Condensed (cursiva 800/900) para titulares, cifras y etiquetas; Inter para texto.
   - Forma: paralelogramos inclinados (-14°) y esquinas cortadas; sin círculos, sin estrellas, sin brújulas.
   - Movimiento: UNA secuencia de entrada en el hero; el resto es estático. Todo se apaga con reduced-motion.
   ========================================================================= */

body.svv-page {
  --svv-bg-0: #06030f;
  --svv-bg-1: #0b0618;
  --svv-bg-2: #130a28;
  --svv-orange: #ff7a1a;
  --svv-orange-hot: #ff5a00;
  --svv-gold: #ffc247;
  --svv-violet: #8a3dff;
  --svv-violet-deep: #5f1fe0;
  --svv-violet-soft: #c3a0ff;
  --svv-clash: #fff3df;
  --svv-live: #27f09a;
  --svv-danger: #ff6b7a;
  --svv-text: #f1f4ff;
  --svv-text-2: #b8bfd9;
  --svv-text-3: #98a0bf;
  --svv-line: rgba(255, 255, 255, .12);
  --svv-panel: rgba(14, 8, 30, .78);
  --svv-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --svv-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --svv-gutter: clamp(16px, 5vw, 56px);
  --svv-cut: 14px;

  background: var(--svv-bg-0);
  color: var(--svv-text);
  font-family: var(--svv-body);
  -webkit-font-smoothing: antialiased;
}
body.svv-page .v3-page { background: radial-gradient(120% 70% at 50% 0%, #1b0f3d 0%, var(--svv-bg-1) 48%, var(--svv-bg-0) 100%); }
body.svv-page [hidden] { display: none; }

.svv-skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: #fff; color: #000; padding: 8px 14px; }
.svv-skip:focus { left: 8px; }
body.svv-page :focus-visible { outline: 2px solid var(--svv-gold); outline-offset: 3px; }

.svv-main { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 var(--svv-gutter) 72px; }
.svv-muted { color: var(--svv-text-3); font-size: .95rem; line-height: 1.55; margin: .7rem 0 0; }

/* ---------- títulos de sección ---------- */
.svv-h2 {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); padding-left: 1.05em;
  font-family: var(--svv-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .9; letter-spacing: .005em; color: var(--svv-text);
}
.svv-h2::before, .svv-h2::after {
  content: ""; position: absolute; top: .06em; bottom: .06em; width: .2em; transform: skewX(-14deg);
}
.svv-h2::before { left: 0; background: linear-gradient(180deg, var(--svv-gold), var(--svv-orange-hot)); }
.svv-h2::after { left: .32em; background: linear-gradient(180deg, var(--svv-violet-soft), var(--svv-violet-deep)); }
.svv-h2 small { font-family: var(--svv-body); font-style: normal; font-weight: 600; font-size: .9rem; letter-spacing: .02em; text-transform: none; color: var(--svv-text-3); }
.svv-h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--svv-text); }

/* filo diagonal que separa secciones (naranja a la izquierda, violeta a la derecha) */
.svv-main > section:not(.svv-hero) { position: relative; padding-top: clamp(64px, 9vw, 110px); }
.svv-main > section:not(.svv-hero)::before {
  content: ""; position: absolute; top: clamp(24px, 4vw, 44px); left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--svv-orange), rgba(255, 122, 26, 0) 42%, rgba(138, 61, 255, 0) 58%, var(--svv-violet));
  opacity: .75;
}

/* =====================================================================
   A · HERO · MAIN EVENT
   ===================================================================== */
.svv-hero {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  min-height: min(100svh, 900px); padding: 64px 0 40px; margin: 0 calc(50% - 50vw); overflow: hidden;
}
.svv-hero__stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.svv-hero__wedge { position: absolute; inset: 0; }
.svv-hero__wedge--geo {
  background:
    radial-gradient(60% 90% at 12% 56%, rgba(255, 106, 0, .46), rgba(255, 106, 0, .08) 52%, transparent 74%),
    linear-gradient(100deg, rgba(255, 90, 0, .13), transparent 58%);
  clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
}
.svv-hero__wedge--viewer {
  background:
    radial-gradient(60% 90% at 88% 44%, rgba(138, 61, 255, .52), rgba(138, 61, 255, .1) 52%, transparent 74%),
    linear-gradient(260deg, rgba(110, 40, 230, .16), transparent 58%);
  clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
}
/* líneas de velocidad inclinadas, como el trazo de la grieta */
.svv-hero__lines { position: absolute; inset: 0; opacity: .38; }
.svv-hero__lines--geo {
  background:
    repeating-linear-gradient(97.6deg, rgba(255, 190, 90, .5) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(97.6deg, rgba(255, 190, 90, .28) 0 1px, transparent 1px 17px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 34%, transparent 52%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 34%, transparent 52%);
}
.svv-hero__lines--viewer {
  background:
    repeating-linear-gradient(97.6deg, rgba(195, 160, 255, .5) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(97.6deg, rgba(195, 160, 255, .28) 0 1px, transparent 1px 17px);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .35) 34%, transparent 52%);
  mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .35) 34%, transparent 52%);
}
/* la grieta donde chocan los dos lados */
.svv-hero__seam { position: absolute; inset: 0; }
.svv-hero__seam::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 122, 26, .7), rgba(255, 220, 190, .5) 50%, rgba(138, 61, 255, .7));
  clip-path: polygon(calc(54% - 30px) 0, calc(54% + 30px) 0, calc(46% + 30px) 100%, calc(46% - 30px) 100%);
  filter: blur(18px); opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 66%); mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 66%);
}
.svv-hero__seam::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--svv-clash) 12%, var(--svv-clash) 40%, transparent 68%);
  clip-path: polygon(calc(54% - 2px) 0, calc(54% + 2px) 0, calc(46% + 2px) 100%, calc(46% - 2px) 100%);
}
.svv-hero__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(180deg, rgba(6, 3, 15, .92), transparent); }
.svv-hero__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    linear-gradient(to top, rgba(6, 3, 15, .96), transparent),
    repeating-linear-gradient(90deg, rgba(138, 61, 255, .14) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(255, 122, 26, .12) 0 1px, transparent 1px 46px);
  transform: perspective(500px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
}

.svv-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1360px; padding: 0 var(--svv-gutter); text-align: center; }

.svv-eyebrow {
  display: inline-block; margin: 0 0 clamp(.8rem, 2vw, 1.4rem); padding: .32em 1.3em .3em;
  font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.2rem); letter-spacing: .12em; text-transform: uppercase;
  color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold));
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* titular: STREAMER ⟋ VS ⟍ VIEWER */
.svv-title {
  margin: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  font-family: var(--svv-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  line-height: .82; letter-spacing: .005em; font-size: clamp(3.4rem, 10.4vw, 9.6rem);
}
.svv-title__geo, .svv-title__viewer { position: relative; display: block; flex: 0 0 auto; }
.svv-word__fill { position: relative; z-index: 1; display: block; padding: .04em .06em .02em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.svv-title__geo .svv-word__fill {
  background-image: linear-gradient(180deg, #fff1c8 0%, #ffc247 30%, #ff7a1a 66%, #e04800 100%);
  filter: drop-shadow(0 .035em 0 rgba(110, 28, 0, .6)) drop-shadow(0 0 .2em rgba(255, 106, 0, .5));
}
.svv-title__viewer .svv-word__fill {
  background-image: linear-gradient(180deg, #f6ecff 0%, #c9a8ff 32%, #9a57ff 66%, #5f1fe0 100%);
  filter: drop-shadow(0 .035em 0 rgba(30, 6, 100, .7)) drop-shadow(0 0 .2em rgba(138, 61, 255, .55));
}
/* eco en contorno, desplazado hacia afuera: da profundidad y sensación de velocidad */
.svv-word__echo { position: absolute; left: 0; top: 0; z-index: 0; padding: .04em .06em .02em; color: transparent; pointer-events: none; user-select: none; }
.svv-title__geo .svv-word__echo { transform: translate(-.055em, .05em); -webkit-text-stroke: 2px rgba(255, 150, 60, .7); }
.svv-title__viewer .svv-word__echo { transform: translate(.055em, .05em); -webkit-text-stroke: 2px rgba(190, 150, 255, .75); }

/* VS: trazo de pincel partido en dos tonos + letras blancas con separación cromática */
.svv-title__vs { position: relative; z-index: 3; flex: 0 0 auto; display: grid; place-items: center; width: 1.32em; height: 1.04em; margin: 0 .06em; }
.svv-vs__brush { position: absolute; left: -9%; top: -7%; width: 118%; height: 114%; overflow: visible; filter: drop-shadow(0 .05em .14em rgba(0, 0, 0, .65)); }
.svv-vs__txt { position: relative; z-index: 1; display: flex; align-items: center; font-size: .84em; line-height: .8; transform: translateY(.02em); }
.svv-vs__txt i { font-style: italic; color: #fff; }
.svv-vs__v { text-shadow: -.045em 0 0 var(--svv-orange-hot), 0 .05em .16em rgba(0, 0, 0, .55); }
.svv-vs__s { margin-left: -.04em; text-shadow: .045em 0 0 var(--svv-violet-deep), 0 .05em .16em rgba(0, 0, 0, .55); }

.svv-lede { text-wrap: balance; position: relative; z-index: 2; margin: clamp(1rem, 2.4vw, 1.8rem) auto 0; max-width: 62ch; font-family: var(--svv-display); font-style: italic; font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.15; color: var(--svv-text); }

/* barra inferior de transmisión: reloj + estado + datos */
.svv-console {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; width: min(920px, 100%); margin: clamp(1.4rem, 3vw, 2.4rem) auto 0; text-align: left;
  background: linear-gradient(90deg, rgba(255, 106, 0, .2), rgba(12, 7, 26, .88) 36%, rgba(12, 7, 26, .88) 64%, rgba(138, 61, 255, .22));
  border-top: 2px solid rgba(255, 243, 223, .45);
  clip-path: polygon(var(--svv-cut) 0, 100% 0, calc(100% - var(--svv-cut)) 100%, 0 100%);
}
.svv-clock { position: relative; display: grid; gap: 2px; align-content: center; min-width: clamp(190px, 24vw, 250px); padding: 16px 32px 20px; }
.svv-clock__label { font-size: .78rem; font-weight: 600; color: var(--svv-text-2); }
.svv-clock__time { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .95; font-variant-numeric: tabular-nums; color: var(--svv-text); }
.svv-clock__bar { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 6px; }
.svv-clock__track { stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.svv-clock__fill { stroke: var(--svv-orange); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s linear; }
.svv-clock[data-phase="live"] .svv-clock__fill { stroke: var(--svv-live); }
.svv-clock[data-phase="live"] .svv-clock__time { color: var(--svv-live); }
.svv-clock[data-phase="scheduled"] .svv-clock__fill { stroke: var(--svv-violet-soft); }
.svv-clock[data-phase="done"] .svv-clock__fill { stroke: var(--svv-text-3); stroke-dashoffset: 0; }

.svv-console__info { display: grid; align-content: center; gap: 12px; padding: 14px 34px 16px 20px; border-left: 1px solid var(--svv-line); }
.svv-status { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--svv-text-2); }
.svv-status__dot { width: 10px; height: 10px; background: var(--svv-text-3); transform: skewX(-14deg); }
.svv-status[data-state="live"] { color: var(--svv-live); }
.svv-status[data-state="live"] .svv-status__dot { background: var(--svv-live); box-shadow: 0 0 12px var(--svv-live); animation: svvBlink 1.4s ease-in-out infinite; }
.svv-status[data-state="scheduled"] { color: var(--svv-violet-soft); }
.svv-status[data-state="scheduled"] .svv-status__dot { background: var(--svv-violet-soft); }
.svv-status[data-state="finished"] { color: var(--svv-gold); }
.svv-status[data-state="finished"] .svv-status__dot { background: var(--svv-gold); }
.svv-status[data-state="error"] .svv-status__dot { background: var(--svv-danger); }
.svv-facts { margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 28px; }
.svv-facts div { display: grid; gap: 1px; }
.svv-facts dt { font-size: .74rem; font-weight: 600; color: var(--svv-text-3); }
.svv-facts dd { margin: 0; font-size: .98rem; font-weight: 500; color: var(--svv-text); }

.svv-scroll { display: inline-block; margin-top: clamp(1.2rem, 3vw, 2rem); font-size: .88rem; font-weight: 600; color: var(--svv-text-2); text-decoration: none; }
.svv-scroll:hover { color: var(--svv-gold); }
.svv-scroll span { display: inline-block; animation: svvBob 1.8s ease-in-out infinite; }

/* =====================================================================
   B · MARCADOR GLOBAL (el choque, a pantalla completa)
   ===================================================================== */
.svv-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); padding: 14px 22px;
  border-left: 5px solid var(--svv-gold); color: var(--svv-text); font-size: 1rem;
  background: linear-gradient(90deg, rgba(255, 194, 71, .16), rgba(255, 194, 71, .03));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.svv-banner[data-kind="error"] { border-left-color: var(--svv-danger); background: linear-gradient(90deg, rgba(255, 107, 122, .18), rgba(255, 107, 122, .03)); }
.svv-banner button { font: inherit; font-weight: 700; color: var(--svv-text); background: transparent; border: 1px solid var(--svv-text-3); padding: 7px 16px; cursor: pointer; }
.svv-banner button:hover { border-color: var(--svv-gold); color: var(--svv-gold); }

.svv-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 2vw, 32px); }
.svv-side { position: relative; min-width: 0; padding: clamp(14px, 2vw, 24px) clamp(16px, 2.6vw, 34px) clamp(14px, 2vw, 22px); }
.svv-side--geo { background: linear-gradient(100deg, rgba(255, 106, 0, .26), rgba(255, 106, 0, .04) 75%); border-left: 6px solid var(--svv-orange); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.svv-side--viewer { text-align: right; background: linear-gradient(260deg, rgba(138, 61, 255, .34), rgba(138, 61, 255, .05) 75%); border-right: 6px solid var(--svv-violet); clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%); }
.svv-side__tag {
  display: inline-block; margin: 0 0 .5rem; padding: .22em 1.1em .18em;
  font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1; text-transform: uppercase; letter-spacing: .03em;
}
.svv-side--geo .svv-side__tag { color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.svv-side--viewer .svv-side__tag { color: #fff; background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet)); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.svv-side__tag b { font-weight: 900; margin-left: .15em; }
.svv-side__num {
  margin: 0; padding: .02em .04em; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(5.2rem, 17vw, 14.5rem); line-height: .84;
  font-variant-numeric: tabular-nums; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svv-side--geo .svv-side__num { background-image: linear-gradient(180deg, #fff1c8 0%, #ffc247 28%, #ff7a1a 64%, #e04800 100%); filter: drop-shadow(0 0 .12em rgba(255, 106, 0, .55)); }
.svv-side--viewer .svv-side__num { background-image: linear-gradient(180deg, #f6ecff 0%, #c9a8ff 30%, #9a57ff 64%, #5f1fe0 100%); filter: drop-shadow(0 0 .12em rgba(138, 61, 255, .6)); }
.svv-side__num:not([data-n]) { opacity: .45; }
.svv-side__sub { margin: .55rem 0 0; font-size: 1rem; font-weight: 500; color: var(--svv-text-2); }
.svv-side__sub span { font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.4em; color: var(--svv-text); }

.svv-core { position: relative; align-self: stretch; display: grid; place-items: center; width: clamp(52px, 8vw, 110px); }
.svv-core::before {
  content: ""; position: absolute; left: 50%; top: -6%; bottom: -6%; width: 3px; transform: translateX(-50%) skewX(-14deg);
  background: linear-gradient(180deg, transparent, var(--svv-clash) 22%, var(--svv-clash) 78%, transparent); box-shadow: 0 0 18px 2px rgba(255, 243, 223, .35);
}
.svv-core span {
  position: relative; padding: .08em .3em .02em; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(1.7rem, 3.8vw, 3rem); line-height: 1; color: var(--svv-clash);
  background: var(--svv-bg-0); text-shadow: -.05em 0 0 var(--svv-orange-hot), .05em 0 0 var(--svv-violet-deep);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* barra de enfrentamiento: el marcador gris al centro es el choque */
.svv-bar { position: relative; height: clamp(22px, 3.2vw, 34px); margin-top: clamp(20px, 3.4vw, 40px); }
.svv-bar__viewer, .svv-bar__geo { position: absolute; top: 0; bottom: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.svv-bar__viewer { left: 0; right: 0; background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet) 60%, #a66bff); }
.svv-bar__geo { left: 0; width: 50%; z-index: 1; background: linear-gradient(90deg, var(--svv-orange-hot), var(--svv-orange) 50%, var(--svv-gold)); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.svv-bar__marker {
  position: absolute; z-index: 3; top: -42%; bottom: -42%; left: 50%; width: 5px; transform: translateX(-50%) skewX(-14deg);
  background: var(--svv-clash); box-shadow: 0 0 16px 4px rgba(255, 243, 223, .6); transition: left .9s cubic-bezier(.2, .8, .2, 1);
}
.svv-bar__ticks { position: absolute; z-index: 2; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.svv-bar__ticks i { width: 1px; background: rgba(6, 3, 15, .4); transform: skewX(-14deg); }
.svv-score[data-state="empty"] .svv-bar__geo, .svv-score[data-state="unavailable"] .svv-bar__geo, .svv-score[data-state="error"] .svv-bar__geo,
.svv-score[data-state="empty"] .svv-bar__viewer, .svv-score[data-state="unavailable"] .svv-bar__viewer, .svv-score[data-state="error"] .svv-bar__viewer { filter: saturate(.25) brightness(.6); }
.svv-score[data-state="empty"] .svv-bar__marker, .svv-score[data-state="unavailable"] .svv-bar__marker, .svv-score[data-state="error"] .svv-bar__marker { opacity: .55; box-shadow: none; }
.svv-bar__legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 0; font-size: .92rem; font-weight: 600; color: var(--svv-text-2); }
.svv-bar__legend span:nth-child(2) { font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.3rem; color: var(--svv-text); text-align: center; }
.svv-bar__legend span:first-child { color: var(--svv-gold); } .svv-bar__legend span:last-child { color: var(--svv-violet-soft); }

.svv-match { margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: 18px 22px 20px; border-left: 5px solid var(--svv-live); background: linear-gradient(90deg, rgba(39, 240, 154, .12), rgba(12, 7, 26, .7) 40%); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.svv-match__head { display: flex; align-items: center; gap: .7rem; margin: 0 0 12px; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; color: var(--svv-text); }
.svv-match__head b { font-weight: 800; color: var(--svv-live); }
.svv-live-dot { width: 10px; height: 10px; background: var(--svv-live); box-shadow: 0 0 12px var(--svv-live); transform: skewX(-14deg); animation: svvBlink 1.4s ease-in-out infinite; }
.svv-match__players { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svv-match__players li { display: inline-flex; align-items: baseline; gap: .7rem; padding: 7px 18px; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.25rem; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.svv-match__players li[data-side="geo"] { color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); }
.svv-match__players li[data-side="viewer"] { color: #fff; background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet)); }
.svv-match__players li { max-width: 100%; min-width: 0; }
.svv-match__players li span { min-width: 0; overflow-wrap: anywhere; }
.svv-match__players li em { font-family: var(--svv-body); font-style: normal; font-weight: 600; font-size: .85rem; opacity: .85; }
.svv-counts { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--svv-line); color: var(--svv-text-2); font-size: .95rem; font-weight: 500; }

/* =====================================================================
   C · REGISTRO Y REGLAMENTO
   ===================================================================== */
.svv-protocol__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.svv-format { list-style: none; margin: 0; padding: 0; }
.svv-format li { display: grid; grid-template-columns: minmax(5.6rem, 9.6rem) minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--svv-line); }
.svv-format li:first-child { padding-top: 0; }
.svv-format b { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2.3rem, 4.2vw, 3.2rem); line-height: .9; white-space: nowrap; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.svv-format li:nth-child(odd) b { background-image: linear-gradient(180deg, #fff1c8, #ffa22e 55%, #ff6a00); }
.svv-format li:nth-child(even) b { background-image: linear-gradient(180deg, #f6ecff, #b58aff 55%, #7a35f5); }
.svv-format span { font-size: 1rem; line-height: 1.5; color: var(--svv-text-2); }

.svv-rules { position: relative; padding: 24px 26px 26px; background: var(--svv-panel); border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--svv-orange), var(--svv-violet)) 1; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.svv-rules__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 12px; }
.svv-rules__head h3 { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.svv-rules__ver { font-size: .8rem; font-weight: 600; color: var(--svv-gold); }
.svv-rules__body { max-height: 340px; overflow: auto; padding-right: 10px; color: var(--svv-text-2); line-height: 1.65; font-size: .97rem; scrollbar-width: thin; scrollbar-color: var(--svv-violet) transparent; }
.svv-rules__body h4, .svv-rules__body h5, .svv-rules__body h6 { margin: 1.1em 0 .4em; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; color: var(--svv-text); }
.svv-rules__body p { margin: .6em 0; } .svv-rules__body ul, .svv-rules__body ol { margin: .5em 0 .5em 1.2em; padding: 0; } .svv-rules__body li { margin: .25em 0; }
.svv-rules__body strong { color: var(--svv-text); }
.svv-rules__hash { margin: 10px 0 0; font-size: .78rem; color: var(--svv-text-3); word-break: break-all; }
.svv-rules__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* botones: paralelogramo inclinado; deshabilitados = rayado y sin brillo */
.svv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: 0 2rem; border: 0; cursor: pointer;
  font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em;
  color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold));
  clip-path: polygon(var(--svv-cut) 0, 100% 0, calc(100% - var(--svv-cut)) 100%, 0 100%);
}
.svv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.svv-btn--reject, .svv-btn--ghost { color: var(--svv-text); background: linear-gradient(90deg, rgba(138, 61, 255, .55), rgba(95, 31, 224, .55)); }
.svv-btn--ghost:not(:disabled):hover, .svv-btn--reject:not(:disabled):hover { background: linear-gradient(90deg, var(--svv-violet), #a66bff); }
.svv-btn--join { background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet)); color: #fff; }
.svv-btn:disabled { cursor: not-allowed; color: var(--svv-text-3); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 6px, rgba(255, 255, 255, .02) 6px 12px); }
.svv-soon { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; color: var(--svv-text-3); font-size: .9rem; line-height: 1.45; }
.svv-lock { position: relative; flex: none; width: 14px; height: 11px; margin-top: 5px; border: 2px solid currentColor; }
.svv-lock::before { content: ""; position: absolute; left: 1px; bottom: 100%; width: 6px; height: 6px; border: 2px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.svv-lock--big { display: block; width: 30px; height: 23px; margin: 12px 0 8px; border-width: 3px; color: var(--svv-gold); }
.svv-lock--big::before { left: 3px; width: 14px; height: 12px; border-width: 3px; border-radius: 12px 12px 0 0; }

/* =====================================================================
   D · FILA · PRÓXIMO SQUAD
   ===================================================================== */
.svv-queue__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.svv-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svv-seat {
  position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 164px; padding: 14px 16px 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(138, 61, 255, .55), rgba(30, 12, 70, .9) 70%);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.svv-seat::before { content: ""; position: absolute; left: -14%; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, var(--svv-orange), var(--svv-gold)); transform: skewX(-14deg); left: 10px; }
.svv-seat__n { padding-left: 14px; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1rem; letter-spacing: .08em; color: var(--svv-gold); }
.svv-seat__name { padding-left: 14px; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; color: var(--svv-text); }
.svv-seat__pips { display: flex; gap: 6px; padding-left: 14px; }
.svv-seat__pips i { width: 24px; height: 8px; background: rgba(255, 255, 255, .2); transform: skewX(-14deg); }
.svv-seat__pips i.on { background: var(--svv-orange); box-shadow: 0 0 10px rgba(255, 122, 26, .7); }
.svv-seat[data-filled="false"] { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .045) 0 8px, rgba(255, 255, 255, .015) 8px 16px); }
.svv-seat[data-filled="false"]::before { background: rgba(255, 255, 255, .22); }
.svv-seat[data-filled="false"] .svv-seat__n { color: var(--svv-text-3); }
.svv-seat[data-filled="false"] .svv-seat__name { color: var(--svv-text-3); font-weight: 800; }

.svv-pill { display: inline-block; min-width: 2.2em; padding: .1em .6em; text-align: center; font-size: 1.05rem; color: #fff; background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.svv-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svv-ladder li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; background: linear-gradient(90deg, rgba(138, 61, 255, .3), rgba(12, 7, 26, .7)); border-left: 4px solid var(--svv-violet); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.svv-ladder__pos { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--svv-gold); }
.svv-ladder__name { font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.svv-ladder__tag { padding: .15em .8em; font-size: .8rem; font-weight: 700; color: #1a0d00; background: var(--svv-gold); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.svv-ladder li:first-child { padding-block: 16px; border-left-color: var(--svv-orange); background: linear-gradient(90deg, rgba(255, 122, 26, .38), rgba(12, 7, 26, .7)); }
.svv-ladder li:first-child .svv-ladder__name { font-size: 1.9rem; }
.svv-ladder li:first-child:not(:has(.svv-ladder__tag))::after { content: "Siguiente"; padding: .15em .8em; font-size: .8rem; font-weight: 700; color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
/* fila vacía: tres huecos fantasma, en lugar de una tabla vacía */
.svv-ladder:empty { height: 164px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 48px, transparent 48px 58px); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); border-left: 4px solid rgba(255, 255, 255, .18); }
.svv-join { margin-top: 20px; }

/* =====================================================================
   E · FICHA DEL COMBATIENTE (carta de jugador)
   ===================================================================== */
.svv-fighter__locked, .svv-fighter__sheet {
  position: relative; padding: clamp(20px, 3.4vw, 36px); border: 2px solid transparent; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  background: linear-gradient(160deg, #150b2e, #0b0618) padding-box, linear-gradient(135deg, var(--svv-orange), var(--svv-gold) 35%, var(--svv-violet) 80%) border-box;
}
.svv-fighter__locked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 48px); }
.svv-fighter__lock-title { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.svv-fighter__lockbody .svv-btn { margin-top: 1.2rem; }
.svv-fighter__ghost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svv-fighter__ghost i { height: 84px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 6px, rgba(255, 255, 255, .02) 6px 12px); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.svv-fighter__locked[hidden], .svv-fighter__sheet[hidden] { display: none; }
.svv-fighter__sheet { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.svv-id { display: grid; justify-items: start; gap: 8px; }
.svv-id__hex { display: grid; place-items: center; width: 112px; height: 124px; margin-bottom: 6px; background: linear-gradient(160deg, var(--svv-gold), var(--svv-orange-hot) 50%, var(--svv-violet) 120%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.svv-id__hex span { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 3.6rem; line-height: 1; color: #1a0d00; }
.svv-id__name { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: .92; text-transform: uppercase; overflow-wrap: anywhere; }
.svv-id__badge { margin: 4px 0 0; padding: .25em 1em; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; color: var(--svv-text-2); background: rgba(255, 255, 255, .1); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.svv-id__badge[data-kind="official"] { color: #03150c; background: var(--svv-live); }
.svv-id__badge[data-kind="pending"] { color: #1a0d00; background: var(--svv-gold); }
.svv-id__badge[data-kind="not_official"] { color: #fff; background: #b8344a; }
.svv-id__rules { margin: 0; font-size: .92rem; color: var(--svv-text-2); }
.svv-dials { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svv-dials div { padding: 12px 18px 10px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--svv-orange); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.svv-dials div:nth-child(even) { border-left-color: var(--svv-violet); }
.svv-dials dt { font-size: .82rem; font-weight: 600; color: var(--svv-text-2); }
.svv-dials dd { margin: 2px 0 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2.6rem, 5vw, 4rem); line-height: .95; font-variant-numeric: tabular-nums; }
.svv-past { grid-column: 1 / -1; }
.svv-past ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svv-past li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 10px 16px; font-size: .95rem; color: var(--svv-text-2); background: rgba(255, 255, 255, .04); border-left: 4px solid var(--svv-gold); }
.svv-past li b { font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; color: var(--svv-text); }

/* =====================================================================
   F · ARSENAL (comodines: explicación visible en cada tarjeta, sin compras)
   ===================================================================== */
.svv-arsenal__lede { margin: 0 0 1.6rem; max-width: 56ch; color: var(--svv-text-2); font-size: 1.02rem; line-height: 1.55; }
.svv-rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); align-items: stretch; }
.svv-pw {
  --pw-accent: var(--svv-violet-soft);
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px clamp(16px, 2vw, 24px) 22px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), linear-gradient(180deg, rgba(138, 61, 255, .22), rgba(12, 7, 26, .88) 70%);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  border-top: 3px solid var(--pw-accent);
}
.svv-pw--jump { --pw-accent: var(--svv-orange); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), linear-gradient(180deg, rgba(255, 122, 26, .24), rgba(12, 7, 26, .88) 70%); }
.svv-pw--rematch { --pw-accent: var(--svv-gold); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), linear-gradient(180deg, rgba(255, 194, 71, .16), rgba(12, 7, 26, .88) 70%); }
.svv-pw__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.svv-pw__icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--pw-accent); border: 2px solid currentColor; transform: skewX(-12deg); background: rgba(0, 0, 0, .25); }
.svv-pw__icon svg { display: block; transform: skewX(12deg); }
.svv-pw__soon { padding: .2em .75em; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--svv-text-3); border: 1px solid var(--svv-line); border-radius: 99px; background: rgba(255, 255, 255, .04); white-space: nowrap; }
.svv-pw__name { margin: 0 0 8px; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: .95; text-transform: uppercase; color: var(--svv-text); overflow-wrap: anywhere; }
.svv-pw__desc { flex: 1 1 auto; margin: 0 0 14px; font-size: 1rem; line-height: 1.5; color: var(--svv-text); }
.svv-pw__note { margin: 0 0 16px; padding: 8px 12px; font-size: .9rem; line-height: 1.4; color: var(--svv-text-2); background: rgba(255, 255, 255, .05); border-left: 3px solid var(--pw-accent); }
.svv-pw__price { margin: 0; padding-top: 12px; display: flex; align-items: baseline; gap: .4em; border-top: 1px solid var(--svv-line); font-size: .95rem; font-weight: 600; color: var(--svv-text-2); }
.svv-pw__price b { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--svv-gold); }

/* =====================================================================
   G · BATALLAS ANTERIORES
   ===================================================================== */
.svv-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svv-ed { position: relative; padding: 18px clamp(16px, 3vw, 28px) 18px; background: linear-gradient(90deg, rgba(255, 122, 26, .14), rgba(12, 7, 26, .85) 40%, rgba(12, 7, 26, .85) 60%, rgba(138, 61, 255, .16)); border-top: 3px solid rgba(255, 255, 255, .25); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.svv-ed:has(.svv-ed__out[data-kind="geo_win"]) { border-top-color: var(--svv-orange); }
.svv-ed:has(.svv-ed__out[data-kind="community_win"]) { border-top-color: var(--svv-violet); }
.svv-ed__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 8px; }
.svv-ed__title { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.svv-ed__date { font-size: .88rem; font-weight: 500; color: var(--svv-text-3); }
.svv-ed__result { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.svv-ed__pts { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2.8rem, 7vw, 5rem); line-height: .9; font-variant-numeric: tabular-nums; }
.svv-ed__pts small { display: block; margin-top: 2px; font-family: var(--svv-body); font-style: normal; font-weight: 600; font-size: .78rem; letter-spacing: .06em; color: var(--svv-text-3); }
.svv-ed__pts[data-side="geo"] { color: var(--svv-gold); text-align: left; }
.svv-ed__pts[data-side="viewer"] { color: var(--svv-violet-soft); text-align: right; }
.svv-ed__out { padding: .25em 1.2em; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; text-align: center; color: var(--svv-text); background: rgba(255, 255, 255, .12); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.svv-ed__out[data-kind="geo_win"] { color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); }
.svv-ed__out[data-kind="community_win"] { color: #fff; background: linear-gradient(90deg, var(--svv-violet-deep), var(--svv-violet)); }
.svv-ed__meta { margin: 10px 0 0; font-size: .92rem; color: var(--svv-text-2); }
.svv-ed__top { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; color: var(--svv-text-2); }
.svv-ed__top b { color: var(--svv-text); }
/* sin ediciones oficiales de V2: la lista queda oculta y se ve el marcador histórico */
.svv-timeline:empty { display: none; }
.svv-history .svv-muted:empty { display: none; }
/* marcador histórico fijo: Viewers 3 · Geo 1 */
.svv-legacy { margin-top: 18px; padding: 18px clamp(16px, 3vw, 28px) 16px; background: linear-gradient(90deg, rgba(138, 61, 255, .2), rgba(12, 7, 26, .88) 42%, rgba(12, 7, 26, .88) 58%, rgba(255, 122, 26, .16)); border-top: 3px solid var(--svv-violet); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.svv-legacy__title { margin: 0 0 10px; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--svv-text); }
.svv-legacy__title small { margin-left: .6em; font-family: var(--svv-body); font-style: normal; font-weight: 600; font-size: .85rem; letter-spacing: .02em; text-transform: none; color: var(--svv-text-3); }
.svv-legacy__score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.svv-legacy__side { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num tag" "num lbl"; align-items: center; column-gap: 14px; }
.svv-legacy__side[data-side="geo"] { justify-self: end; grid-template-columns: 1fr auto; grid-template-areas: "tag num" "lbl num"; text-align: right; }
.svv-legacy__num { grid-area: num; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: .9; font-variant-numeric: tabular-nums; }
.svv-legacy__side[data-side="viewer"] .svv-legacy__num { color: var(--svv-violet-soft); }
.svv-legacy__side[data-side="geo"] .svv-legacy__num { color: var(--svv-gold); }
.svv-legacy__tag { grid-area: tag; align-self: end; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--svv-text); }
.svv-legacy__lbl { grid-area: lbl; align-self: start; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--svv-text-3); }
.svv-legacy__vs { font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 1.3rem; color: var(--svv-text-3); }
.svv-legacy__meta { margin: 10px 0 0; font-size: .9rem; color: var(--svv-text-2); }
.svv-history .svv-btn { margin-top: 1.4rem; }

.svv-foot { margin-top: clamp(56px, 9vw, 104px); padding-top: 24px; border-top: 1px solid var(--svv-line); color: var(--svv-text-3); font-size: .88rem; line-height: 1.5; }

/* =====================================================================
   MOVIMIENTO: una sola secuencia de entrada en el hero
   ===================================================================== */
.svv-eyebrow { animation: svvDrop .5s .05s cubic-bezier(.2, .9, .2, 1) both; }
.svv-title__geo { animation: svvInL .7s .1s cubic-bezier(.2, .9, .2, 1) both; }
.svv-title__viewer { animation: svvInR .7s .1s cubic-bezier(.2, .9, .2, 1) both; }
.svv-title__vs { animation: svvSlam .55s .45s cubic-bezier(.2, 1.35, .3, 1) both; }
.svv-lede, .svv-console { animation: svvDrop .6s .8s cubic-bezier(.2, .9, .2, 1) both; }
.svv-hero__seam::after { animation: svvFlash 1.1s .45s ease-out both; }
@keyframes svvInL { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes svvInR { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes svvSlam { from { opacity: 0; transform: scale(2.1) rotate(-9deg); } to { opacity: 1; transform: none; } }
@keyframes svvDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes svvFlash { 0% { opacity: 0; } 30% { opacity: 1; filter: brightness(2.2); } 100% { opacity: 1; filter: none; } }
@keyframes svvBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes svvBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* el JS añade .svv-reveal a las secciones; ya no se usa fundido de entrada (se ve completa siempre) */
.svv-reveal { opacity: 1; transform: none; }

/* =====================================================================
   6A-8 · PARTICIPACIÓN DEL VIEWER (panel «Tu participación», llamado, lobby, oportunidades, notas)
   ===================================================================== */
.svv-seat__pips i.rsv { background: repeating-linear-gradient(-45deg, rgba(255, 122, 26, .55) 0 3px, rgba(255, 255, 255, .12) 3px 6px); }
.svv-seats-legend { font-size: .85rem; }
.svv-note[data-kind="error"] { color: var(--svv-danger); }
.svv-note[data-kind="ok"] { color: var(--svv-live); }
.svv-note[hidden] { display: none; }
.svv-btn[aria-busy="true"]:disabled { cursor: progress; }

.svv-me { position: relative; margin: 0 0 clamp(24px, 4vw, 40px); padding: clamp(18px, 3vw, 28px); border: 2px solid transparent;
  background: linear-gradient(160deg, #150b2e, #0b0618) padding-box, linear-gradient(135deg, var(--svv-orange), var(--svv-violet) 80%) border-box;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.svv-me__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.svv-me__head .svv-h3 { margin: 0; }
.svv-me__pill { padding: .25em 1em; font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--svv-text); background: rgba(255, 255, 255, .1); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.svv-me[data-kind="call"] .svv-me__pill, .svv-me[data-kind="lobby"] .svv-me__pill, .svv-me[data-kind="wait"] .svv-me__pill { color: #1a0d00; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); }
.svv-me[data-kind="live"] .svv-me__pill, .svv-me[data-kind="ok"] .svv-me__pill { color: #04150d; background: var(--svv-live); }
.svv-me[data-kind="warn"] .svv-me__pill, .svv-me[data-kind="error"] .svv-me__pill { color: #2a0309; background: var(--svv-danger); }
.svv-me[data-kind="soon"] .svv-me__pill, .svv-me[data-kind="done"] .svv-me__pill { color: var(--svv-gold); }
.svv-me__msg { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--svv-text-2); overflow-wrap: anywhere; }
.svv-me[data-state="empty"] { border-style: dashed; }

.svv-call { margin-top: 18px; padding: 16px 20px 18px; background: linear-gradient(90deg, rgba(255, 122, 26, .28), rgba(12, 7, 26, .7)); border-left: 5px solid var(--svv-orange);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.svv-call[hidden], .svv-lobby[hidden], .svv-opps[hidden], .svv-mine[hidden], .svv-callbar[hidden], .svv-leave-confirm[hidden] { display: none; }
.svv-call__title, .svv-lobby__title { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; color: var(--svv-gold); }
.svv-call__time, .svv-lobby__time { margin: 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(3.4rem, 9vw, 5.2rem); line-height: .95; font-variant-numeric: tabular-nums; }
.svv-call__bar { height: 8px; margin: 10px 0 4px; background: rgba(255, 255, 255, .14); transform: skewX(-14deg); overflow: hidden; }
.svv-call__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--svv-orange), var(--svv-gold)); transition: width .9s linear; }
.svv-call[data-urgent="true"] { border-left-color: var(--svv-danger); }
.svv-call[data-urgent="true"] .svv-call__time { color: var(--svv-danger); }
.svv-call .svv-btn { margin-top: 14px; }
.svv-lobby { margin-top: 18px; padding: 14px 20px 16px; background: linear-gradient(90deg, rgba(138, 61, 255, .3), rgba(12, 7, 26, .7)); border-left: 5px solid var(--svv-violet);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.svv-lobby__title { color: var(--svv-violet-soft); }

.svv-opps, .svv-mine { margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.svv-mine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svv-opps div, .svv-mine div { padding: 10px 14px 8px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--svv-orange); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.svv-opps div:nth-child(2) { border-left-color: var(--svv-gold); }
.svv-opps div:nth-child(3) { border-left-color: var(--svv-live); }
.svv-opps div:nth-child(4), .svv-mine div:nth-child(even) { border-left-color: var(--svv-violet); }
.svv-opps dt, .svv-mine dt { font-size: .8rem; font-weight: 600; color: var(--svv-text-2); }
.svv-opps dd, .svv-mine dd { margin: 2px 0 0; font-family: var(--svv-display); font-style: italic; font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); line-height: .95; font-variant-numeric: tabular-nums; }
.svv-opps__legend { font-size: .85rem; }
.svv-opps__legend b { color: var(--svv-text-2); }
.svv-me__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.svv-me__actions:empty { display: none; }
.svv-btn[hidden] { display: none; }
.svv-leave-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.svv-leave-confirm > span { flex: 1 1 100%; color: var(--svv-text-2); font-size: .95rem; }
.svv-me .svv-note { margin: 14px 0 0; font-size: .95rem; line-height: 1.45; }

/* barra fija del llamado: visible aunque estés mirando otra sección */
.svv-callbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--svv-gutter, 16px) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 4, 20, .96); border-top: 3px solid var(--svv-orange); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
.svv-callbar__txt { font-family: var(--svv-display); font-style: italic; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.svv-callbar__txt b { color: var(--svv-gold); font-variant-numeric: tabular-nums; }
.svv-callbar .svv-btn { min-height: 44px; padding: 0 1.4rem; font-size: 1.1rem; }

@media (max-width: 640px) {
  .svv-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svv-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svv-callbar { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
  .svv-callbar .svv-btn { width: 100%; }
  .svv-leave-confirm .svv-btn { flex: 1 1 100%; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .svv-protocol__grid, .svv-queue__grid, .svv-fighter__sheet, .svv-fighter__locked { grid-template-columns: minmax(0, 1fr); }
  .svv-console { grid-template-columns: minmax(0, 1fr); }
  .svv-console__info { border-left: 0; border-top: 1px solid var(--svv-line); padding: 14px 24px 18px; }
  .svv-clock { min-width: 0; }
}
@media (max-width: 640px) {
  .svv-hero { min-height: auto; padding: 36px 0 28px; }
  .svv-hero__wedge--geo { clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); }
  .svv-hero__wedge--viewer { clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); }
  .svv-hero__seam::before { clip-path: polygon(calc(60% - 22px) 0, calc(60% + 22px) 0, calc(40% + 22px) 100%, calc(40% - 22px) 100%); }
  .svv-hero__seam::after { clip-path: polygon(calc(60% - 2px) 0, calc(60% + 2px) 0, calc(40% + 2px) 100%, calc(40% - 2px) 100%); }
  /* composición en zigzag: STREAMER a la izquierda, VIEWER a la derecha, VS en medio */
  .svv-title { flex-direction: column; align-items: stretch; gap: .05em; font-size: clamp(3.6rem, 21vw, 6rem); }
  .svv-title__geo { align-self: flex-start; }
  .svv-title__viewer { align-self: flex-end; }
  .svv-title__vs { align-self: center; width: 1.45em; height: 1em; margin: .02em 0 .04em; font-size: .72em; }
  .svv-lede { font-size: clamp(1.15rem, 5.2vw, 1.45rem); text-wrap: balance; }
  .svv-console { text-align: center; }
  .svv-clock { padding: 12px 20px 16px; }
  .svv-clock__time { font-size: 2.6rem; }
  .svv-console__info { justify-items: center; gap: 8px; padding: 10px 20px 14px; }
  .svv-status { justify-self: center; font-size: 1.1rem; }
  .svv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 6px 16px; }
  .svv-facts div:last-child { grid-column: 1 / -1; }
  .svv-versus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svv-core { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 44px; margin-bottom: 4px; }
  .svv-core::before { top: 0; bottom: 0; }
  .svv-side { grid-row: 2; }
  .svv-side__num { font-size: clamp(4.4rem, 24vw, 7rem); }
  .svv-side__tag { font-size: 1.15rem; padding: .22em .8em .18em; white-space: nowrap; }
  .svv-side { padding: 12px 14px 12px; }
  .svv-hero__floor { display: none; }
  .svv-dials dd { font-size: 2.3rem; }
  .svv-format li { grid-template-columns: minmax(4.4rem, 6.2rem) minmax(0, 1fr); gap: 12px; }
  .svv-seats { grid-template-columns: minmax(0, 1fr); }
  .svv-seat { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 14px; }
  .svv-seat__pips { grid-column: 1 / -1; }
  .svv-rack { grid-template-columns: minmax(0, 1fr); }
  .svv-pw__icon { width: 46px; height: 46px; }
  .svv-legacy__score { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .svv-legacy__side, .svv-legacy__side[data-side="geo"] { grid-template-columns: auto; grid-template-areas: "num" "tag" "lbl"; justify-items: center; text-align: center; justify-self: center; row-gap: 2px; }
  .svv-legacy__tag { font-size: 1.25rem; }
  .svv-btn { width: 100%; }
  .svv-ed__result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svv-ed__out { grid-column: 1 / -1; grid-row: 1; }
  .svv-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svv-fighter__ghost i { height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  body.svv-page *, body.svv-page *::before, body.svv-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}