/* El widget de los directos (servidor 1.9.15, doc 31; la opacidad de la placa, 1.9.16): lo que OBS pinta encima
   del juego, y su vista previa en /streamers. Lo pinta public/js/widget.js.

   Los colores son los de la web (css/web.css): el oro y la tinta de siempre, la
   placa con el tostado de sus tarjetas (de --vellum-up a --vellum) y el borde
   dorado, y las barras como las de la clasificación (el color de cada clase,
   oscurecido y con volumen; el filo claro; la descansada en azul). Aquí van
   repetidos porque la página del widget no carga la hoja de la web: si cambian
   allí, cambian aquí (lo vigila una prueba, WidgetTest). El color de la placa
   lo puede cambiar cada streamer en el generador («fondo» en su dirección: lo
   pone widget.js en --lw-fondo-a y --lw-fondo-b), y también cuánto tapa
   («opacidad», en --lw-opacidad: de entrada, 93 %; al 100 %, nada a través).

   Las letras, las de la web, de public/fuentes (nada de fuera). Sin estilos en
   línea (CSP): lo que cambia (hasta dónde llega cada barra, el color de cada
   clase) lo pone widget.js en propiedades «--lw-…» (CSSOM).

   Lo que se mueve todo el rato (los destellos, los latidos, la rueda) solo anima
   transform, opacity y clip-path. Dos efectos de una sola vez llevan además
   color o sombra: el salto del nivel al subir y el fogonazo de quien adelanta.
   Con «Animaciones» apagado (.lw-quieto) o «reducir movimiento» en el sistema,
   todo quieto.

   Para el Chromium de OBS 28 (el 103) o más nuevo: sin color-mix(), sin
   anidar reglas y sin :has(). */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: block; src: url("../fuentes/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: block; src: url("../fuentes/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: block; src: url("../fuentes/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: block; src: url("../fuentes/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: block; src: url("../fuentes/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: block; src: url("../fuentes/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("../fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* la página que se pega en OBS: transparente, sin márgenes ni barras de desplazamiento (el recorte, solo en la
   ventana: el «Grande» se pinta una vez y media más grande que su caja y no puede cortarse en ella).
   «--lw-hoja» es la señal de que esta hoja ha llegado: sin ella, widget.js no pinta nada (saldría todo en crudo
   encima del juego) y vuelve a probar en medio minuto */
html.lw-doc { --lw-hoja: 1; height: 100%; margin: 0; padding: 0; overflow: hidden; background: transparent; }
html.lw-doc body { height: 100%; margin: 0; padding: 0; overflow: visible; background: transparent; }

/* ─── la caja ─────────────────────────────────────────────────────── */

.lua-widget {
    /* los de la web (site.css, web.css) */
    --lw-night: #0A0F15;
    --lw-vellum: #15120D;
    --lw-vellum-up: #1C1810;
    --lw-ink: #EAE2D0;
    --lw-ink-soft: #A89C85;
    --lw-ink-faint: #7E745C;
    --lw-gold: #E0B65C;
    --lw-gold-deep: #A97D2E;
    --lw-ember: #FF5A6E;
    --lw-hurt: #C7743F;
    /* los de las barras de la clasificación: el texto claro sobre lo lleno, la descansada, el segundo puesto */
    --lw-claro: #FFF6E0;
    --lw-descanso: #7DB2EC;
    --lw-plata: #C9CCD6;
    /* la placa, de arriba abajo (rojo, verde y azul, para darles su transparencia): de entrada, de --vellum-up a
       --vellum, como las tarjetas de la web; con «fondo» en la dirección, el color del streamer y uno algo más oscuro */
    --lw-fondo-a: 28, 24, 16;
    --lw-fondo-b: 21, 18, 13;
    /* cuánto tapa la placa lo que tiene debajo: de entrada deja ver un poco el juego; con «opacidad» en la dirección,
       lo que elija el streamer (de .5 a 1) */
    --lw-opacidad: .93;

    --lw-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --lw-sans: "Archivo", "Segoe UI", system-ui, sans-serif;
    --lw-mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
    --lw-sale: cubic-bezier(.2, .8, .2, 1);

    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 340px;
    height: var(--lw-alto, 242px);
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--lw-ink);
    font: 400 14px/1.2 var(--lw-sans);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: 0 0;
}
.lua-widget *, .lua-widget *::before, .lua-widget *::after { box-sizing: border-box; }
.lua-widget [hidden] { display: none !important; }
/* Grande: el compacto, una vez y media (para la escena de pausa) */
.lua-widget.lw-grande { transform: scale(1.5); }
/* …con un alto impar, la placa acaba a media fila de píxeles, y opaca del todo esa fila dejaría ver lo de debajo:
   entonces se estira a lo alto lo justo (unas milésimas, lo dice widget.js) para acabar en fila entera */
.lua-widget.lw-grande.lw-opaca { transform: scale(1.5, var(--lw-escala-y, 1.5)); }
/* hasta que llegan los primeros datos (y si dejan de llegar), nada: ni la placa… */
.lua-widget.lw-sin-datos { visibility: hidden; }
/* …salvo que la placa sea opaca del todo («opacidad=100»): está para tapar lo que tiene debajo (el chat del juego),
   así que se queda, vacía, con el escudo y sus esquinas, hasta que haya datos */
.lua-widget.lw-sin-datos.lw-opaca { visibility: visible; }
.lw-sin-datos.lw-opaca .lw-titulo, .lw-sin-datos.lw-opaca .lw-rueda, .lw-sin-datos.lw-opaca .lw-raya, .lw-sin-datos.lw-opaca .lw-cuerpo, .lw-sin-datos.lw-opaca .lw-ding { visibility: hidden; }

/* la placa: el tostado de las tarjetas de la web (o el color que elija el streamer), con el borde dorado y cuatro esquinas */
.lw-con-placa {
    background: linear-gradient(180deg, rgba(var(--lw-fondo-a), var(--lw-opacidad)) 0%, rgba(var(--lw-fondo-b), var(--lw-opacidad)) 100%);
    border-color: rgba(224, 182, 92, .34);
    box-shadow: inset 0 1px 0 rgba(255, 246, 224, .07), inset 0 0 0 1px rgba(0, 0, 0, .28);
}
.lw-esq { position: absolute; width: 9px; height: 9px; border: 0 solid rgba(224, 182, 92, .85); pointer-events: none; }
.lw-esq-a { left: 5px; top: 5px; border-left-width: 1.5px; border-top-width: 1.5px; }
.lw-esq-b { right: 5px; top: 5px; border-right-width: 1.5px; border-top-width: 1.5px; }
.lw-esq-c { left: 5px; bottom: 5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.lw-esq-d { right: 5px; bottom: 5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.lw-sin-placa .lw-esq, .lw-linea .lw-esq { display: none; }
/* sin placa: el fondo transparente y sombra en los textos, para que se lean encima del juego */
.lw-sin-placa { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7); }
/* con la placa más transparente que de entrada, lo mismo, más cuanto menos tapa (lo dice widget.js) */
.lw-tenue { text-shadow: 0 1px 2px rgba(0, 0, 0, var(--lw-sombra-a, 0)), 0 0 6px rgba(0, 0, 0, var(--lw-sombra-b, 0)); }

/* ─── la cabecera: el escudo, el título y la web ──────────────────── */

.lw-cab { display: flex; align-items: center; gap: 8px; flex: none; height: 24px; }
.lw-escudo { display: block; flex: none; width: 30px; height: 24px; object-fit: contain; }
.lw-sin-placa .lw-escudo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.lw-titulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2px;                 /* la cursiva se sale un pelo de su caja */
    font: italic 600 20px/24px var(--lw-serif);
    color: var(--lw-ink);
}
.lw-sitio { flex: none; margin-left: auto; font: 400 10.5px/1 var(--lw-mono); color: var(--lw-ink-soft); }

/* debajo: si rota, una barra de progreso por vista (la de ahora se llena en lo que dura); si es fijo, una raya */
.lw-rueda { display: flex; gap: 4px; flex: none; height: 3px; }
.lw-seg { position: relative; flex: 1 1 0; height: 100%; overflow: hidden; border-radius: 2px; background: rgba(224, 182, 92, .2); }
.lw-seg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--lw-gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.lw-seg.lw-hecho::after { transform: none; }
.lw-seg.lw-ahora::after { transform: none; animation: lw-avance var(--lw-cada, 10s) linear both; }
.lw-pausa .lw-seg.lw-ahora::after { animation-play-state: paused; }
.lw-raya { flex: none; height: 1px; margin: 1px 0; background: linear-gradient(90deg, rgba(224, 182, 92, .7) 0%, rgba(224, 182, 92, 0) 100%); }

.lw-cuerpo { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 2px; }
.lw-nada { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--lw-ink-soft); }

/* ─── las listas: una barra por personaje, como en la clasificación ─ */

.lw-filas { display: flex; flex-direction: column; }
.lw-fila { position: relative; }
/* quien sube de puesto se mueve hasta su sitio (y pasa por encima de los demás, con un fogonazo) */
.lw-fila.lw-mueve { z-index: 2; transition: transform .7s var(--lw-sale); }
.lw-fila.lw-adelanta { z-index: 3; }
.lw-fila.lw-adelanta .lw-pista { animation: lw-adelanta 1.6s ease-out; }
/* el streamer, si no está entre los primeros: debajo, tras tres puntos, con su puesto de verdad */
.lw-puntos { display: flex; align-items: center; justify-content: center; gap: 5px; height: 8px; }
.lw-puntos i { width: 3px; height: 3px; border-radius: 50%; background: rgba(224, 182, 92, .6); }
.lw-fila-in { display: flex; align-items: center; gap: 8px; height: 28px; transform-origin: 50% 0; }

.lw-puesto {
    flex: none;
    width: 20px;
    text-align: right;
    font: 700 18px/1 var(--lw-serif);
    font-variant-numeric: lining-nums;
    color: var(--lw-ink-soft);
}
.lw-podio-1 .lw-puesto { color: var(--lw-gold); text-shadow: 0 0 10px rgba(224, 182, 92, .45); }
.lw-podio-2 .lw-puesto { color: var(--lw-plata); }
.lw-podio-3 .lw-puesto { color: var(--lw-hurt); }
.lw-yo .lw-puesto { color: var(--lw-gold); }

.lw-barra { position: relative; flex: 1 1 auto; min-width: 0; height: 24px; }
/* la pista: lo vacío, con un punto del color de la clase */
.lw-pista {
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    height: 19px;
    overflow: hidden;
    border: 1px solid rgba(255, 246, 224, .06);
    border-radius: 5px;
    background: var(--lw-c-fondo, rgba(11, 15, 21, .82));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.lw-yo .lw-pista { border-color: rgba(224, 182, 92, .9); box-shadow: 0 0 10px rgba(224, 182, 92, .35), inset 0 1px 2px rgba(0, 0, 0, .5); }
/* el nombre, en dos tonos: del color de su clase sobre lo vacío y claro sobre lo lleno (una copia, recortada) */
.lw-nombre {
    position: absolute;
    left: 7px;
    right: 5px;
    top: 0;
    height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: var(--lw-c-nombre, var(--lw-ink));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.lw-apellido { font-weight: 500; opacity: .82; }
/* lo lleno: del color de la clase, oscurecido y con volumen; se recorta hasta donde llega (--lw-p, de 0 a 1) */
.lw-lleno {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 48%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .28) 100%),
        var(--lw-c-lleno, #5E4E2C);
    clip-path: inset(0 calc((1 - var(--lw-p, 0)) * 100%) 0 0 round 0 4px 4px 0);
    transition: clip-path .9s var(--lw-sale);
}
.lw-lleno .lw-nombre { color: var(--lw-claro); text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
/* quien juega ahora brilla: un destello recorre lo lleno cada 6 s… */
.lw-brillo {
    position: absolute;
    left: 0;
    top: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 246, 224, 0) 0%, rgba(255, 246, 224, .34) 50%, rgba(255, 246, 224, 0) 100%);
    transform: translateX(-130%);
    animation: lw-brillo 6s ease-in-out infinite;
    animation-delay: var(--lw-rb, 1400ms);
    pointer-events: none;
}
/* …y una luz late al final de su barra. El filo claro lo llevan todas */
.lw-filo-c {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    transform: translateX(calc(var(--lw-p, 0) * 100%));
    transition: transform .9s var(--lw-sale);
    pointer-events: none;
}
.lw-filo {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 2px;
    height: 23px;
    border-radius: 1px;
    background: var(--lw-c-filo, var(--lw-claro));
    box-shadow: 0 0 8px var(--lw-c-filo, var(--lw-claro)), 0 0 2px #FFFFFF;
}
.lw-halo {
    position: absolute;
    left: -14px;
    top: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lw-c-luz, rgba(255, 246, 224, .8)) 0%, rgba(0, 0, 0, 0) 68%);
    opacity: .7;
    animation: lw-latido 2.4s ease-in-out infinite;
}
.lw-cero .lw-filo-c { visibility: hidden; }
/* la experiencia descansada: una franja de 2 px debajo, desde donde llega hasta donde llegaría */
.lw-descansada {
    position: absolute;
    left: 0;
    top: 21px;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--lw-descanso);
    box-shadow: 0 0 4px rgba(125, 178, 236, .8);
    clip-path: inset(-4px calc((1 - var(--lw-p, 0) - var(--lw-d, 0)) * 100%) -4px calc(var(--lw-p, 0) * 100%));
    transition: clip-path .9s var(--lw-sale);
}

