/* ===== Saison-Looks: Halloween (15.10.–2.11.) =====
   body.hw = Variante A „Flackerlicht“, body.hw.hw-b = Variante B „Geisterhaus“. Ein- und ausgeschaltet wird in season.js. */
body.hw { --gold: #ff8a1f; --gold2: #ffb347; --amber: #ff7a1a; --vi: #b49cff; }
body.hw .wm-light::before { background: linear-gradient(200deg, rgba(255,138,31,.12), rgba(255,138,31,.035) 45%, transparent 75%); animation: hwFlicker 7s steps(1) infinite; }
body.hw .amb-beam { --bc: 255,128,30 !important; animation: hwFlicker 8s steps(1) infinite !important; }
@keyframes hwFlicker { 0%,100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .25; } 43% { opacity: .9; } 44% { opacity: .15; } 46% { opacity: 1; } 77% { opacity: 1; } 78% { opacity: .4; } 79% { opacity: 1; } }
/* Nebel unten */
.hw-fog { position: fixed; left: var(--rail, 0px); right: 0; bottom: 0; height: 190px; pointer-events: none; z-index: 2; overflow: hidden; }
.hw-fog i { position: absolute; bottom: -60px; width: 900px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(210,200,235,.16), rgba(210,200,235,.06) 60%, transparent); filter: blur(6px); animation: hwFog 38s linear infinite; }
.hw-fog i:nth-child(1) { left: -10%; } .hw-fog i:nth-child(2) { left: 35%; animation-duration: 52s; animation-direction: reverse; bottom: -90px; }
.hw-fog i:nth-child(3) { left: 70%; animation-duration: 44s; bottom: -40px; opacity: .8; }
@keyframes hwFog { from { transform: translateX(-120px); } 50% { transform: translateX(140px); } to { transform: translateX(-120px); } }
/* Fledermäuse im Lichtkegel */
.hw-bats { position: absolute; top: 0; right: 0; width: min(760px, 70%); height: 460px; pointer-events: none; z-index: -1; overflow: hidden; }
.hw-bats svg { position: absolute; width: 64px; fill: #2b1406; opacity: .0; animation: hwBat 16s ease-in-out infinite; }
.hw-bats svg:nth-child(1) { left: 66%; top: 26%; animation-delay: 1s; }
.hw-bats svg:nth-child(2) { left: 52%; top: 46%; width: 44px; animation-delay: 6s; animation-duration: 19s; }
.hw-bats svg:nth-child(3) { left: 74%; top: 12%; width: 34px; animation-delay: 10s; animation-duration: 22s; }
@keyframes hwBat { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 8% { opacity: .85; } 30% { transform: translate(-90px,40px) scale(1) rotate(-6deg); } 55% { transform: translate(-200px,-10px) scale(.9) rotate(4deg); opacity: .8; } 70%,100% { opacity: 0; transform: translate(-300px,30px) scale(.5); } }
.hw-bats svg { filter: drop-shadow(0 0 1px rgba(255,170,80,1)) drop-shadow(0 0 14px rgba(255,138,31,.55)); }
/* Kleines Kürbis-Abzeichen am Logo */
body.hw .brand-r, body.hw .logo span { color: #ff7a1a; }

/* ===== Variante B: „Geisterhaus“ – zusätzlich Spinnweben, Blutrot, Kürbis-Glow ===== */
body.hw.hw-b { --red: #ff3b3b; }
body.hw.hw-b h1, body.hw.hw-b .dh-t, body.hw.hw-b .page-title { text-shadow: 0 0 18px rgba(255,90,20,.35); }
body.hw.hw-b .hw-fog i { background: radial-gradient(closest-side, rgba(180,255,190,.10), rgba(180,255,190,.04) 60%, transparent); }
body.hw.hw-b .wm-light::before { background: linear-gradient(200deg, rgba(255,110,20,.22), rgba(170,40,20,.07) 50%, transparent 78%); }

/* ===== Dashboard-Kachel „Grusel-Saison“ ===== */
.hw-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: center; margin: 22px 0 26px; padding: 22px 26px; border-radius: 20px;
  border: 1px solid rgba(255,122,26,.35); background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.16), transparent 60%), linear-gradient(180deg, #15110f, #0e0d10); }
.hw-card .hw-pk { width: 110px; height: 110px; filter: drop-shadow(0 0 22px rgba(255,122,26,.45)); animation: hwPulse 3.2s ease-in-out infinite; }
@keyframes hwPulse { 50% { filter: drop-shadow(0 0 34px rgba(255,122,26,.7)); } }
.hw-k { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #ff9a3c; text-transform: uppercase; }
.hw-h { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #f6ead6; margin: 4px 0 6px; line-height: 1.1; }
.hw-p { color: #b7aca0; font-size: 14px; margin: 0; max-width: 560px; }
.hw-stats { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.hw-stat { font-size: 13px; color: #cfc4b6; } .hw-stat b { color: #ff9a3c; font-size: 16px; }
.hw-bar { width: 160px; height: 6px; border-radius: 6px; background: #2a2320; margin-top: 6px; overflow: hidden; } .hw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a1a, #ffb347); border-radius: 6px; }
.hw-acts { display: flex; flex-direction: column; gap: 10px; }
.hw-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 1px solid rgba(255,122,26,.5); color: #ffd2a8; background: rgba(255,122,26,.08); white-space: nowrap; }
.hw-btn.main { background: linear-gradient(135deg, #ff8a1f, #e2560c); color: #1a0d04; border: 0; }
body.hw-b .hw-card { border-color: rgba(255,59,59,.45); background: radial-gradient(90% 140% at 0% 0%, rgba(255,59,59,.16), transparent 60%), linear-gradient(180deg, #170d0f, #0e0c10); }
body.hw-b .hw-h { font-family: var(--serif); letter-spacing: .5px; text-shadow: 0 2px 0 #5a0d0d, 0 0 22px rgba(255,59,59,.35); }

body.hw .spot-beam path, body.hw .nw-beam path { fill: #ff8a1f; }
body.hw .spot-k, body.hw .spot-go { color: #ff9a3c; }

.hw-card > * { position: relative; z-index: 1; }

.hw-btn { text-decoration: none; cursor: pointer; } .hw-btn:hover { filter: brightness(1.1); }
@media (max-width: 960px) { .hw-fog { left: 0; height: 120px; } .hw-card { grid-template-columns: 1fr; text-align: left; } .hw-card .hw-pk { width: 70px; height: 70px; } .hw-acts { flex-direction: row; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { body.hw .wm-light::before, body.hw .amb-beam, .hw-fog i, .hw-bats svg, .hw-card .hw-pk { animation: none !important; } .hw-bats { display: none; } }
/* Einstellungen: Saison-Look */
.season-seg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.season-seg button { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.season-seg button.on { border-color: #ff8a1f; background: rgba(255,138,31,.12); color: #ffc58a; }
body.hw .amb-beam { opacity: .75; }

/* ===== Spiele: Halloween-Quiz-Kachel ===== */
a.hw-feat { color: inherit; text-decoration: none; margin: 4px 0 26px; }
a.hw-feat:hover { border-color: rgba(255,122,26,.7); }
.gq-horror .sc-frame { box-shadow: 0 0 0 1px rgba(255,59,59,.35), 0 0 60px rgba(255,59,59,.12); }
.gq-horror .sc-img { filter: saturate(.85) contrast(1.05); }

/* ===== Entdecken: Geisterbahn ===== */
.e-tabs button.hw-tab.on { background: linear-gradient(135deg, #ff8a1f, #c23b12); color: #1a0d04; }
.hw-note { color: #ffb070; }
.single.hw-single { border-color: rgba(255,59,59,.4); background: radial-gradient(80% 60% at 20% 0%, rgba(255,59,59,.10), transparent 60%), linear-gradient(180deg, #120c0f, #0b0a0d); box-shadow: 0 0 80px rgba(255,59,59,.08) inset; }
.single.hw-single .single-title { text-shadow: 0 2px 0 #5a0d0d, 0 0 22px rgba(255,59,59,.35); }
.s2-poster { position: relative; }
.s2-poster.hw-cover { animation: hwShake .45s ease-in-out .35s 1; }
.s2-poster.hw-cover::before { content: ""; position: absolute; inset: 0; background: #000; z-index: 2; border-radius: inherit; animation: hwReveal .9s ease-out forwards; }
.hw-boo { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; animation: hwBoo 1.25s cubic-bezier(.2,1.4,.4,1) forwards; }
.hw-boo svg { width: 62%; filter: drop-shadow(0 0 30px rgba(255,255,255,.5)); }
.hw-boo b { position: absolute; bottom: 14%; font-family: var(--serif); font-size: 38px; color: #fff; text-shadow: 0 3px 0 #5a0d0d, 0 0 20px rgba(255,59,59,.8); }
@keyframes hwBoo { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.12); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hwReveal { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hwShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ===== Watchlist / Re-Watch: Dein Gruselstapel ===== */
.hw-stack { position: relative; margin: 6px 0 30px; padding: 22px 22px 18px; border-radius: 22px; border: 1px solid rgba(255,59,59,.42);
  background: radial-gradient(70% 120% at 0% 0%, rgba(255,59,59,.14), transparent 60%), linear-gradient(180deg, #160d10, #0d0b0f); overflow: hidden; }
.hw-stack::after { content: ""; position: absolute; top: 0; right: 0; width: 140px; height: 140px; pointer-events: none; opacity: .5;
  background: var(--hw-web) no-repeat 100% 0 / contain; }
.hw-sh { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; position: relative; z-index: 1; }
.hw-sk { font-size: 40px; filter: drop-shadow(0 0 16px rgba(255,138,31,.7)); animation: hwPulse 3.2s ease-in-out infinite; }
.hw-st { font-family: var(--serif); font-size: 28px; margin: 2px 0 4px; color: #f6ead6; text-shadow: 0 2px 0 #5a0d0d, 0 0 22px rgba(255,59,59,.35); }
.hw-stack .grid { position: relative; z-index: 1; }

/* ===== Der XP-Geist ===== */
.hw-ghost { position: fixed; left: 0; top: 0; z-index: 9000; width: 84px; height: 98px; padding: 0; border: 0; background: none; cursor: crosshair; will-change: transform;
  filter: drop-shadow(0 0 16px rgba(220,210,255,.55)); animation: hwBob 1.1s ease-in-out infinite alternate; }
.hw-ghost svg { width: 100%; height: 100%; }
.hw-gl { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #ffd2a8; opacity: .85; }
.hw-ghost.munch svg { animation: hwMunch .18s linear infinite alternate; }
.hw-ghost.away .hw-gl { opacity: 0; }
.hw-ghost.caught { animation: hwCaught .6s ease-out forwards; pointer-events: none; }
.hw-ghost.gone { opacity: 0; transition: opacity .5s; pointer-events: none; }
@keyframes hwBob { from { margin-top: -4px; } to { margin-top: 4px; } }
@keyframes hwMunch { from { transform: scaleY(1); } to { transform: scaleY(.9) scaleX(1.06); } }
@keyframes hwCaught { 0% { opacity: 1; filter: drop-shadow(0 0 16px #fff); } 100% { opacity: 0; margin-top: -40px; filter: drop-shadow(0 0 40px #ffb347) blur(2px); } }
#prof-chip .prof-xp.hw-nibble, #prof-chip.hw-nibble { animation: hwShake .3s ease-in-out infinite; box-shadow: 0 0 12px rgba(255,59,59,.6); }
.hw-xpop { position: fixed; z-index: 9001; transform: translate(-50%, 0); font-weight: 800; font-size: 22px; pointer-events: none; animation: hwPop 1.8s ease-out forwards; }
.hw-xpop.plus { color: #7dffa8; text-shadow: 0 0 14px rgba(60,255,140,.6); } .hw-xpop.minus { color: #ff6b6b; text-shadow: 0 0 14px rgba(255,59,59,.6); }
@keyframes hwPop { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -60px; } }
@media (prefers-reduced-motion: reduce) { .hw-ghost { animation: none; } .hw-boo { display: none; } }
/* Halloween-Quiz: gleiche Aufteilung wie das Szenenbild-Quiz (Bild links, Eingabe rechts) */
.gq-horror { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
@media (max-width: 1000px) { .gq-horror { grid-template-columns: 1fr; } }
/* Kürbis-Suche */
.hw-pumpkin { position: absolute; z-index: 3; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s; filter: drop-shadow(0 0 6px rgba(255,122,26,.35)); }
.hw-pumpkin:hover { opacity: 1; transform: scale(1.25) rotate(-8deg); }
.hw-pumpkin svg { width: 100%; height: 100%; }
.hw-pumpkin.got { animation: hwPkGot .6s ease-out forwards; }
@keyframes hwPkGot { 0% { opacity: 1; transform: scale(1); } 40% { transform: scale(1.8) rotate(12deg); opacity: 1; } 100% { transform: scale(.2) translateY(-40px); opacity: 0; } }
.hw-feat .hw-acts { flex-wrap: wrap; }

/* ===== Spinnennetz (Variante B): echtes Netz oben rechts in der Seitenleiste, mit krabbelnder Spinne ===== */
body.hw.hw-b .hw-card::after { content: ""; position: absolute; top: 0; right: 0; width: 130px; height: 130px; pointer-events: none; opacity: .45; z-index: 0;
  background: var(--hw-web) no-repeat 100% 0 / contain; }
.hw-web { position: absolute; top: 0; right: 0; width: 150px; height: 150px; pointer-events: none; z-index: 0; }
.hw-web > svg { width: 100%; height: 100%; display: block; }
.hw-crawler { position: absolute; left: 0; top: 0; width: 16px; height: 16px; offset-rotate: auto 90deg; animation: hwCrawl 26s ease-in-out infinite; }
.hw-crawler svg { width: 100%; height: 100%; display: block; }
.hw-crawler .lg, .hw-spider .lg { animation: hwLegs .22s linear infinite alternate; transform-origin: 50% 50%; }
@keyframes hwCrawl { 0%, 18% { offset-distance: 0%; } 38%, 55% { offset-distance: 60%; } 72%, 80% { offset-distance: 100%; } 100% { offset-distance: 0%; } }
@keyframes hwLegs { from { transform: scaleX(1); } to { transform: scaleX(.86); } }
/* Spinne, die sich abseilt und XP klaut */
.hw-spider { position: fixed; z-index: 9000; left: 0; top: 0; width: 46px; height: 46px; padding: 0; border: 0; background: none; cursor: crosshair; will-change: transform; filter: drop-shadow(0 0 8px rgba(255,140,60,.55)); }
.hw-spider svg { width: 100%; height: 100%; display: block; }
.hw-spider.caught { animation: hwCaught .6s ease-out forwards; pointer-events: none; }
.hw-spider.gone { opacity: 0; transition: opacity .4s; pointer-events: none; }
.hw-thread { position: fixed; z-index: 8999; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.7)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hw-crawler { animation: none; } }