/* Theme: unicorn - "Eventyr & fantasi".
 * Pastel lilac, pink and mint; a rainbow in the corner, clouds and twinkling sparkles.
 * Light theme: dark plum text on white cards. Contrast checked numerically (see report). */

html[data-ordleg-theme="unicorn"] {
  --bg: radial-gradient(ellipse at 88% 4%, #ffd3ec 0%, transparent 46%),
        radial-gradient(ellipse at 4% 96%, #c9f3e6 0%, transparent 48%),
        radial-gradient(ellipse at 96% 96%, #d8e4ff 0%, transparent 42%),
        linear-gradient(155deg, #eadcff 0%, #f6e1f6 48%, #e2f5f1 100%);
  --fg: #341a5c;
  --fg-muted: #5b3f85;
  --accent: #7b2fd6;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.6);
  --card-strong: rgba(255, 255, 255, 0.98);
  --card-border: rgba(123, 47, 214, 0.22);
  --taboo: #b4195a;
  --taboo-bg: rgba(214, 51, 132, 0.1);
  --timer-ok: #2bb98f;
  --timer-warn: #c8175d;
  --ok: #0b7d5b;
  --bad: #b3204d;
  --subtle: rgba(91, 63, 133, 0.16);
  --selected-bg: rgba(123, 47, 214, 0.12);
  --selected-ring: rgba(123, 47, 214, 0.22);
  --overlay: rgba(72, 40, 120, 0.5);
}

/* deco-a: big pastel rainbow rising from the bottom-right corner, a cloud at each foot */
html[data-ordleg-theme="unicorn"] .theme-deco .deco-a {
  right: -38vmin;
  bottom: -38vmin;
  width: 76vmin;
  height: 76vmin;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent 0 62%,
    #c3a2ff 62% 67.5%,
    #9cd0ff 67.5% 73%,
    #9fe8c2 73% 78.5%,
    #fff09a 78.5% 84%,
    #ffc596 84% 89.5%,
    #ff9cc0 89.5% 95%,
    transparent 95%);
  opacity: 0.9;
}
html[data-ordleg-theme="unicorn"] .theme-deco .deco-a::before,
html[data-ordleg-theme="unicorn"] .theme-deco .deco-a::after {
  content: "";
  position: absolute;
  width: 22vmin;
  height: 11vmin;
  background: url("../../assets/themes/unicorn/cloud.svg") center / contain no-repeat;
  animation: unicorn-drift 14s ease-in-out infinite alternate;
}
/* cloud on the bottom edge (left foot of the rainbow) */
html[data-ordleg-theme="unicorn"] .theme-deco .deco-a::before { left: -3vmin; top: 29vmin; }
/* cloud on the right edge (top foot of the rainbow) */
html[data-ordleg-theme="unicorn"] .theme-deco .deco-a::after { left: 25vmin; top: 2vmin; animation-delay: -7s; }

/* deco-b: sparkle cluster in the top-right corner (two layers twinkle in turn) */
html[data-ordleg-theme="unicorn"] .theme-deco .deco-b {
  top: 1vh;
  right: 1vw;
  width: 34vmin;
  height: 34vmin;
}
/* deco-c: full-frame holder for the bottom-left and top-left clusters (corners only) */
html[data-ordleg-theme="unicorn"] .theme-deco .deco-c { inset: 0; }

html[data-ordleg-theme="unicorn"] .theme-deco .deco-b::before,
html[data-ordleg-theme="unicorn"] .theme-deco .deco-b::after,
html[data-ordleg-theme="unicorn"] .theme-deco .deco-c::before,
html[data-ordleg-theme="unicorn"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  background: url("../../assets/themes/unicorn/sparkles-a.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 0.5vmin rgba(255, 255, 255, 0.9));
  animation: unicorn-twinkle 5s ease-in-out infinite;
}
html[data-ordleg-theme="unicorn"] .theme-deco .deco-b::before { inset: 0; }
html[data-ordleg-theme="unicorn"] .theme-deco .deco-b::after {
  inset: 0;
  background-image: url("../../assets/themes/unicorn/sparkles-b.svg");
  animation-delay: -2.5s;
}
html[data-ordleg-theme="unicorn"] .theme-deco .deco-c::before {
  left: 1vw;
  bottom: 1vh;
  width: 26vmin;
  height: 26vmin;
  background-image: url("../../assets/themes/unicorn/sparkles-b.svg");
  transform: rotate(90deg);
  animation-delay: -1.2s;
}
html[data-ordleg-theme="unicorn"] .theme-deco .deco-c::after {
  left: 0;
  top: 0;
  width: 20vmin;
  height: 20vmin;
  transform: scaleX(-1);
  animation-delay: -3.6s;
}

@keyframes unicorn-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes unicorn-drift {
  from { transform: translateX(-1.5vmin); }
  to { transform: translateX(1.5vmin); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="unicorn"] .theme-deco *,
  html[data-ordleg-theme="unicorn"] .theme-deco *::before,
  html[data-ordleg-theme="unicorn"] .theme-deco *::after { animation: none; }
}