/* Scoped CSS for Details.cshtml */
.casino-container {
    max-width: 900px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
}

.casino-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.logo-wrapper img {
    max-width: 150px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.trust-badge {
    display: inline-block;
    background-color: #f3f4f6;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    color: #374151;
}

.bonus-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.bonus-card, .stats-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.bonus-amount {
    font-size: 2rem;
    font-weight: bold;
    color: #10b981;
    margin: 10px 0;
}

.btn-primary {
    display: block;
    text-align: center;
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 16px;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.alerts-section .alert {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.alert-danger { background-color: #fee2e2; color: #991b1b; border: 1px solid #f87171; }
.alert-info { background-color: #e0f2fe; color: #075985; border: 1px solid #38bdf8; }
.alert-success { background-color: #d1fae5; color: #065f46; border: 1px solid #34d399; }

.states-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.state-badge {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
}


/*-- -------------------------- -->
<---    Restricted States       -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {

    #restricted-states-1148 {
        padding: var(--sectionPadding);
    }

    #restricted-states-1148 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }

    #restricted-states-1148 .cs-content {
        text-align: center;
        max-width: 45rem;
        margin: 0 auto 3rem;
    }

    #restricted-states-1148 .cs-title,
    #restricted-states-1148 .cs-text {
        margin-left: auto;
        margin-right: auto;
    }

    #restricted-states-1148 .cs-restricted-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    #restricted-states-1148 h3 {
        margin: 0 0 1.5rem;
        text-align: center;
        color: var(--headerColor);
    }

    #restricted-states-1148 .cs-state-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    #restricted-states-1148 .cs-state {
        background: rgba(255, 106, 62, 0.08);
        border: 1px solid rgba(255, 106, 62, 0.2);
        color: var(--headerColor);
        font-weight: 700;
        text-align: center;
        padding: 1rem;
        border-radius: 0.5rem;
    }

    #restricted-states-1148 .cs-note {
        margin-top: 2rem;
        text-align: center;
        color: var(--bodyTextColor);
    }

    /* Stands in for the state grid when a platform has no restrictions on
       file, so the card never renders as an empty box. */
    #restricted-states-1148 .cs-note--none {
        margin-top: 0;
        font-weight: 600;
    }

    #restricted-states-1148 .cs-summary {
        background: var(--blackjackSoft);
        border-left: 4px solid var(--primary);
        padding: 2rem;
        border-radius: 1rem;
    }

    #restricted-states-1148 .cs-summary h3 {
        text-align: left;
        margin-bottom: 1rem;
    }

    #restricted-states-1148 .cs-summary p {
        margin: 0;
        line-height: 1.6em;
    }
}

@media only screen and (min-width: 48rem) {

    #restricted-states-1148 .cs-state-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

    body.dark-mode #restricted-states-1148 .cs-restricted-card {
        background: var(--medium);
        border-color: var(--accent);
    }

    body.dark-mode #restricted-states-1148 .cs-state {
        background: rgba(255, 186, 67, 0.12);
        border-color: rgba(255, 186, 67, 0.25);
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #restricted-states-1148 .cs-note,
    body.dark-mode #restricted-states-1148 h3 {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #restricted-states-1148 .cs-summary {
        background: var(--medium);
        border-color: var(--blackjackGold);
    }

    body.dark-mode #restricted-states-1148 .cs-summary p {
        color: var(--bodyTextColorWhite);
    }
}
/*-- -------------------------- -->
<---      Payout Section        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {

    #payouts-1147 {
        padding: var(--sectionPadding);
    }

    #payouts-1147 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }

    #payouts-1147 .cs-content {
        text-align: center;
        max-width: 45rem;
        margin: 0 auto 3rem;
    }

    #payouts-1147 .cs-title,
    #payouts-1147 .cs-text {
        margin-left: auto;
        margin-right: auto;
    }

    #payouts-1147 .cs-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    #payouts-1147 .cs-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        transition: transform .3s;
    }

    #payouts-1147 .cs-card:hover {
        transform: translateY(-4px);
    }

    #payouts-1147 .cs-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    #payouts-1147 h3 {
        margin: 0 0 .75rem;
        color: var(--headerColor);
    }

    #payouts-1147 .cs-amount {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        color: var(--primary);
        margin-bottom: 1rem;
    }

    #payouts-1147 .cs-card p {
        margin: 0;
        color: var(--bodyTextColor);
        line-height: 1.6em;
    }

    #payouts-1147 .cs-summary {
        background: var(--blackjackSoft);
        border-left: 4px solid var(--primary);
        padding: 2rem;
        border-radius: 1rem;
    }

    #payouts-1147 .cs-summary h3 {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    #payouts-1147 .cs-summary p {
        margin: 0;
        line-height: 1.6em;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {

    #payouts-1147 .cs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

    body.dark-mode #payouts-1147 .cs-card {
        background: var(--medium);
        border-color: var(--accent);
    }

    body.dark-mode #payouts-1147 .cs-summary {
        background: var(--medium);
        border-color: var(--blackjackGold);
    }

    body.dark-mode #payouts-1147 .cs-card p,
    body.dark-mode #payouts-1147 .cs-summary p,
    body.dark-mode #payouts-1147 h3 {
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---     Sticky Signup Bar      -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
    #casino-signup-bar {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--blackjackGreen);
        border-top: 2px solid var(--blackjackGold);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9999;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    }

    #casino-signup-bar .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    #casino-signup-bar .cs-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
    }

    #casino-signup-bar .cs-logo {
        width: 3rem;
        height: 3rem;
        object-fit: contain;
        flex-shrink: 0;
    }

    #casino-signup-bar .cs-content {
        display: flex;
        flex-direction: column;
    }

    #casino-signup-bar .cs-topper {
        color: var(--blackjackGold);
        margin: 0;
        font-size: 0.75rem;
    }

    #casino-signup-bar .cs-text {
        color: #fff;
        font-size: 0.875rem;
        line-height: 1.4em;
        max-width: none;
    }

    #casino-signup-bar .cs-button-solid {
        font-size: 0.875rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--blackjackInk);
        background: var(--blackjackGold);
        padding: 0.875rem 1.5rem;
        border-radius: 999px;
        transition: transform 0.3s ease, background-color 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #casino-signup-bar .cs-button-solid:hover {
        transform: translateY(-2px);
        background: #ffd070;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    #casino-signup-bar {
        padding: 1rem;
    }

    #casino-signup-bar .cs-logo {
        width: 3.5rem;
        height: 3.5rem;
    }

    #casino-signup-bar .cs-text {
        font-size: 1rem;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #casino-signup-bar {
        background: var(--blackjackGreenDark);
        border-top-color: var(--blackjackGold);
    }

    body.dark-mode #casino-signup-bar .cs-text {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #casino-signup-bar .cs-button-solid {
        background: var(--blackjackGold);
        color: var(--blackjackInk);
    }
}


/*-- -------------------------- -->
<---      Stake Pros & Cons     -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
    #stake-pros-cons {
        padding: var(--sectionPadding);
        background: transparent;
    }

    #stake-pros-cons .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }

    #stake-pros-cons .cs-content {
        text-align: center;
        max-width: 48rem;
        margin: 0 auto 3rem;
    }

    #stake-pros-cons .cs-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    #stake-pros-cons .cs-card {
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        background-color: #fff;
    }

    #stake-pros-cons .cs-pros {
        border-top: 4px solid #22c55e;
    }

    #stake-pros-cons .cs-cons {
        border-top: 4px solid #ef4444;
    }

    #stake-pros-cons .cs-card-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 1.5rem;
        color: var(--headerColor);
    }

    #stake-pros-cons .cs-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #stake-pros-cons .cs-list li {
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 1rem;
        color: var(--bodyTextColor);
        line-height: 1.5em;
    }

    #stake-pros-cons .cs-pros li:before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #22c55e;
        font-weight: 700;
    }

    #stake-pros-cons .cs-cons li:before {
        content: "✕";
        position: absolute;
        left: 0;
        top: 0;
        color: #ef4444;
        font-weight: 700;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    #stake-pros-cons .cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #stake-pros-cons .cs-card {
        background-color: var(--medium);
        border-color: var(--accent);
    }

    body.dark-mode #stake-pros-cons .cs-card-title,
    body.dark-mode #stake-pros-cons .cs-list li {
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #faq-326 {
        padding: var(--sectionPadding);
    }
    #faq-326 .cs-container {
        width: 100%;
  
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #faq-326 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #faq-326 .cs-title {
        margin: 0;
    }
    #faq-326 .cs-faq-group {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.75rem;
    }
    #faq-326 .cs-faq-item {
        list-style: none;
        width: 100%;
        background-color: #f7f7f7;
        /* clips all corners of the button that overlap the rounded border */
        overflow: hidden;
        border-radius: 0.75rem;
        transition: border-bottom 0.3s;
    }
    #faq-326 .cs-faq-item.active .cs-button {
        background-color: var(--primary);
        color: white;
    }
    #faq-326 .cs-faq-item.active .cs-button:before {
        background-color: var(--secondaryLight);
        transform: rotate(315deg);
    }
    #faq-326 .cs-faq-item.active .cs-button:after {
        background-color: var(--secondaryLight);
        transform: rotate(-315deg);
    }
    #faq-326 .cs-faq-item.active .cs-item-p {
        height: auto;
        /* 20px - 24px top & bottom */
        /* 16px - 24px left & right */
        padding: clamp(1.25rem, 1.3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
        opacity: 1;
    }
    #faq-326 .cs-button {
        font-size: 1rem;
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        /* 16px - 20px */
        padding: clamp(1rem, 1.3vw, 1.25rem);
        background-color: #f7f7f7;
        border: none;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #faq-326 .cs-button:hover {
        cursor: pointer;
    }
    #faq-326 .cs-button:before {
        /* left line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: rotate(45deg);
        /* animate the transform from the left side of the x axis, and the center of the y */
        transform-origin: left center;
        transition: transform 0.5s;
    }
    #faq-326 .cs-button:after {
        /* right line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.3125rem;
        transform: rotate(-45deg);
        /* animate the transform from the right side of the x axis, and the center of the y */
        transform-origin: right center;
        transition: transform 0.5s;
    }
    #faq-326 .cs-button-text {
        width: 80%;
        display: block;
    }
    #faq-326 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        height: 0;
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #faq-326 .cs-topper {
        color: var(--secondaryLight);
    }
    body.dark-mode #faq-326 .cs-title,
    body.dark-mode #faq-326 .cs-item-p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-326 .cs-faq-item {
        background-color: var(--accent);
    }
    body.dark-mode #faq-326 .cs-faq-item.active .cs-button {
        background-color: var(--primary);
        color: white;
    }
    body.dark-mode #faq-326 .cs-faq-item.active .cs-button:before,
    body.dark-mode #faq-326 .cs-faq-item.active .cs-button:after {
        background-color: var(--primary);
    }
    body.dark-mode #faq-326 .cs-button {
        background-color: var(--accent);
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-326 .cs-button:before,
    body.dark-mode #faq-326 .cs-button:after {
        background-color: var(--bodyTextColorWhite);
    }
}
/* Mobile First */
@media only screen and (min-width: 0rem) {
    #ultimate-review-hero {
        padding: clamp(8rem, 12vw, 10rem) 1rem clamp(3rem, 6vw, 5rem);
        position: relative;
        overflow: hidden;
        background: #ffffff;
    }

    #ultimate-review-hero .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        z-index: 1;
    }

    /* Left Content */
    #ultimate-review-hero .cs-content {
        display: flex;
        flex-direction: column;
        max-width: 48rem;
    }

    #ultimate-review-hero .cs-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    #ultimate-review-hero .cs-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 6.25rem;
        background: linear-gradient(135deg, var(--blackjackGold), #ffd56a);
        color: var(--blackjackInk);
        font-size: 0.8125rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow: 0 4px 15px rgba(255, 186, 67, 0.2);
    }

    #ultimate-review-hero .cs-date {
        color: var(--bodyTextColor);
        font-size: 0.875rem;
        font-weight: 700;
    }

    #ultimate-review-hero .cs-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        line-height: 1.1em;
        font-weight: 900;
        color: var(--headerColor);
        margin: 0 0 1.25rem 0;
    }

    #ultimate-review-hero .cs-title span {
        display: block;
        color: var(--primary);
        font-size: clamp(1.5rem, 3vw, 2rem);
        margin-top: 0.5rem;
    }

    #ultimate-review-hero .cs-text {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
        line-height: 1.6em;
        color: var(--bodyTextColor);
        margin: 0 0 2rem 0;
        max-width: 42rem;
    }

    #ultimate-review-hero .cs-text strong {
        color: var(--headerColor);
    }

    /* Ratings */
    #ultimate-review-hero .cs-rating-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    #ultimate-review-hero .cs-rating-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        background: var(--blackjackSoft);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0.75rem;
        text-decoration: none;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    #ultimate-review-hero .cs-trustpilot:hover {
        transform: translateY(-2px);
        border-color: #00b67a;
    }

    /* Stars Styling Base */
    #ultimate-review-hero .cs-stars {
        color: var(--blackjackGold);
        letter-spacing: 0.1em;
        font-size: 1rem;
        margin-bottom: 0.25rem;
        display: inline-flex;
        align-items: center;
    }

    /* Method 1 Styling: Splits a regular star cleanly down the middle */
    #ultimate-review-hero .cs-star-half {
        position: relative;
        display: inline-block;
        background: linear-gradient(90deg, var(--blackjackGold) 50%, #d1d1d1 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Method 2 Styling: Clean fraction formatting */
    #ultimate-review-hero .cs-fraction {
        font-size: 0.85em;
        margin-left: 0.15rem;
        font-weight: 700;
        color: var(--blackjackGold);
        vertical-align: middle;
    }

    /* Dark mode compatibility tweak for the uncolored half-star backdrop */
    body.dark-mode #ultimate-review-hero .cs-star-half {
        background: linear-gradient(90deg, var(--blackjackGold) 50%, rgba(255, 255, 255, 0.2) 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #ultimate-review-hero .cs-rating-text {
        color: var(--bodyTextColor);
        font-size: 0.875rem;
    }

    #ultimate-review-hero .cs-rating-text strong {
        color: var(--headerColor);
        font-weight: 800;
        margin-right: 0.25rem;
    }

    /* Buttons */
    #ultimate-review-hero .cs-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    #ultimate-review-hero .cs-button-solid,
    #ultimate-review-hero .cs-button-outline {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 3.5rem;
        padding: 0 2rem;
        border-radius: 0.75rem;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none;
        transition: 0.3s ease;
    }

    #ultimate-review-hero .cs-button-solid {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 8px 20px rgba(255, 106, 62, 0.25);
    }

    #ultimate-review-hero .cs-button-solid:hover,
    #ultimate-review-hero .cs-button-solid:focus {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(255, 106, 62, 0.35);
    }

    #ultimate-review-hero .cs-button-outline {
        background: transparent;
        color: var(--primary);
        border: 2px solid var(--primary);
    }

    #ultimate-review-hero .cs-button-outline:hover,
    #ultimate-review-hero .cs-button-outline:focus {
        background: var(--primary);
        color: #fff;
    }

    /* Right Side: Stats Card */
    #ultimate-review-hero .cs-stats-card {
        width: 100%;
        background: #fff;
        border-radius: 1.5rem;
        padding: clamp(1.5rem, 4vw, 2.5rem);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    /* Top decorative line on card */
    #ultimate-review-hero .cs-stats-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, var(--primary), var(--blackjackGold));
        border-radius: 1.5rem 1.5rem 0 0;
    }

    #ultimate-review-hero .cs-card-header {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    #ultimate-review-hero .cs-logo {
        width: 5rem;
        height: 5rem;
        border-radius: 1rem;
        object-fit: contain;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        padding: 0.25rem;
    }

    #ultimate-review-hero .cs-card-title strong {
        display: block;
        font-size: 1.5rem;
        color: var(--headerColor);
        line-height: 1.2em;
        margin-bottom: 0.25rem;
    }

    #ultimate-review-hero .cs-card-title span {
        font-size: 0.875rem;
        color: var(--bodyTextColor);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Stats Grid */
    #ultimate-review-hero .cs-stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    #ultimate-review-hero .cs-stat-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    #ultimate-review-hero .cs-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: 0.75rem;
        background: var(--blackjackSoft);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    #ultimate-review-hero .cs-stat-info span {
        display: block;
        font-size: 0.8125rem;
        color: var(--bodyTextColor);
        margin-bottom: 0.125rem;
    }

    #ultimate-review-hero .cs-stat-info strong {
        display: block;
        font-size: 1.0625rem;
        color: var(--headerColor);
    }

    #ultimate-review-hero .cs-highlight {
        color: var(--primary) !important;
        font-weight: 900;
    }

    #ultimate-review-hero .cs-disclaimer {
        text-align: center;
        font-size: 0.75rem;
        color: var(--bodyTextColor);
        padding-top: 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Jump Nav */
    #ultimate-review-hero .cs-jump-container {
        width: 100%;
        max-width: 80rem;
        margin: 3rem auto 0;
        position: relative;
        z-index: 2;
    }

    #ultimate-review-hero .cs-jump-nav {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        padding-bottom: 1rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #ultimate-review-hero .cs-jump-nav::-webkit-scrollbar {
        display: none;
    }

    #ultimate-review-hero .cs-jump-nav a {
        text-decoration: none;
        white-space: nowrap;
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        background: var(--blackjackSoft);
        color: var(--headerColor);
        font-weight: 700;
        font-size: 0.875rem;
        transition: 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    #ultimate-review-hero .cs-jump-nav a:hover,
    #ultimate-review-hero .cs-jump-nav a:focus {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
}

