/* Seasonal themes shared by public, authentication and player-account pages. */
body[class*="web-theme-"] {
    --festival-accent: #22d3ee;
    --festival-accent-soft: rgba(34, 211, 238, .18);
    --festival-dark: #031016;
    --festival-glow: rgba(95, 236, 226, .2);
    background-color: var(--festival-dark) !important;
}

body.web-theme-default {
    --festival-accent: #35d7cf;
    --festival-accent-soft: rgba(53, 215, 207, .18);
    --festival-dark: #031016;
    --festival-glow: rgba(95, 236, 226, .2);
    --festival-bg-image: url('/static/assets/imgs/bg_home_huyenanh.png');
}

body.web-theme-alphatest {
    --festival-accent: #8de9ff;
    --festival-accent-soft: rgba(93, 126, 255, .2);
    --festival-dark: #070d24;
    --festival-glow: rgba(77, 139, 255, .32);
    --festival-bg-image: url('/static/assets/imgs/themes/alpha-test.png');
}

body.web-theme-openserver {
    --festival-accent: #ffd36b;
    --festival-accent-soft: rgba(255, 179, 71, .2);
    --festival-dark: #210807;
    --festival-glow: rgba(218, 62, 32, .32);
    --festival-bg-image: url('/static/assets/imgs/themes/open-server.png');
}

body.web-theme-vietnamchampion {
    --festival-accent: #ffdf45;
    --festival-accent-soft: rgba(255, 223, 69, .24);
    --festival-dark: #310303;
    --festival-glow: rgba(218, 37, 29, .42);
    --festival-bg-image: url('/static/assets/imgs/themes/vietnam-football-champion.png');
}

