/* Fuente única de color, tipografía y medidas de la web pública.
 *
 * El archivo va por capas, y ese orden importa:
 *
 *   1. Escala      Formas y sombras. No llevan color de marca: valen para las dos pieles.
 *   2. Web         La identidad que manda: ciencia ficción (nebulosa morada). Es el armazón de todo el sitio.
 *   3. Cladia      La piel de Master of Cladia: fantasía de pergamino. Solo para el contenido de ese juego.
 *   4. Primitivas  Blancos, negros y acentos con transparencia, más gradientes y utilidades compartidas.
 *   5. Legado      Colores que aún viven atados a una vista concreta. Se van retirando al migrar cada una (WP16.4).
 *
 * Regla de uso: en las hojas se usan los papeles de la capa 2 o de la capa 3 (superficie, texto, borde, acento),
 * no los colores sueltos. Un color nuevo se declara aquí antes de usarse, y nunca se escribe un valor literal fuera.
 */
:root {
    /* ===================================================================
       1. ESCALA
       =================================================================== */

    /* Tipografía: las fuentes las sirve el kit de Adobe Fonts del layout (use.typekit.net). */
    --qg-public-font-heading: futura-pt, sans-serif;
    --qg-public-font-body: proxima-nova, sans-serif;

    /* Radios. Antes convivían más de veinte valores distintos, en píxeles y en rem; estos cinco los sustituyen. */
    --qg-public-radius-xs: .25rem;
    --qg-public-radius-sm: .5rem;
    --qg-public-radius-md: .75rem;
    --qg-public-radius-lg: 1rem;
    --qg-public-radius-xl: 1.25rem;
    --qg-public-radius-pill: 62.5rem;
    --qg-public-radius-circle: 50%;

    /* Espaciado. El ritmo vertical de las páginas iba a ojo: en Inicio convivían 0, 14, 50 y 100 px, y en Contacto
       los rellenos estaban en porcentajes, que cambian con el ancho de la ventana. Estos son los pasos. */
    --qg-public-space-xs: .5rem;
    --qg-public-space-sm: 1rem;
    --qg-public-space-md: 1.5rem;
    --qg-public-space-lg: 2.5rem;
    --qg-public-space-xl: 4rem;

    /* Aire vertical entre secciones de una página, y relleno interior de un panel. */
    --qg-public-space-section: clamp(2.5rem, 5vw, 4.5rem);
    --qg-public-space-panel: clamp(1.25rem, 2vw, 2rem);

    /* Elevación: reposo, flotante y modal. */
    --qg-public-shadow-1: 0 .25rem .75rem var(--qg-public-color-black-30);
    --qg-public-shadow-2: 0 1.125rem 2.25rem var(--qg-public-color-black-65);
    --qg-public-shadow-3: 0 1.25rem 3.75rem var(--qg-public-color-black-55);

    /* ===================================================================
       2. WEB: identidad de ciencia ficción (armazón de todo el sitio)
       =================================================================== */

    /* Paleta de marca */
    --qg-public-color-primary: #8e44ad;
    --qg-public-color-primary-light: #bd7ad5;
    --qg-public-color-secondary-coral: #e76f6b;
    --qg-public-color-secondary-coral-hover: #f08a86;
    /* El rojo que la plantilla usa como color de marca. Llevaba 64 apariciones en su hoja y ninguna
       variable, asi que se declara aqui y se usa a proposito, no por herencia. */
    --qg-public-color-carmin: #d31c3e;
    --qg-public-color-carmin-hover: #e8365a;
    --qg-public-color-gold-dark: #a67c00;
    --qg-public-color-gold: #d4af37;
    --qg-public-color-gold-light: #f0d57a;
    --qg-public-color-gold-bright: #fff2b8;
    --qg-public-color-cyan: #26e7ff;
    --qg-public-color-cyan-soft: #67e8f9;
    --qg-public-color-white: #fff;
    --qg-public-color-black: #000;

    /* Papeles: superficie. Es lo que decide si algo se lee como fondo, tarjeta, panel flotante o hueco. */
    --qg-public-surface-page: #1f1d29;
    --qg-public-surface-card: rgb(31 29 41 / 82%);
    --qg-public-surface-raised: #322d42;
    --qg-public-surface-sunken: rgb(0 0 0 / 25%);

    /* Papeles: texto y borde */
    --qg-public-text-strong: var(--qg-public-color-white);
    --qg-public-text-base: rgb(255 255 255 / 86%);
    --qg-public-text-muted: rgb(255 255 255 / 65%);
    --qg-public-border-subtle: rgb(255 255 255 / 12%);
    --qg-public-border-strong: rgb(255 255 255 / 30%);

    /* Papeles: acento */
    --qg-public-accent: var(--qg-public-color-primary);
    --qg-public-accent-light: var(--qg-public-color-primary-light);
    --qg-public-accent-warm: var(--qg-public-color-secondary-coral);
    --qg-public-accent-gold: var(--qg-public-color-gold);
    /* El acento de las acciones: botones, casillas y radios. */
    --qg-public-accent-action: var(--qg-public-color-carmin);
    --qg-public-accent-action-hover: var(--qg-public-color-carmin-hover);

    /* Superficies con nombre propio que ya estaban en uso. Se irán reduciendo a los papeles de arriba. */
    --qg-public-color-surface-page: var(--qg-public-surface-page);
    --qg-public-color-surface-dropdown: var(--qg-public-surface-raised);
    --qg-public-color-surface-login: rgb(40 37 53 / 96%);
    --qg-public-color-surface-session: rgb(39 29 42 / 88%);
    --qg-public-color-surface-session-hover: rgb(71 37 47 / 92%);
    --qg-public-color-surface-deep: rgb(4 10 25 / 96%);
    --qg-public-color-surface-deep-soft: rgb(7 20 36 / 72%);
    --qg-public-color-surface-cyan: rgb(9 43 64 / 94%);
    --qg-public-color-comment-picker: rgb(24 24 32 / 98%);
    --qg-public-color-nav: #292440;
    --qg-public-color-nav-muted: #3a3747;
    --qg-public-color-nav-hover: #524f5f;
    --qg-public-color-ink: #172033;
    --qg-public-color-ink-gold: #1a120b;

    /* Estados */
    --qg-public-color-danger: #ef4444;
    --qg-public-color-danger-soft: #fecaca;
    --qg-public-color-warning: #f59e0b;
    --qg-public-color-success: #4ade80;

    /* Texto enriquecido de los posts */
    --qg-public-color-post-strong: #ff0a64;
    --qg-public-color-post-link: #be64a5;

    /* Marca de Discord (blurple), para el acceso a la comunidad */
    --qg-public-color-discord: #5865f2;
    --qg-public-color-discord-hover: #4752c4;

    /* Banda de migas de pan (WP28). Arriba del todo la barra es transparente y deja ver la parte alta de la banda, así
       que esa franja conserva el fondo de la página y el resto va algo más oscuro: barra y migas se distinguen. El
       corte cae en los 100 px de la barra. */
    --qg-public-color-surface-breadcrumb: #17151f;
    --qg-public-gradient-breadcrumb: linear-gradient(to bottom, var(--qg-public-color-surface-page) 6.25rem, var(--qg-public-color-surface-breadcrumb) 6.25rem);

    /* ===================================================================
       3. CLADIA: piel de pergamino (solo contenido de Master of Cladia)
       =================================================================== */

    /* Papeles de la piel, equivalentes a los de la capa 2. Las vistas de Cladia usan estos. */
    --qg-public-moc-surface: var(--qg-public-color-game-window);
    --qg-public-moc-surface-page: var(--qg-public-color-game-page);
    --qg-public-moc-surface-desk: var(--qg-public-color-game-desk);
    --qg-public-moc-border: var(--qg-public-color-game-frame);
    --qg-public-moc-ink: var(--qg-public-color-game-ink);
    --qg-public-moc-ink-soft: var(--qg-public-color-game-ink-brown);
    --qg-public-moc-accent: var(--qg-public-color-bronze);
    --qg-public-moc-accent-light: var(--qg-public-color-brass);

    /* Superficies de la piel sobre la escena de fondo: llevan velo para que la imagen respire por detrás. */
    --qg-public-moc-surface-card: rgb(41 38 34 / 92%);
    --qg-public-moc-surface-sunken: rgb(24 22 20 / 70%);

    /* Texto de la piel cuando va sobre superficie oscura (sobre papel se usa la tinta). */
    --qg-public-moc-text: rgb(245 230 200 / 92%);
    --qg-public-moc-text-muted: rgb(245 230 200 / 62%);

    /* Estados de la piel. Los del juego (game-positive y game-negative) son para papel y quedan oscuros aquí. */
    --qg-public-moc-positive: #7bbf5a;
    --qg-public-moc-negative: #d9604a;
    --qg-public-moc-highlight: var(--qg-public-color-gold-pale);

    /* Velo del banner de la cabecera del perfil, sobre la ilustración de dragones. */
    --qg-public-gradient-moc-banner: linear-gradient(135deg, var(--qg-public-moc-surface-card) 0%, var(--qg-public-moc-surface-sunken) 100%);

    /* Fuentes del juego (excepción acordada a la regla tipográfica; las carga _GameElementAssets). */
    --qg-public-font-game-title: "Trade Winds", var(--qg-public-font-heading);
    --qg-public-font-game-text: "Cinzel", Georgia, serif;

    /* Rareza: paleta del marco de las dotes en el juego (DotePrefab) */
    /* JC09: en el juego, las malas son magenta (#e1007d) y las muy malas, rojo puro. El usuario prefiere que las
       dos se lean como malas, con el mismo rojo: «Malas» solo se da en las dotes de unidad y «Muy malas» solo en
       las de lugar, así que nunca coinciden en una pestaña. Se aparta de la paleta del juego a propósito. */
    --qg-public-color-game-rarity-bad: #d32030;
    --qg-public-color-game-rarity-very-bad: var(--qg-public-color-game-rarity-bad);
    --qg-public-color-game-rarity-common: #c8c8c8;
    --qg-public-color-game-rarity-uncommon: #7dc800;
    --qg-public-color-game-rarity-rare: #007dff;
    --qg-public-color-game-rarity-epic: #af00ff;
    --qg-public-color-game-rarity-unique: #ffaf00;

    /* Ventana de detalle de una dote: fondo carbón, marco de bronce, losa de papel y efectos sobre madera */
    --qg-public-color-game-window: #34312d;
    --qg-public-color-game-window-dark: #1f1d1b;
    --qg-public-color-game-frame: #ecad92;
    --qg-public-color-game-frame-55: rgb(236 173 146 / 55%);
    --qg-public-color-game-frame-25: rgb(236 173 146 / 25%);
    --qg-public-color-game-tile: #c79d6b;
    --qg-public-color-game-tile-dark: #9c7147;
    --qg-public-color-game-desk: #4b3427;
    --qg-public-color-game-desk-dark: #2e2019;
    --qg-public-color-game-bevel-light: rgb(255 255 255 / 35%);
    --qg-public-gradient-game-window: radial-gradient(120% 90% at 50% 0%, var(--qg-public-color-game-window), var(--qg-public-color-game-window-dark));
    --qg-public-gradient-game-tile: radial-gradient(circle at 35% 30%, var(--qg-public-color-game-tile), var(--qg-public-color-game-tile-dark));
    --qg-public-gradient-game-desk: linear-gradient(180deg, var(--qg-public-color-game-desk), var(--qg-public-color-game-desk-dark));
    /* JC05: tablones de la madera de los efectos (una junta cada 2,5rem) y brillo del marco metálico del icono. */
    --qg-public-gradient-game-planks: repeating-linear-gradient(180deg, transparent 0 2.4rem, var(--qg-public-color-black-38) 2.4rem 2.5rem), var(--qg-public-gradient-game-desk);
    --qg-public-gradient-game-metal: linear-gradient(145deg, var(--qg-public-color-white-35) 0%, transparent 40%, transparent 60%, var(--qg-public-color-black-46) 100%);
    /* JC06: cuero de las pestañas y filtros del Grimorio, y página de libro envejecida (más tostada que la de los
       conjuros, que sobre el fondo oscuro de la web deslumbraba en superficies grandes). */
    --qg-public-gradient-moc-leather: linear-gradient(180deg, var(--qg-public-color-leather-mid), var(--qg-public-color-leather-black));
    --qg-public-gradient-moc-book-page: radial-gradient(ellipse at 50% 42%, var(--qg-public-color-parchment-mid) 0%, var(--qg-public-color-parchment-gold) 58%, var(--qg-public-color-brown-light) 100%);

    /* Página del libro de conjuros: papel crema con los bordes tostados y tinta oscura */
    --qg-public-color-game-page: #f3e7d1;
    --qg-public-color-game-page-dark: #e2cda8;
    --qg-public-color-game-page-edge: rgb(140 78 22 / 50%);
    --qg-public-color-game-ink: #1d1611;
    --qg-public-color-game-ink-brown: #48120a;
    --qg-public-color-game-ink-25: rgb(72 18 10 / 25%);
    --qg-public-color-game-legendary: #9a6b00;
    --qg-public-color-game-positive: #1c7a2e;
    --qg-public-color-game-negative: #b3261e;
    --qg-public-gradient-game-page: radial-gradient(130% 110% at 50% 45%, var(--qg-public-color-game-page) 60%, var(--qg-public-color-game-page-dark));
    --qg-public-shadow-game-card: 0 .75rem 2rem rgb(0 0 0 / 45%);

    /* Metales de la clasificación y los rangos */
    --qg-public-color-gold-pure: #ffd700;
    --qg-public-color-gold-deep: #8c6a00;
    --qg-public-color-gold-pale: #ffe48a;
    --qg-public-color-gold-border: rgb(240 213 122 / 88%);
    --qg-public-color-gold-shadow: rgb(194 142 70 / 40%);
    --qg-public-color-goldenrod-50: rgb(184 134 11 / 50%);
    --qg-public-color-silver-dark: #757575;
    --qg-public-color-silver-light: #e0e0e0;
    --qg-public-color-silver-mid: #8e8e8e;
    --qg-public-color-silver-bright: #f5f5f5;
    --qg-public-color-silver-50: rgb(192 192 192 / 50%);
    --qg-public-color-bronze: #c28e46;
    --qg-public-color-bronze-dark: #804a00;
    --qg-public-color-bronze-light: #ca7345;
    --qg-public-color-bronze-mid: #a45a2a;
    --qg-public-color-bronze-bright: #ff9d6a;
    --qg-public-color-bronze-pale: #ffccaa;
    --qg-public-color-bronze-20: rgb(194 142 70 / 20%);
    --qg-public-color-bronze-30: rgb(194 142 70 / 30%);
    --qg-public-color-bronze-75: rgb(194 142 70 / 75%);
    --qg-public-color-brass: #c89b3c;
    --qg-public-color-brass-80: rgb(200 155 60 / 80%);
    --qg-public-color-brass-light: #bfa76a;

    /* Cuero, pergamino y madera */
    --qg-public-color-leather: #8b5a2b;
    --qg-public-color-leather-40: rgb(139 90 43 / 40%);
    --qg-public-color-leather-dark: #2b1d0f;
    --qg-public-color-leather-black: #1a1209;
    --qg-public-color-leather-mid: #4e3b2a;
    --qg-public-color-parchment: #f1e4c3;
    --qg-public-color-parchment-light: #f5e6c8;
    --qg-public-color-parchment-mid: #e8d5a8;
    --qg-public-color-parchment-gold: #d6b97c;
    --qg-public-color-brown: #63411a;
    --qg-public-color-brown-light: #8d7051;
    --qg-public-color-brown-30: rgb(99 65 26 / 30%);
    --qg-public-color-brown-35: rgb(99 65 26 / 35%);
    --qg-public-color-brown-40: rgb(99 65 26 / 40%);
    --qg-public-color-sienna-50: rgb(160 82 45 / 50%);
    --qg-public-color-copper-76: rgb(201 112 24 / 76%);
    --qg-public-color-wine-dark-70: rgb(35 25 30 / 70%);
    --qg-public-color-blood-dark-50: rgb(30 10 10 / 50%);

    /* Gradientes de la piel */
    --qg-public-gradient-gold: linear-gradient(135deg, var(--qg-public-color-gold-dark), var(--qg-public-color-gold-light), var(--qg-public-color-gold));
    --qg-public-gradient-gold-light: linear-gradient(135deg, var(--qg-public-color-gold-light), var(--qg-public-color-gold-bright), var(--qg-public-color-gold));
    --qg-public-gradient-official: linear-gradient(90deg, var(--qg-public-color-gold-pure), var(--qg-public-color-orange));
    --qg-public-gradient-jugadores-divisor-alquimico: linear-gradient(90deg, transparent, var(--qg-public-color-bronze), transparent);
    --qg-public-gradient-jugadores-spell-counter-rango-1: linear-gradient(135deg, var(--qg-public-color-gold-dark), var(--qg-public-color-gold-light), var(--qg-public-color-gold-deep), var(--qg-public-color-gold));
    --qg-public-gradient-jugadores-spell-counter-rango-2: linear-gradient(135deg, var(--qg-public-color-silver-dark), var(--qg-public-color-silver-light), var(--qg-public-color-silver-mid), var(--qg-public-color-silver-bright));
    --qg-public-gradient-jugadores-spell-counter-rango-3: linear-gradient(135deg, var(--qg-public-color-bronze-dark), var(--qg-public-color-bronze-light), var(--qg-public-color-bronze-mid), var(--qg-public-color-bronze-bright));
    --qg-public-shadow-gold: 0 0 .95rem rgb(194 142 70 / 40%), inset 0 .0625rem 0 var(--qg-public-color-white-35);
    --qg-public-shadow-gold-hover: 0 0 1.375rem rgb(240 213 122 / 55%), inset 0 .0625rem 0 var(--qg-public-color-white-48);

    /* ===================================================================
       4. PRIMITIVAS: transparencias, gradientes y utilidades compartidas
       =================================================================== */

    --qg-public-color-white-02: rgb(255 255 255 / 2%);
    --qg-public-color-white-05: rgb(255 255 255 / 5%);
    --qg-public-color-white-08: rgb(255 255 255 / 8%);
    --qg-public-color-white-10: rgb(255 255 255 / 10%);
    --qg-public-color-white-12: rgb(255 255 255 / 12%);
    --qg-public-color-white-15: rgb(255 255 255 / 15%);
    --qg-public-color-white-16: rgb(255 255 255 / 16%);
    --qg-public-color-white-20: rgb(255 255 255 / 20%);
    --qg-public-color-white-30: rgb(255 255 255 / 30%);
    --qg-public-color-white-35: rgb(255 255 255 / 35%);
    --qg-public-color-white-48: rgb(255 255 255 / 48%);
    --qg-public-color-white-50: rgb(255 255 255 / 50%);
    --qg-public-color-white-58: rgb(255 255 255 / 58%);
    --qg-public-color-white-62: rgb(255 255 255 / 62%);
    --qg-public-color-white-65: rgb(255 255 255 / 65%);
    --qg-public-color-white-70: rgb(255 255 255 / 70%);
    --qg-public-color-white-72: rgb(255 255 255 / 72%);
    --qg-public-color-white-78: rgb(255 255 255 / 78%);
    --qg-public-color-white-86: rgb(255 255 255 / 86%);
    --qg-public-color-black-05: rgb(0 0 0 / 5%);
    --qg-public-color-black-08: rgb(0 0 0 / 8%);
    --qg-public-color-black-10: rgb(0 0 0 / 10%);
    --qg-public-color-black-18: rgb(0 0 0 / 18%);
    --qg-public-color-black-20: rgb(0 0 0 / 20%);
    --qg-public-color-black-22: rgb(0 0 0 / 22%);
    --qg-public-color-black-30: rgb(0 0 0 / 30%);
    --qg-public-color-black-38: rgb(0 0 0 / 38%);
    --qg-public-color-black-40: rgb(0 0 0 / 40%);
    --qg-public-color-black-46: rgb(0 0 0 / 46%);
    --qg-public-color-black-50: rgb(0 0 0 / 50%);
    --qg-public-color-black-55: rgb(0 0 0 / 55%);
    --qg-public-color-black-60: rgb(0 0 0 / 60%);
    --qg-public-color-black-65: rgb(0 0 0 / 65%);
    --qg-public-color-black-70: rgb(0 0 0 / 70%);
    --qg-public-color-black-80: rgb(0 0 0 / 80%);
    --qg-public-color-coral-13: rgb(231 111 107 / 13%);
    --qg-public-color-carmin-45: rgb(211 28 62 / 45%);
    --qg-public-color-coral-45: rgb(231 111 107 / 45%);
    --qg-public-color-danger-deep-42: rgb(127 29 29 / 42%);
    --qg-public-color-danger-58: rgb(248 113 113 / 58%);
    --qg-public-color-danger-70: rgb(239 68 68 / 70%);
    --qg-public-color-warning-70: rgb(245 158 11 / 70%);
    --qg-public-color-success-70: rgb(74 222 128 / 70%);
    --qg-public-color-cyan-13: rgb(32 227 255 / 13%);
    --qg-public-color-cyan-24: rgb(103 232 249 / 24%);
    --qg-public-color-cyan-58: rgb(38 231 255 / 58%);
    --qg-public-gradient-overlay-bottom: linear-gradient(to bottom, rgb(0 0 0 / 0%), var(--qg-public-color-black));
    --qg-public-gradient-overlay-top: linear-gradient(to top, rgb(255 255 255 / 0%), var(--qg-public-color-black));
    --qg-public-gradient-status: linear-gradient(135deg, rgb(4 10 25 / 86%), var(--qg-public-color-surface-deep-soft));
    --qg-public-gradient-development: linear-gradient(100deg, var(--qg-public-color-surface-deep), var(--qg-public-color-surface-cyan), var(--qg-public-color-surface-deep));

    /* Sombras con nombre propio, ya en uso. Equivalen a los tres niveles de la escala. */
    --qg-public-shadow-dark: 0 1.5rem 3.5rem var(--qg-public-color-black-38);
    --qg-public-shadow-dropdown: var(--qg-public-shadow-2);
    --qg-public-shadow-login: var(--qg-public-shadow-3);

    /* ===================================================================
       5. LEGADO: colores atados a una vista, pendientes de migrar (WP16.4)
       =================================================================== */

    /* Detalle de partida */
    --qg-public-color-amber-light: #ffe39a;
    --qg-public-color-amber-14: rgb(255 211 83 / 14%);
    --qg-public-color-amber-32: rgb(255 211 83 / 32%);
    --qg-public-color-amber-85: rgb(255 211 83 / 85%);
    --qg-public-color-stat-peach: #ffb199;
    --qg-public-color-stat-ember: #ff5533;
    --qg-public-color-stat-blood: #770000;
    --qg-public-color-stat-red: #ff0000;
    --qg-public-color-stat-red-40: rgb(255 0 0 / 40%);
    --qg-public-color-stat-red-50: rgb(255 0 0 / 50%);
    --qg-public-color-stat-orangered: #ff4500;
    --qg-public-color-stat-orangered-15: rgb(255 69 0 / 15%);
    --qg-public-color-stat-orangered-18: rgb(255 69 0 / 18%);
    --qg-public-color-stat-orangered-30: rgb(255 69 0 / 30%);
    --qg-public-color-stat-orangered-40: rgb(255 69 0 / 40%);
    --qg-public-color-stat-salmon-30: rgb(255 120 100 / 30%);
    --qg-public-color-stat-fire-50: rgb(255 50 0 / 50%);
    --qg-public-color-stat-fire-light-20: rgb(255 60 0 / 20%);
    --qg-public-gradient-partida-detalle-spell-info-wrapper: linear-gradient(to right, transparent, var(--qg-public-color-black) 10%, var(--qg-public-color-black) 90%, transparent);
    --qg-public-gradient-partida-detalle-spell-counter: linear-gradient(135deg, var(--qg-public-color-stat-blood) 0%, var(--qg-public-color-stat-red) 100%);

    /* Estadísticas */
    --qg-public-color-light-gray: #f8f9fa;
    --qg-public-color-border-light: #ced4da;
    --qg-public-color-stat-blue-bright: #007bff;
    --qg-public-color-stat-blue-bright-25: rgb(0 123 255 / 25%);
    --qg-public-color-blue-dark: #0056b3;
    --qg-public-color-warning-yellow: #ffc107;
    --qg-public-color-gray-dark: #495057;
    --qg-public-color-gray: #6c757d;
    --qg-public-color-gray-mid: #555555;
    --qg-public-color-charcoal: #2c2c2c;
    --qg-public-color-text-dark: #222;
    --qg-public-color-orange: #ffa500;

    /* Perfil de jugador: azules y acentos de panel genérico, ajenos a las dos identidades. Salen en WP16.4. */
    --qg-public-color-night: #0b0e14;
    --qg-public-color-night-deep: #050a18;
    --qg-public-color-night-blue: #12182b;
    --qg-public-color-navy-night: #0f1425;
    --qg-public-color-slate: #4e5b85;
    --qg-public-color-slate-dark: #1e2640;
    --qg-public-color-slate-deep-80: rgb(26 31 60 / 80%);
    --qg-public-color-slate-night-40: rgb(18 21 38 / 40%);
    --qg-public-color-steel: #a0aec0;
    --qg-public-color-dim-gray: #696969;
    --qg-public-color-accent-purple: #8e54e9;
    --qg-public-color-accent-yellow: #ffb800;
    --qg-public-color-accent-pink: #ff4b91;
    --qg-public-color-accent-blue: #00d1ff;
    --qg-public-color-accent-green: #00e676;
    --qg-public-color-ai-purple: #8855ff;
    --qg-public-color-ai-purple-20: rgb(136 85 255 / 20%);
    --qg-public-color-stat-red-soft: #ff4d4d;
    --qg-public-color-stat-green: #00ff88;
    --qg-public-color-stat-green-20: rgb(0 255 136 / 20%);
    --qg-public-color-stat-cyan: #00ccff;
    --qg-public-color-stat-blue: #3d5aff;
    --qg-public-color-stat-lime: #00ff00;
    --qg-public-color-yellow: #ffcc00;
    --qg-public-color-yellow-20: rgb(255 204 0 / 20%);
    --qg-public-color-level-purple: #9b51e0;
    --qg-public-color-level-purple-50: rgb(155 81 224 / 50%);
    --qg-public-color-level-purple-80: rgb(155 81 224 / 80%);
    --qg-public-color-level-purple-dark: #6a11cb;
    --qg-public-color-level-purple-dark-50: rgb(106 17 203 / 50%);
    --qg-public-color-level-purple-hover: #b066fe;
    --qg-public-color-level-purple-hover-dark: #7d2ae8;
    --qg-public-gradient-perfil-cabecera-profile-banner: linear-gradient(135deg, var(--qg-public-color-slate-deep-80) 0%, var(--qg-public-color-slate-night-40) 100%);
    --qg-public-gradient-perfil-cabecera-profile-level: linear-gradient(135deg, var(--qg-public-color-level-purple-dark), var(--qg-public-color-level-purple));
    --qg-public-gradient-perfil-cabecera-profile-level-hover: linear-gradient(135deg, var(--qg-public-color-level-purple-hover-dark), var(--qg-public-color-level-purple-hover));
    --qg-public-gradient-perfil-jugador-dragon-card: linear-gradient(135deg, var(--qg-public-color-leather-dark), var(--qg-public-color-leather-black));
    --qg-public-gradient-perfil-jugador-dragon-separator: linear-gradient(to bottom, transparent, var(--qg-public-color-brass), transparent);
    --qg-public-gradient-cuadro-estadistica-ai-card: linear-gradient(145deg, var(--qg-public-color-black-50), var(--qg-public-color-black-50));

    /* ===================================================================
       Gráficas (Chart.js lee estos valores desde los scripts)
       =================================================================== */

    --qg-public-color-chart-matadragones: rgb(168 85 247 / 60%);
    --qg-public-color-chart-amenaza: rgb(255 60 60 / 60%);
    --qg-public-color-chart-economia: rgb(255 215 0 / 60%);
    --qg-public-color-chart-gasto: rgb(255 69 0 / 60%);
    --qg-public-color-chart-gasto-borde: #ff4500;
    --qg-public-color-chart-usos: rgb(0 191 255 / 60%);
    --qg-public-color-chart-usos-borde: #00bfff;
    --qg-public-color-chart-texto: #fbf8f6;
    --qg-public-color-chart-rejilla: rgb(255 255 255 / 10%);
    --qg-public-color-chart-tooltip-titulo: #b5a2eb;
    --qg-public-color-spell-icon-glow: rgb(0 198 255 / 60%);
    /* Alquimias del perfil: escala de la piel de Cladia (oro, bronce, cuero) con dos apoyos de color, en
       lugar de los neones de la identidad de ciencia ficcion, que desentonaban en una vista de pergamino. */
    --qg-public-color-chart-hechizo-1: rgb(240 213 122 / 90%);
    --qg-public-color-chart-hechizo-2: rgb(194 142 70 / 90%);
    --qg-public-color-chart-hechizo-3: rgb(123 191 90 / 85%);
    --qg-public-color-chart-hechizo-4: rgb(217 96 74 / 85%);
    --qg-public-color-chart-hechizo-5: rgb(139 90 43 / 90%);
    --qg-public-color-chart-hechizo-6: rgb(141 112 81 / 90%);
    /* Evolución por jugador: tonos alternos para que los primeros jugadores queden bien separados.
       Los compone estadisticas.js por número, así que no se pueden renombrar sin tocarlo. */
    --qg-public-color-chart-jugador-1: hsl(0 70% 60% / 80%);
    --qg-public-color-chart-jugador-2: hsl(180 70% 60% / 80%);
    --qg-public-color-chart-jugador-3: hsl(90 70% 60% / 80%);
    --qg-public-color-chart-jugador-4: hsl(270 70% 60% / 80%);
    --qg-public-color-chart-jugador-5: hsl(45 70% 60% / 80%);
    --qg-public-color-chart-jugador-6: hsl(225 70% 60% / 80%);
    --qg-public-color-chart-jugador-7: hsl(135 70% 60% / 80%);
    --qg-public-color-chart-jugador-8: hsl(315 70% 60% / 80%);
}