/* Theme: party - "Musik & dans".
 * Disco night: deep purple with a magenta dance-floor glow, sweeping light beams from the
 * top corners, a mirror ball hanging from the top edge and floating music notes.
 * Dark theme: white text on a near-opaque purple card. Contrast checked numerically. */

html[data-ordleg-theme="party"] {
  --bg: radial-gradient(ellipse 70% 45% at 50% 110%, rgba(255, 64, 196, 0.4) 0%, transparent 100%),
        radial-gradient(ellipse at 0% 0%, rgba(122, 64, 255, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(255, 64, 196, 0.24) 0%, transparent 45%),
        linear-gradient(180deg, #1c0844 0%, #26094d 55%, #350a50 100%);
  --fg: #fff7fd;
  --fg-muted: #f3e4fa;
  --accent: #ff5fd2;
  --accent-fg: #2b0026;
  --card: rgba(255, 255, 255, 0.09);
  --card-strong: rgba(29, 8, 62, 0.95);
  --card-border: rgba(255, 140, 230, 0.3);
  --taboo: #ffb43c;
  --taboo-bg: rgba(255, 180, 60, 0.13);
  --timer-ok: #42e8ff;
  --timer-warn: #ff3d6e;
  --timer-warn-fg: #22000f;
  --ok: #5cf2b6;
  --bad: #ffa3c4;
  --subtle: rgba(255, 255, 255, 0.17);
  --selected-bg: rgba(255, 95, 210, 0.16);
  --selected-ring: rgba(255, 95, 210, 0.34);
  --overlay: rgba(14, 3, 32, 0.78);
}

/* deco-a / deco-b: light beams fanning out of the top corners, slowly sweeping.
 * The mask fades them out long before the centre. */
html[data-ordleg-theme="party"] .theme-deco .deco-a,
html[data-ordleg-theme="party"] .theme-deco .deco-b {
  top: 0;
  width: 70vmin;
  height: 70vmin;
  -webkit-mask: radial-gradient(circle at var(--o), #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 75%);
  mask: radial-gradient(circle at var(--o), #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 75%);
  transform-origin: var(--o);
  animation: party-sweep 11s ease-in-out infinite alternate;
}
html[data-ordleg-theme="party"] .theme-deco .deco-a {
  --o: 0 0;
  left: 0;
  background: conic-gradient(from 90deg at 0 0,
    transparent 0 6deg,
    rgba(255, 95, 210, 0.17) 6deg 10deg, transparent 10deg 21deg,
    rgba(66, 232, 255, 0.17) 21deg 24deg, transparent 24deg 37deg,
    rgba(197, 155, 255, 0.17) 37deg 42deg, transparent 42deg 55deg,
    rgba(255, 211, 107, 0.17) 55deg 58deg, transparent 58deg 71deg,
    rgba(255, 95, 210, 0.17) 71deg 75deg, transparent 75deg);
}
/* the same fan, pointing down-left from the top-right corner */
html[data-ordleg-theme="party"] .theme-deco .deco-b {
  --o: 100% 0;
  right: 0;
  background: conic-gradient(from 180deg at 100% 0,
    transparent 0 10deg,
    rgba(66, 232, 255, 0.17) 10deg 13deg, transparent 13deg 26deg,
    rgba(255, 95, 210, 0.17) 26deg 31deg, transparent 31deg 44deg,
    rgba(255, 211, 107, 0.17) 44deg 47deg, transparent 47deg 60deg,
    rgba(197, 155, 255, 0.17) 60deg 65deg, transparent 65deg);
  animation-direction: alternate-reverse;
  animation-delay: -5s;
}

/* during play the timer sits in the top-right corner: dim that fan so the timer and its
 * red warning state keep their contrast */
html[data-ordleg-theme="party"][data-screen="play"] .theme-deco .deco-b { opacity: 0.3; }

/* deco-c: holder for the mirror ball (::before, top edge) and the music notes (::after) */
html[data-ordleg-theme="party"] .theme-deco .deco-c { inset: 0; }
html[data-ordleg-theme="party"] .theme-deco .deco-c::before {
  content: "";
  position: absolute;
  top: -2vmin;
  left: 27vw;
  width: 11vmin;
  height: 15.8vmin;
  background: url("../../assets/themes/party/ball.svg") center top / contain no-repeat;
  filter: drop-shadow(0 0 2.2vmin rgba(255, 140, 230, 0.55));
  transform-origin: 50% 0;
  animation: party-swing 7s ease-in-out infinite alternate;
}
/* notes: two clusters in the free stretches of the top and bottom edges (right of the
 * audience buttons / left of the timer, and right of the play hint), gently floating */
html[data-ordleg-theme="party"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  inset: 0 17vw 0 auto;
  width: 22vmin;
  background:
    url("../../assets/themes/party/notes.svg") center top 1vh / auto 20vmin no-repeat,
    url("../../assets/themes/party/notes.svg") center bottom -1vmin / auto 13vmin no-repeat;
  opacity: 0.8;
  animation: party-float 6s ease-in-out infinite alternate;
}

@keyframes party-sweep {
  from { transform: rotate(-5deg); }
  to { transform: rotate(7deg); }
}
@keyframes party-swing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
@keyframes party-float {
  from { transform: translateY(0); opacity: 0.8; }
  to { transform: translateY(-1.2vmin); opacity: 0.6; }
}

/* Short screens: the start page scrolls under the fixed decoration layer, so the
 * top-edge ornaments would slide behind the category cards. Hide them there. */
@media (max-height: 900px) {
  html[data-ordleg-theme="party"][data-screen="start"] .theme-deco .deco-c::before,
  html[data-ordleg-theme="party"][data-screen="start"] .theme-deco .deco-c::after { display: none; }
}

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