/* Thriller Bark: illustrated scenery and haunted timber, no additional sections. */
html.halloween {
    --halloween-night: #151a2b;
    --halloween-mist: #4b3e61;
    --halloween-amber: #eda34d;
    --halloween-ivory: #f9efd8;
    background-color: var(--halloween-night);
}
html.halloween body { background-color: var(--halloween-night); }
html.halloween body::before {
    background-color: var(--halloween-night);
    background-image: url('../img/halloween/thriller-night-desktop-v2.webp');
    background-size: cover;
    background-position: center top;
}
html.halloween body::after {
    background: linear-gradient(180deg, #10132214 0%, #10132208 45%, #10132240 100%);
}
.halloween .nav-bar {
    background: linear-gradient(105deg, #111522f5, #272638ed 50%, #111522f5);
    border-bottom-color: #b17a45;
    box-shadow: 0 6px 22px #070a1699, inset 0 -1px #eda34d26;
}
.halloween .nav-bar::before,
.halloween .nav-bar::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 72px;
    background: url('../img/halloween/web-corner-v2.svg') left top / contain no-repeat;
    pointer-events: none;
    opacity: .46;
}
.halloween .nav-bar::before { left: 0; }
.halloween .nav-bar::after { right: 0; transform: scaleX(-1); }
.halloween .brand-wordmark__image { filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 14px #eda34d20); }
.halloween .brand-wordmark::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -28px;
    width: 35px;
    height: 43px;
    background: url('../img/halloween/hollow-v2.svg') center / contain no-repeat;
    transform: rotate(15deg);
    filter: drop-shadow(0 0 5px #e0d3ff60);
    pointer-events: none;
}
.halloween .nav-btn { background: linear-gradient(#363141, #201e2a); border-color: #68555a; }
.halloween .nav-btn.active { border-color: var(--halloween-amber); }
.halloween .subtitle-container .page-subtitle {
    color: #ffe8bd;
    text-shadow: 0 2px 0 #332431, 0 3px 12px #070a16, 0 0 26px #eda34d28;
}
.halloween .subtitle-container-home .page-subtitle { padding-inline: 12px; }
.halloween .home-footer-surprise { box-shadow: 0 2px 12px #070a1680; }
/* The illustrated pumpkin, candles and hollow carving belong to the timber. */
html.halloween .card-wrap:not(.card-coming-soon):not(.card-coming-soon-grid) {
    background-image: url('../img/halloween/haunted-card-v2.webp?v=2');
    filter: drop-shadow(0 10px 13px #070a1680);
}
.halloween .card-title { color: #ffd084; text-shadow: 0 2px 2px #140e0d, 1px 1px #140e0d; }
.halloween .card-desc { color: #f7e7ce; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 3px #140e0d; }
.halloween .card-game-of-month .card-desc { color: #f7e7ce; }
.halloween .card-coming-soon .card-desc { color: #dac8ad; }
.halloween .card-coming-soon { background-color: #151a2bc9; border-color: #9e7950; }
.halloween .home-layout-btn { background-color: #252132; border-color: #8d7254; }
.halloween .home-layout-btn[aria-pressed="true"] { background-color: var(--halloween-amber); }
/* Cutouts emerge from the scenery and never enter the content column. */
.halloween-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.halloween-character {
    display: none;
    position: absolute;
    bottom: -54px;
    width: min(15vw, 260px);
    height: auto;
    opacity: .82;
    filter: drop-shadow(0 0 18px #121320);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 98%);
}
.halloween-character--perona { left: -43px; transform: rotate(5deg); }
.halloween-character--brook { right: -43px; transform: rotate(-5deg); }
.halloween-wandering-ghost {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 65px;
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 0 10px #cfbeed55);
}
.halloween-wandering-ghost img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    transform: scaleX(var(--ghost-facing, 1));
}
@media screen and (min-width: 1024px) and (min-height: 420px) and (hover: hover) and (pointer: fine) {
    html.halloween:not(.tutorial-motion-reduce) .halloween-wandering-ghost.is-drifting {
        display: block;
        animation: halloween-drift var(--ghost-duration, 14s) linear both;
    }
    html.halloween:not(.tutorial-motion-reduce) .halloween-wandering-ghost.is-drifting img {
        animation: halloween-ghost-bob var(--ghost-bob-duration, 4s) ease-in-out infinite,
            halloween-ghost-twirl var(--ghost-duration, 14s) ease-in-out both;
    }
}
/* Local sway and a single pirouette soften the crossing without stopping it. */
@keyframes halloween-ghost-bob {
    0%, 100% { translate: 0 0; }
    25% { translate: 0 calc(-1 * var(--ghost-sway, 25px)); }
    75% { translate: 0 var(--ghost-sway, 25px); }
}
@keyframes halloween-ghost-twirl {
    0% { rotate: calc(-12deg * var(--ghost-spin-direction, 1)); }
    20% { rotate: calc(20deg * var(--ghost-spin-direction, 1)); }
    36% { rotate: calc(-22deg * var(--ghost-spin-direction, 1)); }
    46% { rotate: calc(12deg * var(--ghost-spin-direction, 1)); }
    66% { rotate: calc(350deg * var(--ghost-spin-direction, 1)); }
    82% { rotate: calc(378deg * var(--ghost-spin-direction, 1)); }
    100% { rotate: calc(350deg * var(--ghost-spin-direction, 1)); }
}
@keyframes halloween-drift {
    0% { opacity: 0; transform: translate3d(var(--ghost-start-x), var(--ghost-start-y), 0) rotate(-10deg); }
    12% { opacity: .55; }
    50% { opacity: .55; transform: translate3d(var(--ghost-mid-x), var(--ghost-mid-y), 0) rotate(8deg); }
    88% { opacity: .55; }
    100% { opacity: 0; transform: translate3d(var(--ghost-end-x), var(--ghost-end-y), 0) rotate(-8deg); }
}
@media (min-width: 1280px) {
    .halloween-character { display: block; }
    body.ads-lateral-fit:has(.ad-lateral-small > *) .halloween-character { display: none; }
}
/* A hollow sits on the frame, clear of the game title and its play button. */
.halloween .card-wrap[data-game="risa"]::before,
.halloween .card-wrap[data-game="wanted"]::before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 48px;
    background: url('../img/halloween/hollow-v2.svg') center / contain no-repeat;
    transform: rotate(-12deg);
    filter: drop-shadow(0 0 7px #cfbeed45);
    pointer-events: none;
}
.halloween.home-compact .card-wrap::before { width: 21px; height: 28px; right: 7px; bottom: 5px; }
@media (max-width: 767px) {
    html.halloween body::before {
        background-image: url('../img/halloween/thriller-night-mobile-v2.webp');
        background-position: center top;
    }
    .halloween .nav-bar::before, .halloween .nav-bar::after { width: 52px; height: 54px; opacity: .35; }
    .halloween .brand-wordmark::after { width: 27px; height: 33px; right: -21px; top: -4px; }
    .halloween .card-desc { font-size: .9rem; }
}
@media (hover: hover) and (pointer: fine) {
    .halloween .card-wrap:not(.card-coming-soon):hover {
        filter: drop-shadow(0 12px 16px #070a16a0) drop-shadow(0 0 8px #eda34d38);
    }
    .halloween .nav-btn:hover { border-color: var(--halloween-amber); background: #453546; }
}
/* Motion is brief, optional and does not run in the background. */
html.halloween:not(.tutorial-motion-reduce) .brand-wordmark::after { animation: hollow-greeting 3.6s ease-in-out 1; }
@keyframes hollow-greeting {
    0%, 100% { translate: 0 0; }
    35% { translate: 0 -5px; }
    70% { translate: 0 2px; }
}
html.halloween.tutorial-motion-reduce .card-wrap,
html.halloween.tutorial-motion-reduce .card-wrap:hover { transition: none; }
@media print {
    .halloween-decor, .halloween-wandering-ghost, .halloween .brand-wordmark::after,
    .halloween .nav-bar::before, .halloween .nav-bar::after,
    .halloween .card-wrap::before { display: none; }
    html.halloween body::after { background: none; }
}