/* MyCard November Double 11 | v1.0.5 | 2026-10-26 */
html body#top#top#top .hero {
    position:relative!important;
    background:#4e1020!important;
    overflow:hidden!important;
}
html body#top#top#top .hero-art {
    background:none!important;
    z-index:2!important;
}
html body#top#top#top .hero:not(.has-campaign-art) .hero-art { visibility:hidden!important; }
.campaign-fallback {
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:5% 12%; color:#fff1e3;
    background:radial-gradient(ellipse at 80% 50%,#ca174e 0,transparent 46%),linear-gradient(120deg,#4e1020,#7a1631);
}
.campaign-eyebrow { font-size:clamp(.65rem,1.2vw,1rem); letter-spacing:.22em; color:#ffb66e; font-weight:800; }
.campaign-fallback h1 { position:relative; z-index:1; max-width:65%; margin:16px 0; font-size:clamp(1.5rem,4vw,4rem); line-height:1.2; color:#fff1e3; text-shadow:none; }
.campaign-fallback p { position:relative; z-index:1; max-width:65%; font-size:clamp(.75rem,1.5vw,1.3rem); margin:0; color:#ffe8d2; }
.campaign-alert { position:absolute; right:12%; top:50%; transform:translateY(-50%) rotate(-8deg); font-size:clamp(4rem,15vw,15rem); filter:drop-shadow(0 20px 35px #380817); }
.hero.has-campaign-art .campaign-fallback { visibility:hidden; }
/* Section ornaments replace the anniversary cake illustration. */
html body#top#top#top main > section.section:not(.inline-detail) { --board-accent:#a60b2f; --board-wash:rgba(166,11,47,.12); }
html body#top#top#top :focus-visible { outline:3px solid #d66c19!important; outline-offset:4px; }
@media(max-width:700px) {
    .campaign-fallback { padding:7% 7%; }
    .campaign-fallback h1 { margin:10px 0; max-width:68%; font-size:clamp(1.2rem,5.6vw,2rem); }
    .campaign-alert { right:5%; font-size:24vw; }
}
/* Final cascade: replace the inherited anniversary section emblem and blue wash. */
html body#top#top#top#top#top#top {
    background:radial-gradient(ellipse at 10% 0%,#ffe6dc,transparent 45%),linear-gradient(#fff4e8,#fff3e6)!important;
}
html body#top#top#top#top#top#top:not(.inline-detail-standalone-mode) main > section.section:not(.inline-detail) {
    background:linear-gradient(135deg,#fff4e8,#fff6ee)!important;
}
html body#top#top#top#top#top#top:not(.inline-detail-standalone-mode) main > section.section:not(.inline-detail):nth-of-type(even) {
    background:linear-gradient(135deg,#fff3e6,#fff4e9)!important;
}

html body#top#top#top#top#top#top [class*="pagination"] button.is-active { background:#d41446!important; }
/* Restore the source-sized title icon in every homepage section. */
html body#top#top#top#top#top#top main > section > .section-heading .section-title-icon-frame { display:flex!important; }

/* All modal backdrops follow the campaign takeover; navigation retains only its controls. */
html body#top#top#top#top#top#top.inline-detail-modal-mode main > #inlineDetail.inline-detail {
    background:var(--popup-backdrop-color)!important;
    -webkit-backdrop-filter:var(--popup-backdrop-filter)!important;
    backdrop-filter:var(--popup-backdrop-filter)!important;
}
html body#top#top#top .campaign-takeover__art {
    background:radial-gradient(circle at 50% 18%,rgba(255,174,67,.22),transparent 45%),linear-gradient(145deg,#4e1020 0%,#a60b2f 58%,#d41446 100%)!important;
}

/* One continuous modal backdrop reaches the viewport bottom; keep the navigation card. */
html body#top#top#top#top#top#top > .popup-navigation-backdrop {
    display:none!important;
}
html body#top#top#top#top#top#top.campaign-takeover-open > .campaign-takeover,
html body#top#top#top#top#top#top.share-dialog-open > .share-dialog,
html body#top#top#top#top#top#top.register-claim-dialog-open > .register-claim-dialog,
html body#top#top#top#top#top#top.inline-detail-modal-mode main > #inlineDetail.inline-detail {
    bottom:0!important;
    padding-bottom:calc(var(--popup-nav-bottom) + 28px)!important;
}
html body#top#top#top#top#top#top.home-notice-open > #homeNotice.home-notice::before {
    bottom:0!important;
}
@media(max-width:768px) {
    html body#top#top#top#top#top#top.home-notice-open > #homeNotice.home-notice {
        bottom:0!important;
        padding-bottom:calc(var(--popup-nav-bottom) + 14px)!important;
    }
}

/* Quick-link artwork is an uncropped illustration, not a circular avatar. */
html body#top#top#top#top#top#top [id="8icons"].quick-panel .has-icon,
html body#top#top#top#top#top#top [id="8icons"].quick-panel .has-icon > img {
    border-radius:0!important;
    overflow:visible!important;
    clip-path:none!important;
}
html body#top#top#top#top#top#top [id="8icons"].quick-panel .has-icon > img {
    object-fit:contain!important;
}

