/* Theme: denmark (category "danmark") - light Nordic white with Dannebrog red:
 * a festive flag garland (flagranke) along the top edge and a red/white hem along the bottom. */

html[data-ordleg-theme="denmark"] {
  --bg: radial-gradient(ellipse 70% 60% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(ellipse 40% 40% at 0% 100%, rgba(200, 16, 46, 0.07) 0%, rgba(200, 16, 46, 0) 100%),
        radial-gradient(ellipse 40% 40% at 100% 100%, rgba(200, 16, 46, 0.07) 0%, rgba(200, 16, 46, 0) 100%),
        linear-gradient(180deg, #f9f6f2 0%, #f2ece6 100%);
  --fg: #1c1a20;
  --fg-muted: #57525a;
  --accent: #c8102e;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.72);
  --card-strong: rgba(255, 255, 255, 0.97);
  --card-border: rgba(28, 26, 32, 0.12);
  --taboo: #b00d28;
  --taboo-bg: rgba(200, 16, 46, 0.08);
  --timer-ok: #3a3640;
  --timer-warn: #c8102e;
  --ok: #1f7444;
  --bad: #b00d28;
  --subtle: rgba(28, 26, 32, 0.1);
  --selected-bg: rgba(255, 255, 255, 0.95);
  --selected-ring: rgba(200, 16, 46, 0.25);
  --overlay: rgba(24, 10, 14, 0.5);
}

/* --- Flag garland along the top edge (one seamless swag, repeated) --- */
html[data-ordleg-theme="denmark"] .theme-deco .deco-a {
  left: 0;
  right: 0;
  top: 0;
  height: clamp(34px, 3.5vw, 134px);
  background: url("../../assets/themes/denmark/garland.svg") repeat-x;
  background-size: clamp(270px, 26vw, 1000px) 100%;
  background-position: 6vw 0;
  filter: drop-shadow(0 0.3vh 0.4vh rgba(90, 10, 25, 0.22));
  transform-origin: 50% 0;
  animation: ordleg-dk-flutter 6s ease-in-out infinite alternate;
}
@keyframes ordleg-dk-flutter { from { transform: translate3d(0, -0.12vw, 0); } to { transform: translate3d(0, 0.08vw, 0); } }

/* --- Red and white hem along the bottom edge --- */
html[data-ordleg-theme="denmark"] .theme-deco .deco-c {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(10px, 1.5vh, 34px);
  background: linear-gradient(180deg, #c8102e 0 32%, #ffffff 32% 52%, #c8102e 52% 100%);
  box-shadow: 0 -0.3vh 0.8vh rgba(120, 10, 30, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="denmark"] .theme-deco .deco-a { animation: none; }
}