/* Theme: sport - "Sport & fritid".
 * Floodlit stadium: mowed pitch stripes in deep green (shaded behind the timer), white touchlines around the whole
 * screen with corner arcs and corner flags, goal areas on the side edges and a bouncing
 * football on the top edge. Energetic yellow accent, orange corner flags.
 * Dark theme: white text on a near-opaque pitch-green card. Contrast checked numerically. */

html[data-ordleg-theme="sport"] {
  --bg: radial-gradient(ellipse at 8% -12%, rgba(255, 255, 255, 0.1) 0%, transparent 42%),
        radial-gradient(ellipse at 62% -12%, rgba(255, 255, 255, 0.1) 0%, transparent 38%),
        radial-gradient(circle 44vmin at 100% 0, rgba(2, 22, 8, 0.7) 0%, rgba(2, 22, 8, 0.45) 45%, transparent 100%),
        linear-gradient(180deg, transparent 55%, rgba(0, 24, 9, 0.35) 100%),
        repeating-linear-gradient(90deg, #11602c 0 7vw, #0d5426 7vw 14vw);
  --fg: #ffffff;
  --fg-muted: #dff2e4;
  --accent: #ffd23a;
  --accent-fg: #2a2100;
  --card: rgba(0, 32, 12, 0.3);
  --card-strong: rgba(7, 46, 22, 0.95);
  --card-border: rgba(255, 255, 255, 0.3);
  --taboo: #ff8a80;
  --taboo-bg: rgba(255, 138, 128, 0.14);
  --timer-ok: #ffffff;
  --timer-warn: #ff5c5c;
  --timer-warn-fg: #1f0505;
  --ok: #8ff0a8;
  --bad: #ffa59e;
  --subtle: rgba(255, 255, 255, 0.2);
  --selected-bg: rgba(255, 210, 58, 0.18);
  --selected-ring: rgba(255, 210, 58, 0.34);
  --overlay: rgba(3, 25, 10, 0.78);
}

/* deco-a: the touchline around the whole screen, with a quarter-circle arc in each corner;
 * ::before / ::after are corner flags in the bottom corners */
html[data-ordleg-theme="sport"] .theme-deco .deco-a {
  inset: 1.4vmin;
  border: 0.45vmin solid rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(circle at 0 0, transparent 3.5vmin, rgba(255, 255, 255, 0.5) 3.5vmin 3.95vmin, transparent 4vmin) left top / 4.5vmin 4.5vmin no-repeat,
    radial-gradient(circle at 100% 0, transparent 3.5vmin, rgba(255, 255, 255, 0.5) 3.5vmin 3.95vmin, transparent 4vmin) right top / 4.5vmin 4.5vmin no-repeat,
    radial-gradient(circle at 0 100%, transparent 3.5vmin, rgba(255, 255, 255, 0.5) 3.5vmin 3.95vmin, transparent 4vmin) left bottom / 4.5vmin 4.5vmin no-repeat,
    radial-gradient(circle at 100% 100%, transparent 3.5vmin, rgba(255, 255, 255, 0.5) 3.5vmin 3.95vmin, transparent 4vmin) right bottom / 4.5vmin 4.5vmin no-repeat;
}
html[data-ordleg-theme="sport"] .theme-deco .deco-a::before,
html[data-ordleg-theme="sport"] .theme-deco .deco-a::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3.5vmin;
  height: 7vmin;
  background: url("../../assets/themes/sport/flag.svg") left bottom / contain no-repeat;
  transform-origin: 10% 100%;
  animation: sport-flag 3.5s ease-in-out infinite alternate;
}
html[data-ordleg-theme="sport"] .theme-deco .deco-a::before { left: -0.6vmin; }
html[data-ordleg-theme="sport"] .theme-deco .deco-a::after {
  right: -0.6vmin;
  transform-origin: 90% 100%;
  animation-name: sport-flag-r;
  animation-delay: -1.7s;
}

/* deco-b: goal areas on the left and right edges (vertically centred), narrow enough to
 * stay inside the page gutter */
html[data-ordleg-theme="sport"] .theme-deco .deco-b,
html[data-ordleg-theme="sport"] .theme-deco .deco-b::after {
  top: 36vh;
  height: 28vh;
  width: 1.6vw;
  border: 0.45vmin solid rgba(255, 255, 255, 0.5);
}
html[data-ordleg-theme="sport"] .theme-deco .deco-b {
  left: 1.4vmin;
  border-left: 0;
}
html[data-ordleg-theme="sport"] .theme-deco .deco-b::after {
  content: "";
  position: fixed;
  right: 1.4vmin;
  border-right: 0;
}

/* deco-c: a football bouncing gently on the top edge (left of the audience buttons) */
html[data-ordleg-theme="sport"] .theme-deco .deco-c {
  top: 3vh;
  left: 26vw;
  width: 9vmin;
  height: 9vmin;
  background: url("../../assets/themes/sport/ball.svg") center / contain no-repeat;
  filter: drop-shadow(0 1vmin 0.8vmin rgba(0, 0, 0, 0.35));
  animation: sport-bounce 2.8s ease-in-out infinite alternate;
}

@keyframes sport-flag {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
@keyframes sport-flag-r {
  from { transform: scaleX(-1) rotate(-3deg); }
  to { transform: scaleX(-1) rotate(3deg); }
}
@keyframes sport-bounce {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(1.6vmin) rotate(40deg); }
}

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

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