/* Rincones embrujados. Standalone, reversible skin; no gameplay or campaign colors. */
.halloween-game-panel { display: contents; }

/* A ghost of the hidden home card, at its usual position without shifting the page. */
html.halloween-theme [data-halloween-home] { position: relative; }
html.halloween-theme #fieldsetmultiplayer.halloween-multiplayer-teaser {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 800px;
    margin: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    border: 1px solid #ffb77b;
    box-shadow: inset 0 0 0 2px #78547d, 0 0 14px #ff963980, 0 0 36px #ff963947;
}
html.halloween-theme .halloween-multiplayer-teaser .fieldsetLegend,
html.halloween-theme .halloween-multiplayer-teaser .apple-title {
    color: #ffb77b;
    text-shadow: 0 0 5px #ff9639b3, 0 0 12px #ff963970;
}
html.halloween-theme .halloween-multiplayer-teaser .fieldsetLegend { background: #302338; }
.halloween-multiplayer-teaser[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .halloween-multiplayer-teaser { display: none !important; }
}

/* Only the spider is interactive; the rest of this layer lets clicks through. */
html.halloween-theme .halloween-spider-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    overflow: hidden;
    z-index: 2147483000;
    pointer-events: none;
}
html.halloween-theme .halloween-spider {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(52px, 7vw, 76px);
    height: clamp(52px, 7vw, 76px);
    pointer-events: auto;
    contain: layout style;
    will-change: transform;
    filter: drop-shadow(0 2px 1px #e7ceee80) drop-shadow(0 4px 3px #0009);
    appearance: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
    touch-action: manipulation;
}
html.halloween-theme .halloween-spider:focus-visible { outline: 2px solid #ffb77b; outline-offset: 2px; }
html.halloween-theme .halloween-spider svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 55%;
}
.halloween-spider--squashed .halloween-spider-legs path { animation-play-state: paused; }
.halloween-spider-legs path {
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: halloween-spider-step 160ms steps(2, end) infinite alternate;
}
.halloween-spider-legs path:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes halloween-spider-step {
    from { transform: rotate(-9deg); }
    to { transform: rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
    html.halloween-theme .halloween-spider { display: none; }
    .halloween-spider-legs path { animation: none; }
}

html.halloween-theme {
    /* Override the normal wallpaper, including the footer's inline preload result. */
    background-image: url('../images/halloween/ruins-moon1.webp') !important;
    background-position: center top !important;
    background-size: cover !important;
    --halloween-panel: #302338;
    --halloween-edge: #78547d;
    --halloween-cream: #e7ceee;
}
html.halloween-theme .gamedle-backdrop {
    background: linear-gradient(90deg, #100b1820, #100b1840 30%, #100b1840 70%, #100b1820);
}
html.halloween-theme body { isolation: isolate; }
html.halloween-theme .fieldsetmodes,
html.halloween-theme .glossarycontainer,
html.halloween-theme .privacy-policy-container {
    position: relative;
    background-color: var(--halloween-panel) !important;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--halloween-edge), inset -5px -5px #130b1b55;
}
html.halloween-theme .fieldsetmodes {
    margin-block: 22px;
}
html.halloween-theme .fieldsetLegend {
    color: #32223d;
    background: var(--halloween-cream);
    border-radius: 4px;
}
/* The event card, game buttons, difficulty badges, lives and answer colors stay as they are. */
html.halloween-theme .glossarycontainer { padding: 20px; margin-block: 24px; }
html.halloween-theme .privacy-policy-container { margin-block: 24px 32px; }

/* At most two ornaments per panel, both at the top. They never capture taps. */
html.halloween-theme :is(.fieldsetmodes, .glossarycontainer, .privacy-policy-container, .halloween-game-panel #image_div)::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    height: 36px;
    z-index: 2;
    pointer-events: none;
    image-rendering: pixelated;
    background-repeat: no-repeat;
}
html.halloween-theme :is(.fieldsetmodes, .glossarycontainer, .privacy-policy-container, .halloween-game-panel #image_div)::before {
    top: -23px;
    background-image: url('../images/halloween/bat1.png'), url('../images/halloween/ghost2.png');
    background-size: var(--halloween-left-size, 44px 24px), 32px 30px;
    background-position: left top, right top;
}
/* Vary the home panels without filling any additional corners. */
html.halloween-theme .divFieldsetsModes > .fieldsetmodes:nth-of-type(even)::before {
    --halloween-left-size: 32px 28px;
    --halloween-left-size-mobile: 28px 24px;
    background-image: url('../images/halloween/pumpkin3.png'), url('../images/halloween/ghost2.png');
}
/* Avoid a second set of ornaments inside recommendation sections or nested panels. */
html.halloween-theme .halloween-game-panel .fieldsetmodes::before { content: none; }

/* Anchor the two sprites to the clue itself, outside its top corners. */
html.halloween-theme .halloween-game-panel #image_div::before {
    left: -5px;
    right: -5px;
    top: -22px;
}

html.halloween-theme :is(.gamedle-menu, .gamedle-menu-heading, #gamedle-menu-trigger) {
    background-color: #2a2032;
    border-color: #725178;
}
html.halloween-theme .gamedle-menu-heading { color: #decee5; }
html.halloween-theme .gamedle-menu hr { border-color: #644b6d; }
html.halloween-theme .gamedle-menu [data-menu-page]>a:hover,
html.halloween-theme .gamedle-menu [data-menu-page]>button:hover { background-color: #403048; }
html.halloween-theme .light-modal-content {
    background-color: #2a2032;
    box-shadow: inset 0 0 0 1px #78547d, 0 12px 34px #0008;
}
html.halloween-theme .light-modal-header,
html.halloween-theme .light-modal-footer { background-color: #302338; }

/* Multiplayer keeps its gameplay colors and layout, including the flat final leaderboard. */
html.halloween-theme .multiplayer-content :is(.identity-card, .join-card, .host-setup, #room-toolbar, #room-controls-bottom, #configuration-panel, #puzzle, .scoreboard:not(.final-scoreboard), #final-results, .lobby-guide) {
    background: var(--halloween-panel);
    border-color: var(--halloween-edge);
    box-shadow: inset 0 0 0 1px var(--halloween-edge), 0 4px 0 #0005;
}
html.halloween-theme .multiplayer-content #lobby-roster #lobby {
    background: var(--halloween-panel);
    border-color: var(--halloween-edge);
}
/* Decorate only the main cards; leaderboard rows and nested controls stay clear. */
html.halloween-theme .multiplayer-content :is(.identity-card, .join-card, .host-setup, .lobby-guide, #puzzle, .final-results) { position: relative; }
html.halloween-theme .multiplayer-content :is(.identity-card, .join-card, .host-setup, .lobby-guide, #puzzle, .final-results)::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 6px;
    right: 6px;
    height: 30px;
    z-index: 2;
    pointer-events: none;
    image-rendering: pixelated;
    background: url('../images/halloween/bat1.png') left top / 40px 22px no-repeat,
                url('../images/halloween/ghost2.png') right top / 28px 26px no-repeat;
}

@media (max-width: 680px) {
    html.halloween-theme .fieldsetmodes {
        min-width: 0;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 10px;
    }
    html.halloween-theme .glossarycontainer { max-width: 100%; padding: 16px 10px; }
    html.halloween-theme :is(.fieldsetmodes, .glossarycontainer, .privacy-policy-container, .halloween-game-panel #image_div)::before {
        top: -19px;
        height: 28px;
        background-size: var(--halloween-left-size-mobile, 34px 18px), 26px 24px;
    }
    /* Keep image clues within narrow mobile viewports. */
    html.halloween-theme .halloween-game-panel #image_div::before {
        left: 0;
        right: 0;
    }
    html.halloween-theme .halloween-game-panel :is(.wrapper, .wrapper_artwork, .single-card, .front, .back, #image_div) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html.halloween-theme .halloween-game-panel #mainimg {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }
    html.halloween-theme .multiplayer-content :is(.identity-card, .join-card, .host-setup, .lobby-guide, #puzzle, .final-results)::before {
        top: -17px;
        height: 26px;
        background-size: 32px 18px, 24px 22px;
    }
}