/*
 * Fest-Look der Webseite (Owner 2026-10-07, docs/HOLIDAY-LOOK.md). holiday.js setzt <html data-holiday> nach Datum
 * (Berliner Zeit), weil die Seite statisch ausgeliefert wird. Halloween 1.-31.10., Weihnachten 1.-31.12.
 * Färbt nur die Marken-Variablen und den Nachtgrund um; Figuren sind dieselben gekauften Ausschnitte wie im Spiel.
 */

html[data-holiday="halloween"] {
    --yellow: #ff8a2b;
    --blue: #8e4bd9;
    --sky: #b98cff;
    --ink: #0b0716;
    --ink-2: #1a0d26;
}

html[data-holiday="christmas"] {
    --yellow: #f6d27a;
    --blue: #c8302a;
    --sky: #5fc77e;
    --ink: #04120b;
    --ink-2: #0b2416;
}

/* Hauptknopf: der Verlauf beginnt sonst mit hartem Neon-Gelb. */
html[data-holiday="halloween"] .btn-main { background: linear-gradient(180deg, #ffb46b, var(--yellow)); }
html[data-holiday="christmas"] .btn-main { background: linear-gradient(180deg, #fbe7ae, var(--yellow)); }
html[data-holiday="halloween"] .b-hot { box-shadow: 0 6px 18px -6px rgba(255, 138, 43, .8) !important; }
html[data-holiday="christmas"] .b-hot { box-shadow: 0 6px 18px -6px rgba(246, 210, 122, .8) !important; }

/* Großes Startbild: Halloween-Render (eigener Minecraft-Render im Server-Bildstil) statt des blassen Videos. */
html[data-holiday="halloween"] .hero-bg { background: url('/assets/img/holiday/hero_halloween_hill.webp') center / cover no-repeat; }
html[data-holiday="halloween"] .hero-bg video,
html[data-holiday="halloween"] .hero-bg > img { display: none; }
/* Weihnachten: verschneites Dorf bei Abendlicht, unten in den Nachtgrund verlaufend, damit der Text lesbar bleibt. */
html[data-holiday="christmas"] .hero-bg {
    background:
        linear-gradient(180deg, rgba(4, 18, 11, .55) 0%, rgba(4, 18, 11, .05) 28%, rgba(4, 18, 11, .1) 60%, var(--ink) 100%),
        linear-gradient(90deg, rgba(4, 18, 11, .7) 0%, rgba(4, 18, 11, .2) 45%, transparent 70%),
        url('/assets/img/holiday/hero_christmas_hill.webp') center / cover no-repeat;
}
html[data-holiday="christmas"] .hero-bg video,
html[data-holiday="christmas"] .hero-bg > img { display: none; }

#holidayFx {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 60;
}

#holidayDeco {
    position: fixed;
    left: 16px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
    z-index: 59;
}

html[data-holiday="none"] #holidayFx,
html[data-holiday="none"] #holidayDeco,
/* Halloween: die Bühne trägt der Render, ausgeschnittene Pixel-Figuren davor wirken billig (Owner 2026-10-07). */
html[data-holiday="halloween"] #holidayDeco { display: none; }

#holidayDeco i {
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
}

html[data-holiday="halloween"] #holidayDeco .hd-a { width: 30px; height: 62px; background-image: url('/assets/img/holiday/halloween_candle.png'); }
html[data-holiday="halloween"] #holidayDeco .hd-b { width: 88px; height: 116px; background-image: url('/assets/img/holiday/halloween_ghost.png'); margin-right: -34px; margin-bottom: 26px; animation: hd-bob 2.6s ease-in-out infinite; opacity: .92; }
html[data-holiday="halloween"] #holidayDeco .hd-c { width: 86px; height: 84px; background-image: url('/assets/img/holiday/halloween_grave.png'); }

/* Weihnachten: Schneemann mit Geschenken auf einer Schneewehe unten links (eigene Renders, kein Pixel-Ausschnitt).
   Erst wenn das Startbild aus dem Blick ist (holiday.js setzt .hd-past-hero), nie vor der Render-Fläche. */
html[data-holiday="christmas"] #holidayDeco {
    left: 8px; bottom: 0; gap: 0;
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2);
}
html[data-holiday="christmas"].hd-past-hero #holidayDeco { opacity: 1; transform: none; }
html[data-holiday="christmas"] #holidayDeco::before {
    content: ""; position: absolute; left: -24px; right: -30px; bottom: -14px; height: 34px; z-index: -1;
    background: radial-gradient(ellipse at 50% 100%, #fff 0 55%, rgba(220, 236, 255, .9) 64%, rgba(220, 236, 255, 0) 72%);
    filter: drop-shadow(0 -2px 3px rgba(150, 190, 255, .35));
}
html[data-holiday="christmas"] #holidayDeco i { image-rendering: auto; background-size: contain; background-position: center bottom; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
html[data-holiday="christmas"] #holidayDeco .hd-a { width: 54px; height: 54px; background-image: url('/assets/img/holiday/xmas_gift_red.webp'); margin-right: -10px; }
html[data-holiday="christmas"] #holidayDeco .hd-b { width: 104px; height: 136px; background-image: url('/assets/img/holiday/xmas_snowman.webp'); transform-origin: 50% 100%; animation: hd-sway 5s ease-in-out infinite; }
html[data-holiday="christmas"] #holidayDeco .hd-c { width: 46px; height: 58px; background-image: url('/assets/img/holiday/xmas_gift_blue.webp'); margin-left: -14px; }
@keyframes hd-sway {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-1.5deg); }
}