/* Share one backdrop between the quick-menu surround and the first content part. */
html body#top#top#top#top#top#top:not(.inline-detail-standalone-mode) > main {
    background:linear-gradient(90deg,#fff4e8,#fff6ee)!important;
}
html body#top#top#top#top#top#top:not(.inline-detail-standalone-mode) main > #limited.section,
html body#top#top#top#top#top#top:not(.inline-detail-standalone-mode) main:has(> #limited[hidden]) > #membertasks.section {
    background:transparent!important;
}

/* Other bonus rewards: two banners on desktop, 1.4 banners per mobile viewport. */
#topupbonus .extra-rewards-carousel {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    width:100%;
    max-width:1180px;
    margin:0 auto;
}
#topupbonus .extra-rewards-carousel[hidden],
#topupbonus .extra-rewards-heading[hidden] { display:none!important; }
#topupbonus .extra-rewards-carousel > a {
    display:block;
    min-width:0;
    box-sizing:border-box;
    border:1px solid var(--mc-line);
    border-radius:18px;
    background:#fff;
    padding:0;
    overflow:hidden;
}
#topupbonus .extra-rewards-carousel img { display:block; width:100%; height:auto; border-radius:17px; }
@media (max-width:767px) {
    #topupbonus .extra-rewards-carousel {
        display:flex;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }
    #topupbonus .extra-rewards-carousel::-webkit-scrollbar { display:none; }
    #topupbonus .extra-rewards-carousel > a {
        flex:0 0 calc((100% - 12px) / 1.4);
        scroll-snap-align:start;
    }
}

/* Image-only More Activities uses the same framed banner treatment. */
html body#top#top#top#top main #more .more-activities-rail {
    display:flex!important; gap:16px!important; padding:0!important;
    overflow-x:auto!important; scroll-snap-type:none!important;
}
html body#top#top#top#top main #more .more-activities-rail > article {
    flex:0 0 calc((100% - 32px)/3)!important;
    width:calc((100% - 32px)/3)!important; min-width:0!important;
    display:block!important; box-sizing:border-box!important;
    padding:0!important; overflow:hidden!important; border:1px solid var(--mc-line)!important;
    border-radius:18px!important; background:#fff!important;
    box-shadow:none!important; min-height:0!important;
}
html body#top#top#top#top main #more .more-image-card > a {
    display:block!important; width:100%!important; height:auto!important;
    margin:0!important; padding:0!important; min-height:0!important;
    border:0!important; background:none!important; box-shadow:none!important;
    border-radius:17px!important;
}
html body#top#top#top#top main #more .more-image-card img {
    display:block!important; width:100%!important; height:auto!important;
    max-height:none!important; aspect-ratio:16/9!important;
    object-fit:contain!important; border-radius:17px!important;
}
@media(max-width:768px) {
    html body#top#top#top#top main #more .more-activities-rail { gap:12px!important; }
    html body#top#top#top#top main #more .more-activities-rail > article {
        flex-basis:calc((100% - 12px)/1.4)!important;
        width:calc((100% - 12px)/1.4)!important;
    }
}

html body#top#top#top#top #limited .limited-card .limited-card-mascot {
    display:block!important; width:100px!important; height:100px!important;
    max-width:100%!important; object-fit:contain!important; margin:0 auto 8px!important;
}
html body#top#top#top#top #limited .limited-card h3 {
    text-align:center!important; width:100%!important;
}

