/* ==========================================================================
   CoinLottery Components — Phase 1 (cl-* prefixed)
   --------------------------------------------------------------------------
   ADDITIVE LAYER. Every selector here is .cl-* prefixed and is NOT applied
   to any existing element. New components will opt-in by adding the class.
   This file MUST NOT change the visual baseline of the current site.
   --------------------------------------------------------------------------
   Depends on: css/design-system.css (CSS variables)
   ========================================================================== */

/* ---------- Buttons ---------- */
.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-2);
    height: 40px;
    padding: 0 var(--cl-space-5);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-md);
    font-weight: var(--cl-font-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid transparent;
    border-radius: var(--cl-radius-2xl);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cl-duration-base) var(--cl-easing-standard),
                color var(--cl-duration-base) var(--cl-easing-standard),
                border-color var(--cl-duration-base) var(--cl-easing-standard),
                box-shadow var(--cl-duration-base) var(--cl-easing-standard),
                transform var(--cl-duration-fast) var(--cl-easing-standard);
    user-select: none;
    min-height: var(--cl-touch-target-min);
}
.cl-btn:focus-visible {
    outline: none;
    box-shadow: var(--cl-focus-ring);
}
.cl-btn:disabled,
.cl-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.cl-btn--primary {
    background: var(--cl-gradient-gold);
    color: var(--cl-color-on-primary);
    box-shadow: var(--cl-shadow-gold-sm);
}
.cl-btn--primary:hover {
    box-shadow: var(--cl-shadow-gold-md);
    transform: translateY(-1px);
}

.cl-btn--secondary {
    background: transparent;
    color: var(--cl-color-text);
    border-color: var(--cl-color-border-strong);
}
.cl-btn--secondary:hover {
    background: var(--cl-glass-bg-strong);
    border-color: var(--cl-color-border-gold);
}

.cl-btn--ghost {
    background: transparent;
    color: var(--cl-color-primary);
    border-color: transparent;
    padding: 0 var(--cl-space-3);
}
.cl-btn--ghost:hover {
    color: var(--cl-color-primary-hover);
    text-decoration: underline;
}

.cl-btn--lg {
    height: 56px;
    padding: 0 var(--cl-space-7);
    font-size: var(--cl-font-size-lg);
    border-radius: var(--cl-radius-3xl);
}

.cl-btn--sm {
    height: 32px;
    padding: 0 var(--cl-space-4);
    font-size: var(--cl-font-size-sm);
    min-height: 32px;
}

.cl-btn--block {
    width: 100%;
}

/* ---------- Cards ---------- */
.cl-card {
    background: var(--cl-color-surface-dark);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius-lg);
    backdrop-filter: var(--cl-glass-blur);
    -webkit-backdrop-filter: var(--cl-glass-blur);
    color: var(--cl-color-text);
    padding: var(--cl-space-6);
    box-shadow: var(--cl-shadow-md);
}
.cl-card--elevated {
    box-shadow: var(--cl-shadow-lg);
}
.cl-card--interactive {
    transition: transform var(--cl-duration-base) var(--cl-easing-standard),
                border-color var(--cl-duration-base) var(--cl-easing-standard),
                box-shadow var(--cl-duration-base) var(--cl-easing-standard);
    cursor: pointer;
}
.cl-card--interactive:hover {
    transform: translateY(-3px);
    border-color: var(--cl-color-border-gold);
    box-shadow: var(--cl-shadow-lg);
}

.cl-card--light {
    background: var(--cl-color-surface-light);
    border-color: var(--cl-color-border-light);
    color: var(--cl-color-text-on-light);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.cl-card--light .cl-card__title { color: var(--cl-color-text-on-light); }
.cl-card--light .cl-card__subtitle { color: var(--cl-color-text-on-light-muted); }

.cl-card__title {
    font-size: var(--cl-font-size-lg);
    font-weight: var(--cl-font-weight-bold);
    color: var(--cl-color-text);
    margin: 0 0 var(--cl-space-2) 0;
}
.cl-card__subtitle {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-muted);
    margin: 0 0 var(--cl-space-4) 0;
}

/* ---------- Pills ---------- */
.cl-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-2);
    height: 32px;
    padding: 0 var(--cl-space-4);
    border-radius: var(--cl-radius-pill);
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    color: var(--cl-color-text);
    font-size: var(--cl-font-size-sm);
    font-weight: var(--cl-font-weight-medium);
    white-space: nowrap;
}
.cl-pill--gold {
    background: var(--cl-gradient-gold-soft);
    border-color: var(--cl-color-border-gold);
    color: var(--cl-color-primary);
}
.cl-pill--lg {
    height: 40px;
    padding: 0 var(--cl-space-5);
    font-size: var(--cl-font-size-md);
}

/* ---------- Balance pill (header) ---------- */
.cl-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-2);
    min-width: 200px;
    height: 40px;
    padding: 0 var(--cl-space-4);
    border-radius: var(--cl-radius-pill);
    background: var(--cl-glass-bg-strong);
    border: 1px solid var(--cl-color-border-gold);
    color: var(--cl-color-text);
    font-size: var(--cl-font-size-md);
    font-weight: var(--cl-font-weight-semibold);
}
.cl-balance-pill__icon {
    width: 20px;
    height: 20px;
    color: var(--cl-color-primary);
}
.cl-balance-pill__label {
    font-size: var(--cl-font-size-xs);
    color: var(--cl-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--cl-letter-spacing-wide);
}
.cl-balance-pill__amount {
    color: var(--cl-color-primary);
    font-weight: var(--cl-font-weight-bold);
}

/* ---------- KPI strip ---------- */
.cl-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--cl-color-border);
    border-bottom: 1px solid var(--cl-color-border);
    padding: var(--cl-space-6) 0;
}
.cl-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--cl-space-4);
    gap: var(--cl-space-2);
}
.cl-kpi__icon {
    width: 40px;
    height: 40px;
    color: var(--cl-color-primary);
}
.cl-kpi__value {
    font-size: var(--cl-font-size-3xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-text);
    line-height: 1;
}
.cl-kpi__label {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-muted);
}
@media (max-width: 767px) {
    .cl-kpi-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--cl-space-6); }
    .cl-kpi__icon { width: 32px; height: 32px; }
    .cl-kpi__value { font-size: var(--cl-font-size-2xl); }
}

