/* Theme palettes. Each palette is a set of RGB triplets; derived colours are recomputed on every themed element. */
:root, [data-theme="violet"] {
  --glow-rgb: 166, 77, 255;
  --hot-rgb: 255, 90, 216;
  --pale-rgb: 243, 222, 255;
  --deep-rgb: 46, 12, 78;
  --void-rgb: 8, 2, 14;
}
[data-theme="crimson"] {
  --glow-rgb: 255, 45, 79;
  --hot-rgb: 255, 140, 90;
  --pale-rgb: 255, 226, 214;
  --deep-rgb: 70, 6, 18;
  --void-rgb: 13, 2, 4;
}
[data-theme="abyssal"] {
  --glow-rgb: 31, 214, 196;
  --hot-rgb: 138, 255, 238;
  --pale-rgb: 226, 255, 250;
  --deep-rgb: 4, 52, 60;
  --void-rgb: 1, 10, 13;
}
[data-theme="umbral"] {
  --glow-rgb: 154, 166, 214;
  --hot-rgb: 220, 228, 255;
  --pale-rgb: 248, 250, 255;
  --deep-rgb: 32, 36, 54;
  --void-rgb: 6, 7, 11;
}
:root, [data-theme] {
  --glow: rgb(var(--glow-rgb));
  --hot: rgb(var(--hot-rgb));
  --pale: rgb(var(--pale-rgb));
  --deep: rgb(var(--deep-rgb));
  --void: rgb(var(--void-rgb));
}

.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-glow { stop-color: var(--glow); }
.st-hot { stop-color: var(--hot); }
.st-pale { stop-color: var(--pale); }
.st-deep { stop-color: var(--deep); }
.st-void { stop-color: var(--void); }

.fx-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Obsidian Eye ---------- */
.ob-runes {
  fill: rgba(var(--glow-rgb), .8);
  transform-box: view-box; transform-origin: 50px 50px;
  animation: art-spin 60s linear infinite;
}
.ob-ring { stroke: rgba(var(--glow-rgb), .9); stroke-width: 1.4; }
.ob-lid { stroke: rgba(var(--pale-rgb), .55); stroke-width: 1.2; }
.ob-eye {
  transform-box: view-box; transform-origin: 50px 50px;
  animation: art-blink 7.5s infinite; animation-delay: var(--phase, 0s);
}
.ob-pupil {
  fill: var(--void);
  transform-box: fill-box; transform-origin: center;
  animation: art-pupil 5.3s ease-in-out infinite; animation-delay: var(--phase, 0s);
}

/* ---------- Soulfire ---------- */
.sf-eyes {
  fill: var(--void); opacity: .92;
  transform-box: view-box; transform-origin: 50px 66px;
  animation: art-blink 6.1s infinite; animation-delay: var(--phase, 0s);
}

/* ---------- Blood Shard ---------- */
.art-shard { animation: art-sway 7s ease-in-out infinite; animation-delay: var(--phase, 0s); }
.art-shard .f1 { fill: rgba(var(--pale-rgb), .5); }
.art-shard .f2 { fill: rgba(var(--hot-rgb), .28); }
.art-shard .f3 { fill: rgba(var(--deep-rgb), .55); }
.art-shard .f4 { fill: rgba(var(--glow-rgb), .2); }
.art-shard .f5 { fill: rgba(var(--void-rgb), .45); }
.art-shard .f6 { fill: rgba(var(--hot-rgb), .18); }
.sh-edge { stroke: rgba(var(--pale-rgb), .75); stroke-width: 1.1; stroke-linejoin: round; }
.sh-rune {
  fill: none; stroke: var(--pale); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: art-rune 3.2s ease-in-out infinite; animation-delay: var(--phase, 0s);
}
.sh-glint { fill: rgba(255, 255, 255, .6); animation: art-glint 5.5s ease-in-out infinite; animation-delay: var(--phase, 0s); }

/* ---------- Shared: cracks + empty sockets ---------- */
.cracks path {
  fill: none; stroke: var(--pale); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.sk-fill { fill: rgba(var(--void-rgb), .5); }
.sk-line { fill: none; stroke: rgba(var(--glow-rgb), .5); stroke-width: 1.6; }
.sk-mark { fill: rgba(var(--glow-rgb), .14); }

@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  92.5% { transform: scaleY(.06); }
  95% { transform: scaleY(1); }
}
@keyframes art-pupil { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.75); } }
@keyframes art-sway {
  0%, 100% { transform: perspective(260px) rotateY(-26deg); }
  50% { transform: perspective(260px) rotateY(26deg); }
}
@keyframes art-rune { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes art-glint { 0% { transform: translateX(0); } 16%, 100% { transform: translateX(180px); } }