@media(max-width:768px) {
    html body#top#top#top#top #limited .limited-card .limited-card-mascot {
        grid-area:tag!important; width:38px!important; height:38px!important;
        margin:0 auto!important; align-self:center!important;
    }
}

@media(max-width:768px) {
    html body#top#top#top#top #limited .limited-card {
        grid-template-columns:56px minmax(0,1fr) auto!important;
        grid-template-rows:54px!important;
        min-height:76px!important; padding:10px 12px!important;
        gap:10px!important; border-radius:20px!important;
    }
    html body#top#top#top#top #limited .limited-card .limited-card-mascot {
        width:48px!important; height:48px!important; margin:0 2px!important;
    }
    html body#top#top#top#top #limited .limited-card h3 {
        text-align:left!important; font-size:.95rem!important;
        font-weight:500!important; line-height:1.35!important;
    }
    html body#top#top#top#top #limited .limited-card > a {
        min-width:82px!important; max-width:108px!important;
        min-height:38px!important; padding:8px 10px!important;
        font-size:.76rem!important; font-weight:500!important;
        line-height:1.2!important; white-space:nowrap!important;
    }
}

@media(max-width:768px) {
    html body#top#top#top#top #limited .limited-card > a {
        align-self:center!important;
        height:38px!important; min-height:38px!important; max-height:38px!important;
    }
}

html body#top#top#top#top #limited .limited-card.is-ended .limited-card-mascot {
    filter:grayscale(1)!important;
}

/* Banner frames belong to the image, not the legacy card/link shell. */
html body#top#top#top#top main #more .more-activities-rail > article {
    border:0!important; background:transparent!important;
}
html body#top#top#top#top main #more .more-image-card > a {
    max-width:100%!important; inset:auto!important;
}
html body#top#top#top#top main #more .more-image-card img {
    box-sizing:border-box!important; border:1px solid var(--mc-line)!important;
    border-radius:18px!important;
}

/* Release: v1.0.0 | 2026-10-26 | November baseline: Double 11 artwork, v7/v8 icons, dedicated frontend. */

/* Keep the full approved banner visible, including the embedded reward CTA. */
html body#top#top#top .hero { background:#fff1dc!important; }
html body#top#top#top .hero-art { width:min(1600px,100%)!important; mask-image:none!important; -webkit-mask-image:none!important; }
html body#top#top#top .hero-art img { object-fit:contain!important; height:auto!important; }
html body#top#top#top [id="8icons"].quick-panel { margin-top:16px!important; }
.campaign-fallback { background:linear-gradient(120deg,#ad1248,#ff8c38); }
/* Release: v1.0.0 | 2026-10-26 | November responsive hero. */

html body#top#top#top#top#top .hero,
html body#top#top#top#top#top .hero-art {
    height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important;
}
html body#top#top#top#top#top main > [id="8icons"].quick-panel { margin-top:16px!important; }
/* Release: v1.0.0 | 2026-10-26 | Preserve full mobile artwork and deploy local v7/v8 icons. */

/* Double 11: red alerts, pink highlights, gold edges and warm ivory surfaces. */
html body#top#top#top#top#top#top {
    --mc-ink:#501622; --mc-muted:#79535a;
    --mc-accent:#d41446; --mc-accent-dark:#a60b2f; --mc-accent-soft:#ffe6df;
    --mc-line:#efbb68; --mc-shadow:0 10px 28px rgba(166,11,47,.09);
    --popup-backdrop-color:rgba(78,16,32,.62);
    --popup-backdrop-filter:blur(8px) saturate(.95);
}
html body#top#top#top#top#top#top .hero { background:#fff1dc!important; }
html body#top#top#top#top#top#top .hero-art {
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)!important;
}
html body#top#top#top#top#top#top main > section > .section-heading h2 {
    color:#a60b2f!important; -webkit-text-fill-color:#a60b2f!important;
    text-shadow:0 2px 0 #fff5dc!important;
}
html body#top#top#top#top#top#top :is(.site-header,.bottom-nav,.side-nav-links) {
    border-color:#efbb68!important;
    background:linear-gradient(110deg,#fff9ed,#fff0e4)!important;
    box-shadow:0 8px 26px rgba(166,11,47,.12),inset 0 2px 0 rgba(255,193,60,.45)!important;
}
html body#top#top#top#top#top#top :is(.limited-card,.offer-card,.social-task-card,.mall-card,.member-task-tile,.register-flow-card) {
    border-color:#efbb68!important;
    background:linear-gradient(145deg,#fffef8,#fff3e5)!important;
    box-shadow:0 8px 24px rgba(166,11,47,.08),inset 0 2px 0 rgba(255,255,255,.85)!important;
}
html body#top#top#top#top#top#top .limited-card.is-active { border-color:#e72b51!important; }
html body#top#top#top#top#top#top :is(.share-dialog__panel,.register-claim-dialog__panel,.inline-detail__panel,.smart-guide__panel,.home-notice__panel) {
    border-color:#efbb68!important;
    background-color:#fff9ed!important;
}
html body#top#top#top#top#top#top :focus-visible { outline-color:#a60b2f!important; }
@media(max-width:700px) {
    html body#top#top#top#top#top#top .hero-art {
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)!important;
        mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)!important;
    }
}