/* ---------- Jackpot card (hero right column) ---------- */
.cl-jackpot-card {
    width: 100%;
    max-width: 420px;
    padding: var(--cl-space-7);
    background: var(--cl-color-surface-dark-hi);
    border: 1px solid var(--cl-color-border-gold);
    border-radius: var(--cl-radius-xl);
    box-shadow: var(--cl-shadow-lg);
    color: var(--cl-color-text);
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-5);
}
.cl-jackpot-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cl-font-size-md);
    color: var(--cl-color-text-muted);
}
.cl-jackpot-card__amount {
    font-size: var(--cl-font-size-6xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-primary);
    line-height: 1;
    letter-spacing: var(--cl-letter-spacing-tight);
}
.cl-jackpot-card__currency-toggle {
    display: inline-flex;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-color-border-gold);
    border-radius: var(--cl-radius-pill);
    padding: 2px;
}
.cl-jackpot-card__currency-toggle button {
    background: transparent;
    border: none;
    color: var(--cl-color-text-muted);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-xs);
    font-weight: var(--cl-font-weight-semibold);
    padding: 4px 12px;
    border-radius: var(--cl-radius-pill);
    cursor: pointer;
}
.cl-jackpot-card__currency-toggle button[aria-pressed="true"] {
    background: var(--cl-color-primary);
    color: var(--cl-color-on-primary);
}
.cl-jackpot-card__countdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cl-space-3);
}
.cl-countdown-cell {
    background: var(--cl-glass-bg-strong);
    border: 1px solid var(--cl-color-border);
    border-radius: var(--cl-radius-md);
    padding: var(--cl-space-3) 0;
    text-align: center;
}
.cl-countdown-cell__value {
    font-size: var(--cl-font-size-3xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-primary);
    line-height: 1;
}
.cl-countdown-cell__label {
    font-size: var(--cl-font-size-xs);
    color: var(--cl-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--cl-letter-spacing-wide);
    margin-top: var(--cl-space-1);
}

/* ---------- Game card (popular games) ---------- */
.cl-game-card {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
    padding: var(--cl-space-6);
    background: var(--cl-color-surface-dark);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius-lg);
    color: var(--cl-color-text);
    transition: transform var(--cl-duration-base) var(--cl-easing-standard),
                border-color var(--cl-duration-base) var(--cl-easing-standard),
                box-shadow var(--cl-duration-base) var(--cl-easing-standard);
}
.cl-game-card:hover {
    transform: translateY(-4px);
    border-color: var(--cl-color-border-gold);
    box-shadow: var(--cl-shadow-lg);
}
.cl-game-card__icon {
    width: 80px;
    height: 80px;
    align-self: center;
}
.cl-game-card__title {
    font-size: var(--cl-font-size-lg);
    font-weight: var(--cl-font-weight-bold);
    margin: 0;
}
.cl-game-card__desc {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-muted);
    line-height: var(--cl-line-height-snug);
    margin: 0;
}
.cl-game-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--cl-space-3);
}
.cl-game-card__meta-label {
    font-size: var(--cl-font-size-xs);
    color: var(--cl-color-text-muted);
}
.cl-game-card__meta-value {
    font-size: var(--cl-font-size-md);
    color: var(--cl-color-primary);
    font-weight: var(--cl-font-weight-semibold);
}

/* ---------- Navbar (desktop) ---------- */
.cl-navbar {
    position: sticky;
    top: 0;
    z-index: var(--cl-z-sticky);
    height: var(--cl-header-height-desktop);
    padding: 0 var(--cl-space-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 10, 26, 0.85);
    border-bottom: 1px solid var(--cl-color-border);
    backdrop-filter: var(--cl-glass-blur);
    -webkit-backdrop-filter: var(--cl-glass-blur);
    color: var(--cl-color-text);
}
.cl-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-3);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-lg);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-text);
    text-decoration: none;
}
.cl-navbar__brand img {
    height: 36px;
    width: auto;
}
.cl-navbar__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-7);
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-navbar__menu a {
    color: var(--cl-color-text);
    font-size: var(--cl-font-size-base);
    font-weight: var(--cl-font-weight-medium);
    text-decoration: none;
    transition: color var(--cl-duration-base) var(--cl-easing-standard);
}
.cl-navbar__menu a:hover { color: var(--cl-color-primary); }
.cl-navbar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-4);
}
@media (max-width: 768px) {
    .cl-navbar { height: var(--cl-header-height-mobile); padding: 0 var(--cl-space-4); }
    .cl-navbar__menu { display: none; }
    /* Compact balance pill on mobile: icon + amount only (hide "Saldo" label) */
    .cl-balance-pill__label,
    .cl-home-header__balance-pill .cl-balance-pill__label { display: none; }
    .cl-home-header__balance-pill { gap: var(--cl-space-1); padding: var(--cl-space-1) var(--cl-space-2); }
}

/* ---------- Footer minimal ---------- */
.cl-footer {
    background: var(--cl-color-bg-deep);
    color: var(--cl-color-text-muted);
    padding: var(--cl-space-7) var(--cl-space-7);
    border-top: 1px solid var(--cl-color-border);
}
.cl-footer__main {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-5);
    flex-wrap: wrap;
}
.cl-footer__brand img { height: 32px; }
.cl-footer__links {
    display: inline-flex;
    gap: var(--cl-space-7);
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-footer__links a {
    color: var(--cl-color-text-muted);
    text-decoration: none;
    font-size: var(--cl-font-size-md);
    transition: color var(--cl-duration-base) var(--cl-easing-standard);
}
.cl-footer__links a:hover { color: var(--cl-color-primary); }
.cl-footer__social {
    display: inline-flex;
    gap: var(--cl-space-4);
}
.cl-footer__social a {
    color: var(--cl-color-text-muted);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cl-footer__social a:hover { color: var(--cl-color-primary); }

/* ---------- Sub-footer legal ---------- */
.cl-subfooter {
    background: #050513;
    color: var(--cl-color-text-subtle);
    padding: var(--cl-space-3) var(--cl-space-7);
    font-size: var(--cl-font-size-xs);
    border-top: 1px solid var(--cl-color-border);
}
.cl-subfooter__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-4);
    flex-wrap: wrap;
}
.cl-subfooter__licenses,
.cl-subfooter__seal {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-3);
}

/* ---------- Explicit named aliases (Phase 1 contract) ----------
   The redesign spec references these exact class names. They are kept as
   strict aliases of the BEM-ish modifiers so downstream phases can use
   either form without coupling to internal naming choices.
   ----------------------------------------------------------------- */
.cl-card-dark      { /* alias of .cl-card (dark variant is the default) */ }
.cl-card-light     { /* alias of .cl-card.cl-card--light */ }
.cl-card-light,
.cl-card.cl-card--light {
    background: var(--cl-color-surface-light);
    color: var(--cl-color-text-on-light);
    border: 1px solid var(--cl-color-border-light);
    box-shadow: var(--cl-shadow-md);
}
.cl-card-dark,
.cl-card {
    background: var(--cl-color-surface);
    color: var(--cl-color-text);
    border: 1px solid var(--cl-color-border);
    border-radius: var(--cl-radius-lg);
    padding: var(--cl-space-5);
    box-shadow: var(--cl-shadow-md);
}
/* Footer minimal + sub-footer legal aliases */
.cl-footer-minimal {
    /* alias of .cl-footer — both selectors render the same minimal footer */
}
.cl-footer-minimal,
.cl-footer {
    background: var(--cl-color-bg-deep);
    color: var(--cl-color-text-muted);
}
.cl-subfooter-legal {
    /* alias of .cl-subfooter — explicit name used by spec */
}
.cl-subfooter-legal,
.cl-subfooter {
    background: #050513;
    color: var(--cl-color-text-subtle);
}

