/* =========================================================
   SEASONAL DECORATIONS - what a visual theme adds beyond colour (colours: styles/tokens.css "VISUAL THEMES").
   ---------------------------------------------------------
   Source: the owner's Claude Design canvases (Padelstar Jul, Vinter, Sommer, Pride, Halloween, 2026-10-20).
   app/theme-decor.js adds the layers (.season-snow, .season-aurora, .season-garland, .season-icicles, .season-arcs) and swaps the logo art.
   Rules: decoration sits on the page ground and the edges of cards, never behind numbers or body text; every layer
   ignores the pointer; anything that moves loops slowly, pauses while the page is hidden and stands still under
   prefers-reduced-motion. Nothing here applies without data-visual-theme, so the standard look is untouched.
   ========================================================= */

/* ---- shared layer mechanics ---- */
.season-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
[data-visual-theme] body[data-theme] .app-shell,
[data-visual-theme] .tv-page .tv-app { position: relative; z-index: 1; background: transparent; }
.season-paused .season-layer,
.season-paused .season-layer * { animation-play-state: paused !important; }

/* snowfall: small round flakes drifting down and sideways (two animations: fall + sway) */
.season-snow span {
  position: absolute; top: -12px; display: block; border-radius: 50%;
  background: var(--season-snow); opacity: var(--season-snow-opacity);
  animation-name: season-fall, season-sway; animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite; animation-direction: normal, alternate;
}
@keyframes season-fall { from { transform: translate3d(0, -12px, 0); } to { transform: translate3d(0, 105vh, 0); } }
@keyframes season-sway { from { margin-left: -6px; } to { margin-left: 6px; } }

/* garland: hangs from the top edge of the page and scrolls away with it */
.season-garland {
  position: absolute; inset: 0 0 auto 0; height: 46px; z-index: 40;
  background: url("../assets/themes/christmas-garland.webp") repeat-x left -2px / auto 46px;
}

/* icicles (Vinter): the same kind of top strip as the garland */
.season-icicles { position: absolute; inset: 0 0 auto 0; height: 40px; z-index: 40; background: url("../assets/themes/winter-icicles.svg") repeat-x left top / auto 40px; }
[data-theme="light"] .season-icicles { background-image: url("../assets/themes/winter-icicles-light.svg"); }
.tv-page .season-icicles { height: 56px; background-size: auto 56px; }
/* rainbow arcs (Pride) in the bottom right corner of the page */
.season-arcs { inset: auto 0 0 auto; width: 360px; height: 360px; opacity: .24; background: url("../assets/themes/pride-arcs.svg") no-repeat right bottom / contain; }
[data-theme="light"] .season-arcs { opacity: .3; }

/* the leader badge: one small picture next to the leader in the standings, on the TV board and on team A in Big Score
   (Vinter, Sommer, Pride; Jul and Halloween have their own rules below). In the tables it sits right after the leader's
   name, never pinned to the row's right edge, where it covered the numbers (points, difference) on narrow rows. */
[data-visual-theme="winter"], [data-visual-theme="summer"], [data-visual-theme="pride"] { --season-badge: none; }
[data-visual-theme="winter"] { --season-badge: url("../assets/themes/winter-flake.svg"); }
[data-visual-theme="summer"] { --season-badge: url("../assets/themes/summer-sun.svg"); }
[data-visual-theme="pride"] { --season-badge: url("../assets/themes/pride-heart.svg"); }
:is([data-visual-theme="winter"], [data-visual-theme="summer"], [data-visual-theme="pride"]) body[data-theme] .large-score-board > .large-score-team:first-child { position: relative; }
:is([data-visual-theme="winter"], [data-visual-theme="summer"], [data-visual-theme="pride"]) body[data-theme] .standings > li:first-child .player-list-name::after,
:is([data-visual-theme="winter"], [data-visual-theme="summer"], [data-visual-theme="pride"]) .tv-page .tv-standing-row:first-child .tv-standing-player::after {
  content: ""; flex: none; width: 24px; height: 24px; pointer-events: none; background: var(--season-badge) no-repeat center / contain;
}
/* the TV name block has no gap of its own */
.tv-page .tv-standing-row:first-child .tv-standing-player::after { margin-left: 8px; }
:is([data-visual-theme="winter"], [data-visual-theme="summer"], [data-visual-theme="pride"]) body[data-theme] .large-score-board > .large-score-team:first-child::after {
  content: ""; position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; pointer-events: none;
  background: var(--season-badge) no-repeat center / contain;
}

@media (prefers-reduced-motion: reduce) {
  .season-layer, .season-layer * { animation: none !important; }
  /* still flakes: spread them over the page instead of parking them at the top */
  .season-snow span:nth-child(3n) { top: 22%; }
  .season-snow span:nth-child(3n + 1) { top: 54%; }
  .season-snow span:nth-child(3n + 2) { top: 81%; }
}