@keyframes hd-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Handy: Figuren halb so groß, sie dürfen keine Knöpfe verdecken. */
@media (max-width: 720px) {
    #holidayDeco { transform: scale(.5); transform-origin: left bottom; }
}

@media (prefers-reduced-motion: reduce) {
    #holidayDeco i { animation: none !important; }
}

/* ── Spielbilder (Owner 2026-10-07: „auch bei den Anzeigebildern … mal ein Kürbis, eine Spinne"): Kürbis unten rechts,
   Renders der gekauften Kürbis-Modelle aus der Spielwelt; jedes dritte Bild ein Netz oben links. Klicks gehen durch. ── */
html[data-holiday="halloween"] .media::after,
html[data-holiday="halloween"] .g-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/img/holiday/icon_pumpkin_face_1_lit.png') right 4% bottom 2% / 22% auto no-repeat;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 140, 40, .35));
    pointer-events: none;
    z-index: 4;
}
/* Sechs Anordnungen (Owner 2026-10-07: „mehr Abwechslung"): einzeln rechts/links, Paar, Dreiergruppe, mit Spinne, mit Fledermaus. */
html[data-holiday="halloween"] .show:nth-of-type(6n+2) .media::after, html[data-holiday="halloween"] .g-tile:nth-of-type(6n+2)::after {
    background: url('/assets/img/holiday/icon_pumpkin_heart_lit_b.png') left 4% bottom 2% / 22% auto no-repeat;
}
html[data-holiday="halloween"] .show:nth-of-type(6n+3) .media::after, html[data-holiday="halloween"] .g-tile:nth-of-type(6n+3)::after {
    background: url('/assets/img/holiday/icon_pumpkin_face_2_lit.png') right 4% bottom 2% / 21% auto no-repeat,
                url('/assets/img/holiday/icon_pumpkin_pickaxe_lit_b.png') right 24% bottom 2% / 14% auto no-repeat;
}
html[data-holiday="halloween"] .show:nth-of-type(6n+4) .media::after, html[data-holiday="halloween"] .g-tile:nth-of-type(6n+4)::after {
    background: url('/assets/img/holiday/icon_pumpkin_face_3_lit_c.png') left 3% bottom 2% / 19% auto no-repeat,
                url('/assets/img/holiday/icon_pumpkin_creeper_lit.png') left 20% bottom 2% / 14% auto no-repeat,
                url('/assets/img/holiday/icon_pumpkin_b.png') left 32% bottom 2% / 11% auto no-repeat;
}
html[data-holiday="halloween"] .show:nth-of-type(6n+5) .media::after, html[data-holiday="halloween"] .g-tile:nth-of-type(6n+5)::after {
    background: url('/assets/img/holiday/icon_pumpkin_creeper_lit_b.png') right 4% bottom 2% / 21% auto no-repeat,
                url('/assets/img/holiday/spider_hang.png') left 27% top 34% / 7% auto no-repeat,
                linear-gradient(rgba(235, 235, 245, .7), rgba(235, 235, 245, .7)) left 30% top 0 / 1px 36% no-repeat;
    image-rendering: auto;
}
html[data-holiday="halloween"] .show:nth-of-type(6n) .media::after, html[data-holiday="halloween"] .g-tile:nth-of-type(6n)::after {
    background: url('/assets/img/holiday/icon_pumpkin_face_1_c.png') left 4% bottom 2% / 18% auto no-repeat,
                url('/assets/img/holiday/bat_frame.png') right 8% top 5% / 16% auto no-repeat;
}
html[data-holiday="halloween"] .show:nth-of-type(3n+2) .media::before,
html[data-holiday="halloween"] .show:nth-of-type(3n) .media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22%;
    aspect-ratio: 1;
    background: url('/assets/img/holiday/web_corner.png') no-repeat 0 0 / 1500% 100%;
    image-rendering: pixelated;
    transform: scale(-1, -1);
    opacity: .7;
    pointer-events: none;
    z-index: 4;
}
html[data-holiday="halloween"] .show:nth-of-type(3n) .media::before { left: auto; right: 0; width: 20%; transform: scale(1, -1); }

