/* ==========================================================================
   Ranking · Broadcast HUD
   Componente compartido: /ranking lo muestra a pantalla completa en OBS y
   /config lo monta dentro de su caja de vista previa.

   Los colores y el tamano salen de variables que fija ranking.js desde la URL:
   aqui manda lo que elija el usuario. Los valores de abajo son solo el punto
   de partida, sacados del PNG del logo.

   Todo lo que se ve va en `em` a proposito: cambiando el font-size del panel
   (--rk-s) escala el conjunto entero sin deformar nada.
   ========================================================================== */

:root {
    --bone:       #FEF3D9;
    --dim:        #A49E8F;
    --faint:      #615D54;
    --line:       #201E19;
    --line-2:     #302E27;
    --surf:       #0C0B08;
    --surf-2:     #14130F;
    --bg:         #060504;
    --red:        #F32146;
    --red-hi:     #FF5B67;
    --red-mid:    #B1002A;
    --crimson:    #7C021C;
    --crimson-lo: #4E0009;
    --amber:      #F2A618;

    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Contenedor
   -------------------------------------------------------------------------- */

.rk {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;

    --rk-color:  #FEF3D9;
    --rk-dim:    #A49E8F;
    --rk-accent: #F32146;
    --rk-bg:     rgba(6, 5, 4, 0.9);
    --rk-line:   rgba(48, 46, 39, 1);
    --rk-s:      1;
}

.rk[data-font="mono"] { font-family: 'JetBrains Mono', Consolas, monospace; }

/* «Ocultar si nadie ha puntuado»: fuera del directo, sin dejar hueco. */
.rk.is-gone .rk-panel { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.rk-panel {
    width: 100%;
    font-size: calc(14px * var(--rk-s));
    background: var(--rk-bg);
    border: 1px solid var(--rk-line);
    border-radius: 0.7em;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.rk-head {
    display: flex;
    align-items: center;
    gap: 0.79em;
    padding: 0.86em 1em;
    border-bottom: 1px solid var(--rk-line);
}
.rk.no-head .rk-head { display: none; }

.rk-eyes { position: relative; width: 1.86em; height: 1.86em; flex: none; }
.rk.no-logo .rk-eyes { display: none; }

.rk-eyes img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    image-rendering: pixelated;
}
.rk-eyes .shut { opacity: 0; }

/* El gato parpadea, igual que en el overlay. */
.rk-eyes .open { animation: rkEyeOpen 3.4s steps(1) infinite; }
.rk-eyes .shut { animation: rkEyeShut 3.4s steps(1) infinite; }
@keyframes rkEyeOpen { 0%, 92% { opacity: 1; } 93%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes rkEyeShut { 0%, 92% { opacity: 0; } 93%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }

.rk-titles { display: flex; flex-direction: column; gap: 0.21em; min-width: 0; flex: 1; }

.rk-titles .kicker {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.64em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rk-accent);
}

.rk-titles .title {
    font-size: 1.07em;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--rk-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-total { display: flex; flex-direction: column; align-items: flex-end; gap: 0.14em; flex: none; }
.rk-total b {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 1.07em;
    font-weight: 700;
    line-height: 1;
    color: var(--rk-color);
}
.rk-total small {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.61em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rk-dim);
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Filas
   -------------------------------------------------------------------------- */

.rk-list { list-style: none; margin: 0; padding: 0.43em; display: block; }

.rk-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.79em;
    padding: 0.64em 0.79em;
    border-radius: 0.43em;
    overflow: hidden;
    /* El FLIP de ranking.js reemplaza esta transicion mientras coloca la fila. */
    transition: transform 520ms var(--ease-out);
}

/* La barra dice la distancia entre puestos sin escribir porcentajes. */
.rk-row .fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    display: block;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rk-accent) 30%, transparent),
        color-mix(in srgb, var(--rk-accent) 3%, transparent));
    border-left: 2px solid color-mix(in srgb, var(--rk-accent) 65%, transparent);
    transition: width 620ms var(--ease-out);
}

.rk-row .pos,
.rk-row .who,
.rk-row .n { position: relative; z-index: 2; }

.rk-row .pos {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.71em;
    color: var(--rk-dim);
    opacity: 0.8;
    flex: none;
    width: 1.5em;
}

.rk-row .who {
    flex: 1;
    min-width: 0;
    font-size: 0.96em;
    font-weight: 600;
    color: var(--rk-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-row .n {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.89em;
    font-weight: 500;
    color: var(--rk-color);
    flex: none;
}

/* El primer puesto es el unico que se pinta con el color de acento: si todo
   destaca, nada destaca. */
.rk-row.is-first .fill {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rk-accent) 42%, transparent),
        color-mix(in srgb, var(--rk-accent) 4%, transparent));
    border-left-color: var(--rk-accent);
}
.rk-row.is-first .pos { color: var(--rk-accent); opacity: 1; }
.rk-row.is-first .who { color: var(--rk-color); font-weight: 800; }
.rk-row.is-first .n   { color: var(--rk-accent); font-weight: 700; }

/* Entra alguien nuevo al top. */
.rk-row.is-new { animation: rkRowIn 560ms var(--ease-out) both; }
@keyframes rkRowIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}

/* Suma un punto: solo salta el numero, la fila se queda quieta. */
.rk-row.did-bump .n { animation: rkBump 380ms var(--ease-back); }
@keyframes rkBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.32); color: var(--rk-accent); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Sin datos
   -------------------------------------------------------------------------- */

.rk-empty {
    margin: 0.14em 0.86em 1em;
    padding: 1.14em 0.86em;
    border: 1px dashed var(--rk-line);
    border-radius: 0.43em;
    text-align: center;
    font-size: 0.82em;
    color: var(--rk-dim);
    opacity: 0.8;
}
.rk-empty[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Tarjeta de estado (F2 en OBS) — solo lectura, solo la ves tu
   -------------------------------------------------------------------------- */

.rk-status {
    position: fixed;
    left: 14px;
    top: 14px;
    z-index: 999;
    background: rgba(6, 5, 4, 0.96);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 14px 16px;
    min-width: 232px;
    font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    display: none;
}
.rk-status.is-on { display: block; }

.rk-status .row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--dim); padding: 3px 0; }
.rk-status .row b { color: var(--bone); font-weight: 600; }
.rk-status .row .mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; }
.rk-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.rk-status .dot[data-state="ok"]         { background: var(--red); animation: rkPulse 2.2s ease-out infinite; }
.rk-status .dot[data-state="connecting"] { background: var(--amber); }
.rk-status .dot[data-state="error"]      { background: var(--amber); }
.rk-status hr { border: none; border-top: 1px solid var(--line); margin: 9px 0; }
.rk-status .hint { font-size: 10px; color: var(--faint); }

@keyframes rkPulse {
    0%   { box-shadow: 0 0 0 0 rgba(243, 33, 70, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(243, 33, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 33, 70, 0); }
}