/* Halloween theme (js/themes/halloween.js): cobwebs, spiders, pumpkins in the cards, bats, fog, the witch. */
.hw-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}

/* Bats and the witch: behind the site's content (above the page background). */
.hw-back {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- fog ---------- */
.hw-fog {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -40px;
    height: 200px;
    background:
        radial-gradient(ellipse 40% 60% at 20% 70%, rgba(190, 200, 225, 0.22), transparent 70%),
        radial-gradient(ellipse 35% 55% at 55% 80%, rgba(170, 185, 215, 0.18), transparent 70%),
        radial-gradient(ellipse 45% 60% at 85% 75%, rgba(190, 200, 225, 0.2), transparent 70%);
    filter: blur(6px);
    animation: hw-fog 26s ease-in-out infinite alternate;
}

@keyframes hw-fog {
    from { transform: translateX(-4%); }
    to { transform: translateX(4%); }
}

/* ---------- cobwebs ---------- */
.hw-web {
    position: absolute;
    width: 140px;
    opacity: 0.8;
}

.hw-web svg,
.hw-card-web svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.hw-web--tl { top: 0; left: 0; }
.hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hw-web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

.hw-web-hit {
    pointer-events: none;
}

.hw-card-web {
    position: absolute;
    z-index: 1;
    width: 70px;
    opacity: 0.6;
    pointer-events: none;
}

.hw-card-web--tl { top: 0; left: 0; }
.hw-card-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-card-web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hw-card-web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Hand-drawn speech bubbles: "Click me" over the pumpkin (to the right of it on wide screens, its tail down-left
   to the pumpkin; to the left on phones) and the witch's laugh following her. */
.hw-pumpkin-hint,
.hw-witch-bubble {
    position: absolute;
    width: 132px;
    height: 80px;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.hw-pumpkin-hint {
    bottom: calc(100% - 4px);
    left: 38%;
    animation: hw-hint 2.4s ease-in-out infinite;
}

.hw-witch-bubble {
    top: 0;
    left: 0;
    display: none;
    will-change: transform;
}

.hw-pumpkin-hint svg,
.hw-witch-bubble svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hw-pumpkin-hint span,
.hw-witch-bubble span {
    position: absolute;
    inset: 8px 10px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font: 800 0.86rem/1.1 'Comic Sans MS', 'Segoe Print', 'Inter', sans-serif;
    text-align: center;
}

.hw-pumpkin.is-playing .hw-pumpkin-hint {
    display: none;
}

/* Phones (the pumpkin in the corner), or no room on the right: the bubble to the left, its tail down-right. */
.hw-pumpkin.is-corner .hw-pumpkin-hint,
.hw-pumpkin.hint-left .hw-pumpkin-hint {
    left: auto;
    right: 38%;
}

.hw-pumpkin.is-corner .hw-pumpkin-hint svg,
.hw-pumpkin.hint-left .hw-pumpkin-hint svg {
    transform: scaleX(-1);
}

@keyframes hw-hint {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: 5px; }
}

/* Little spiders running over a web (Web Animations move them; start at the web's corner). */
.hw-crawler {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 14px;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(255, 120, 60, 0.6));
}

.hw-crawler svg {
    display: block;
    width: 100%;
    animation: hw-legs 0.12s steps(2) infinite;
}

@keyframes hw-legs {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.86); }
}

/* The spider hanging from the top right web: the thread is fixed at the web and grows or shrinks,
   the spider hangs at its end and sways from the top. */
.hw-spider {
    position: absolute;
    top: 0;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% 0;
    animation: hw-sway 6s ease-in-out infinite;
}

.hw-spider svg {
    display: block;
    width: 100%;
    margin-top: -3px;
    filter: drop-shadow(0 0 3px rgba(255, 120, 60, 0.5));
}

.hw-spider__thread {
    display: block;
    width: 1px;
    height: 110px;
    background: linear-gradient(to bottom, rgba(226, 232, 245, 0.25), rgba(226, 232, 245, 0.7));
    animation: hw-thread 5s ease-in-out infinite;
}