/* Release: v1.0.1 | 2026-10-26 | Match navigation, dialogs, floating controls, headings and cards to the Double 11 palette; restore soft hero edges. */

/* Recolor the inherited monochrome purple social artwork in floating controls. */
html body#top#top#top#top#top#top .side-social-link > img {
    filter:hue-rotate(65deg) saturate(1.65)!important;
}
/* Release: v1.0.1 | 2026-10-26 | Match floating social artwork to the alert-red accent. */

/* Release: v1.0.2 | 2026-10-26 | Remove the mascot sticker launch section from November in all locales. */

/* Match card outlines to the heading red, with a quieter resting state. */
html body#top#top#top#top#top#top :is(.reward-card,.offer-card,.limited-card,.game-card,.preregister-card,.social-task-card,.social-video-card,.mall-card,.member-task-tile,.register-task-card,.register-flow-card,.register-product-card,.payment-grid > a,.payment-rail > a,.tickets-rail > article,.lottery-rail > article,.extra-rewards-carousel > a,.more-image-card img) {
    border-color:rgba(166,11,47,.4)!important;
}
html body#top#top#top#top#top#top :is(.reward-card,.offer-card,.limited-card,.game-card,.preregister-card,.social-task-card,.social-video-card,.mall-card,.member-task-tile,.register-task-card,.register-flow-card,.register-product-card,.payment-grid > a,.payment-rail > a,.tickets-rail > article,.lottery-rail > article,.extra-rewards-carousel > a):is(:hover,:focus-within),
html body#top#top#top#top#top#top .more-image-card:is(:hover,:focus-within) img,
html body#top#top#top#top#top#top .limited-card.is-active {
    border-color:#a60b2f!important;
}

/* Release: v1.0.3 | 2026-10-26 | Use translucent heading-red card outlines, deepened on hover, focus and active events. */

/* Give the persistent navigation fully rounded left and right ends. */
html body#top#top#top#top#top#top nav.bottom-nav {
    border-radius:999px!important;
}

/* Release: v1.0.4 | 2026-10-26 | Strengthen the persistent navigation capsule corners. */