/* ---------- Lucide icon size helper ---------- */
.cl-icon { width: 20px; height: 20px; flex-shrink: 0; }
.cl-icon--sm { width: 16px; height: 16px; }
.cl-icon--md { width: 24px; height: 24px; }
.cl-icon--lg { width: 32px; height: 32px; }
.cl-icon--xl { width: 40px; height: 40px; }

/* ---------- Visually hidden (a11y) ---------- */
.cl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   PHASE 3 — Homepage compositions
   ========================================================================== */

/* ---------- Header drawer (mobile) + new header layout ---------- */
.cl-home-header {
    position: sticky;
    top: 0;
    z-index: var(--cl-z-sticky);
    background: rgba(10, 10, 26, 0.92);
    backdrop-filter: var(--cl-glass-blur);
    -webkit-backdrop-filter: var(--cl-glass-blur);
    border-bottom: 1px solid var(--cl-color-border);
    padding: 0;
}
/* Phase 2 (Task #57): the production header carries both .cl-navbar and
 * .cl-home-header so the showcase component contract is satisfied while
 * the real layout (height + horizontal padding) lives on the inner
 * `.cl-home-header__inner` wrapper. Neutralize the .cl-navbar root box
 * properties when the two classes coexist so the layout is unchanged. */
.cl-home-header.cl-navbar {
    height: auto;
    padding: 0;
    display: block;
}
@media (max-width: 768px) {
    .cl-home-header.cl-navbar { height: auto; padding: 0; }
}
.cl-home-header__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    padding: 0 var(--cl-space-7);
    height: var(--cl-header-height-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-5);
}
.cl-home-header__brand img { height: 44px; width: auto; display: block; }
.cl-home-header__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}
.cl-home-header__menu a {
    color: var(--cl-color-text);
    text-decoration: none;
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-md);
    font-weight: var(--cl-font-weight-medium);
    transition: color var(--cl-duration-base) var(--cl-easing-standard);
}
.cl-home-header__menu a:hover,
.cl-home-header__menu a:focus-visible { color: var(--cl-color-primary); outline: none; }
.cl-home-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-3);
}
.cl-home-header__hamburger {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--cl-color-border-strong);
    border-radius: var(--cl-radius-md);
    color: var(--cl-color-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.cl-home-header__lang {
    display: inline-flex;
    border: 1px solid var(--cl-color-border);
    border-radius: var(--cl-radius-pill);
    overflow: hidden;
    background: var(--cl-glass-bg);
}
.cl-home-header__lang button {
    background: transparent;
    border: 0;
    color: var(--cl-color-text-muted);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-xs);
    font-weight: var(--cl-font-weight-semibold);
    padding: 6px 10px;
    cursor: pointer;
}
.cl-home-header__lang button.active,
.cl-home-header__lang button[aria-pressed="true"] {
    background: var(--cl-color-primary);
    color: var(--cl-color-on-primary);
}
.cl-home-header__pwa {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--cl-glass-bg-strong);
    border: 1px solid var(--cl-color-border-gold);
    color: var(--cl-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cl-home-header__balance-pill {
    display: none;
    align-items: center;
    gap: var(--cl-space-2);
    padding: 6px 14px;
    border-radius: var(--cl-radius-pill);
    background: var(--cl-glass-bg-strong);
    border: 1px solid var(--cl-color-border-gold);
    color: var(--cl-color-text);
    font-size: var(--cl-font-size-sm);
    font-weight: var(--cl-font-weight-semibold);
}
/* Phase 2 (Task #57): when both .cl-balance-pill and
 * .cl-home-header__balance-pill are present, keep the auth-gated
 * display rule from .cl-home-header__balance-pill. The .cl-balance-pill
 * default `display: inline-flex` would otherwise force the pill visible
 * on logged-out users. */
.cl-home-header__balance-pill.cl-balance-pill { display: none; min-width: 0; height: auto; }
.cl-home-header__balance-pill.cl-balance-pill[data-authed="true"] { display: inline-flex; }
.cl-home-header__balance-pill[data-authed="true"] { display: inline-flex; }
.cl-home-header__balance-pill .cl-balance-pill__amount { color: var(--cl-color-primary); }

/* Drawer */
.cl-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: 88vw;
    max-width: 360px;
    background: var(--cl-color-bg-deep);
    border-left: 1px solid var(--cl-color-border);
    z-index: var(--cl-z-modal);
    transform: translateX(100%);
    transition: transform var(--cl-duration-slow) var(--cl-easing-standard);
    display: flex;
    flex-direction: column;
    padding: var(--cl-space-6) var(--cl-space-5);
    gap: var(--cl-space-5);
    overflow-y: auto;
}
.cl-drawer[aria-hidden="false"] { transform: translateX(0); }
.cl-drawer__close {
    align-self: flex-end;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--cl-color-border);
    border-radius: var(--cl-radius-md);
    color: var(--cl-color-text);
    cursor: pointer;
}
.cl-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-4);
}
.cl-drawer__menu a {
    color: var(--cl-color-text);
    text-decoration: none;
    font-size: var(--cl-font-size-lg);
    font-weight: var(--cl-font-weight-semibold);
}
.cl-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
    margin-top: auto;
}
.cl-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: calc(var(--cl-z-modal) - 1);
    display: none;
}
.cl-drawer-backdrop[data-open="true"] { display: block; }

@media (max-width: 768px) {
    .cl-home-header__inner { height: var(--cl-header-height-mobile); padding: 0 var(--cl-space-4); }
    .cl-home-header__brand img { height: 36px; }
    .cl-home-header__menu,
    .cl-home-header__actions .cl-home-header__cta-login,
    .cl-home-header__actions .cl-home-header__cta-register { display: none; }
    .cl-home-header__hamburger { display: inline-flex; }
}

