/*
Theme Name: Generatepress child
Description: A child theme for my website.
Template: generatepress
Version: 1.0.0
*/

/*
 * TIPOGRAFÍA AUTOALOJADA
 *
 * Roboto Condensed servida desde el propio dominio (carpeta fonts/), no
 * desde Google. Dos motivos, y el de velocidad no es el menor:
 *
 *   - Privacidad: pedirla a Google enviaba la IP de cada visitante a un
 *     tercero en cada carga, sin base legal que lo sostenga. Ver la
 *     política de privacidad, sección 4.
 *   - Velocidad: la ruta de Google es en serie. El navegador pedía el CSS a
 *     fonts.googleapis.com y SOLO ENTONCES descubría la URL del .woff2, que
 *     estaba en OTRO dominio (fonts.gstatic.com). Dos negociaciones TLS
 *     encadenadas antes de tener la letra. Aquí el archivo se descubre al
 *     leer esta misma hoja, por una conexión que ya está abierta.
 *
 * ES UNA FUENTE VARIABLE: un archivo por alfabeto cubre TODOS los grosores
 * (de ahí `font-weight: 300 900`), así que los tres que usa el tema (300,
 * 700, 900) no cuestan tres descargas. Es exactamente lo que servía Google.
 *
 * Los unicode-range son los suyos, copiados tal cual: el navegador descarga
 * solo el alfabeto que la página necesita. Una página normal se lleva latin;
 * latin-ext entra sola cuando aparece un nombre con diacríticos raros, y los
 * demás alfabetos solo si hacen falta. Estar en disco no cuesta ancho de
 * banda.
 *
 * PARA ACTUALIZAR: pedir el CSS a
 * fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300..900 con un
 * User-Agent moderno, bajar los .woff2 a fonts/ y copiar aquí los rangos.
 */

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-greek-ext.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-greek.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(fonts/roboto-condensed-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * GOTHIC DESIGN SYSTEM — design tokens
 *
 * Token NAMES are referenced from inline style="" attributes across the
 * templates, so values may change here but names must not be removed.
 */
:root {
    /* Surfaces */
    --bg-color: #0a0a0a;
    --surface-1: #0f1216;
    --surface-2: #161b22;
    --surface-3: #1a2029;
    --surface-hover: #202832;
    --card-bg: #12161c;
    --pod-bg: rgba(217, 185, 140, 0.045);

    /* Signature accent. Kept the name --accent-red (and --accent-red-rgb)
       because templates reference them by that name in inline style=""
       attributes across the theme — see the note at the top of this
       block; only the value moved, from neon red to a warm beige.
       --accent-red-rgb lets rgba() compositions track it. */
    --accent-red: #d9b98c;
    --accent-red-rgb: 217, 185, 140;
    --accent-red-soft: rgba(var(--accent-red-rgb), 0.55);
    --accent-red-line: rgba(var(--accent-red-rgb), 0.30);

    /* Text */
    --text-primary: #ffffff;
    --text-dim: #9aa4b0;
    --text-mute: #6b7480;

    /* Medals */
    --accent-gold: #FFD700;
    --accent-silver: #C0C0C0;
    --accent-bronze: #CD7F32;

    /* Tournament format. Deliberately off --accent-red (hover/highlight)
       and off the medal colours above, so format never doubles as another
       signal: team events read as a dark, burnt orange; singles as a dusty
       muted rose (Hector's #A25E5B). Used by the archive grid's card frame
       (.ms-tournament-card, via .ms-format-team / .ms-format-solo). */
    --accent-team: #c2660f;
    --accent-team-rgb: 194, 102, 15;
    --accent-solo: #a25e5b;
    --accent-solo-rgb: 162, 94, 91;

    /* Win/loss + win-rate colours (dark green / dark red) */
    --result-win: #2f9e57;
    --result-loss: #a83a37;
    --result-draw: var(--text-dim);
    /* Lighter shades for the near-even win-rate bands */
    --result-win-light: #6cc48a;
    --result-loss-light: #cf7d7a;

    /* Force Disposition (Warhammer 40k 11th ed.). Hold/Priority are
       deliberately off-key from --result-win/--accent-gold so a colored
       WIN badge and a colored disposition badge never read as the same
       signal when they sit in the same row. */
    --disposition-purge: var(--accent-red);   /* Purge the Foe — reuses the site's signature accent */
    --disposition-hold: #3fae2a;              /* Take and Hold */
    --disposition-priority: #e0b400;          /* Priority Assets */
    --disposition-disruption: #3a8ee0;        /* Disruption */
    --disposition-recon: #2bb3a3;             /* Reconnaissance */

    --border-color: #262d36;

    /* Glow primitives — the signature of the design */
    /* Opacidades retocadas a la baja respecto a las del rojo original: el
       beige (217,185,140) es mucho mas luminoso que el rojo neon que tenia
       este mismo hueco (255,42,42) — a igual alpha, el halo difuminado se ve
       bastante mas brillante porque el color de base ya parte mas claro.
       Segunda pasada a la baja (Hector: "todavia un pelin mas"). */
    --glow-sm: 0 0 4px rgba(var(--accent-red-rgb), .25),
               0 0 10px rgba(var(--accent-red-rgb), .13);
    --glow-md: 0 0 6px rgba(var(--accent-red-rgb), .29),
               0 0 16px rgba(var(--accent-red-rgb), .17),
               0 0 32px rgba(var(--accent-red-rgb), .08);
    --glow-lg: 0 0 8px rgba(var(--accent-red-rgb), .34),
               0 0 24px rgba(var(--accent-red-rgb), .20),
               0 0 56px rgba(var(--accent-red-rgb), .10);
    --glow-inset: inset 0 0 8px rgba(var(--accent-red-rgb), .13);
    --glow-text: 0 0 6px rgba(255, 255, 255, .35),
                 0 0 18px rgba(var(--accent-red-rgb), .11);

    /* Radii */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* Spacing */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* Type */
    --ff: 'Roboto Condensed', system-ui, sans-serif;
    --fs-label: 0.70rem;
    --fs-body: 0.95rem;
    --fs-value: 1.9rem;
    --fs-h2: 1.5rem;
    --fs-h1: 2.6rem;
    /* El tamaño al que se ve de verdad el título de ficha: --fs-h1 es solo
       su tope. Se resuelve al usarlo, así que sigue los saltos de --fs-h1. */
    --fs-title: clamp(1.7rem, 7.5vw, var(--fs-h1));

    --rule-h: 3px;
    --emblem-size: 72px;

    /* Compatibility aliases */
    --accent-color: var(--accent-red);

    /* GeneratePress's OWN accent variable, not ours: el padre lo declara en
       un :root inline (#1e73be, azul por defecto de su Customizer) y lo usa
       para el hover y el item activo del menu principal. Como se declara
       ANTES que este style.css en el <head> (generate-style-css primero,
       generate-child-css despues), redeclararlo aqui gana la cascada y el
       menu deja de ser el unico sitio del sitio que seguia en azul. */
    --accent: var(--accent-red);
}

/*
 * BASE STYLES
 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

a {
    color: var(--accent-red);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    filter: brightness(1.2);
}

/* Desactivar enlaces vacíos */
a[href="#"] {
    pointer-events: none;
    cursor: default;
    color: inherit !important;
    text-decoration: none !important;
}

/*
 * ============================================================
 * APP SHELL
 * ============================================================
 * Ported from the old "Additional CSS" block (archived in
 * inc/legacy-additional-css-backup.css) and restyled for the dark
 * design. Gives the site its full-width app layout, hides GeneratePress's
 * default header/entry chrome, and provides the dark top navigation bar.
 */

/* Full-height column so the footer sits at the bottom. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page {
    flex: 1;
}

/* Hide the default theme header, per-post title header and "powered by". */
.site-header,
.entry-header,
.powered-by {
    display: none !important;
}

/*
 * Full-width canvas — remove GeneratePress's container padding/max-width.
 *
 * La excepcion de .site-main importa: los ARCHIVOS pintan
 * <main class="site-main gothic-container">, o sea que las dos clases caen en
 * el MISMO elemento, y con !important este reset le ganaba a la reticula
 * propia. Resultado: los cuatro archivos salian pegados a los bordes de la
 * ventana mientras las fichas —que no llevan .site-main— respiraban sus 20px.
 * En una rejilla de tarjetas casi no se notaba; en el ladder, que es una
 * tabla, cantaba.
 *
 * Se excluye por :not() y no a base de otro !important porque el problema no
 * era de peso sino de alcance: aqui solo hay que desmontar el contenedor del
 * padre, y donde ya hay contenedor propio no hay nada que desmontar.
 */
.site-content,
.site-main:not(.gothic-container),
.grid-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/*
 * Y devolverle el centrado, que es otra pelea distinta.
 *
 * El padre pone `.separate-containers.no-sidebar .site-main { margin-left: 0;
 * margin-right: 0 }`: tres clases, que le ganan al `margin: 0 auto` de
 * .gothic-container. Mientras el reset de arriba llevaba !important daba
 * igual, porque aplastaba a los dos; al dejar de aplicarse a estos elementos
 * la regla del padre asoma y el archivo sale con su ancho correcto pero
 * pegado al borde izquierdo en cualquier pantalla mas ancha que el
 * contenedor.
 *
 * Aqui el !important si esta justificado: es un problema de peso, no de
 * alcance, y no hay selector razonable que gane a tres clases del padre.
 */
.site-main.gothic-container {
    margin: 0 auto !important;
}

/*
 * Las "tarjetas" blancas del padre.
 *
 * Las páginas con plantilla propia (portada, jugadores, facciones...) pintan
 * su <main class="gothic-container"> y nunca pasan por aquí. Pero una página
 * normal de WordPress —el mapa, y cualquiera que se cree desde el panel— sale
 * por page.php del padre, que la envuelve en .inside-article con fondo
 * var(--base-3), o sea BLANCO. Sobre el lienzo oscuro eso era un folio en
 * medio de la pantalla.
 *
 * La lista es la misma que la del padre, que pinta de blanco estos cinco
 * elementos en una sola regla. Arreglar solo .inside-article dejaba el fallo
 * a un elemento de distancia: los comentarios seguían siendo un rectángulo
 * blanco, y encima con el texto blanco heredado del cuerpo, o sea ilegible.
 *
 * Fondo transparente y no var(--bg-color): así se ve la textura de circuito
 * de body::before, igual que en el resto del sitio, en vez de taparla con un
 * rectángulo opaco del mismo color.
 *
 * !important porque la regla del padre lleva dos clases
 * (.separate-containers .inside-article) y viene de un <style> en línea; es el
 * mismo recurso que ya usan las dos reglas de aquí arriba.
 */
.inside-article,
.comments-area,
.page-header,
.paging-navigation,
.inside-page-header {
    background-color: transparent !important;
}

/* El relleno se iguala al de .gothic-container para que estas páginas caigan
   en la misma retícula que las demás. */
.inside-article {
    padding: 20px !important;
    max-width: 1200px;
    margin: 0 auto !important;
}

/* Estos textos los escribió el padre dando por hecho un fondo blanco. */
.inside-article .entry-content,
.comments-area {
    color: var(--text-primary);
}

/* --- Top navigation bar ------------------------------------------- */
.main-navigation,
.main-navigation ul ul {
    background-color: var(--surface-1);
}

/* Keep the nav (and its open mobile dropdown) above page content such as
   Leaflet maps, whose controls default to z-index 1000. */
.main-navigation {
    position: relative;
    z-index: 1100;
}

.main-navigation .inside-navigation {
    position: relative;
    height: 65px;
    display: flex;
    align-items: center;
    background-color: var(--surface-1);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(var(--accent-red-rgb), .18);
}

/* Hamburger toggle pinned left. font-size:0 hides the word "Menu" but
   keeps the icon glyph, which is sized back up on the child span.
   El padding sustituye al "0 20px" del padre: así el glifo cae en el mismo
   canalón de 15px que el buscador del extremo opuesto, en vez de quedar
   metido hacia dentro y casi pegado a METASCRIBE. */
.menu-toggle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 15px !important;
    width: auto !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 0 !important;
    z-index: 1001;
}

