/* Premium themes (Store, bought once). Owner 2026-10-23: the same game, HEAVILY stylized: particles (js/particles.js), animated
   backdrops, ornate frames on panels, buttons, tabs, title ribbons and the dock. Twenty themes (server/src/engine/themes.js has the list and prices).
   How it is built: settings.js sets data-theme and data-premium="1". Shared rules below read a handful of variables each theme sets:
     --orn   ornament colour (corner gems, ribbon trim)   --orn2  second ornament colour
     --frame panel border image (a gradient)              --btn   button fill        --rib  title ribbon fill
     --dock  dock fill                                    --sky   the animated backdrop (body::before, set per theme)
   Motion stops with Visual effects off or reduced motion. */

/* ======================================================================= palettes */
:root[data-theme="dragonfire"] { --bg: #160806; --bg2: #24100a; --panel: #33140c; --panel2: #4a1d10; --line: #e0582a; --line2: #8a2e14; --text: #fff0e0; --dim: #e8b898; --accent: #ffc23d; --accent2: #ff7a3a;
  --orn: #ffd060; --orn2: #ff4a0a; --frame: linear-gradient(180deg, #ffd060, #e0582a 40%, #8a2e14);
  --btn: linear-gradient(180deg, #7a2a12, #4a1d10); --rib: linear-gradient(180deg, #ffd060, #ff9a2a 60%, #c2410c); --dock: linear-gradient(180deg, #4a1d10ee, #1d0a06f0); }
:root[data-theme="starfall"] { --bg: #050817; --bg2: #0b1130; --panel: #111a42; --panel2: #18245a; --line: #6a86ff; --line2: #2f3f8a; --text: #eef2ff; --dim: #a8b4e8; --accent: #ffe27a; --accent2: #8ad8ff;
  --orn: #ffe27a; --orn2: #8ad8ff; --frame: linear-gradient(180deg, #cfe0ff, #6a86ff 45%, #2f3f8a);
  --btn: linear-gradient(180deg, #24327a, #111a42); --rib: linear-gradient(180deg, #fff3b0, #ffe27a 55%, #d6a92a); --dock: linear-gradient(180deg, #18245aee, #050817f0); }
:root[data-theme="abyss"] { --bg: #021317; --bg2: #052229; --panel: #08303a; --panel2: #0c4250; --line: #2fd0c8; --line2: #146a72; --text: #e0fffb; --dim: #8fd0c8; --accent: #7dffd8; --accent2: #6bb8ff;
  --orn: #7dffd8; --orn2: #6bb8ff; --frame: linear-gradient(180deg, #9ff8ff, #2fd0c8 45%, #146a72);
  --btn: linear-gradient(180deg, #0f5a66, #08303a); --rib: linear-gradient(180deg, #c8fff0, #7dffd8 55%, #1fa892); --dock: linear-gradient(180deg, #0c4250ee, #021317f0); }
:root[data-theme="arcane"] { --bg: #0e0718; --bg2: #180c2a; --panel: #23123d; --panel2: #301a55; --line: #b36bff; --line2: #5a2f8a; --text: #f3e8ff; --dim: #c4a8e8; --accent: #ff9cf0; --accent2: #9be7ff;
  --orn: #ff9cf0; --orn2: #9be7ff; --frame: linear-gradient(180deg, #ffd0f6, #b36bff 45%, #5a2f8a);
  --btn: linear-gradient(180deg, #4a2680, #23123d); --rib: linear-gradient(180deg, #ffd6f6, #ff9cf0 55%, #b04ac0); --dock: linear-gradient(180deg, #301a55ee, #0e0718f0); }
:root[data-theme="frostbound"] { --bg: #06121d; --bg2: #0c1f30; --panel: #122c44; --panel2: #1a3d5c; --line: #8fd6ff; --line2: #3a6f94; --text: #f0faff; --dim: #a8c8dc; --accent: #c8f0ff; --accent2: #7dffcf;
  --orn: #ffffff; --orn2: #7dffcf; --frame: linear-gradient(180deg, #ffffff, #8fd6ff 40%, #3a6f94);
  --btn: linear-gradient(180deg, #2a5578, #122c44); --rib: linear-gradient(180deg, #ffffff, #c8f0ff 55%, #6fb4dc); --dock: linear-gradient(180deg, #1a3d5cee, #06121df0); }
:root[data-theme="sweetheart"] { --bg: #2a0f22; --bg2: #3a1530; --panel: #4e1d40; --panel2: #66285a; --line: #ff8fc8; --line2: #b04a8a; --text: #fff0f8; --dim: #f5bfdc; --accent: #ffd1ea; --accent2: #ff5fa8;
  --orn: #ffffff; --orn2: #ff5fa8; --frame: linear-gradient(180deg, #ffe0f0, #ff8fc8 45%, #d0569a);
  --btn: linear-gradient(180deg, #ff8fc8, #c2508e); --rib: linear-gradient(180deg, #fff0f8, #ffb8de 55%, #ff7ab8); --dock: linear-gradient(180deg, #66285aee, #2a0f22f0); }
:root[data-theme="pride"] { --bg: #fbf7ff; --bg2: #f1e9fb; --panel: #ffffff; --panel2: #f4eefc; --line: #7a3fd0; --line2: #c9b3ec; --text: #24133d; --dim: #5d4a7a; --accent: #c2185b; --accent2: #0067c0;
  /* light since 2026-10-23 (owner: "keep the rainbows ... make it not a dark theme") */
  --orn: #7a3fd0; --orn2: #e40303; --rainbow: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787, #e40303);
  --frame: linear-gradient(135deg, #e40303, #ff8c00 17%, #ffed00 33%, #008026 50%, #004dff 67%, #750787 84%, #5bcefa 92%, #f5a9b8);
  --btn: linear-gradient(180deg, #ffffff, #ece3fa); --rib: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787); --dock: linear-gradient(180deg, #ffffffee, #f1e9fbf5); }
/* Trans Pride (owner 2026-10-23, from the trans flag): light blue, pink and white stripes, light theme */
:root[data-theme="transpride"] { --bg: #f3fbff; --bg2: #e4f4fd; --panel: #ffffff; --panel2: #fdf1f4; --line: #2f9fd0; --line2: #f5a9b8; --text: #1d2a3a; --dim: #56657a; --accent: #c8486f; --accent2: #1f8fc0;
  --orn: #5bcefa; --orn2: #f5a9b8; --flag: linear-gradient(180deg, #5bcefa 0 20%, #f5a9b8 20% 40%, #ffffff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80%);
  --frame: linear-gradient(135deg, #5bcefa, #f5a9b8 30%, #ffffff 50%, #f5a9b8 70%, #5bcefa);
  --btn: linear-gradient(180deg, #ffffff, #fde4ea); --rib: linear-gradient(90deg, #5bcefa, #f5a9b8 25%, #ffffff 50%, #f5a9b8 75%, #5bcefa); --dock: linear-gradient(180deg, #ffffffee, #e4f4fdf5); }

/* ======================================================================= 12 more (owner 2026-10-23: "a total of 20 premium themes") */
:root[data-theme="verdant"] { --bg: #08140a; --bg2: #0f2112; --panel: #16301a; --panel2: #1f4224; --line: #6abf4a; --line2: #2f6a2a; --text: #f0ffe8; --dim: #b8d8a8; --accent: #e8f56b; --accent2: #7bd88f;
  --orn: #e8f56b; --orn2: #4a9a3a; --frame: linear-gradient(180deg, #e8f56b, #6abf4a 40%, #2f6a2a);
  --btn: linear-gradient(180deg, #2f5a2a, #16301a); --rib: linear-gradient(180deg, #f6ffb0, #c8e86a 55%, #5a9a2a); --dock: linear-gradient(180deg, #1f4224ee, #08140af0); }
:root[data-theme="harvest"] { --bg: #160c06; --bg2: #24140a; --panel: #331c0e; --panel2: #4a2814; --line: #ff8a2a; --line2: #8a4a1a; --text: #fff2e0; --dim: #e8c098; --accent: #ffc23d; --accent2: #e0582a;
  --orn: #ffc23d; --orn2: #e0582a; --frame: linear-gradient(180deg, #ffe08a, #ff8a2a 45%, #8a4a1a);
  --btn: linear-gradient(180deg, #6a3414, #331c0e); --rib: linear-gradient(180deg, #ffe8a0, #ffb040 55%, #c0581a); --dock: linear-gradient(180deg, #4a2814ee, #160c06f0); }
:root[data-theme="bloodmoon"] { --bg: #0e0406; --bg2: #1a070a; --panel: #260a0e; --panel2: #380e14; --line: #c0283a; --line2: #5a1420; --text: #ffe8ea; --dim: #d8a0a8; --accent: #ff4a4a; --accent2: #d8c0c0;
  --orn: #ff3a3a; --orn2: #6a0a14; --frame: linear-gradient(180deg, #ff6a6a, #c0283a 40%, #3a0a10);
  --btn: linear-gradient(180deg, #4a1018, #1a070a); --rib: linear-gradient(180deg, #ff8a8a, #e0283a 55%, #6a0a14); --dock: linear-gradient(180deg, #380e14ee, #0e0406f0); }
:root[data-theme="stormcaller"] { --bg: #070a14; --bg2: #0e1424; --panel: #151e36; --panel2: #1e2a4a; --line: #8aa8ff; --line2: #34467a; --text: #eef3ff; --dim: #a8b8d8; --accent: #fff07a; --accent2: #8ad8ff;
  --orn: #fff07a; --orn2: #6a8aff; --frame: linear-gradient(180deg, #ffffff, #8aa8ff 40%, #34467a);
  --btn: linear-gradient(180deg, #2a3a66, #151e36); --rib: linear-gradient(180deg, #fffbd0, #fff07a 55%, #c8a830); --dock: linear-gradient(180deg, #1e2a4aee, #070a14f0); }
:root[data-theme="eclipse"] { --bg: #050505; --bg2: #0c0b08; --panel: #14120c; --panel2: #1e1a10; --line: #d8a83a; --line2: #6a521a; --text: #fff8e8; --dim: #c8b890; --accent: #ffd34d; --accent2: #ff9a2a;
  --orn: #ffd34d; --orn2: #ff7a1a; --frame: linear-gradient(180deg, #fff2b0, #d8a83a 40%, #3a2a0a);
  --btn: linear-gradient(180deg, #2a2412, #0c0b08); --rib: linear-gradient(180deg, #fff6c8, #ffd34d 55%, #b8780a); --dock: linear-gradient(180deg, #1e1a10ee, #050505f0); }
:root[data-theme="hanami"] { --bg: #fff6f9; --bg2: #fde8ef; --panel: #ffffff; --panel2: #fff0f5; --line: #e07aa0; --line2: #f5c0d4; --text: #3a1a2a; --dim: #7a5a68; --accent: #c2185b; --accent2: #2f8a6a;
  --orn: #ff8ab0; --orn2: #c2185b; --frame: linear-gradient(135deg, #ffd6e4, #ff8ab0 50%, #e07aa0);
  --btn: linear-gradient(180deg, #ffffff, #ffe4ee); --rib: linear-gradient(180deg, #ffe4ee, #ffb8d0 55%, #ff8ab0); --dock: linear-gradient(180deg, #ffffffee, #fde8eff5); }
:root[data-theme="neon"] { --bg: #0a0414; --bg2: #120826; --panel: #1a0c36; --panel2: #24104a; --line: #ff4ad8; --line2: #3af0ff; --text: #f8f0ff; --dim: #c8b0e8; --accent: #3af0ff; --accent2: #ff4ad8;
  --orn: #3af0ff; --orn2: #ff4ad8; --frame: linear-gradient(135deg, #ff4ad8, #8a5aff 50%, #3af0ff);
  --btn: linear-gradient(180deg, #2a1258, #120826); --rib: linear-gradient(90deg, #ff4ad8, #8a5aff, #3af0ff); --dock: linear-gradient(180deg, #24104aee, #0a0414f0); }
:root[data-theme="dunes"] { --bg: #1a1008; --bg2: #2a1a0c; --panel: #3a2612; --panel2: #4e341a; --line: #e8b060; --line2: #8a6030; --text: #fff4e0; --dim: #e0c8a0; --accent: #ffd38a; --accent2: #6bd0e3;
  --orn: #ffd38a; --orn2: #e07a3a; --frame: linear-gradient(180deg, #fff0c8, #e8b060 45%, #8a6030);
  --btn: linear-gradient(180deg, #6a4420, #3a2612); --rib: linear-gradient(180deg, #fff0c8, #ffc870 55%, #c87a3a); --dock: linear-gradient(180deg, #4e341aee, #1a1008f0); }
:root[data-theme="witchwood"] { --bg: #0a0812; --bg2: #120e1e; --panel: #1a142a; --panel2: #241c3a; --line: #8a5ad0; --line2: #3a2a5a; --text: #f0ecff; --dim: #b8b0d0; --accent: #a8ff6a; --accent2: #c87aff;
  --orn: #a8ff6a; --orn2: #8a5ad0; --frame: linear-gradient(180deg, #c8ff9a, #8a5ad0 45%, #2a1a40);
  --btn: linear-gradient(180deg, #34265a, #1a142a); --rib: linear-gradient(180deg, #e0ffb8, #a8ff6a 55%, #4a9a2a); --dock: linear-gradient(180deg, #241c3aee, #0a0812f0); }
:root[data-theme="crystal"] { --bg: #08081a; --bg2: #10102c; --panel: #181840; --panel2: #222258; --line: #a0c8ff; --line2: #5a5aa8; --text: #f4f4ff; --dim: #b8c0e8; --accent: #e0c8ff; --accent2: #9be7ff;
  --orn: #ffffff; --orn2: #b88aff; --frame: linear-gradient(135deg, #ffffff, #9be7ff 30%, #b88aff 60%, #5a5aa8);
  --btn: linear-gradient(180deg, #2e2e70, #181840); --rib: linear-gradient(135deg, #ffffff, #c8e8ff 40%, #d8b8ff 75%, #9a8aff); --dock: linear-gradient(180deg, #222258ee, #08081af0); }
:root[data-theme="cloud"] { --bg: #f0f7ff; --bg2: #e0eefc; --panel: #ffffff; --panel2: #f4f9ff; --line: #6a9ad8; --line2: #c0d8f0; --text: #1a2a44; --dim: #50607a; --accent: #b07a10; --accent2: #2a6ac0;
  --orn: #ffd34d; --orn2: #6a9ad8; --frame: linear-gradient(180deg, #ffffff, #c0d8f0 40%, #ffd34d);
  --btn: linear-gradient(180deg, #ffffff, #e4f0fc); --rib: linear-gradient(180deg, #fff8d8, #ffe58a 55%, #e0b040); --dock: linear-gradient(180deg, #ffffffee, #e0eefcf5); }
:root[data-theme="corsair"] { --bg: #041416; --bg2: #08222a; --panel: #0c3038; --panel2: #10404a; --line: #c8a060; --line2: #5a4a2a; --text: #f0fbf8; --dim: #a8d0c8; --accent: #ffd34d; --accent2: #4ad8c0;
  --orn: #ffd34d; --orn2: #a06a2a; --frame: repeating-linear-gradient(45deg, #c8a060 0 6px, #8a6a3a 6px 12px);
  --btn: linear-gradient(180deg, #145a64, #0c3038); --rib: linear-gradient(180deg, #ffe993, #ffd34d 55%, #b8862a); --dock: linear-gradient(180deg, #10404aee, #041416f0); }

/* ======================================================================= shared premium styling */
:root[data-premium] { background: var(--bg); }
.theme-particles { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; image-rendering: pixelated; }

/* panels: a gradient frame (border-image), a richer fill, and two ornament gems on the top corners */
:root[data-premium] .panel:not(.flat) {
  border: 3px solid transparent; border-image: var(--frame) 1;
  background: linear-gradient(180deg, var(--panel2), var(--panel) 45%, var(--bg2));            /* no color-mix: works on older phones too */
  box-shadow: 3px 3px 0 #000, 0 0 22px -8px var(--line), inset 0 0 0 1px #ffffff1f, inset 0 12px 24px -16px var(--orn);
}
:root[data-premium] .panel:not(.flat)::before, :root[data-premium] .panel:not(.flat)::after {
  width: 10px; height: 10px; top: -6px; background: radial-gradient(circle at 35% 35%, #fff, var(--orn) 40%, var(--orn2));
  transform: rotate(45deg); box-shadow: 0 0 10px var(--orn), 0 0 0 2px #000;
}
:root[data-premium] .panel:not(.flat)::before { left: -6px; }
:root[data-premium] .panel:not(.flat)::after { right: -6px; }
:root[data-premium] .panel.flat, :root[data-premium] .card, :root[data-premium] .pf-tile {
  background: linear-gradient(180deg, var(--panel), var(--bg2)); box-shadow: inset 0 0 0 1px #ffffff14, inset 0 2px 6px #0008;
}

/* buttons: themed fill, gem-lit edge */
:root[data-premium] .btn { background: var(--btn); border-color: var(--line); box-shadow: 2px 2px 0 #000, inset 0 1px 0 #ffffff40, 0 0 10px -6px var(--line); }
:root[data-premium] .btn.primary { background: var(--rib); color: #1a0f1a; border-color: #000; box-shadow: 2px 2px 0 #000, 0 0 16px -4px var(--orn), inset 0 2px 0 #fff8; }

/* title ribbon: the theme's own banner, trimmed in the ornament colour */
:root[data-premium] .ribbon { background: var(--rib); color: #1a0f1a; box-shadow: 3px 3px 0 #000, 0 0 18px -4px var(--orn); }

/* tabs: selected tab wears the frame */
:root[data-premium] .tabs button { background: linear-gradient(180deg, var(--panel2), var(--bg2)); }
:root[data-premium] .tabs button.on { border-image: var(--frame) 1; color: var(--accent); box-shadow: 0 0 18px -4px var(--orn), inset 0 -3px 0 var(--orn); }

/* dock: themed glass and a glowing ornament rail */
:root[data-premium] .dock { border-image: none; border: 3px solid transparent; background: var(--dock) padding-box, var(--frame) border-box; box-shadow: 0 5px 0 #000, 0 0 30px -6px var(--orn); }
:root[data-premium] .dock button.on { box-shadow: inset 0 0 0 2px var(--orn), 0 0 20px -2px var(--orn); }

/* bars: fill in the theme's ornament colours */
:root[data-premium] .bar.xp > i, :root[data-premium] .bar.pts > i { background: linear-gradient(90deg, var(--orn2), var(--orn)); }

/* ======================================================================= backdrops (one per theme) */
:root[data-premium] body::before { inset: 0; transform: none; animation: none; }

:root[data-theme="dragonfire"] body::before {
  background: radial-gradient(ellipse at 50% 115%, #ff4a0acc, transparent 55%), radial-gradient(ellipse at 15% 110%, #ff8a2a66, transparent 40%), radial-gradient(ellipse at 85% 110%, #ffd06055, transparent 40%), linear-gradient(180deg, #0e0503, #2a0c06);
  animation: themeHeat 4s ease-in-out infinite alternate; }
@keyframes themeHeat { to { filter: brightness(1.25) saturate(1.2); } }
:root[data-theme="dragonfire"] body::after { background: repeating-linear-gradient(180deg, transparent 0 46px, #ff6a1a0a 46px 48px), radial-gradient(ellipse at 50% 40%, transparent 55%, #000a 100%); }

:root[data-theme="starfall"] body::before {
  background: radial-gradient(ellipse at 20% 10%, #3a4ab866, transparent 45%), radial-gradient(ellipse at 85% 30%, #6a3ab855, transparent 40%), radial-gradient(ellipse at 50% 120%, #1a2a7a, transparent 60%), linear-gradient(180deg, #03050f, #0b1130);
  animation: themeNebula 30s ease-in-out infinite alternate; }
@keyframes themeNebula { to { filter: hue-rotate(30deg) brightness(1.15); } }

:root[data-theme="abyss"] body::before {
  background: repeating-linear-gradient(115deg, #2fd0c812 0 18px, transparent 18px 52px), repeating-linear-gradient(65deg, #6bb8ff0c 0 22px, transparent 22px 60px),
    radial-gradient(ellipse at 50% -10%, #1a8a9a99, transparent 60%), linear-gradient(180deg, #052229, #010a0d);
  background-size: 200% 100%, 200% 100%, 100% 100%, 100% 100%; animation: themeCaustic 14s linear infinite; }
@keyframes themeCaustic { to { background-position: -100% 0, 100% 0, 0 0, 0 0; } }

:root[data-theme="arcane"] body::before {
  background: repeating-linear-gradient(0deg, #b36bff0d 0 2px, transparent 2px 26px), repeating-linear-gradient(90deg, #b36bff08 0 2px, transparent 2px 26px),
    radial-gradient(circle at 50% 45%, #5a2f8aaa, transparent 60%), #0a0512;
  animation: themePulse 6s ease-in-out infinite; }
@keyframes themePulse { 50% { filter: hue-rotate(25deg) brightness(1.25); } }

:root[data-theme="frostbound"] body::before {
  background: linear-gradient(170deg, transparent 20%, #7dffcf33 32%, transparent 42%), linear-gradient(190deg, transparent 30%, #8fd6ff2a 42%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, #c8f0ff44, transparent 60%), linear-gradient(180deg, #030a12, #0c1f30);
  background-size: 200% 100%, 200% 100%, 100% 100%, 100% 100%; animation: themeAurora 18s ease-in-out infinite alternate; }
@keyframes themeAurora { to { background-position: -100% 0, 100% 0, 0 0, 0 0; filter: hue-rotate(-20deg); } }
:root[data-theme="frostbound"] .panel:not(.flat) { box-shadow: 3px 3px 0 #000, 0 0 24px -8px #c8f0ff, inset 0 0 0 1px #ffffff33, inset 0 14px 22px -18px #ffffff; }

:root[data-theme="sweetheart"] body::before {
  background: radial-gradient(circle at 20% 25%, #ff8fc855, transparent 30%), radial-gradient(circle at 80% 70%, #ffb8de44, transparent 32%),
    repeating-linear-gradient(45deg, #ffffff07 0 10px, transparent 10px 20px), linear-gradient(180deg, #2a0f22, #4a1838);
  animation: themeBlush 8s ease-in-out infinite alternate; }
@keyframes themeBlush { to { filter: brightness(1.15) saturate(1.2); } }
/* bows on the panels: a little ribbon bow at the top centre */
:root[data-theme="sweetheart"] .panel:not(.flat) { border-radius: 10px; }
:root[data-theme="sweetheart"] .panel:not(.flat) > :first-child::before { content: none; }
:root[data-theme="sweetheart"] .panel:not(.flat)::before, :root[data-theme="sweetheart"] .panel:not(.flat)::after {
  transform: none; border-radius: 50% 50% 0 50%; width: 11px; height: 11px; background: radial-gradient(circle at 35% 35%, #fff, #ff8fc8 55%, #ff5fa8); }
:root[data-theme="sweetheart"] .panel:not(.flat)::after { border-radius: 50% 50% 50% 0; }
:root[data-theme="sweetheart"] .btn, :root[data-theme="sweetheart"] .tabs button, :root[data-theme="sweetheart"] .card, :root[data-theme="sweetheart"] .pf-tile { border-radius: 8px; }
:root[data-theme="sweetheart"] .ribbon { clip-path: none; border-radius: 999px; padding: 6px 20px; }
:root[data-theme="sweetheart"] .ribbon .rb-title::before { content: '♥ '; color: #ff5fa8; }

:root[data-theme="pride"] body::before {
  background: linear-gradient(180deg, #e4030314, #ff8c0014 17%, #ffed0018 33%, #00802612 50%, #004dff12 67%, #75078712 84%),
    radial-gradient(ellipse at 50% 30%, #ffffff, #f1e9fb 80%);
  animation: themeHue 24s linear infinite; }
@keyframes themeHue { to { filter: hue-rotate(360deg); } }
/* the frame shimmers: the rainbow slides along every panel edge */
:root[data-theme="pride"] .panel:not(.flat)::before { background: radial-gradient(circle at 35% 35%, #fff, #5bcefa 45%, #f5a9b8); }
:root[data-theme="pride"] .panel:not(.flat)::after { background: radial-gradient(circle at 35% 35%, #fff, #f5a9b8 45%, #5bcefa); }
:root[data-theme="pride"] .ribbon { color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000; }
:root[data-theme="pride"] .btn.primary { background: var(--rib); color: #fff; text-shadow: 1px 1px 0 #000; }
:root[data-theme="pride"] .bar.xp > i, :root[data-theme="pride"] .bar.pts > i { background: var(--rainbow); }
:root[data-theme="pride"] .panel:not(.flat) { box-shadow: 3px 3px 0 #24133d, 0 0 18px -8px #7a3fd0; }

/* Trans Pride: soft flag stripes behind everything, striped frames, pink and blue studs */
:root[data-theme="transpride"] body::before {
  background: linear-gradient(180deg, #5bcefa22 0 20%, #f5a9b822 20% 40%, #ffffff 40% 60%, #f5a9b822 60% 80%, #5bcefa22 80%);
  animation: themeBlush 10s ease-in-out infinite alternate; }
:root[data-theme="transpride"] .panel:not(.flat) { border-radius: 8px; box-shadow: 3px 3px 0 #1d2a3a, 0 0 18px -8px #5bcefa; }
:root[data-theme="transpride"] .panel:not(.flat)::before { background: radial-gradient(circle at 35% 35%, #fff, #5bcefa 60%); }
:root[data-theme="transpride"] .panel:not(.flat)::after { background: radial-gradient(circle at 35% 35%, #fff, #f5a9b8 60%); }
:root[data-theme="transpride"] .ribbon { color: #1d2a3a; text-shadow: 1px 1px 0 #fff; }
:root[data-theme="transpride"] .btn.primary { background: var(--rib); color: #1d2a3a; text-shadow: 1px 1px 0 #fff; }
:root[data-theme="transpride"] .bar.xp > i, :root[data-theme="transpride"] .bar.pts > i { background: linear-gradient(90deg, #5bcefa, #f5a9b8, #ffffff, #f5a9b8, #5bcefa); }
:root[data-theme="transpride"] .btn, :root[data-theme="transpride"] .tabs button, :root[data-theme="transpride"] .card { border-radius: 6px; }
/* the light premium themes: a soft light vignette instead of the dark one (depth.css) */
:root[data-theme="pride"] body::after, :root[data-theme="transpride"] body::after { background: radial-gradient(ellipse at 50% 40%, transparent 60%, #7a3fd018 100%); }

/* backdrops for the 12 */
:root[data-theme="verdant"] body::before { background: radial-gradient(ellipse at 30% 0%, #e8f56b33, transparent 45%), radial-gradient(ellipse at 75% 10%, #7bd88f2a, transparent 40%),
  repeating-linear-gradient(100deg, #ffffff06 0 30px, transparent 30px 90px), linear-gradient(180deg, #0f2112, #050c06); background-size: 100% 100%, 100% 100%, 200% 100%, 100% 100%; animation: themeCaustic 30s linear infinite; }
:root[data-theme="harvest"] body::before { background: radial-gradient(circle at 78% 22%, #ffb040 0 9%, #ff8a2a55 10%, transparent 26%), radial-gradient(ellipse at 50% 120%, #8a3a1a88, transparent 60%), linear-gradient(180deg, #2a1408, #0e0804);
  animation: themeHeat 8s ease-in-out infinite alternate; }
:root[data-theme="bloodmoon"] body::before { background: radial-gradient(circle at 72% 20%, #ff5a5a 0 7%, #c0283a66 8%, transparent 24%), radial-gradient(ellipse at 50% 120%, #4a0a1088, transparent 60%), linear-gradient(180deg, #1a0408, #060203);
  animation: themeHeat 6s ease-in-out infinite alternate; }
:root[data-theme="stormcaller"] body::before { background: radial-gradient(ellipse at 20% 0%, #3a4a7a, transparent 50%), radial-gradient(ellipse at 80% 5%, #2a3460, transparent 45%),
  repeating-linear-gradient(105deg, #a8c8ff08 0 2px, transparent 2px 14px), linear-gradient(180deg, #0e1424, #04060c); animation: themeNebula 20s ease-in-out infinite alternate; }
:root[data-theme="eclipse"] body::before { background: radial-gradient(circle at 50% 28%, #000 0 8%, #ffd34d 8.6%, #ff9a2a88 10%, #ff7a1a22 18%, transparent 34%), linear-gradient(180deg, #0c0b08, #000);
  animation: themePulse 7s ease-in-out infinite; }
:root[data-theme="hanami"] body::before { background: radial-gradient(circle at 15% 15%, #ffd6e4, transparent 30%), radial-gradient(circle at 85% 25%, #ffe4ee, transparent 28%), radial-gradient(ellipse at 50% 30%, #ffffff, #fde8ef 85%);
  animation: themeBlush 10s ease-in-out infinite alternate; }
:root[data-theme="neon"] body::before { background: linear-gradient(180deg, transparent 55%, #ff4ad81a 56%, transparent 57%),
  repeating-linear-gradient(90deg, #3af0ff22 0 2px, transparent 2px 60px), repeating-linear-gradient(180deg, #ff4ad822 0 2px, transparent 2px 40px),
  radial-gradient(ellipse at 50% 55%, #8a5aff55, transparent 60%), linear-gradient(180deg, #0a0414, #1a0830);
  background-size: 100% 100%, 100% 100%, 100% 80px, 100% 100%, 100% 100%; animation: themeGrid 3s linear infinite; }
@keyframes themeGrid { to { background-position: 0 0, 0 0, 0 80px, 0 0, 0 0; } }
:root[data-theme="dunes"] body::before { background: radial-gradient(circle at 50% 70%, #ffb060 0 6%, #ff8a3a55 8%, transparent 30%), radial-gradient(ellipse at 30% 110%, #c87a3a, transparent 50%), radial-gradient(ellipse at 80% 115%, #a0602a, transparent 50%), linear-gradient(180deg, #3a1a2a, #c8703a 70%, #4a2a12);
  animation: themeHeat 9s ease-in-out infinite alternate; }
:root[data-theme="witchwood"] body::before { background: radial-gradient(ellipse at 50% 110%, #8a5ad055, transparent 55%), repeating-linear-gradient(90deg, #00000055 0 14px, transparent 14px 70px), linear-gradient(180deg, #120e1e, #050408);
  animation: themePulse 9s ease-in-out infinite; }
:root[data-theme="crystal"] body::before { background: conic-gradient(from 30deg at 30% 40%, #9be7ff22, transparent 20%, #b88aff22 40%, transparent 60%, #ffffff18 80%, transparent),
  conic-gradient(from 200deg at 75% 65%, #b88aff22, transparent 25%, #9be7ff1a 50%, transparent 75%), linear-gradient(180deg, #10102c, #04040e); animation: themePulse 8s ease-in-out infinite; }
:root[data-theme="cloud"] body::before { background: radial-gradient(ellipse 30% 12% at 20% 25%, #ffffff, transparent), radial-gradient(ellipse 35% 10% at 75% 15%, #ffffff, transparent), radial-gradient(ellipse 40% 14% at 60% 70%, #ffffffcc, transparent),
  linear-gradient(180deg, #bfe0ff, #f0f7ff 70%); background-size: 200% 100%, 200% 100%, 200% 100%, 100% 100%; animation: themeCaustic 60s linear infinite; }
:root[data-theme="corsair"] body::before { background: repeating-linear-gradient(170deg, #4ad8c00c 0 20px, transparent 20px 60px), radial-gradient(ellipse at 50% -10%, #1a7a7a88, transparent 60%), linear-gradient(180deg, #08222a, #020a0c);
  background-size: 200% 100%, 100% 100%, 100% 100%; animation: themeCaustic 18s linear infinite; }
/* light ones get the light vignette, rounder corners and dark text on bright ribbons */
:root[data-theme="hanami"] body::after, :root[data-theme="cloud"] body::after { background: radial-gradient(ellipse at 50% 40%, transparent 60%, #6a9ad818 100%); }
:root[data-theme="hanami"] .panel:not(.flat), :root[data-theme="cloud"] .panel:not(.flat) { border-radius: 8px; box-shadow: 3px 3px 0 #1a2a44, 0 0 18px -8px var(--orn); }
:root[data-theme="hanami"] .ribbon, :root[data-theme="cloud"] .ribbon { color: #3a1a2a; text-shadow: 1px 1px 0 #fff; }
:root[data-theme="neon"] .panel:not(.flat) { box-shadow: 3px 3px 0 #000, 0 0 18px -2px #ff4ad8aa, 0 0 34px -10px #3af0ff; }
:root[data-theme="neon"] .ribbon, :root[data-theme="neon"] .btn.primary { color: #fff; text-shadow: 0 0 6px #ff4ad8, 1px 1px 0 #000; }
:root[data-theme="crystal"] .panel:not(.flat) { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
:root[data-theme="corsair"] .panel:not(.flat) { border-width: 4px; }

/* ======================================================================= motion off */
html.fx-off body::before, html.fx-off body::after, html.fx-off .panel, html.fx-off .panel > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { body::before, body::after, .panel, .panel > * { animation: none !important; } }

/* ======================================================================= Store swatches */
.theme-card { display: flex; flex-direction: column; gap: 6px; }
.tc-swatch { height: 64px; border: 3px solid #000; image-rendering: pixelated; }
[data-theme-preview="dragonfire"] { background: radial-gradient(3px 3px at 30% 70%, #ffd060, transparent), radial-gradient(ellipse at 50% 130%, #ff4a0a, transparent 70%), linear-gradient(180deg, #160806, #4a1d10); box-shadow: 0 0 0 2px #e0582a; }
[data-theme-preview="starfall"] { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 50%, #ffe9a8, transparent), radial-gradient(2px 2px at 45% 20%, #cfe0ff, transparent), linear-gradient(180deg, #050817, #18245a); box-shadow: 0 0 0 2px #6a86ff; }
[data-theme-preview="abyss"] { background: radial-gradient(5px 5px at 30% 70%, #9ff8ff88, transparent), repeating-linear-gradient(115deg, #2fd0c822 0 10px, transparent 10px 26px), linear-gradient(180deg, #0c4250, #021317); box-shadow: 0 0 0 2px #2fd0c8; }
[data-theme-preview="arcane"] { background: radial-gradient(4px 4px at 30% 40%, #ff9cf0, transparent), radial-gradient(4px 4px at 70% 60%, #9be7ff, transparent), radial-gradient(ellipse, #5a2f8a, #0e0718 70%); box-shadow: 0 0 0 2px #b36bff; }
[data-theme-preview="frostbound"] { background: radial-gradient(2px 2px at 25% 30%, #fff, transparent), radial-gradient(2px 2px at 65% 60%, #fff, transparent), linear-gradient(170deg, transparent 25%, #7dffcf55 40%, transparent 55%), linear-gradient(180deg, #06121d, #1a3d5c); box-shadow: 0 0 0 2px #8fd6ff; }
[data-theme-preview="sweetheart"] { background: radial-gradient(5px 5px at 30% 40%, #fff, transparent), radial-gradient(circle at 70% 60%, #ff8fc8, transparent 40%), linear-gradient(180deg, #4e1d40, #ff8fc8); box-shadow: 0 0 0 2px #ff8fc8; border-radius: 8px; }
[data-theme-preview="pride"] { background: linear-gradient(180deg, #e40303, #ff8c00 17%, #ffed00 33%, #008026 50%, #004dff 67%, #750787 84%); box-shadow: 0 0 0 2px #fff; }
[data-theme-preview="transpride"] { background: linear-gradient(180deg, #5bcefa 0 20%, #f5a9b8 20% 40%, #ffffff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80%); box-shadow: 0 0 0 2px #5bcefa; }
[data-theme-preview="verdant"] { background: radial-gradient(4px 2px at 30% 40%, #c8e86a, transparent), radial-gradient(ellipse at 30% 0%, #e8f56b66, transparent 60%), linear-gradient(180deg, #1f4224, #08140a); box-shadow: 0 0 0 2px #6abf4a; }
[data-theme-preview="harvest"] { background: radial-gradient(circle at 75% 30%, #ffb040 0 14%, transparent 15%), linear-gradient(180deg, #4a2814, #160c06); box-shadow: 0 0 0 2px #ff8a2a; }
[data-theme-preview="bloodmoon"] { background: radial-gradient(circle at 70% 30%, #ff5a5a 0 13%, #c0283a66 15%, transparent 30%), linear-gradient(180deg, #380e14, #0e0406); box-shadow: 0 0 0 2px #c0283a; }
[data-theme-preview="stormcaller"] { background: linear-gradient(115deg, transparent 45%, #fff07a 46%, #fff07a 48%, transparent 49%), repeating-linear-gradient(105deg, #a8c8ff33 0 1px, transparent 1px 8px), linear-gradient(180deg, #1e2a4a, #070a14); box-shadow: 0 0 0 2px #8aa8ff; }
[data-theme-preview="eclipse"] { background: radial-gradient(circle at 50% 50%, #000 0 16%, #ffd34d 18%, #ff9a2a88 22%, transparent 40%), #050505; box-shadow: 0 0 0 2px #d8a83a; }
[data-theme-preview="hanami"] { background: radial-gradient(4px 3px at 30% 40%, #ff8ab0, transparent), radial-gradient(4px 3px at 70% 65%, #ffb8d0, transparent), linear-gradient(180deg, #ffffff, #fde8ef); box-shadow: 0 0 0 2px #e07aa0; border-radius: 6px; }
[data-theme-preview="neon"] { background: repeating-linear-gradient(90deg, #3af0ff55 0 1px, transparent 1px 16px), repeating-linear-gradient(180deg, #ff4ad855 0 1px, transparent 1px 12px), linear-gradient(180deg, #0a0414, #24104a); box-shadow: 0 0 0 2px #ff4ad8, 0 0 12px #3af0ff; }
[data-theme-preview="dunes"] { background: radial-gradient(circle at 50% 70%, #ffb060 0 12%, transparent 13%), radial-gradient(ellipse at 30% 120%, #c87a3a, transparent 60%), linear-gradient(180deg, #3a1a2a, #c8703a); box-shadow: 0 0 0 2px #e8b060; }
[data-theme-preview="witchwood"] { background: radial-gradient(3px 3px at 25% 35%, #a8ff6a, transparent), radial-gradient(3px 3px at 70% 60%, #a8ff6a, transparent), repeating-linear-gradient(90deg, #00000088 0 6px, transparent 6px 22px), linear-gradient(180deg, #241c3a, #0a0812); box-shadow: 0 0 0 2px #8a5ad0; }
[data-theme-preview="crystal"] { background: conic-gradient(from 30deg at 40% 50%, #9be7ff66, #181840 25%, #b88aff66 50%, #181840 75%, #ffffff55); box-shadow: 0 0 0 2px #a0c8ff; }
[data-theme-preview="cloud"] { background: radial-gradient(ellipse 30% 20% at 30% 40%, #fff, transparent), radial-gradient(ellipse 35% 18% at 70% 65%, #fff, transparent), linear-gradient(180deg, #bfe0ff, #f0f7ff); box-shadow: 0 0 0 2px #ffd34d; }
[data-theme-preview="corsair"] { background: radial-gradient(circle at 70% 60%, #ffd34d 0 8%, transparent 9%), radial-gradient(circle at 60% 70%, #ffe993 0 6%, transparent 7%), linear-gradient(180deg, #10404a, #041416); box-shadow: 0 0 0 2px #c8a060; }