/* Spielnamen im Halloween-Look (Owner 2026-10-08: „bei Heroes ist eine Halloween-Schrift, die fehlt bei den anderen“).
   Alle Spielnamen (Schaufenster, Kacheln, Spielseite) tragen Creepster (Font Diner, SIL OFL 1.1, fonts/OFL-creepster.txt).
   Der Schrift-Effekt je Spiel (Schräge, Versatz, Kontur, Schatten) bleibt, der Fest-Akzent kommt als filter dazu, damit
   er die text-shadows der Spiele nicht überschreibt. Heroes ebenfalls (siehe unten), in seinem Gold. */
@font-face { font-family: 'Halloween Display'; src: url('/assets/site/fonts/creepster.woff2') format('woff2'); font-weight: 400; font-display: swap; }
html[data-holiday="halloween"] :is(.show-name, .g-h1, .g-name) .nm {
  font-family: 'Halloween Display', 'Oswald', Impact, sans-serif; font-weight: 400; text-transform: none;
  letter-spacing: .03em; line-height: 1.02;
  filter: drop-shadow(0 0 14px rgba(255, 122, 26, .45)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
html[data-holiday="halloween"] :is(.show-name, .g-h1) .nm { font-size: .92em; }
/* Heroes trägt im Oktober ebenfalls Creepster (Owner 2026-10-08: „Heroes hat keinen Halloween-Titel“), behält aber
   sein Gold mit Prägung, damit es weiter nach Heroes aussieht. Ab November gilt wieder die Fantasy-Antiqua. */
html[data-holiday="halloween"] .m-dungeons :is(.show-name, .g-h1, .g-name) .nm {
  font-family: 'Halloween Display', 'Oswald', Impact, sans-serif; font-weight: 400; font-size: .92em; letter-spacing: .03em; line-height: 1.02;
  -webkit-text-stroke-width: 1.4px;
  filter: drop-shadow(0 0 16px rgba(255, 122, 26, .45));
}
/* Spiele ohne eigene Schriftfarbe: Knochenweiß statt reinem Weiß, passt zur Kürbis-Glut. */
html[data-holiday="halloween"] :is(.m-roleplay, .m-party, .m-turbo, .m-survivors, .m-hide-n-seek) :is(.show-name, .g-h1, .g-name) .nm { color: #fff1dc; }
/* Builders ist nur Kontur: Creepster-Tropfen brauchen etwas mehr Strich, sonst zerfallen sie. */
html[data-holiday="halloween"] .m-builders :is(.show-name, .g-h1) .nm { -webkit-text-stroke-width: 2.4px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-holiday="halloween"] .show:hover .show-name .nm { filter: drop-shadow(0 0 22px rgba(255, 122, 26, .7)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: filter .3s ease; }
}


/* ── Weihnachten auf Spielbildern (Meldung #229): Schneehaube oben auf jedem Bild, Geschenke unten, mal ein Bäumchen.
   Haube = eigene Vektorform (Wellenkante mit Zapfen), Geschenke/Baum = eigene Minecraft-Renders. Klicks gehen durch. ── */
html[data-holiday="christmas"] .media::before,
html[data-holiday="christmas"] .g-tile::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: clamp(20px, 13%, 48px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.7' stop-color='%23f2f7ff'/%3E%3Cstop offset='1' stop-color='%23cfe0f7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 0H400V12C392 13 388 18 380 15S366 11 356 14 344 22 336 17 322 11 310 13 298 25 290 18 276 10 262 14 250 20 240 15 226 9 214 13 204 24 196 17 182 11 170 14 158 19 148 14 134 10 122 13 112 26 104 17 90 11 78 14 66 20 56 15 42 10 30 13 20 23 12 16 4 12 0 12Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 2px rgba(10, 40, 80, .28));
    pointer-events: none;
    z-index: 5;
}
html[data-holiday="christmas"] .media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/img/holiday/xmas_gift_red.webp') right 4% bottom 2% / 17% auto no-repeat;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(255, 214, 120, .25));
    pointer-events: none;
    z-index: 4;
}
html[data-holiday="christmas"] .show:nth-of-type(5n+2) .media::after  {
    background: url('/assets/img/holiday/xmas_gift_green.webp') left 4% bottom 2% / 16% auto no-repeat,
                url('/assets/img/holiday/xmas_gift_blue.webp') left 17% bottom 2% / 10% auto no-repeat;
}
html[data-holiday="christmas"] .show:nth-of-type(5n+3) .media::after  {
    background: url('/assets/img/holiday/xmas_tree.webp') right 3% bottom 2% / 17% auto no-repeat,
                url('/assets/img/holiday/xmas_gift_red.webp') right 19% bottom 2% / 11% auto no-repeat;
}
html[data-holiday="christmas"] .show:nth-of-type(5n+4) .media::after  {
    background: url('/assets/img/holiday/xmas_snowman.webp') left 3% bottom 2% / 13% auto no-repeat,
                url('/assets/img/holiday/xmas_gift_green.webp') left 16% bottom 2% / 10% auto no-repeat;
}
html[data-holiday="christmas"] .show:nth-of-type(5n) .media::after  {
    background: url('/assets/img/holiday/xmas_gift_blue.webp') right 4% bottom 2% / 12% auto no-repeat,
                url('/assets/img/holiday/xmas_gift_red.webp') right 15% bottom 2% / 15% auto no-repeat,
                url('/assets/img/holiday/xmas_gift_green.webp') right 30% bottom 2% / 10% auto no-repeat;
}
/* Kacheln tragen Namen und Knopf unten: dort nur ein Geschenk oben rechts, unter der Haube. Je Kachel ein anderes. */
html[data-holiday="christmas"] .g-tile::before { height: clamp(12px, 7%, 26px); }
html[data-holiday="christmas"] .g-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/img/holiday/xmas_gift_red.webp') right 6% top 22% / 22% auto no-repeat;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5));
    pointer-events: none;
    z-index: 4;
}
html[data-holiday="christmas"] .g-tile:nth-of-type(4n+2)::after { background-image: url('/assets/img/holiday/xmas_gift_green.webp'); }
html[data-holiday="christmas"] .g-tile:nth-of-type(4n+3)::after { background-image: url('/assets/img/holiday/xmas_tree.webp'); background-size: 22% auto; }
html[data-holiday="christmas"] .g-tile:nth-of-type(4n)::after { background-image: url('/assets/img/holiday/xmas_gift_blue.webp'); background-size: 18% auto; }