.menu-toggle .gp-icon {
    font-size: 26px !important;
}

/* El padre baja el SVG .125em para casarlo con la línea de texto del rótulo
   "Menu"; aquí ese rótulo está oculto (generate_mobile_menu_label vacío), así
   que el empujón sólo deja el icono descuadrado respecto a METASCRIBE. */
.menu-toggle .gp-icon svg {
    top: 0;
}

/* Brand: enlace real a portada (antes era un ::after decorativo sin
   pointer-events). En escritorio es un elemento de flex más, empujado a la
   derecha con margin-left:auto — el mismo hueco que antes ocupaba el
   buscador, ya que ambos han intercambiado sitio (ver .ms-search debajo). */
.ms-brand {
    margin-left: auto;
    margin-right: var(--s-6);
    font-family: var(--ff);
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
    white-space: nowrap;
    flex: 0 0 auto;
}

.ms-brand:hover {
    color: var(--accent-red);
}

/* Dropdown menu panel (mobile toggled state). */
.main-navigation.toggled .main-nav {
    position: absolute !important;
    top: 65px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background-color: var(--surface-1) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}

.main-navigation .main-nav ul li a {
    line-height: 55px !important;
    padding-left: 20px !important;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--accent-red);
    /* El foco por teclado/clic sin esto usa el anillo azul por defecto del
       navegador (outline: auto), que no lee ninguna variable del sitio. */
    outline-color: var(--accent-red);
}

/* --- Entity search ------------------------------------------------ */
/* El campo vive dentro de .main-navigation, que ya es position:relative
   + z-index:1100 y por tanto su propio contexto de apilamiento: al panel
   le basta un z-index local pequeño (mismo valor que el popover del
   selector de periodo). Subir más taparía la propia barra. */
.ms-search {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    /* .ms-brand ya se encarga de empujar el grupo a la derecha con su
       propio margin-left:auto; aquí solo hace falta separar el campo del
       borde de la barra. */
    margin-right: var(--s-5);
}

.ms-search__form {
    margin: 0;
}

/* Especificidad deliberada: GeneratePress emite en su CSS dinámico
   input[type="search"]{...} (0,1,1) y input[type="search"]:focus (0,2,1),
   con los colores claros del Personalizador. Un simple .ms-search__input
   (0,1,0) pierde y el campo sale blanco. Anidando bajo .ms-search subimos
   a (0,2,0) y (0,3,0) y ganamos sin recurrir a !important. */
.ms-search .ms-search__input {
    width: 220px;
    max-width: 100%;
    padding: var(--s-2) var(--s-3) var(--s-2) 32px;
    background-color: var(--surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px 50%;
    background-size: 16px 16px;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    font-family: var(--ff);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease, width .2s ease;
}

.ms-search .ms-search__input::placeholder {
    color: var(--text-mute);
}

/* Repetimos fondo y color aquí a propósito. GeneratePress emite
   input[type="search"]:focus{background-color:var(--base-2);color:var(--contrast)}
   con especificidad (0,2,1), que gana a la regla base de arriba (0,2,0): sin
   esto el campo se vuelve blanco justo al enfocarlo. */
.ms-search .ms-search__input:focus {
    outline: none;
    background-color: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--accent-red);
    box-shadow: var(--glow-sm);
}

/* Quita la "x" nativa de WebKit: cierra sin avisar al JS. */
.ms-search .ms-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ms-search .ms-search__results {
    /* display explicito: GeneratePress aplica .main-navigation ul{display:none}
       por debajo de 768px y ocultaria el desplegable en movil. */
    display: block;
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    width: 320px;
    max-width: calc(100vw - 30px);
    max-height: 380px;
    overflow-y: auto;
    margin: 0;
    padding: var(--s-1);
    list-style: none;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-red) transparent;
}

/* El atributo hidden manda sobre el display:block de arriba. */
.ms-search .ms-search__results[hidden] {
    display: none;
}

.ms-search .ms-search__results::-webkit-scrollbar {
    width: 8px;
}

.ms-search .ms-search__results::-webkit-scrollbar-thumb {
    background: var(--accent-red);
    border-radius: var(--r-pill);
}

.ms-search .ms-search__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.ms-search .ms-search__item.is-active {
    background: var(--surface-hover);
}

/* Placa del monograma: versión reducida del emblema de las tarjetas.
   Ninguna entidad tiene imagen destacada, así que siempre es monograma. */
.ms-search__mono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-red-rgb), .18), transparent 70%), var(--surface-3);
    border: 1px solid var(--accent-red-soft);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: .02em;
}

/* La imagen, sea el icono de la entidad o la silueta genérica de su tipo. El
   cuadro ya viene recortado de WordPress ('thumbnail' es 150x150 con recorte
   duro salvo que se desactive en Ajustes), pero el object-fit lo cubre igual
   si no lo estuviera. */
.ms-search__mono img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, no cover: recortar un icono vertical a 30px lo dejaría en un
       trozo irreconocible. El hueco sigue midiendo 30px aunque el icono no lo
       llene, que es lo que mantiene los nombres alineados en la lista. */
    object-fit: contain;
}

/* Sólo la imagen PROPIA de la entidad se queda sin marco: el recuadro existe
   para dar cuerpo al monograma, y un icono de facción ya tiene el suyo. La
   silueta, en cambio, lo conserva —no lleva esta clase— por lo mismo que
   .ms-emblem--person en las fichas: es un dibujo genérico, y sin recuadro
   flotaría suelto entre nombres. */
.ms-search__mono--img {
    background: none;
    border-color: transparent;
}

.ms-search__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--fs-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-search__type {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Separa el bloque de facciones (siempre primero) del resto. */
.ms-search__sep {
    height: 1px;
    margin: var(--s-1) var(--s-2);
    background: var(--border-color);
}

.ms-search__empty {
    padding: var(--s-4);
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* En los archivos el campo va centrado bajo el título, no en la barra. */
.ms-archive-header .ms-search {
    display: inline-block;
    margin: var(--s-4) auto 0;
    text-align: left;
}

.ms-archive-header .ms-search__input {
    width: 280px;
}

.ms-archive-header .ms-search__results {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}


/* Móvil: el menú colapsa en la hamburguesa (breakpoint 768px de
   GeneratePress). El campo queda reducido al icono y se abre al enfocar,
   con CSS puro: el JS solo resuelve datos, no presentación. */
@media (max-width: 768px) {
    /* Mismo intercambio que en escritorio, adaptado al espacio de móvil:
       METASCRIBE se fija junto a la hamburguesa (donde antes iba el icono
       de búsqueda) y la lupa pasa al borde derecho (donde antes iba la
       marca), colapsada a icono y expandiéndose hacia la izquierda al
       enfocar — mismo mecanismo de antes, con los lados invertidos. */

    /* El botón hereda del padre line-height:60px y centra el icono por línea
       base contra un rótulo que aquí no existe, con lo que el glifo acababa
       más alto que METASCRIBE. Como caja flex a la altura de la barra se
       centra por geometría. Va dentro del media query porque el padre sólo
       muestra la hamburguesa en móvil: un display global la sacaría también
       en escritorio. */
    .main-navigation .menu-toggle {
        display: flex;
        align-items: center;
        height: 65px;
    }

    .main-navigation .ms-brand {
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    .main-navigation .ms-search {
        position: absolute;
        right: 15px;
        margin: 0;
    }

    .main-navigation .ms-search__input {
        width: 38px;
        padding-right: var(--s-1);
        cursor: pointer;
    }

    .main-navigation .ms-search:focus-within {
        left: 60px;
    }

    .main-navigation .ms-search:focus-within .ms-search__input {
        width: 100%;
        padding-right: var(--s-3);
        cursor: auto;
    }

    /* Con el campo abierto el rótulo estorba: se desvanece. Si el
       navegador no soporta :has(), simplemente se solapan. pointer-events
       evita clics fantasma sobre un enlace invisible. */
    .main-navigation .inside-navigation:has(.ms-search:focus-within) .ms-brand {
        opacity: 0;
        pointer-events: none;
    }

    /* El panel se estira al ancho del propio campo. Nada de 100vw: esa
       unidad incluye la barra de desplazamiento, así que calc(100vw - x)
       se pasa de ancho y el panel desborda a su contenedor, empujando la
       etiqueta de tipo fuera de la pantalla. */
    .main-navigation .ms-search__results {
        left: 0;
        right: 0;
        width: auto;
    }
}

/* --- Footer ------------------------------------------------------- */
.site-info {
    margin-top: auto;
    padding: 15px 0;
    background-color: var(--surface-1);
    border-top: 1px solid var(--border-color);
    width: 100%;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85em;
}

/* --- Frase del día ------------------------------------------------ */
/* El padre monta .inside-site-info como una FILA (display:flex, centrado).
   Al meter la frase dentro pasan a ser dos hermanos y la fila los coloca uno
   al lado del otro: la frase a la izquierda y el copyright empujado fuera del
   borde derecho. En columna se apilan, que es lo que hace falta para que la
   frase quede encima de todo lo demás. */
.site-info .inside-site-info {
    flex-direction: column;
}

/* Primera línea del pie, encima del copyright. Se le da un filete de
   separación porque son dos cosas distintas: una es sabiduría imperial y la
   otra el aviso legal, y sin la raya se leen como una sola frase larga.
   align-self:stretch para que ese filete mida siempre lo mismo: sin él la
   columna ajusta la caja al texto y la raya cambiaría de ancho cada día. */
.ms-thought {
    align-self: stretch;
    margin: 0 auto var(--s-3);
    padding: 0 var(--s-4) var(--s-3);
    max-width: 900px;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.5;
}

/* Mismo color que la frase: el rótulo se distingue por la versalita y el
   grosor, no por el acento. En el pie el rojo llamaba más la atención que el
   texto que introduce. */
.ms-thought__label {
    color: var(--text-dim);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* No se parte del texto que introduce: o entran los dos en la línea o
       baja entera. */
    white-space: nowrap;
}

.ms-thought__text {
    color: var(--text-dim);
    font-style: italic;
}

/* Enlaces del pie (privacidad, y lo que venga): en el tono del texto, no en
   rojo. El pie es una barra secundaria y un acento a todo color ahí compite
   con el contenido. El subrayado tenue es lo que los delata como enlaces. */
.site-info a {
    color: var(--text-dim);
    text-decoration: underline;
    text-decoration-color: var(--accent-red-line);
    text-underline-offset: 3px;
}

.site-info a:hover {
    color: var(--text-primary);
    text-decoration-color: var(--accent-red);
}

/*
 * ============================================================
 * CIRCUIT-BOARD BACKGROUND TEXTURE
 * ============================================================
 * Four layered repeating gradients form the trace pattern. The radial
 * mask fades it out of the centre so it reads as edge trim rather than
 * wallpaper — without the mask this looks like uniform graph paper.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .55;
    background-image:
        repeating-linear-gradient(45deg,  transparent 0 22px, rgba(var(--accent-red-rgb), .055) 22px 23px),
        repeating-linear-gradient(-45deg, transparent 0 34px, rgba(var(--accent-red-rgb), .040) 34px 35px),
        repeating-linear-gradient(0deg,   transparent 0 60px, rgba(var(--accent-red-rgb), .030) 60px 61px),
        repeating-linear-gradient(90deg,  transparent 0 90px, rgba(var(--accent-red-rgb), .030) 90px 91px);
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, transparent 38%, #000 100%);
            mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, transparent 38%, #000 100%);
}

/* Content sits above the fixed texture layer. */
.gothic-container,
.archive-container,
#front-page-container {
    position: relative;
    z-index: 1;
}

/*
 * ============================================================
 * ms- COMPONENT LAYER
 * ============================================================
 * Reusable neon components. No page-scoped selectors — every component
 * works wherever it is used.
 */

/* --- Glowing rule ------------------------------------------------- */
/* The gradient falloff at both ends is what stops this reading as a
   flat bar. No shadow offset, so the bloom spreads above and below. */
.ms-rule {
    height: var(--rule-h);
    border: 0;
    margin: var(--s-4) 0 var(--s-5);
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(var(--accent-red-rgb), .35) 0%,
        var(--accent-red) 12%,
        var(--accent-red) 88%,
        rgba(var(--accent-red-rgb), .35) 100%);
    box-shadow: var(--glow-md);
}

/* --- Section title ------------------------------------------------ */
.ms-section-title {
    text-align: center;
    font-family: var(--ff);
    font-size: var(--fs-h2);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
    margin: var(--s-6) 0 0;
}

.ms-section-title::after {
    content: "";
    display: block;
    height: var(--rule-h);
    margin-top: var(--s-2);
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(var(--accent-red-rgb), .3),
        var(--accent-red) 12%,
        var(--accent-red) 88%,
        rgba(var(--accent-red-rgb), .3));
    box-shadow: var(--glow-md);
}

