/*
 * Final cascade overrides — hero layout, red accent, readable body copy.
 * Loaded after showcase, animations, and (on home) React styles.
 */

/* --- Hero: full-bleed background + centered content --- */
body.has-react-hero #hero-root {
    display: block;
    width: 100%;
    min-height: 100dvh;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.has-react-hero #hero-root > section {
    position: relative;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 85% 65% at 50% -8%, rgb(225 29 72 / 0.38), transparent 58%),
        radial-gradient(ellipse 55% 45% at 92% 18%, rgb(190 18 60 / 0.22), transparent 52%),
        linear-gradient(180deg, #1c0a10 0%, #0c0608 100%);
}

/* Topography (or static mesh) sits behind chrome */
body.has-react-hero #hero-root > section > div[class*="absolute"][class*="inset-0"],
body.has-react-hero #hero-root > section > div:first-of-type {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

body.has-react-hero #hero-root .topography-container,
body.has-react-hero #hero-root .topography-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

body.has-react-hero #hero-root header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    width: 100%;
}

body.has-react-hero #hero-root > section > .relative {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding: clamp(7rem, 18vw, 11rem) clamp(1.25rem, 4vw, 5rem) clamp(2.5rem, 6vw, 3rem);
    box-sizing: border-box;
    text-align: center !important;
}

body.has-react-hero #hero-root > section > .relative > div:first-child {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    text-align: center !important;
}

body.has-react-hero #hero-root > section > .relative > div:first-child > div {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
    text-align: center !important;
}

body.has-react-hero #hero-root h1 {
    text-align: center !important;
    margin-inline: auto;
}

body.has-react-hero #hero-root h1 span {
    display: block;
    text-align: center !important;
}

body.has-react-hero #hero-root > section > .relative > div:last-child {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    background: none !important;
}

body.has-react-hero #hero-root > section > .relative > div:first-child > div > div[class*="flex"] {
    justify-content: center !important;
}

/* Hero links: don't inherit base.css gold/pink link colour */
body.has-react-hero #hero-root a {
    color: #f4f4f5;
    text-decoration: none;
}

body.has-react-hero #hero-root nav a:hover,
body.has-react-hero #hero-root nav a:focus-visible {
    color: #fff;
}

body.has-react-hero #hero-root a.rounded-full,
body.has-react-hero #hero-root header a[target="_blank"],
body.has-react-hero #hero-root .mt-auto a {
    background: linear-gradient(135deg, #ff6b7a 0%, #e11d48 38%, #be123c 72%, #881337 100%) !important;
    color: #fff !important;
    border: 1px solid rgb(225 29 72 / 0.4) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 28px rgb(190 18 60 / 0.38) !important;
}

body.has-react-hero #hero-root a.rounded-full:hover,
body.has-react-hero #hero-root header a[target="_blank"]:hover {
    background: linear-gradient(135deg, #ff8a96 0%, #f43f5e 40%, #e11d48 100%) !important;
    color: #fff !important;
}

body.has-react-hero #hero-root h1,
body.has-react-hero #hero-root .text-foreground {
    color: #f4efe8 !important;
}

body.has-react-hero #hero-root p,
body.has-react-hero #hero-root .text-zinc-50,
body.has-react-hero #hero-root .text-zinc-100 {
    color: #ebe4db !important;
}

body.has-react-hero #hero-root .text-primary {
    color: #fb7185 !important;
}

/* --- Red accent text (solid — gradient-clip is fragile / unreadable) --- */
.section__eyebrow,
.showcase__row-title,
.promo-affiliate__eyebrow,
.trust-card__kicker,
.stat-card__value,
.stat-card__value--text,
.promo-affiliate__eyebrow,
.trust-card__kicker {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #fb7185 !important;
}

.promo-affiliate__text a,
.faq p a,
.content-page a:not(.btn),
.footer-disclosure a,
.footer-nav a:hover,
.showcase-note strong {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #fb7185 !important;
    text-decoration-color: rgb(225 29 72 / 0.55);
}

.promo-affiliate__text a:hover,
.faq p a:hover,
.content-page a:not(.btn):hover,
.footer-disclosure a:hover {
    color: #ff8a9b !important;
}

/* --- Readable body copy (wins over showcase.css load order) --- */
.showcase-note,
.game-card__meta,
.cat-tile__hint,
.live-cat-card__body p,
.promo-pair-card p,
.stat-card__label,
.facts-note,
.section__lead,
.facts-list,
.facts-list li,
.footer-heading,
.footer-lead,
.footer-disclosure,
.footer-contact-hint,
.footer-copy,
.chip--ghost,
.provider-logo:not(.provider-logo--jili):not(.provider-logo--live) {
    color: #ebe4db !important;
}

.section__title,
.game-card__title,
.feature-card h3,
.trust-card h3,
.listicle h3,
.step-card h3,
.faq summary,
.cta-strip h2,
.promo-affiliate__title,
.footer-brand,
.facts-panel h3 {
    color: #f4efe8 !important;
}

/* --- Heading rhythm --- */
.section__head {
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.section__title {
    margin: 0 0 clamp(0.85rem, 2vw, 1.25rem) !important;
}

.showcase__row-title {
    margin-top: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: clamp(0.85rem, 2vw, 1.25rem) !important;
}

.showcase__row-title:first-child,
.showcase__row-title:first-of-type {
    margin-top: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.content-page h2,
.prose h2 {
    margin-top: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
}

.feature-card h3,
.trust-card h3,
.listicle h3,
.step-card h3,
.game-card__title {
    margin-bottom: 0.65rem !important;
}

.section__title.roll-text .roll-text__slice {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #faf7f2 !important;
}

.roll-text--words .roll-text__unit {
    margin-right: 0.28em;
}

.roll-text--words .roll-text__unit:last-child {
    margin-right: 0;
}

/* --- Remaining gold tokens --- */
.nav__link.is-active:hover {
    color: #ffb3c0 !important;
}

.hero__note,
.prose-ref {
    background: rgb(200 30 58 / 0.08) !important;
    border-color: rgb(200 30 58 / 0.22) !important;
}

.footer-legal {
    margin: 0 0 2rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 10px;
    background: #16100f;
}

.footer-legal .footer-18,
.footer-18 {
    margin: 0;
    padding: 0;
    border: none;
    color: #f4efe8 !important;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.site-footer {
    background: #16100f;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.skip-link {
    color: #fff;
}

.skip-link:focus {
    background: var(--gradient-primary);
    color: #fff;
}

.mobile-panel__drawer {
    background: #0b0708;
    border-right: 1px solid rgb(255 255 255 / 0.08);
}

.mm__link {
    min-height: 44px;
}

.mm__link--cta {
    background: var(--gradient-primary) !important;
    box-shadow: 0 8px 24px rgb(225 29 72 / 0.32);
}

body.has-react-hero #hero-root header img {
    position: static !important;
    width: auto !important;
    height: 2.5rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 168px !important;
    object-fit: contain !important;
    transform: none !important;
}