/* ── Shared element theme overrides ──────────────────────────────────────────
   Applies to any page that sets html[data-element="..."] via JS.
   Covers: body bg/text, scrollbars, er-* entity ref classes.
   Page-specific class themes (cp-*, wp-*) live in each page's inline <style>.
────────────────────────────────────────────────────────────────────────────── */

/* ── Wind ─────────────────────────────────────────────────────────────────── */
html[data-element="wind"] body { background-color: #0F3020; color: #C8F5E0; }
html[data-element="wind"] * { scrollbar-color: rgba(80,230,150,0.45) rgba(4,18,10,0.35); }
html[data-element="wind"] ::-webkit-scrollbar-track { background: rgba(4,18,10,0.35); }
html[data-element="wind"] ::-webkit-scrollbar-thumb { background: rgba(80,230,150,0.45); border-color: rgba(20,180,110,0.2); }
html[data-element="wind"] ::-webkit-scrollbar-thumb:hover { background: rgba(80,230,150,0.75); }
html[data-element="wind"] .er-num { color: #50E696; }
html[data-element="wind"] .er-se-link { color: rgba(80,230,150,0.85); }
html[data-element="wind"] .er-se-link:hover { color: #50E696; }
html[data-element="wind"] .er-se-tooltip { background: #081a0e; border-color: rgba(80,230,150,0.40); }
html[data-element="wind"] .er-se-tooltip-name { color: #50E696; }
html[data-element="wind"] .er-se-tooltip-desc { color: rgba(200,245,224,0.85); }
html[data-element="wind"] .er-char-link,
html[data-element="wind"] .er-weapon-link { color: rgba(80,230,150,0.85); }
html[data-element="wind"] .er-char-link:hover,
html[data-element="wind"] .er-weapon-link:hover { color: #50E696; }

/* ── Water ────────────────────────────────────────────────────────────────── */
html[data-element="water"] body { background-color: #082030; color: #C8ECFF; }
html[data-element="water"] * { scrollbar-color: rgba(30,210,225,0.45) rgba(4,14,28,0.35); }
html[data-element="water"] ::-webkit-scrollbar-track { background: rgba(4,14,28,0.35); }
html[data-element="water"] ::-webkit-scrollbar-thumb { background: rgba(30,210,225,0.45); border-color: rgba(20,170,185,0.2); }
html[data-element="water"] ::-webkit-scrollbar-thumb:hover { background: rgba(30,210,225,0.75); }
html[data-element="water"] .er-num { color: #30D0E0; }
html[data-element="water"] .er-se-link { color: rgba(30,210,225,0.85); }
html[data-element="water"] .er-se-link:hover { color: #30D0E0; }
html[data-element="water"] .er-se-tooltip { background: #061420; border-color: rgba(30,210,225,0.40); }
html[data-element="water"] .er-se-tooltip-name { color: #30D0E0; }
html[data-element="water"] .er-se-tooltip-desc { color: rgba(200,236,255,0.85); }
html[data-element="water"] .er-char-link,
html[data-element="water"] .er-weapon-link { color: rgba(30,210,225,0.85); }
html[data-element="water"] .er-char-link:hover,
html[data-element="water"] .er-weapon-link:hover { color: #30D0E0; }

/* ── Earth ────────────────────────────────────────────────────────────────── */
html[data-element="earth"] body { background-color: #1E0E04; color: #F0DDB8; }
html[data-element="earth"] * { scrollbar-color: rgba(220,155,55,0.45) rgba(18,9,3,0.35); }
html[data-element="earth"] ::-webkit-scrollbar-track { background: rgba(18,9,3,0.35); }
html[data-element="earth"] ::-webkit-scrollbar-thumb { background: rgba(220,155,55,0.45); border-color: rgba(160,100,20,0.2); }
html[data-element="earth"] ::-webkit-scrollbar-thumb:hover { background: rgba(220,155,55,0.75); }
html[data-element="earth"] .er-num { color: #DC9B37; }
html[data-element="earth"] .er-se-link { color: rgba(220,155,55,0.90); }
html[data-element="earth"] .er-se-link:hover { color: #DC9B37; }
html[data-element="earth"] .er-se-tooltip { background: #120800; border-color: rgba(220,155,55,0.40); }
html[data-element="earth"] .er-se-tooltip-name { color: #DC9B37; }
html[data-element="earth"] .er-se-tooltip-desc { color: rgba(240,221,184,0.85); }
html[data-element="earth"] .er-char-link,
html[data-element="earth"] .er-weapon-link { color: rgba(220,155,55,0.90); }
html[data-element="earth"] .er-char-link:hover,
html[data-element="earth"] .er-weapon-link:hover { color: #DC9B37; }

/* ── Light ────────────────────────────────────────────────────────────────── */
html[data-element="light"] body { background-color: #100D00; color: #F5EFA8; }
html[data-element="light"] * { scrollbar-color: rgba(235,210,65,0.45) rgba(14,12,1,0.35); }
html[data-element="light"] ::-webkit-scrollbar-track { background: rgba(14,12,1,0.35); }
html[data-element="light"] ::-webkit-scrollbar-thumb { background: rgba(235,210,65,0.45); border-color: rgba(180,160,10,0.2); }
html[data-element="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(235,210,65,0.75); }
html[data-element="light"] .er-num { color: #F0D040; }
html[data-element="light"] .er-se-link { color: rgba(235,210,65,0.90); }
html[data-element="light"] .er-se-link:hover { color: #F0D040; }
html[data-element="light"] .er-se-tooltip { background: #0e0c00; border-color: rgba(235,210,65,0.40); }
html[data-element="light"] .er-se-tooltip-name { color: #F0D040; }
html[data-element="light"] .er-se-tooltip-desc { color: rgba(245,239,168,0.85); }
html[data-element="light"] .er-char-link,
html[data-element="light"] .er-weapon-link { color: rgba(235,210,65,0.90); }
html[data-element="light"] .er-char-link:hover,
html[data-element="light"] .er-weapon-link:hover { color: #F0D040; }

/* ── Dark ─────────────────────────────────────────────────────────────────── */
html[data-element="dark"] body { background-color: #0E0018; color: #E0C8FF; }
html[data-element="dark"] a { color: rgba(200,150,255,0.85); }
html[data-element="dark"] a:hover { color: #E0C0FF; }
html[data-element="dark"] * { scrollbar-color: rgba(180,100,255,0.45) rgba(12,3,22,0.35); }
html[data-element="dark"] ::-webkit-scrollbar-track { background: rgba(12,3,22,0.35); }
html[data-element="dark"] ::-webkit-scrollbar-thumb { background: rgba(180,100,255,0.40); border-color: rgba(130,60,200,0.20); }
html[data-element="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(180,100,255,0.75); }
html[data-element="dark"] .er-num { color: #C070FF; }
html[data-element="dark"] .er-se-link { color: rgba(180,100,255,0.90); }
html[data-element="dark"] .er-se-link:hover { color: #C070FF; }
html[data-element="dark"] .er-se-tooltip { background: #0e0018; border-color: rgba(180,100,255,0.40); }
html[data-element="dark"] .er-se-tooltip-name { color: #C070FF; }
html[data-element="dark"] .er-se-tooltip-desc { color: rgba(224,192,255,0.85); }
html[data-element="dark"] .er-char-link,
html[data-element="dark"] .er-weapon-link { color: rgba(180,100,255,0.90); }
html[data-element="dark"] .er-char-link:hover,
html[data-element="dark"] .er-weapon-link:hover { color: #C070FF; }

/* ── Fire ─────────────────────────────────────────────────────────────────── */
html[data-element="fire"] body { background-color: #140200; color: #FFD8B8; }
html[data-element="fire"] a { color: rgba(255,160,80,0.85); }
html[data-element="fire"] a:hover { color: #FFCAA0; }
html[data-element="fire"] * { scrollbar-color: rgba(255,110,30,0.45) rgba(18,4,0,0.35); }
html[data-element="fire"] ::-webkit-scrollbar-track { background: rgba(18,4,0,0.35); }
html[data-element="fire"] ::-webkit-scrollbar-thumb { background: rgba(255,110,30,0.40); border-color: rgba(200,60,0,0.20); }
html[data-element="fire"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,110,30,0.75); }
html[data-element="fire"] .er-num { color: #FF7028; }
html[data-element="fire"] .er-se-link { color: rgba(255,110,30,0.90); }
html[data-element="fire"] .er-se-link:hover { color: #FF7028; }
html[data-element="fire"] .er-se-tooltip { background: #140200; border-color: rgba(255,110,30,0.40); }
html[data-element="fire"] .er-se-tooltip-name { color: #FF7028; }
html[data-element="fire"] .er-se-tooltip-desc { color: rgba(255,210,170,0.85); }
html[data-element="fire"] .er-char-link,
html[data-element="fire"] .er-weapon-link { color: rgba(255,110,30,0.90); }
html[data-element="fire"] .er-char-link:hover,
html[data-element="fire"] .er-weapon-link:hover { color: #FF7028; }