body.web-theme-newyear { --festival-accent: #eef4ff; --festival-accent-soft: rgba(197, 150, 61, .22); --festival-dark: #050d20; --festival-glow: rgba(230, 188, 89, .3); --festival-bg-image: url('/static/assets/imgs/themes/new-year.png'); }
body.web-theme-partyfounding { --festival-accent: #f7cf62; --festival-accent-soft: rgba(189, 36, 31, .22); --festival-dark: #280504; --festival-glow: rgba(247, 207, 98, .3); --festival-bg-image: url('/static/assets/imgs/themes/national-day.png'); }
body.web-theme-valentine { --festival-accent: #ffd3df; --festival-accent-soft: rgba(195, 78, 120, .22); --festival-dark: #210819; --festival-glow: rgba(231, 113, 155, .32); --festival-bg-image: url('/static/assets/imgs/themes/valentine.png'); }
body.web-theme-doctorsday { --festival-accent: #d6fff5; --festival-accent-soft: rgba(47, 169, 157, .2); --festival-dark: #041d1e; --festival-glow: rgba(93, 220, 201, .28); --festival-bg-image: url('/static/assets/imgs/themes/teachers-day.png'); }
body.web-theme-youthday { --festival-accent: #7df3e8; --festival-accent-soft: rgba(22, 166, 182, .2); --festival-dark: #04232d; --festival-glow: rgba(40, 214, 219, .3); --festival-bg-image: url('/static/assets/imgs/themes/childrens-day.png'); }
body.web-theme-hungkings { --festival-accent: #d8ad54; --festival-accent-soft: rgba(142, 60, 33, .22); --festival-dark: #111b10; --festival-glow: rgba(199, 145, 57, .3); --festival-bg-image: url('/static/assets/imgs/themes/hung-kings.png'); }
body.web-theme-dienbien { --festival-accent: #f0c354; --festival-accent-soft: rgba(166, 45, 32, .2); --festival-dark: #111d0c; --festival-glow: rgba(223, 169, 50, .3); --festival-bg-image: url('/static/assets/imgs/themes/hung-kings.png'); }
body.web-theme-hochiminh { --festival-accent: #f0d37c; --festival-accent-soft: rgba(178, 43, 36, .2); --festival-dark: #220605; --festival-glow: rgba(240, 211, 124, .3); --festival-bg-image: url('/static/assets/imgs/themes/national-day.png'); }
body.web-theme-childrensday { --festival-accent: #ffd66b; --festival-accent-soft: rgba(255, 139, 116, .22); --festival-dark: #042638; --festival-glow: rgba(79, 218, 239, .32); --festival-bg-image: url('/static/assets/imgs/themes/childrens-day.png'); }
body.web-theme-dragonboat { --festival-accent: #e8d57a; --festival-accent-soft: rgba(154, 107, 32, .2); --festival-dark: #10250e; --festival-glow: rgba(208, 183, 84, .28); --festival-bg-image: url('/static/assets/imgs/themes/family-day.png'); }
body.web-theme-familyday { --festival-accent: #ffd69a; --festival-accent-soft: rgba(185, 111, 50, .22); --festival-dark: #10252b; --festival-glow: rgba(235, 162, 85, .3); --festival-bg-image: url('/static/assets/imgs/themes/family-day.png'); }
body.web-theme-warinvalids { --festival-accent: #e7c88c; --festival-accent-soft: rgba(138, 93, 60, .2); --festival-dark: #12141d; --festival-glow: rgba(221, 176, 107, .26); --festival-bg-image: url('/static/assets/imgs/themes/vu-lan.png'); }
body.web-theme-vulan { --festival-accent: #f0b46f; --festival-accent-soft: rgba(168, 82, 113, .22); --festival-dark: #1b0e22; --festival-glow: rgba(220, 117, 155, .3); --festival-bg-image: url('/static/assets/imgs/themes/vu-lan.png'); }
body.web-theme-capitalliberation { --festival-accent: #e8ba58; --festival-accent-soft: rgba(165, 45, 34, .2); --festival-dark: #220906; --festival-glow: rgba(222, 161, 65, .3); --festival-bg-image: url('/static/assets/imgs/themes/reunification-labor.png'); }
body.web-theme-armyday { --festival-accent: #d9bd62; --festival-accent-soft: rgba(82, 111, 53, .22); --festival-dark: #0b1b11; --festival-glow: rgba(179, 172, 75, .3); --festival-bg-image: url('/static/assets/imgs/themes/open-server.png'); }

body.web-theme-tet {
    --festival-accent: #f2c66d;
    --festival-accent-soft: rgba(242, 198, 109, .22);
    --festival-dark: #230506;
    --festival-glow: rgba(197, 35, 30, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/tet.png');
}

body.web-theme-midautumn {
    --festival-accent: #ffd98a;
    --festival-accent-soft: rgba(255, 217, 138, .2);
    --festival-dark: #090f25;
    --festival-glow: rgba(201, 119, 35, .28);
    --festival-bg-image: url('/static/assets/imgs/themes/midautumn.png');
}

body.web-theme-christmas {
    --festival-accent: #dff8ff;
    --festival-accent-soft: rgba(223, 248, 255, .19);
    --festival-dark: #04131d;
    --festival-glow: rgba(36, 146, 116, .26);
    --festival-bg-image: url('/static/assets/imgs/themes/christmas.png');
}

body.web-theme-halloween {
    --festival-accent: #f3a447;
    --festival-accent-soft: rgba(243, 164, 71, .2);
    --festival-dark: #13091d;
    --festival-glow: rgba(130, 54, 153, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/halloween.png');
}

body.web-theme-womensday {
    --festival-accent: #f3c9d6;
    --festival-accent-soft: rgba(243, 201, 214, .2);
    --festival-dark: #24101c;
    --festival-glow: rgba(184, 108, 130, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/womens-day.png');
}

body.web-theme-reunification {
    --festival-accent: #f1c15b;
    --festival-accent-soft: rgba(241, 193, 91, .2);
    --festival-dark: #250806;
    --festival-glow: rgba(190, 45, 28, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/reunification-labor.png');
}

body.web-theme-nationalday {
    --festival-accent: #ffda62;
    --festival-accent-soft: rgba(255, 218, 98, .2);
    --festival-dark: #280505;
    --festival-glow: rgba(193, 39, 45, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/national-day.png');
}

body.web-theme-vietnamesewomensday {
    --festival-accent: #e8bd78;
    --festival-accent-soft: rgba(232, 189, 120, .2);
    --festival-dark: #24100f;
    --festival-glow: rgba(163, 64, 54, .3);
    --festival-bg-image: url('/static/assets/imgs/themes/vietnamese-womens-day.png');
}

body.web-theme-teachersday {
    --festival-accent: #e2c47a;
    --festival-accent-soft: rgba(226, 196, 122, .18);
    --festival-dark: #121812;
    --festival-glow: rgba(139, 107, 45, .28);
    --festival-bg-image: url('/static/assets/imgs/themes/teachers-day.png');
}

/* Keep the player account dashboard in the same palette as the active site theme. */
body.account-page[class*="web-theme-"] {
    --cyan: color-mix(in srgb, var(--festival-accent) 82%, #0891b2);
    --cyan-bright: var(--festival-accent);
    --cyan-dark: color-mix(in srgb, var(--festival-dark) 78%, var(--festival-accent));
    --teal-glow: var(--festival-glow);
    --line: color-mix(in srgb, var(--festival-accent) 24%, var(--festival-dark));
    --line-cyan: color-mix(in srgb, var(--festival-accent) 42%, transparent);
    --gold: color-mix(in srgb, var(--festival-accent) 76%, #f59e0b);
    --gold-light: color-mix(in srgb, var(--festival-accent) 72%, #fff4b8);
    --panel: color-mix(in srgb, var(--festival-dark) 90%, var(--festival-accent));
    --panel-soft: color-mix(in srgb, var(--festival-dark) 82%, var(--festival-accent));
}

body[class*="web-theme-"] footer {
    background:
        radial-gradient(ellipse at 50% 28%, var(--festival-accent-soft) 0%, transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--festival-dark) 40%, transparent), var(--festival-dark) 92%),
        var(--festival-bg-image) center 72% / cover no-repeat !important;
    border-top-color: color-mix(in srgb, var(--festival-accent) 54%, transparent) !important;
    box-shadow: inset 0 14px 34px var(--festival-accent-soft), 0 -1px 18px var(--festival-glow) !important;
}

body[class*="web-theme-"] footer::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--festival-accent) 68%, transparent), transparent) !important;
    box-shadow: 0 0 12px var(--festival-glow) !important;
}

body[class*="web-theme-"] footer::after {
    border-color: color-mix(in srgb, var(--festival-accent) 82%, white) !important;
    background: color-mix(in srgb, var(--festival-accent) 66%, var(--festival-dark)) !important;
    box-shadow: 0 0 16px var(--festival-glow) !important;
}

body[class*="web-theme-"] footer p.Intro {
    color: color-mix(in srgb, var(--festival-accent) 28%, #f4f7f6) !important;
    text-shadow: 0 1px 3px #000, 0 0 10px var(--festival-glow) !important;
}

body[class*="web-theme-"] footer p.Intro img {
    filter: drop-shadow(0 0 18px var(--festival-glow)) !important;
}

body.web-theme-default.wrapper-body,
body.web-theme-default.auth-page,
body.web-theme-default.account-page {
    background:
        radial-gradient(ellipse at 50% 16%, rgba(92, 232, 224, .16), transparent 36%),
        linear-gradient(rgba(2, 17, 23, .12), rgba(3, 16, 22, .64)),
        url('/static/assets/imgs/bg_home_huyenanh.png') top center / cover fixed no-repeat !important;
}

body.web-theme-alphatest.wrapper-body,
body.web-theme-alphatest.auth-page,
body.web-theme-alphatest.account-page {
    background:
        radial-gradient(circle at 24% 12%, rgba(96, 171, 255, .2), transparent 27%),
        linear-gradient(rgba(5, 11, 35, .24), rgba(5, 9, 27, .74)),
        var(--festival-bg-image) top center / cover fixed no-repeat !important;
}

body.web-theme-openserver.wrapper-body,
body.web-theme-openserver.auth-page,
body.web-theme-openserver.account-page {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 207, 102, .18), transparent 27%),
        linear-gradient(rgba(52, 10, 7, .16), rgba(29, 5, 4, .7)),
        var(--festival-bg-image) top center / cover fixed no-repeat !important;
}

body.web-theme-vietnamchampion.wrapper-body,
body.web-theme-vietnamchampion.auth-page,
body.web-theme-vietnamchampion.account-page {
    background:
        radial-gradient(ellipse at 50% 6%, rgba(255, 229, 92, .34), transparent 23%),
        radial-gradient(circle at 12% 19%, rgba(255, 58, 42, .25), transparent 24%),
        radial-gradient(circle at 88% 19%, rgba(255, 58, 42, .25), transparent 24%),
        linear-gradient(rgba(80, 3, 4, .18), rgba(43, 2, 3, .76)),
        var(--festival-bg-image) center top / cover fixed no-repeat !important;
}

body.web-theme-vietnamchampion .nav__logo,
body.web-theme-vietnamchampion .auth-logo img,
body.web-theme-vietnamchampion footer img {
    filter: drop-shadow(0 0 13px rgba(255, 223, 69, .78)) drop-shadow(0 0 30px rgba(218, 37, 29, .6)) !important;
}

body.web-theme-vietnamchampion header {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.web-theme-vietnamchampion .header {
    background-image: linear-gradient(90deg, transparent, rgba(110, 3, 5, .34), transparent) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.web-theme-vietnamchampion .nav,
body.web-theme-vietnamchampion .nav__menu,
body.web-theme-vietnamchampion .nav__list {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.web-theme-vietnamchampion .nav__item a:hover,
body.web-theme-vietnamchampion .post__button.post__active {
    color: #ffdf45 !important;
    text-shadow: 0 0 10px rgba(255, 223, 69, .7);
}

body.web-theme-vietnamchampion .web-theme-welcome-banner {
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
    background: linear-gradient(90deg, transparent, rgba(76, 2, 3, .58) 15% 85%, transparent);
}

body:is(.web-theme-newyear, .web-theme-partyfounding, .web-theme-valentine, .web-theme-doctorsday, .web-theme-youthday, .web-theme-hungkings, .web-theme-dienbien, .web-theme-hochiminh, .web-theme-childrensday, .web-theme-dragonboat, .web-theme-familyday, .web-theme-warinvalids, .web-theme-vulan, .web-theme-capitalliberation, .web-theme-armyday):is(.wrapper-body, .auth-page, .account-page) {
    background:
        radial-gradient(circle at 50% 12%, var(--festival-accent-soft), transparent 28%),
        linear-gradient(color-mix(in srgb, var(--festival-dark) 18%, transparent), color-mix(in srgb, var(--festival-dark) 76%, transparent)),
        var(--festival-bg-image) top center / cover fixed no-repeat !important;
}

body.web-theme-tet.wrapper-body,
body.web-theme-tet.auth-page,
body.web-theme-tet.account-page {
    background:
        linear-gradient(rgba(44, 4, 5, .34), rgba(26, 3, 4, .77)),
        url('/static/assets/imgs/themes/tet.png') top center / cover fixed no-repeat !important;
}

body.web-theme-midautumn.wrapper-body,
body.web-theme-midautumn.auth-page,
body.web-theme-midautumn.account-page {
    background:
        radial-gradient(circle at 20% 13%, rgba(255, 221, 142, .26), transparent 22%),
        linear-gradient(rgba(6, 12, 38, .28), rgba(7, 10, 28, .75)),
        url('/static/assets/imgs/themes/midautumn.png') top center / cover fixed no-repeat !important;
}

body.web-theme-christmas.wrapper-body,
body.web-theme-christmas.auth-page,
body.web-theme-christmas.account-page {
    background:
        linear-gradient(rgba(2, 22, 30, .32), rgba(3, 14, 23, .78)),
        url('/static/assets/imgs/themes/christmas.png') top center / cover fixed no-repeat !important;
}

body.web-theme-halloween.wrapper-body,
body.web-theme-halloween.auth-page,
body.web-theme-halloween.account-page {
    background:
        radial-gradient(circle at 82% 16%, rgba(241, 136, 53, .18), transparent 21%),
        linear-gradient(rgba(27, 8, 38, .3), rgba(12, 5, 18, .8)),
        url('/static/assets/imgs/themes/halloween.png') top center / cover fixed no-repeat !important;
}

body.web-theme-womensday.wrapper-body,
body.web-theme-womensday.auth-page,
body.web-theme-womensday.account-page {
    background:
        radial-gradient(circle at 24% 18%, rgba(245, 217, 213, .16), transparent 25%),
        linear-gradient(rgba(40, 17, 29, .24), rgba(28, 10, 20, .72)),
        url('/static/assets/imgs/themes/womens-day.png') center / cover fixed no-repeat !important;
}

body.web-theme-reunification.wrapper-body,
body.web-theme-reunification.auth-page,
body.web-theme-reunification.account-page {
    background:
        linear-gradient(rgba(50, 13, 8, .2), rgba(31, 6, 5, .72)),
        url('/static/assets/imgs/themes/reunification-labor.png') center / cover fixed no-repeat !important;
}

body.web-theme-nationalday.wrapper-body,
body.web-theme-nationalday.auth-page,
body.web-theme-nationalday.account-page {
    background:
        radial-gradient(circle at 72% 16%, rgba(255, 218, 98, .14), transparent 24%),
        linear-gradient(rgba(55, 6, 7, .22), rgba(31, 4, 5, .74)),
        url('/static/assets/imgs/themes/national-day.png') center / cover fixed no-repeat !important;
}

body.web-theme-vietnamesewomensday.wrapper-body,
body.web-theme-vietnamesewomensday.auth-page,
body.web-theme-vietnamesewomensday.account-page {
    background:
        linear-gradient(rgba(45, 20, 18, .22), rgba(30, 10, 9, .72)),
        url('/static/assets/imgs/themes/vietnamese-womens-day.png') center / cover fixed no-repeat !important;
}

body.web-theme-teachersday.wrapper-body,
body.web-theme-teachersday.auth-page,
body.web-theme-teachersday.account-page {
    background:
        radial-gradient(circle at 66% 18%, rgba(226, 196, 122, .13), transparent 24%),
        linear-gradient(rgba(17, 24, 18, .2), rgba(10, 15, 12, .74)),
        url('/static/assets/imgs/themes/teachers-day.png') center / cover fixed no-repeat !important;
}

body[class*="web-theme-"]::before {
    background:
        radial-gradient(circle at 18% 23%, var(--festival-glow), transparent 28%),
        radial-gradient(circle at 82% 34%, var(--festival-accent-soft), transparent 30%),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--festival-dark) 74%, transparent)) !important;
}

body[class*="web-theme-"] .header,
body[class*="web-theme-"] .auth-main {
    border-color: color-mix(in srgb, var(--festival-accent) 40%, transparent) !important;
}

body[class*="web-theme-"] .auth-main {
    background:
        radial-gradient(circle at 24% 28%, var(--festival-accent-soft), transparent 39%),
        linear-gradient(135deg, color-mix(in srgb, var(--festival-dark) 88%, transparent), rgba(2, 18, 24, .82)) !important;
    box-shadow: inset 18px 0 55px rgba(1, 10, 15, .42), -12px 0 42px var(--festival-glow) !important;
}

body[class*="web-theme-"] .auth-nav a.is-active,
body[class*="web-theme-"] .eyebrow,
body[class*="web-theme-"] .field span,
body[class*="web-theme-"] .home-link:hover {
    color: var(--festival-accent) !important;
}

body[class*="web-theme-"] .auth-nav a.is-active,
body[class*="web-theme-"] .field input:focus {
    border-color: var(--festival-accent) !important;
}

body[class*="web-theme-"] .btn-submit {
    border-color: var(--festival-accent) !important;
    background: linear-gradient(105deg, color-mix(in srgb, var(--festival-dark) 65%, #111827), color-mix(in srgb, var(--festival-accent) 72%, #0f766e), color-mix(in srgb, var(--festival-dark) 65%, #111827)) !important;
}

body[class*="web-theme-"] .detail-content,
body[class*="web-theme-"] .post__content,
body[class*="web-theme-"] .daily-inner {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--festival-accent) 16%, transparent), 0 18px 52px rgba(0, 0, 0, .2);
}

.web-theme-effect-layer {
    position: fixed;
    z-index: 6;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.web-theme-welcome-banner {
    position: fixed;
    z-index: 20;
    top: 44px;
    left: 0;
    width: 100%;
    height: 38px;
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid color-mix(in srgb, var(--festival-accent) 46%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--festival-accent) 34%, transparent);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--festival-dark) 70%, transparent) 12% 88%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}

.web-theme-welcome-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease;
}

.web-theme-welcome-track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 200%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.web-theme-welcome-banner.is-visible .web-theme-welcome-track {
    animation: festivalMarquee 12s linear 1;
}

.web-theme-welcome-track span {
    min-width: 100vw;
    padding: 0 72px;
    color: var(--festival-accent);
    font-family: "Noto Serif", "Times New Roman", "Segoe UI", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .025em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000, 0 0 12px var(--festival-glow);
}

.web-theme-welcome-track span::before,
.web-theme-welcome-track span::after {
    content: "◆";
    display: inline-block;
    margin: 0 18px;
    color: color-mix(in srgb, var(--festival-accent) 78%, white);
    font-size: .58em;
    vertical-align: .16em;
    text-shadow: 0 0 8px var(--festival-glow);
}

.web-theme-particle {
    position: absolute;
    top: -8vh;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    opacity: var(--opacity);
    animation: festivalFall var(--duration) linear var(--delay) infinite;
}

.web-theme-effect-layer[data-effect="petals"] .web-theme-particle {
    border-radius: 80% 0 80% 0;
    background: linear-gradient(135deg, #ffd0d8, #d94b66 68%, #8f1832);
    box-shadow: 0 0 5px rgba(255, 158, 179, .42);
}

.web-theme-effect-layer[data-effect="fireflies"] .web-theme-particle {
    top: var(--y);
    border-radius: 50%;
    background: #ffe7a0;
    box-shadow: 0 0 8px 2px rgba(255, 190, 77, .72);
    animation-name: festivalFloat;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="snow"] .web-theme-particle {
    border-radius: 50%;
    background: rgba(242, 252, 255, .94);
    box-shadow: 0 0 5px rgba(185, 237, 255, .7);
}

.web-theme-effect-layer[data-effect="embers"] .web-theme-particle {
    border-radius: 50% 50% 50% 0;
    background: #ff9c43;
    box-shadow: 0 0 9px 2px rgba(255, 98, 33, .74);
    animation-name: festivalRise;
}

.web-theme-effect-layer[data-effect="spirit"] .web-theme-particle {
    top: var(--y);
    border-radius: 50%;
    background: #8df7ef;
    box-shadow: 0 0 9px 3px rgba(74, 232, 226, .66);
    animation-name: festivalFloat;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="sparkles"] .web-theme-particle {
    top: var(--y);
    border-radius: 1px;
    background: #fff4c7;
    box-shadow: 0 0 7px 2px color-mix(in srgb, var(--festival-accent) 72%, white);
    animation-name: festivalTwinkle;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="mist"] {
    z-index: 5;
    filter: blur(18px);
}

.web-theme-effect-layer[data-effect="mist"] .web-theme-particle {
    top: auto;
    bottom: var(--y);
    width: var(--size);
    height: calc(var(--size) * .28);
    border-radius: 50%;
    opacity: var(--opacity);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--festival-accent) 22%, white), transparent 68%);
    animation-name: festivalMist;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="lanterns"] .web-theme-particle {
    width: calc(var(--size) * .72);
    height: var(--size);
    border: 1px solid color-mix(in srgb, var(--festival-accent) 72%, #8e2f18);
    border-radius: 44% 44% 36% 36%;
    background:
        linear-gradient(90deg, transparent 42%, rgba(255, 238, 171, .62) 48% 52%, transparent 58%),
        radial-gradient(circle at 50% 42%, #fff4b0, #e86b32 48%, #7b1720 78%);
    box-shadow: 0 0 12px rgba(255, 145, 58, .72), inset 0 0 4px rgba(255, 245, 190, .7);
    animation-name: festivalLantern;
    transform-origin: 50% -18px;
}

.web-theme-effect-layer[data-effect="lanterns"] .web-theme-particle::before,
.web-theme-effect-layer[data-effect="lanterns"] .web-theme-particle::after {
    content: "";
    position: absolute;
    left: 16%;
    width: 68%;
    height: 2px;
    border-radius: 2px;
    background: #d6a74b;
}

.web-theme-effect-layer[data-effect="lanterns"] .web-theme-particle::before { top: -3px; }
.web-theme-effect-layer[data-effect="lanterns"] .web-theme-particle::after { bottom: -3px; }

.web-theme-effect-layer[data-effect="leaves"] .web-theme-particle {
    border-radius: 90% 0 72% 14%;
    background: linear-gradient(135deg, #f5c75f, #bd4d29 58%, #6e1820);
    box-shadow: 0 0 5px rgba(232, 139, 56, .35);
    animation-name: festivalLeafFall;
}

.web-theme-effect-layer[data-effect="butterflies"] .web-theme-particle {
    top: var(--y);
    width: var(--size);
    height: calc(var(--size) * .7);
    background: transparent;
    animation-name: festivalButterflyFlight;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="butterflies"] .web-theme-particle::before,
.web-theme-effect-layer[data-effect="butterflies"] .web-theme-particle::after {
    content: "";
    position: absolute;
    top: 0;
    width: 52%;
    height: 82%;
    background: linear-gradient(145deg, #fff2b1, var(--festival-accent));
    box-shadow: 0 0 8px var(--festival-glow);
    animation: festivalWing .72s ease-in-out infinite alternate;
}

.web-theme-effect-layer[data-effect="butterflies"] .web-theme-particle::before {
    right: 48%;
    border-radius: 82% 18% 68% 32%;
    transform-origin: right center;
}

.web-theme-effect-layer[data-effect="butterflies"] .web-theme-particle::after {
    left: 48%;
    border-radius: 18% 82% 32% 68%;
    transform-origin: left center;
    animation-delay: -.36s;
}

.web-theme-effect-layer[data-effect="meteors"] .web-theme-particle {
    top: var(--y);
    left: -18vw;
    width: calc(var(--size) * 34);
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--festival-accent) 72%, white);
    box-shadow: 0 0 8px var(--festival-accent);
    transform: rotate(-14deg);
    animation-name: festivalMeteor;
    animation-timing-function: ease-in;
}

.web-theme-effect-layer[data-effect="moonbeams"] {
    z-index: 4;
    mix-blend-mode: screen;
}

.web-theme-effect-layer[data-effect="moonbeams"] .web-theme-particle {
    top: -18vh;
    width: var(--size);
    height: 126vh;
    opacity: calc(var(--opacity) * .34);
    background: linear-gradient(180deg, color-mix(in srgb, var(--festival-accent) 32%, white), transparent 72%);
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    filter: blur(12px);
    animation-name: festivalMoonbeam;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="clouds"] {
    z-index: 5;
    filter: blur(5px);
}

.web-theme-effect-layer[data-effect="clouds"] .web-theme-particle {
    top: var(--y);
    left: -30vw;
    width: var(--size);
    height: calc(var(--size) * .32);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 22% 64%, color-mix(in srgb, var(--festival-accent) 14%, white), transparent 46%),
        radial-gradient(ellipse at 52% 38%, color-mix(in srgb, var(--festival-accent) 18%, white), transparent 51%),
        radial-gradient(ellipse at 78% 68%, color-mix(in srgb, var(--festival-accent) 13%, white), transparent 47%);
    animation-name: festivalCloudDrift;
    animation-timing-function: linear;
}

.web-theme-effect-layer[data-effect="goldrain"] .web-theme-particle {
    width: 2px;
    height: calc(var(--size) * 4);
    border-radius: 999px;
    background: linear-gradient(180deg, #fff7c8, var(--festival-accent), transparent);
    box-shadow: 0 0 5px color-mix(in srgb, var(--festival-accent) 76%, white);
    animation-name: festivalGoldRain;
}

.web-theme-effect-layer[data-effect="runes"] .web-theme-particle {
    top: var(--y);
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--festival-accent) 72%, white);
    border-radius: 50%;
    color: var(--festival-accent);
    box-shadow: 0 0 12px var(--festival-glow), inset 0 0 9px var(--festival-glow);
    animation-name: festivalRune;
    animation-timing-function: ease-in-out;
}
.web-theme-effect-layer[data-effect="runes"] .web-theme-particle::before { content: "✦"; font-size: .55em; }

.web-theme-effect-layer[data-effect="lightning"] { z-index: 5; mix-blend-mode: screen; }
.web-theme-effect-layer[data-effect="lightning"] .web-theme-particle {
    top: calc(var(--y) - 30vh);
    width: calc(var(--size) * .18);
    height: var(--size);
    background: linear-gradient(90deg, transparent, #fff 42% 58%, var(--festival-accent) 60%, transparent);
    clip-path: polygon(48% 0, 75% 0, 54% 35%, 78% 35%, 30% 100%, 43% 55%, 19% 55%);
    filter: drop-shadow(0 0 8px var(--festival-accent));
    animation-name: festivalLightning;
    animation-timing-function: steps(1, end);
}

.web-theme-effect-layer[data-effect="feathers"] .web-theme-particle {
    width: calc(var(--size) * .45);
    height: var(--size);
    border-radius: 95% 12% 95% 12%;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.92) 48% 58%, color-mix(in srgb, var(--festival-accent) 42%, white) 64%, transparent 88%);
    filter: drop-shadow(0 0 4px var(--festival-glow));
    animation-name: festivalFeather;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="bubbles"] .web-theme-particle {
    top: auto;
    bottom: -10vh;
    border: 1px solid color-mix(in srgb, var(--festival-accent) 62%, white);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.72) 0 8%, transparent 13%), radial-gradient(circle, transparent 44%, var(--festival-accent-soft));
    box-shadow: 0 0 7px var(--festival-glow);
    animation-name: festivalBubble;
    animation-timing-function: ease-in;
}

.web-theme-effect-layer[data-effect="swordrain"] .web-theme-particle {
    width: 2px;
    height: calc(var(--size) * 3.4);
    border-radius: 80% 80% 30% 30%;
    background: linear-gradient(180deg, #fff, var(--festival-accent) 35%, transparent);
    box-shadow: 0 0 8px var(--festival-accent);
    transform: rotate(28deg);
    animation-name: festivalSwordRain;
    animation-timing-function: linear;
}

.web-theme-effect-layer[data-effect="lotuses"] .web-theme-particle {
    top: var(--y);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 10%, var(--festival-accent) 12% 24%, transparent 27%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--festival-accent) 68%, white) 0 12deg, transparent 13deg 45deg);
    filter: drop-shadow(0 0 9px var(--festival-accent));
    animation-name: festivalLotus;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="fireworks"] { z-index: 8; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle {
    top: var(--y);
    width: calc(var(--size) * .62);
    height: calc(var(--size) * 1.45);
    border-radius: 1px;
    background: #ffd84d;
    box-shadow: 0 0 4px rgba(255,255,255,.38);
    animation-name: festivalFirework;
    animation-timing-function: cubic-bezier(.12,.72,.28,1);
}
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n+1) { background: #ff4d6d; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n+2) { background: #ffd84d; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n+3) { background: #36d9c4; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n+4) { background: #65a7ff; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n+5) { background: #b77cff; border-radius: 50%; }
.web-theme-effect-layer[data-effect="fireworks"] .web-theme-particle:nth-child(6n) { background: #ff8a3d; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.web-theme-effect-layer[data-effect="aurora"] { z-index: 4; mix-blend-mode: screen; filter: blur(14px); }
.web-theme-effect-layer[data-effect="aurora"] .web-theme-particle {
    top: calc(var(--y) * .45);
    left: -18vw;
    width: var(--size);
    height: 42vh;
    opacity: calc(var(--opacity) * .38);
    border-radius: 50%;
    background: linear-gradient(120deg, transparent 8%, var(--festival-accent) 45%, #8b5cf6 68%, transparent 88%);
    clip-path: polygon(0 35%, 18% 18%, 38% 46%, 58% 20%, 78% 52%, 100% 25%, 100% 62%, 78% 82%, 56% 55%, 36% 78%, 17% 48%, 0 66%);
    animation-name: festivalAurora;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="rain"] .web-theme-particle {
    width: 1px;
    height: calc(var(--size) * 3.2);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--festival-accent) 58%, white));
    transform: rotate(12deg);
    animation-name: festivalRain;
    animation-timing-function: linear;
}

.web-theme-effect-layer[data-effect="icecrystals"] .web-theme-particle {
    background: linear-gradient(45deg, transparent 38%, #e9fbff 39% 61%, transparent 62%), linear-gradient(-45deg, transparent 38%, var(--festival-accent) 39% 61%, transparent 62%);
    clip-path: polygon(50% 0, 64% 35%, 100% 50%, 64% 65%, 50% 100%, 36% 65%, 0 50%, 36% 35%);
    filter: drop-shadow(0 0 5px #b9f3ff);
    animation-name: festivalIceCrystal;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="coins"] .web-theme-particle {
    border: 1px solid #ffe49a;
    border-radius: 50%;
    background: radial-gradient(circle, #7e4c09 0 18%, #ffd66b 20% 48%, #b86b0b 52% 68%, #ffe7a0 72%);
    box-shadow: 0 0 7px rgba(255, 190, 55, .62);
    animation-name: festivalCoin;
    animation-timing-function: ease-in;
}

.web-theme-effect-layer[data-effect="inkclouds"] { z-index: 5; filter: blur(9px); mix-blend-mode: multiply; }
.web-theme-effect-layer[data-effect="inkclouds"] .web-theme-particle {
    top: var(--y);
    left: -28vw;
    width: var(--size);
    height: calc(var(--size) * .38);
    border-radius: 50%;
    background: radial-gradient(ellipse at 25% 55%, rgba(5,8,18,.72), transparent 48%), radial-gradient(ellipse at 55% 38%, rgba(10,13,28,.78), transparent 52%), radial-gradient(ellipse at 82% 63%, rgba(5,8,18,.68), transparent 48%);
    animation-name: festivalInkCloud;
    animation-timing-function: linear;
}

.web-theme-effect-layer[data-effect="ripples"] .web-theme-particle {
    top: var(--y);
    border: 1px solid color-mix(in srgb, var(--festival-accent) 76%, white);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--festival-glow), inset 0 0 10px var(--festival-glow);
    animation-name: festivalRipple;
    animation-timing-function: ease-out;
}

.web-theme-effect-layer[data-effect="phoenix"] .web-theme-particle {
    width: calc(var(--size) * .42);
    height: var(--size);
    border-radius: 96% 8% 88% 12%;
    background: linear-gradient(155deg, #fff1a8 0 18%, #ff9f32 38%, #d82e25 68%, transparent 72%);
    filter: drop-shadow(0 0 7px rgba(255, 94, 32, .72));
    animation-name: festivalPhoenixFeather;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="dragonorbs"] .web-theme-particle {
    top: var(--y);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 8%, #96fff4 14%, var(--festival-accent) 42%, transparent 72%);
    box-shadow: 0 0 14px 3px var(--festival-accent), 0 0 28px var(--festival-glow);
    animation-name: festivalDragonOrb;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="wind"] .web-theme-particle {
    top: var(--y);
    left: -24vw;
    width: var(--size);
    height: 18px;
    border-top: 1px solid color-mix(in srgb, var(--festival-accent) 64%, white);
    border-radius: 50%;
    box-shadow: 0 -5px 9px -7px var(--festival-accent);
    animation-name: festivalWind;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="talismans"] .web-theme-particle {
    width: calc(var(--size) * .58);
    height: var(--size);
    border: 1px solid #ffe08a;
    border-radius: 1px;
    background: linear-gradient(#f8d66d, #c99125);
    box-shadow: 0 0 7px rgba(255, 197, 69, .56);
    animation-name: festivalTalisman;
    animation-timing-function: ease-in-out;
}
.web-theme-effect-layer[data-effect="talismans"] .web-theme-particle::before { content: "〆"; display: grid; height: 100%; place-items: center; color: #7b241c; font-size: .65em; font-weight: 900; }

.web-theme-effect-layer[data-effect="bells"] .web-theme-particle {
    width: var(--size);
    height: calc(var(--size) * .82);
    border-radius: 50% 50% 22% 22%;
    background: radial-gradient(circle at 35% 28%, #fff2a8, #d89b24 48%, #784613 76%);
    box-shadow: 0 0 8px rgba(255, 201, 86, .58);
    animation-name: festivalBell;
    transform-origin: 50% -12px;
}
.web-theme-effect-layer[data-effect="bells"] .web-theme-particle::after { content: ""; position: absolute; left: 42%; bottom: -20%; width: 16%; height: 28%; border-radius: 50%; background: #ffe49a; }

.web-theme-effect-layer[data-effect="cranes"] .web-theme-particle {
    top: var(--y);
    left: -18vw;
    width: var(--size);
    height: calc(var(--size) * .45);
    background: linear-gradient(155deg, transparent 35%, rgba(255,255,255,.94) 37% 55%, transparent 57%);
    clip-path: polygon(0 58%, 32% 12%, 48% 46%, 58% 40%, 100% 0, 68% 64%, 52% 72%, 40% 60%);
    filter: drop-shadow(0 0 6px var(--festival-glow));
    animation-name: festivalCrane;
    animation-timing-function: linear;
}

.web-theme-effect-layer[data-effect="ghostflames"] .web-theme-particle {
    top: var(--y);
    border-radius: 55% 45% 58% 42%;
    background: radial-gradient(circle at 50% 68%, #fff 0 8%, #8ff9ff 15%, #6d5cff 42%, transparent 72%);
    filter: drop-shadow(0 0 12px #44dfff);
    clip-path: polygon(50% 0, 67% 30%, 88% 50%, 70% 100%, 30% 100%, 12% 50%, 35% 33%);
    animation-name: festivalGhostFlame;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="sunrays"] { z-index: 4; mix-blend-mode: screen; }
.web-theme-effect-layer[data-effect="sunrays"] .web-theme-particle {
    top: -20vh;
    width: var(--size);
    height: 130vh;
    opacity: calc(var(--opacity) * .38);
    background: linear-gradient(180deg, rgba(255,241,167,.72), rgba(255,188,67,.16) 48%, transparent 82%);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    filter: blur(7px);
    animation-name: festivalSunray;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="galaxies"] { z-index: 4; mix-blend-mode: screen; filter: blur(2px); }
.web-theme-effect-layer[data-effect="galaxies"] .web-theme-particle {
    top: var(--y);
    width: var(--size);
    height: calc(var(--size) * .42);
    border-radius: 50%;
    background: radial-gradient(ellipse, #fff 0 1%, var(--festival-accent) 3%, transparent 8%), repeating-radial-gradient(ellipse, transparent 0 10%, color-mix(in srgb, var(--festival-accent) 44%, #8b5cf6) 12%, transparent 15% 23%);
    box-shadow: 0 0 28px var(--festival-glow);
    animation-name: festivalGalaxy;
    animation-timing-function: ease-in-out;
}

.web-theme-effect-layer[data-effect="redpackets"] .web-theme-particle {
    width: calc(var(--size) * .68);
    height: var(--size);
    border: 1px solid #f6c65b;
    border-radius: 2px;
    background: linear-gradient(145deg, #df3b2e, #8e1017);
    box-shadow: 0 0 7px rgba(255, 66, 35, .48);
    animation-name: festivalRedPacket;
    animation-timing-function: ease-in-out;
}
.web-theme-effect-layer[data-effect="redpackets"] .web-theme-particle::before { content: "福"; display: grid; height: 100%; place-items: center; color: #ffd96b; font-size: .52em; font-weight: 900; }

.web-theme-effect-layer[data-effect="shockwaves"] .web-theme-particle {
    top: var(--y);
    border: 2px solid color-mix(in srgb, var(--festival-accent) 68%, white);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--festival-accent), inset 0 0 12px var(--festival-glow);
    animation-name: festivalShockwave;
    animation-timing-function: cubic-bezier(.12,.7,.2,1);
}

.web-theme-effect-layer[data-effect="skyrockets"] { z-index: 8; mix-blend-mode: screen; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle {
    --rocket-color: #ffd86b;
    top: auto;
    bottom: -18vh;
    width: var(--size);
    height: var(--size);
    opacity: 0;
    background: transparent;
    animation-name: festivalRocketFlight;
    animation-timing-function: cubic-bezier(.2,.72,.3,1);
}
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle:nth-child(5n+1) { --rocket-color: #ff5c75; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle:nth-child(5n+2) { --rocket-color: #ffd85c; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle:nth-child(5n+3) { --rocket-color: #55e7dd; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle:nth-child(5n+4) { --rocket-color: #72a8ff; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle:nth-child(5n) { --rocket-color: #c583ff; }
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle::before {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    bottom: 48%;
    width: 4px;
    height: 76px;
    border-radius: 999px;
    background: linear-gradient(0deg, transparent, var(--rocket-color) 58%, #fff);
    filter: drop-shadow(0 0 7px var(--rocket-color));
    transform-origin: 50% 100%;
    animation: festivalRocketTrail var(--duration) ease-out var(--delay) infinite;
}
.web-theme-effect-layer[data-effect="skyrockets"] .web-theme-particle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0 3%, var(--rocket-color) 4% 6%, transparent 7%),
        repeating-conic-gradient(from 0deg, transparent 0 6deg, #fff 7deg 8deg, var(--rocket-color) 9deg 11deg, transparent 12deg 24deg);
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--rocket-color));
    animation: festivalRocketBurst var(--duration) ease-out var(--delay) infinite;
}

.web-theme-effect-layer[data-effect="heavengate"] { z-index: 5; mix-blend-mode: screen; }
.web-theme-effect-layer[data-effect="heavengate"] .web-theme-particle {
    top: 50%; left: 50%; width: var(--size); height: calc(var(--size) * 1.28);
    border: 3px solid var(--festival-accent); border-radius: 50% 50% 12% 12%;
    background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--festival-accent) 26%, transparent), transparent 58%);
    box-shadow: 0 0 28px var(--festival-accent), inset 0 0 42px var(--festival-glow);
    animation-name: festivalHeavenGate; animation-timing-function: ease-in-out;
}
.web-theme-effect-layer[data-effect="heavengate"] .web-theme-particle::before { content:""; position:absolute; inset:7%; border:1px solid color-mix(in srgb,var(--festival-accent) 72%,white); border-radius:inherit; }

.web-theme-effect-layer[data-effect="dragonphoenix"] { z-index: 6; mix-blend-mode: screen; }
.web-theme-effect-layer[data-effect="dragonphoenix"] .web-theme-particle {
    top: 18%; left: -25vw; width: var(--size); height: calc(var(--size) * .22);
    border-radius: 50%; border-top: 5px solid var(--festival-accent);
    box-shadow: 0 -8px 18px var(--festival-glow);
    animation-name: festivalDragonPhoenix; animation-timing-function: ease-in-out;
}
.web-theme-effect-layer[data-effect="dragonphoenix"] .web-theme-particle:nth-child(2) { top: 34%; left: auto; right: -25vw; border-color:#ff9f43; animation-direction: reverse; }
.web-theme-effect-layer[data-effect="dragonphoenix"] .web-theme-particle::after { content:""; position:absolute; right:-7px; top:-12px; width:20px; height:20px; border:3px solid currentColor; border-radius:70% 30% 60% 40%; }

.web-theme-effect-layer[data-effect="swordformation"] .web-theme-particle {
    top: var(--y); left: var(--x); width: 3px; height: calc(var(--size) * 3.8);
    border-radius: 70% 70% 20% 20%; background:linear-gradient(#fff,var(--festival-accent) 45%,transparent);
    box-shadow:0 0 9px var(--festival-accent); animation-name:festivalSwordFormation; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="wardrums"] { z-index:7; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="wardrums"] .web-theme-particle {
    top:var(--y); border:4px double #e4b64f; border-radius:50%;
    box-shadow:0 0 18px rgba(231,181,68,.65), inset 0 0 16px rgba(231,181,68,.34);
    animation-name:festivalWarDrum; animation-timing-function:ease-out;
}

.web-theme-effect-layer[data-effect="rainbowclouds"] { z-index:4; filter:blur(7px); mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="rainbowclouds"] .web-theme-particle {
    top:var(--y); left:-30vw; width:var(--size); height:calc(var(--size) * .34); border-radius:50%;
    background:linear-gradient(90deg,rgba(255,91,91,.38),rgba(255,213,87,.42),rgba(83,226,198,.38),rgba(103,150,255,.4),rgba(190,111,255,.36));
    animation-name:festivalRainbowCloud; animation-timing-function:linear;
}

.web-theme-effect-layer[data-effect="skylanterns"] .web-theme-particle {
    top:auto; bottom:-12vh; width:calc(var(--size) * .68); height:var(--size); border-radius:45% 45% 25% 25%;
    border:1px solid #ffc75c; background:radial-gradient(circle at 50% 56%,#fff6b0,#ff9b36 45%,#9b2820 78%);
    box-shadow:0 0 15px rgba(255,157,58,.78); animation-name:festivalSkyLantern; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="lotusbloom"] { z-index:6; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="lotusbloom"] .web-theme-particle {
    top:auto; bottom:-4vh; width:var(--size); height:calc(var(--size) * .56); border-radius:50%;
    background:radial-gradient(ellipse at 50% 86%,#fff 0 7%,var(--festival-accent) 12%,transparent 23%),repeating-conic-gradient(from -15deg,transparent 0 13deg,color-mix(in srgb,var(--festival-accent) 68%,white) 14deg 25deg,transparent 26deg 45deg);
    filter:drop-shadow(0 0 14px var(--festival-accent)); animation-name:festivalLotusBloom; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="goldendragon"] { z-index:5; mix-blend-mode:screen; filter:blur(1px); }
.web-theme-effect-layer[data-effect="goldendragon"] .web-theme-particle {
    top:var(--y); left:-30vw; width:var(--size); height:calc(var(--size) * .18); border-radius:50%;
    border-top:7px solid #ffd45c; box-shadow:0 -5px 16px #ff9f2e; animation-name:festivalGoldenDragon; animation-timing-function:ease-in-out;
}
.web-theme-effect-layer[data-effect="goldendragon"] .web-theme-particle::after { content:""; position:absolute; right:-9px; top:-17px; width:28px; height:23px; border:4px solid #ffe28a; border-radius:65% 35% 60% 40%; transform:rotate(20deg); }

.web-theme-effect-layer[data-effect="portal"] { z-index:5; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="portal"] .web-theme-particle {
    top:50%; left:50%; width:var(--size); height:var(--size); border:5px dashed var(--festival-accent); border-radius:50%;
    background:radial-gradient(circle,transparent 42%,var(--festival-accent-soft) 45% 55%,transparent 59%);
    box-shadow:0 0 30px var(--festival-accent),inset 0 0 24px var(--festival-glow); animation-name:festivalPortal; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="swordwriting"] .web-theme-particle {
    top:var(--y); left:-20vw; width:var(--size); height:2px; border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--festival-accent) 55%,#fff); box-shadow:0 0 9px var(--festival-accent);
    animation-name:festivalSwordWriting; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="countdown"] { z-index:16; }
.web-theme-effect-layer[data-effect="countdown"] .web-theme-particle { top:50%; left:50%; width:var(--size); height:var(--size); opacity:0; animation-name:festivalCountdownGlow; animation-iteration-count:1; animation-fill-mode:forwards; }
.web-theme-effect-layer[data-effect="countdown"] .web-theme-particle::before {
    content:"3"; display:grid; width:100%; height:100%; place-items:center; color:#fff; font:900 clamp(72px,10vw,150px)/1 Georgia,serif;
    text-shadow:0 0 12px #fff,0 0 30px var(--festival-accent); animation:festivalCountdownText var(--duration) steps(1,end) var(--delay) 1 forwards;
}

.web-theme-effect-layer[data-effect="giftrain"] .web-theme-particle {
    width:var(--size); height:var(--size); border:2px solid #ffd86a; border-radius:3px;
    background:linear-gradient(90deg,transparent 42%,#ffd86a 43% 57%,transparent 58%),linear-gradient(#db3430,#8d1119);
    box-shadow:0 0 8px rgba(255,198,78,.6); animation-name:festivalGiftRain; animation-timing-function:ease-in-out;
}
.web-theme-effect-layer[data-effect="giftrain"] .web-theme-particle:nth-child(3n) { border-radius:45%; background:radial-gradient(circle,#ffe68b 0 18%,#d79a23 20% 58%,#80500e 62%); }

.web-theme-effect-layer[data-effect="mountainawakening"] { z-index:4; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="mountainawakening"] .web-theme-particle {
    top:auto; bottom:-15vh; width:var(--size); height:75vh; opacity:calc(var(--opacity) * .4);
    background:linear-gradient(0deg,var(--festival-accent),transparent 78%); clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);
    filter:blur(8px); animation-name:festivalMountainAwaken; animation-timing-function:ease-in-out;
}

.web-theme-effect-layer[data-effect="logoarrival"] { z-index:7; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="logoarrival"] .web-theme-particle {
    top:50%; left:50%; width:var(--size); height:var(--size); border-radius:50%; opacity:0;
    background:radial-gradient(circle,#fff 0 2%,var(--festival-accent) 4%,transparent 32%),repeating-conic-gradient(from 0deg,transparent 0 10deg,var(--festival-accent) 11deg 12deg,transparent 13deg 30deg);
    filter:drop-shadow(0 0 25px var(--festival-accent)); animation-name:festivalLogoArrival; animation-timing-function:ease-out; animation-iteration-count:1; animation-fill-mode:forwards;
}

.web-theme-effect-layer[data-effect="welcomeoverlay"] { z-index:18; }
.web-theme-effect-layer[data-effect="welcomeoverlay"] .web-theme-particle {
    position:fixed; inset:0; width:100%; height:100%; opacity:0;
    background:radial-gradient(circle at 50% 45%,var(--festival-accent-soft),rgba(2,8,15,.92) 62%);
    animation-name:festivalWelcomeOverlay; animation-timing-function:ease-in-out; animation-iteration-count:1; animation-fill-mode:forwards;
}
.web-theme-effect-layer[data-effect="welcomeoverlay"] .web-theme-particle::before { content:"CHÀO MỪNG ĐẠI HIỆP"; display:grid; width:100%; height:100%; place-items:center; color:#fff; font:800 clamp(30px,5vw,72px)/1.2 Georgia,serif; letter-spacing:.12em; text-align:center; text-shadow:0 0 14px #000,0 0 30px var(--festival-accent); }

/* Expanded atmospheric, battle and spectacle effects. */
.web-theme-effect-layer[data-effect="stardust"] .web-theme-particle { width:var(--size); height:var(--size); border-radius:50%; background:#fff; box-shadow:0 0 8px 2px var(--festival-accent); animation-name:festivalStarDrift; }
.web-theme-effect-layer[data-effect="stardust"] .web-theme-particle::after { content:""; position:absolute; right:100%; top:42%; width:calc(var(--size) * 7); height:1px; background:linear-gradient(90deg,transparent,var(--festival-accent)); }
.web-theme-effect-layer[data-effect="lightpillars"] { z-index:4; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="lightpillars"] .web-theme-particle { top:-15vh; width:var(--size); height:110vh; transform-origin:50% 0; background:linear-gradient(180deg,rgba(255,255,255,.65),var(--festival-accent-soft) 42%,transparent 86%); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); filter:blur(10px); animation-name:festivalLightPillar; }
.web-theme-effect-layer[data-effect="cloudsea"] { z-index:3; filter:blur(13px); }
.web-theme-effect-layer[data-effect="cloudsea"] .web-theme-particle { top:auto; bottom:-14vh; width:var(--size); height:calc(var(--size) * .42); border-radius:50%; background:radial-gradient(ellipse,#eefcff 0,rgba(190,225,235,.55) 35%,transparent 72%); animation-name:festivalCloudSea; }
.web-theme-effect-layer[data-effect="blossomstorm"] .web-theme-particle { width:var(--size); height:calc(var(--size) * .58); border-radius:80% 12% 80% 12%; background:linear-gradient(135deg,#fff0f4,#ff739f 70%); box-shadow:0 0 8px rgba(255,111,161,.45); animation-name:festivalBlossomStorm; }
.web-theme-effect-layer[data-effect="frostfog"] { z-index:5; mix-blend-mode:screen; filter:blur(2px); }
.web-theme-effect-layer[data-effect="frostfog"] .web-theme-particle { width:var(--size); height:var(--size); border:1px solid rgba(192,245,255,.72); border-radius:50%; background:radial-gradient(circle,transparent 35%,rgba(120,220,255,.18),transparent 72%); box-shadow:0 0 24px rgba(120,220,255,.32); animation-name:festivalFrostFog; }
.web-theme-effect-layer[data-effect="sandwind"] .web-theme-particle { width:calc(var(--size) * 9); height:max(1px,calc(var(--size) * .14)); border-radius:50%; background:linear-gradient(90deg,transparent,#f5c86a 45%,transparent); box-shadow:0 0 7px #c88832; animation-name:festivalSandWind; }
.web-theme-effect-layer[data-effect="spiritkoi"] .web-theme-particle { width:calc(var(--size) * 1.8); height:calc(var(--size) * .7); border-radius:70% 45% 55% 70%; border:2px solid color-mix(in srgb,var(--festival-accent) 80%,white); background:radial-gradient(circle at 68% 40%,#fff 0 3%,transparent 4%),linear-gradient(135deg,var(--festival-accent-soft),transparent); filter:drop-shadow(0 0 8px var(--festival-accent)); animation-name:festivalSpiritKoi; }
.web-theme-effect-layer[data-effect="spiritkoi"] .web-theme-particle::after { content:""; position:absolute; left:-36%; top:12%; width:45%; height:76%; border:2px solid var(--festival-accent); clip-path:polygon(100% 50%,0 0,18% 50%,0 100%); }
.web-theme-effect-layer[data-effect="peacockfeathers"] .web-theme-particle { width:calc(var(--size) * .46); height:var(--size); border-radius:70% 30% 65% 35%; background:radial-gradient(ellipse at 50% 25%,#13185d 0 11%,#27dfc7 13% 24%,#d8c65a 26% 35%,transparent 38%),linear-gradient(#38b6a6,#123a6e); filter:drop-shadow(0 0 7px #42e0cd); animation-name:festivalFeather; }
.web-theme-effect-layer[data-effect="floralaura"] .web-theme-particle { width:var(--size); height:var(--size); border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,134,183,.8) 0 9deg,transparent 10deg 30deg); -webkit-mask:radial-gradient(circle,transparent 0 35%,#000 37% 66%,transparent 68%); filter:drop-shadow(0 0 9px var(--festival-accent)); animation-name:festivalFloralAura; }
.web-theme-effect-layer[data-effect="qivortex"] { z-index:5; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="qivortex"] .web-theme-particle { width:var(--size); height:calc(var(--size) * .5); border:3px solid var(--festival-accent); border-left-color:transparent; border-radius:50%; box-shadow:0 0 16px var(--festival-accent),inset 0 0 13px var(--festival-accent-soft); animation-name:festivalQiVortex; }
.web-theme-effect-layer[data-effect="swordspiral"] .web-theme-particle { width:calc(var(--size) * .16); height:var(--size); background:linear-gradient(90deg,transparent,#fff 45%,var(--festival-accent) 65%,transparent); clip-path:polygon(50% 0,100% 72%,68% 72%,65% 100%,35% 100%,32% 72%,0 72%); filter:drop-shadow(0 0 7px var(--festival-accent)); animation-name:festivalSwordSpiral; }
.web-theme-effect-layer[data-effect="thunderseal"] { z-index:6; mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="thunderseal"] .web-theme-particle { width:var(--size); height:var(--size); border:2px solid #9be8ff; border-radius:50%; background:repeating-conic-gradient(from 10deg,transparent 0 20deg,#8edfff 21deg 23deg,transparent 24deg 45deg); -webkit-mask:radial-gradient(circle,transparent 0 27%,#000 29% 70%,transparent 72%); filter:drop-shadow(0 0 14px #75d8ff); animation-name:festivalThunderSeal; }
.web-theme-effect-layer[data-effect="chainblades"] .web-theme-particle { width:var(--size); height:8px; background:repeating-linear-gradient(90deg,#fff 0 7px,var(--festival-accent) 8px 14px,transparent 15px 20px); box-shadow:0 0 9px var(--festival-accent); transform-origin:0 50%; animation-name:festivalChainBlade; }
.web-theme-effect-layer[data-effect="silkribbons"] .web-theme-particle { width:var(--size); height:28px; border-top:8px solid #e34137; border-radius:50%; filter:drop-shadow(0 0 7px #ffb55d); animation-name:festivalSilkRibbon; }
.web-theme-effect-layer[data-effect="starconfetti"] .web-theme-particle { width:var(--size); height:var(--size); background:#ffd94f; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 35%); filter:drop-shadow(0 0 5px #ffce47); animation-name:festivalFirework; }
.web-theme-effect-layer[data-effect="victoryflags"] .web-theme-particle { width:var(--size); height:calc(var(--size) * .62); background:linear-gradient(135deg,#a91518,#ef4535 60%,#ffbf42); clip-path:polygon(0 0,100% 8%,76% 50%,100% 92%,0 100%); box-shadow:0 0 12px rgba(255,185,62,.6); animation-name:festivalVictoryFlag; }

.web-theme-effect-layer[data-effect="screencrack"],.web-theme-effect-layer[data-effect="bossarrival"],.web-theme-effect-layer[data-effect="eclipse"],.web-theme-effect-layer[data-effect="taichiformation"],.web-theme-effect-layer[data-effect="realmcollapse"] { z-index:17; }
.web-theme-effect-layer[data-effect="screencrack"] .web-theme-particle { position:fixed; top:50%; left:50%; width:min(78vw,var(--size)); height:min(78vw,var(--size)); opacity:0; background:repeating-conic-gradient(from 4deg,transparent 0 9deg,rgba(220,247,255,.95) 10deg 10.7deg,transparent 11deg 25deg); clip-path:polygon(48% 0,54% 44%,100% 30%,57% 50%,93% 87%,53% 56%,27% 100%,46% 54%,0 68%,43% 49%); filter:drop-shadow(0 0 10px #8eeaff); animation:festivalScreenCrack var(--duration) ease-out 1 forwards; }
.web-theme-effect-layer[data-effect="bossarrival"] .web-theme-particle { position:fixed; top:50%; left:50%; width:min(68vw,var(--size)); height:min(68vw,var(--size)); border-radius:50%; opacity:0; background:radial-gradient(circle,#000 0 23%,#560b18 26% 42%,#ff3c36 44% 46%,transparent 49%),repeating-conic-gradient(#ffba56 0 2deg,transparent 3deg 12deg); filter:drop-shadow(0 0 35px #e02b2b); animation:festivalBossArrival var(--duration) ease-in-out 1 forwards; }
.web-theme-effect-layer[data-effect="bossarrival"] .web-theme-particle::before { content:"BOSS GIÁNG LÂM"; position:absolute; inset:0; display:grid; place-items:center; color:#ffe4a3; font:900 clamp(24px,4vw,58px)/1 Georgia,serif; letter-spacing:.1em; text-shadow:0 3px 2px #000,0 0 18px #f22; }
.web-theme-effect-layer[data-effect="eclipse"] .web-theme-particle { position:fixed; top:34%; left:50%; width:min(48vw,var(--size)); height:min(48vw,var(--size)); border-radius:50%; opacity:0; background:#020306; box-shadow:0 0 12px 4px #fff7c0,0 0 34px 15px #ff7c2e,0 0 90px 42px rgba(170,20,12,.55); animation:festivalEclipse var(--duration) ease-in-out 1 forwards; }
.web-theme-effect-layer[data-effect="taichiformation"] { mix-blend-mode:screen; }
.web-theme-effect-layer[data-effect="taichiformation"] .web-theme-particle { position:fixed; top:62%; left:50%; width:min(76vw,var(--size)); height:min(76vw,var(--size)); border:2px solid var(--festival-accent); border-radius:50%; opacity:0; background:repeating-conic-gradient(from 0deg,var(--festival-accent-soft) 0 2deg,transparent 3deg 15deg),radial-gradient(circle,transparent 0 28%,var(--festival-accent-soft) 29% 31%,transparent 32% 46%,var(--festival-accent) 47% 48%,transparent 49%); filter:drop-shadow(0 0 18px var(--festival-accent)); animation:festivalTaichi var(--duration) ease-in-out 1 forwards; }
.web-theme-effect-layer[data-effect="realmcollapse"] .web-theme-particle { position:fixed; left:0; width:100vw; height:52vh; opacity:0; background:linear-gradient(180deg,rgba(3,5,16,.98),rgba(48,20,74,.82),transparent); animation:festivalRealmCollapse var(--duration) ease-in-out 1 forwards; }
.web-theme-effect-layer[data-effect="realmcollapse"] .web-theme-particle:nth-child(1) { top:0; }
.web-theme-effect-layer[data-effect="realmcollapse"] .web-theme-particle:nth-child(2) { top:auto; bottom:0; transform:rotate(180deg); }

@keyframes festivalFall {
    0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    46% { transform: translate3d(var(--drift), 48vh, 0) rotate(180deg); }
    100% { transform: translate3d(calc(var(--drift) * -.55), 112vh, 0) rotate(420deg); }
}

@keyframes festivalRise {
    0% { transform: translate3d(0, 112vh, 0) rotate(0deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), -12vh, 0) rotate(310deg); opacity: 0; }
}

@keyframes festivalFloat {
    0%, 100% { transform: translate3d(0, -4vh, 0) scale(.7); opacity: .18; }
    48% { transform: translate3d(var(--drift), 5vh, 0) scale(1.25); opacity: var(--opacity); }
}

@keyframes festivalTwinkle {
    0%, 100% { transform: translate3d(0, -2vh, 0) rotate(45deg) scale(.35); opacity: .1; }
    50% { transform: translate3d(var(--drift), 3vh, 0) rotate(135deg) scale(1.25); opacity: var(--opacity); }
}

@keyframes festivalMist {
    0%, 100% { transform: translate3d(-18vw, 0, 0) scale(.9); opacity: .08; }
    50% { transform: translate3d(34vw, -4vh, 0) scale(1.15); opacity: var(--opacity); }
}

@keyframes festivalLantern {
    0% { transform: translate3d(0, 110vh, 0) rotate(-8deg); opacity: 0; }
    14% { opacity: var(--opacity); }
    50% { transform: translate3d(var(--drift), 48vh, 0) rotate(8deg); }
    100% { transform: translate3d(calc(var(--drift) * -.45), -15vh, 0) rotate(-6deg); opacity: 0; }
}

@keyframes festivalLeafFall {
    0% { transform: translate3d(0, -12vh, 0) rotateX(0) rotateZ(0); }
    48% { transform: translate3d(var(--drift), 46vh, 0) rotateX(170deg) rotateZ(240deg); }
    100% { transform: translate3d(calc(var(--drift) * -.7), 112vh, 0) rotateX(340deg) rotateZ(520deg); }
}

@keyframes festivalButterflyFlight {
    0%, 100% { transform: translate3d(-9vw, -3vh, 0) rotate(-8deg) scale(.74); opacity: .18; }
    45% { transform: translate3d(calc(var(--drift) + 14vw), 5vh, 0) rotate(9deg) scale(1.08); opacity: var(--opacity); }
}

@keyframes festivalWing {
    from { transform: rotateY(18deg) rotateZ(-9deg); }
    to { transform: rotateY(72deg) rotateZ(8deg); }
}

@keyframes festivalMeteor {
    0%, 68% { transform: translate3d(-20vw, -8vh, 0) rotate(-14deg); opacity: 0; }
    73% { opacity: var(--opacity); }
    100% { transform: translate3d(138vw, 30vh, 0) rotate(-14deg); opacity: 0; }
}

@keyframes festivalMoonbeam {
    0%, 100% { transform: translate3d(-12vw, 0, 0) rotate(-5deg); opacity: .05; }
    50% { transform: translate3d(14vw, 0, 0) rotate(5deg); opacity: var(--opacity); }
}

@keyframes festivalCloudDrift {
    from { transform: translate3d(-10vw, 0, 0) scale(.9); opacity: .05; }
    35% { opacity: var(--opacity); }
    to { transform: translate3d(150vw, -4vh, 0) scale(1.08); opacity: .03; }
}

@keyframes festivalGoldRain {
    0% { transform: translate3d(0, -12vh, 0); opacity: 0; }
    14% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), 112vh, 0); opacity: 0; }
}

@keyframes festivalRune {
    0%, 100% { transform: translate3d(-3vw, -2vh, 0) rotate(0deg) scale(.72); opacity: .08; }
    50% { transform: translate3d(var(--drift), 4vh, 0) rotate(180deg) scale(1.08); opacity: var(--opacity); }
}
@keyframes festivalLightning {
    0%, 72%, 76%, 100% { opacity: 0; }
    73%, 75% { opacity: var(--opacity); }
    74% { opacity: .12; }
}
@keyframes festivalFeather {
    0% { transform: translate3d(0, -12vh, 0) rotate(-20deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    52% { transform: translate3d(var(--drift), 48vh, 0) rotate(120deg); }
    100% { transform: translate3d(calc(var(--drift) * -.5), 112vh, 0) rotate(260deg); opacity: 0; }
}
@keyframes festivalBubble {
    0% { transform: translate3d(0, 12vh, 0) scale(.55); opacity: 0; }
    20% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), -116vh, 0) scale(1.15); opacity: 0; }
}
@keyframes festivalSwordRain {
    0% { transform: translate3d(-18vw, -18vh, 0) rotate(28deg); opacity: 0; }
    15% { opacity: var(--opacity); }
    100% { transform: translate3d(38vw, 118vh, 0) rotate(28deg); opacity: 0; }
}
@keyframes festivalLotus {
    0%, 100% { transform: translate3d(-4vw, 3vh, 0) rotate(-12deg) scale(.32); opacity: .05; }
    50% { transform: translate3d(var(--drift), -3vh, 0) rotate(18deg) scale(1.15); opacity: var(--opacity); }
}
@keyframes festivalFirework {
    0%, 35% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(.05); opacity: 0; }
    39% { transform: translate3d(calc(var(--drift) * -.18), -8vh, 0) rotateX(120deg) rotateZ(45deg) scale(1.18); opacity: 1; }
    55% { transform: translate3d(calc(var(--drift) * .48), 10vh, 0) rotateX(360deg) rotateZ(190deg) scale(1); opacity: var(--opacity); }
    78% { transform: translate3d(var(--drift), 38vh, 0) rotateX(720deg) rotateZ(430deg) scale(.88); opacity: var(--opacity); }
    100% { transform: translate3d(calc(var(--drift) * -.55), 76vh, 0) rotateX(1080deg) rotateZ(760deg) scale(.72); opacity: 0; }
}
@keyframes festivalAurora {
    0%, 100% { transform: translate3d(-12vw, -3vh, 0) skewX(-7deg) scale(.92); opacity: .08; }
    50% { transform: translate3d(62vw, 4vh, 0) skewX(9deg) scale(1.12); opacity: var(--opacity); }
}
@keyframes festivalRain {
    0% { transform: translate3d(-8vw, -18vh, 0) rotate(12deg); opacity: 0; }
    14% { opacity: var(--opacity); }
    100% { transform: translate3d(18vw, 118vh, 0) rotate(12deg); opacity: 0; }
}
@keyframes festivalIceCrystal {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.45); opacity: 0; }
    22% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotate(540deg) scale(1.05); opacity: 0; }
}
@keyframes festivalCoin {
    0% { transform: translate3d(0, -12vh, 0) rotateY(0deg) rotateZ(0deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotateY(900deg) rotateZ(240deg); opacity: 0; }
}
@keyframes festivalInkCloud {
    0% { transform: translate3d(-12vw, 0, 0) scale(.82); opacity: 0; }
    30% { opacity: calc(var(--opacity) * .7); }
    100% { transform: translate3d(152vw, -4vh, 0) scale(1.18); opacity: 0; }
}
@keyframes festivalRipple {
    0%, 52% { transform: scale(.08); opacity: 0; }
    58% { opacity: var(--opacity); }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes festivalPhoenixFeather {
    0% { transform: translate3d(-12vw, 108vh, 0) rotate(-35deg) scale(.65); opacity: 0; }
    18% { opacity: var(--opacity); }
    55% { transform: translate3d(var(--drift), 45vh, 0) rotate(40deg) scale(1.08); }
    100% { transform: translate3d(18vw, -15vh, 0) rotate(130deg) scale(.78); opacity: 0; }
}
@keyframes festivalDragonOrb {
    0%, 100% { transform: translate3d(-7vw, 3vh, 0) scale(.55); opacity: .08; }
    35% { transform: translate3d(calc(var(--drift) * .55), -5vh, 0) scale(1.12); opacity: var(--opacity); }
    70% { transform: translate3d(var(--drift), 4vh, 0) scale(.82); opacity: calc(var(--opacity) * .72); }
}
@keyframes festivalWind {
    0% { transform: translate3d(-22vw, 4vh, 0) scaleX(.55); opacity: 0; }
    22% { opacity: var(--opacity); }
    100% { transform: translate3d(148vw, -5vh, 0) scaleX(1.2); opacity: 0; }
}
@keyframes festivalTalisman {
    0% { transform: translate3d(0, -12vh, 0) rotateY(0deg) rotateZ(-12deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotateY(720deg) rotateZ(150deg); opacity: 0; }
}
@keyframes festivalBell {
    0% { transform: translate3d(0, -12vh, 0) rotate(-16deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    50% { transform: translate3d(var(--drift), 48vh, 0) rotate(16deg); }
    100% { transform: translate3d(calc(var(--drift) * -.45), 112vh, 0) rotate(-14deg); opacity: 0; }
}
@keyframes festivalCrane {
    0% { transform: translate3d(-20vw, 3vh, 0) scale(.72); opacity: 0; }
    18% { opacity: var(--opacity); }
    100% { transform: translate3d(145vw, -8vh, 0) scale(1.08); opacity: 0; }
}
@keyframes festivalGhostFlame {
    0%, 100% { transform: translate3d(-5vw, 6vh, 0) scale(.62) rotate(-8deg); opacity: .08; }
    48% { transform: translate3d(var(--drift), -6vh, 0) scale(1.18) rotate(9deg); opacity: var(--opacity); }
}
@keyframes festivalSunray {
    0%, 100% { transform: translate3d(-18vw, 0, 0) rotate(-7deg); opacity: .04; }
    50% { transform: translate3d(24vw, 0, 0) rotate(8deg); opacity: var(--opacity); }
}
@keyframes festivalGalaxy {
    0%, 100% { transform: translate3d(-8vw, -2vh, 0) rotate(0deg) scale(.72); opacity: .06; }
    50% { transform: translate3d(var(--drift), 4vh, 0) rotate(180deg) scale(1.12); opacity: calc(var(--opacity) * .72); }
}
@keyframes festivalRedPacket {
    0% { transform: translate3d(0, -12vh, 0) rotateX(0deg) rotateZ(-8deg); opacity: 0; }
    18% { opacity: var(--opacity); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotateX(580deg) rotateZ(220deg); opacity: 0; }
}
@keyframes festivalShockwave {
    0%, 48% { transform: scale(.05); opacity: 0; }
    54% { opacity: .82; }
    100% { transform: scale(3.4); opacity: 0; }
}
@keyframes festivalRocketFlight {
    0% { transform: translate3d(0, 0, 0) scale(.22); opacity: 0; }
    8% { opacity: 1; }
    46% { transform: translate3d(calc(var(--drift) * .28), -72vh, 0) scale(.32); opacity: 1; }
    52% { transform: translate3d(calc(var(--drift) * .3), -74vh, 0) scale(1); opacity: 1; }
    82% { transform: translate3d(calc(var(--drift) * .32), -74vh, 0) scale(1.28); opacity: .54; }
    100% { transform: translate3d(calc(var(--drift) * .34), -74vh, 0) scale(1.5); opacity: 0; }
}
@keyframes festivalRocketTrail {
    0% { transform: scaleY(.12); opacity: 0; }
    9% { transform: scaleY(1); opacity: 1; }
    42% { transform: scaleY(.72); opacity: .92; }
    49%, 100% { transform: scaleY(.08); opacity: 0; }
}
@keyframes festivalRocketBurst {
    0%, 47% { transform: scale(.02) rotate(0deg); opacity: 0; }
    52% { transform: scale(.18) rotate(4deg); opacity: 1; }
    66% { transform: scale(1) rotate(12deg); opacity: .96; }
    83% { transform: scale(1.3) rotate(18deg); opacity: .42; }
    100% { transform: scale(1.58) rotate(24deg); opacity: 0; }
}
@keyframes festivalHeavenGate {
    0%,100% { transform:translate(-50%,-50%) scale(.45); opacity:.04; }
    48% { transform:translate(-50%,-50%) scale(1); opacity:calc(var(--opacity) * .62); }
}
@keyframes festivalDragonPhoenix {
    0% { transform:translate3d(-20vw,12vh,0) rotate(-9deg); opacity:0; }
    25% { opacity:var(--opacity); }
    52% { transform:translate3d(75vw,-5vh,0) rotate(8deg); }
    100% { transform:translate3d(155vw,10vh,0) rotate(-6deg); opacity:0; }
}
@keyframes festivalSwordFormation {
    0%,100% { transform:translate3d(0,0,0) rotate(0deg) scale(.45); opacity:0; }
    48% { transform:translate3d(calc(50vw - var(--x)),calc(46vh - var(--y)),0) rotate(180deg) scale(1); opacity:var(--opacity); }
    66% { transform:translate3d(calc(50vw - var(--x)),calc(46vh - var(--y)),0) rotate(220deg) scale(1.18); opacity:.9; }
}
@keyframes festivalWarDrum {
    0%,42% { transform:scale(.08); opacity:0; }
    50% { opacity:.9; }
    100% { transform:scale(3.2); opacity:0; }
}
@keyframes festivalRainbowCloud {
    0% { transform:translate3d(-15vw,0,0) scale(.8); opacity:0; }
    30% { opacity:calc(var(--opacity) * .62); }
    100% { transform:translate3d(155vw,-3vh,0) scale(1.15); opacity:0; }
}
@keyframes festivalSkyLantern {
    0% { transform:translate3d(0,12vh,0) scale(.65) rotate(-5deg); opacity:0; }
    18% { opacity:var(--opacity); }
    100% { transform:translate3d(var(--drift),-118vh,0) scale(1.05) rotate(5deg); opacity:0; }
}
@keyframes festivalLotusBloom {
    0%,100% { transform:translate3d(0,8vh,0) scale(.18) rotate(-8deg); opacity:.04; }
    50% { transform:translate3d(var(--drift),-8vh,0) scale(1.1) rotate(8deg); opacity:var(--opacity); }
}
@keyframes festivalGoldenDragon {
    0% { transform:translate3d(-20vw,8vh,0) rotate(-6deg) scale(.72); opacity:0; }
    25% { opacity:var(--opacity); }
    52% { transform:translate3d(75vw,-7vh,0) rotate(7deg) scale(1.08); }
    100% { transform:translate3d(155vw,8vh,0) rotate(-4deg) scale(.82); opacity:0; }
}
@keyframes festivalPortal {
    0%,100% { transform:translate(-50%,-50%) rotate(0deg) scale(.12); opacity:0; }
    45% { transform:translate(-50%,-50%) rotate(180deg) scale(1); opacity:var(--opacity); }
    70% { transform:translate(-50%,-50%) rotate(280deg) scale(1.14); opacity:calc(var(--opacity) * .7); }
}
@keyframes festivalSwordWriting {
    0%,42% { transform:translate3d(-20vw,0,0) rotate(-9deg) scaleX(.08); opacity:0; }
    55% { opacity:var(--opacity); }
    76% { transform:translate3d(72vw,var(--drift),0) rotate(-9deg) scaleX(1); opacity:.88; }
    100% { transform:translate3d(135vw,calc(var(--drift) * -.3),0) rotate(-9deg) scaleX(.45); opacity:0; }
}
@keyframes festivalCountdownGlow {
    0% { transform:translate(-50%,-50%) scale(.3); opacity:0; }
    5%,32% { transform:translate(-50%,-50%) scale(1); opacity:1; }
    38%,100% { transform:translate(-50%,-50%) scale(1.5); opacity:0; }
}
@keyframes festivalCountdownText {
    0%,8% { content:"3"; }
    9%,17% { content:"2"; }
    18%,26% { content:"1"; }
    27%,38% { content:"KHAI MỞ"; }
    39%,100% { content:""; }
}
@keyframes festivalGiftRain {
    0% { transform:translate3d(0,-12vh,0) rotateY(0deg) rotateZ(0deg); opacity:0; }
    18% { opacity:var(--opacity); }
    100% { transform:translate3d(var(--drift),112vh,0) rotateY(620deg) rotateZ(300deg); opacity:0; }
}
@keyframes festivalMountainAwaken {
    0%,100% { transform:translate3d(0,18vh,0) scaleY(.35); opacity:.02; }
    50% { transform:translate3d(var(--drift),-8vh,0) scaleY(1); opacity:var(--opacity); }
}
@keyframes festivalLogoArrival {
    0% { transform:translate(-50%,-50%) scale(.05) rotate(0deg); opacity:0; }
    8% { opacity:1; }
    26% { transform:translate(-50%,-50%) scale(1) rotate(18deg); opacity:.9; }
    42% { transform:translate(-50%,-50%) scale(1.3) rotate(28deg); opacity:.22; }
    55%,100% { transform:translate(-50%,-50%) scale(1.5) rotate(36deg); opacity:0; }
}
@keyframes festivalWelcomeOverlay {
    0% { opacity:0; transform:scale(1.05); }
    4%,16% { opacity:1; transform:scale(1); }
    24%,100% { opacity:0; transform:scale(1.02); visibility:hidden; }
}

@keyframes festivalStarDrift { 0% { transform:translate3d(-24vw,10vh,0) scale(.2); opacity:0; } 18% { opacity:var(--opacity); } 100% { transform:translate3d(128vw,-18vh,0) scale(1); opacity:0; } }
@keyframes festivalLightPillar { 0%,100% { transform:translateX(-12vw) rotate(-8deg) scaleX(.45); opacity:.02; } 50% { transform:translateX(var(--drift)) rotate(8deg) scaleX(1.15); opacity:calc(var(--opacity) * .55); } }
@keyframes festivalCloudSea { 0%,100% { transform:translate3d(-22vw,8vh,0) scale(.8); opacity:.05; } 50% { transform:translate3d(var(--drift),-8vh,0) scale(1.3); opacity:calc(var(--opacity) * .7); } }
@keyframes festivalBlossomStorm { 0% { transform:translate3d(-22vw,-8vh,0) rotateX(0) rotateZ(0); opacity:0; } 18% { opacity:var(--opacity); } 55% { transform:translate3d(55vw,45vh,0) rotateX(420deg) rotateZ(280deg); } 100% { transform:translate3d(126vw,105vh,0) rotateX(850deg) rotateZ(620deg); opacity:0; } }
@keyframes festivalFrostFog { 0%,100% { transform:translate3d(-12vw,4vh,0) scale(.4); opacity:.02; } 50% { transform:translate3d(var(--drift),-5vh,0) scale(1.45); opacity:var(--opacity); } }
@keyframes festivalSandWind { 0% { transform:translate3d(-25vw,8vh,0) rotate(-7deg); opacity:0; } 20% { opacity:var(--opacity); } 100% { transform:translate3d(135vw,-5vh,0) rotate(5deg); opacity:0; } }
@keyframes festivalSpiritKoi { 0% { transform:translate3d(-25vw,6vh,0) rotate(-7deg) scale(.6); opacity:0; } 20% { opacity:var(--opacity); } 50% { transform:translate3d(52vw,-8vh,0) rotate(8deg) scale(1); } 100% { transform:translate3d(130vw,5vh,0) rotate(-4deg) scale(.75); opacity:0; } }
@keyframes festivalFloralAura { 0%,100% { transform:translate3d(-4vw,4vh,0) rotate(0) scale(.2); opacity:0; } 50% { transform:translate3d(var(--drift),-3vh,0) rotate(180deg) scale(1); opacity:var(--opacity); } }
@keyframes festivalQiVortex { 0%,100% { transform:translate3d(-8vw,4vh,0) rotate(0) scale(.25); opacity:0; } 50% { transform:translate3d(var(--drift),-5vh,0) rotate(540deg) scale(1); opacity:var(--opacity); } }
@keyframes festivalSwordSpiral { 0% { transform:translate3d(calc(50vw - var(--x)),calc(50vh - var(--y)),0) rotate(0) scale(.2); opacity:0; } 45% { opacity:var(--opacity); } 75% { transform:translate3d(calc((50vw - var(--x)) * .18),calc((50vh - var(--y)) * .18),0) rotate(720deg) scale(1.25); opacity:.9; } 100% { transform:translate3d(0,0,0) rotate(900deg) scale(.05); opacity:0; } }
@keyframes festivalThunderSeal { 0%,65%,100% { transform:scale(.4) rotate(0); opacity:0; } 70% { transform:scale(1) rotate(90deg); opacity:.95; } 73% { transform:scale(1.15) rotate(120deg); opacity:.18; } 76% { transform:scale(1) rotate(150deg); opacity:var(--opacity); } }
@keyframes festivalChainBlade { 0% { transform:translate3d(-30vw,-12vh,0) rotate(-22deg) scaleX(.4); opacity:0; } 25% { opacity:var(--opacity); } 100% { transform:translate3d(135vw,70vh,0) rotate(-22deg) scaleX(1.2); opacity:0; } }
@keyframes festivalSilkRibbon { 0% { transform:translate3d(-30vw,0,0) rotate(-8deg) scaleX(.6); opacity:0; } 22% { opacity:var(--opacity); } 50% { transform:translate3d(55vw,var(--drift),0) rotate(8deg) scaleX(1); } 100% { transform:translate3d(135vw,0,0) rotate(-6deg) scaleX(.75); opacity:0; } }
@keyframes festivalVictoryFlag { 0%,100% { transform:translate3d(0,3vh,0) rotate(-5deg) skewY(-3deg); opacity:.1; } 50% { transform:translate3d(var(--drift),-3vh,0) rotate(5deg) skewY(4deg); opacity:var(--opacity); } }
@keyframes festivalScreenCrack { 0%,18% { transform:translate(-50%,-50%) scale(.05); opacity:0; } 22% { transform:translate(-50%,-50%) scale(1); opacity:1; } 30% { transform:translate(-49.4%,-50.6%) scale(1.04); opacity:.92; } 42% { transform:translate(-50.5%,-49.6%) scale(1); opacity:.82; } 65%,100% { transform:translate(-50%,-50%) scale(1.18); opacity:0; visibility:hidden; } }
@keyframes festivalBossArrival { 0% { transform:translate(-50%,-50%) scale(.02); opacity:0; } 16% { opacity:1; } 32% { transform:translate(-50%,-50%) scale(1); opacity:1; } 58% { transform:translate(-50%,-50%) scale(1.1); opacity:.85; } 76%,100% { transform:translate(-50%,-50%) scale(1.35); opacity:0; visibility:hidden; } }
@keyframes festivalEclipse { 0% { transform:translate(-50%,-50%) scale(.1); opacity:0; } 18% { transform:translate(-50%,-50%) scale(1); opacity:1; } 55% { transform:translate(-50%,-50%) scale(1.08); opacity:.95; } 78%,100% { transform:translate(-50%,-50%) scale(1.22); opacity:0; visibility:hidden; } }
@keyframes festivalTaichi { 0% { transform:translate(-50%,-50%) rotate(0) scale(.05); opacity:0; } 20% { opacity:var(--opacity); } 55% { transform:translate(-50%,-50%) rotate(360deg) scale(1); opacity:.72; } 82%,100% { transform:translate(-50%,-50%) rotate(600deg) scale(1.35); opacity:0; visibility:hidden; } }
@keyframes festivalRealmCollapse { 0% { transform:translateY(-105%); opacity:0; } 20% { opacity:.9; } 48% { transform:translateY(0); opacity:.95; } 58% { filter:brightness(2.5); } 74%,100% { transform:translateY(-18%); opacity:0; visibility:hidden; } }

@keyframes festivalMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .web-theme-effect-layer { display: none; }
    .web-theme-welcome-track { animation: none; }
    .web-theme-welcome-track span + span { display: none; }
}

@media (max-width: 768px) {
    body[class*="web-theme-"].wrapper-body,
    body[class*="web-theme-"].auth-page,
    body[class*="web-theme-"].account-page { background-position: 44% top !important; }
    .web-theme-welcome-banner { top: 56px; height: 34px; }
    .web-theme-welcome-track span { padding: 0 36px; font-size: 12px; letter-spacing: .05em; }
    .web-theme-welcome-track span::before,
    .web-theme-welcome-track span::after { margin: 0 10px; }
}

/* Independent whole-site branding override. */
body.global-brand-background.wrapper-body,
body.global-brand-background.auth-page,
body.global-brand-background.account-page {
    background-image:
        linear-gradient(180deg, rgba(1, 22, 29, .2), rgba(1, 15, 20, .58)),
        var(--global-site-background) !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.global-brand-background.wrapper-body footer {
    background-image:
        linear-gradient(180deg, rgba(1, 22, 29, .74), rgba(1, 10, 14, .94)),
        var(--global-site-background) !important;
    background-position: center bottom !important;
    background-size: cover !important;
}