/* ==========================================================================
   Temas por perfil (v2). script.js pone body.theme-<x> al abrir un perfil.
   - Variables --*: colores del diseño nuevo.
   - background del body: IGUAL que en styles.css (el Save Image lo lee con
     getComputedStyle(body) para el fondo del PNG). En pantalla lo tapan
     #fondo y el canvas 3D.
   ========================================================================== */

/* Menú (sin tema): noche índigo */
:root {
    --c: #a78bfa;
    --on-c: #12082a;
    --ink: #f3f1ff;
    --ink-dim: rgba(243, 241, 255, .62);
    --line: rgba(255, 255, 255, .12);
    --surface: rgba(18, 16, 34, .62);
    --surface-strong: rgba(14, 12, 28, .88);
    --card-bg: linear-gradient(180deg, rgba(30, 26, 56, .78), rgba(14, 12, 28, .92));
    --card-line: rgba(255, 255, 255, .1);
    --fondo: radial-gradient(120% 90% at 50% 8%, #221c4f 0%, #0d0b1f 52%, #050509 100%);
    --velo: #0d0b1f;
    color-scheme: dark;
}
body.v2 { background-color: #121212; }

/* --- David · Estadio nocturno (cian) --------------------------------------- */
body.theme-david {
    --c: #00d2ff;
    --on-c: #00131c;
    --ink: #eaf8ff;
    --ink-dim: rgba(214, 238, 255, .66);
    --line: rgba(120, 205, 255, .17);
    --surface: rgba(4, 22, 46, .64);
    --surface-strong: rgba(3, 16, 34, .9);
    --card-bg: linear-gradient(180deg, rgba(9, 38, 74, .8), rgba(3, 15, 32, .92));
    --card-line: rgba(120, 205, 255, .16);
    --fondo: radial-gradient(120% 80% at 50% 0%, #0d4176 0%, #041b36 45%, #01060f 100%);
    --velo: #041b36;
    --font-display: 'Russo One', var(--font-ui);
    color-scheme: dark;
    background: radial-gradient(circle at top, #F0F4F8 0%, #d4e4f7 100%) !important;
    background-attachment: fixed !important;
}

/* --- Yue · Santuario en el bosque a la hora dorada (jade) -------------------- */
body.theme-yue {
    --c: #00e893;
    --on-c: #00241a;
    --ink: #eafff7;
    --ink-dim: rgba(214, 255, 238, .66);
    --line: rgba(110, 255, 200, .17);
    --surface: rgba(3, 34, 26, .62);
    --surface-strong: rgba(2, 26, 20, .9);
    --card-bg: linear-gradient(180deg, rgba(8, 58, 44, .78), rgba(2, 24, 18, .92));
    --card-line: rgba(110, 255, 200, .15);
    --fondo: radial-gradient(120% 80% at 70% 0%, #b98a3e 0%, #4c6a2a 42%, #1b3317 78%, #0b190a 100%);
    --velo: #062e23;
    --font-display: 'Zen Maru Gothic', var(--font-ui);
    --display-tracking: .02em;
    color-scheme: dark;
    background-color: #eefbf6;
    background-image: radial-gradient(circle at top right, #ccf2e4 0%, #eefbf6 50%, #ffffff 100%);
}
body.theme-yue .hero-nombre {
    font-weight: 900;
    text-shadow: 0 0 60px color-mix(in srgb, var(--c) 45%, transparent), 0 6px 30px rgba(24, 16, 0, .55);
}
/* El mundo es de día: la etiqueta pequeña necesita sombra para leerse sobre el cielo y el torii */
body.theme-yue .hero-eyebrow { color: #fff8e6; text-shadow: 0 1px 3px rgba(20, 12, 0, .8), 0 0 14px rgba(20, 12, 0, .55); }
body.theme-yue .stat-mini-num,
body.theme-yue .current-user-name { font-weight: 900; }

/* --- Jerick · Noche de función, Un Show Más (morado) ------------------------ */
body.theme-jerick {
    --c: #bf80ff;
    --on-c: #1c0630;
    --ink: #f5ecff;
    --ink-dim: rgba(236, 222, 255, .66);
    --line: rgba(206, 160, 255, .2);
    --surface: rgba(34, 12, 52, .62);
    --surface-strong: rgba(26, 8, 40, .9);
    --card-bg: linear-gradient(180deg, rgba(64, 24, 94, .8), rgba(24, 8, 38, .92));
    --card-line: rgba(206, 160, 255, .18);
    --fondo: radial-gradient(120% 80% at 30% 0%, #5c2689 0%, #2b113b 50%, #12051c 100%);
    --velo: #2b113b;
    --font-display: 'Bungee', var(--font-ui);
    color-scheme: dark;
    background-color: #2b113b;
    background-image: radial-gradient(circle at top left, #4a1f63 0%, #2b113b 50%, #170821 100%);
}
body.theme-jerick .hero-nombre { font-size: clamp(2.8rem, 11vw, 7.4rem); }

/* --- Luan · Brillitos pop (rosa, claro) -------------------------------------- */
body.theme-luan {
    --c: #ff5c9d;
    --c-texto: #d81b6a;
    --oro-texto: #b7791f;
    --on-c: #ffffff;
    --ink: #4a154b;
    --ink-dim: rgba(74, 21, 75, .62);
    --line: rgba(255, 92, 157, .24);
    --surface: rgba(255, 255, 255, .72);
    --surface-strong: rgba(255, 245, 250, .93);
    --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 234, 245, .92));
    --card-line: rgba(255, 92, 157, .2);
    --fondo: radial-gradient(120% 80% at 20% 0%, #ffffff 0%, #ffe1f0 45%, #ffc4df 100%);
    --velo: #ffe1f0;
    --opcion-bg: #fff;
    --opcion-ink: #4a154b;
    --font-display: 'Fredoka', var(--font-ui);
    --penumbra: rgba(255, 255, 255, .55);
    --apagado: saturate(.5);
    --apagado-op: .7;
    color-scheme: light;
    background-color: #fff0f5;
    background-image: radial-gradient(circle at top left, #ffffff 0%, #fff0f5 50%, #ffe6f2 100%);
}
body.theme-luan .hero-nombre,
body.theme-luan .stat-mini-num,
body.theme-luan .current-user-name { font-weight: 700; }
body.theme-luan .hero-nombre { color: var(--c-texto); text-shadow: 0 10px 40px rgba(255, 92, 157, .35); }

/* --- Georgette · Tarde con Snoopy (lila, claro) ------------------------------- */
body.theme-georgette {
    --c: #a855f7;
    --c-texto: #7e22ce;
    --oro-texto: #b7791f;
    --on-c: #ffffff;
    --ink: #3b1a6e;
    --ink-dim: rgba(59, 26, 110, .62);
    --line: rgba(168, 85, 247, .22);
    --surface: rgba(255, 255, 255, .74);
    --surface-strong: rgba(250, 246, 255, .94);
    --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(243, 235, 255, .93));
    --card-line: rgba(168, 85, 247, .2);
    --fondo: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f2eaff 45%, #ded0ff 100%);
    --velo: #f2eaff;
    --opcion-bg: #fff;
    --opcion-ink: #3b1a6e;
    --font-display: 'Patrick Hand', var(--font-ui);
    --penumbra: rgba(255, 255, 255, .55);
    --apagado: saturate(.5);
    --apagado-op: .7;
    --display-tracking: .02em;
    color-scheme: light;
    background-image: none !important;
    background-color: #f3f0ff !important;
}
body.theme-georgette .hero-nombre { color: var(--c-texto); text-shadow: 0 10px 40px rgba(168, 85, 247, .3); font-size: clamp(3.6rem, 14vw, 9.6rem); }
body.theme-georgette .stat-mini-num { font-size: clamp(2.1rem, 4.8vw, 2.9rem); }

/* --- Aaron · Gotham (carmesí) ---------------------------------------------------- */
body.theme-aaron {
    --c: #f87171;
    --on-c: #2a0508;
    --ink: #ffeaea;
    --ink-dim: rgba(255, 220, 220, .64);
    --line: rgba(248, 113, 113, .2);
    --surface: rgba(30, 6, 10, .64);
    --surface-strong: rgba(20, 4, 7, .9);
    --card-bg: linear-gradient(180deg, rgba(62, 13, 22, .8), rgba(18, 4, 7, .93));
    --card-line: rgba(248, 113, 113, .17);
    --fondo: radial-gradient(120% 80% at 80% 0%, #4d0e1b 0%, #1a0505 50%, #050203 100%);
    --velo: #1a0505;
    --font-display: 'Bebas Neue', var(--font-ui);
    --display-tracking: .04em;
    color-scheme: dark;
    background-color: #1a0505;
    background-image: radial-gradient(circle at top right, #3a0a15 0%, #1a0505 50%, #050505 100%);
}
body.theme-aaron .hero-nombre { font-size: clamp(4rem, 15vw, 10.5rem); }
body.theme-aaron .stat-mini-num { font-size: clamp(2.2rem, 5vw, 3rem); }