/* --- Page header -------------------------------------------------- */
.ms-page-header {
    padding-top: var(--s-5);
}

.ms-page-header__top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
    min-height: 1em;
}

/* En las cabeceras de archivo (centradas) el selector va también centrado. */
.ms-archive-header .ms-page-header__top {
    justify-content: center;
    margin-top: var(--s-4);
}

.ms-page-header__main {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.ms-page-title {
    flex: 1 1 auto;
    min-width: 0;               /* lets long titles wrap instead of overflowing */
    font-family: var(--ff);
    font-size: var(--fs-title);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 0 14px rgba(255, 255, 255, .18);
    margin: 0;
}

/* Ficha de facción y de torneo: el nombre va centrado. En ellas el título es
   todo el asunto de la página; en la de jugador no, porque comparte la línea
   con el equipo, que se apoya a la derecha. */
.single-facciones .ms-page-title,
.single-torneos .ms-page-title {
    text-align: center;
}

/* El torneo lleva bandera a la derecha, que hace de contrapeso del emblema y
   deja el título casi centrado por sí solo. La facción no lleva nada, así que
   aquí se centra el CONJUNTO emblema + nombre y no el nombre solo: el icono
   pertenece al título y viaja con él. Anclado al margen, en escritorio se
   quedaba solo en la esquina, a medio ancho de página de la palabra que
   ilustra.

   El hueco es --s-5 y no el --s-4 de la fila: con un título de 3rem, 16 px lo
   dejaban pegado. */
.single-facciones .ms-page-header__main {
    justify-content: center;
    gap: var(--s-5);
}

/* .ms-page-title es flex: 1 1 auto, así que por defecto crece hasta llenar la
   fila y empuja el emblema de vuelta al margen. Encogiéndolo a su contenido el
   par puede centrarse como una unidad. */
.single-facciones .ms-page-title {
    flex: 0 1 auto;
}

.ms-page-meta {
    text-align: center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: var(--s-3) 0;
}

/* Title + a secondary line stacked beside the emblem (player and tournament
   pages). */
.ms-player-headline,
.ms-headline {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* En la cabecera del torneo la etiqueta manda mas que en una tarjeta o una
   celda: alli solo desempata, aqui es el subtitulo del evento. Versalitas,
   un punto mayor y pegada al nombre en vez del hueco que la ficha de jugador
   deja entre el nombre y el equipo. */
.ms-headline {
    gap: var(--s-1);
    /* La caja se encoge hasta el texto del titulo en vez de ocupar todo el
       hueco libre. Es lo que permite alinear la etiqueta con el FINAL del
       nombre del torneo: el titulo se centra con text-align, asi que su caja
       llega de borde a borde y su borde derecho no se puede referenciar desde
       un hermano. Encogiendo la caja al contenido, borde de caja y final del
       texto pasan a ser el mismo punto, y con text-align:right la etiqueta
       cae justo ahi.
       Los margenes automaticos absorben el hueco sobrante y mantienen el
       conjunto centrado, con la bandera pegada al margen derecho como antes;
       sin ellos el hueco se iria al final y arrastraria la bandera hacia el
       titulo. Y flex-shrink sigue a 1: un nombre mas largo que el hueco
       disponible se parte en varias lineas igual que hasta ahora. */
    flex: 0 1 auto;
    margin-inline: auto;
}

.ms-headline .ms-event-type {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* Termina donde termina el titulo. En su dia se centro porque alineada al
       borde se quedaba descolgada junto a la bandera, pero eso era con la caja
       ocupando todo el ancho: ahora el borde derecho ES el final del nombre,
       asi que se apoya en el y no se aleja. */
    text-align: right;
}

/* Columna derecha de la cabecera: bandera arriba, botón social debajo. El
   ancho lo fija la bandera, que es la más ancha de las dos, así que sumar el
   botón no corre a nadie; y la pila es más baja que el emblema, así que
   tampoco crece la fila. Ver la nota en ms_render_header_aside(). */
.ms-header-aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
}

/* Botón social. Es un enlace que se va del sitio, no parte del titular, así
   que vive apartado, al final de la columna derecha. */
.ms-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--text-primary);
    transition: color .2s ease, transform .2s ease, filter .2s ease;
}

.ms-social__glyph {
    display: block;
    width: 100%;
    height: 100%;
}

.ms-social:hover,
.ms-social:focus-visible {
    color: var(--accent-red);
    transform: translateY(-1px);
    filter: drop-shadow(0 0 6px rgba(var(--accent-red-rgb), .55));
}

/* Team sits below the name and pushed to the right, styled to stand out. */
.ms-player-team {
    align-self: flex-end;
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    text-align: right;
}

.ms-player-team__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ms-player-team__name {
    font-family: var(--ff);
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ms-player-team:hover .ms-player-team__name {
    color: var(--text-primary);
}

/* --- Emblem tile -------------------------------------------------- */
/* The radial gradient lives on the base class, not just the placeholder
   variant, so a remote image that fails to load degrades to a styled
   tile rather than a broken-image icon. */
.ms-emblem {
    flex: 0 0 auto;
    width: var(--emblem-size);
    height: var(--emblem-size);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--accent-red);
    border-radius: var(--r-md);
    box-shadow: var(--glow-md), var(--glow-inset);
    background: radial-gradient(circle at 50% 40%, #2a0f10 0%, #120708 60%, #0a0505 100%);
}

.ms-emblem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Small emblem for inline use (e.g. the player's Known Teams rows). */
.ms-emblem--sm {
    --emblem-size: 44px;
    border-width: 1px;
}

/* Retrato dentro de una celda de tabla, al tamano de .ms-cell-thumb: es el que
   usan las miniaturas de faccion en las tablas de al lado, y las dos columnas
   tienen que medir igual.

   Los 44px de .ms-emblem--sm estan pensados para una lista corta dentro de una
   ficha; en una tabla de diez filas estiraban cada fila a 69px y la columna
   quedaba como una hilera de sellos rojos. Sin halo por lo mismo: uno llama la
   atencion, diez la roban. */
.ms-emblem--cell {
    --emblem-size: 28px;
    border-width: 1px;
    box-shadow: none;
}

/* Variante con imagen. El marco (borde rojo, halo, fondo) existe para dar
   cuerpo al monograma de reserva; una imagen ya tiene el suyo, y enmarcarla
   la encajona.

   Alto fijo y ancho automático: los iconos de facción son verticales y
   forzarlos a un cuadro los dejaba flotando entre dos franjas vacías. */
.ms-emblem--img {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Manda la imagen y la caja la envuelve, no al revés. Con el alto en la
   caja no bastaba: .ms-emblem es una rejilla cuya fila se dimensiona por su
   contenido, así que el height: 100% de la imagen era un porcentaje contra
   una altura indefinida — o sea auto, o sea los 320px de la imagen. La caja
   medía lo que le pedíamos y la imagen se le salía; con el marco puesto no
   se veía porque el overflow: hidden la recortaba. */
.ms-emblem--img img {
    display: block;
    width: auto;
    height: var(--emblem-size);
    object-fit: contain;
}

/* En la cabecera el emblema convive con el título, así que se mide contra él
   y no contra --emblem-size, que dimensiona el recuadro del monograma — otro
   trabajo. Un recuadro relleno y un glifo suelto de la misma altura no pesan
   lo mismo: el glifo se ve entero, el recuadro iba recortado.

   Va aquí y no en .ms-emblem--img para no pisar a .ms-emblem--sm, que sí
   quiere derivar de --emblem-size en las filas de las fichas de jugador. */
.ms-page-header__main .ms-emblem--img img {
    height: calc(var(--fs-title) * 1.5);
}

.ms-emblem--placeholder::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--accent-red-soft);
    border-radius: var(--r-sm);
    clip-path: polygon(0 12%, 12% 0, 88% 0, 100% 12%,
                       100% 88%, 88% 100%, 12% 100%, 0 88%);
    opacity: .8;
}

/* Silueta de jugador. Conserva el marco del placeholder (borde, fondo, halo)
   pero no su bisel interior: el dibujo sangra hasta los cuatro bordes y esa
   línea a 6 px le cruzaría los hombros. */
.ms-emblem--person::before {
    content: none;
}

.ms-emblem__monogram {
    position: relative;
    z-index: 1;
    font-family: var(--ff);
    font-size: calc(var(--emblem-size) * .42);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
}

/* --- Flag --------------------------------------------------------- */
.ms-flag {
    flex: 0 0 auto;
    width: 46px;
    height: auto;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

/* --- Date chip ---------------------------------------------------- */
.ms-date-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.ms-date-chip__day {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    padding: 1px 4px;
    border: 1px solid var(--accent-red);
    border-radius: var(--r-sm);
    box-shadow: var(--glow-sm);
    color: var(--accent-red);
    font-weight: 900;
}

/* --- Stat pods: segmented capsule --------------------------------- */
/* One capsule split by a full-height divider. overflow:hidden clips the
   divider ends to the pill curve. */
.ms-pods--segmented {
    display: flex;
    margin: var(--s-5) 0;
    background: var(--pod-bg);
    border: 2px solid var(--accent-red);
    border-radius: var(--r-pill);
    box-shadow: var(--glow-md), var(--glow-inset);
    overflow: hidden;
}

.ms-pod-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: var(--s-3) var(--s-4);
    font-size: clamp(.85rem, 3.4vw, 1.05rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
}

.ms-pod-seg + .ms-pod-seg {
    border-left: 2px solid var(--accent-red);
    box-shadow: -1px 0 10px rgba(var(--accent-red-rgb), .5);
}

.ms-pod-seg__label {
    color: var(--text-dim);
}

.ms-pod-seg__value {
    font-weight: 900;
    text-shadow: var(--glow-text);
}

/* Con dos segmentos (el uso original) la fila nunca desborda; con cuatro
   (la portada, ver front-page.php) sí, en móvil. Pasa a 2x2 y el divisor
   cambia de sitio: entre columnas para las dos filas, entre filas para las
   dos columnas. Con dos segmentos esto no hace nada (no hay nth-child(n+3)
   que pintar), así que no hace falta separarlo por número de hijos. */
@media (max-width: 599px) {
    .ms-pods--segmented {
        flex-wrap: wrap;
    }

    /* Etiqueta y cifra en su propia línea: "Tournaments: 6" en una sola
       línea no cabe en el 50% de un móvil estrecho aunque el texto ya no
       crezca (clamp() está en su mínimo) — apiladas sí caben siempre,
       midan lo que midan. */
    .ms-pod-seg {
        flex: 1 1 50%;
        flex-direction: column;
        gap: 0;
        padding: var(--s-2) var(--s-2);
        white-space: normal;
        text-align: center;
    }

    .ms-pod-seg:nth-child(odd) {
        border-left: none;
    }

    .ms-pod-seg:nth-child(n+3) {
        border-left: none;
        border-top: 2px solid var(--accent-red);
        box-shadow: 0 -1px 10px rgba(var(--accent-red-rgb), .5);
    }
}

/* --- Homepage spotlight (opcional) --------------------------------- */
/* Hueco para lo que se quiera destacar en cada momento — un streaming en
   directo, un análisis corto del meta — editado como una página de
   WordPress normal en vez de un campo a medida (ver ms_spotlight_html() en
   functions.php): bloques, enlaces, imágenes e incrustaciones (oEmbed)
   funcionan solos, sin tocar nada de aquí. Cuando esa página está vacía —
   el caso normal— la sección entera no se pinta, así que este bloque solo
   se ve en la página cuando de verdad hay algo dentro. */
.ms-spotlight {
    max-width: 900px;
    margin: var(--s-6) auto;
    padding: var(--s-5) var(--s-6);
    background: var(--pod-bg);
    border: 2px solid var(--accent-red);
    border-radius: var(--r-lg);
    box-shadow: var(--glow-md), var(--glow-inset);
}

.ms-spotlight__label {
    margin: 0 0 var(--s-3);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

/* El resto son estilos de fallback para lo que el editor de bloques meta
   dentro: la propia hoja de bloques de WordPress (wp-block-library, que
   carga cualquier tema con soporte de bloques) ya resuelve la mayoría, así
   que esto solo fija los colores del sistema de diseño encima. */
.ms-spotlight__content {
    color: var(--text-primary);
    line-height: 1.6;
}

.ms-spotlight__content > *:first-child {
    margin-top: 0;
}

.ms-spotlight__content > *:last-child {
    margin-bottom: 0;
}

.ms-spotlight__content p {
    margin: 0 0 var(--s-3);
}

.ms-spotlight__content a {
    color: var(--accent-red);
    text-decoration: underline;
    text-decoration-color: var(--accent-red-line);
}

.ms-spotlight__content a:hover {
    text-decoration-color: var(--accent-red);
}

.ms-spotlight__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
}

.ms-spotlight__content h1,
.ms-spotlight__content h2,
.ms-spotlight__content h3,
.ms-spotlight__content h4 {
    color: var(--text-primary);
    text-transform: uppercase;
    margin: var(--s-4) 0 var(--s-2);
}

/* Un vídeo o un directo de Twitch pegados como URL suelta se convierten en
   bloque Embed solos; esto solo asegura que el iframe nunca desborde la
   caja y guarda proporción 16:9 aunque el wrapper de WordPress
   (.wp-block-embed__wrapper, de wp-block-library) no llegue a cargar. */
.ms-spotlight__content .wp-block-embed__wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

.ms-spotlight__content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ms-spotlight__content iframe {
    max-width: 100%;
}

/* --- Stat pods: separate capsules --------------------------------- */
.ms-pods {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-5) 0;
}

.ms-pods--trio {
    grid-template-columns: repeat(3, 1fr);
}

/* 2x2 on small screens, four across once there's room. */
.ms-pods--quad {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
    .ms-pods--quad {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ms-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 76px;
    padding: var(--s-3) var(--s-2);
    background: var(--pod-bg);
    border: 2px solid var(--accent-red);
    border-radius: var(--r-pill);
    box-shadow: var(--glow-md), var(--glow-inset);
    text-align: center;
}

/* clamp() is load-bearing: a label like "GT+ TOP 3'S:" overflows a
   one-third column at 375px if the size is fixed. */
.ms-pod__label {
    font-size: clamp(.56rem, 2.5vw, var(--fs-label));
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.1;
    white-space: nowrap;
}

.ms-pod__value {
    font-size: clamp(1.25rem, 6vw, var(--fs-value));
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
}

/* Laurel wreath icon next to the GT+ Podiums figure. */
.ms-laurel {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.22em;
    margin-left: 0.25em;
    color: #ffffff;
}

/* Coloured figures (win rates) get a much softer glow than the white
   ones — the strong white+red bloom muddies a green or red number. */
.ms-pod__value--tinted {
    text-shadow: 0 0 4px rgba(255, 255, 255, .15);
}

/* --- Stat pod: fieldset/legend variant ---------------------------- */
/* A real fieldset so the browser cuts the notch through the border and
   the notch stays transparent, letting the circuit texture show through.
   min-inline-size:0 overrides the UA min-width:min-content, which would
   otherwise force the pod wider than its container on mobile. The
   legend padding is explicit because the global * reset zeroes it, and
   the notch width comes from the legend's box — without it the label
   touches the red line on both sides. */
.ms-legend-pod {
    min-inline-size: 0;
    margin: var(--s-4) auto;
    padding: var(--s-2) var(--s-4) var(--s-3);
    background: var(--pod-bg);
    border: 2px solid var(--accent-red);
    border-radius: var(--r-pill);
    box-shadow: var(--glow-md), var(--glow-inset);
}

/* margin-inline centers the legend AND its notch; text-align does not. */
.ms-legend-pod > legend {
    margin-inline: auto;
    padding: 0 var(--s-3);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ms-legend-pod__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--s-5), 7vw, var(--s-7));
}

