/* ---------- Profile themes ---------- */

/* Sparkle ✦ (cute) */
html[data-ptheme="cute"] {
  --bg: #fff5fb; --surface: #ffffff; --border: #f6d5e8; --text: #3b2340; --muted: #7b5f80;
  --accent-text: #c2338a; --orange: #ff6fb5; --rest: #f3d9ea; --dot: rgba(194, 51, 138, .14);
  --deco-1: #ff9ccf; --deco-2: #b9a4ff; --deco-3: #ffcf5c;
}
html[data-ptheme="cute"][data-theme="dark"] {
  --bg: #1c1224; --surface: #261a30; --border: #3d2a4a; --text: #fbeefd; --muted: #c4a9cc;
  --accent-text: #ff8fca; --orange: #ff7fbf; --rest: #3d2a4a;
  --deco-1: #ff7fbf; --deco-2: #a893ff; --deco-3: #ffd36e;
}

/* Honey Bear */
html[data-ptheme="bear"] {
  --bg: #fbf3e6; --surface: #fffaf2; --border: #ead8bd; --text: #3a2717; --muted: #7a6049;
  --accent-text: #9a5a17; --orange: #e8a33d; --rest: #ead8bd;
  --deco-1: #c68a52; --deco-2: #e8a33d; --deco-3: #8a5a33;
}
html[data-ptheme="bear"][data-theme="dark"] {
  --bg: #1d150e; --surface: #281d14; --border: #3d2d1f; --text: #f7ead8; --muted: #c9ad8d;
  --accent-text: #f0b45c; --orange: #eaa545; --rest: #3d2d1f;
  --deco-1: #b57a45; --deco-2: #eaa545; --deco-3: #d9b48a;
}

/* Strawberry Milk */
html[data-ptheme="strawberry"] {
  --bg: #fff4f4; --surface: #ffffff; --border: #f7d0d3; --text: #3d1f24; --muted: #85585e;
  --accent-text: #c42b45; --orange: #ff5d7a; --rest: #f7d0d3;
  --deco-1: #ff5d7a; --deco-2: #ffb3c1; --deco-3: #7bc47f;
}
html[data-ptheme="strawberry"][data-theme="dark"] {
  --bg: #1f1215; --surface: #2b1a1e; --border: #45282e; --text: #ffeef0; --muted: #d3a7ae;
  --accent-text: #ff8da0; --orange: #ff6f88; --rest: #45282e;
  --deco-1: #ff6f88; --deco-2: #ffb3c1; --deco-3: #7bc47f;
}

/* Starry Night */
html[data-ptheme="night"] {
  --bg: #eef0ff; --surface: #ffffff; --border: #d7dbf5; --text: #1c1f3d; --muted: #5a5f86;
  --accent-text: #4b53c7; --orange: #8f98ff; --rest: #d7dbf5;
  --deco-1: #8f98ff; --deco-2: #f5c84c; --deco-3: #b8bdf0;
}
html[data-ptheme="night"][data-theme="dark"] {
  --bg: #0b0d22; --surface: #13163a; --border: #262a5a; --text: #eef0ff; --muted: #a3a8d6;
  --accent-text: #aab1ff; --orange: #8f98ff; --rest: #262a5a;
  --deco-1: #fff3b0; --deco-2: #aab1ff; --deco-3: #ffffff;
}

/* Skull Club */
html[data-ptheme="skull"] {
  --bg: #efebe3; --surface: #faf8f3; --border: #d8d0c2; --text: #151313; --muted: #5e5750;
  --accent-text: #b3161b; --orange: #e0262c; --rest: #d8d0c2;
  --deco-1: #151313; --deco-2: #e0262c; --deco-3: #8c8377;
}
html[data-ptheme="skull"][data-theme="dark"] {
  --bg: #0d0d0d; --surface: #171616; --border: #2c2929; --text: #ece6da; --muted: #a39b8f;
  --accent-text: #ff4a4f; --orange: #e0262c; --rest: #2c2929;
  --deco-1: #e8e2d4; --deco-2: #e0262c; --deco-3: #6b645c;
}

/* Neon Grid */
html[data-ptheme="neon"] {
  --bg: #eefdf4; --surface: #ffffff; --border: #c6ecd6; --text: #06140c; --muted: #3f6150;
  --accent-text: #0a8a45; --orange: #2ee57c; --rest: #c6ecd6;
  --deco-1: #0a8a45; --deco-2: #008fb3; --deco-3: #7dd9a8;
}
html[data-ptheme="neon"][data-theme="dark"] {
  --bg: #07110c; --surface: #0c1a13; --border: #16392a; --text: #d9ffe9; --muted: #7fb99a;
  --accent-text: #39ff88; --orange: #39ff88; --rest: #16392a;
  --deco-1: #39ff88; --deco-2: #00d1ff; --deco-3: #1d6b45;
}

/* Hellfire */
html[data-ptheme="fire"] {
  --bg: #fff3ec; --surface: #ffffff; --border: #f5d2c0; --text: #2a0e06; --muted: #7a4a38;
  --accent-text: #c2360c; --orange: #ff5a1f; --rest: #f5d2c0;
  --deco-1: #ff4d1a; --deco-2: #ffb020; --deco-3: #b3200b;
}
html[data-ptheme="fire"][data-theme="dark"] {
  --bg: #140806; --surface: #1f0d09; --border: #3d1a12; --text: #ffe9dc; --muted: #d19a82;
  --accent-text: #ff7a3d; --orange: #ff5a1f; --rest: #3d1a12;
  --deco-1: #ff4d1a; --deco-2: #ffb020; --deco-3: #b3200b;
}

