/* Seasonal presentation only. Revert the Halloween commit to restore the prior theme. */
body.halloween-theme {
    --halloween-orange: #ffab55;
    --halloween-cream: #fff0d5;
    --halloween-border: rgba(232, 144, 70, .4);
    --halloween-panel: linear-gradient(145deg, #231725, #171216 68%, #20170f);
}

.halloween-theme .total-body {
    background-color: #110e0b;
    background-position: center top;
    min-height: 100vh;
}

.halloween-theme .header-top {
    box-shadow: inset 0 -1px 0 rgba(194, 139, 222, .2), 0 8px 24px rgba(0, 0, 0, .32);
}

.halloween-theme .header-bottm {
    background: linear-gradient(90deg, rgba(12, 8, 16, .92), rgba(42, 21, 38, .88) 50%, rgba(12, 8, 16, .92));
    box-shadow: inset 0 1px 0 rgba(255, 191, 118, .14), inset 0 -1px 0 var(--halloween-border);
}

.halloween-theme .header-bottm ul li a {
    color: var(--halloween-orange);
    text-shadow: 0 1px 3px #000;
}

.halloween-theme .header-bottm ul li a::before {
    background: linear-gradient(90deg, transparent, #ffab55 30%, #cfb0e8 70%, transparent);
    box-shadow: 0 0 10px rgba(201, 139, 230, .3);
}

.halloween-theme .header-bottm ul li.acitve > a,
.halloween-theme .header-bottm ul li a:hover,
.halloween-theme .header-bottm ul li a:focus {
    color: var(--halloween-cream);
    text-shadow: 0 0 12px rgba(255, 171, 85, .32);
}

.halloween-theme .header-bottm .nav-more-menu,
.halloween-theme .header-top .login .account-menu.is-open .account-menu-dropdown:not([hidden]) {
    background: #1d1420;
    border-color: var(--halloween-border);
    box-shadow: 0 16px 28px rgba(0, 0, 0, .5);
}

.halloween-theme .header-bottm .nav-badge-new,
.halloween-theme .header-top .login .header-inbox-badge,
.halloween-theme .header-top .login .account-menu-badge {
    background: linear-gradient(180deg, #ffd49a, #f49a48);
    box-shadow: none;
    color: #29130a;
}

.halloween-theme .store-btn,
.halloween-theme .dnld-btm,
.halloween-theme .register-btn,
.halloween-theme .vote-login,
.halloween-theme .mddl-content .all-btn .play-now,
.halloween-theme .hero-cta .store-btn.proceed {
    background: linear-gradient(180deg, #332032, #181017);
    border-color: #ab6d36;
    box-shadow: inset 0 1px 0 rgba(255, 214, 160, .1), 0 6px 16px rgba(0, 0, 0, .3);
    color: #ffd09a;
}

.halloween-theme .store-btn:hover,
.halloween-theme .store-btn:focus,
.halloween-theme .dnld-btm:hover,
.halloween-theme .register-btn:hover,
.halloween-theme .vote-login:hover {
    border-color: var(--halloween-orange);
    color: var(--halloween-cream);
    box-shadow: 0 0 16px rgba(174, 109, 198, .22);
}

.halloween-theme .play-now-btn,
.halloween-theme .landing-page .play-now-btn {
    color: #ffe4b9;
    filter: none;
    text-shadow: 0 2px 3px #000;
}

.halloween-theme .auth-page-shell {
    background: linear-gradient(180deg, rgba(17, 10, 20, .32), rgba(17, 10, 20, .78));
}

.halloween-theme .auth-card,
.halloween-theme .account-hero,
.halloween-theme .account-card,
.halloween-theme .account-panel,
.halloween-theme #item-store-page .store-toolbar,
.halloween-theme #item-store-page .cart-panel,
.halloween-theme #item-store-page .product-card,
.halloween-theme #item-store-page .store-info-dialog,
.halloween-theme #item-checkout-page .checkout-panel,
.halloween-theme #item-checkout-page .order-panel {
    background: var(--halloween-panel);
    border-color: var(--halloween-border);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 218, 178, .05);
}

.halloween-theme .auth-card {
    border-top: 3px solid #e89a54;
}

.halloween-theme .auth-card-title,
.halloween-theme .account-hero h1,
.halloween-theme #item-store-page .store-heading h1,
.halloween-theme #item-store-page .cart-title h2,
.halloween-theme #item-store-page .cart-recommendations h3 {
    color: var(--halloween-cream);
}

.halloween-theme .auth-card .form-control:focus,
.halloween-theme .account-profile-form .form-control:focus,
.halloween-theme #item-store-page .search-input:focus,
.halloween-theme #item-store-page .sort-select:focus {
    border-color: var(--halloween-orange);
    box-shadow: 0 0 0 3px rgba(231, 161, 94, .2);
}

.halloween-theme .auth-card .auth-submit-btn,
.halloween-theme .account-tab.is-active {
    background: linear-gradient(180deg, #ffc47f, #ee9748);
    border-color: #ffc47f;
    color: #281409;
    text-shadow: none;
}

.halloween-theme .auth-card .auth-submit-btn:hover,
.halloween-theme .auth-card .auth-submit-btn:focus {
    background: #ffd59e;
    color: #281409;
}

.halloween-theme .account-profile-hero {
    border-color: rgba(232, 144, 70, .55);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .36), 0 0 22px rgba(150, 103, 184, .12);
}

/* Keep the player's selected banner; decorate just its corner. */
.halloween-theme .account-profile-hero::after {
    background:
        repeating-radial-gradient(circle at 100% 0, transparent 0 19px, rgba(225, 207, 240, .22) 20px 21px, transparent 22px 40px),
        repeating-conic-gradient(from 180deg at 100% 0, transparent 0deg 22deg, rgba(225, 207, 240, .22) 23deg 24deg, transparent 25deg 45deg);
    border-radius: 0 0 0 100%;
    content: "";
    height: 140px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 140px;
}

.halloween-theme .account-profile-avatar {
    border-color: #e3a567;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 4px rgba(180, 123, 207, .12);
}

.halloween-theme #item-store-page .store-tab.is-active,
.halloween-theme #item-store-page .store-tab:hover,
.halloween-theme #item-store-page .store-tab:focus {
    background: #362239;
    border-color: #bc8aca;
    color: var(--halloween-cream);
}

.halloween-theme #item-store-page .popular-section {
    background: linear-gradient(135deg, rgba(69, 37, 70, .88), rgba(29, 20, 23, .96));
    border-color: rgba(188, 138, 202, .34);
}

.halloween-theme #item-store-page .product-card:hover,
.halloween-theme #item-store-page .product-card:focus {
    border-color: #edaa66;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(237, 170, 102, .16);
}

.halloween-theme #item-store-page .store-info-header {
    background: linear-gradient(120deg, #38213b, #201622);
}

@media (max-width: 767.98px) {
    .halloween-theme .total-body {
        background-size: auto 2200px;
    }

    .halloween-theme .account-profile-hero::after {
        height: 90px;
        width: 90px;
    }
}