.ms-legend-pod__row--single {
    justify-content: center;
}

.ms-legend-pod .ms-pod__value {
    font-size: clamp(1.4rem, 6vw, 2.1rem);
}

/* --- Panel -------------------------------------------------------- */
.ms-panel {
    margin-top: var(--s-6);
    padding: var(--s-4);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
}

/* --- Scroll containers -------------------------------------------- */
/* 10px gutter, not 6px: the webkit thumb's box-shadow is clipped to the
   track, so a narrow gutter leaves the bloom nowhere to render. */
.ms-scroll {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-red) rgba(0, 0, 0, .6);
}

.ms-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ms-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .6);
    border-radius: var(--r-pill);
}

.ms-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-red);
    border-radius: var(--r-pill);
    box-shadow: 0 0 6px rgba(var(--accent-red-rgb), .9),
                0 0 14px rgba(var(--accent-red-rgb), .5);
}

/* --- Table -------------------------------------------------------- */
.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ff);
}

/* Opaque background is required: a sticky header with a transparent
   background lets rows scroll through and show behind it. Against the
   page background it still reads as "no fill". The rule is drawn with
   an inset shadow because borders on sticky cells detach in some
   engines. */
.ms-table thead th {
    background: var(--bg-color);
    color: var(--text-primary);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--s-2) var(--s-3);
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: inset 0 calc(-1 * var(--rule-h)) 0 0 var(--accent-red),
                0 4px 14px rgba(var(--accent-red-rgb), .35);
}

.ms-table tbody tr {
    background: var(--surface-2);
}

.ms-table tbody tr:nth-child(even) {
    background: var(--surface-3);
}

.ms-table tbody tr:hover {
    background: var(--surface-hover);
}

.ms-table tbody td {
    padding: var(--s-3);
    font-size: var(--fs-body);
    color: var(--text-primary);
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}

.ms-table a {
    color: var(--text-primary);
    font-weight: 700;
}

.ms-table a:hover {
    color: var(--accent-red);
}

/* Gridline variant — visible reddish cell borders. */
.ms-table--grid tbody td {
    border: 1px solid var(--accent-red-line);
}

.ms-table--grid tbody td:first-child {
    border-left: 0;
}

.ms-table--grid tbody td:last-child {
    border-right: 0;
}

/* Hueco de un dato que no existe (no que valga cero). Se apaga del todo para
   que la vista lo salte en vez de leerlo como una cifra más. */
.ms-nodata {
    color: var(--text-mute);
}

/* Alignment helpers */
.ms-table .is-center { text-align: center; }
.ms-table .is-right  { text-align: right; }

.ms-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap; /* keep scores like "78 - 80" on one line */
}

/* Rank medals. Scoped under .ms-table so it does not affect the legacy
   .rank-* rules used by other templates. */
.ms-table .rank-cell {
    width: 56px;
    text-align: center;
    font-weight: 900;
    line-height: 1;
}

.ms-table .rank-1 .rank-cell {
    font-size: 2rem;
    color: var(--accent-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, .45);
}

.ms-table .rank-2 .rank-cell {
    font-size: 1.8rem;
    color: var(--accent-silver);
    text-shadow: 0 0 10px rgba(192, 192, 192, .40);
}

.ms-table .rank-3 .rank-cell {
    font-size: 1.7rem;
    color: var(--accent-bronze);
    text-shadow: 0 0 10px rgba(205, 127, 50, .40);
}

/* Inline artwork thumbnails inside cells */
.ms-cell-media {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.ms-cell-thumb {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    /* contain, no cover: recortar un símbolo vertical a un cuadro de 28px lo
       deja en un trozo. El hueco sigue midiendo 28px aunque el símbolo no lo
       llene, que es lo que mantiene las columnas alineadas. */
    object-fit: contain;
    /* Sin marco, como el emblema de cabecera: el borde y el halo estaban para
       dar cuerpo a una foto recortada, y alrededor de un símbolo estrecho a
       28px encuadran sobre todo hueco vacío. */
}

/* --- Cards -------------------------------------------------------- */
.ms-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

.ms-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: var(--s-4);
    overflow: hidden;
    border: 2px solid var(--accent-red);
    border-radius: var(--r-md);
    box-shadow: var(--glow-md), var(--glow-inset);
    background: #14090a center / cover no-repeat;
    text-align: center;
}

.ms-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .72));
}

.ms-card__label {
    position: relative;
    z-index: 1;
    font-weight: 900;
    font-size: clamp(.95rem, 4vw, 1.2rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9), var(--glow-text);
}

/* Card wrapper anchors would otherwise inherit the global red link
   colour. Fixes the archive templates and the front page at once. */
.card-link,
.ms-card-link {
    color: inherit;
    display: block;
}

/* --- Archive header ----------------------------------------------- */
.ms-archive-header {
    text-align: center;
    padding-top: var(--s-6);
}

.ms-archive-title {
    font-family: var(--ff);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
    margin: 0;
}

.ms-archive-sub {
    margin-top: var(--s-2);
    color: var(--accent-red);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-shadow: var(--glow-sm);
}

.ms-count-pill {
    display: inline-block;
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-5);
    background: var(--pod-bg);
    border: 2px solid var(--accent-red);
    border-radius: var(--r-pill);
    box-shadow: var(--glow-md), var(--glow-inset);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Force Disposition badge. A 5-way categorical value reads better as a
   scannable outline pill than as plain colored text (the existing Result
   convention) — keeps it visually distinct from WIN/LOSS/DRAW in the same
   row. Color comes from ms_disposition_color() via the --badge-color
   custom property set inline per instance. */
.ms-disposition-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: var(--r-pill);
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    /* Multi-word dispositions ("Purge the Foe") wrap in a narrow column;
       without this the last line hugs the left edge of the pill. */
    text-align: center;
    color: var(--badge-color);
    border: 1.5px solid var(--badge-color);
}

/* Tournament format hung under the tournament name (card, table cell or
   page header). Block + right-aligned so it lands under the name without
   competing with it: the name is what gets scanned, this only settles which
   of the two formats you are looking at. */
/* El nombre del torneo y su etiqueta, como una sola pieza. La etiqueta de
   abajo es display:block, asi que suelta en un <td> se estira a todo el ancho
   de la celda y se va al borde derecho; aqui la caja mide lo que mide el
   nombre y la etiqueta se queda debajo de el. max-width para que un nombre
   largo siga partiendo dentro de la celda en vez de desbordarla. */
.ms-event {
    display: inline-block;
    max-width: 100%;
}