/* a la derecha: el punto rojo de quien juega, lo grande (el nivel, los puntos, el oro) y lo pequeño */
.lw-valor { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex: none; width: 72px; }
.lw-punto { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lw-ember); box-shadow: 0 0 7px rgba(255, 90, 110, .7); }
.lw-punto::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--lw-ember);
    animation: lw-onda 1.8s ease-out infinite;
}
.lw-cifras { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.lw-grande-cifra { font: 700 21px/1 var(--lw-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--lw-ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.lw-grande-cifra.lw-larga { font-size: 17px; }      /* un oro de seis cifras («214.748»): que no pise la barra */
.lw-pequeno { font: 400 10px/1 var(--lw-mono); color: var(--lw-ink-soft); }

/* al cambiar de vista, las filas entran girando una tras otra, como un panel de salidas de aeropuerto;
   la barra se descubre de izquierda a derecha y el filo aparece al final */
.lw-entra .lw-fila-in, .lw-entra.lw-hito { animation: lw-voltear 560ms cubic-bezier(.2, .75, .25, 1) both; animation-delay: var(--lw-r, 0ms); }
.lw-entra .lw-lleno { animation: lw-revelar 900ms cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--lw-r, 0ms) + 160ms); }
.lw-entra .lw-filo-c, .lw-entra .lw-descansada { animation: lw-filo 1100ms ease both; animation-delay: calc(var(--lw-r, 0ms) + 160ms); }
.lw-aparece { animation: lw-titulo 420ms ease both; animation-delay: var(--lw-r, 0ms); }
.lw-aparece-despacio { animation: lw-titulo 520ms ease both; }
.lw-salta { animation: lw-pop 700ms ease both; }

/* ─── lo último: hasta 4 líneas, cada una con su icono en un círculo ─ */

.lw-hitos { display: flex; flex-direction: column; gap: 5px; }
.lw-hito {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 37px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 246, 224, .05);
    border-radius: 8px;
    background: rgba(255, 246, 224, .035);
    transform-origin: 50% 0;
}
.lw-sin-placa .lw-hito { background: rgba(10, 15, 21, .55); }
/* lo del streamer, con un tinte dorado */
.lw-hito.lw-mio { border-color: rgba(224, 182, 92, .38); background: rgba(224, 182, 92, .10); }
.lw-sin-placa .lw-hito.lw-mio { background: rgba(60, 46, 18, .62); }
/* la más nueva, con un destello */
.lw-hito-brillo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(224, 182, 92, 0) 0%, rgba(224, 182, 92, .22) 50%, rgba(224, 182, 92, 0) 100%);
    transform: translateX(-130%);
    animation: lw-brillo 5s ease-in-out 900ms infinite;
    pointer-events: none;
}
.lw-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--lw-ink-soft);
}
.lw-icono svg { display: block; width: 12px; height: 12px; }
.lw-mio .lw-icono { color: var(--lw-gold); }
.lw-icono.lw-primero { color: #F2D38C; }
.lw-hito-texto {
    position: relative;
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--lw-ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.lw-hito-texto b { font-weight: 600; color: var(--lw-claro); }
.lw-hace { position: relative; flex: none; font: 400 10px/1 var(--lw-mono); color: var(--lw-ink-soft); white-space: nowrap; }

/* ─── mi personaje ────────────────────────────────────────────────── */

.lw-ficha { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.lw-ficha-cab { display: flex; align-items: center; gap: 12px; }
/* el nivel, en un círculo con el borde dorado y el tinte de su clase */
.lw-circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 60px;
    height: 60px;
    border: 2px solid var(--lw-gold);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, var(--lw-c-tinte, rgba(224, 182, 92, .4)) 0%, var(--lw-night) 74%);
    box-shadow: 0 0 0 3px rgba(224, 182, 92, .14), inset 0 0 14px rgba(0, 0, 0, .65);
}
.lw-circulo span { font: 700 30px/1 var(--lw-serif); font-variant-numeric: lining-nums; color: var(--lw-claro); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.lw-ficha-datos { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.lw-ficha-linea { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lw-ficha-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 25px/1.05 var(--lw-serif); color: var(--lw-claro); }
.lw-ficha-nombre .lw-apellido { font-weight: 600; }
.lw-ficha-clase { font-size: 13px; font-weight: 600; color: var(--lw-c-nombre, var(--lw-ink)); }
.lw-ficha-puesto { font: 400 11px/1.2 var(--lw-mono); color: var(--lw-ink-soft); }
.lw-ficha-xp { display: flex; flex-direction: column; gap: 4px; }
/* su barra de experiencia: lo mismo que las de las listas, más baja */
.lw-xp { position: relative; height: 16px; }
.lw-xp .lw-pista { top: 2px; height: 11px; border-radius: 6px; border-color: transparent; background: rgba(255, 246, 224, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.lw-sin-placa .lw-xp .lw-pista { background: rgba(10, 15, 21, .7); }
.lw-xp .lw-lleno { clip-path: inset(0 calc((1 - var(--lw-p, 0)) * 100%) 0 0 round 0 5px 5px 0); }
.lw-xp .lw-filo-c { height: 16px; }
.lw-xp .lw-filo { top: 0; height: 15px; }
.lw-xp .lw-halo { top: -6px; }
.lw-xp .lw-descansada { top: 14px; }
.lw-ficha-pie { display: flex; justify-content: space-between; gap: 8px; font: 400 10.5px/1.2 var(--lw-mono); color: var(--lw-ink-soft); }
/* sus dos mejores profesiones, en barritas doradas */
.lw-oficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lw-oficio { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 246, 224, .04); }
.lw-sin-placa .lw-oficio { background: rgba(10, 15, 21, .55); }
.lw-oficio-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.lw-oficio-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--lw-ink); opacity: .86; }
.lw-oficio-puntos { font: 700 16px/1 var(--lw-serif); font-variant-numeric: lining-nums; color: var(--lw-ink); }
.lw-oficio-barra { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 246, 224, .07); }
.lw-oficio-barra i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--lw-gold-deep) 0%, var(--lw-gold) 100%);
    clip-path: inset(0 calc((1 - var(--lw-p, 0)) * 100%) 0 0);
    transition: clip-path .9s var(--lw-sale);
}

