/* Das Kleid "Halloween" fuer die Startseite einer Kampagne
 * (cluenary-server lib/kampagnen-seite.js bindet es ein, wenn die Kampagne
 * den Rahmen traegt). Dieselbe Seance wie im Spiel - der erste Klick soll
 * schon in dieselbe Welt fuehren, nicht von einer schwarzen Seite in ein
 * Pergament springen. Bilder und Schrift relativ zu dieser Datei.
 */
@font-face { font-family: "Kleid Fraunces"; src: url("fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Kleid Fraunces"; src: url("fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

html[data-kleid="halloween"] {
  --grund: #120a15; --text: #f1e4c8; --matt: #bfa98c; --flaeche: #22172a;
  --akzent: #e8782a; --akzent-text: #1a0d06; --akzent-hover: #f39a4c;
  --haupt: #1a0f1e; --haupt-text: #f1e4c8; --linie: rgba(199,131,74,.55);
  background: #0c0710;
}
html[data-kleid="halloween"] body {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(120,60,140,.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(232,120,42,.16), transparent 70%),
    url("damast.svg"),
    linear-gradient(180deg, #1c1020, #0c0710);
  background-size: auto, auto, 160px 160px, auto;
  background-attachment: fixed;
}
html[data-kleid="halloween"] .band { background: transparent; border-bottom: 1px solid rgba(199,131,74,.3); }
html[data-kleid="halloween"] .spalte { position: relative; }
/* Die Buehne als Bild im eisernen Rahmen, mit Spinnweben in der Ecke. */
html[data-kleid="halloween"] .buehne {
  border: 8px solid #150d17; outline: 1px solid rgba(232,120,42,.8); outline-offset: -5px;
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(232,120,42,.25), 0 18px 40px rgba(0,0,0,.7);
}
html[data-kleid="halloween"] .buehne::before {
  content: ""; position: absolute; left: -2px; top: -2px; width: 130px; height: 145px; z-index: 3; pointer-events: none;
  background: url("spinnennetz.svg") no-repeat 0 0 / contain; opacity: .9;
}
html[data-kleid="halloween"] .buehne::after { background: linear-gradient(to bottom, transparent 55%, rgba(18,10,21,.85) 100%); }
html[data-kleid="halloween"] .marke { background: #e8782a; color: #1a0d06; font-family: "Kleid Fraunces", Georgia, serif; letter-spacing: .04em; }
html[data-kleid="halloween"] main { position: relative; }
html[data-kleid="halloween"] h1 {
  font: 500 34px/1.1 "Kleid Fraunces", Georgia, serif; letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(232,120,42,.3);
}
html[data-kleid="halloween"] p { font: italic 300 18px/1.45 "Kleid Fraunces", Georgia, serif; }
html[data-kleid="halloween"] .knopf {
  font-family: "Kleid Fraunces", Georgia, serif; font-weight: 600; letter-spacing: .04em;
  background: linear-gradient(180deg, #f39a4c, #e8782a 55%, #c75f18);
  box-shadow: 0 8px 24px rgba(232,120,42,.35), inset 0 1px 0 rgba(255,230,190,.5);
}
html[data-kleid="halloween"] .knopf:hover { background: linear-gradient(180deg, #ffb066, #f08a3c 55%, #d06a20); }
html[data-kleid="halloween"] .fuss { border-top-color: rgba(199,131,74,.25); }
/* Zwei Kerzen links und rechts des Titels - nur, wo Platz ist. */
@media (min-width: 560px) {
  html[data-kleid="halloween"] .spalte::before, html[data-kleid="halloween"] .spalte::after {
    content: ""; position: absolute; bottom: 30px; width: 110px; height: 230px; pointer-events: none;
    background: url("kandelaber.svg") no-repeat 50% 100% / contain; opacity: .95;
  }
  html[data-kleid="halloween"] .spalte::before { left: -130px; }
  html[data-kleid="halloween"] .spalte::after { right: -130px; }
}
/* Das Bild der Buehne ist die Karte bei Tag (das Spiel legt die Atmosphaere
   erst beim Zeichnen darueber) - hier also selbst in die Daemmerung tauchen. */
html[data-kleid="halloween"] .buehne .karte { filter: saturate(.72) brightness(.72) contrast(1.08) hue-rotate(-8deg); }
html[data-kleid="halloween"] .buehne .leute { filter: brightness(.92); }