/*
 * 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; }

#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'); }
html[data-holiday="christmas"] #holidayDeco .hd-a { width: 46px; height: 48px; background-image: url('/assets/img/holiday/christmas_gift2.png'); }
html[data-holiday="christmas"] #holidayDeco .hd-b { width: 56px; height: 86px; background-image: url('/assets/img/holiday/christmas_snowman.png'); }
html[data-holiday="christmas"] #holidayDeco .hd-c { width: 46px; height: 48px; background-image: url('/assets/img/holiday/christmas_gift.png'); }

@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; }
}