/* Tablet / Desktop Setup */
@media only screen and (min-width: 48rem) {
    #ultimate-review-hero .cs-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #ultimate-review-hero .cs-content {
        flex: 1;
        padding-right: 2rem;
    }

    #ultimate-review-hero .cs-stats-card {
        width: 26rem;
        flex: none;
    }

    /* Split the internal grid on desktop for maximum scannability */
    #ultimate-review-hero .cs-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
        row-gap: 1.5rem;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #ultimate-review-hero {
        background: var(--dark);
    }

    body.dark-mode #ultimate-review-hero .cs-title,
    body.dark-mode #ultimate-review-hero .cs-text strong,
    body.dark-mode #ultimate-review-hero .cs-rating-text strong,
    body.dark-mode #ultimate-review-hero .cs-card-title strong,
    body.dark-mode #ultimate-review-hero .cs-stat-info strong {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #ultimate-review-hero .cs-text,
    body.dark-mode #ultimate-review-hero .cs-date,
    body.dark-mode #ultimate-review-hero .cs-rating-text,
    body.dark-mode #ultimate-review-hero .cs-card-title span,
    body.dark-mode #ultimate-review-hero .cs-stat-info span,
    body.dark-mode #ultimate-review-hero .cs-disclaimer {
        color: rgba(255, 255, 255, 0.7);
    }

    body.dark-mode #ultimate-review-hero .cs-stats-card {
        background: var(--medium);
        border-color: var(--accent);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    body.dark-mode #ultimate-review-hero .cs-rating-box,
    body.dark-mode #ultimate-review-hero .cs-icon,
    body.dark-mode #ultimate-review-hero .cs-jump-nav a {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--accent);
    }

    body.dark-mode #ultimate-review-hero .cs-card-header,
    body.dark-mode #ultimate-review-hero .cs-disclaimer {
        border-color: var(--accent);
    }

    body.dark-mode #ultimate-review-hero .cs-jump-nav a {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #ultimate-review-hero .cs-jump-nav a:hover,
    body.dark-mode #ultimate-review-hero .cs-jump-nav a:focus {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    body.dark-mode #ultimate-review-hero .cs-button-solid {
        color: #fff;
    }

    body.dark-mode #ultimate-review-hero .cs-button-solid:hover,
    body.dark-mode #ultimate-review-hero .cs-button-solid:focus {
        color: #fff;
    }

    body.dark-mode #ultimate-review-hero .cs-button-outline {
        color: var(--blackjackGold);
        border-color: var(--blackjackGold);
    }

    body.dark-mode #ultimate-review-hero .cs-button-outline:hover,
    body.dark-mode #ultimate-review-hero .cs-button-outline:focus {
        background: var(--blackjackGold);
        color: var(--blackjackInk);
    }
}