/* =========================================================
   JUL (christmas): Julenatt (dark) / Snøfall (light)
   ========================================================= */
[data-visual-theme="christmas"] body[data-theme] .app-shell { padding-top: 30px; }
[data-visual-theme="christmas"] body[data-theme] .brand-home-button .ps-logo { --logo-h: 38px; }
@media (max-width: 760px) {
  [data-visual-theme="christmas"] body[data-theme] .brand-home-button .ps-logo { --logo-h: 35px; }
}

/* snow cap on the one main card (join code) and holly in its corner */
[data-visual-theme="christmas"] body[data-theme] .home-join-card { position: relative; overflow: visible; }
[data-visual-theme="christmas"] body[data-theme] .home-join-card::before,
[data-visual-theme="christmas"] body[data-theme] .large-score-board > .large-score-team:first-child::before {
  content: ""; position: absolute; top: -10px; left: 10px; right: 10px; height: 26px; pointer-events: none;
  background: url("../assets/themes/christmas-snowcap.svg") no-repeat center / 100% 100%;
}
[data-theme="light"][data-visual-theme="christmas"] body[data-theme] .home-join-card::before {
  background-image: url("../assets/themes/christmas-snowcap-light.svg");
}
[data-visual-theme="christmas"] body[data-theme] .home-join-card::after,
[data-visual-theme="christmas"] body[data-theme] .large-score-board > .large-score-team:first-child::after {
  content: ""; position: absolute; top: -6px; right: 14px; width: 56px; height: 40px; pointer-events: none;
  background: url("../assets/themes/christmas-holly.svg") no-repeat center / contain;
}
[data-visual-theme="christmas"] body[data-theme] .large-score-board > .large-score-team:first-child { position: relative; overflow: visible; }
[data-visual-theme="christmas"] body[data-theme] .large-score-board > .large-score-team:first-child::before { top: -9px; }
[data-visual-theme="christmas"] body[data-theme] .large-score-board > .large-score-team:first-child::after { top: 12px; right: 16px; }
/* the cream snow cap only shows on a cream panel: in Snøfall team A is pine green, so the cap stays white */

/* holly marks the leader in the standings */
[data-visual-theme="christmas"] body[data-theme] .standings > li:first-child .player-list-name::after {
  content: ""; flex: none; width: 34px; height: 24px;
  pointer-events: none; background: url("../assets/themes/christmas-holly.svg") no-repeat center / contain; opacity: .95;
}

/* Big score: the garland over the top of the scorepad */
[data-visual-theme="christmas"] body[data-theme] .large-score-surface { position: relative; }
[data-visual-theme="christmas"] body[data-theme] .large-score-surface::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 40px; z-index: 2; pointer-events: none;
  background: url("../assets/themes/christmas-garland.webp") repeat-x left -2px / auto 40px;
}
[data-visual-theme="christmas"] body[data-theme] .large-score-top { padding-top: 26px; }

/* TV: garland, snow and holly on the leader */
[data-visual-theme="christmas"] .tv-page .tv-app { padding-top: 64px; }
[data-visual-theme="christmas"] .tv-page .season-garland { height: 64px; background-size: auto 64px; }
[data-visual-theme="christmas"] .tv-page .tv-brand { --logo-h: clamp(36px, 3.6vw, 60px); }
[data-visual-theme="christmas"] .tv-page .tv-standing-row:first-child .tv-standing-player::after {
  content: ""; flex: none; width: 44px; height: 32px; margin-left: 8px;
  pointer-events: none; background: url("../assets/themes/christmas-holly.svg") no-repeat center / contain;
}

/* =========================================================
   VINTER (winter): northern lights over the top of the page, slow snow
   ========================================================= */
.season-aurora::before,
.season-aurora::after {
  content: ""; position: absolute; left: -30%; right: -30%; top: -12vh; height: 46vh; filter: blur(38px); opacity: .55;
  animation: season-aurora 24s ease-in-out infinite;
}
.season-aurora::before { background: linear-gradient(105deg, transparent 8%, var(--season-aurora-1) 24%, var(--season-aurora-2) 34%, transparent 48%); }
.season-aurora::after { background: linear-gradient(100deg, transparent 48%, var(--season-aurora-3) 64%, var(--season-aurora-4) 74%, transparent 88%); animation-duration: 31s; animation-direction: reverse; }
[data-theme="light"] .season-aurora::before,
[data-theme="light"] .season-aurora::after { opacity: .28; }
@keyframes season-aurora {
  0%, 100% { transform: translateX(-10%) skewX(-8deg); }
  50% { transform: translateX(10%) skewX(6deg); }
}

