/* Hero-Effekte (hero-fx.js): Ebene exakt über einem Bildausschnitt der Hero-Grafik. */
.hero-art-wrap[data-fx]{position:relative}
.fx-layer{position:absolute;z-index:3;pointer-events:none}
.fx-shroom{position:absolute;inset:0;transform-origin:50% 88%;transform:scale(var(--fx-scale,1));will-change:transform}
.fx-shroom.is-calm{transition:transform .7s cubic-bezier(.33,0,.25,1),filter .7s ease}
.fx-shroom-img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;user-select:none;-webkit-user-drag:none;
  filter:hue-rotate(var(--fx-hue,0deg)) saturate(calc(1 + var(--fx-glow,0) * .6)) drop-shadow(0 0 calc(var(--fx-glow,0) * 18px) rgba(255,214,90,calc(var(--fx-glow,0) * .9)));
  transition:filter .35s ease}
.fx-layer.is-active .fx-shroom-img{opacity:1}
.fx-shroom-hit{position:absolute;inset:0;pointer-events:auto;margin:0;padding:0;border:0;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent;
  clip-path:polygon(22% 0,78% 0,100% 30%,100% 64%,82% 100%,18% 100%,0 64%,0 30%)}
.fx-layer.is-active .fx-shroom-hit{cursor:pointer}
.fx-shroom-hit:focus{outline:none}
.fx-shroom-hit:focus-visible+.fx-shroom-img,.fx-shroom:has(.fx-shroom-hit:focus-visible) .fx-shroom-img{opacity:1;filter:hue-rotate(var(--fx-hue,0deg)) drop-shadow(0 0 3px #00dce8) drop-shadow(0 0 10px #00dce8aa)}
.fx-count{position:absolute;left:50%;bottom:100%;margin-bottom:var(--fx-lift,0%);transform:translate(-50%,0) scale(.4);opacity:0;pointer-events:none;
  font:900 calc(clamp(14px,2.2vw,24px) * var(--fx-size,1))/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.04em;color:#fff3b0;
  text-shadow:2px 0 #b9640f,-2px 0 #b9640f,0 2px #b9640f,0 -2px #b9640f,3px 3px 0 #000,0 0 14px #ffcf4d;white-space:nowrap}
.fx-count.is-on{animation:fx-count 1.05s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes fx-count{0%{opacity:0;transform:translate(-50%,30%) scale(.4)}22%{opacity:1;transform:translate(-50%,-25%) scale(1.15)}40%{transform:translate(-50%,-30%) scale(1)}78%{opacity:1;transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
.fx-pixel{position:absolute;left:50%;top:45%;width:7px;height:7px;pointer-events:none;box-shadow:0 0 6px currentColor}
/* Easter Egg: kurzer, hochwertiger Status-Hinweis statt Vollbild-Blitz.
   Der Ring des Pilzes leuchtet dezent, ohne die gesamte Seite auszublenden. */
.fx-levelup{position:fixed;inset:0;z-index:9990;pointer-events:none;display:grid;place-items:center;padding:16px;isolation:isolate}
.fx-levelup:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle 180px at var(--fx-x,50%) var(--fx-y,50%),rgba(232,184,74,.16),transparent 100%),rgba(4,8,11,.2);animation:fx-levelup-shade .24s ease-out both}
.fx-levelup.is-out{opacity:0;transition:opacity .18s ease-in}
.fx-levelup-card{position:relative;display:flex;align-items:center;gap:17px;width:min(360px,100%);min-height:106px;padding:18px 21px;background:linear-gradient(130deg,rgba(26,34,37,.98),rgba(11,16,20,.98));border:1px solid rgba(232,184,74,.48);border-left:4px solid #e8b84a;border-radius:10px;box-shadow:0 15px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);animation:fx-levelup-enter .42s cubic-bezier(.18,.9,.24,1.08) both}
.fx-levelup-card:after{content:"";position:absolute;top:0;right:17px;width:72px;height:2px;background:linear-gradient(90deg,transparent,#76d8df 70%,transparent);opacity:.7}
.fx-levelup-icon{flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(232,184,74,.3);border-radius:9px;background:linear-gradient(145deg,rgba(232,184,74,.14),rgba(232,184,74,.03));box-shadow:inset 0 0 20px rgba(232,184,74,.06)}
.fx-bolt{display:block;width:36px;height:49px;fill:#ffe18a;filter:drop-shadow(0 0 7px rgba(232,184,74,.52));animation:fx-bolt-appear .42s .08s ease-out both}
.fx-levelup-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.fx-levelup-kicker{font:800 10px/1.3 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.11em;color:#8bd6d4}
.fx-levelup-card b{display:block;font:900 clamp(27px,5.6vw,35px)/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.025em;color:#fff3cf;text-shadow:0 2px 16px rgba(232,184,74,.14);white-space:nowrap}
@keyframes fx-levelup-shade{from{opacity:0}to{opacity:1}}
@keyframes fx-levelup-enter{0%{opacity:0;transform:translateY(15px) scale(.94)}65%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fx-bolt-appear{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media(max-width:400px){.fx-levelup-card{gap:13px;padding:15px 14px;min-height:92px}.fx-levelup-icon{flex-basis:53px;width:53px;height:53px}.fx-bolt{width:31px;height:42px}.fx-levelup-kicker{font-size:9px;letter-spacing:.07em}.fx-levelup-card b{font-size:27px}}
html.fx-locked{overflow:hidden}
@media(pointer:coarse){.fx-shroom-hit{inset:-8px;clip-path:none;border-radius:50%}}
.fx-video{position:fixed;inset:0;z-index:9995;background:#000;display:grid;place-items:center;opacity:0;transition:opacity .45s ease}
.fx-video[hidden]{display:none}
.fx-video.is-open{opacity:1}
.fx-video-stage{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s ease}
.fx-video-player{width:100%;height:100%;object-fit:contain;background:#000}
.fx-video-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);color:#fff;font:400 30px/1 system-ui,sans-serif;display:grid;place-items:center;cursor:pointer}
.fx-video-close:hover{background:rgba(255,255,255,.15)}
.fx-video-close:focus-visible,.fx-video-sound:focus-visible{outline:2px solid #00dce8;outline-offset:3px}
.fx-video-sound{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;border:1px solid #ffd988;background:linear-gradient(110deg,#ffe2a1,#d9a13d);color:#17120a;font:800 15px/1 Inter,system-ui,sans-serif;padding:12px 20px;border-radius:999px;cursor:pointer}
.fx-video-sound[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .fx-shroom,.fx-shroom.is-calm{transition:none}
  .fx-count.is-on{animation:fx-count-calm 1.2s ease forwards}
  @keyframes fx-count-calm{0%,100%{opacity:0;transform:translate(-50%,-30%)}15%,80%{opacity:1;transform:translate(-50%,-30%)}}
  .fx-levelup:before,.fx-levelup-card,.fx-bolt{animation:none;transition:none;opacity:1;transform:none}
  .fx-levelup.is-out{transition:none}
  .fx-video,.fx-video-stage{transition:none}
}