/* === HALLOWEEN THEME STYLES === */
/* Loaded dynamically when Halloween theme is active */

/* Skrytí lebky a nože v banneru mimo Halloween téma */
.only-halloween {
    display: none !important;
}

body.theme-halloween .only-halloween {
    display: inline !important;
}

body.theme-halloween .main-banner-desc {
    color: #ef4444 !important;
}

body.theme-halloween .binge-blue-title .deco-knife {
    font-size: 0.7em !important;
    vertical-align: -0.08em;
}

/* Skrytí očí a krvavého efektu v banneru mimo Halloween téma */
.binge-blue-title .halloween-eyes {
    display: none;
}

.binge-blue-title .halloween-blood-drip {
    display: none;
}

/* --- Oči nad nápisem BingeBlue pouze pro Halloween téma --- */
body.theme-halloween .binge-blue-title .halloween-eyes {
    display: inline-block;
    position: absolute;
    left: 30%;
    top: -1.6em;
    font-size: 0.6em;
    z-index: 10;
    animation: eyes-blink 7s infinite;
    filter: drop-shadow(0 0 8px #fff8);
    pointer-events: none;
}

@keyframes eyes-blink {
    0%,
    97%,
    100% {
        opacity: 1;
    }

    98%,
    99% {
        opacity: 0.1;
    }
}

/* --- Krvavý efekt pod nápisem BingeBlue pouze pro Halloween téma --- */
body.theme-halloween .binge-blue-title {
    position: relative;
    text-shadow: 0 2px 16px #ff3b3b99, 0 1px 0 #fff, 0 0 2px #3b82f6;
}

body.theme-halloween .binge-blue-title .halloween-blood-drip {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.5em;
    width: 2.8em;
    height: 1.2em;
    pointer-events: none;
    z-index: 2;
    background: none;
}

body.theme-halloween .binge-blue-title .halloween-blood-drip::before {
    content: '';
    display: block;
    width: 100%;
    height: 0.5em;
    background: linear-gradient(180deg, #ff3b3b 60%, #a80000 100%);
    border-radius: 0 0 1em 1em;
    box-shadow: 0 2px 8px #a8000055;
}

body.theme-halloween .binge-blue-title .halloween-blood-drip::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 0.5em;
    width: 0.4em;
    height: 0.8em;
    background: linear-gradient(180deg, #ff3b3b 60%, #a80000 100%);
    border-radius: 0 0 0.3em 0.3em;
    transform: translateX(-50%);
    animation: bloodDripAnim 2.2s infinite linear;
    box-shadow: 0 1px 4px #a8000055;
}

@keyframes bloodDripAnim {
    0% {
        height: 0.2em;
        opacity: 0.7;
    }

    60% {
        height: 0.8em;
        opacity: 1;
    }

    100% {
        height: 0.2em;
        opacity: 0.7;
    }
}

/* Stylizované oko pro vstup chatbota - POUZE PRO HALLOWEEN */
#chat-toggle-btn .bot-eye {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: radial-gradient(ellipse at center, #f7ff6a 60%, #b6ff4a 85%, #222 100%);
    border-radius: 50%;
    box-shadow: 0 0 24px 6px #eaff00cc, 0 0 0 2px #222 inset;
    z-index: 2;
    border: 2px solid #b6ff4a;
}

#chat-toggle-btn .bot-eye-pupil {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 18px;
    background: #222;
    border-radius: 50% 50% 60% 60%/60% 60% 50% 50%;
    box-shadow: 0 0 6px 2px #000a inset;
    z-index: 3;
    animation: bot-pupil-blink 12s infinite;
}

@keyframes bot-pupil-blink {
    0%,
    95%,
    100% {
        height: 18px;
    }

    97% {
        height: 4px;
    }

    98% {
        height: 18px;
    }
}

#chat-toggle-btn .bot-eye-reflection {
    position: absolute;
    left: 60%;
    top: 38%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    z-index: 4;
    filter: blur(0.5px);
}

/* Logika zobrazení pro Halloween téma */
body.theme-halloween #chat-toggle-btn .classic-icon {
    display: none;
}

body.theme-halloween #chat-toggle-btn .bot-eye {
    display: block;
}

/* === HALLOWEEN ANIMACE === */
/* Mlha dole */
.halloween-fog {
    display: none;
}