/* ---------- Hero 2-col ---------- */
.cl-home-hero {
    padding: var(--cl-space-10) var(--cl-space-7) var(--cl-space-9);
    background:
        radial-gradient(ellipse 80% 60% at 80% 30%, rgba(255, 215, 0, 0.10), transparent 60%),
        var(--cl-gradient-midnight);
}
.cl-home-hero__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: var(--cl-space-9);
    align-items: center;
}
.cl-home-hero__copy { display: flex; flex-direction: column; gap: var(--cl-space-5); }
.cl-home-hero__title {
    font-family: var(--cl-font-family-sans);
    font-size: clamp(40px, 5.5vw, 64px);
    font-weight: var(--cl-font-weight-extrabold);
    line-height: var(--cl-line-height-tight);
    letter-spacing: var(--cl-letter-spacing-tight);
    color: var(--cl-color-text);
    margin: 0;
}
.cl-home-hero__title-accent {
    background: var(--cl-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
}
.cl-home-hero__subtitle {
    font-size: var(--cl-font-size-lg);
    color: var(--cl-color-text-muted);
    line-height: var(--cl-line-height-base);
    margin: 0;
    max-width: 540px;
}
.cl-home-hero__ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--cl-space-4);
}
.cl-home-hero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-home-hero__art img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .cl-home-hero { padding: var(--cl-space-8) var(--cl-space-4) var(--cl-space-7); }
    .cl-home-hero__inner { grid-template-columns: 1fr; gap: var(--cl-space-7); }
    .cl-home-hero__art { order: 2; }
}

/* Jackpot card adjustments specific to hero */
.cl-jackpot-card__title {
    font-size: var(--cl-font-size-md);
    color: var(--cl-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--cl-letter-spacing-wide);
    margin: 0;
}
.cl-jackpot-card__amount-wrap { display: flex; flex-direction: column; gap: 4px; }
.cl-jackpot-card__amount-suffix {
    font-size: var(--cl-font-size-md);
    color: var(--cl-color-text-muted);
    font-weight: var(--cl-font-weight-medium);
}
.cl-jackpot-card__see-all {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-primary);
    text-decoration: none;
    margin-top: var(--cl-space-2);
    display: inline-block;
}
.cl-jackpot-card__see-all:hover { text-decoration: underline; }

/* ---------- KPI strip on dark ---------- */
.cl-kpi-section {
    padding: var(--cl-space-7) var(--cl-space-7);
    background: var(--cl-color-bg-deep);
}
.cl-kpi-section__inner { max-width: var(--cl-container-max); margin: 0 auto; }

/* ---------- Popular games 4+1 ---------- */
.cl-popular {
    padding: var(--cl-space-10) var(--cl-space-7);
    background: var(--cl-color-bg);
}
.cl-popular__inner { max-width: var(--cl-container-max); margin: 0 auto; }
.cl-popular__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cl-space-3);
    margin-bottom: var(--cl-space-8);
}
.cl-popular__title {
    font-size: var(--cl-font-size-4xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-text);
    margin: 0;
    letter-spacing: var(--cl-letter-spacing-tight);
}
.cl-popular__title em {
    font-style: normal;
    background: var(--cl-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-popular__subtitle { color: var(--cl-color-text-muted); margin: 0; }

.cl-popular__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.9fr;
    gap: var(--cl-space-5);
}
.cl-popular__grid > .cl-bonus-card { grid-column: 5 / 6; grid-row: 1 / 2; }
.cl-popular__grid > .cl-game-card { grid-row: span 1; }

.cl-game-card {
    text-decoration: none;
    color: var(--cl-color-text);
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-3);
}
.cl-game-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--cl-glass-bg);
    border-radius: var(--cl-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cl-game-card__media img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}
.cl-game-card__cta {
    margin-top: var(--cl-space-3);
    align-self: flex-start;
}

.cl-bonus-card {
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 215, 0, 0.18), transparent 70%),
        var(--cl-gradient-midnight);
    border: 1px solid var(--cl-color-border-gold);
    border-radius: var(--cl-radius-xl);
    padding: var(--cl-space-7);
    color: var(--cl-color-text);
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-4);
    align-items: center;
    text-align: center;
    box-shadow: var(--cl-shadow-gold-sm);
}
.cl-bonus-card__icon {
    width: 80px;
    height: 80px;
    color: var(--cl-color-primary);
}
.cl-bonus-card__title {
    font-size: var(--cl-font-size-xl);
    font-weight: var(--cl-font-weight-extrabold);
    margin: 0;
}
.cl-bonus-card__amount {
    font-size: var(--cl-font-size-4xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-primary);
    line-height: 1;
}
.cl-bonus-card__copy {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-muted);
    margin: 0;
}

/* Desktop: carousel wrapper acts as a row inside the 5-col grid. */
.cl-popular__carousel {
    display: contents;
}

/* Mobile/tablet ≤1023: horizontal scroll-snap carousel of game cards + bonus
   card stacked below at full width. Single canonical rule, no overrides. */
@media (max-width: 768px) {
    .cl-popular__grid {
        display: flex;
        flex-direction: column;
        gap: var(--cl-space-5);
        overflow: visible;
        grid-template-columns: none;
    }
    .cl-popular__carousel {
        display: flex;
        gap: var(--cl-space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--cl-space-3);
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: var(--cl-space-4);
    }
    .cl-popular__carousel > .cl-game-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
    .cl-popular__grid > .cl-bonus-card {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }
}

/* ---------- Benefits strip ---------- */
.cl-benefits {
    padding: var(--cl-space-8) var(--cl-space-7);
    background: var(--cl-color-bg-deep);
    border-top: 1px solid var(--cl-color-border);
    border-bottom: 1px solid var(--cl-color-border);
}
.cl-benefits__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cl-space-6);
}
.cl-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cl-space-2);
}
.cl-benefit__icon { width: 36px; height: 36px; color: var(--cl-color-primary); }
.cl-benefit__title {
    font-size: var(--cl-font-size-base);
    font-weight: var(--cl-font-weight-bold);
    color: var(--cl-color-text);
    margin: 0;
}
.cl-benefit__desc {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-muted);
    margin: 0;
}
@media (max-width: 767px) {
    .cl-benefits__inner { grid-template-columns: repeat(2, 1fr); row-gap: var(--cl-space-7); }
}

/* ---------- Footer minimal final ---------- */
.cl-home-footer {
    background: var(--cl-color-bg-deep);
    color: var(--cl-color-text-muted);
    padding: var(--cl-space-7);
}
.cl-home-footer__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-5);
}
.cl-home-footer__brand img { height: 40px; }
.cl-home-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--cl-space-6);
}
.cl-home-footer__links a {
    color: var(--cl-color-text-muted);
    text-decoration: none;
    font-size: var(--cl-font-size-md);
}
.cl-home-footer__links a:hover { color: var(--cl-color-primary); }
.cl-home-footer__social {
    display: inline-flex;
    gap: var(--cl-space-4);
}
.cl-home-footer__social a {
    color: var(--cl-color-text-muted);
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cl-color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cl-home-footer__social a:hover { color: var(--cl-color-primary); border-color: var(--cl-color-border-gold); }

.cl-home-subfooter {
    background: #050513;
    color: var(--cl-color-text-subtle);
    padding: var(--cl-space-4) var(--cl-space-7);
    font-size: var(--cl-font-size-xs);
    border-top: 1px solid var(--cl-color-border);
    padding-bottom: calc(var(--cl-space-4) + env(safe-area-inset-bottom, 0px));
}
.cl-home-subfooter__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-4);
    flex-wrap: wrap;
}
.cl-home-subfooter__licenses { display: inline-flex; align-items: center; gap: var(--cl-space-3); }
.cl-home-subfooter__seal {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-2);
    color: var(--cl-color-warning);
}

