/* Seasonal skin. The underlying theme and answer feedback remain intact. */
:root[data-event='halloween'] {
    --tv-page: #0d1328;
    --tv-page-2: #242039;
    --tv-surface: #181d36;
    --tv-surface-2: #242742;
    --tv-surface-3: #30304f;
    --tv-border: #514561;
    --tv-text: #fff5ed;
    --tv-muted: #c3b8ce;
    --tv-accent: #ffb566;
    --tv-blue: #ae91ee;
    --tv-input: #13172c;
    --tv-input-border: #74617f;
    --background: #0d1328;
    --foreground: #fff5ed;
    --card: #181d36;
    --card-foreground: #fff5ed;
    --popover: #20243b;
    --popover-foreground: #fff5ed;
    --primary: #ffb566;
    --primary-foreground: #26192b;
    --secondary: #29283f;
    --secondary-foreground: #fff5ed;
    --muted: #242742;
    --muted-foreground: #c3b8ce;
    --accent: #343048;
    --accent-foreground: #fff5ed;
    --border: #514561;
    --input: #514561;
    --ring: #ffb566;
    --brand: #ffb566;
    --brand-blue: #ae91ee;
    --page-secondary: #242039;
    --surface-raised: #242742;
    --surface-high: #30304f;
    --field: #13172c;
    --header: #181d36;
}
:root[data-event='halloween'][data-theme='light'] {
    --tv-page: #f3ece4;
    --tv-page-2: #e8d5c3;
    --tv-surface: #fffaf4;
    --tv-surface-2: #f1e6dd;
    --tv-surface-3: #ebdfd3;
    --tv-border: #c8af9e;
    --tv-text: #30253e;
    --tv-muted: #685774;
    --tv-accent: #a84710;
    --tv-blue: #76519c;
    --tv-input: #fffaf4;
    --tv-input-border: #ad927f;
    --background: #f3ece4;
    --foreground: #30253e;
    --card: #fffaf4;
    --card-foreground: #30253e;
    --popover: #fffaf4;
    --popover-foreground: #30253e;
    --primary: #a84710;
    --primary-foreground: #fffaf4;
    --secondary: #f1e6dd;
    --secondary-foreground: #30253e;
    --muted: #f1e6dd;
    --muted-foreground: #685774;
    --accent: #ebdfd3;
    --accent-foreground: #30253e;
    --border: #c8af9e;
    --input: #c8af9e;
    --ring: #a84710;
    --brand: #a84710;
    --brand-blue: #76519c;
    --page-secondary: #e8d5c3;
    --surface-raised: #f1e6dd;
    --surface-high: #ebdfd3;
    --field: #fffaf4;
    --header: #fffaf4;
}
:root[data-event='halloween'] body {
    background:
        radial-gradient(ellipse at 88% 8%, #9862a440, transparent 48%),
        radial-gradient(ellipse at 0% 85%, #c8661924, transparent 45%),
        var(--tv-page);
}
.halloween-atmosphere,
.halloween-foreground {
    display: none;
}
[data-event='halloween'] .halloween-atmosphere,
[data-event='halloween'] .halloween-foreground {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
[data-event='halloween'] .halloween-atmosphere {
    z-index: 0;
    color: #b994cd;
}
[data-event='halloween'] .halloween-foreground {
    z-index: 10;
}
.halloween-moon {
    position: absolute;
    top: 12px;
    right: 2%;
    width: clamp(140px, 15vw, 220px);
    height: auto;
    opacity: 0.48;
    filter: drop-shadow(0 0 36px #cfacc752);
}
.halloween-bats {
    position: absolute;
    top: 14px;
    right: 0;
    width: clamp(220px, 22vw, 310px);
    color: #3b284d;
    opacity: 0.9;
    filter: drop-shadow(0 1px 1px #d4aed94a);
    animation: halloween-bat-drift 12s ease-in-out infinite alternate;
}
.halloween-sparks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
}
.halloween-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    opacity: 0.2;
}
.halloween-mist {
    position: absolute;
    width: 125%;
    height: 32vh;
    left: -10%;
    background: radial-gradient(ellipse, #c6b0e326, transparent 65%);
    filter: blur(30px);
    animation: halloween-drift 35s ease-in-out infinite alternate;
}
.mist-one {
    top: 20%;
}
.mist-two {
    bottom: 10%;
    animation-delay: -18s;
}
.halloween-pumpkin {
    position: absolute;
    bottom: 18px;
    left: -16px;
    width: clamp(82px, 8vw, 122px);
    opacity: 0.88;
    transform: rotate(-9deg);
    filter: drop-shadow(0 0 22px #f89c4338);
}
.halloween-pumpkin-light {
    filter: drop-shadow(0 0 5px #ffd78c88);
    animation: halloween-lantern-glow 6s ease-in-out infinite alternate;
}
.halloween-ghost {
    position: absolute;
    top: 47%;
    right: -18px;
    width: clamp(64px, 6vw, 90px);
    opacity: 0.6;
    filter: drop-shadow(0 0 12px #c1a0eb33);
    animation: halloween-ghost-float 8s ease-in-out infinite alternate;
}
/* Keep the decorative layer quiet during questions and timed battles. */
[data-event='halloween'] .halloween-atmosphere--quiet {
    opacity: 0.3;
}
.halloween-atmosphere--quiet :is(.halloween-bats, .halloween-mist) {
    animation: none;
}
[data-event='halloween'][data-theme='light'] .halloween-moon {
    opacity: 0.65;
    filter: drop-shadow(0 0 30px #b187bc52);
}
[data-event='halloween'][data-theme='light'] .halloween-horizon {
    color: #765b88;
    opacity: 0.24;
}
[data-event='halloween'][data-theme='light'] .halloween-ghost {
    filter: drop-shadow(0 2px 8px #78568866);
    opacity: 0.8;
}
[data-event='halloween'] .game-navigation {
    background: color-mix(
        in srgb,
        var(--tv-surface) 94%,
        transparent
    ) !important;
    border-top-color: var(--tv-border) !important;
}
[data-event='halloween'] .game-navigation a.active,
[data-event='halloween'] .game-navigation button.active {
    color: var(--tv-accent) !important;
    background: color-mix(
        in srgb,
        var(--tv-accent) 12%,
        transparent
    ) !important;
}
[data-event='halloween'] .game-more-menu {
    background: var(--tv-surface) !important;
    color: var(--tv-text);
    border-color: var(--tv-border) !important;
}
[data-event='halloween']
    :is(
        .journey-card,
        .lobby-stats,
        .news-box,
        .hub-panel,
        .shop-card,
        .pack-card,
        .rank-card,
        .quest-card,
        .battle-panel
    ) {
    background: linear-gradient(
        145deg,
        var(--tv-surface-2),
        var(--tv-surface)
    ) !important;
    border-color: var(--tv-border) !important;
}
[data-event='halloween'] :is(.journey-card h2, .rank-card h2, .news-copy h2) {
    color: var(--tv-text) !important;
}
[data-event='halloween'] :is(.journey-card p, .rank-card p, .news-copy p) {
    color: var(--tv-muted) !important;
}
[data-event='halloween'] .lobby-world {
    filter: drop-shadow(0 0 26px #cf792724);
}
[data-event='halloween'] .journey-card.primary {
    border-color: color-mix(
        in srgb,
        var(--tv-accent) 60%,
        var(--tv-border)
    ) !important;
}
.halloween-entry {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-bottom: 24px;
    padding: 18px 24px;
    border: 1px solid var(--tv-border);
    border-radius: 20px;
    background: linear-gradient(110deg, var(--tv-surface-2), var(--tv-surface));
    color: var(--tv-text);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 30px #02061122;
}
.halloween-entry-art {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}
.halloween-entry-art svg {
    width: 100%;
    height: 100%;
}
.halloween-entry-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.halloween-entry-copy small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--tv-accent);
}
.halloween-entry-copy strong {
    font-size: 23px;
    line-height: 1.15;
}
.halloween-entry-copy span {
    font-size: 13px;
    color: var(--tv-muted);
}
.halloween-entry-action {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 12px 18px;
    border-radius: 13px;
    background: #ffb566;
    color: #281b2d;
    font-size: 14px;
    font-weight: 800;
}
.halloween-entry:hover {
    border-color: var(--tv-accent);
}
.game-more-menu .halloween-entry {
    margin: 0 18px 18px;
    padding: 12px 16px;
}
.game-more-menu .halloween-entry-copy strong {
    font-size: 18px;
}
.game-more-menu .halloween-entry-art {
    width: 48px;
    height: 48px;
}
/* Earned frame artwork remains available after the seasonal skin ends. */
:root .profile-frame[data-frame^='halloween-'][data-frame] {
    --halloween-frame-art: url('/assets/frames/halloween-2026.svg?v=20261002-3');
    --frame-a: #ffb566;
    --frame-b: #aa86d1;
    position: relative;
    isolation: isolate;
    border: 0 !important;
    border-image: none !important;
    border-radius: 50% !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}
:root .profile-frame[data-frame^='halloween-'][data-frame]::before {
    content: '' !important;
    position: absolute !important;
    z-index: 4 !important;
    inset: -18% !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--halloween-frame-art)
        center/contain no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 2px #ee954448);
    animation: halloween-frame-glow 5s ease-in-out infinite alternate !important;
}
:root .profile-frame[data-frame^='halloween-'][data-frame]::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}
:root .frame-preview.profile-frame[data-frame^='halloween-'][data-frame] {
    background: radial-gradient(circle at 32% 24%, #2e3856, #111c32) !important;
    color: #ffe5c3 !important;
}
/* Ownership determines the locked look, independently of requests in flight. */
:root .frame-item.is-locked:has(.profile-frame[data-frame^='halloween-']) {
    opacity: 1 !important;
    filter: none;
    cursor: default;
}
:root
    .frame-item.is-locked
    .profile-frame[data-frame^='halloween-'][data-frame]::before {
    animation: none !important;
    filter: none;
}
/* A reveal shell has extra space around its actual portrait. */
:root
    .profile-avatar-shell.profile-frame[data-frame^='halloween-'][data-frame]::before {
    inset: -7.4% !important;
}
:root .profile-frame[data-frame='halloween-pumpkin-2026'][data-frame] {
    --halloween-frame-art: url('/assets/frames/halloween-pumpkin-2026.svg');
    --frame-a: #ffc578;
    --frame-b: #b97546;
}
:root .profile-frame[data-frame='halloween-ghost-2026'][data-frame] {
    --halloween-frame-art: url('/assets/frames/halloween-ghost-2026.svg');
    --frame-a: #e5d8f6;
    --frame-b: #ac91d0;
}
@keyframes halloween-frame-glow {
    from {
        filter: drop-shadow(0 0 2px #ee954448);
    }
    to {
        filter: drop-shadow(0 0 4px #ee954477);
    }
}
@keyframes halloween-drift {
    from {
        transform: translateX(-3%);
    }
    to {
        transform: translateX(6%);
    }
}
@keyframes halloween-bat-drift {
    from {
        transform: translate(0, 0) rotate(-2deg);
    }
    to {
        transform: translate(-10px, 6px) rotate(2deg);
    }
}
@keyframes halloween-ghost-float {
    from {
        transform: translateY(-8px) rotate(-5deg);
    }
    to {
        transform: translateY(8px) rotate(3deg);
    }
}
@keyframes halloween-lantern-glow {
    from {
        filter: drop-shadow(0 0 3px #ffd78c55);
    }
    to {
        filter: drop-shadow(0 0 7px #ffd78c99);
    }
}
@media (max-width: 900px) {
    .halloween-ghost {
        display: none;
    }
    .halloween-pumpkin {
        left: -26px;
        width: 74px;
        opacity: 0.65;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}
@media (max-width: 600px) {
    .halloween-entry {
        gap: 12px;
        padding: 14px;
        margin-bottom: 18px;
    }
    .halloween-entry-copy strong {
        font-size: 19px;
    }
    .halloween-entry-copy span {
        display: none;
    }
    .halloween-entry-action {
        padding: 10px 12px;
        font-size: 12px;
    }
    .halloween-entry-art {
        width: 46px;
        height: 46px;
    }
    .halloween-moon {
        top: 4px;
        right: -20px;
        width: 130px;
        opacity: 0.38;
    }
    .halloween-bats {
        width: 180px;
        right: -26px;
    }
    .halloween-horizon {
        height: 95px;
    }
    .halloween-pumpkin {
        left: -30px;
        width: 64px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .halloween-mist,
    .halloween-bats,
    .halloween-ghost,
    .halloween-pumpkin-light,
    :root .profile-frame[data-frame^='halloween-'][data-frame]::before {
        animation: none !important;
    }
}

[data-event='halloween'] .news-copy {
    background: var(--tv-surface) !important;
}
[data-event='halloween'] .game-hub .play-button {
    background: #ffb566 !important;
    color: #281b2d !important;
    box-shadow: 0 4px 0 #b96b34 !important;
}
[data-event='halloween'] .news-dots button.active {
    background: var(--tv-accent) !important;
}

[data-event='halloween'] .auth-simple-page {
    position: relative;
    background: transparent !important;
}

[data-event='halloween'] [data-sonner-toaster] {
    max-width: calc(100vw - 32px) !important;
}