/* Theme: stable - "Heste & ponyer".
 * Hay-cream sky over green meadow hills, a wooden paddock fence with an open gate in the middle,
 * a lucky horseshoe, a prize rosette and slow-drifting clouds.
 * Light theme: dark wood-brown text on cream cards. Contrast checked numerically (see report). */

html[data-ordleg-theme="stable"] {
  --bg: radial-gradient(ellipse 62% 20% at 12% 100%, #9fcf72 0 97%, transparent 100%),
        radial-gradient(ellipse 70% 24% at 92% 100%, #b3da88 0 97%, transparent 100%),
        radial-gradient(ellipse 90% 30% at 50% 104%, #c9e4a0 0 97%, transparent 100%),
        radial-gradient(circle at 92% 6%, #fff1b8 0%, transparent 28%),
        linear-gradient(180deg, #fbf4df 0%, #f1f4d8 55%, #dcedbf 100%);
  --fg: #2e1d0e;
  --fg-muted: #5a3c1e;
  --accent: #8a4a1c;
  --accent-fg: #ffffff;
  --card: rgba(255, 251, 238, 0.74);
  --card-strong: rgba(255, 251, 240, 0.97);
  --card-border: rgba(122, 75, 36, 0.3);
  --taboo: #b0261b;
  --taboo-bg: rgba(176, 38, 27, 0.09);
  --timer-ok: #4f9a2c;
  --timer-warn: #c0360f;
  --ok: #2e7a1f;
  --bad: #b0261b;
  --subtle: rgba(90, 60, 30, 0.16);
  --selected-bg: rgba(138, 74, 28, 0.12);
  --selected-ring: rgba(138, 74, 28, 0.22);
  --overlay: rgba(46, 29, 14, 0.5);
}

/* deco-a / deco-b: two fence runs along the bottom edge, with grass in front.
 * The centre is left open (a gateway between two posts) so the play hint stays on the plain meadow. */
html[data-ordleg-theme="stable"] .theme-deco .deco-a,
html[data-ordleg-theme="stable"] .theme-deco .deco-b {
  bottom: 0;
  /* 3.6 fence tiles (one tile = 1.2 x height), so each run ends exactly at a post edge */
  width: 60.48vh;
  max-width: 46vw;
  height: 14vh;
  background:
    url("../../assets/themes/stable/grass.svg") left bottom / 12vh 3.5vh repeat-x,
    url("../../assets/themes/stable/fence.svg") left bottom / auto 100% repeat-x;
}
html[data-ordleg-theme="stable"] .theme-deco .deco-a { left: 0; }
html[data-ordleg-theme="stable"] .theme-deco .deco-b { right: 0; background-position: right bottom, right bottom; }

/* rosette pinned to the left fence, horseshoe hanging on the right fence */
html[data-ordleg-theme="stable"] .theme-deco .deco-a::before,
html[data-ordleg-theme="stable"] .theme-deco .deco-b::before {
  content: "";
  position: absolute;
  bottom: 4vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.4vh 0.5vh rgba(60, 35, 10, 0.3));
  transform-origin: 50% 0;
  animation: stable-swing 6s ease-in-out infinite alternate;
}
html[data-ordleg-theme="stable"] .theme-deco .deco-a::before {
  left: 54.3vh;
  width: 9vh;
  height: 12.5vh;
  bottom: 2.5vh;
  background-image: url("../../assets/themes/stable/rosette.svg");
}
html[data-ordleg-theme="stable"] .theme-deco .deco-b::before {
  left: 6vh;
  bottom: 0.8vh;
  width: 8.5vh;
  height: 10.6vh;
  background-image: url("../../assets/themes/stable/horseshoe.svg");
  animation-delay: -3s;
}

/* deco-c: clouds drifting slowly in the top band */
html[data-ordleg-theme="stable"] .theme-deco .deco-c {
  top: 0;
  left: 0;
  right: 0;
  height: 22vh;
}
html[data-ordleg-theme="stable"] .theme-deco .deco-c::before,
html[data-ordleg-theme="stable"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  background: url("../../assets/themes/stable/cloud.svg") center / contain no-repeat;
  opacity: 0.9;
  animation: stable-drift 40s ease-in-out infinite alternate;
}
html[data-ordleg-theme="stable"] .theme-deco .deco-c::before { left: 30vw; top: 1.5vh; width: 18vh; height: 8vh; }
html[data-ordleg-theme="stable"] .theme-deco .deco-c::after { left: 64vw; top: 7vh; width: 13vh; height: 6vh; opacity: 0.75; animation-delay: -20s; }

@keyframes stable-drift {
  from { transform: translateX(-4vw); }
  to { transform: translateX(4vw); }
}
@keyframes stable-swing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

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