/* Hide elements suppressed by Phase 3 redesign without removing them from DOM,
   so existing JS hooks keep functioning. */
.cl-redesign-hidden { display: none !important; }

.cl-home-hero__art { position: relative; }
.cl-home-hero__illustration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 24px 48px rgba(212, 175, 55, 0.25));
}
.cl-home-hero__art > .cl-jackpot-card { position: relative; z-index: 1; }
@keyframes cl-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
}
.cl-pulse { animation: cl-pulse-glow 0.6s ease-in-out 2; }
.cl-jackpot-card__see-all-link {
    display: block;
    text-align: center;
    margin-top: var(--cl-space-3);
    color: var(--cl-color-gold);
    font-size: 0.875rem;
    text-decoration: none;
    font-weight: 600;
}
.cl-jackpot-card__see-all-link:hover { text-decoration: underline; }

/* ==========================================================================
   PHASE 4 — Lottery landing pages (Task #50)
   Hero compacto con jackpot + countdown, y selector de números clear-card.
   ========================================================================== */

/* ---------- Lottery hero (compact, single column on landing) ---------- */
.cl-lottery-hero {
    padding: var(--cl-space-9) var(--cl-space-7) var(--cl-space-8);
    background:
        radial-gradient(ellipse 70% 55% at 80% 20%, rgba(255, 215, 0, 0.10), transparent 60%),
        var(--cl-gradient-midnight);
    border-bottom: 1px solid var(--cl-color-border);
}
.cl-lottery-hero__inner {
    max-width: var(--cl-container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--cl-space-8);
    align-items: center;
}
.cl-lottery-hero__copy { display: flex; flex-direction: column; gap: var(--cl-space-4); }
.cl-lottery-hero__eyebrow {
    font-size: var(--cl-font-size-xs);
    font-weight: var(--cl-font-weight-bold);
    color: var(--cl-color-primary);
    text-transform: uppercase;
    letter-spacing: var(--cl-letter-spacing-wide);
}
.cl-lottery-hero__title {
    font-family: var(--cl-font-family-sans);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: var(--cl-font-weight-extrabold);
    line-height: var(--cl-line-height-tight);
    letter-spacing: var(--cl-letter-spacing-tight);
    color: var(--cl-color-text);
    margin: 0;
}
.cl-lottery-hero__title em {
    font-style: normal;
    background: var(--cl-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-lottery-hero__subtitle {
    font-size: var(--cl-font-size-md);
    color: var(--cl-color-text-muted);
    line-height: var(--cl-line-height-base);
    margin: 0;
    max-width: 540px;
}
.cl-lottery-hero__art { display: flex; justify-content: flex-end; }
.cl-lottery-hero__art .cl-jackpot-card { max-width: 460px; width: 100%; }
@media (max-width: 768px) {
    .cl-lottery-hero { padding: var(--cl-space-7) var(--cl-space-4); }
    .cl-lottery-hero__inner { grid-template-columns: 1fr; gap: var(--cl-space-6); }
    .cl-lottery-hero__art { justify-content: center; }
}

/* ---------- Clear-card number selector (mockup §05) ---------- */
.cl-number-selector-section {
    padding: var(--cl-space-9) var(--cl-space-7);
    background: var(--cl-color-bg);
}
.cl-number-selector-section__inner {
    max-width: 920px;
    margin: 0 auto;
}
.cl-number-selector {
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: var(--cl-radius-xl);
    box-shadow: var(--cl-shadow-md);
    color: var(--cl-color-text-on-light);
    padding: var(--cl-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-5);
}
.cl-number-selector__head { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.cl-number-selector__title {
    font-size: var(--cl-font-size-2xl);
    font-weight: var(--cl-font-weight-extrabold);
    color: var(--cl-color-text-on-light);
    margin: 0;
    letter-spacing: var(--cl-letter-spacing-tight);
}
.cl-number-selector__helper {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-on-light-muted);
    margin: 0;
}
.cl-number-selector__group { display: flex; flex-direction: column; gap: var(--cl-space-3); }
.cl-number-selector__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cl-space-3);
}
.cl-number-selector__group-label {
    font-size: var(--cl-font-size-sm);
    font-weight: var(--cl-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--cl-letter-spacing-wide);
    color: var(--cl-color-text-on-light);
}
.cl-number-selector__group-counter {
    font-size: var(--cl-font-size-xs);
    color: var(--cl-color-text-on-light-muted);
    font-variant-numeric: tabular-nums;
}
.cl-number-selector__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: var(--cl-space-2);
}
.cl-number-chip {
    appearance: none;
    -webkit-appearance: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #E5E8EE;
    border-radius: var(--cl-radius-md);
    color: var(--cl-color-text-on-light);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-base);
    font-weight: var(--cl-font-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--cl-duration-base) var(--cl-easing-standard),
                border-color var(--cl-duration-base) var(--cl-easing-standard),
                background var(--cl-duration-base) var(--cl-easing-standard),
                color var(--cl-duration-base) var(--cl-easing-standard),
                box-shadow var(--cl-duration-base) var(--cl-easing-standard);
}
.cl-number-chip:hover {
    border-color: var(--cl-color-border-gold);
    transform: translateY(-1px);
    box-shadow: var(--cl-shadow-sm);
}
.cl-number-chip:focus-visible {
    outline: 2px solid var(--cl-color-primary);
    outline-offset: 2px;
}
.cl-number-chip[aria-pressed="true"] {
    background: var(--cl-gradient-gold);
    border-color: var(--cl-color-border-gold);
    color: var(--cl-color-on-primary);
    box-shadow: var(--cl-shadow-gold-sm);
}
.cl-number-chip[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.cl-number-selector__group--accent .cl-number-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, #E11D48, #BE123C);
    border-color: #BE123C;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}
.cl-number-selector__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cl-space-3);
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #EEF0F4;
    padding-top: var(--cl-space-5);
    margin-top: var(--cl-space-2);
}
.cl-number-selector__actions-left { display: inline-flex; gap: var(--cl-space-2); flex-wrap: wrap; }
.cl-number-selector__feedback {
    font-size: var(--cl-font-size-sm);
    color: var(--cl-color-text-on-light-muted);
    font-weight: var(--cl-font-weight-medium);
}
.cl-number-selector__feedback[data-state="ready"] { color: #16A34A; }
.cl-number-selector .cl-btn--ghost-light {
    background: transparent;
    border: 1px solid #E5E5EA;
    color: var(--cl-color-text-on-light);
    min-height: 44px;
    padding: 0 var(--cl-space-5);
    border-radius: var(--cl-radius-md);
    font-weight: var(--cl-font-weight-semibold);
    font-family: var(--cl-font-family-sans);
    font-size: var(--cl-font-size-sm);
    cursor: pointer;
}
.cl-number-selector .cl-btn--ghost-light:hover { border-color: var(--cl-color-border-gold); color: var(--cl-color-primary); }
@media (max-width: 480px) {
    .cl-number-selector { padding: var(--cl-space-5) var(--cl-space-4); }
    .cl-number-selector__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
    .cl-number-selector__actions { flex-direction: column; align-items: stretch; }
    .cl-number-selector__actions .cl-btn { width: 100%; }
}

/* ---------- Phase 4 modal chrome reskin (lottery purchase modal) ---------- */
.cl-modal-skin .modal-content,
.cl-modal-skin#lottery-modal .modal-content,
.cl-modal-skin .review-screen,
.cl-modal-skin .checkout-screen {
    background: var(--cl-color-surface-dark-hi);
    border: 1px solid var(--cl-color-border-gold);
    border-radius: var(--cl-radius-xl);
    color: var(--cl-color-text);
    box-shadow: var(--cl-shadow-lg);
}
.cl-modal-skin .modal-header,
.cl-modal-skin .checkout-header {
    border-bottom: 1px solid var(--cl-color-border);
    color: var(--cl-color-text);
}
.cl-modal-skin .modal-footer,
.cl-modal-skin .checkout-footer {
    border-top: 1px solid var(--cl-color-border);
    background: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   PHASE 5 (Task #51) — Mi Cuenta zone reskin
   Wallet · Ticket Manager · Referrer dashboard
   Additive only. Reuses Phase 1-4 tokens from design-system.css.
   ============================================================ */

/* ---------- cl-pill--gold-soft (light variant for jackpot personal) ---------- */
.cl-pill--gold-soft {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 165, 0, 0.12));
    color: #8a5a00;
    border: 1px solid rgba(255, 165, 0, 0.35);
}

/* ---------- cl-jackpot-personal (light card) ---------- */
.cl-jackpot-personal {
    margin: var(--cl-space-6) 0;
    padding: var(--cl-space-6) var(--cl-space-6);
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(160deg, #FFFFFF 0%, #FFF8E7 100%);
    border: 1px solid #F1E4B4;
    box-shadow: var(--cl-shadow-md);
    color: var(--cl-color-text-on-light, #1A1A2E);
    display: grid;
    gap: var(--cl-space-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    font-family: var(--cl-font-family-sans);
}
@media (min-width: 768px) {
    .cl-jackpot-personal {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--cl-space-6);
        padding: var(--cl-space-7) var(--cl-space-7);
    }
}
.cl-jackpot-personal__head {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-2);
}
.cl-jackpot-personal__head .cl-pill {
    align-self: flex-start;
}
.cl-jackpot-personal__title {
    font-family: var(--cl-font-family-sans);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: var(--cl-font-weight-bold, 700);
    line-height: 1.15;
    color: #1A1A2E;
    margin: 0;
}
.cl-jackpot-personal__subtitle {
    color: #4A4A6A;
    font-size: var(--cl-font-size-sm);
    line-height: 1.5;
    margin: 0;
}
.cl-jackpot-personal__body {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-2);
    align-items: flex-start;
}
.cl-jackpot-personal__amount {
    font-family: var(--cl-font-family-sans);
    font-weight: 800;
    color: #1A1A2E;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: clamp(1.7rem, 6vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.cl-jackpot-personal__amount-prefix {
    color: #B8860B;
    font-size: 0.6em;
    font-weight: 700;
}
.cl-jackpot-personal__amount-suffix {
    color: #6A6A8A;
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-left: 4px;
}
.cl-jackpot-personal__hint {
    color: #6A6A8A;
    font-size: var(--cl-font-size-xs);
    line-height: 1.5;
    margin: 0;
}
.cl-jackpot-personal__actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--cl-space-3);
    flex-wrap: wrap;
    border-top: 1px solid #F1E4B4;
    padding-top: var(--cl-space-4);
}
@media (max-width: 480px) {
    .cl-jackpot-personal { padding: var(--cl-space-5) var(--cl-space-4); }
    .cl-jackpot-personal__actions .cl-btn { flex: 1 1 calc(50% - var(--cl-space-2)); justify-content: center; }
}

