/* Arcade Express — what the seasonal themes share (public/js/theme.js sets <html data-theme="<name>">): the theme
   button, the decoration layers, things flying across, the burst through the final results. Each theme recolours the
   site and draws its decorations in css/<name>.css. */

/* Elements of the views that only exist with a theme (themeIcons(): the logo, the podium steps…), or without one. */
.theme-only { display: none !important; }
:root[data-theme="halloween"] .for-halloween,
:root[data-theme="noel"] .for-noel,
:root[data-theme="nouvel-an"] .for-nouvel-an,
:root[data-theme="automne"] .for-automne { display: block !important; }
:root[data-theme] .theme-hide { display: none !important; }

.theme-toggle { padding: 6px 10px; font-size: 22px; }
.header-actions .theme-toggle { flex: 0 0 auto; min-height: 44px; }
.theme-toggle.home-theme { margin-top: -14px; font-size: 15px; }
.home-theme .icon { font-size: 22px; }

/* A themed icon on each podium step. */
.podium-block { position: relative; }
.podium-deco {
  position: absolute;
  top: -15px;
  right: -8px;
  font-size: 30px;
  transform: rotate(12deg);
}
.rank-2 .podium-deco { transform: rotate(-10deg); left: -8px; right: auto; }

/* ---------- Decoration layers ---------- */

.theme-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.theme-back { z-index: 0; }   /* behind #app (z-index 1) */
.theme-front { z-index: 3; }  /* above the views, below the banner, toasts and dialogs */
.theme-layer .icon { display: block; }

/* Something crossing the screen (bats, a witch, a sleigh…): --top, --rise (vertical drift), --size, --dur, --delay. */
.theme-flyer {
  position: absolute;
  top: var(--top);
  left: 0;
  font-size: var(--size);
  animation: theme-fly-ltr var(--dur) linear var(--delay) both;
}
.theme-flyer.rtl { animation-name: theme-fly-rtl; }
@keyframes theme-fly-ltr {
  from { transform: translate(-12vw, 0); }
  to { transform: translate(112vw, var(--rise)); }
}
@keyframes theme-fly-rtl {
  from { transform: translate(112vw, 0); }
  to { transform: translate(-12vw, var(--rise)); }
}

/* The burst through the final results (theme.js, resultsBurst): --x, --y, --size, --delay, --sway per item; each
   theme gives the motion. */
.theme-burst { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.theme-burst-item {
  position: absolute;
  left: var(--x);
  font-size: var(--size);
  opacity: 0;
}