#games-guide-1892 {
    padding: var(--sectionPadding);
    background: #fff8ec;
}

#games-guide-1892 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
}

#games-guide-1892 .cs-content {
    text-align: center;
    max-width: 50rem;
    margin: 0 auto 3rem;
}

#games-guide-1892 .cs-title,
#games-guide-1892 .cs-text {
    margin-left: auto;
    margin-right: auto;
}

#games-guide-1892 .cs-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

#games-guide-1892 .cs-pillar {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.08);
    text-align: center;
}

#games-guide-1892 .cs-number {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

#games-guide-1892 .cs-pillar h3 {
    margin: 0 0 1rem;
    color: var(--headerColor);
}

#games-guide-1892 .cs-pillar p {
    margin: 0;
    color: var(--bodyTextColor);
    line-height: 1.6em;
}

#games-guide-1892 .cs-strategies {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

#games-guide-1892 .cs-strategy {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.08);
}

#games-guide-1892 .cs-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    padding: .5rem .875rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
}

#games-guide-1892 .cs-strategy h3 {
    margin: 0 0 1rem;
    color: var(--headerColor);
}

#games-guide-1892 .cs-list {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
}

#games-guide-1892 .cs-list li {
    margin-bottom: .75rem;
    color: var(--bodyTextColor);
}

