/* 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;
    --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);

    /* 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) */
    --qg-public-color-game-rarity-very-bad: #ff0000;
    --qg-public-color-game-rarity-bad: #e1007d;
    --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-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%);
    --qg-public-color-chart-hechizo-1: rgb(155 81 224 / 85%);
    --qg-public-color-chart-hechizo-2: rgb(0 212 255 / 85%);
    --qg-public-color-chart-hechizo-3: rgb(57 255 20 / 85%);
    --qg-public-color-chart-hechizo-4: rgb(255 49 49 / 85%);
    --qg-public-color-chart-hechizo-5: rgb(255 0 255 / 85%);
    --qg-public-color-chart-hechizo-6: rgb(255 159 64 / 60%);
    /* 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%);
}