@keyframes hw-sway {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}

@keyframes hw-thread {
    0%, 100% { height: 110px; }
    50% { height: 124px; }
}

.hw-spider.is-drop .hw-spider__thread {
    animation: hw-thread-drop 2.8s ease-in-out;
}

@keyframes hw-thread-drop {
    0% { height: 110px; }
    35% { height: 270px; }
    45% { height: 252px; }
    55% { height: 262px; }
    100% { height: 110px; }
}

/* ---------- pumpkins ---------- */
.hw-pumpkin {
    position: absolute;
    z-index: 2;
    width: 74px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 6px 12px rgba(255, 110, 20, 0.35));
    transition: transform 0.2s ease;
}

/* The pumpkin right of the header (fixed, placed by the script) or in the bottom right corner on narrow screens. */
.hw-pumpkin--jack {
    position: fixed;
    width: 76px;
}

.hw-pumpkin.is-corner {
    right: 12px;
    bottom: 12px;
    width: 58px;
}

.hw-notes {
    position: absolute;
    top: -6px;
    right: -4px;
    color: #ffd54f;
    font: 700 1rem sans-serif;
    text-shadow: 0 0 6px #ff8f00;
    opacity: 0;
    pointer-events: none;
}

.hw-pumpkin.is-playing .hw-notes {
    animation: hw-notes 1.6s ease-in-out infinite;
}

.hw-pumpkin.is-playing svg {
    animation: hw-bob 0.8s ease-in-out infinite alternate;
}

@keyframes hw-notes {
    0% { opacity: 0; transform: translate(0, 4px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(10px, -22px); }
}

@keyframes hw-bob {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg) translateY(-2px); }
}

.hw-pumpkin--card.hw-pumpkin--squat { width: 84px; }
.hw-pumpkin--card.hw-pumpkin--tall { width: 64px; }
.hw-pumpkin--card.hw-pumpkin--ghost { width: 62px; filter: drop-shadow(0 6px 12px rgba(220, 230, 255, 0.25)); }

.hw-pumpkin--left { left: 12px; bottom: 10px; }
.hw-pumpkin--right { right: 12px; bottom: 10px; }

.hw-pumpkin:hover { transform: translateY(-3px) scale(1.05); }

.hw-pumpkin svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.hw-flame {
    animation: hw-flicker 2.6s infinite;
}

@keyframes hw-flicker {
    0%, 100% { opacity: 1; }
    20% { opacity: 0.82; }
    23% { opacity: 1; }
    48% { opacity: 0.9; }
    51% { opacity: 0.7; }
    54% { opacity: 1; }
    78% { opacity: 0.88; }
}

.hw-pumpkin.is-boo {
    animation: hw-boo 0.5s ease;
}

@keyframes hw-boo {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.22) rotate(-6deg); }
    60% { transform: scale(0.95) rotate(4deg); }
}

/* ---------- bats ---------- */
.hw-bat {
    position: absolute;
    top: 0;
    left: 0;
    color: #1c0f2b;
    filter: drop-shadow(0 0 3px var(--glow, rgba(255, 150, 40, 0.75))) drop-shadow(0 0 12px rgba(0, 0, 0, 0.35));
    will-change: transform;
}

.hw-bat svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hw-wing {
    transform-box: view-box;
    animation: var(--flap, 0.2s) ease-in-out infinite alternate;
}

.hw-wing--l {
    transform-origin: 54px 26px;
    animation-name: hw-wing-l;
}

.hw-wing--r {
    transform-origin: 66px 26px;
    animation-name: hw-wing-r;
}

@keyframes hw-wing-l {
    from { transform: rotate(-24deg) scaleY(1); }
    to { transform: rotate(26deg) scaleY(0.75); }
}

@keyframes hw-wing-r {
    from { transform: rotate(24deg) scaleY(1); }
    to { transform: rotate(-26deg) scaleY(0.75); }
}

