/* Gemeinsamer Unterbau für alle Feiertags-Designs.
   Die App setzt <body class="themed xmas|easter|birthday">; die Theme-Dateien
   liefern nur Farben (Variablen), Emojis, die Form der Girlanden-Elemente
   und die Partikel. Ohne „themed“ greift nichts hiervon. */

body.themed {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  background:
    radial-gradient(ellipse at 15% -10%, var(--tint1), transparent 45%),
    radial-gradient(ellipse at 100% 0%, var(--tint2), transparent 50%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- Fallende Partikel (zwei Ebenen, nahtlos gekachelt) ---------- */

body.themed::before,
body.themed::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
body.themed::before {
  top: -240px;
  background-image: var(--particles-small);
  background-size: 240px 240px;
  animation: themed-fall-small var(--fall-speed, 22s) linear infinite;
}
body.themed::after {
  top: -360px;
  background-image: var(--particles-big);
  background-size: 360px 360px;
  animation: themed-fall-big calc(var(--fall-speed, 22s) * 1.5) linear infinite;
  opacity: .85;
}
@keyframes themed-fall-small { to { transform: translateY(240px); } }
@keyframes themed-fall-big { to { transform: translate(var(--drift, -30px), 360px); } }

body.themed main { position: relative; z-index: 1; padding-top: 4px; }

/* ---------- Typografie ---------- */

body.themed h1,
body.themed h2,
body.themed .card h3,
body.themed dialog h2,
body.themed .setup summary {
  font-family: var(--serif);
  letter-spacing: .005em;
}
body.themed h1 { color: var(--head); font-size: 1.75rem; }
body.themed h2 { color: var(--head); }
body.themed .card h3 { font-size: 1.12rem; }

/* ---------- Kopfzeile mit Zierband ---------- */

body.themed .topbar { position: relative; padding-bottom: 16px; }
body.themed .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--band);
  opacity: .85;
}
body.themed .badge { background: var(--badge-bg); color: var(--badge-text); }

/* ---------- Buttons & Chips ---------- */

body.themed button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), inset 0 1px 0 rgb(255 255 255 / .2);
}
body.themed #add-gift::before { content: "🎁 "; }
body.themed .chips button[aria-pressed="true"] {
  background: var(--head);
  border-color: var(--head);
  color: var(--card);
}
body.themed button.link { color: var(--accent); }

/* ---------- Karten: farbiges Band links, abwechselnd ---------- */

body.themed .card {
  position: relative;
  border-left: 5px solid var(--accent);
  box-shadow: 0 1px 2px rgb(60 30 10 / .05), 0 4px 14px rgb(60 30 10 / .04);
}
body.themed .cards .card:nth-child(even) { border-left-color: var(--head); }
body.themed .card .meta { color: var(--price); font-weight: 600; }
body.themed .compact .card { border-left-width: 3px; }
body.themed .compact .card .meta { color: var(--muted); font-weight: 400; }

/* ---------- Login, Dialog, Einrichtung ---------- */

body.themed .login-icon {
  filter: drop-shadow(0 6px 12px var(--tint1));
  transform: rotate(-6deg);
}
body.themed dialog { border-top: 6px solid var(--head); }
body.themed .setup { border-top: 4px solid var(--badge-bg); }

/* ---------- Girlande oben über die ganze Breite ----------
   app.js zeichnet das Kabel als SVG: ein großer Bogen von Ecke zu Ecke,
   dazwischen kleine Bögen; die <i> sitzen genau an den Aufhängepunkten. */

.garland { display: none; }

body.themed .garland {
  display: block;
  position: relative;
  z-index: 2;
  height: var(--garland-height, 60px);
  margin-top: env(safe-area-inset-top);
  overflow: hidden;
  pointer-events: none;
}
body.themed .garland svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.themed .garland path {
  fill: none;
  stroke: var(--wire);
  stroke-width: 2;
  stroke-linecap: round;
}
body.themed .garland i {
  position: absolute;
  width: 0;
  height: 0;
}
/* Das hängende Element selbst (Birne, Ei, Wimpel) – Form kommt aus dem Theme */
body.themed .garland i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.themed::before,
  body.themed::after,
  body.themed .garland i::after { animation: none !important; }
}