/* Theme: summer (category "sommer") - light theme: clear sky fading to warm sand,
 * a glowing sun in the top-right corner, soft clouds and rolling waves along the bottom. */

html[data-ordleg-theme="summer"] {
  --bg: radial-gradient(circle at 96% 4%, rgba(255, 246, 196, 0.95) 0, rgba(255, 236, 160, 0.55) 14%, rgba(255, 236, 160, 0) 38%),
        linear-gradient(180deg, #86cdf1 0%, #b3e1f5 38%, #dcefee 58%, #f4e6c4 76%, #efd6a4 100%);
  --fg: #0d2c44;
  --fg-muted: #254c68;
  --accent: #b53a0b;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.55);
  --card-strong: rgba(255, 255, 255, 0.97);
  --card-border: rgba(13, 44, 68, 0.14);
  --taboo: #b8232b;
  --taboo-bg: rgba(230, 70, 60, 0.1);
  --timer-ok: #0b7285;
  --timer-warn: #c42f24;
  --ok: #147a3a;
  --bad: #b8232b;
  --subtle: rgba(13, 44, 68, 0.12);
  --selected-bg: rgba(255, 255, 255, 0.85);
  --selected-ring: rgba(181, 58, 11, 0.3);
  --overlay: rgba(8, 38, 58, 0.5);
}

/* --- Sun: glowing disc with slowly turning rays, tucked into the top-right corner --- */
html[data-ordleg-theme="summer"] .theme-deco .deco-a {
  top: calc(-1 * clamp(110px, 15vmin, 420px));
  right: calc(-1 * clamp(110px, 15vmin, 420px));
  width: clamp(280px, 40vmin, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c9 0%, #ffe486 34%, #ffd35a 50%, rgba(255, 211, 90, 0.35) 54%, rgba(255, 220, 120, 0) 72%);
}
html[data-ordleg-theme="summer"] .theme-deco .deco-a::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 180, 0.55) 0deg 6deg, rgba(255, 240, 180, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0) 62%);
  mask-image: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0) 62%);
  animation: ordleg-summer-rays 140s linear infinite;
  will-change: transform;
}
@keyframes ordleg-summer-rays { to { transform: rotate(360deg); } }

/* --- Waves: two seamless wave strips drifting in opposite directions --- */
html[data-ordleg-theme="summer"] .theme-deco .deco-b {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(56px, 8.5vh, 200px);
}
html[data-ordleg-theme="summer"] .theme-deco .deco-b::before,
html[data-ordleg-theme="summer"] .theme-deco .deco-b::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + clamp(600px, 60vw, 1800px));
  background-repeat: repeat-x;
  background-size: clamp(600px, 60vw, 1800px) 100%;
  will-change: transform;
}
html[data-ordleg-theme="summer"] .theme-deco .deco-b::before {
  background-image: url("../../assets/themes/summer/wave-back.svg");
  opacity: 0.75;
  animation: ordleg-summer-wave-l 38s linear infinite;
}
html[data-ordleg-theme="summer"] .theme-deco .deco-b::after {
  background-image: url("../../assets/themes/summer/wave-front.svg");
  transform: translate3d(calc(-1 * clamp(600px, 60vw, 1800px)), 0, 0);
  animation: ordleg-summer-wave-r 26s linear infinite;
}
@keyframes ordleg-summer-wave-l { to { transform: translate3d(calc(-1 * clamp(600px, 60vw, 1800px)), 0, 0); } }
@keyframes ordleg-summer-wave-r { to { transform: translate3d(0, 0, 0); } }

/* --- Clouds drifting gently in the top-left sky --- */
html[data-ordleg-theme="summer"] .theme-deco .deco-c {
  top: 0;
  left: 0;
  width: 60vw;
  height: 30vh;
}
html[data-ordleg-theme="summer"] .theme-deco .deco-c::before,
html[data-ordleg-theme="summer"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  aspect-ratio: 300 / 120;
  background: url("../../assets/themes/summer/cloud.svg") no-repeat 0 0 / 100% 100%;
  will-change: transform;
}
html[data-ordleg-theme="summer"] .theme-deco .deco-c::before {
  top: 1.5vh;
  left: 24vw;
  width: clamp(120px, 11vw, 330px);
  opacity: 0.9;
  animation: ordleg-summer-cloud 50s ease-in-out infinite alternate;
}
html[data-ordleg-theme="summer"] .theme-deco .deco-c::after {
  top: 4vh;
  left: 69vw;
  width: clamp(80px, 7vw, 210px);
  opacity: 0.7;
  animation: ordleg-summer-cloud 64s ease-in-out -20s infinite alternate-reverse;
}
@keyframes ordleg-summer-cloud { from { transform: translate3d(-3vw, 0, 0); } to { transform: translate3d(3vw, 0, 0); } }

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