/* Bold themes: sharper corners, heavier type */
html[data-ptheme="skull"] .card, html[data-ptheme="neon"] .card, html[data-ptheme="fire"] .card { border-radius: 14px !important; }
html[data-ptheme="neon"][data-theme="dark"] .card { box-shadow: 0 0 0 1px rgba(57, 255, 136, .15), 0 0 24px -12px rgba(57, 255, 136, .5); }
html[data-ptheme="skull"] .deco-face, html[data-ptheme="neon"] .deco-face, html[data-ptheme="fire"] .deco-face { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: 1px; }

/* Themed pages get a softer, rounder feel */
html[data-ptheme="cute"] .card, html[data-ptheme="bear"] .card, html[data-ptheme="strawberry"] .card, html[data-ptheme="night"] .card { border-radius: 28px; }
html[data-ptheme]:not([data-ptheme="default"]) .btn-orange { color: #1a1020; }

/* Decorations layer (behind everything) */
.ptheme-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* keep page content above the theme decorations (only the main page parts, so floating things like
   the sticker drawer, pop-up messages and the music bar keep their own positions) */
html[data-ptheme]:not([data-ptheme="default"]) body > :is(header, main, footer) { position: relative; z-index: 1; }
/* the top menu (and its dropdown) always sits above the page */
html[data-ptheme]:not([data-ptheme="default"]) body > header { z-index: 12; }
.deco-item { position: absolute; display: block; opacity: .72; transform: rotate(var(--rot)); animation: decoFloat 8s ease-in-out infinite; }
.deco-item svg { width: 100%; height: auto; display: block; overflow: visible; }
.deco-item svg * { fill: currentColor; }
.deco-item svg .cut { fill: var(--bg); }
.deco-item svg .leaf { fill: var(--deco-3); }
.deco-item.is-line svg * { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.deco-item svg .line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.theme-mini svg .line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.deco-face { position: absolute; font-family: var(--hand); font-weight: 700; opacity: .7; white-space: nowrap; transform: rotate(var(--rot)); animation: decoFloat 10s ease-in-out infinite; }
.deco-c1 { color: var(--deco-1); }
.deco-c2 { color: var(--deco-2); }
.deco-c3 { color: var(--deco-3); }
@keyframes decoFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) { .deco-item, .deco-face { animation: none; } }
/* On narrow screens the margins are tiny, so decorations sit behind content: keep them faint */
@media (max-width: 1100px) { .deco-item, .deco-face { opacity: .28; } }

/* Theme picker in settings */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; border: 2px solid var(--border); background: var(--bg); cursor: pointer; text-align: left; font: inherit; color: var(--text); overflow: hidden; }
.theme-card[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 85, 0, .18); }
.theme-card b { font-size: 16px; }
.theme-card span.desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.theme-swatch { display: flex; gap: 6px; }
.theme-swatch i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.theme-mini { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
.theme-mini svg { width: 18px; height: 18px; }
.theme-mini svg * { fill: currentColor; }
.theme-mini svg .cut { fill: #fff; }
.theme-mini .is-line svg * { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.theme-check { font-size: 12px; font-weight: 800; color: var(--accent-text); }

/* Profile background picture */
.page-bg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; pointer-events: none; }
.page-bg::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--fade, .6); }
body:has(.page-bg)::before { display: none; }

/* ---------- Animated decorations + sizes ---------- */
.deco-size-s .deco-svg { left: -14%; top: -14%; width: 128%; height: 128%; }
.deco-size-l .deco-svg { left: -38%; top: -38%; width: 176%; height: 176%; }
/* Every decoration moves. Mirrored (right side) copies get a delay so the two sides don't move in lockstep. */
.deco-svg .anim-ear, .deco-svg .flick, .deco-svg .twinkle, .deco-svg .glint, .deco-svg .gem, .deco-svg .beat, .deco-svg .zap, .deco-svg .note-up, .deco-svg .bow-bob
  { transform-box: fill-box; transform-origin: 50% 100%; }
.deco-svg g[transform^="translate(240"] .anim-ear { animation-delay: .45s; }

/* bunny: gentle constant sway, and a big floppy bend every few seconds */
.deco-svg .bunny-sway { animation: bunnySway 2.6s ease-in-out infinite; }
.deco-svg .bunny-ear { animation: bunnyFlop 3.8s cubic-bezier(.4, 0, .3, 1) infinite; }
.deco-svg g[transform^="translate(240"] .bunny-ear { animation-delay: 1.1s; }
@keyframes bunnySway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes bunnyFlop {
  0%, 48%, 100% { transform: rotate(0); }
  56% { transform: rotate(-26deg); }
  64% { transform: rotate(-14deg); }
  72% { transform: rotate(-22deg); }
  84% { transform: rotate(-4deg); }
}
.deco-svg .bow-bob { transform-origin: 50% 50%; animation: bowBob 1.9s ease-in-out infinite; }
@keyframes bowBob { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }

/* cat: small idle sway plus quick double twitches */
.deco-svg .cat-sway { animation: catSway 3.2s ease-in-out infinite; }
.deco-svg .cat-ear { animation: catTwitch 2.4s ease-in-out infinite; }
.deco-svg g[transform^="translate(240"] .cat-ear { animation-delay: .9s; }
@keyframes catSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes catTwitch {
  0%, 60%, 100% { transform: rotate(0) scaleY(1); }
  64% { transform: rotate(-18deg) scaleY(.94); }
  68% { transform: rotate(6deg) scaleY(1.02); }
  72% { transform: rotate(-14deg) scaleY(.95); }
  78% { transform: rotate(3deg); }
  84% { transform: rotate(0); }
}