/* Spielnamen im Weihnachts-Look: Mountains of Christmas (Tart Workshop, Apache 2.0, fonts/LICENSE-mountains-of-christmas.txt)
   für alle Spielnamen, wie Creepster an Halloween. Effekt je Spiel bleibt, dazu warmer Lichterglanz als filter. */
@font-face { font-family: 'Christmas Display'; src: url('/assets/site/fonts/mountains-of-christmas-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
html[data-holiday="christmas"] :is(.show-name, .g-h1, .g-name) .nm {
    font-family: 'Christmas Display', 'Oswald', Impact, sans-serif; font-weight: 700; text-transform: none;
    letter-spacing: .01em; line-height: 1.02;
    filter: drop-shadow(0 0 14px rgba(255, 214, 120, .38)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
html[data-holiday="christmas"] :is(.show-name, .g-h1) .nm { font-size: 1.04em; }
html[data-holiday="christmas"] .m-dungeons :is(.show-name, .g-h1, .g-name) .nm {
    font-family: 'Christmas Display', 'Oswald', Impact, sans-serif; font-weight: 700; font-size: 1em; letter-spacing: .01em; line-height: 1.02;
    filter: drop-shadow(0 0 16px rgba(255, 214, 120, .45));
}
/* Spiele ohne eigene Schriftfarbe: Schneeweiß mit kühlem Schimmer. */
html[data-holiday="christmas"] :is(.m-roleplay, .m-party, .m-turbo, .m-survivors, .m-hide-n-seek) :is(.show-name, .g-h1, .g-name) .nm { color: #fbfdff; }
html[data-holiday="christmas"] .m-builders :is(.show-name, .g-h1) .nm { -webkit-text-stroke-width: 2.4px; }
@media (prefers-reduced-motion: no-preference) {
    html[data-holiday="christmas"] .show:hover .show-name .nm { filter: drop-shadow(0 0 22px rgba(255, 214, 120, .7)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: filter .3s ease; }
}
@media (max-width: 720px) {
    html[data-holiday="christmas"] #holidayDeco { transform: scale(.6); transform-origin: left bottom; }
    html[data-holiday="christmas"]:not(.hd-past-hero) #holidayDeco { transform: scale(.6) translateY(24px); }
}