/* ---------- cl-account-shell (page wrapper for wallet/tickets/referrer) ---------- */
.cl-account-shell {
    font-family: var(--cl-font-family-sans);
}

/* ---------- cl-modal-skin — Phase 5 modal reskin (additive, logic intact) ----------
   Targets wallet/auth/recharge/staking/swap/history/tickets modals.
   Keeps existing IDs/handlers, just paints over with Phase 1 tokens.
   ---------------------------------------------------------------- */
.cl-modal-skin.wallet-modal,
.cl-modal-skin.auth-modal,
.cl-modal-skin.recharge-modal,
.cl-modal-skin.simple-image-modal,
#stakeModal.cl-modal-skin,
#withdrawConfirmModal.cl-modal-skin,
#swapModalOverlay.cl-modal-skin,
#stakingModalOverlay.cl-modal-skin,
#historyModalOverlay.cl-modal-skin,
#ticketsModalOverlay.cl-modal-skin {
    font-family: var(--cl-font-family-sans);
}

.cl-modal-skin .wallet-modal-content,
.cl-modal-skin .auth-modal-content,
.cl-modal-skin .recharge-content,
.cl-modal-skin .simple-modal-content {
    background: var(--cl-color-surface-dark-hi, #1F1F3D);
    border: 1px solid var(--cl-color-border-gold, rgba(255, 215, 0, 0.25));
    border-radius: var(--cl-radius-xl, 20px);
    color: var(--cl-color-text, #F5F6FA);
    box-shadow: var(--cl-shadow-lg, 0 24px 48px rgba(0, 0, 0, 0.5));
    overflow: hidden;
}

.cl-modal-skin .wallet-modal-header,
.cl-modal-skin .auth-modal-header,
.cl-modal-skin .recharge-header {
    border-bottom: 1px solid var(--cl-color-border, rgba(255, 255, 255, 0.08));
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.06), transparent);
    padding: var(--cl-space-4) var(--cl-space-5);
}

