/* Theme: nature - "Dyr & kæledyr" and "Dyr".
 * Deep forest green with warm sunlight from the top, layered leaves growing in from
 * two corners, a butterfly on the top edge and a trail of paw prints.
 * Works for kids and families alike: fresh lime accent, no cartoon clutter.
 * Dark theme: light text on a near-opaque forest card. Contrast checked numerically. */

html[data-ordleg-theme="nature"] {
  --bg: radial-gradient(ellipse at 45% -15%, rgba(255, 220, 130, 0.12) 0%, transparent 50%),
        radial-gradient(circle 42vmin at 100% 0, rgba(4, 20, 13, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse at 0% 100%, rgba(60, 160, 90, 0.2) 0%, transparent 55%),
        linear-gradient(165deg, #154734 0%, #0f3527 55%, #0b2a1f 100%);
  --fg: #f4fbef;
  --fg-muted: #dcefdd;
  --accent: #c6ec5c;
  --accent-fg: #173008;
  --card: rgba(255, 255, 255, 0.08);
  --card-strong: rgba(13, 46, 33, 0.96);
  --card-border: rgba(198, 236, 92, 0.24);
  --taboo: #ff9b73;
  --taboo-bg: rgba(255, 155, 115, 0.13);
  --timer-ok: #9be36a;
  --timer-warn: #ff5a4f;
  --timer-warn-fg: #1f0505;
  --ok: #9be36a;
  --bad: #ffb3a6;
  --subtle: rgba(255, 255, 255, 0.16);
  --selected-bg: rgba(198, 236, 92, 0.08);
  --selected-ring: rgba(198, 236, 92, 0.3);
  --overlay: rgba(5, 20, 14, 0.78);
}

/* deco-a: dark jungle leaves growing in from the top-right corner, swaying (kept dark so
 * the timer and the top-right buttons keep their contrast) */
html[data-ordleg-theme="nature"] .theme-deco .deco-a {
  top: -3vmin;
  right: -3vmin;
  width: 44vmin;
  height: 44vmin;
  background: url("../../assets/themes/nature/leaves.svg") right top / contain no-repeat;
  opacity: 0.75;
  transform-origin: 100% 0;
  animation: nature-sway 9s ease-in-out infinite alternate;
}

/* deco-b: leaves growing up out of the bottom-left corner */
html[data-ordleg-theme="nature"] .theme-deco .deco-b {
  bottom: -3vmin;
  left: -3vmin;
  width: 44vmin;
  height: 44vmin;
  background: url("../../assets/themes/nature/leaves-b.svg") left bottom / contain no-repeat;
  opacity: 0.65;
  transform-origin: 0 100%;
  animation: nature-sway 11s ease-in-out infinite alternate-reverse;
}

/* During play the timer sits in the top-right corner: the top-right leaves move to the
 * bottom-right corner (mirrored) so the timer, including its red warning state, always
 * sits on the plain dark background. */
html[data-ordleg-theme="nature"][data-screen="play"] .theme-deco .deco-a {
  top: auto;
  bottom: -3vmin;
  transform: scaleY(-1);
  transform-origin: 100% 50%;
  animation-name: nature-sway-flipped;
}

/* deco-c: holder for a butterfly (::before, top edge left of the audience buttons) and
 * a paw-print trail (::after, bottom edge right of the play hint) */
html[data-ordleg-theme="nature"] .theme-deco .deco-c { inset: 0; }
html[data-ordleg-theme="nature"] .theme-deco .deco-c::before {
  content: "";
  position: absolute;
  top: 3vh;
  left: 26vw;
  width: 10vmin;
  height: 8.4vmin;
  background: url("../../assets/themes/nature/butterfly.svg") center / contain no-repeat;
  animation: nature-flutter 6s ease-in-out infinite alternate;
}
html[data-ordleg-theme="nature"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  right: 15vw;
  bottom: 1.5vh;
  width: 26vmin;
  height: 12vmin;
  background: url("../../assets/themes/nature/paws.svg") center / contain no-repeat;
  opacity: 0.35;
}

@keyframes nature-sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}
@keyframes nature-sway-flipped {
  from { transform: scaleY(-1) rotate(2.5deg); }
  to { transform: scaleY(-1) rotate(-2.5deg); }
}
@keyframes nature-flutter {
  0% { transform: translate(0, 0) rotate(-6deg) scaleX(1); }
  50% { transform: translate(1.5vmin, -1vmin) rotate(4deg) scaleX(0.85); }
  100% { transform: translate(3vmin, 0.5vmin) rotate(-2deg) scaleX(1); }
}

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

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