/* Theme: style - "Tøj & stil".
 * Trendy peach-to-lilac with a fine polka-dot print, bold dot clusters in two corners,
 * a polka-dot bow on the top edge and twinkling stars.
 * Light theme: dark plum text on warm white cards. Contrast checked numerically. */

html[data-ordleg-theme="style"] {
  --bg: radial-gradient(circle, rgba(255, 127, 102, 0.16) 0 0.32vmin, transparent 0.38vmin) 0 0 / 3.6vmin 3.6vmin repeat,
        radial-gradient(ellipse at 100% 0%, #ffcdbd 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, #e6d4ff 0%, transparent 55%),
        linear-gradient(135deg, #ffeae0 0%, #ffe3e8 50%, #f2e6ff 100%);
  --fg: #3a1430;
  --fg-muted: #6b3a5e;
  --accent: #d03c4c;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.68);
  --card-strong: #fffaf8;
  --card-border: rgba(208, 60, 76, 0.22);
  --taboo: #7b2fd0;
  --taboo-bg: rgba(123, 47, 208, 0.08);
  --timer-ok: #7b4fe0;
  --timer-warn: #d6263f;
  --ok: #12805a;
  --bad: #c42645;
  --subtle: rgba(58, 20, 48, 0.12);
  --selected-bg: rgba(255, 127, 102, 0.2);
  --selected-ring: rgba(208, 60, 76, 0.26);
  --overlay: rgba(58, 20, 48, 0.45);
}

/* deco-a / deco-b: bold polka-dot clusters fading out of the top-right (coral) and
 * bottom-left (lilac) corners */
html[data-ordleg-theme="style"] .theme-deco .deco-a,
html[data-ordleg-theme="style"] .theme-deco .deco-b {
  width: 48vmin;
  height: 48vmin;
}
html[data-ordleg-theme="style"] .theme-deco .deco-a {
  top: 0;
  right: 0;
  background: radial-gradient(circle, #ff8f78 0 1.25vmin, transparent 1.35vmin) 1vmin 1vmin / 5vmin 5vmin repeat;
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  mask: radial-gradient(circle at 100% 0, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  opacity: 0.75;
}
html[data-ordleg-theme="style"] .theme-deco .deco-b {
  bottom: 0;
  left: 0;
  background: radial-gradient(circle, #b48cff 0 1.25vmin, transparent 1.35vmin) 1.5vmin 0 / 5vmin 5vmin repeat;
  -webkit-mask: radial-gradient(circle at 0 100%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  mask: radial-gradient(circle at 0 100%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  opacity: 0.7;
}

/* during play the timer sits on the coral dots: fade them so the timer and its red
 * warning state keep their contrast */
html[data-ordleg-theme="style"][data-screen="play"] .theme-deco .deco-a { opacity: 0.4; }

/* deco-c: holder for the bow (::before, top edge left of the audience buttons) and the
 * twinkling stars (::after, top edge left of the timer + bottom edge right of the hint) */
html[data-ordleg-theme="style"] .theme-deco .deco-c { inset: 0; }
html[data-ordleg-theme="style"] .theme-deco .deco-c::before {
  content: "";
  position: absolute;
  top: 2.5vh;
  left: 25vw;
  width: 16vmin;
  height: 9.6vmin;
  background: url("../../assets/themes/style/bow.svg") center / contain no-repeat;
  filter: drop-shadow(0 0.6vmin 0.8vmin rgba(208, 60, 76, 0.25));
  animation: style-sway 8s ease-in-out infinite alternate;
}
html[data-ordleg-theme="style"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  inset: 0 17vw 0 auto;
  width: 22vmin;
  background:
    url("../../assets/themes/style/stars.svg") center top 0.5vh / 20vmin auto no-repeat,
    url("../../assets/themes/style/stars.svg") center bottom -2vmin / 14vmin auto no-repeat;
  animation: style-twinkle 4.5s ease-in-out infinite alternate;
}

@keyframes style-sway {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}
@keyframes style-twinkle {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.55; transform: scale(0.97); }
}

/* 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="style"][data-screen="start"] .theme-deco .deco-c::before,
  html[data-ordleg-theme="style"][data-screen="start"] .theme-deco .deco-c::after { display: none; }
}

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