/* bear: round wiggle */
.deco-svg .bear-ear { transform-origin: 50% 80%; animation: bearWiggle 3s ease-in-out infinite; }
@keyframes bearWiggle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-12deg) scale(1.05); } 84% { transform: rotate(8deg) scale(.98); } 92% { transform: rotate(-4deg); } }

/* devil horns: little bounce */
.deco-svg .horn-bounce { animation: hornBounce 2.2s ease-in-out infinite; }
@keyframes hornBounce { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-5px) rotate(-5deg); } 60% { transform: translateY(-2px) rotate(3deg); } }

/* crown / viking / halo float, halo glow pulses, gems shine */
.deco-svg .float-y { animation: floatY 2.8s ease-in-out infinite; }
.deco-svg .float-y.slow { animation-duration: 3.6s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.deco-svg .glow-pulse { animation: glowPulse 1.8s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
.deco-svg .gem { transform-origin: 50% 50%; animation: gemShine 2.4s ease-in-out infinite; animation-delay: var(--gd, 0s); }
@keyframes gemShine { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.5); transform: scale(1.15); } }
.deco-svg .glint { transform-origin: 50% 50%; opacity: 0; animation: glint 2.6s ease-in-out infinite; animation-delay: var(--gd, 0s); }
@keyframes glint { 0%, 55%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 70% { opacity: 1; transform: scale(1) rotate(45deg); } 85% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* headphones: cups pump to the beat, notes float up */
.deco-svg .beat { transform-origin: 50% 50%; animation: beat .62s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.09); } }
.deco-svg .note-up { transform-origin: 50% 50%; opacity: 0; animation: noteUp 3.2s ease-out infinite; animation-delay: var(--nd, 0s); }
@keyframes noteUp { 0% { opacity: 0; transform: translate(0, 0) rotate(-10deg) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -46px) rotate(14deg) scale(1.1); } }

/* flames flicker, sparkles twinkle, lightning crackles */
.deco-svg .flick { animation: flick 1.4s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes flick { 0%, 100% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(1.12) scaleX(.94); } 50% { transform: scaleY(.93) scaleX(1.04); } 75% { transform: scaleY(1.08) scaleX(.97); } }
.deco-svg .twinkle { transform-origin: 50% 50%; animation: twinkle 2.2s ease-in-out infinite; animation-delay: var(--td, 0s); }
@keyframes twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .45; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.deco-svg .zap { transform-origin: 50% 50%; animation: zap 2.6s steps(1) infinite; animation-delay: var(--zd, 0s); }
@keyframes zap { 0%, 100% { opacity: 1; transform: scale(1); } 8% { opacity: .2; } 12% { opacity: 1; transform: scale(1.15); } 16% { opacity: .4; } 20% { opacity: 1; transform: scale(1); } 60% { transform: scale(1) translateX(0); } 62% { transform: translateX(-2px); } 64% { transform: translateX(2px); } 66% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .deco-svg .anim-ear, .deco-svg .flick, .deco-svg .twinkle, .deco-svg .gem, .deco-svg .beat, .deco-svg .zap, .deco-svg .float-y, .deco-svg .glow-pulse, .deco-svg .bow-bob { animation: none; }
  .deco-svg .glint, .deco-svg .note-up { display: none; }
}