.ms-event-type {
    display: block;
    text-align: right;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-dim);
}

/* --- Entity card grid --------------------------------------------- */
.ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-4);
    margin: var(--s-6) 0;
}

.ms-entity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: var(--s-5);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.card-link:hover .ms-entity-card,
.ms-card-link:hover .ms-entity-card {
    transform: translateY(-4px);
    border-color: var(--accent-red);
    box-shadow: var(--glow-md);
}

.ms-entity-card .ms-emblem {
    --emblem-size: 64px;
    margin-bottom: var(--s-3);
}

.ms-entity-card__name {
    font-family: var(--ff);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 var(--s-2);
}

.ms-entity-card__foot {
    margin-top: auto;
    padding-top: var(--s-3);
    width: 100%;
}

.ms-entity-card__stat {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

.ms-entity-card__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
}

.ms-entity-card__meta {
    color: var(--text-dim);
    font-size: .9em;
    margin-top: auto;
    text-align: left;
    width: 100%;
}

.ms-entity-card__meta p {
    margin: var(--s-1) 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.ms-entity-card__meta .ms-ico {
    color: var(--accent-red);
}

/* --- Entity card: two-stat foot (home, top factions) --------------- */
/* .ms-entity-card__foot normalmente lleva UN solo .ms-entity-card__stat
   (ver arriba). Esta variante reparte dos —win rate y appearances— en fila,
   cada uno con su propio grupo, en vez de apilarlos. */
.ms-entity-card__foot--split {
    display: flex;
    gap: var(--s-4);
}

.ms-entity-card__foot--split .ms-entity-card__stat-group {
    flex: 1;
}

.ms-entity-card__foot--split .ms-entity-card__stat {
    font-size: 1.4rem;
}

/* --- Quick links (home, bajo la parrilla de facciones) -------------- */
/* Mismo .ms-entity-card de siempre, con un acento propio y permanente en
   vez de aparecer solo al pasar el ratón: son los tres enlaces de salida
   de la portada y tienen que notarse más que una tarjeta de listado. */
.ms-quick-link {
    border-color: var(--accent-red-line);
    box-shadow: var(--glow-sm);
}

.ms-quick-link .ms-entity-card__name {
    font-size: 1.35rem;
}

.card-link:hover .ms-quick-link {
    box-shadow: var(--glow-md);
}

/* --- Tournament grid: format colour + size-tier frame -------------- */
/* .ms-format-team / .ms-format-solo sólo fijan UNA variable local con el
   tono del formato (ver --accent-team / --accent-solo en :root); los
   tramos de abajo la leen sin saber cuál de los dos formatos es, así que
   cada tramo se escribe una vez, no dos. */
.ms-tournament-card.ms-format-team {
    --tier-accent: var(--accent-team);
    --tier-accent-rgb: var(--accent-team-rgb);
}

.ms-tournament-card.ms-format-solo {
    --tier-accent: var(--accent-solo);
    --tier-accent-rgb: var(--accent-solo-rgb);
}

/* Cinco tramos por aforo (ms_tournament_size_tier() en functions.php),
   TODOS con marco propio — ya no hay un tramo "normal" sin decorar, ni
   siquiera el más bajo (0-49). Cada uno más recargado que el anterior:
   borde más grueso, más capas de resplandor, franja superior desde el
   tramo 3, franja doble desde el 4, y en el tope (5, +1000 jugadores) un
   segundo marco a modo de outline además de todo lo anterior. */
.ms-tournament-card.ms-tier-1 {
    border-color: rgba(var(--tier-accent-rgb), .5);
    box-shadow: 0 0 10px rgba(var(--tier-accent-rgb), .14);
}

.ms-tournament-card.ms-tier-2 {
    border-width: 2px;
    border-color: var(--tier-accent);
    box-shadow: 0 0 4px rgba(var(--tier-accent-rgb), .5),
                0 0 16px rgba(var(--tier-accent-rgb), .24);
}

.ms-tournament-card.ms-tier-3 {
    border-width: 2px;
    border-color: var(--tier-accent);
    box-shadow: 0 0 5px rgba(var(--tier-accent-rgb), .7),
                0 0 22px rgba(var(--tier-accent-rgb), .38),
                inset 0 0 0 3px rgba(var(--tier-accent-rgb), .16);
}

.ms-tournament-card.ms-tier-3::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tier-accent);
}

.ms-tournament-card.ms-tier-4 {
    border-width: 3px;
    border-color: var(--tier-accent);
    box-shadow: 0 0 6px rgba(var(--tier-accent-rgb), .85),
                0 0 28px rgba(var(--tier-accent-rgb), .5),
                0 0 60px rgba(var(--tier-accent-rgb), .24),
                inset 0 0 0 3px rgba(var(--tier-accent-rgb), .22);
}

.ms-tournament-card.ms-tier-4::before,
.ms-tournament-card.ms-tier-4::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent, var(--tier-accent) 15%, var(--tier-accent) 85%, transparent);
}

.ms-tournament-card.ms-tier-4::before {
    top: 0;
}

.ms-tournament-card.ms-tier-4::after {
    bottom: 0;
}

/* Tramo 5, el tope (+1000 jugadores): todo lo del tramo 4 y un marco
   SEGUNDO por fuera via outline. outline no lo recorta el overflow:hidden
   de la tarjeta —pinta fuera de su propia caja—, así que queda como un
   doble marco separado por el hueco de outline-offset; con 16px de gap
   entre tarjetas (--s-4 en .ms-grid) sobra sitio de sobra para que no
   toque a la de al lado. */
.ms-tournament-card.ms-tier-5 {
    border-width: 3px;
    border-color: var(--tier-accent);
    outline: 1px solid rgba(var(--tier-accent-rgb), .55);
    outline-offset: 4px;
    box-shadow: 0 0 6px rgba(var(--tier-accent-rgb), .9),
                0 0 30px rgba(var(--tier-accent-rgb), .55),
                0 0 64px rgba(var(--tier-accent-rgb), .3),
                0 0 110px rgba(var(--tier-accent-rgb), .14),
                inset 0 0 0 3px rgba(var(--tier-accent-rgb), .26);
}

.ms-tournament-card.ms-tier-5::before,
.ms-tournament-card.ms-tier-5::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        transparent, var(--tier-accent) 10%, var(--tier-accent) 90%, transparent);
}

.ms-tournament-card.ms-tier-5::before {
    top: 0;
}

.ms-tournament-card.ms-tier-5::after {
    bottom: 0;
}

/* La tarjeta a la que ha saltado el buscador (modo ladder, ver
   ms_tournament_grid_url()). Mismo acento y el mismo "puro :target, sin JS"
   que .ms-table.ms-ladder tbody tr:target: es la señal que ya usa el resto
   del sitio para "aquí es donde te traje", y se mantiene aparte del color
   de formato para no competer con él. */
.ms-tournament-card:target {
    border-color: var(--accent-red);
    box-shadow: var(--glow-lg), var(--glow-inset);
    scroll-margin-top: var(--s-5);
}

/* --- Pagination --------------------------------------------------- */
.pagination {
    margin: var(--s-6) 0;
    text-align: center;
}

.pagination .page-numbers {
    display: inline-block;
    min-width: 38px;
    padding: var(--s-2) var(--s-3);
    margin: 0 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-weight: 700;
}

.pagination .page-numbers.current {
    border-color: var(--accent-red);
    box-shadow: var(--glow-sm);
    color: var(--accent-red);
}

.pagination a.page-numbers:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* --- Tournament map filter ---------------------------------------- */
.ms-map-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding: var(--s-4);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
}

.ms-map-filter__field label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--s-1);
}

.ms-map-filter input[type="date"] {
    /* color-scheme: dark makes the native calendar popup dark too */
    color-scheme: dark;
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    font-family: var(--ff);
}

.ms-map-filter input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: var(--glow-sm);
}

.ms-map-filter__submit {
    padding: var(--s-2) var(--s-5);
    background: var(--accent-red);
    color: #fff;
    border: 0;
    border-radius: var(--r-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    box-shadow: var(--glow-sm);
}

.ms-map-filter__submit:hover {
    box-shadow: var(--glow-md);
}

.ms-map-filter__clear {
    font-size: .8rem;
    color: var(--text-dim);
}

.ms-map-filter__clear:hover {
    color: var(--accent-red);
}

/* --- Time selector (site-wide period filter) ---------------------- */
/* Una sola píldora con los cinco periodos, CUSTOM incluido. Es también el
   marco de referencia del panel de fechas, que cuelga del grupo entero y no
   del item: colgando del item, el panel arrancaba dentro de la píldora.

   .ms-format-selector (solo /tournaments/, ver ms_render_format_selector())
   comparte esta misma píldora: misma caja, mismos items, tres en vez de
   cinco y sin CUSTOM. .ms-view-toggle (tambien solo /tournaments/, ver
   ms_render_view_toggle()) tambien la comparte: dos items, GRID/MAP. */
.ms-time-selector,
.ms-format-selector,
.ms-view-toggle {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-1) var(--s-4);
    background: rgba(0, 0, 0, .5);
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
}

/* Por clase y no por etiqueta: cuatro items son <a>, uno es un <summary> y
   los dos de la vista son <label>, y todos tienen que verse igual. */
.ms-time-selector__item,
.ms-format-selector__item,
.ms-view-toggle__item {
    color: var(--text-mute);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .05em;
}

.ms-view-toggle__item {
    cursor: pointer;
}

a.ms-time-selector__item:hover,
.ms-time-selector__item:hover,
.ms-format-selector__item:hover,
.ms-view-toggle__item:hover {
    color: var(--text-primary);
}