/* Featured shortcuts are larger; every secondary destination stays visible. */
html body#top#top#top#top#top#top main > [id="8icons"].quick-hierarchy {
    display:grid!important; grid-template-columns:1.1fr 1fr!important;
    grid-template-rows:auto!important; grid-auto-rows:auto!important;
    gap:24px!important; padding:22px!important;
    width:min(1240px,calc(100% - 48px))!important;
    background:linear-gradient(120deg,#fffaf0,#fff0e4)!important;
    border:1px solid rgba(166,11,47,.25)!important; border-radius:28px!important;
    box-shadow:0 12px 32px rgba(166,11,47,.09)!important;
}
.quick-hierarchy .quick-featured { display:grid; grid-template-columns:repeat(var(--featured-count),minmax(0,1fr)); gap:12px; }
.quick-hierarchy .quick-secondary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:center; gap:10px 8px; }
html body#top#top#top#top#top#top .quick-hierarchy :is(.quick-featured,.quick-secondary) > a {
    position:relative!important; display:flex!important; flex-direction:column!important;
    justify-content:center!important; align-items:center!important; gap:7px!important;
    min-width:0!important; width:auto!important; height:auto!important;
    text-align:center!important; text-decoration:none!important; color:#501622!important;
    padding:10px 6px!important; border-radius:16px!important; background:transparent!important;
    box-sizing:border-box!important;
}
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured > a {
    min-height:164px!important; padding:14px 10px!important;
    background:linear-gradient(155deg,#fffef8,#ffe6df)!important;
    border:1px solid rgba(166,11,47,.4)!important;
    box-shadow:0 5px 14px rgba(166,11,47,.07)!important;
}
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured > a:nth-child(2) { background:linear-gradient(155deg,#fffef8,#ffefbb)!important; }
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured > a:nth-child(3) { background:linear-gradient(155deg,#fffef8,#ffded4)!important; }
html body#top#top#top#top#top#top .quick-hierarchy :is(.quick-featured,.quick-secondary) > a:is(:hover,:focus-visible) {
    border-color:#a60b2f!important; background-color:#ffe8de!important;
    box-shadow:0 5px 16px rgba(166,11,47,.14)!important;
}
html body#top#top#top#top#top#top .quick-hierarchy .has-icon { display:grid!important; place-items:center!important; flex:none!important; width:46px!important; height:46px!important; }
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured .has-icon { width:72px!important; height:72px!important; }
html body#top#top#top#top#top#top .quick-hierarchy .has-icon > :is(img,svg) { display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:contain!important; }
html body#top#top#top#top#top#top .quick-hierarchy strong {
    display:block!important; font-size:13px!important; font-weight:700!important;
    line-height:1.35!important; white-space:normal!important; overflow-wrap:anywhere!important;
    color:#501622!important; -webkit-text-fill-color:#501622!important;
}
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured strong { font-size:16px!important; }
html body#top#top#top#top#top#top .quick-hierarchy .quick-featured__caption { color:#a60b2f!important; font-size:11px!important; line-height:1.35!important; font-weight:600!important; }
@media(max-width:900px) {
    html body#top#top#top#top#top#top main > [id="8icons"].quick-hierarchy { grid-template-columns:minmax(0,1fr)!important; gap:14px!important; }
    .quick-hierarchy .quick-secondary { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:700px) {
    html body#top#top#top#top#top#top main > [id="8icons"].quick-hierarchy { width:calc(100% - 24px)!important; padding:12px!important; border-radius:22px!important; }
    .quick-hierarchy .quick-featured { gap:8px; }
    .quick-hierarchy .quick-secondary { gap:8px 4px; }
    html body#top#top#top#top#top#top .quick-hierarchy .quick-featured > a { min-height:142px!important; padding:10px 6px!important; }
    html body#top#top#top#top#top#top .quick-hierarchy .quick-featured .has-icon { width:56px!important; height:56px!important; }
    html body#top#top#top#top#top#top .quick-hierarchy .quick-featured strong { font-size:14px!important; }
    html body#top#top#top#top#top#top .quick-hierarchy .quick-secondary strong { font-size:11px!important; }
    html body#top#top#top#top#top#top .quick-hierarchy .quick-secondary .has-icon { width:38px!important; height:38px!important; }
}

/* Release: v1.0.5 | 2026-10-26 | Prioritize check-in, rewards and top-up shortcuts while keeping all scheduled entries visible. */

html body#top#top#top#top#top#top .quick-hierarchy a.has-red-dot::after {
    content:""; position:absolute; top:7px; right:7px; width:8px; height:8px;
    border:2px solid #fff; border-radius:50%; background:#e3274d;
}
/* Release: v1.0.5 | 2026-10-26 | Preserve scheduled shortcut notification dots in both groups. */

html body#top#top#top#top#top#top .quick-hierarchy .quick-secondary > a {
    border:1px solid transparent!important;
    box-shadow:none!important;
    min-height:76px!important;
}
html body#top#top#top#top#top#top .quick-hierarchy .quick-secondary > a:is(:hover,:focus-visible) {
    border-color:rgba(166,11,47,.4)!important;
    background:#fff8ef!important;
}
/* Release: v1.0.5 | 2026-10-26 | Keep secondary shortcuts visually quiet. */