#games-guide-1892 .cs-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#games-guide-1892 .cs-button-solid,
#games-guide-1892 .cs-button-outline {
    text-decoration: none;
    padding: .875rem 1.25rem;
    border-radius: .5rem;
    font-weight: 700;
    transition: .3s;
}

#games-guide-1892 .cs-button-solid {
    background: var(--primary);
    color: #fff;
}

#games-guide-1892 .cs-button-solid:hover {
    opacity: .9;
}

#games-guide-1892 .cs-button-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
}

#games-guide-1892 .cs-button-outline:hover {
    background: var(--primary);
    color: #fff;
}

/* Tablet */
@media only screen and (max-width: 768px) {
    #games-guide-1892 .cs-pillars,
    #games-guide-1892 .cs-strategies {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode */
body.dark-mode #games-guide-1892 {
    background: var(--dark);
}

body.dark-mode #games-guide-1892 .cs-pillar,
body.dark-mode #games-guide-1892 .cs-strategy {
    background: var(--medium);
    border-color: var(--accent);
}

body.dark-mode #games-guide-1892 .cs-pillar h3,
body.dark-mode #games-guide-1892 .cs-strategy h3 {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #games-guide-1892 .cs-pillar p,
body.dark-mode #games-guide-1892 .cs-list li {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #games-guide-1892 .cs-button-outline {
    color: var(--blackjackGold);
    border-color: var(--blackjackGold);
}