.cl-modal-skin .wallet-modal-header h3,
.cl-modal-skin .auth-modal-header h2,
.cl-modal-skin .recharge-header h2,
.cl-modal-skin .simple-modal-title {
    color: var(--cl-color-primary, #FFD700);
    font-family: var(--cl-font-family-sans);
    font-weight: var(--cl-font-weight-semibold, 600);
}

.cl-modal-skin .close-modal-btn,
.cl-modal-skin .close-auth-modal,
.cl-modal-skin .recharge-close-btn,
.cl-modal-skin .simple-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cl-color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--cl-radius-md, 12px);
    color: var(--cl-color-text, #F5F6FA);
    transition: all 0.2s ease;
}
.cl-modal-skin .close-modal-btn:hover,
.cl-modal-skin .close-auth-modal:hover,
.cl-modal-skin .recharge-close-btn:hover,
.cl-modal-skin .simple-close-btn:hover {
    border-color: var(--cl-color-border-gold, rgba(255, 215, 0, 0.45));
    color: var(--cl-color-primary, #FFD700);
}

.cl-modal-skin .wallet-modal-body,
.cl-modal-skin .auth-modal-body,
.cl-modal-skin .recharge-body {
    padding: var(--cl-space-5);
    background: transparent;
    color: var(--cl-color-text);
}

.cl-modal-skin .auth-btn,
.cl-modal-skin .copy-btn,
.cl-modal-skin .payment-method-btn {
    border-radius: var(--cl-radius-md);
    font-family: var(--cl-font-family-sans);
}

/* Mobile: full-screen modal feel for cl-modal-skin (preserves scroll-lock) */
@media (max-width: 600px) {
    .cl-modal-skin .wallet-modal-content,
    .cl-modal-skin .auth-modal-content,
    .cl-modal-skin .recharge-content {
        max-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* ---------- Floating tickets button reskin ---------- */
#floatingTicketsBtn.cl-redesign-skin,
#floatingTicketsBtn {
    /* additive — only applied if class is present elsewhere; harmless */
}

/* ---------- Wallet balance cards — Phase 5 token reskin (additive) ---------- */
.cl-account-shell .balance-cards-container,
#wallet .balance-cards-container {
    gap: var(--cl-space-4);
}
.cl-account-shell .balance-card,
#wallet .balance-card {
    border-radius: var(--cl-radius-xl, 20px);
    border: 1px solid var(--cl-color-border, rgba(255, 255, 255, 0.08));
    background: var(--cl-color-surface-dark-hi, rgba(31, 31, 61, 0.95));
    box-shadow: var(--cl-shadow-md);
}