.ms-time-selector__item.is-active,
.ms-format-selector__item.is-active {
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

/* GRID/MAP no tienen un estado "activo" escrito por PHP como el resto de
   filtros (no hay nada que resolver desde $_GET): el propio :checked del
   radio oculto es el estado, y el label que le sigue lo pinta. */
.ms-view-toggle input:checked + .ms-view-toggle__item {
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

/* El radio sigue en el DOM (foco de teclado, lector de pantalla); solo se
   esconde visualmente. Nada de `hidden` o display:none, que lo sacarian
   del todo del arbol de accesibilidad y el <label for=""> dejaria de tener
   a quien apuntar con el teclado. */
.ms-view-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ms-view-toggle input:focus-visible + .ms-view-toggle__item {
    outline: 2px solid var(--accent-red);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* La conmutación en si: ninguno de los dos bloques es hermano directo de
   los radios (la parrilla y el mapa cuelgan de <main>; los radios, de la
   cabecera), asi que un `~` no llega y hace falta :has() sobre <main
   id="primary">. La paginacion tambien se esconde en MAP: no pagina el
   mapa, que siempre pinta el ambito filtrado entero de una vez. */
#primary:has(#ms-view-map:checked) .tournaments-grid,
#primary:has(#ms-view-map:checked) .pagination {
    display: none;
}

#primary:has(#ms-view-grid:checked) .tournaments-map-wrap {
    display: none;
}

/* TEAM e INDIVIDUAL activos se pintan en su propio color en vez del beige
   generico — el mismo que ya llevan el marco de la tarjeta en la parrilla
   y el pin del mapa — para que el filtro puesto se lea igual que lo que
   esta filtrando. Mas especifico que la regla de arriba (dos clases, no
   una), asi que gana sin necesitar !important. ALL no tiene modificador:
   se queda con el beige de siempre, que es el color de "sin filtro". */
.ms-format-selector__item--team.is-active {
    color: var(--accent-team);
}

.ms-format-selector__item--solo.is-active {
    color: var(--accent-solo);
}

/* Rango personalizado: <details> para no depender de JavaScript.
   position: static a propósito — el panel se posiciona contra la píldora. */
.ms-time-custom {
    position: static;
    display: flex;
}

.ms-time-custom > summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.ms-time-custom > summary::-webkit-details-marker {
    display: none;
}

/* La punta de flecha es lo único que distingue a CUSTOM de sus cuatro
   vecinos, y tiene que distinguirse: los otros navegan y éste despliega.

   Dibujada con bordes y no con un glifo: Roboto Condensed no trae el
   triángulo, así que caía a una fuente de reserva y salía un guión
   desvaído. Con bordes se ve igual en todas partes y hereda el color, así
   que también se pone roja cuando CUSTOM es el periodo activo. */
.ms-time-custom > summary::after {
    content: "";
    display: inline-block;
    margin-left: .45em;
    vertical-align: .15em;
    border: .3em solid transparent;
    border-bottom: 0;
    border-top-color: currentColor;
    transition: transform .15s ease;
}

.ms-time-custom[open] > summary::after {
    transform: rotate(180deg);
}

/* Desplegado pero sin ser el periodo activo: se ilumina, no se tiñe de rojo.
   El rojo dice "es éste el que manda", y abrir el panel para mirar no aplica
   nada todavía. El :not() evita pisar el rojo cuando sí es el activo. */
.ms-time-custom[open] > summary:not(.is-active) {
    color: var(--text-primary);
}

/* El panel flota sobre el contenido para no estirar la fila de cabecera. */
.ms-time-custom > .ms-map-filter {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    z-index: 20;
    margin-bottom: 0;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    /* Sin ancho propio, una caja absoluta se encoge al de su referencia --la
       píldora-- y los dos campos de fecha se apilaban en cuatro filas.
       max-content le deja pedir lo que necesita; el tope lo devuelve a
       envolverse cuando la pantalla no da para tanto. */
    width: max-content;
    max-width: min(30rem, calc(100vw - var(--s-5)));
}

.ms-archive-header .ms-time-custom > .ms-map-filter {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* En móvil el panel NO puede caer en el flujo como hacía antes: ahora vive
   dentro de la píldora y en flujo la estiraría hasta convertirla en una caja.
   Se queda flotando, pero deja de colgar de la píldora y pasa a colgar de la
   FILA de filtros entera.

   El motivo: centrado sobre la píldora de tiempo se salía de la pantalla por
   la derecha, porque esa píldora no está centrada en la página (lleva la de
   región a su izquierda). Anclado a la fila, con left y right a cero, ocupa el
   ancho disponible y no hay forma de que se salga. De paso cae por debajo de
   los dos filtros en vez de taparle la mitad al de región.

   Se consigue quitando el position:relative de la píldora: sin él, la caja
   absoluta busca el siguiente antepasado posicionado, que es la fila. */
@media (max-width: 599px) {
    .ms-page-header__top {
        position: relative;
    }

    .ms-time-selector {
        position: static;
    }

    .ms-time-custom > .ms-map-filter,
    .ms-archive-header .ms-time-custom > .ms-map-filter {
        left: 0;
        right: 0;
        transform: none;
        width: auto;
        max-width: none;
    }
}

/* --- Region selector (site-wide geographic filter) ---------------- */
/* Misma píldora que el selector de periodo: los dos filtros se leen como
   controles del mismo grupo aunque uno sea una lista y el otro un formulario. */
.ms-region-selector {
    position: relative;
}

.ms-region-selector > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: rgba(0, 0, 0, .5);
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
    color: var(--text-mute);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .05em;
    white-space: nowrap;
}

.ms-region-selector > summary::-webkit-details-marker {
    display: none;
}

/* La bandera de la píldora, al tamaño del texto (.ms-flag es mucho mayor).
   Va calificada con .ms-flag porque si no empata en especificidad con ella y
   pierde: la .ms-flag de la media query de 600px está más abajo en el fichero
   y estiraba esta bandera a lo ancho del selector. */
.ms-flag.ms-region-selector__flag {
    width: 18px;
}

.ms-region-selector > summary:hover {
    color: var(--text-primary);
}

.ms-region-selector[open] > summary {
    color: var(--accent-red);
    border-color: var(--accent-red-line);
    text-shadow: var(--glow-sm);
}

/* El panel flota sobre el contenido, como el de rango personalizado. */
.ms-region-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 0;
    z-index: 20;
    width: min(92vw, 460px);
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--s-3);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    text-align: left;
}

/* En las cabeceras de archivo la fila va centrada: si el panel se anclara a la
   izquierda del control se saldría de la pantalla por la derecha. */
.ms-archive-header .ms-region-panel {
    left: 50%;
    transform: translateX(-50%);
}

.ms-region-panel__group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px;
}

.ms-region-panel__title {
    margin: var(--s-3) 0 var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border-color);
    color: var(--text-dim);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ms-region-option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--text-mute);
    font-size: .8rem;
    line-height: 1.2;
}

.ms-region-option:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text-primary);
}

.ms-region-option.is-active {
    color: var(--accent-red);
    font-weight: 700;
}

/* Calificada con .ms-flag por lo mismo que .ms-region-selector__flag. */
.ms-flag.ms-region-option__flag,
.ms-region-option__flag {
    flex: 0 0 auto;
    width: 18px;
}

/* Sin bandera (las regiones) va un globo, con el mismo hueco que la imagen
   para que las dos columnas de nombres queden alineadas. */
.ms-region-option__flag--none {
    width: 18px;
    text-align: center;
    font-size: .75rem;
}

.ms-region-option__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-region-option__count {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
    /* En móvil el panel flotante no cabe: lo dejamos en el flujo. */
    .ms-region-panel,
    .ms-archive-header .ms-region-panel {
        position: static;
        transform: none;
        width: auto;
        margin-top: var(--s-2);
    }
}

/* Estado vacío cuando el ámbito elegido no deja datos. */
.ms-empty {
    padding: var(--s-5) var(--s-4);
    color: var(--text-dim);
    text-align: center;
}

/* --- Legal / prose pages ------------------------------------------ */
/* Única zona del sitio con texto largo de leer, no de ojear. De ahí lo que
   la separa del resto: columna estrecha (a 1200px de ancho la vista salta de
   línea), interlineado alto y cuerpo atenuado, con el blanco reservado a lo
   que hay que poder encontrar de un vistazo (<strong>, titulares, términos
   de la lista de definiciones). */
.ms-legal {
    max-width: 72ch;
    margin: 0 auto;
    padding-bottom: var(--s-8);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-dim);
}

.ms-legal p {
    margin-top: var(--s-4);
}

.ms-legal strong {
    color: var(--text-primary);
    font-weight: 700;
}

.ms-legal a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* .ms-section-title trae su propio margen superior; aquí el aire tiene que
   ser mayor porque separa apartados, no bloques. */
.ms-legal .ms-section-title {
    margin-top: var(--s-8);
    text-align: left;
}

.ms-legal h3 {
    margin-top: var(--s-5);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

/* El reset global deja padding:0, así que sin esto los bocados quedan fuera
   de la caja y se los come el borde del contenedor. */
.ms-legal ul {
    margin-top: var(--s-3);
    padding-left: var(--s-5);
}

.ms-legal li {
    margin-top: var(--s-2);
}

.ms-legal li::marker {
    color: var(--accent-red);
}

.ms-legal__updated {
    font-size: var(--fs-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* Resumen de cabecera: lo mismo que dice el documento, en cinco líneas. Va
   en panel para que se lea como una tarjeta y no como el primer párrafo. */
.ms-legal__summary {
    margin-top: var(--s-5);
}

.ms-legal__summary-title {
    font-size: var(--fs-label);
    letter-spacing: .12em;
    color: var(--accent-red);
    text-shadow: var(--glow-sm);
}

.ms-legal__summary ul {
    margin-top: var(--s-2);
}

/* Pares dato/valor (responsable, contacto, ley aplicable, vías de respuesta
   a una solicitud). En dos columnas desde 600px; debajo se apilan, que es lo
   que hace un <dl> por defecto. */
.ms-legal__facts {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: var(--surface-1);
    border-left: var(--rule-h) solid var(--accent-red);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.ms-legal__facts dt {
    margin-top: var(--s-3);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: var(--fs-label);
    color: var(--text-primary);
}

.ms-legal__facts dt:first-child {
    margin-top: 0;
}

/* La tabla de terceros es la única del sitio con celdas de varias líneas:
   centrarlas verticalmente (lo que hace .ms-table) descuadra las filas. */
.ms-legal__table-wrap {
    margin-top: var(--s-4);
    overflow-x: auto;
}

.ms-legal__table {
    min-width: 640px;
}

.ms-legal__table tbody td {
    vertical-align: top;
    line-height: 1.5;
}

.ms-legal__table thead th {
    position: static; /* Documento largo: una cabecera pegajosa aquí flota sobre el texto. */
    box-shadow: inset 0 calc(-1 * var(--rule-h)) 0 0 var(--accent-red);
}

@media (min-width: 600px) {
    .ms-legal__facts {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--s-2) var(--s-4);
    }

    .ms-legal__facts dt,
    .ms-legal__facts dt:first-child {
        margin-top: 0;
        padding-top: 2px; /* Alinea la versalita con la línea base del valor. */
    }
}

/* --- Footer ------------------------------------------------------- */
.ms-footer {
    margin-top: var(--s-8);
    padding-bottom: var(--s-6);
    text-align: center;
}

.ms-footer .ms-rule {
    margin-bottom: var(--s-4);
}

.ms-footer__line {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: var(--s-1) 0;
}

.ms-footer__line strong {
    color: var(--text-primary);
    font-weight: 900;
}

/* --- Responsive --------------------------------------------------- */
/* Mobile-first min-width queries driven mostly by token overrides, so
   individual components need no per-breakpoint rules. */
@media (min-width: 600px) {
    :root {
        --emblem-size: 84px;
    }

    .ms-flag {
        width: 56px;
    }
}

@media (min-width: 900px) {
    :root {
        --emblem-size: 96px;
        --fs-h1: 3rem;
        --fs-value: 2.2rem;
        --fs-body: 1rem;
    }

    .ms-pod {
        min-height: 88px;
    }

    .ms-legend-pod {
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (min-width: 1200px) {
    :root {
        --emblem-size: 112px;
    }

    .ms-scroll {
        max-height: 720px;
    }

    .ms-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-5);
    }

    .ms-grid-2 > .ms-grid-full {
        grid-column: 1 / -1;
    }
}


/*
 * SHARED LAYOUT CONTAINER
 * The only class retained from the old gothic- layer: every template's
 * <main> still uses .gothic-container as its width-limited wrapper.
 * (The z-index rule that layers it above the circuit texture lives in
 * the app-shell section above.)
 */
.gothic-container,
.archive-container,
#front-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (min-width: 1200px) {
    .gothic-container,
    .archive-container,
    #front-page-container {
        max-width: 1240px;
    }
}
/* --- ELO: ladder, pod y grafico ----------------------------------- */

/* --- Como funciona el rating: el bloque del pie ------------------- */
/* Va despues de la tabla porque quien entra viene a ver la clasificacion.
   Separado del contenido de arriba por un margen grande y con un borde
   propio: se lee como un apendice, no como una fila mas de la pagina. */
.ms-explainer {
    /* El margen lateral es deliberado y no cero: la tabla va a sangre porque
       necesita el ancho, pero este bloque no compite con ella. Metido hacia
       dentro se lee como una nota al pie y ademas despega del borde de la
       ventana, que con el padding de .gothic-container quedaba a 20px. */
    margin: var(--s-8) var(--s-3) var(--s-7);
    padding: var(--s-5);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
}

@media (min-width: 760px) {
    .ms-explainer {
        margin-inline: var(--s-6);
        padding: var(--s-6) var(--s-7) var(--s-7);
    }
}

/* .ms-section-title trae su propio margen superior, que aqui sumaria al
   padding del panel y separaria el titulo de su propia caja. */
.ms-explainer > .ms-section-title {
    margin-top: 0;
}

.ms-explainer__grid {
    display: grid;
    gap: var(--s-5) var(--s-6);
    margin: var(--s-5) 0 0;
}

/* Dos columnas en cuanto hay sitio. El minmax en ch y no en px ata el
   salto al cuerpo de letra: se parte en dos cuando de verdad caben dos
   columnas legibles, no a un ancho de pantalla adivinado. */
@media (min-width: 760px) {
    .ms-explainer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ms-explainer__item dt {
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--accent-red-line);
    font-size: var(--fs-label);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-red);
}