/* ─── una línea: en forma de píldora ──────────────────────────────── */

.lua-widget.lw-linea { flex-direction: row; align-items: center; gap: 10px; width: 440px; height: 56px; padding: 0 16px; border-radius: 28px; }
.lw-linea .lw-escudo { width: 30px; height: 24px; }
.lw-linea .lw-cuerpo { flex: 1 1 auto; align-self: stretch; min-width: 0; margin: 0; }
.lw-linea .lw-rueda { position: absolute; left: 24px; right: 24px; bottom: 5px; height: 2px; }
.lw-linea .lw-seg { border-radius: 1px; }
.lw-linea .lw-nada { justify-content: flex-start; padding: 0; text-align: left; }
.lw-renglon { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* el personaje: nombre, puesto, barrita y nivel */
.lw-renglon .lw-ficha-nombre { flex: 0 1 auto; font-size: 22px; line-height: 1; }
.lw-chapa { flex: none; padding: 4px 7px; border: 1px solid rgba(224, 182, 92, .5); border-radius: 10px; font: 400 11px/1 var(--lw-mono); color: var(--lw-gold); }
.lw-renglon .lw-xp { flex: 1 1 40px; min-width: 40px; }
.lw-renglon .lw-xp .lw-pista { top: 3px; height: 9px; border-radius: 5px; }
.lw-renglon .lw-xp .lw-filo { top: 1px; height: 13px; }
.lw-renglon .lw-xp .lw-halo { left: -12px; top: -4px; width: 24px; height: 24px; }
.lw-renglon .lw-xp .lw-descansada { top: 13px; }
.lw-nivel-linea { display: flex; align-items: baseline; gap: 4px; flex: none; }
.lw-nivel-linea b { font: 700 26px/1 var(--lw-serif); font-variant-numeric: lining-nums; color: var(--lw-claro); }
.lw-nivel-linea span { font: 400 10.5px/1 var(--lw-mono); color: var(--lw-ink-soft); }
/* un top en línea: «1.º Robledo 27 · 2.º Almena 26» */
.lw-renglon .lw-titulo { flex: none; font-size: 19px; }
/* (widget.js quita los puestos que no caben: antes el 2.º que el 1.º, y nunca el del streamer; si ni uno solo cabe,
   .lw-rebosa: se difumina por el final) */
.lw-puestos { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.lw-puestos.lw-rebosa {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0) 100%);
}
.lw-puestos > span { display: flex; align-items: baseline; gap: 5px; flex: none; }
.lw-puestos .lw-n { font: 700 15px/1 var(--lw-serif); font-variant-numeric: lining-nums; color: var(--lw-ink-soft); }
.lw-puestos .lw-podio-1 .lw-n { color: var(--lw-gold); }
.lw-puestos .lw-podio-2 .lw-n { color: var(--lw-plata); }
.lw-puestos .lw-podio-3 .lw-n { color: var(--lw-hurt); }
.lw-puestos .lw-yo .lw-n { color: var(--lw-gold); }
.lw-puestos .lw-quien { font-size: 13.5px; font-weight: 600; color: var(--lw-c-nombre, var(--lw-ink)); }
.lw-puestos .lw-v { font: 700 16px/1 var(--lw-serif); font-variant-numeric: lining-nums; color: var(--lw-ink); }
/* lo último, en una línea */
.lw-renglon .lw-hito-texto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.lw-renglon .lw-hace { font-size: 10.5px; }

