/**
 * Xbox page overrides on top of donate-playstation.css.
 *
 * The Xbox page reuses the PlayStation layout wholesale, so this file only
 * recolours the hero to the Xbox palette and tightens the Game Pass tier row,
 * which carries one more (and longer) label than PS Plus.
 * Everything is scoped to .xb-page so PlayStation is untouched.
 */

.xb-page .ps-hero {
    background: linear-gradient(145deg, #06280b 0%, #0e6d10 55%, #16b81a 100%);
}

.xb-page .ps-hero--game-pass {
    background: linear-gradient(145deg, #04211d 0%, #0b6b4a 55%, #12b36f 100%);
}

.xb-page .ps-hero::after {
    background: linear-gradient(
        180deg,
        rgba(3, 32, 8, 0.42) 0%,
        rgba(3, 32, 8, 0.12) 45%,
        transparent 100%
    );
}

.xb-page .ps-hero::before {
    background: linear-gradient(
        0deg,
        rgba(3, 32, 8, 0.58) 0%,
        rgba(3, 32, 8, 0.2) 50%,
        transparent 100%
    );
}

/* Square brand tile reads as a service badge only once it is clipped to a disc. */
.xb-page .ps-banner-brand-wrap .ps-banner-title-icon {
    border-radius: 50%;
    filter: drop-shadow(0 1px 3px rgba(3, 32, 8, 0.92));
}

.xb-page .ps-banner-brand {
    text-shadow:
        0 1px 3px rgba(3, 32, 8, 0.92),
        0 0 26px rgba(3, 32, 8, 0.5);
}

.xb-page .ps-banner-tagline {
    text-shadow:
        0 1px 3px rgba(3, 32, 8, 0.92),
        0 0 26px rgba(3, 32, 8, 0.5);
}

.xb-page .ps-banner-delivery {
    text-shadow: 0 1px 2px rgba(3, 32, 8, 0.55);
}

/*
 * Xbox shows five Game Pass tiers where PlayStation shows four, and the extra
 * label is the longest one ("PC Game Pass"). The shared row already sizes each
 * tab to its text; Xbox only needs a slightly tighter scale so all five still
 * share a single line at 320px.
 */
.xb-page .ps-plus-sub-row {
    gap: clamp(2px, 0.95vw, 6px);
}

.xb-page .ps-plus-sub-btn {
    font-size: clamp(9.5px, 2.9vw, 11px);
    padding: 5px clamp(1px, 1vw, 8px);
}

/*
 * Subscription cards fall back to a lettered placeholder while they have no
 * product image, and that placeholder is branded "PS Plus" in the shared sheet.
 */
.xb-page .ps-plus-card-art {
    background:
        radial-gradient(circle at 24% 28%, rgba(22, 184, 26, 0.22), transparent 42%),
        radial-gradient(circle at 78% 72%, rgba(11, 107, 74, 0.16), transparent 48%),
        linear-gradient(145deg, #eefaf0 0%, #d6f0dc 55%, #bfe6c9 100%);
}

.xb-page .ps-plus-card-art::after {
    content: 'Game Pass';
    color: rgba(6, 40, 11, 0.32);
    letter-spacing: 0.05em;
}