/* =========================================================
   HALLOWEEN: pumpkin glow at the foot of the page, a few bats drifting high up, cobweb in the corner of the main card
   ========================================================= */
.season-glow { background: radial-gradient(120% 60% at 50% 115%, var(--season-glow), transparent 70%); }
.season-bats span {
  position: absolute; top: 8%; left: -60px; width: 56px; height: 24px; opacity: .9;
  background: url("../assets/themes/halloween-bat.svg") no-repeat center / contain;
  animation: season-bat 38s linear infinite;
}
.season-bats span:nth-child(2) { top: 18%; width: 32px; height: 14px; animation-duration: 47s; animation-delay: -14s; }
.season-bats span:nth-child(3) { top: 4%; width: 26px; height: 12px; animation-duration: 55s; animation-delay: -30s; }
.season-bats span:nth-child(4) { top: 26%; width: 38px; height: 16px; animation-duration: 61s; animation-delay: -44s; }
[data-theme="light"] .season-bats span { opacity: .55; }
@keyframes season-bat {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(28vw, -14px, 0); }
  50% { transform: translate3d(56vw, 10px, 0); }
  75% { transform: translate3d(84vw, -8px, 0); }
  100% { transform: translate3d(calc(100vw + 120px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .season-bats span { left: auto; right: 12%; }
  .season-bats span:nth-child(2) { right: 30%; }
  .season-bats span:nth-child(3) { right: 6%; }
  .season-bats span:nth-child(4) { right: 48%; }
}
/* a light dusting of bats on the light page is enough; the dark page carries the glow */
[data-visual-theme="halloween"] body[data-theme] .brand-home-button .ps-logo { --logo-h: 48px; }
[data-visual-theme="halloween"] body[data-theme] .home-join-card,
[data-visual-theme="halloween"] body[data-theme] .large-score-board > .large-score-team:first-child { position: relative; }
[data-visual-theme="halloween"] body[data-theme] .home-join-card::after,
[data-visual-theme="halloween"] body[data-theme] .large-score-board > .large-score-team:first-child::after {
  content: ""; position: absolute; top: 0; right: 0; width: 76px; height: 76px; pointer-events: none;
  border-top-right-radius: inherit; background: url("../assets/themes/halloween-web.svg") no-repeat top right / contain;
}
[data-theme="light"][data-visual-theme="halloween"] body[data-theme] .home-join-card::after,
:root:not([data-theme="light"])[data-visual-theme="halloween"] body[data-theme] .large-score-board > .large-score-team:first-child::after { filter: invert(.7); }
[data-visual-theme="halloween"] body[data-theme] .standings > li:first-child .player-list-name::after,
[data-visual-theme="halloween"] .tv-page .tv-standing-row:first-child .tv-standing-player::after {
  content: ""; flex: none; width: 30px; height: 27px;
  pointer-events: none; background: url("../assets/themes/halloween-pumpkin.svg") no-repeat center / contain;
}
[data-visual-theme="halloween"] .tv-page .tv-brand { --logo-h: clamp(44px, 4.4vw, 72px); }

/* =========================================================
   VINTER: icicles along the top, snow on the main card, a snowflake on the leader (plus aurora and snow above)
   ========================================================= */
[data-visual-theme="winter"] body[data-theme] .app-shell { padding-top: 22px; }
[data-visual-theme="winter"] body[data-theme] .home-join-card { position: relative; overflow: visible; }
[data-visual-theme="winter"] body[data-theme] .home-join-card::before {
  content: ""; position: absolute; top: -10px; left: 10px; right: 10px; height: 26px; pointer-events: none;
  background: url("../assets/themes/winter-snowcap.svg") no-repeat center / 100% 100%;
}
[data-theme="light"][data-visual-theme="winter"] body[data-theme] .home-join-card::before { background-image: url("../assets/themes/christmas-snowcap-light.svg"); }
[data-visual-theme="winter"] .tv-page .tv-app { padding-top: 48px; }

/* =========================================================
   SOMMER: sun-yellow action colour, a sun on the leader; no layers, so the page stays light and calm
   ========================================================= */

/* =========================================================
   PRIDE: rainbow logo, a rainbow stripe across the top of the main card, rainbow arcs in the corner, a heart on the leader
   ========================================================= */
[data-visual-theme="pride"] body[data-theme] .home-join-card { position: relative; }
[data-visual-theme="pride"] body[data-theme] .home-join-card::before {
  content: ""; position: absolute; top: 7px; left: 14px; right: 14px; height: 8px; border-radius: 999px; pointer-events: none;
  background: var(--ramp-accent);
}
[data-visual-theme="pride"] body[data-theme] .brand-home-button .ps-logo { --logo-h: 34px; }