/* Mobile */
@media only screen and (min-width: 0rem) {
    #cta-roi-101 {
        padding: 3rem 1rem;
    }

    #cta-roi-101 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        padding: clamp(2rem, 4vw, 3rem);
        background: linear-gradient(
            135deg,
            var(--blackjackGreen),
            var(--blackjackGreenDark)
        );
        border-radius: 1rem;
        overflow: hidden;
        position: relative;
    }

    #cta-roi-101 .cs-container:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle at top right,
            rgba(255, 186, 67, 0.15),
            transparent 45%
        );
        pointer-events: none;
    }

    #cta-roi-101 .cs-content {
        text-align: center;
        max-width: 48rem;
        margin: auto;
        position: relative;
        z-index: 1;
    }

    #cta-roi-101 .cs-topper {
        color: var(--blackjackGold);
    }

    #cta-roi-101 .cs-title,
    #cta-roi-101 .cs-text {
        color: var(--bodyTextColorWhite);
    }

    #cta-roi-101 .cs-text {
        margin: 0 auto 2rem;
    }

    #cta-roi-101 .cs-button-solid {
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--blackjackInk);
        background-color: var(--blackjackGold);
        padding: 0.875rem 1.75rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s, background-color 0.3s;
    }

    #cta-roi-101 .cs-button-solid:hover {
        background-color: #ffd27a;
        transform: translateY(-2px);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #cta-roi-101 .cs-container {
        background: linear-gradient(
            135deg,
            var(--blackjackGreenDark),
            #06291f
        );
    }

    body.dark-mode #cta-roi-101 .cs-button-solid {
        color: #000;
    }
}

                        
/*-- -------------------------- -->
<---        Daily Bonus         -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
    #daily-bonus {
        padding: var(--sectionPadding);
        background: var(--blackjackSoft);
    }

    #daily-bonus .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }

    #daily-bonus .cs-picture {
        width: 100%;
        max-width: 36rem;
        border-radius: 1rem;
        overflow: hidden;
        border: 3px solid var(--blackjackGold);
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    #daily-bonus .cs-picture img {
        width: 100%;
        height: auto;
        display: block;
    }

    #daily-bonus .cs-content {
        width: 100%;
        max-width: 38rem;
        text-align: left;
    }

    #daily-bonus .cs-info {
        margin: 2rem 0;
        display: grid;
        gap: 1rem;
    }

    #daily-bonus .cs-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: #fff;
        border-radius: .75rem;
        border: 1px solid rgba(0,0,0,.08);
    }

    #daily-bonus .cs-label {
        font-weight: 700;
        color: var(--headerColor);
    }

    #daily-bonus .cs-value {
        font-weight: 600;
        color: var(--primary);
    }

    #daily-bonus .cs-note {
        margin: 0;
        padding: 1rem 1.25rem;
        border-left: 4px solid var(--primary);
        background: rgba(255,106,62,.08);
        color: var(--bodyTextColor);
        border-radius: 0 .5rem .5rem 0;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    #daily-bonus .cs-container {
        flex-direction: row;
        align-items: center;
    }

    #daily-bonus .cs-picture,
    #daily-bonus .cs-content {
        width: 50%;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #daily-bonus {
        background: var(--medium);
    }

    body.dark-mode #daily-bonus .cs-item {
        background: var(--accent);
        border-color: rgba(255,255,255,.08);
    }

    body.dark-mode #daily-bonus .cs-label,
    body.dark-mode #daily-bonus .cs-note {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #daily-bonus .cs-note {
        background: rgba(255,186,67,.12);
    }
}

/*-- -------------------------- -->
<---          AMOE Entry         -->
<--- -------------------------- -*/
/* Reuses the #daily-bonus layout pattern but with the amber "AMOE" accent
   already used for AMOE cards on the Dashboard, so the identity is
   consistent across the app. */