/* ─── la subida de nivel del streamer ─────────────────────────────── */

/* 3,6 s: un fondo de luz dorada, dos capas de rayos que giran en sentidos contrarios, las chispas, y el nombre y
   «Nivel 24» en grande */
.lw-ding {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
    /* la luz dorada, sobre la placa casi opaca: lo de debajo no se ve a través y el nivel se lee */
    background:
        radial-gradient(circle at 50% 56%, rgba(242, 211, 140, .5) 0%, rgba(169, 125, 46, .36) 34%, rgba(169, 125, 46, 0) 76%),
        linear-gradient(180deg, rgba(var(--lw-fondo-a), .95) 0%, rgba(var(--lw-fondo-b), .97) 100%);
    text-shadow: none;
    animation: lw-ding-fondo 3600ms ease both;
}
.lw-rayos {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    animation: lw-ding-abrir 3600ms var(--lw-sale) both;
}
.lw-rayos i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; }
.lw-rayos i:first-child {
    background: repeating-conic-gradient(from 0deg, rgba(255, 243, 209, .30) 0deg 6deg, rgba(255, 243, 209, 0) 6deg 20deg);
    -webkit-mask-image: radial-gradient(circle, #000 16%, rgba(0, 0, 0, 0) 62%);
    mask-image: radial-gradient(circle, #000 16%, rgba(0, 0, 0, 0) 62%);
    animation: lw-giro 6s linear infinite;
}
.lw-rayos i:last-child {
    background: repeating-conic-gradient(from 9deg, rgba(255, 250, 235, .20) 0deg 2deg, rgba(255, 250, 235, 0) 2deg 12deg);
    -webkit-mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 54%);
    mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 54%);
    animation: lw-giro-inverso 9s linear infinite;
}
.lw-chispas { position: absolute; left: 50%; top: 56%; width: 0; height: 0; }
.lw-chispas i { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lw-chispas i::after {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFF3D1;
    box-shadow: 0 0 8px #F2D38C;
    opacity: 0;
    animation: lw-chispa 1500ms cubic-bezier(.15, .7, .3, 1) both;
    animation-delay: var(--lw-r, 100ms);
}
.lw-ding-texto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: lw-ding-texto 3600ms var(--lw-sale) both; }
.lw-ding-nombre { font-size: 14px; font-weight: 600; color: var(--lw-claro); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* el dorado de los títulos de la clasificación */
.lw-ding-nivel {
    padding: 0 4px 3px;
    font: 700 48px/1 var(--lw-serif);
    font-variant-numeric: lining-nums;
    white-space: nowrap;
    color: #F2D38C;
    background: linear-gradient(180deg, #FFF3D1 0%, #F2D38C 42%, #C9973F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(60, 40, 8, .9)) drop-shadow(0 0 16px rgba(242, 211, 140, .7));
}
/* en una línea, una versión corta, sin rayos */
.lw-linea .lw-ding {
    gap: 12px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(242, 211, 140, .55) 0%, rgba(169, 125, 46, .42) 40%, rgba(169, 125, 46, 0) 80%),
        linear-gradient(180deg, rgba(var(--lw-fondo-a), .95) 0%, rgba(var(--lw-fondo-b), .97) 100%);
}
.lw-linea .lw-ding-texto { flex-direction: row; align-items: baseline; gap: 12px; }
.lw-linea .lw-ding-nombre { font-size: 13px; }
.lw-linea .lw-ding-nivel { padding-bottom: 2px; font-size: 30px; filter: drop-shadow(0 2px 0 rgba(60, 40, 8, .9)) drop-shadow(0 0 12px rgba(242, 211, 140, .7)); }

/* ─── los fotogramas ──────────────────────────────────────────────── */

@keyframes lw-voltear { 0% { opacity: 0; transform: perspective(520px) rotateX(-86deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: perspective(520px) rotateX(0deg); } }
@keyframes lw-revelar { from { clip-path: inset(0 100% 0 0 round 0 4px 4px 0); } }
@keyframes lw-filo { 0%, 72% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lw-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lw-titulo { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #F2D38C; } 100% { transform: scale(1); } }
@keyframes lw-brillo { 0% { transform: translateX(-130%); } 24% { transform: translateX(260%); } 100% { transform: translateX(260%); } }
@keyframes lw-latido { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: .95; transform: scale(1.15); } }
@keyframes lw-onda { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes lw-adelanta { 0% { box-shadow: inset 0 0 0 1px var(--lw-c-filo, var(--lw-claro)), 0 0 16px var(--lw-c-luz, rgba(255, 246, 224, .6)); } 100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); } }
@keyframes lw-ding-fondo { 0% { opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lw-ding-abrir { 0% { opacity: 0; transform: scale(.55); } 14% { opacity: 1; transform: scale(1.06); } 26% { transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes lw-giro { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lw-giro-inverso { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes lw-ding-texto { 0% { opacity: 0; transform: scale(.55); } 16% { opacity: 1; transform: scale(1.08); } 26% { transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes lw-chispa { 0% { opacity: 0; transform: translateX(0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px) scale(.3); } }

/* ─── todo quieto ─────────────────────────────────────────────────── */

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