.christmas-theme {
    --festive-forest: #183f32;
    --festive-ivory: #fff8e8;
    --festive-cranberry: #963e46;
    --elf-launcher-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    --elf-launcher-right: 20px;
}
.christmas-theme .topbar::after { display: none; }
.christmas-theme .festive-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 202px;
    margin: 24px 0 27px;
    padding: 35px 35px 31px;
    gap: 20px;
    border: 1px solid #365949;
    border-radius: 16px;
    background: radial-gradient(ellipse at 78% 15%, #42624c80, transparent 56%), linear-gradient(120deg, #163b30, #214c3a);
    box-shadow: 0 5px 18px #183f320a;
    color: var(--festive-ivory);
}
.christmas-theme .festive-header::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 9px;
    border-radius: 50% 40% 0 0;
    background: #fffaf0;
    box-shadow: 0 -3px 10px #fff8e820;
    pointer-events: none;
    z-index: 3;
}
.christmas-theme .festive-heading { position: relative; z-index: 2; min-width: 0; flex: 1; }
.christmas-theme .festive-header .eyebrow { color: #d9c5a1; letter-spacing: 2.1px; }
.christmas-theme .festive-header h1 { color: var(--festive-ivory); font-size: clamp(30px, 3.4vw, 46px); }
.christmas-theme .festive-header h1 em { color: #e0c998; }
.christmas-theme .festive-header .title-star { color: #e1bc73; }
.christmas-theme .festive-header p { color: #e1e5d7; max-width: 530px; line-height: 1.75; }
.christmas-theme .festive-reindeer {
    position: relative;
    z-index: 2;
    width: 146px;
    flex: 0 0 146px;
    align-self: center;
    margin: -8px 8px -2px 0;
    animation: none;
    transform: none;
}
.christmas-theme .festive-reindeer img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px #071f2924);
}
.christmas-theme .festive-reindeer span { margin-top: -6px; color: #e4dbc1; font-size: 10px; }
.christmas-theme .character-clip {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    pointer-events: none;
}
.christmas-theme .character-clip > img,
.christmas-theme .character-clip > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px #071f2924);
}
.christmas-theme .character-clip > video,
.christmas-theme .character-clip > .character-clip-fallback { position: absolute; inset: 0; }
.christmas-theme .character-clip > video { visibility: hidden; }
.christmas-theme .character-clip.is-playing > video { visibility: visible; }
.christmas-theme .character-clip.is-playing > img:first-child { visibility: hidden; }
.christmas-theme .character-clip > [hidden] { display: none; }
.christmas-theme .festive-reindeer .character-clip { margin: 0; }
.christmas-theme .festive-elf .character-clip.is-loading > img:first-child { visibility: hidden; }
.christmas-theme .festive-snow { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; border-radius: inherit; }
.christmas-theme .festive-snow i {
    position: absolute;
    top: -10px;
    left: var(--left);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #fff9e9;
    opacity: .55;
    animation: festive-snowfall var(--duration) linear var(--delay) infinite !important;
}
.christmas-theme .festive-lights {
    position: absolute;
    display: flex;
    justify-content: space-around;
    top: -6px;
    left: -1%;
    width: 102%;
    height: 24px;
    border-bottom: 1px solid #84916f;
    border-radius: 0 0 50% 50%;
    pointer-events: none;
    z-index: 3;
}
.christmas-theme .festive-lights i {
    position: relative;
    display: block;
    margin-top: 18px;
    width: 5px;
    height: 9px;
    border-radius: 45% 45% 50% 50%;
    background: #ffe8ac;
    box-shadow: 0 0 7px 2px #f5c96f68;
    animation: festive-twinkle 6s ease-in-out var(--twinkle-delay) infinite !important;
}
.christmas-theme .festive-lights i::before { content: ''; position: absolute; width: 3px; height: 3px; top: -3px; left: 1px; background: #84916f; }
.christmas-theme .festive-lights i:nth-child(3n) { background: #df9289; box-shadow: 0 0 7px 2px #cb5a5054; }
.christmas-theme .festive-lights i:nth-child(3n + 1) { background: #f8f0cb; }
.christmas-theme .festive-effects-control { display: inline-flex; gap: 8px; align-items: center; color: #65745f; font-size: 10px; }
.christmas-theme .festive-effects-control label { color: inherit; font-size: inherit; margin: 0; white-space: nowrap; }
.christmas-theme .festive-effects-control select { width: auto; margin: 0; padding: 6px 24px 6px 9px; font-size: 10px; min-height: 32px; background-color: #fffefa; }
.christmas-theme .festive-effects-control[hidden] { display: none; }
.christmas-theme .festive-elf-host { position: relative; z-index: 0; }
.christmas-theme .festive-elf-host .gift-body { position: relative; z-index: 2; background: #fff; }
.christmas-theme .festive-elf-host .gift-menu,
.christmas-theme .festive-elf-host .state-pill { z-index: 3; }
.christmas-theme .festive-elf {
    position: absolute;
    right: 4px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 3px 3px;
}
.christmas-theme .festive-elf img { display: block; width: 100%; height: 100%; object-fit: contain; }
.christmas-theme[data-festive-effects='gentle'] .festive-lights i { animation: none !important; }
.christmas-theme[data-festive-effects='gentle'] .festive-snow i { animation-duration: 24s !important; opacity: .35; }
.christmas-theme[data-festive-effects='gentle'] .festive-snow i:nth-child(n + 11) { display: none; }
.christmas-theme[data-festive-effects='off'] .festive-snow,
.christmas-theme[data-festive-effects='off'] .festive-elf:not(.festive-elf-summoned) { display: none; }
.christmas-theme[data-festive-effects='off'] .festive-lights i { animation: none !important; }
.christmas-theme.festive-paused .festive-snow i,
.christmas-theme.festive-paused .festive-lights i { animation-play-state: paused !important; }
.christmas-theme .festive-auth-header { width: min(560px, 90vw); min-height: 180px; margin: 0 auto 22px; padding: 30px 28px 24px; text-align: left; }
.christmas-theme .festive-auth-header h2 { color: #fff8e8; font-size: 25px; margin-top: 15px; }
.christmas-theme .festive-auth-header .brand { color: #fff8e8; }
.christmas-theme .festive-auth-header .brand-mark { color: #d3dfbd; }
.christmas-theme .festive-auth-header .festive-reindeer { width: 118px; flex-basis: 118px; margin-right: -7px; }
@keyframes festive-snowfall {
    0% { transform: translate3d(0, -8px, 0); opacity: 0; }
    10% { opacity: .55; }
    90% { opacity: .4; }
    100% { transform: translate3d(23px, 230px, 0); opacity: 0; }
}
@keyframes festive-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .62; } 70% { opacity: .92; } }
@media (max-width: 760px) {
    .christmas-theme .festive-header { min-height: 186px; padding: 32px 23px 28px; gap: 12px; }
    .christmas-theme .festive-reindeer { width: 119px; flex-basis: 119px; margin-right: 0; }
    .christmas-theme .festive-header h1 { font-size: 34px; }
}
@media (max-width: 520px) {
    .christmas-theme .festive-header { margin: 18px 0 23px; min-height: 174px; padding: 30px 17px 26px; gap: 3px; }
    .christmas-theme .festive-header h1 { font-size: clamp(27px, 7vw, 34px); letter-spacing: -1px; overflow-wrap: anywhere; }
    .christmas-theme .festive-header .eyebrow { font-size: 7px; letter-spacing: 1.2px; margin-bottom: 10px; }
    .christmas-theme .festive-header p { font-size: 10px; margin-top: 10px; }
    .christmas-theme .festive-header .title-star { font-size: 15px; margin-left: 5px; }
    .christmas-theme .festive-reindeer { width: 86px; flex-basis: 86px; margin: 0 -4px 0 0; }
    .christmas-theme .festive-reindeer span { font-size: 8px; margin-top: 0; }
    .christmas-theme .festive-effects-control { gap: 5px; }
    .christmas-theme .festive-effects-control select { padding: 5px 18px 5px 7px; }
    .christmas-theme .festive-elf { right: 4px; }
    .christmas-theme .festive-auth-header { width: min(560px, 90vw); margin: 0 auto 18px; padding: 27px 17px 24px; }
    .christmas-theme .festive-auth-header .brand { font-size: 23px; }
    .christmas-theme .festive-auth-header h2 { font-size: 20px; }
    .christmas-theme .festive-auth-header .festive-reindeer { width: 86px; flex-basis: 86px; }
}

/* Keep the seasonal header comfortable to read on small screens. */
.christmas-theme .festive-header::before {
    content: '';
    position: absolute;
    inset: -2px -1px auto;
    height: 9px;
    background: #fffaf0;
    border-radius: 0 0 47% 30%;
    box-shadow: 0 3px 8px #fff8e820;
    pointer-events: none;
    z-index: 3;
}
.christmas-theme .festive-header .eyebrow { font-size: 11px; letter-spacing: 1.4px; }
.christmas-theme .festive-header p { font-size: 12px; }
.christmas-theme .festive-reindeer span { font-size: 11px; line-height: 1.4; }
.christmas-theme .festive-effects-control,
.christmas-theme .festive-effects-control select { font-size: 12px; }
.christmas-theme .festive-auth-main { display: flex; flex-direction: column; justify-content: center; padding: 35px 20px; }
.christmas-theme .festive-auth-header { width: min(560px, 100%); max-width: 100%; }
.christmas-theme .festive-auth-header .brand { font-size: 23px; }
@media (max-width: 520px) {
    .christmas-theme .festive-header .eyebrow { font-size: 11px; letter-spacing: .8px; }
    .christmas-theme .festive-header p { font-size: 12px; }
    .christmas-theme .festive-reindeer span { font-size: 11px; }
    .christmas-theme .topbar > span:not(.festive-effects-control) { display: none; }
    .christmas-theme .topbar { justify-content: flex-end; min-height: 55px; height: auto; }
    .christmas-theme .festive-auth-header { width: min(560px, 100%); }
}
@media (pointer: coarse) {
    .christmas-theme .festive-effects-control select { font-size: 16px; min-height: 44px; }
}
.christmas-theme .festive-elf-launcher {
    position: fixed;
    right: var(--elf-launcher-right);
    bottom: var(--elf-launcher-bottom);
    z-index: 30;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 3px;
    border: 1px solid #d9c5a1;
    border-radius: 50%;
    background: var(--festive-ivory);
    box-shadow: 0 3px 12px #183f3226;
    cursor: pointer;
}
.christmas-theme .festive-elf-launcher img { display: block; width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
.christmas-theme .festive-elf-launcher:hover { background: #f1ead6; border-color: var(--festive-forest); }
.christmas-theme .festive-elf-launcher:focus-visible { outline: 3px solid var(--festive-forest); outline-offset: 4px; }
.christmas-theme .festive-elf-launcher:disabled { opacity: .65; cursor: default; }
.festive-elf-launcher[hidden] { display: none; }
.christmas-theme .festive-elf.festive-elf-summoned {
    position: fixed;
    right: var(--elf-launcher-right);
    bottom: calc(var(--elf-launcher-bottom) + 56px);
    width: 144px;
    height: 144px;
    z-index: 30;
    border-radius: 0;
}
@media (max-width: 520px) {
    .christmas-theme {
        --elf-launcher-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        --elf-launcher-right: 16px;
    }
}
.christmas-theme.login-page {
    --elf-launcher-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}