body.theme-halloween .halloween-fog {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    z-index: 1200;
    pointer-events: none;
    background: linear-gradient(to top, #fff2 60%, transparent 100%);
    animation: fog-move 32s linear infinite alternate;
}

@keyframes fog-move {
    0% {
        filter: blur(8px) opacity(0.7);
    }

    100% {
        filter: blur(16px) opacity(0.9);
    }
}

/* Oči v rohu */
.halloween-eyes {
    display: none;
}

body.theme-halloween .halloween-eyes {
    display: block;
    position: fixed;
    top: 1.2rem;
    right: 1.5rem;
    z-index: 2001;
    font-size: 2.2rem;
    animation: eyes-blink-corner 14s infinite;
    filter: drop-shadow(0 0 8px #fff8);
}

@keyframes eyes-blink-corner {
    0%,
    92%,
    100% {
        opacity: 1;
    }

    95% {
        opacity: 0.1;
    }

    98% {
        opacity: 1;
    }
}

/* Pavučina a pavouk */
.halloween-web {
    display: none;
}

body.theme-halloween .halloween-web {
    display: block;
    position: fixed;
    top: 0.5rem;
    left: 1.2rem;
    z-index: 2001;
    font-size: 2.2rem;
}

.halloween-spider {
    display: none;
}

body.theme-halloween .halloween-spider {
    display: block;
    position: fixed;
    top: 2.2rem;
    left: 2.1rem;
    z-index: 2002;
    font-size: 1.7rem;
    animation: spider-down 12s infinite alternate;
}

@keyframes spider-down {
    0% {
        transform: translateY(-1.2em);
    }

    100% {
        transform: translateY(2.5em);
    }
}

/* Blesk */
.halloween-flash {
    display: none;
}

body.theme-halloween .halloween-flash {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    opacity: 0;
    animation: flash-lightning 24s infinite;
}

@keyframes flash-lightning {
    0%,
    97%,
    100% {
        opacity: 0;
    }

    98% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }
}

/* Padající netopýři */
.halloween-bats {
    display: none;
}

body.theme-halloween .halloween-bats {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0.5rem;
    z-index: 2001;
    width: 100vw;
    pointer-events: none;
}

/* Netopýři poletují a krouží */
.halloween-bat {
    position: absolute;
    font-size: 1.5rem;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.halloween-bat.bat1 {
    animation-name: bat-fly1;
    left: 10vw;
    animation-delay: 0s;
    animation-duration: 32s;
}

.halloween-bat.bat2 {
    animation-name: bat-fly2;
    left: 30vw;
    animation-delay: 2s;
    animation-duration: 32s;
}

.halloween-bat.bat3 {
    animation-name: bat-fly3;
    left: 60vw;
    animation-delay: 4s;
    animation-duration: 32s;
}

.halloween-bat.bat4 {
    animation-name: bat-fly4;
    left: 80vw;
    animation-delay: 1s;
    animation-duration: 32s;
}

@media (max-width: 640px) {
    .halloween-bat.bat1 {
        left: 8vw !important;
    }

    .halloween-bat.bat2 {
        left: 72vw !important;
    }
}

@keyframes bat-fly1 {
    0% {
        top: 0.5rem;
        transform: scaleX(1) rotate(-10deg);
        opacity: 0.7;
    }

    10% {
        top: 8vh;
        left: 12vw;
    }

    20% {
        top: 18vh;
        left: 15vw;
    }

    30% {
        top: 12vh;
        left: 18vw;
    }

    40% {
        top: 22vh;
        left: 14vw;
    }

    50% {
        top: 8vh;
        left: 10vw;
    }

    60% {
        top: 20vh;
        left: 13vw;
    }

    70% {
        top: 14vh;
        left: 17vw;
    }

    80% {
        top: 4vh;
        left: 12vw;
    }

    100% {
        top: 0.5rem;
        left: 10vw;
        transform: scaleX(1) rotate(-10deg);
        opacity: 0.7;
    }
}

@keyframes bat-fly2 {
    0% {
        top: 4vh;
        transform: scaleX(-1) rotate(10deg);
        opacity: 0.7;
    }

    15% {
        top: 14vh;
        left: 32vw;
    }

    30% {
        top: 8vh;
        left: 35vw;
    }

    45% {
        top: 22vh;
        left: 28vw;
    }

    60% {
        top: 10vh;
        left: 33vw;
    }

    75% {
        top: 18vh;
        left: 31vw;
    }

    100% {
        top: 4vh;
        left: 30vw;
        transform: scaleX(-1) rotate(10deg);
        opacity: 0.7;
    }
}

@keyframes bat-fly3 {
    0% {
        top: 8vh;
        transform: scaleX(1) rotate(-8deg);
        opacity: 0.7;
    }

    20% {
        top: 18vh;
        left: 62vw;
    }

    40% {
        top: 10vh;
        left: 65vw;
    }

    60% {
        top: 24vh;
        left: 68vw;
    }

    80% {
        top: 12vh;
        left: 63vw;
    }

    100% {
        top: 8vh;
        left: 60vw;
        transform: scaleX(1) rotate(-8deg);
        opacity: 0.7;
    }
}

@keyframes bat-fly4 {
    0% {
        top: 6vh;
        transform: scaleX(-1) rotate(8deg);
        opacity: 0.7;
    }

    25% {
        top: 16vh;
        left: 82vw;
    }

    50% {
        top: 10vh;
        left: 85vw;
    }

    75% {
        top: 24vh;
        left: 88vw;
    }

    100% {
        top: 6vh;
        left: 80vw;
        transform: scaleX(-1) rotate(8deg);
        opacity: 0.7;
    }
}

/* Duch proplouvající obrazovkou */
.halloween-ghost {
    display: none;
}

body.theme-halloween .halloween-ghost {
    display: block;
    position: fixed;
    left: -4rem;
    bottom: 8rem;
    z-index: 2002;
    font-size: 1.7rem;
    opacity: 0.7;
    animation: ghost-move 36s linear infinite;
}

@keyframes ghost-move {
    0% {
        left: -4rem;
        bottom: 8rem;
        opacity: 0.7;
    }

    10% {
        opacity: 1;
    }

    50% {
        left: 60vw;
        bottom: 12rem;
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 104vw;
        bottom: 7rem;
        opacity: 0.7;
    }
}

/* Kapky krve po stranách hlavního panelu */
.halloween-blood-side {
    display: none;
}

body.theme-halloween .halloween-blood-side {
    display: block;
    font-size: 1.2em !important;
    filter: drop-shadow(0 2px 2px #a80000cc);
}

.blood-drip-left,
.blood-drip-right {
    position: absolute;
    top: 0;
    font-size: 1.3em;
    z-index: 1001;
    animation: blood-side-drip 14s infinite linear;
}

.blood-drip-left {
    left: -0.7em;
    top: 0.05em;
}

.blood-drip-right {
    right: -0.7em;
}

@keyframes blood-side-drip {
    0% {
        opacity: 0;
        transform: translateY(-1em) scaleY(0.7);
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1;
        transform: translateY(1.5em) scaleY(1.1);
    }

    90% {
        opacity: 1;
        transform: translateY(2.5em) scaleY(1.2);
    }

    100% {
        opacity: 0;
        transform: translateY(-1em) scaleY(0.7);
    }
}

/* Strašidelný měsíc v zatmění */
.halloween-moon {
    display: none;
}

body.theme-halloween .halloween-moon {
    display: block;
    position: fixed;
    top: 0.7rem;
    left: 4vw;
    z-index: 1999;
    font-size: 4.2rem;
    filter: drop-shadow(0 0 16px #fff6) drop-shadow(0 0 8px #fffa);
    pointer-events: none;
    user-select: none;
    animation: moon-glow 14s infinite alternate ease-in-out;
}

@keyframes moon-glow {
    0% {
        filter: drop-shadow(0 0 32px #fff6) drop-shadow(0 0 12px #fffa);
    }

    100% {
        filter: drop-shadow(0 0 64px #fff9) drop-shadow(0 0 24px #fff7);
    }
}

/* Halloween dekorace kolem nadpisu */
.halloween-deco {
    display: none;
}

body.theme-halloween .halloween-deco {
    display: block;
}

/* Menší dekorace a pomalejší animace */
.deco-skull {
    position: absolute;
    left: -2.2em;
    top: 0.1em;
    font-size: 1.2em;
    animation: swing 7s infinite ease-in-out;
    transform-origin: 60% 0%;
}

.deco-knife {
    position: absolute;
    right: -1.5em;
    top: 0.2em;
    font-size: 1.2em;
    animation: knife-fall 8s infinite cubic-bezier(.7, 0, .3, 1);
}

.deco-blood {
    position: absolute;
    left: 50%;
    bottom: -1.2em;
    font-size: 1em;
    transform: translateX(-50%);
    animation: blood-drip 6s infinite linear;
}

.deco-hanged {
    position: absolute;
    right: -3em;
    bottom: -1.2em;
    font-size: 1.2em;
    animation: hanged-swing 10s infinite ease-in-out;
    transform-origin: 50% 0%;
}

@keyframes swing {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes knife-fall {
    0% {
        transform: translateY(-1em) rotate(-30deg);
        opacity: 0.7;
    }

    60% {
        transform: translateY(0.2em) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-1em) rotate(-30deg);
        opacity: 0.7;
    }
}

@keyframes blood-drip {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.5em) scaleY(0.7);
    }

    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scaleY(1);
    }

    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0.5em) scaleY(1.2);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.5em) scaleY(0.7);
    }
}

@keyframes hanged-swing {
    0% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(8deg);
    }

    100% {
        transform: rotate(-8deg);
    }
}

/* === Halloween téma === */
body.theme-halloween {
    background: linear-gradient(160deg, #1a1a1a 0%, #ff7518 100%) !important;
    color: #fffbe7;
}

body.theme-halloween .card {
    background-color: rgba(40, 16, 0, 0.85);
    box-shadow: 0 0 40px 0 #ff7518, 0 0 0 0 #000;
}

body.theme-halloween h1 {
    color: #ff7518 !important;
    font-family: 'Mouse Memoirs', 'Inter', sans-serif !important;
    text-shadow: none;
    animation: none;
}

body.theme-halloween .amp {
    color: #fffbe7 !important;
}

@keyframes shake {
    0% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(1deg);
    }
}

body.theme-halloween .btn {
    background-color: #ff7518 !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px -5px #ff7518;
}

body.theme-halloween .btn:hover:not(:disabled) {
    background-color: #ffae42 !important;
}

body.theme-halloween .switcher-track button.active {
    background-color: #ff7518 !important;
    color: #1a1a1a !important;
}