.ms-explainer__item dd {
    margin: 0;
    max-width: 62ch;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text-dim);
}

/* Las cifras del sistema en blanco: son lo que se viene a buscar cuando
   se relee el bloque, y en gris se pierden dentro del parrafo. */
.ms-explainer__item strong {
    color: var(--text-primary);
    font-weight: 700;
}

.ms-explainer__item em {
    color: var(--text-primary);
    font-style: normal;
    font-weight: 700;
}

/* El rating es la cifra de la tabla: se le da el brillo del sistema y el
   resto de columnas se apagan a su alrededor. */
.ms-ladder__elo {
    font-size: 1.15em;
    font-weight: 900;
    text-shadow: var(--glow-text);
}

.ms-ladder__peak {
    color: var(--text-dim);
}

/* --- La fila a la que ha saltado el buscador --------------------- */
/* Puro :target, sin JS: el buscador del archivo lleva a #rank-<slug> y el
   navegador hace el salto y el resaltado el solo.

   El selector lleva .ms-table Y .ms-ladder a proposito. Las rayas de
   .ms-table tbody tr:nth-child(even) y el :hover tienen la misma
   especificidad que .ms-ladder tbody tr:target, asi que el desempate
   quedaria en el orden del fichero; con las dos clases gana siempre, que
   es lo que se quiere: una fila señalada sigue señalada al pasar el raton
   por encima.

   scroll-margin-top existe porque el <thead> es sticky dentro de
   .ms-scroll: sin el, la fila aterriza justo debajo de la cabecera y queda
   medio tapada. */
.ms-table.ms-ladder tbody tr:target {
    background: rgba(var(--accent-red-rgb), .13);
    box-shadow: inset 4px 0 0 0 var(--accent-red),
                0 0 18px rgba(var(--accent-red-rgb), .28);
    scroll-margin-top: 52px;
}

.ms-table.ms-ladder tbody tr:target td {
    border-bottom-color: var(--accent-red-line);
}


/* Marca de inactividad. No es una alarma —no ha hecho nada mal—, asi que
   va en gris y en minuscula, del tamano de una nota al margen: solo
   explica por que su rating esta por debajo de su maximo. */
.ms-ladder__idle {
    display: inline-block;
    margin-left: var(--s-2);
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
    vertical-align: 1px;
    cursor: help;
}

/* El puesto en el ladder, bajo el numero. Deliberadamente pequeno: la
   capsula ya esta llena y el puesto es contexto, no titular. */
.ms-pod__note {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
    line-height: 1.1;
}

/* --- El grafico de evolucion -------------------------------------- */
.ms-elo-chart {
    margin: var(--s-4) 0 var(--s-2);
    padding: var(--s-3) var(--s-2);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
}

/* El SVG lleva viewBox y ninguna medida propia: escala con el ancho
   disponible manteniendo la proporcion. overflow visible porque el punto
   del ultimo partido roza el borde derecho. */
.ms-elo-chart__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.ms-elo-chart__line {
    fill: none;
    stroke: var(--accent-red);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(var(--accent-red-rgb), .55));
}

/* El tramo en el que no se jugo: solo pasa el tiempo. Discontinuo, mas fino
   y sin halo, para que no compita con los tramos que si son una partida. */
.ms-elo-chart__line.is-decay {
    stroke: var(--text-mute);
    stroke-width: 1.6;
    stroke-dasharray: 3 4;
    filter: none;
}

.ms-elo-chart__dot {
    fill: var(--bg-color);
    stroke: var(--accent-red);
    stroke-width: 2;
}

/* Ni el punto de salida ni el de decaimiento son un resultado: van apagados
   para que contar los puntos rojos siga dando el numero de partidas. */
.ms-elo-chart__dot.is-decay,
.ms-elo-chart__dot.is-start {
    stroke: var(--text-mute);
    stroke-width: 1.6;
}

/* La linea del rating de salida. Discontinua y apagada para que se lea
   como referencia y no como una segunda serie. */
.ms-elo-chart__base {
    stroke: var(--text-mute);
    stroke-width: 1;
    stroke-dasharray: 4 5;
    opacity: .7;
}