/* Mobile */
@media only screen and (min-width: 0rem) {
    #amoe-entry {
        padding: var(--sectionPadding);
        background: #fffbeb;
    }

    #amoe-entry .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }

    #amoe-entry .cs-picture {
        width: 100%;
        max-width: 36rem;
        border-radius: 1rem;
        overflow: hidden;
        border: 3px solid #f59e0b;
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    #amoe-entry .cs-picture img {
        width: 100%;
        height: auto;
        display: block;
    }

    #amoe-entry .cs-content {
        width: 100%;
        max-width: 38rem;
        text-align: left;
    }

    #amoe-entry .cs-note {
        margin: 1rem 0 0;
        padding: 1rem 1.25rem;
        border-left: 4px solid #f59e0b;
        background: rgba(245,158,11,.1);
        color: var(--bodyTextColor);
        border-radius: 0 .5rem .5rem 0;
    }

    .amoe-badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 0 0 1rem;
    }

    .amoe-badge {
        display: inline-flex;
        align-items: center;
        padding: .3rem .75rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #f59e0b;
    }

    .amoe-badge--value {
        background: #fff;
        color: #b45309;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    #amoe-entry .cs-container {
        flex-direction: row;
        align-items: center;
    }

    #amoe-entry .cs-picture,
    #amoe-entry .cs-content {
        width: 50%;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #amoe-entry {
        background: rgba(245,158,11,.08);
    }

    body.dark-mode #amoe-entry .cs-note {
        background: rgba(245,158,11,.14);
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode .amoe-badge {
        background: rgba(245,158,11,.2);
        color: #fcd34d;
        border-color: #b45309;
    }

    body.dark-mode .amoe-badge--value {
        background: rgba(0,0,0,.25);
        color: #fcd34d;
    }
}

body.dark-mode .cs-icon-crypto {
    color: #ffffff !important;
    text-shadow: 0 0 0 #ffffff;
}