/* ---------- 20 more themes ---------- */
html[data-ptheme="ocean"] { --bg: #eefbfc; --surface: #ffffff; --text: #0b2a33; --muted: color-mix(in srgb, #0b2a33 62%, transparent); --border: color-mix(in srgb, #0b2a33 14%, #ffffff); --rest: color-mix(in srgb, #0b2a33 16%, #eefbfc);
  --accent-text: #0b7f8f; --orange: #1fb6c9; --deco-1: #0b7f8f; --deco-2: #5ad1ff; --deco-3: #bff3f7; }
html[data-ptheme="ocean"][data-theme="dark"] { --bg: #071c24; --surface: #0d2833; --text: #dff7fa; --muted: color-mix(in srgb, #dff7fa 62%, transparent); --border: color-mix(in srgb, #dff7fa 14%, #0d2833); --rest: color-mix(in srgb, #dff7fa 16%, #071c24);
  --accent-text: #1fb6c9; --orange: #1fb6c9; --deco-1: #1fb6c9; --deco-2: #5ad1ff; --deco-3: #bff3f7; }
html[data-ptheme="forest"] { --bg: #f3f6ea; --surface: #ffffff; --text: #1a2615; --muted: color-mix(in srgb, #1a2615 62%, transparent); --border: color-mix(in srgb, #1a2615 14%, #ffffff); --rest: color-mix(in srgb, #1a2615 16%, #f3f6ea);
  --accent-text: #3b7a37; --orange: #5fae5a; --deco-1: #3b7a37; --deco-2: #c98b4b; --deco-3: #f1e3b8; }
html[data-ptheme="forest"][data-theme="dark"] { --bg: #0f170c; --surface: #172313; --text: #e6efd9; --muted: color-mix(in srgb, #e6efd9 62%, transparent); --border: color-mix(in srgb, #e6efd9 14%, #172313); --rest: color-mix(in srgb, #e6efd9 16%, #0f170c);
  --accent-text: #5fae5a; --orange: #5fae5a; --deco-1: #5fae5a; --deco-2: #c98b4b; --deco-3: #f1e3b8; }
html[data-ptheme="sakura"] { --bg: #fff4f7; --surface: #ffffff; --text: #3d1f2b; --muted: color-mix(in srgb, #3d1f2b 62%, transparent); --border: color-mix(in srgb, #3d1f2b 14%, #ffffff); --rest: color-mix(in srgb, #3d1f2b 16%, #fff4f7);
  --accent-text: #c2477a; --orange: #ff8fb8; --deco-1: #c2477a; --deco-2: #ffc9dc; --deco-3: #b56576; }
html[data-ptheme="sakura"][data-theme="dark"] { --bg: #1e1117; --surface: #2a1820; --text: #ffe6ef; --muted: color-mix(in srgb, #ffe6ef 62%, transparent); --border: color-mix(in srgb, #ffe6ef 14%, #2a1820); --rest: color-mix(in srgb, #ffe6ef 16%, #1e1117);
  --accent-text: #ff8fb8; --orange: #ff8fb8; --deco-1: #ff8fb8; --deco-2: #ffc9dc; --deco-3: #b56576; }
html[data-ptheme="sunset"] { --bg: #fff3ea; --surface: #ffffff; --text: #3a1d14; --muted: color-mix(in srgb, #3a1d14 62%, transparent); --border: color-mix(in srgb, #3a1d14 14%, #ffffff); --rest: color-mix(in srgb, #3a1d14 16%, #fff3ea);
  --accent-text: #c4541c; --orange: #ff8a4c; --deco-1: #c4541c; --deco-2: #ffd07a; --deco-3: #ff6f91; }
html[data-ptheme="sunset"][data-theme="dark"] { --bg: #1e0f17; --surface: #2b1520; --text: #ffe8dc; --muted: color-mix(in srgb, #ffe8dc 62%, transparent); --border: color-mix(in srgb, #ffe8dc 14%, #2b1520); --rest: color-mix(in srgb, #ffe8dc 16%, #1e0f17);
  --accent-text: #ff8a4c; --orange: #ff8a4c; --deco-1: #ff8a4c; --deco-2: #ffd07a; --deco-3: #ff6f91; }
html[data-ptheme="lavender"] { --bg: #f6f1ff; --surface: #ffffff; --text: #2a2140; --muted: color-mix(in srgb, #2a2140 62%, transparent); --border: color-mix(in srgb, #2a2140 14%, #ffffff); --rest: color-mix(in srgb, #2a2140 16%, #f6f1ff);
  --accent-text: #6f4fd8; --orange: #a98bff; --deco-1: #6f4fd8; --deco-2: #ffb6e1; --deco-3: #d9ccff; }
html[data-ptheme="lavender"][data-theme="dark"] { --bg: #150f24; --surface: #1f1733; --text: #efe8ff; --muted: color-mix(in srgb, #efe8ff 62%, transparent); --border: color-mix(in srgb, #efe8ff 14%, #1f1733); --rest: color-mix(in srgb, #efe8ff 16%, #150f24);
  --accent-text: #a98bff; --orange: #a98bff; --deco-1: #a98bff; --deco-2: #ffb6e1; --deco-3: #d9ccff; }
html[data-ptheme="mint"] { --bg: #effcf7; --surface: #ffffff; --text: #2a1d17; --muted: color-mix(in srgb, #2a1d17 62%, transparent); --border: color-mix(in srgb, #2a1d17 14%, #ffffff); --rest: color-mix(in srgb, #2a1d17 16%, #effcf7);
  --accent-text: #16876a; --orange: #3ecfa6; --deco-1: #16876a; --deco-2: #8b5a3c; --deco-3: #c9f7e6; }
html[data-ptheme="mint"][data-theme="dark"] { --bg: #1a120e; --surface: #261a14; --text: #dffaf0; --muted: color-mix(in srgb, #dffaf0 62%, transparent); --border: color-mix(in srgb, #dffaf0 14%, #261a14); --rest: color-mix(in srgb, #dffaf0 16%, #1a120e);
  --accent-text: #3ecfa6; --orange: #3ecfa6; --deco-1: #3ecfa6; --deco-2: #8b5a3c; --deco-3: #c9f7e6; }
html[data-ptheme="cyber"] { --bg: #fff0f8; --surface: #ffffff; --text: #16061a; --muted: color-mix(in srgb, #16061a 62%, transparent); --border: color-mix(in srgb, #16061a 14%, #ffffff); --rest: color-mix(in srgb, #16061a 16%, #fff0f8);
  --accent-text: #c5006a; --orange: #ff2e97; --deco-1: #c5006a; --deco-2: #f5f500; --deco-3: #00f0ff; }
html[data-ptheme="cyber"][data-theme="dark"] { --bg: #0b0712; --surface: #150c20; --text: #fbe9ff; --muted: color-mix(in srgb, #fbe9ff 62%, transparent); --border: color-mix(in srgb, #fbe9ff 14%, #150c20); --rest: color-mix(in srgb, #fbe9ff 16%, #0b0712);
  --accent-text: #ff2e97; --orange: #ff2e97; --deco-1: #ff2e97; --deco-2: #f5f500; --deco-3: #00f0ff; }
html[data-ptheme="vapor"] { --bg: #fdf0ff; --surface: #ffffff; --text: #2a1646; --muted: color-mix(in srgb, #2a1646 62%, transparent); --border: color-mix(in srgb, #2a1646 14%, #ffffff); --rest: color-mix(in srgb, #2a1646 16%, #fdf0ff);
  --accent-text: #c2308f; --orange: #ff71ce; --deco-1: #c2308f; --deco-2: #01cdfe; --deco-3: #b967ff; }
html[data-ptheme="vapor"][data-theme="dark"] { --bg: #1a1033; --surface: #241647; --text: #ffe9fb; --muted: color-mix(in srgb, #ffe9fb 62%, transparent); --border: color-mix(in srgb, #ffe9fb 14%, #241647); --rest: color-mix(in srgb, #ffe9fb 16%, #1a1033);
  --accent-text: #ff71ce; --orange: #ff71ce; --deco-1: #ff71ce; --deco-2: #01cdfe; --deco-3: #b967ff; }
html[data-ptheme="arcade"] { --bg: #fffbe8; --surface: #ffffff; --text: #1b1440; --muted: color-mix(in srgb, #1b1440 62%, transparent); --border: color-mix(in srgb, #1b1440 14%, #ffffff); --rest: color-mix(in srgb, #1b1440 16%, #fffbe8);
  --accent-text: #a37a00; --orange: #ffcc00; --deco-1: #a37a00; --deco-2: #ff4f79; --deco-3: #4fd1ff; }
html[data-ptheme="arcade"][data-theme="dark"] { --bg: #120c2c; --surface: #1b1440; --text: #fff6d6; --muted: color-mix(in srgb, #fff6d6 62%, transparent); --border: color-mix(in srgb, #fff6d6 14%, #1b1440); --rest: color-mix(in srgb, #fff6d6 16%, #120c2c);
  --accent-text: #ffcc00; --orange: #ffcc00; --deco-1: #ffcc00; --deco-2: #ff4f79; --deco-3: #4fd1ff; }
html[data-ptheme="coffee"] { --bg: #f8f1e9; --surface: #ffffff; --text: #2e1e14; --muted: color-mix(in srgb, #2e1e14 62%, transparent); --border: color-mix(in srgb, #2e1e14 14%, #ffffff); --rest: color-mix(in srgb, #2e1e14 16%, #f8f1e9);
  --accent-text: #8a4e28; --orange: #c07a4b; --deco-1: #8a4e28; --deco-2: #f3e3cf; --deco-3: #7a5a45; }
html[data-ptheme="coffee"][data-theme="dark"] { --bg: #1f1510; --surface: #2a1d16; --text: #f3e3cf; --muted: color-mix(in srgb, #f3e3cf 62%, transparent); --border: color-mix(in srgb, #f3e3cf 14%, #2a1d16); --rest: color-mix(in srgb, #f3e3cf 16%, #1f1510);
  --accent-text: #c07a4b; --orange: #c07a4b; --deco-1: #c07a4b; --deco-2: #f3e3cf; --deco-3: #7a5a45; }
html[data-ptheme="galaxy"] { --bg: #f4f0ff; --surface: #ffffff; --text: #1c1236; --muted: color-mix(in srgb, #1c1236 62%, transparent); --border: color-mix(in srgb, #1c1236 14%, #ffffff); --rest: color-mix(in srgb, #1c1236 16%, #f4f0ff);
  --accent-text: #6f45e0; --orange: #b18cff; --deco-1: #6f45e0; --deco-2: #7ef0ff; --deco-3: #ff8bd8; }
html[data-ptheme="galaxy"][data-theme="dark"] { --bg: #0c0820; --surface: #16102f; --text: #ece6ff; --muted: color-mix(in srgb, #ece6ff 62%, transparent); --border: color-mix(in srgb, #ece6ff 14%, #16102f); --rest: color-mix(in srgb, #ece6ff 16%, #0c0820);
  --accent-text: #b18cff; --orange: #b18cff; --deco-1: #b18cff; --deco-2: #7ef0ff; --deco-3: #ff8bd8; }
html[data-ptheme="candy"] { --bg: #fff0f7; --surface: #ffffff; --text: #3b1530; --muted: color-mix(in srgb, #3b1530 62%, transparent); --border: color-mix(in srgb, #3b1530 14%, #ffffff); --rest: color-mix(in srgb, #3b1530 16%, #fff0f7);
  --accent-text: #d1307a; --orange: #ff5fa2; --deco-1: #d1307a; --deco-2: #7bdcff; --deco-3: #ffd84d; }
html[data-ptheme="candy"][data-theme="dark"] { --bg: #1f0f19; --surface: #2c1524; --text: #ffe6f3; --muted: color-mix(in srgb, #ffe6f3 62%, transparent); --border: color-mix(in srgb, #ffe6f3 14%, #2c1524); --rest: color-mix(in srgb, #ffe6f3 16%, #1f0f19);
  --accent-text: #ff5fa2; --orange: #ff5fa2; --deco-1: #ff5fa2; --deco-2: #7bdcff; --deco-3: #ffd84d; }
html[data-ptheme="matcha"] { --bg: #f5f1e4; --surface: #fffdf6; --text: #2a2a1a; --muted: color-mix(in srgb, #2a2a1a 62%, transparent); --border: color-mix(in srgb, #2a2a1a 14%, #fffdf6); --rest: color-mix(in srgb, #2a2a1a 16%, #f5f1e4);
  --accent-text: #557a2f; --orange: #7da453; --deco-1: #557a2f; --deco-2: #c9a36b; --deco-3: #e6dcc0; }
html[data-ptheme="matcha"][data-theme="dark"] { --bg: #141710; --surface: #1e2317; --text: #eef0dc; --muted: color-mix(in srgb, #eef0dc 62%, transparent); --border: color-mix(in srgb, #eef0dc 14%, #1e2317); --rest: color-mix(in srgb, #eef0dc 16%, #141710);
  --accent-text: #7da453; --orange: #7da453; --deco-1: #7da453; --deco-2: #c9a36b; --deco-3: #e6dcc0; }
html[data-ptheme="gothic"] { --bg: #f6eef0; --surface: #ffffff; --text: #240d14; --muted: color-mix(in srgb, #240d14 62%, transparent); --border: color-mix(in srgb, #240d14 14%, #ffffff); --rest: color-mix(in srgb, #240d14 16%, #f6eef0);
  --accent-text: #8c1832; --orange: #b0203f; --deco-1: #8c1832; --deco-2: #e9d5da; --deco-3: #5a1a2a; }
html[data-ptheme="gothic"][data-theme="dark"] { --bg: #0e080b; --surface: #190e13; --text: #f0dde2; --muted: color-mix(in srgb, #f0dde2 62%, transparent); --border: color-mix(in srgb, #f0dde2 14%, #190e13); --rest: color-mix(in srgb, #f0dde2 16%, #0e080b);
  --accent-text: #b0203f; --orange: #b0203f; --deco-1: #b0203f; --deco-2: #e9d5da; --deco-3: #5a1a2a; }
html[data-ptheme="frost"] { --bg: #eef7ff; --surface: #ffffff; --text: #102a40; --muted: color-mix(in srgb, #102a40 62%, transparent); --border: color-mix(in srgb, #102a40 14%, #ffffff); --rest: color-mix(in srgb, #102a40 16%, #eef7ff);
  --accent-text: #1f7fc4; --orange: #5ab8ff; --deco-1: #1f7fc4; --deco-2: #b8e3ff; --deco-3: #e8f6ff; }
html[data-ptheme="frost"][data-theme="dark"] { --bg: #0a1622; --surface: #112233; --text: #e6f4ff; --muted: color-mix(in srgb, #e6f4ff 62%, transparent); --border: color-mix(in srgb, #e6f4ff 14%, #112233); --rest: color-mix(in srgb, #e6f4ff 16%, #0a1622);
  --accent-text: #5ab8ff; --orange: #5ab8ff; --deco-1: #5ab8ff; --deco-2: #b8e3ff; --deco-3: #e8f6ff; }
html[data-ptheme="lemon"] { --bg: #fffbe6; --surface: #ffffff; --text: #2e2a10; --muted: color-mix(in srgb, #2e2a10 62%, transparent); --border: color-mix(in srgb, #2e2a10 14%, #ffffff); --rest: color-mix(in srgb, #2e2a10 16%, #fffbe6);
  --accent-text: #8a6d00; --orange: #f2c511; --deco-1: #8a6d00; --deco-2: #7ed957; --deco-3: #ff9f43; }
html[data-ptheme="lemon"][data-theme="dark"] { --bg: #1a170a; --surface: #252110; --text: #fff6cc; --muted: color-mix(in srgb, #fff6cc 62%, transparent); --border: color-mix(in srgb, #fff6cc 14%, #252110); --rest: color-mix(in srgb, #fff6cc 16%, #1a170a);
  --accent-text: #f2c511; --orange: #f2c511; --deco-1: #f2c511; --deco-2: #7ed957; --deco-3: #ff9f43; }
html[data-ptheme="spooky"] { --bg: #f5f0ff; --surface: #ffffff; --text: #221733; --muted: color-mix(in srgb, #221733 62%, transparent); --border: color-mix(in srgb, #221733 14%, #ffffff); --rest: color-mix(in srgb, #221733 16%, #f5f0ff);
  --accent-text: #7045c9; --orange: #b48cff; --deco-1: #7045c9; --deco-2: #9dffb0; --deco-3: #ff9f43; }
html[data-ptheme="spooky"][data-theme="dark"] { --bg: #150f22; --surface: #1f1731; --text: #efe8ff; --muted: color-mix(in srgb, #efe8ff 62%, transparent); --border: color-mix(in srgb, #efe8ff 14%, #1f1731); --rest: color-mix(in srgb, #efe8ff 16%, #150f22);
  --accent-text: #b48cff; --orange: #b48cff; --deco-1: #b48cff; --deco-2: #9dffb0; --deco-3: #ff9f43; }
html[data-ptheme="rainbow"] { --bg: #fff9f2; --surface: #ffffff; --text: #2b2233; --muted: color-mix(in srgb, #2b2233 62%, transparent); --border: color-mix(in srgb, #2b2233 14%, #ffffff); --rest: color-mix(in srgb, #2b2233 16%, #fff9f2);
  --accent-text: #d63e3e; --orange: #ff6b6b; --deco-1: #d63e3e; --deco-2: #4dabf7; --deco-3: #ffd43b; }
html[data-ptheme="rainbow"][data-theme="dark"] { --bg: #15121c; --surface: #1f1a28; --text: #fff4ea; --muted: color-mix(in srgb, #fff4ea 62%, transparent); --border: color-mix(in srgb, #fff4ea 14%, #1f1a28); --rest: color-mix(in srgb, #fff4ea 16%, #15121c);
  --accent-text: #ff6b6b; --orange: #ff6b6b; --deco-1: #ff6b6b; --deco-2: #4dabf7; --deco-3: #ffd43b; }
html[data-ptheme="lofi"] { --bg: #f4f1fb; --surface: #ffffff; --text: #27213a; --muted: color-mix(in srgb, #27213a 62%, transparent); --border: color-mix(in srgb, #27213a 14%, #ffffff); --rest: color-mix(in srgb, #27213a 16%, #f4f1fb);
  --accent-text: #5f4fc9; --orange: #9d8cff; --deco-1: #5f4fc9; --deco-2: #ffb4a2; --deco-3: #6c5b7b; }
html[data-ptheme="lofi"][data-theme="dark"] { --bg: #1b1726; --surface: #241f33; --text: #ebe6f7; --muted: color-mix(in srgb, #ebe6f7 62%, transparent); --border: color-mix(in srgb, #ebe6f7 14%, #241f33); --rest: color-mix(in srgb, #ebe6f7 16%, #1b1726);
  --accent-text: #9d8cff; --orange: #9d8cff; --deco-1: #9d8cff; --deco-2: #ffb4a2; --deco-3: #6c5b7b; }
html[data-ptheme="grunge"] { --bg: #efece4; --surface: #f8f6f0; --text: #1b1a17; --muted: color-mix(in srgb, #1b1a17 62%, transparent); --border: color-mix(in srgb, #1b1a17 14%, #f8f6f0); --rest: color-mix(in srgb, #1b1a17 16%, #efece4);
  --accent-text: #6b6552; --orange: #c9c1a8; --deco-1: #6b6552; --deco-2: #8c2f2f; --deco-3: #5e5a4f; }
html[data-ptheme="grunge"][data-theme="dark"] { --bg: #121110; --surface: #1c1b19; --text: #e6e1d3; --muted: color-mix(in srgb, #e6e1d3 62%, transparent); --border: color-mix(in srgb, #e6e1d3 14%, #1c1b19); --rest: color-mix(in srgb, #e6e1d3 16%, #121110);
  --accent-text: #c9c1a8; --orange: #c9c1a8; --deco-1: #c9c1a8; --deco-2: #8c2f2f; --deco-3: #5e5a4f; }
/* cute/soft ones get round cards, bold ones sharp */
html[data-ptheme="sakura"] .card, html[data-ptheme="lavender"] .card, html[data-ptheme="candy"] .card, html[data-ptheme="mint"] .card,
html[data-ptheme="rainbow"] .card, html[data-ptheme="matcha"] .card, html[data-ptheme="spooky"] .card { border-radius: 28px; }
html[data-ptheme="cyber"] .card, html[data-ptheme="arcade"] .card, html[data-ptheme="grunge"] .card { border-radius: 10px !important; }
html[data-ptheme="cyber"][data-theme="dark"] .card { box-shadow: 0 0 0 1px rgba(255, 46, 151, .18), 0 0 26px -12px rgba(255, 46, 151, .55); }
html[data-ptheme="arcade"] .deco-face, html[data-ptheme="cyber"] .deco-face, html[data-ptheme="grunge"] .deco-face { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; }

/* Theme picker: filters + a scrolling box */
.theme-filters { display: flex; gap: 6px; overflow-x: auto; margin-top: 14px; padding-bottom: 2px; scrollbar-width: none; }
.theme-filters::-webkit-scrollbar { display: none; }
.theme-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.theme-filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.theme-filters .tf-count { font-size: 11px; opacity: .6; }
.theme-scroll { max-height: 470px; overflow-y: auto; margin-top: 4px; padding: 2px 6px 8px 2px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.theme-scroll::-webkit-scrollbar { width: 6px; }
.theme-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* kitty bell swings from its loop */
.deco-svg .bell-swing { transform-box: fill-box; transform-origin: 50% 0%; animation: bellSwing 1.8s ease-in-out infinite; }
@keyframes bellSwing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .deco-svg .bell-swing { animation: none; } }

/* ---------- Premium themes (300 credits) ---------- */
html[data-ptheme="holo"] { --bg: #f7f4ff; --surface: #ffffff; --text: #1f1a33; --muted: color-mix(in srgb, #1f1a33 60%, transparent); --border: #e6ddff; --rest: #ece6ff;
  --accent-text: #7b4fd6; --orange: #a47bff; --deco-1: #6fd6ff; --deco-2: #f08cff; --deco-3: #8fffc4; }
html[data-ptheme="holo"][data-theme="dark"] { --bg: #0d0b18; --surface: #171329; --text: #f2eeff; --muted: color-mix(in srgb, #f2eeff 62%, transparent); --border: #2c2548; --rest: #231d3b;
  --accent-text: #c9b3ff; --orange: #b89aff; --deco-1: #7fe3ff; --deco-2: #f5a3ff; --deco-3: #a3ffd2; }
html[data-ptheme="vinyl"] { --bg: #f7f1e3; --surface: #fffaf0; --text: #1b170e; --muted: color-mix(in srgb, #1b170e 60%, transparent); --border: #e5d9bb; --rest: #ece2c8;
  --accent-text: #8a6a14; --orange: #d4a93a; --deco-1: #1b170e; --deco-2: #b8912e; --deco-3: #6b5a2e; }
html[data-ptheme="vinyl"][data-theme="dark"] { --bg: #0b0a08; --surface: #151310; --text: #f3ead2; --muted: color-mix(in srgb, #f3ead2 60%, transparent); --border: #2c271c; --rest: #221e16;
  --accent-text: #e8c46a; --orange: #e8c46a; --deco-1: #e8c46a; --deco-2: #3a3326; --deco-3: #b8912e; }
html[data-ptheme="cottoncandy"] { --bg: #fff5fb; --surface: #ffffff; --text: #3a2340; --muted: color-mix(in srgb, #3a2340 60%, transparent); --border: #ffd9ee; --rest: #ffe6f4;
  --accent-text: #d63d8f; --orange: #ff7ec2; --deco-1: #ffb3d9; --deco-2: #9fd6ff; --deco-3: #ffd6f0; }
html[data-ptheme="cottoncandy"][data-theme="dark"] { --bg: #1d1422; --surface: #281c30; --text: #ffe9f6; --muted: color-mix(in srgb, #ffe9f6 62%, transparent); --border: #3e2c48; --rest: #33243c;
  --accent-text: #ff9fd3; --orange: #ff8fcb; --deco-1: #ffb3d9; --deco-2: #9fd6ff; --deco-3: #d9b8ff; }
html[data-ptheme="tokyo"] { --bg: #f4f0ff; --surface: #ffffff; --text: #150a24; --muted: color-mix(in srgb, #150a24 60%, transparent); --border: #e3d6ff; --rest: #ebe2ff;
  --accent-text: #c2139f; --orange: #ff2bd6; --deco-1: #ff2bd6; --deco-2: #00b8d9; --deco-3: #7a3cff; }
html[data-ptheme="tokyo"][data-theme="dark"] { --bg: #05050d; --surface: #0e0c1c; --text: #f6ecff; --muted: color-mix(in srgb, #f6ecff 62%, transparent); --border: #2a1f45; --rest: #1a1530;
  --accent-text: #ff5ce1; --orange: #ff2bd6; --deco-1: #ff2bd6; --deco-2: #27e7ff; --deco-3: #9b6bff; }
html[data-ptheme="cherrysoda"] { --bg: #fff4e6; --surface: #fffaf3; --text: #3b0d14; --muted: color-mix(in srgb, #3b0d14 60%, transparent); --border: #f5d9c8; --rest: #fbe4d6;
  --accent-text: #c01a2e; --orange: #e8283c; --deco-1: #e8283c; --deco-2: #ff8fa3; --deco-3: #6fcf5d; }
html[data-ptheme="cherrysoda"][data-theme="dark"] { --bg: #1c0a0e; --surface: #2a1016; --text: #ffeee6; --muted: color-mix(in srgb, #ffeee6 62%, transparent); --border: #45202a; --rest: #3a1820;
  --accent-text: #ff6b7e; --orange: #ff4d63; --deco-1: #ff4d63; --deco-2: #ff9fb1; --deco-3: #7ee06b; }
html[data-ptheme="moongarden"] { --bg: #eef5ef; --surface: #fbfdfb; --text: #0e2416; --muted: color-mix(in srgb, #0e2416 60%, transparent); --border: #d3e5d7; --rest: #dfece2;
  --accent-text: #2f7a4a; --orange: #3f9b62; --deco-1: #7fcf96; --deco-2: #b6c3d4; --deco-3: #e6c95c; }
html[data-ptheme="moongarden"][data-theme="dark"] { --bg: #07130c; --surface: #0e1f15; --text: #e8f4ec; --muted: color-mix(in srgb, #e8f4ec 62%, transparent); --border: #1f3a2a; --rest: #173022;
  --accent-text: #9ff0b8; --orange: #7fe0a0; --deco-1: #fff3a8; --deco-2: #c9d2e3; --deco-3: #7fcf96; }

/* their moving touches */
html[data-ptheme="holo"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .16;
  background: linear-gradient(120deg, #7fe3ff, #f5a3ff, #a3ffd2, #ffe29a, #7fe3ff); background-size: 400% 400%; animation: holoShift 14s ease-in-out infinite; mix-blend-mode: soft-light; }
html[data-ptheme="holo"] .card { background-image: linear-gradient(120deg, rgba(127,227,255,.08), rgba(245,163,255,.08), rgba(163,255,210,.08)); background-size: 300% 300%; animation: holoShift 12s ease-in-out infinite; }
@keyframes holoShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
html[data-ptheme="vinyl"] .deco-item.sh-record { animation: vinylSpin 6s linear infinite; }
@keyframes vinylSpin { to { transform: rotate(360deg); } }
html[data-ptheme="vinyl"] .card { border-radius: 14px; }
html[data-ptheme="cottoncandy"] .deco-item.sh-cloud { animation: cloudDrift 22s linear infinite; }
@keyframes cloudDrift { 0% { transform: translateX(-30px) rotate(var(--rot)); } 50% { transform: translateX(30px) rotate(var(--rot)); } 100% { transform: translateX(-30px) rotate(var(--rot)); } }
html[data-ptheme="cottoncandy"] .card { border-radius: 30px; }
html[data-ptheme="tokyo"][data-theme="dark"] .card { box-shadow: 0 0 0 1px rgba(255,43,214,.25), 0 0 28px -10px rgba(255,43,214,.6), 0 0 42px -18px rgba(39,231,255,.5); animation: neonPulse 4s ease-in-out infinite; }
@keyframes neonPulse { 50% { box-shadow: 0 0 0 1px rgba(39,231,255,.3), 0 0 30px -10px rgba(39,231,255,.6), 0 0 42px -18px rgba(255,43,214,.5); } }
html[data-ptheme="tokyo"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 3px); }
html[data-ptheme="tokyo"] .deco-face { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; }
html[data-ptheme="cherrysoda"] .deco-item.sh-bubble { animation: fizz 7s ease-in infinite; }
@keyframes fizz { 0% { transform: translateY(40px) scale(.7); opacity: 0; } 15% { opacity: .75; } 100% { transform: translateY(-160px) scale(1.1); opacity: 0; } }
html[data-ptheme="moongarden"] .deco-item.sh-firefly { animation: firefly 5s ease-in-out infinite; }
@keyframes firefly { 0%, 100% { opacity: .15; transform: translate(0, 0); } 50% { opacity: .95; transform: translate(12px, -18px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-ptheme="holo"] body::after, html[data-ptheme="holo"] .card, html[data-ptheme="tokyo"] .card,
  .deco-item.sh-record, .deco-item.sh-cloud, .deco-item.sh-bubble, .deco-item.sh-firefly { animation: none !important; }
}