.ms-elo-chart__tick {
    fill: var(--text-mute);
    font-family: var(--ff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.ms-elo-caption {
    margin: 0;
    font-size: .8rem;
    color: var(--text-dim);
}

/* --- El ELO en el historial de partidas --------------------------- */
/*
 * La celda es "1642 +15": una cifra grande y el incremento de esa partida.
 *
 * El problema a resolver es que el incremento cambia de ancho —"+4" ocupa
 * menos que "+15"— y al ir pegado al rating lo empujaba de fila en fila, con
 * lo que la columna de cifras grandes salia temblando. Asi que el incremento
 * va en una caja de ancho FIJO, dimensionada para el caso mas largo: signo y
 * dos cifras. Dos cifras bastan porque una partida no puede mover mas de la K
 * maxima, que son 40 puntos (ver ms_elo_k en inc/elo.php).
 *
 * El incremento va DELANTE del rating, asi que el hueco gemelo y vacio se
 * reserva DETRAS. Con los dos iguales el conjunto queda simetrico respecto a
 * la cifra grande, asi que centrar la celda centra el rating de verdad y el
 * rotulo <th> cae justo encima en lugar de desplazado hacia un lado.
 *
 * Las medidas van en ch y no en px para que sigan al cuerpo de letra: 1ch es
 * el ancho de un "0", y .ms-num ya fuerza cifras tabulares, con lo que todos
 * los digitos miden lo mismo.
 */
.ms-elo-cell {
    white-space: nowrap;
}

.ms-elo-value {
    display: inline-block;
    min-width: 4ch;       /* un rating siempre tiene cuatro cifras */
    margin-right: 3.4ch;  /* el gemelo vacio del hueco del incremento */
    text-align: right;
}

.ms-elo-delta {
    display: inline-block;
    min-width: 3ch;       /* signo + dos cifras */
    margin-right: .4ch;
    /* A la derecha dentro de su caja: asi el incremento queda pegado al
       rating y el hueco sobrante cae por fuera, no entre los dos. */
    text-align: right;
    font-size: .82em;
    font-weight: 700;
    /* Un pelin por debajo de la linea base. Con la letra mas pequena y las
       dos alineadas por la base, el incremento se leia como un exponente;
       bajandolo se apoya en el pie de la cifra grande. */
    vertical-align: -.12em;
    color: var(--text-mute);
}

.ms-elo-delta.is-up   { color: var(--result-win); }
.ms-elo-delta.is-down { color: var(--result-loss); }

/* --- Gaming community (pie de la ficha de jugador) ---------------- */
/* El rotulo copia la letra de .ms-section-title pero NO su clase: aquella
   arrastra el filete rojo del ::after y ocupa la linea entera, y aqui el
   texto y la bandera tienen que ir uno al lado del otro. */
/* El total detras del puesto ("3/120"). En em, no en rem: en las celdas con
   medalla el puesto se pinta a 2rem y el total tiene que encoger con el en vez
   de quedarse igual de grande y comerse la celda. */
.ms-placing__total {
    font-size: .62em;
    font-weight: 700;
    color: var(--text-mute);
}


/*
 * ROUND HISTORY
 * Los pesos de la fila cuentan quien se enfrenta a quien. Los dos nombres de
 * equipo van igual de marcados a los lados del marcador, y el torneo se retira
 * a peso normal: se repite en todas las filas y compite con lo que importa.
 * Va acotado con .ms-rounds porque ms_render_tournament_cell() lo comparten
 * otras dos tablas de la misma pagina, donde el torneo SI es el sujeto.
 */
.ms-rounds__team {
    font-weight: 700;
}

.ms-rounds .ms-event > a {
    font-weight: 400;
}


/*
 * "ARE YOU THIS PLAYER?"
 * Nota de servicio al pie de la ficha de jugador. Va a la derecha y en tono
 * apagado a proposito: no compite con los datos, solo tiene que estar ahi
 * cuando alguien la busque.
 */
.ms-claim {
    display: flex;
    justify-content: flex-end;
    margin: var(--s-6) 0 var(--s-4);
}

.ms-claim__open {
    /* Es un boton de verdad (abre algo, no navega), pero se lee como enlace. */
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .2s ease;
}

.ms-claim__open:hover,
.ms-claim__open:focus-visible {
    color: var(--accent-red);
}

/* El <dialog> es solo la caja: sin relleno propio, para que un click en el
   sea un click en el fondo y no en el panel. */
.ms-claim__dialog {
    width: min(560px, calc(100vw - 2 * var(--s-4)));
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    color: var(--text-primary);

    /* Centrado. Un <dialog> modal ya se centra solo: el navegador le pone
       position:fixed, inset:0 y margin:auto. Pero el reset de arriba de este
       fichero (* { margin: 0 }) le gana al del navegador, y con inset:0 y sin
       margen la caja se va a la esquina superior izquierda. Esto devuelve el
       auto que el reset se llevo por delante; no toques margin aqui. */
    margin: auto;

    /* Con la ventana muy baja el aviso no cabe: que se desplace el panel en
       vez de salirse por abajo sin manera de leer el final. */
    max-height: calc(100vh - 2 * var(--s-4));
    overflow: auto;
}

.ms-claim__dialog::backdrop {
    background: rgba(0, 0, 0, .72);
}

.ms-claim__panel {
    position: relative;
    padding: var(--s-6) var(--s-5) var(--s-5);
    font-family: var(--ff);
    font-size: var(--fs-body);
    line-height: 1.55;
}

.ms-claim__dismiss {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    margin: 0;
}

.ms-claim__close {
    appearance: none;
    background: none;
    border: 0;
    /* 44px de lado: la cruz se ve pequena, pero el sitio donde hay que acertar
       con el dedo no lo es. */
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .2s ease;
}

.ms-claim__close:hover,
.ms-claim__close:focus-visible {
    color: var(--accent-red);
}

.ms-claim__title {
    /* Deja sitio a la cruz para que un titulo largo no se le meta debajo. */
    margin: 0 44px var(--s-4) 0;
    font-family: var(--ff);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.ms-claim__panel p {
    margin: 0 0 var(--s-4);
    color: var(--text-dim);
}

.ms-claim__panel a {
    color: var(--text-primary);
    font-weight: 700;
}

.ms-claim__panel a:hover {
    color: var(--accent-red);
}

.ms-claim__fine {
    font-size: .82rem;
    color: var(--text-mute);
}

.ms-claim__cta {
    display: inline-block;
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--accent-red);
    border-radius: var(--r-md);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

/* Gana a la regla generica de enlaces del panel. */
.ms-claim__panel .ms-claim__cta {
    color: var(--accent-red);
}

.ms-claim__panel .ms-claim__cta:hover,
.ms-claim__panel .ms-claim__cta:focus-visible {
    background: var(--accent-red);
    color: var(--text-primary);
}


.ms-community {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.ms-community__title {
    margin: 0;
    font-family: var(--ff);
    font-size: var(--fs-h2);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: var(--glow-text);
}

/* La bandera se queda con el tamano de .ms-flag, el mismo que la de la
   cabecera: son el mismo tipo de dato y desentonaria que midieran distinto. */
.ms-community__country {
    display: inline-flex;
}

/* --- Columna Community del ladder --------------------------------- */
/* La bandera va al cuerpo de la fila y no al tamano de .ms-flag (46px, el de
   una cabecera): en una columna de 300 filas eso serian 300 sellos. Calificada
   con .ms-flag para ganarle a la regla de la media query de 600px, que esta
   mas arriba en el fichero y si no la estiraria. */
.ms-flag.ms-ladder__flag {
    width: 26px;
    vertical-align: middle;
}

/* El enlace no se subraya ni se tine: lo que se pulsa es la bandera. */
.ms-ladder__community {
    display: inline-flex;
    border-bottom: 0;
}

.ms-ladder__community:hover .ms-ladder__flag {
    border-color: var(--accent-red);
    box-shadow: var(--glow-sm);
}

/* --- Ranking de facciones (archive-facciones) ---------------------- */
/* Es un grafico de barras, no una tabla: la barra es el dato y la cifra que
   va detras la confirma. Va en HTML y CSS y no en un lienzo de Chart.js por
   tres razones que ahi no se podian tener a la vez: cada fila es un enlace a
   su ficha, lleva el emblema de la faccion delante, y todos los valores estan
   escritos, asi que no hay ningun numero que solo exista dentro de un globo.

   Las dos medidas van en columnas separadas, cada una con su escala y su eje.
   Superponer el punto de poblacion sobre la barra de win rate habria hecho
   que la distancia entre los dos significase algo, y no significa nada: la
   proporcion entre las dos escalas la elegimos nosotros. */

.ms-frank-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ms-frank {
    /* Las columnas se declaran una vez y las heredan cabecera y filas, que
       son rejillas hermanas: escritas dos veces se descuadrarian al primer
       retoque. */
    /* El ancho del numero y el hueco entre columnas se nombran porque la
       columna fija de mas abajo tiene que arrancar justo donde acaba el
       numero: escritos dos veces se descuadrarian al primer retoque. */
    --frank-rank: 2.2rem;
    --frank-gap: var(--s-4);
    --frank-cols: var(--frank-rank) minmax(132px, 1.3fr) minmax(180px, 2.6fr) 4.2rem 3.4rem 1px minmax(84px, 1fr) 5.8rem;
    --frank-grid: rgba(255, 255, 255, .06);
    --frank-axis: rgba(255, 255, 255, .16);

    min-width: 760px;
}

.ms-frank__head,
.ms-frank__row {
    display: grid;
    grid-template-columns: var(--frank-cols);
    align-items: center;
    /* 16px y no 12: con menos, el "0%" del eje de poblacion se pegaba al
       rotulo GAMES de al lado y parecia su unidad. */
    gap: 0 var(--frank-gap);
}

.ms-frank__head {
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-mute);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ms-frank__head .is-right {
    text-align: right;
}

/* El eje va arriba y no al pie: con 27 filas, uno abajo obliga a recordar la
   escala mientras se baja por la lista. */
.ms-frank__axis {
    position: relative;
    height: 1.1em;
}

.ms-frank__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Los extremos se apoyan hacia dentro para no salirse de la caja. */
.ms-frank__axis .ms-frank__tick:first-child {
    transform: none;
}

.ms-frank__axis .ms-frank__tick:last-child {
    transform: translateX(-100%);
}

.ms-frank__tick.is-zero {
    color: var(--text-dim);
}

/* --- Fila --- */
.ms-frank__row {
    padding: 3px 0;
    border-radius: var(--r-sm);
    color: var(--text-primary);
    border-bottom: 0; /* el tema subraya los enlaces; aqui la fila no es texto */
}

.ms-frank__row:hover,
.ms-frank__row:focus-visible {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.ms-frank__rank {
    color: var(--text-mute);
    text-align: right;
    font-size: .8rem;
}

.ms-frank__name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

/* Alto fijo y ancho libre: los iconos de faccion son verticales y de
   proporciones distintas entre si (ver .ms-emblem--img). Lo que tiene que
   cuadrar de fila a fila es el nombre, no el dibujo. */
.ms-frank__emblem {
    --emblem-size: 26px;
    flex: 0 0 auto;
}

.ms-frank__emblem img {
    height: 26px;
    width: auto;
    max-width: 34px;
    object-fit: contain;
}

.ms-frank__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: .92rem;
}

/* --- Pistas --- */
.ms-frank__track {
    position: relative;
    height: 18px;
}

/* Reja de la pista de win rate: una linea cada cuarto, que es donde caen las
   marcas del eje. Solida y a un tono de la superficie, nunca discontinua: un
   trazo a rayas se lee como un umbral y esto solo es la reja. */
.ms-frank__track--wr {
    background: repeating-linear-gradient(to right,
        var(--frank-grid) 0 1px,
        transparent 1px 25%);
}

/* El 50% se marca mas fuerte: es el cero de la escala, el punto contra el que
   se lee si una faccion gana o pierde. */
.ms-frank__track--wr::before,
.ms-frank__track--pop::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--frank-axis);
}

.ms-frank__track--wr::before {
    left: 50%;
}

.ms-frank__track--pop::before {
    left: 0;
}

.ms-frank__bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    min-width: 2px; /* un 50,0% clavado sigue teniendo que verse */
}

/* Solo se redondea el extremo del dato; el que nace en el eje queda a escuadra
   para que se vea de donde sale. */
.ms-frank__bar.is-up {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.ms-frank__bar.is-down {
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* Poblacion: un punto sobre su escala, con el tallo hasta el cero. El tallo
   es lo que hace legible la posicion; el punto solo, en una columna estrecha,
   se lee mal. Mismo naranja oscuro que --accent-team (parrilla de torneos,
   marco de equipos y pin del mapa), que no se cruza con el verde y el rojo
   del win rate de al lado. Antes era azul, de la paleta de series
   (ms_series_palette()); ese uso no cambia, solo este. */
.ms-frank__stem {
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(var(--accent-team-rgb), .40);
}

.ms-frank__dot {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--accent-team);
    box-shadow: 0 0 0 2px var(--surface-1);
}

/* --- Cifras --- */
/* Van en tinta de texto, no del color de su barra: el color ya lo lleva la
   marca que tienen al lado, y 27 cifras verdes y rojas en columna se leen
   como una alarma. En las pastillas de la ficha si van tenidas, porque alli
   no hay ninguna barra que lo diga. */
.ms-frank__value {
    text-align: right;
    font-size: .85rem;
    white-space: nowrap;
}

.ms-frank__value--dim {
    color: var(--text-dim);
    font-weight: 400;
}

/* --- Separador entre las dos medidas -------------------------------- */
/* Sin el, el punto de poblacion caia justo detras de la cifra de Games y se
   leia como si fuera un adorno suyo. La linea dice que ahi empieza otra
   medida, con su propia escala y su propio eje.

   Es una columna de 1px de la rejilla y no un borde de la celda de al lado: el
   borde solo mide lo que mide su celda, y como las celdas van centradas
   (align-items: center) la linea habria salido a trozos, uno por fila. */
.ms-frank__sep {
    align-self: stretch;
    /* Come el relleno vertical de la fila para que los tramos se toquen y la
       linea baje entera de la cabecera al ultimo puesto. */
    margin: -3px 0;
    background: var(--border-color);
}

.ms-frank__head .ms-frank__sep {
    margin: 0;
}

/* --- Columna fija al desplazar (pantallas estrechas) ----------------- */
/* El grafico mide 760px como minimo, asi que por debajo de eso se desplaza a
   lo ancho. Sin fijar el nombre, al llegar a Appearances ya no se sabe de que
   faccion es la fila que se esta mirando.

   Se fijan las DOS primeras columnas, no solo el nombre: el puesto es medio
   dato del nombre, y dejarlo suelto lo mandaba a desaparecer por debajo. */
@media (max-width: 820px) {
    .ms-frank__rank,
    .ms-frank__name {
        position: sticky;
        z-index: 2;
        /* Tapan lo que pasa por debajo: sin fondo propio, las barras se veian
           a traves del nombre. */
        background: var(--surface-1);
    }

    .ms-frank__rank {
        left: 0;
    }

    /* Arranca donde acaba el numero, o las dos se apilarian en el mismo sitio. */
    .ms-frank__name {
        left: calc(var(--frank-rank) + var(--frank-gap));
        /* Tres capas, de delante a atras: tapar el hueco de 16px que queda a
           la izquierda, el filo de la columna, y una sombra que se proyecta
           sobre lo que viene detras.
           La sombra no es adorno. Al desplazar, la cifra de Games pasa por
           DEBAJO del nombre y se ve a medias: "115" se leia como "15", que es
           un numero perfectamente creible. La sombra dice que ahi hay algo
           tapado en vez de dejar que parezca un dato mas corto. */
        box-shadow: calc(var(--frank-gap) * -1) 0 0 var(--surface-1),
                    1px 0 0 var(--border-color),
                    7px 0 9px -4px rgba(0, 0, 0, .8);
    }

    /* El fondo del hover lo pinta la fila, pero estas dos celdas llevan el
       suyo por encima: sin esto, la fila se iluminaba salvo el nombre. */
    .ms-frank__row:hover .ms-frank__rank,
    .ms-frank__row:hover .ms-frank__name,
    .ms-frank__row:focus-visible .ms-frank__rank,
    .ms-frank__row:focus-visible .ms-frank__name {
        background: var(--surface-hover);
    }

    .ms-frank__row:hover .ms-frank__name,
    .ms-frank__row:focus-visible .ms-frank__name {
        box-shadow: calc(var(--frank-gap) * -1) 0 0 var(--surface-hover),
                    1px 0 0 var(--border-color),
                    7px 0 9px -4px rgba(0, 0, 0, .8);
    }

    /* La cabecera va por encima de las filas cuando las dos se cruzan. */
    .ms-frank__head .ms-frank__rank,
    .ms-frank__head > span:nth-child(2) {
        z-index: 3;
    }

    .ms-frank__head > span:nth-child(2) {
        position: sticky;
        left: calc(var(--frank-rank) + var(--frank-gap));
        background: var(--surface-1);
        box-shadow: calc(var(--frank-gap) * -1) 0 0 var(--surface-1),
                    1px 0 0 var(--border-color),
                    7px 0 9px -4px rgba(0, 0, 0, .8);
    }
}

/* --- Matriz de disposiciones (archive-facciones) --------------------- */
/* El numero de partidas va DEBAJO de cada porcentaje, no en un globo: en una
   matriz no cabe una columna de muestra por celda, y un win rate sin saber
   sobre cuantas partidas se calculo invita a leer como tendencia lo que es
   ruido. Aqui hay celdas de 22 partidas y otras de 43. */
.ms-dmx__n {
    display: block;
    margin-top: 1px;
    color: var(--text-mute);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

/* La primera columna es la etiqueta de la fila, no un dato: se separa del
   bloque de cifras con el mismo filo que usa el ranking de facciones. */
.ms-dmx tbody td:first-child {
    white-space: nowrap;
}

.ms-dmx th:nth-child(2),
.ms-dmx td:nth-child(2) {
    border-right: 1px solid var(--border-color);
}

/* --- Graficos de series y sus notas -------------------------------- */
/* Alto generoso: la leyenda de Chart.js se dibuja DENTRO del lienzo, y con 27
   facciones encendidas ocupa varias filas. Con 320px, encenderlas todas
   dejaba el grafico convertido en leyenda. */
.ms-chart-box {
    position: relative;
    height: 520px;
}

@media (max-width: 768px) {
    .ms-chart-box {
        height: 560px;
    }
}

/* Al pie del ranking: lo que la barra no puede decir por si misma (que cuenta
   un empate, que pasa con los espejos) y las etiquetas que se han quedado
   fuera. En pequeno, pero va: son las decisiones que hacen que la cifra sea la
   que es, y la lista de fusiones pendientes. */
.ms-chart-note {
    margin: var(--s-4) 0 0;
    color: var(--text-mute);
    font-size: .78rem;
    line-height: 1.55;
}