@font-face {font-family: "Nosifer"; src: url(fonts/nosifer.woff2) format("woff2"); font-display: swap;}
@font-face {font-family: "Creepster"; src: url(fonts/creepster.woff2) format("woff2"); font-display: swap;}

* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {height: 100%; overflow: hidden; background: #050000;}
body.idle, body.idle * {cursor: none !important;}

canvas {position: fixed; inset: 0; display: block;}

/*dunkle Ränder, die unregelmäßig flackern wie eine sterbende Glühbirne*/
.vignette {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 70%, #000 100%);
    animation: flicker 7s infinite;
}
@keyframes flicker {
    0%, 100% {opacity: 1;}
    41% {opacity: 1;} 42% {opacity: .6;} 43% {opacity: 1;}
    44% {opacity: .75;} 45% {opacity: 1;}
    78% {opacity: 1;} 79% {opacity: .5;} 81% {opacity: 1;}
}

/*blutroter Nebel am Boden*/
.fog {
    position: fixed; left: -50%; bottom: -12%; width: 200%; height: 45%; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(130,0,0,.28), transparent 60%),
        radial-gradient(ellipse at 55% 95%, rgba(70,70,80,.16), transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(110,0,0,.22), transparent 60%);
    filter: blur(30px);
    animation: drift 45s ease-in-out infinite alternate;
}
.fog2 {bottom: -22%; opacity: .75; animation-duration: 70s; animation-direction: alternate-reverse;}
@keyframes drift {from {transform: translateX(-12%);} to {transform: translateX(12%);}}

#flash {position: fixed; inset: 0; background: #e8e6ff; opacity: 0; pointer-events: none;}

body.shake canvas {animation: shake .45s;}
@keyframes shake {
    0%, 100% {transform: none;}
    20% {transform: translate(-6px, 3px);}
    40% {transform: translate(5px, -4px);}
    60% {transform: translate(-3px, 2px);}
    80% {transform: translate(2px, -1px);}
}

#msg {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 6vw; text-align: center; pointer-events: none; opacity: 0;
    font-family: "Nosifer", "Creepster", serif; font-size: clamp(26px, 6vw, 92px); line-height: 1.3;
    color: #a80000;
    text-shadow: 0 0 10px #f00, 0 0 36px #700, 0 5px 0 #2a0000;
}
#msg.alt {font-family: "Creepster", serif; font-size: clamp(34px, 8vw, 120px); letter-spacing: .04em; color: #ff6a00; text-shadow: 0 0 14px #ff3b00, 0 0 40px #8a1a00;}
#msg.show {animation: scare 5s ease-in-out forwards;}
@keyframes scare {
    0% {opacity: 0; transform: scale(1.2); filter: blur(10px);}
    14% {opacity: 1; transform: scale(1); filter: blur(0);}
    18% {transform: translate(-4px, 2px) skewX(-3deg);}
    20% {transform: translate(4px, -2px) skewX(3deg);}
    22% {transform: none; opacity: .4;}
    24% {opacity: 1;}
    72% {opacity: .9; transform: scale(1.02);}
    100% {opacity: 0; transform: scale(.94); filter: blur(5px);}
}

#hint {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font: 13px/1 monospace; color: #b00000; opacity: .8; transition: opacity 2s; pointer-events: none;
}
#hint.gone {opacity: 0;}

.pumpkin {position: fixed; bottom: 16px; display: block; line-height: 0; transition: transform .3s, opacity .3s;}
.pumpkin svg {display: block; filter: drop-shadow(0 0 6px rgba(255,120,0,.55));}
.pumpkin .face {animation: candle 2.2s infinite;}
.pumpkin:hover {transform: scale(1.2) rotate(-6deg);}
@keyframes candle {
    0%, 100% {fill: #ffd23f;} 30% {fill: #ffb21a;} 33% {fill: #ffe36b;} 60% {fill: #ffc22e;} 62% {fill: #ff9d0a;}
}
#back {left: 16px; opacity: .45;}
#back:hover {opacity: 1;}

@media (prefers-reduced-motion: reduce) {
    .vignette, .fog, body.shake canvas {animation: none;}
}