/* ---------- Referrer dashboard — Phase 5 KPI/table polish (additive) ---------- */
.cl-account-shell .kpi-card,
.cl-account-shell .ref-stat-card,
.cl-account-shell .chart-card,
.cl-account-shell .share-card {
    border-radius: var(--cl-radius-xl, 20px);
    border: 1px solid var(--cl-color-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--cl-shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cl-account-shell .kpi-card:hover,
.cl-account-shell .chart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cl-shadow-lg);
}
.cl-account-shell .filter-tab.active,
.cl-account-shell .month-btn.active {
    background: var(--cl-gradient-gold, linear-gradient(135deg, #FFD700, #FFA500));
    color: var(--cl-color-on-primary, #1A1A2E);
    border-color: var(--cl-color-border-gold, #FFA500);
}
.cl-account-shell .btn-primary {
    border-radius: var(--cl-radius-md, 12px);
    font-family: var(--cl-font-family-sans);
}

/* ---------- Mobile: stack referrer table as cards (best effort) ---------- */
@media (max-width: 640px) {
    .cl-account-shell .players-table-wrap { overflow-x: auto; }
    .cl-account-shell #players-table { font-size: 12px; }
    .cl-account-shell .kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .cl-account-shell .filter-tabs { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Ticket manager — Phase 5 polish ---------- */
.cl-account-shell .tickets-table-container {
    border-radius: var(--cl-radius-xl, 20px);
    border: 1px solid var(--cl-color-border, rgba(255, 255, 255, 0.08));
    background: var(--cl-color-surface-dark-hi, rgba(31, 31, 61, 0.5));
}
.cl-account-shell .ticket-filters .button {
    border-radius: var(--cl-radius-md, 12px);
}

/* ==========================================================================
   Phase 6 (Task #52) — Secondary pages chrome polish + auth card light variant
   --------------------------------------------------------------------------
   Additive only. Applies new chrome to faq/tecnologia/contacto/noticias/
   ubicacion/terms/privacy/sms/responsible-gaming/sobre-nosotros/404, and
   styles auth modals (#loginModal, #registerModal, #forgotPasswordModal) and
   reset-password.html .reset-container as the 3rd light-card location.
   ========================================================================== */

/* ---------- Auth card light variant (reset-password.html) ----------------- */
.cl-auth-card.reset-container {
    background: var(--cl-color-surface-light, #FFFFFF);
    border: 1px solid var(--cl-color-border-light, rgba(255, 215, 0, 0.35));
    box-shadow: var(--cl-shadow-lg, 0 25px 50px rgba(0, 0, 0, 0.5)),
                0 0 0 1px rgba(255, 215, 0, 0.06) inset;
    color: var(--cl-color-text-on-light, #1A1A2E);
    border-radius: var(--cl-radius-xl, 20px);
}
.cl-auth-card.reset-container .reset-header {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 165, 0, 0.10) 100%);
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}
.cl-auth-card.reset-container .reset-header h1,
.cl-auth-card.reset-container .reset-header h1 span {
    color: var(--cl-color-text-on-light, #1A1A2E);
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
    letter-spacing: -0.01em;
}
.cl-auth-card.reset-container .reset-description,
.cl-auth-card.reset-container .password-hint {
    color: var(--cl-color-text-on-light-muted, rgba(26, 26, 46, 0.72));
}
.cl-auth-card.reset-container .input-group {
    background: rgba(26, 26, 46, 0.04);
    border: 1px solid rgba(26, 26, 46, 0.14);
}
.cl-auth-card.reset-container .input-group:focus-within {
    border-color: var(--cl-color-border-gold, #FFA500);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
.cl-auth-card.reset-container .input-group input {
    color: var(--cl-color-text-on-light, #1A1A2E);
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
}
.cl-auth-card.reset-container .input-group input::placeholder {
    color: rgba(26, 26, 46, 0.5);
}
.cl-auth-card.reset-container .input-group i,
.cl-auth-card.reset-container .password-toggle {
    color: rgba(26, 26, 46, 0.55);
}
.cl-auth-card.reset-container .reset-btn {
    border-radius: var(--cl-radius-md, 12px);
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
    box-shadow: 0 6px 18px rgba(255, 165, 0, 0.28);
}
.cl-auth-card.reset-container .reset-footer {
    border-top-color: rgba(26, 26, 46, 0.10);
}
.cl-auth-card.reset-container .back-link {
    color: var(--cl-color-text-on-light, #1A1A2E);
    font-weight: 600;
}
.cl-auth-card.reset-container .back-link:hover {
    color: var(--cl-color-border-gold, #B8860B);
}

/* ---------- Auth modals (#loginModal #registerModal #forgotPasswordModal) - */
.cl-auth-modal.auth-modal .auth-modal-content {
    border-radius: var(--cl-radius-xl, 20px);
    border: 1px solid var(--cl-color-border, rgba(255, 215, 0, 0.20));
    background: var(--cl-color-surface-dark-hi, rgba(20, 20, 40, 0.98));
    box-shadow: var(--cl-shadow-lg, 0 25px 60px rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(24px);
}
.cl-auth-modal.auth-modal .auth-modal-header {
    border-bottom: 1px solid rgba(255, 215, 0, 0.14);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, rgba(255, 165, 0, 0.04) 100%);
}
.cl-auth-modal.auth-modal .auth-modal-header h3,
.cl-auth-modal.auth-modal .auth-modal-header h3 span {
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
    letter-spacing: -0.01em;
}
.cl-auth-modal.auth-modal .input-group {
    border-radius: var(--cl-radius-md, 12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cl-auth-modal.auth-modal .input-group:focus-within {
    border-color: var(--cl-color-border-gold, #FFA500);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
.cl-auth-modal.auth-modal .auth-btn {
    border-radius: var(--cl-radius-md, 12px);
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cl-auth-modal.auth-modal .auth-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 165, 0, 0.32);
}
.cl-auth-modal.auth-modal .turnstile-container {
    margin: 12px 0;
}
.cl-auth-modal.auth-modal .auth-footer a {
    color: var(--cl-color-border-gold, #FFA500);
    text-decoration: none;
    transition: color 0.2s ease;
}
.cl-auth-modal.auth-modal .auth-footer a:hover {
    color: #FFD700;
    text-decoration: underline;
}

/* Mobile: full-screen treatment (reuses .cl-modal-skin parent rule from Phase 5) */
@media (max-width: 600px) {
    .cl-auth-modal.auth-modal .auth-modal-content {
        max-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* ---------- Secondary page section polish (additive on chrome target pages) */
.cl-home-header ~ main .ubicacion-card,
.cl-home-header ~ main .tecnologia-card,
.cl-home-header ~ main .contacto-section,
.cl-home-header ~ main .legal-content,
.cl-home-header ~ main .faq-item {
    border-radius: var(--cl-radius-lg, 16px);
}

/* =====================================================================
   Phase 7 (Task #53) — Casino catalog reskin (additive, logic intact)
   Targets: #onlineGamesSearch wrapper + #onlineGamesRows + game iframe modal.
   Selector strategy: only when the additive cl-catalog-skin class is present
   so legacy pages without the migration are unaffected.
   ===================================================================== */

/* Search wrapper: token-based card surface, gold focus ring, lucide-friendly icon slot. */
.online-games-search-wrapper.cl-catalog-skin--search {
    background: var(--cl-color-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--cl-color-border, rgba(255, 215, 0, 0.18));
    border-radius: var(--cl-radius-lg, 16px);
    padding: var(--cl-space-2, 8px) var(--cl-space-3, 12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.online-games-search-wrapper.cl-catalog-skin--search:focus-within {
    border-color: var(--cl-color-primary, #FFD700);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
.online-games-search-wrapper.cl-catalog-skin--search .online-games-search {
    background: transparent;
    border: 0;
    color: var(--cl-color-text, #f5f5f5);
    font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
}
.online-games-search-wrapper.cl-catalog-skin--search .online-games-search-icon {
    color: var(--cl-color-primary, #FFD700);
    opacity: 0.9;
}

/* Mobile (<=768): sticky search so it stays accessible while scrolling rows. */
@media (max-width: 768px) {
    .online-games-search-wrapper.cl-catalog-skin--search {
        position: sticky;
        top: var(--cl-space-2, 8px);
        z-index: 5;
        background: rgba(10, 10, 26, 0.92);
    }
}

/* Rows container: token-based vertical rhythm. */
.online-games-rows-container.cl-catalog-skin--rows {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-5, 20px);
    padding-block: var(--cl-space-3, 12px);
}

/* Iframe modal: ensure full-screen with persistent close affordance even with cl-modal-skin. */
#gameIframeModal.cl-modal-skin {
    border-radius: var(--cl-radius-lg, 16px);
    overflow: hidden;
}
#gameIframeModal.cl-modal-skin .game-modal-close-btn {
    position: absolute;
    top: var(--cl-space-2, 8px);
    right: var(--cl-space-2, 8px);
    z-index: 11;
}
/* El close está en absolute → el favorito también debe estarlo para
   que no se solapen. Lo colocamos justo a la izquierda del close
   (close = 44px ancho + 8px right + 8px gap = 60px de offset). */
#gameIframeModal.cl-modal-skin .game-modal-favorite-btn {
    position: absolute;
    top: var(--cl-space-2, 8px);
    right: 60px;
    z-index: 10;
}
@media (max-width: 768px) {
    #gameIframeModal.cl-modal-skin .game-modal-favorite-btn {
        right: 56px;
    }
}
@media (max-width: 768px) {
    #gameIframeModal.cl-modal-skin {
        border-radius: 0;
        inset: 0;
        width: 100vw;
        height: 100vh;
    }
}

/* Loading modal: align spinner contrast with new tokens. */
#onlineGamesLoadingModal.cl-modal-skin {
    border-radius: var(--cl-radius-lg, 16px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* =====================================================================
   Phase 7 (Task #53) — Admin desktop-only mobile warning (additive).
   Hidden by default on >=1024px viewports; shown as full-screen takeover
   on smaller screens to enforce desktop-only operational UX.
   ===================================================================== */
.cl-admin-mobile-warning { display: none; }

@media (max-width: 1023px) {
    .cl-admin-mobile-warning {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(10, 10, 26, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        padding: var(--cl-space-5, 20px);
        font-family: var(--cl-font-family-sans, 'Manrope', system-ui, sans-serif);
    }
    .cl-admin-mobile-warning__card {
        max-width: 420px;
        width: 100%;
        background: var(--cl-color-surface-2, rgba(255, 255, 255, 0.04));
        border: 1px solid var(--cl-color-border, rgba(255, 215, 0, 0.18));
        border-radius: var(--cl-radius-lg, 16px);
        padding: var(--cl-space-6, 24px);
        text-align: center;
        color: var(--cl-color-text, #f5f5f5);
    }
    .cl-admin-mobile-warning__card .cl-icon { color: var(--cl-color-primary, #FFD700); margin-bottom: var(--cl-space-3, 12px); }
    .cl-admin-mobile-warning__card h2 { font-size: 1.25rem; margin: 0 0 var(--cl-space-2, 8px); }
    .cl-admin-mobile-warning__card p { opacity: 0.85; margin: 0 0 var(--cl-space-4, 16px); }
    /* When the warning is visible, hide operational chrome to prevent interaction. */
    body:has(#cl-admin-mobile-warning) > .sidebar,
    body:has(#cl-admin-mobile-warning) > .main-wrapper,
    body:has(#cl-admin-mobile-warning) > .topbar { pointer-events: none; }
}