/* ---------- hat and witch ---------- */
.hw-hat {
    position: absolute;
    top: -34px;
    left: -16px;
    width: 66px;
    transform: rotate(-16deg);
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.hw-hat svg {
    display: block;
    width: 100%;
}

.hw-witch {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 190px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.45));
    will-change: transform;
}

.hw-witch svg {
    display: block;
    width: 100%;
    transform: rotate(var(--tilt, 0deg));
}

.hw-witch .hw-cape {
    transform-box: fill-box;
    transform-origin: 100% 0;
    animation: hw-cape 0.6s ease-in-out infinite alternate;
}

@keyframes hw-cape {
    from { transform: skewY(0) scaleX(1); }
    to { transform: skewY(6deg) scaleX(1.06); }
}

.hw-witch.is-left svg { transform: scaleX(-1) rotate(var(--tilt, 0deg)); }

.hw-witch.is-spin svg { animation: hw-spin 0.9s ease-in-out; }
.hw-witch.is-left.is-spin svg { animation-name: hw-spin-left; }

@keyframes hw-spin {
    from { transform: rotate(0); }
    to { transform: rotate(-360deg); }
}

@keyframes hw-spin-left {
    from { transform: scaleX(-1) rotate(0); }
    to { transform: scaleX(-1) rotate(-360deg); }
}

.hw-bubble {
    position: fixed;
    z-index: 41;
    padding: 6px 12px;
    border: 2px solid #ff8f00;
    border-radius: 14px;
    background: #1b1030;
    color: #ffd54f;
    font: 800 1rem 'Inter', sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -100%);
    animation: hw-bubble 1.6s ease forwards;
}

@keyframes hw-bubble {
    0% { opacity: 0; transform: translate(-50%, -80%) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
    80% { opacity: 1; transform: translate(-50%, -110%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(0.95); }
}

/* A warm glow under the header in the Halloween theme. */
.theme-halloween .site-header {
    box-shadow: 0 6px 26px rgba(255, 120, 20, 0.18);
}

@media (max-width: 640px) {
    .hw-web { width: 90px; }
    .hw-pumpkin { width: 52px; }
    .hw-pumpkin--card.hw-pumpkin--squat { width: 60px; }
    .hw-pumpkin--card.hw-pumpkin--tall,
    .hw-pumpkin--card.hw-pumpkin--ghost { width: 46px; }
    .hw-witch { width: 116px; }
    .hw-hat { width: 46px; top: -24px; left: -12px; }
    .hw-spider { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-wing,
    .hw-flame,
    .hw-fog,
    .hw-spider,
    .hw-witch .hw-cape {
        animation: none;
    }
}

/* ---------- skulls and ghosts ---------- */
.hw-garland {
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    height: 120px;
}

.hw-garland__string {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hw-garland__skull {
    position: absolute;
    width: 26px;
    margin-left: -13px;
    padding-top: var(--thread, 10px);
    transform-origin: 50% 0;
    animation: hw-swing 3.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

/* Each skull's own thread from the garland's string. */
.hw-garland__skull::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5px;
    height: calc(var(--thread, 10px) + 3px);
    background: rgba(30, 20, 30, 0.9);
    transform: translateX(-50%);
}

.hw-garland__skull svg,
.hw-ghost svg,
.hw-pumpkin-skull svg {
    display: block;
    width: 100%;
}

@keyframes hw-swing {
    from { transform: rotate(calc(var(--swing, 5deg) * -1)); }
    to { transform: rotate(var(--swing, 5deg)); }
}

.hw-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    filter: drop-shadow(0 0 14px rgba(200, 215, 255, 0.45));
    will-change: transform, opacity;
}

.hw-pumpkin-skull {
    position: absolute;
    left: -18px;
    bottom: 4px;
    width: 26px;
    transform: rotate(-12deg);
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255, 140, 30, 0.6));
}

@media (max-width: 640px) {
    .hw-garland { height: 80px; }
    .hw-garland__skull { width: 18px; margin-left: -9px; }
}

/* The tactics board has its buttons in the top right corner: no hanging spider there. */
.page-tactics-room .hw-spider {
    display: none;
}