/* ==========================================================================
   MGM Royal — theme layer
   Page-level styles hoisted out of the static design pages, plus a
   compatibility layer that maps the app's existing Bootstrap/legacy markup
   onto the royal palette so pages that weren't hand-rebuilt still match.
   Loaded AFTER royal-base.css.
   ========================================================================== */

/* ---------- Shared page chrome ---------- */
/* Sits directly beneath the shared sticky header, so it must not also be
   sticky at top:0 — the two bars would overlap. */
.page-header {
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    color: #fff; font-size: 16px; font-weight: 700;
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.25);
    position: relative; z-index: 90;
}
.page-header a { color: #fff; }
.page-header .ph-title { display: flex; align-items: center; gap: 16px; }
@media (min-width: 769px) {
    .page-header { background: transparent; border-bottom: 1px solid var(--border-glass); box-shadow: none; padding: 20px 30px; }
    .page-header .back-btn { display: none; }
}

/* ---------- Home ---------- */
.slider-wrap {
    margin: 16px; border-radius: 20px; overflow: hidden; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, #641e16, #922b21);
    height: 180px; display: flex; align-items: center; padding: 24px;
}
.slide-content { position: relative; z-index: 2; }
.slide-content .pill {
    background: var(--gold); color: #000; padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 800; display: inline-block; margin-bottom: 8px;
}
.slide-content h2 { font-size: 22px; font-weight: 900; margin-bottom: 6px; color: #fff; }
.slide-content p { font-size: 13px; color: rgba(255,255,255,0.8); }
.slide-bg-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 120px; color: rgba(0,0,0,0.15); z-index: 1; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }
.qg-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px 24px; }
.gc {
    background: var(--bg-surface); border-radius: 16px; border: 1px solid var(--border-glass);
    overflow: hidden; transition: 0.2s; display: block;
}
.gc:hover { transform: translateY(-4px); border-color: var(--gold); }
.gc-vis {
    height: 90px; display: flex; align-items: center; justify-content: center;
    font-size: 40px; position: relative;
    background: radial-gradient(circle at center, rgba(192,57,43,0.2) 0%, transparent 100%);
}
.gc-vis img { max-height: 62px; max-width: 70%; object-fit: contain; }
.gc-badge {
    position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800;
    background: rgba(0,0,0,0.7); color: var(--gold); padding: 4px 8px; border-radius: 6px;
}
.gc-name {
    padding: 10px 8px; text-align: center; font-size: 13px; font-weight: 700;
    color: #fff; border-top: 1px solid rgba(255,255,255,0.05);
}

.winners-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.winners-table th {
    background: rgba(255,255,255,0.05); text-align: left; padding: 12px 16px;
    color: var(--text-dim); text-transform: uppercase; font-size: 11px;
}
.winners-table td { padding: 16px; border-bottom: 1px solid var(--border-glass); }
.winners-table tr:last-child td { border-bottom: none; }
.w-user { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.w-av {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.w-amt { color: #2ecc71; font-weight: 800; font-size: 14px; text-align: right; }

/* ---------- Dashboard ---------- */
.welcome-notice {
    background: rgba(241,196,15,0.1); border: 1px solid rgba(241,196,15,0.3);
    border-radius: 12px; padding: 12px 16px; margin: 16px;
    display: flex; align-items: center; gap: 12px; color: var(--gold); font-size: 13px; font-weight: 600;
}
.stats-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px 24px; }
.stat-card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; padding: 16px; display: flex; flex-direction: column;
    position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: 0.3s;
}
.stat-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.stat-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(192,57,43,0.2), rgba(192,57,43,0.05));
    color: var(--gold); display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 12px;
}
.stat-val { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 4px; word-break: break-all; }
.stat-name { font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }

.ref-box { background: var(--bg-surface); margin: 0 16px 24px; border-radius: 16px; padding: 20px; border: 1px solid var(--border-glass); }
.ref-box h5 { font-size: 15px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.ref-input-group { display: flex; background: rgba(0,0,0,0.4); border: 1px solid var(--border-glass); border-radius: 12px; overflow: hidden; }
.ref-input-group input { flex: 1; min-width: 0; background: transparent; border: none; padding: 12px 16px; color: var(--gold); font-weight: 700; font-size: 14px; outline: none; }
.ref-input-group button { background: var(--gold); color: #000; border: none; padding: 0 20px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.ref-input-group button:hover { background: #fff; }

.tx-section { background: var(--bg-surface); margin: 0 16px 24px; border-radius: 16px; border: 1px solid var(--border-glass); overflow: hidden; }
.tx-head { padding: 16px; border-bottom: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; }
.tx-head h5 { font-size: 15px; font-weight: 800; color: #fff; margin: 0; }
.tx-table-wrap { overflow-x: auto; }
.tx-table { width: 100%; border-collapse: collapse; min-width: 500px; text-align: left; }
.tx-table th { padding: 12px 16px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tx-table td { padding: 16px; font-size: 13px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tx-table tr:last-child td { border-bottom: none; }
.tx-type { background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 20px; font-size: 11px; }
.tx-date { font-size: 11px; color: var(--text-dim); }
@media (min-width: 769px) {
    .welcome-notice { margin: 24px 30px; }
    .stats-wrapper { grid-template-columns: repeat(4, 1fr); padding: 0 30px 24px; gap: 20px; }
    .ref-box, .tx-section { margin: 0 30px 24px; }
}

/* ---------- My account ---------- */
.profile-card {
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    padding: 30px 20px; display: flex; align-items: center; gap: 16px;
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
    box-shadow: 0 10px 30px rgba(192, 57, 43, 0.3); position: relative; z-index: 1;
}
.profile-av {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #000;
    border: 3px solid rgba(255,255,255,0.3); flex-shrink: 0;
}
.profile-av img { width: 100%; height: 100%; object-fit: cover; }
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vip-badge { background: var(--gold); color: #000; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.5px; }
.profile-uid { font-size: 13px; color: rgba(255,255,255,0.8); }

.bal-section {
    background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 20px;
    margin: 0 16px 20px; padding: 20px; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.bal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-glass); padding-bottom: 20px; }
.bal-lbl { font-size: 13px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.bal-amt { font-size: 32px; font-weight: 900; color: var(--gold); }
.bal-actions { display: flex; gap: 12px; }
.bal-btn { flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
.bal-btn.fill { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; }
.bal-btn.outline { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid var(--border-glass); }

.menu-list { background: var(--bg-surface); border-radius: 20px; margin: 0 16px 24px; border: 1px solid var(--border-glass); overflow: hidden; }
.menu-item { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-glass); color: #fff; transition: 0.2s; }
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: rgba(255,255,255,0.02); }
.mi-icon {
    width: 36px; height: 36px; border-radius: 10px; margin-right: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.3));
    border: 1px solid var(--gold-dark); color: var(--gold);
}
.mi-text { flex: 1; font-size: 15px; font-weight: 600; }
.mi-arr { color: var(--text-dim); font-size: 14px; }
.mi-count { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; margin-right: 10px; }
@media (min-width: 769px) {
    .profile-card { border-radius: 20px; margin: 30px 30px 24px; }
    .bal-section, .menu-list { margin-left: 30px; margin-right: 30px; }
}

/* ---------- Deposit ---------- */
.gateway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.gw-card {
    background: var(--bg-surface); border: 2px solid var(--border-glass);
    border-radius: 16px; padding: 16px; text-align: center;
    transition: 0.2s; cursor: pointer; color: var(--text-main); display: block;
}
.gw-card.active { border-color: var(--gold); background: rgba(241,196,15,0.05); }
.gw-icon { font-size: 32px; margin-bottom: 8px; color: var(--gold); }
.gw-icon img { max-height: 34px; max-width: 100%; object-fit: contain; }
.gw-name { font-size: 14px; font-weight: 700; }
.gw-limit { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.amt-section { background: var(--bg-surface); margin: 0 16px 24px; border-radius: 16px; padding: 16px; border: 1px solid var(--border-glass); }
.amt-label { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; font-weight: 600; }
.amt-input-wrap {
    display: flex; align-items: center; background: rgba(0,0,0,0.3);
    border-radius: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px;
}
.amt-input-wrap span { color: var(--gold); font-size: 20px; font-weight: 800; margin-right: 8px; }
.amt-input { background: transparent; border: none; color: #fff; font-size: 24px; font-weight: 800; width: 100%; outline: none; }
.amt-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
.amt-chip {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass);
    padding: 10px 0; border-radius: 8px; text-align: center;
    color: var(--gold); font-weight: 700; font-size: 13px; cursor: pointer; transition: 0.2s;
}
.amt-chip:active { transform: scale(0.95); background: var(--gold); color: #000; }
@media (min-width: 769px) {
    .gateway-grid { grid-template-columns: repeat(4, 1fr); margin: 20px 14px 0; }
    .amt-section { margin: 0 30px 24px; }
    .amt-chips { grid-template-columns: repeat(8, 1fr); }
}

/* ---------- Withdraw ---------- */
.bal-display {
    background: radial-gradient(circle at top right, var(--red-dark) 0%, var(--bg-surface) 100%);
    margin: 16px; border-radius: 20px; padding: 24px; border: 1px solid var(--border-glass); text-align: center;
}
.bal-display .bal-amt { font-size: 36px; }
.bal-wager { font-size: 12px; color: #2ecc71; margin-top: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-section { background: var(--bg-surface); margin: 0 16px 24px; border-radius: 16px; padding: 20px; border: 1px solid var(--border-glass); }
.bank-select {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 16px; margin-bottom: 20px; cursor: pointer;
}
.bank-info { display: flex; align-items: center; gap: 12px; }
.bank-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #3498db, #2980b9); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.bank-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.bank-acc { font-size: 12px; color: var(--text-dim); }
.input-group-royal { margin-bottom: 20px; }
.input-lbl { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.amount-wrap { display: flex; align-items: center; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.1); }
.amount-wrap span.cur { color: var(--gold); font-size: 20px; font-weight: 800; margin-right: 12px; }
.amount-wrap input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; font-size: 24px; font-weight: 800; outline: none; }
.amount-wrap .all-btn { color: var(--gold); font-size: 13px; font-weight: 700; background: rgba(241,196,15,0.1); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.fee-calc { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); margin-bottom: 24px; padding: 0 4px; }
.fee-calc span.val, .fee-calc .val { color: #fff; font-weight: 600; }
@media (min-width: 769px) { .bal-display { margin: 24px 30px; } .form-section { margin: 0 30px 24px; } }

/* ---------- Referrals / agent ---------- */
.banner-invite {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    margin: 16px; border-radius: 20px; padding: 24px; color: #000;
    position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(241,196,15,0.3);
}
.banner-invite::after {
    content: '\f0c0'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: -20px; bottom: -30px; font-size: 120px; opacity: 0.15;
}
.banner-invite h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.banner-invite p { font-size: 13px; font-weight: 600; margin-bottom: 20px; max-width: 250px; }
.link-box { display: flex; background: rgba(0,0,0,0.1); border-radius: 12px; padding: 4px; border: 1px solid rgba(0,0,0,0.2); position: relative; z-index: 2; }
.link-box input { flex: 1; min-width: 0; background: transparent; border: none; font-weight: 700; font-size: 14px; color: #000; padding: 0 12px; outline: none; }
.link-box button { background: #000; color: var(--gold); border-radius: 8px; padding: 10px 20px; font-weight: 800; font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px 24px; }
.stat-c { background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 16px; padding: 16px; }
.stat-c .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.stat-c .val { font-size: 24px; font-weight: 900; color: #fff; word-break: break-all; }
.stat-c .val.gold { color: var(--gold); }
.stat-c .val.green { color: #2ecc71; }
.team-section { background: var(--bg-surface); border-radius: 20px; margin: 0 16px 24px; border: 1px solid var(--border-glass); overflow: hidden; }
.ts-head { padding: 16px; border-bottom: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; }
.ts-head h4 { font-size: 15px; font-weight: 800; }
.team-level { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.team-level:last-child { border-bottom: none; }
.tl-left { display: flex; align-items: center; gap: 12px; }
.tl-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(241,196,15,0.1); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.tl-info h5 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.tl-info p { font-size: 12px; color: var(--text-dim); }
.tl-right { text-align: right; }
.tl-right .amt { font-size: 14px; font-weight: 800; color: #2ecc71; }
.tl-right .peeps { font-size: 11px; color: var(--text-dim); }
@media (min-width: 769px) {
    .banner-invite { margin: 24px 30px; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); padding: 0 30px 24px; }
    .team-section { margin: 0 30px 24px; }
}

/* ---------- Auth ---------- */
.auth-layout {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: radial-gradient(circle at center, var(--bg-surface) 0%, var(--bg-main) 100%);
}
.auth-card {
    width: 100%; max-width: 420px; background: var(--bg-surface);
    border: 1px solid var(--border-glass); border-radius: 24px; padding: 30px 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6); position: relative; overflow: hidden;
}
.auth-card::before {
    content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(241,196,15,0.1), transparent 70%); border-radius: 50%;
}
.auth-header { text-align: center; margin-bottom: 30px; position: relative; z-index: 2; }
.auth-header svg, .auth-header img { height: 48px; margin-bottom: 16px; }
.auth-header h2 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.auth-header p { font-size: 14px; color: var(--text-dim); }
.auth-card form, .auth-card .auth-footer { position: relative; z-index: 2; }
.form-group-royal { margin-bottom: 20px; }
.form-label-royal { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.input-wrap {
    display: flex; align-items: center; background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-glass); border-radius: 12px; padding: 0 16px; transition: 0.3s;
}
.input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 10px rgba(241,196,15,0.2); }
.input-wrap > i { color: var(--text-dim); font-size: 18px; margin-right: 12px; width: 18px; text-align: center; }
.input-wrap input, .input-wrap select {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: #fff; font-size: 15px; padding: 14px 0;
}
.input-wrap select option { background: var(--bg-surface); color: #fff; }
.input-wrap input::placeholder { color: rgba(255,255,255,0.35); }
.input-wrap .pw-toggle { margin-right: 0; margin-left: 12px; cursor: pointer; }
.forgot-link { display: block; text-align: right; color: var(--gold); font-size: 13px; font-weight: 600; margin-top: -10px; margin-bottom: 24px; }
.auth-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-dim); }
.auth-footer a { color: var(--gold); font-weight: 700; margin-left: 4px; }
.otp-btn { background: var(--gold); color: #000; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.auth-terms { font-size: 11px; color: var(--text-dim); margin-bottom: 20px; display: flex; gap: 8px; align-items: flex-start; }
.auth-terms a { color: var(--gold); }
.auth-error { color: #e74c3c; font-size: 12px; font-weight: 600; margin-top: 6px; display: block; }

/* ---------- Game screen ---------- */
.game-layout { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
    .game-layout { flex-direction: row; align-items: flex-start; padding: 20px 30px; gap: 20px; }
    .game-left { flex: 1; min-width: 0; }
    .game-right { width: 400px; flex-shrink: 0; }
}
.game-canvas {
    background: radial-gradient(circle at center, #3a2020 0%, #1a0a0a 100%);
    border: 2px solid var(--border-glass); border-radius: 20px;
    margin: 16px; height: 220px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden; box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}
@media (min-width: 1024px) { .game-canvas { margin: 0 0 20px; height: 300px; } }
.period-info { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; }
.period-box { background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border-glass); font-size: 12px; }
.timer { font-size: 24px; font-weight: 900; color: var(--gold); font-family: monospace; text-shadow: 0 0 10px rgba(241,196,15,0.5); }
.dice-container { display: flex; gap: 16px; }
.dice {
    width: 60px; height: 60px; background: linear-gradient(135deg, #ffffff, #e0e0e0); border-radius: 12px;
    box-shadow: inset -5px -5px 15px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #c0392b;
}
.dice:nth-child(1) { transform: rotate(-10deg); }
.dice:nth-child(2) { transform: rotate(5deg) translateY(-10px); }
.dice:nth-child(3) { transform: rotate(15deg); }
@media (min-width: 1024px) { .dice { width: 90px; height: 90px; font-size: 50px; } }
.betting-panel { background: var(--bg-surface); margin: 0 16px 24px; border-radius: 20px; padding: 16px; border: 1px solid var(--border-glass); }
@media (min-width: 1024px) { .betting-panel { margin: 0; } }
.cat-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.cat-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
    border: 1px solid var(--border-glass); border-radius: 12px; padding: 12px 4px;
    text-align: center; cursor: pointer; transition: 0.2s; color: #fff;
}
.cat-btn:active, .cat-btn.selected { transform: scale(0.95); background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; border-color: var(--gold-light); }
.cat-btn .title { font-weight: 800; font-size: 13px; display: block; margin-bottom: 4px; }
.cat-btn .odds { font-size: 10px; font-weight: 600; opacity: 0.8; }
.grid-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; text-align: center; }
.num-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.num-btn { background: rgba(0,0,0,0.4); border: 1px solid var(--border-glass); border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; transition: 0.2s; }
.num-btn:active, .num-btn.selected { background: var(--red); border-color: #ff6b81; }
.num-btn .num { font-size: 18px; font-weight: 900; color: #fff; display: block; }
.num-btn .odds { font-size: 9px; color: var(--gold); font-weight: 700; }
.tabs { display: flex; border-bottom: 1px solid var(--border-glass); margin-bottom: 16px; }
.tab { flex: 1; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.history-table { width: 100%; font-size: 12px; text-align: center; border-collapse: collapse; }
.history-table th { color: var(--text-dim); padding: 8px; border-bottom: 1px solid var(--border-glass); text-transform: uppercase; font-size: 10px; }
.history-table td { padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.h-sum { color: var(--gold); font-weight: 800; font-size: 14px; }
.bet-bar {
    position: fixed; bottom: calc(65px + var(--safe-bottom)); left: 0; right: 0; width: 100%; max-width: 1400px; margin: 0 auto;
    background: rgba(26,10,10,0.95); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-glass); padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 900;
}
@media (min-width: 769px) { .bet-bar { bottom: 0; padding: 16px 30px; } }
.bb-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.bb-amt-wrap { display: flex; align-items: center; background: rgba(0,0,0,0.5); border: 1px solid var(--border-glass); border-radius: 10px; padding: 0 12px; }
.bb-amt-wrap input { width: 70px; background: transparent; border: none; color: #fff; font-weight: 800; font-size: 16px; padding: 10px 0; outline: none; }
.bb-amt-wrap span { color: var(--text-dim); font-size: 12px; font-weight: 700; margin-left: 4px; }
.bb-info { display: flex; flex-direction: column; }
.bb-info .total { color: var(--gold); font-size: 16px; font-weight: 900; }
.bb-info .count { font-size: 11px; color: var(--text-dim); }
.btn-confirm {
    background: linear-gradient(135deg, var(--red-dark), var(--red)); color: #fff;
    border: none; padding: 12px 24px; border-radius: 10px; font-weight: 800; font-size: 14px;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.4); cursor: pointer;
}

/* ==========================================================================
   Compatibility layer — existing app markup in the royal palette
   ========================================================================== */
.badge { padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; display: inline-block; }
.badge.big, .badge--success, .badge.bg--success { background: #2ecc71; }
.badge.small, .badge--danger, .badge.bg--danger { background: #e74c3c; }
.badge.odd { background: #9b59b6; }
.badge.even { background: #3498db; }
.badge--warning, .badge.bg--warning { background: #f39c12; }
.badge--primary, .badge.bg--primary { background: var(--gold); color: #000; }

.text--base, .text--gold { color: var(--gold) !important; }
.text--success { color: #2ecc71 !important; }
.text--danger { color: #e74c3c !important; }
.text--warning { color: #f39c12 !important; }
.text-success { color: #2ecc71 !important; }
.text-danger { color: #e74c3c !important; }
.bg--base { background: var(--gold) !important; color: #000 !important; }

/* Bootstrap surfaces */
.card-body, .card-header, .card-footer { background-color: transparent; }
.card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; color: var(--text-main);
}
.card-header, .card-footer { border-color: var(--border-glass); }
.card-title, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: #fff; }
.table { color: var(--text-main); border-color: var(--border-glass); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text-main); border-bottom-color: rgba(255,255,255,0.06); box-shadow: none; }
.table thead th { color: var(--text-dim); text-transform: uppercase; font-size: 11px; font-weight: 700; }
.table-responsive, .table--responsive { overflow-x: auto; }

/* Forms */
.form-control, .form--control, .form-select, textarea.form-control, .input-group-text {
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-glass);
    color: #fff; border-radius: 12px; padding: 12px 16px; font-size: 14px;
}
.form-control:focus, .form--control:focus, .form-select:focus {
    background: rgba(0,0,0,0.4); border-color: var(--gold); color: #fff;
    box-shadow: 0 0 10px rgba(241,196,15,0.2);
}
.form-control::placeholder, .form--control::placeholder { color: rgba(255,255,255,0.35); }
.form-control option, .form-select option, select.form--control option { background: var(--bg-surface); color: #fff; }
.form-label, .form-group label { color: var(--text-dim); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.form-group { margin-bottom: 18px; }
.input-group-text { color: var(--gold); }

/* Buttons */
.cmn-btn, .cmn--btn, .btn--base {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000; padding: 12px 24px; border-radius: 12px; font-weight: 800;
    font-size: 14px; box-shadow: 0 4px 15px rgba(241,196,15,0.3);
    text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; display: inline-block; text-align: center;
}
.cmn-btn:hover, .cmn--btn:hover, .btn--base:hover { color: #000; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(241,196,15,0.5); }
.btn--danger { background: var(--red); color: #fff; border-radius: 12px; }
.btn--success { background: #2ecc71; color: #000; border-radius: 12px; }
.btn-sm { padding: 6px 14px; font-size: 12px; letter-spacing: 0; }

/* Pagination */
.pagination { justify-content: center; gap: 6px; flex-wrap: wrap; }
.page-link {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    color: var(--text-dim); border-radius: 10px; font-weight: 700;
}
.page-link:hover { background: rgba(241,196,15,0.1); color: var(--gold); border-color: var(--gold-dark); }
.page-item.active .page-link { background: var(--gold); border-color: var(--gold); color: #000; }
.page-item.disabled .page-link { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.25); }

/* Modals */
.modal-content { background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 20px; color: var(--text-main); }
.modal-header, .modal-footer { border-color: var(--border-glass); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Legacy momgm component names kept alive in the royal palette */
.mgm-card { background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: 16px; padding: 16px; margin: 0 16px 16px; color: var(--text-main); }
.mgm-card__title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.mgm-content { padding-bottom: 20px; }
.mgm-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000;
    padding: 12px 24px; border-radius: 12px; font-weight: 800; display: inline-block; text-align: center;
}
.mgm-btn--outline { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid var(--border-glass); }
.mgm-page-banner {
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    padding: 24px 16px; text-align: center;
}
.mgm-page-banner h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.mgm-page-banner ul { display: flex; gap: 8px; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.7); }
.mgm-page-banner ul a { color: var(--gold); }
.mgm-page-banner ul li + li::before { content: '/'; margin-right: 8px; opacity: 0.5; }
.mgm-field { margin-bottom: 18px; }
.mgm-balance { color: var(--gold); font-weight: 800; }

.dashboard--content-item, .profile-field, .deposit-info, .rule-card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; padding: 16px; margin-bottom: 16px; color: var(--text-main);
}
.rule-card__head, .deposit-info__title { color: var(--gold); font-weight: 800; }
.rule-heading { color: #fff; font-weight: 800; }
.rule-pill, .rule-odds, .pill-side {
    background: rgba(241,196,15,0.1); border: 1px solid var(--border-glass);
    color: var(--gold); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; display: inline-block;
}
.my-menu-item {
    display: flex; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid var(--border-glass); color: #fff;
}
.my-menu-icon {
    width: 36px; height: 36px; border-radius: 10px; margin-right: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.3));
    border: 1px solid var(--gold-dark); color: var(--gold);
}
.my-menu-text { flex: 1; font-weight: 600; }
.my-menu-arrow { color: var(--text-dim); }

/* Dashboard breadcrumb used by layouts.master */
.breadcrumb-area { padding: 20px 16px 0; }
.breadcrumb-area .title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.breadcrumb-area .breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--text-dim); margin: 0; }
.breadcrumb-area .breadcrumb a { color: var(--gold); }
.breadcrumb-area .breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: 0.5; }
@media (min-width: 769px) { .breadcrumb-area { padding: 24px 30px 0; } }
.dashborad--content, .main--content { padding-bottom: 20px; }

/* Utility */
.royal-section { padding: 0 16px 24px; }
@media (min-width: 769px) { .royal-section { padding: 0 30px 24px; } }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.empty-state i { font-size: 40px; color: var(--gold-dark); opacity: 0.5; margin-bottom: 12px; display: block; }

/* Dashboard page padding wrapper (set via @section('mainClass')) */
.royal-dash { padding: 16px 16px 24px; }
@media (min-width: 769px) { .royal-dash { padding: 24px 30px 30px; } }
.royal-dash .container, .royal-dash .container-fluid { padding-left: 0; padding-right: 0; max-width: 100%; }

/* main.css spacing utilities the dashboard views still reference */
.pt-120 { padding-top: 24px !important; }
.pb-120 { padding-bottom: 24px !important; }
.pt-60 { padding-top: 16px !important; }
.pb-60 { padding-bottom: 16px !important; }
.section-header__title { font-size: 20px; font-weight: 800; color: #fff; }
.section-header__subtitle { color: var(--gold); font-weight: 700; font-size: 13px; }

/* ---------- Sidebar: grouped navigation ---------- */
.sidebar-logo { display: flex; justify-content: center; }

.sidebar-balance {
    margin: 14px 16px 4px; padding: 12px 14px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(241,196,15,.12), rgba(241,196,15,.03));
    border: 1px solid rgba(241,196,15,.25);
    display: flex; flex-direction: column; gap: 2px;
}
.sidebar-balance .sb-label {
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-dim);
}
.sidebar-balance .sb-amount { font-size: 20px; font-weight: 900; color: var(--gold); }

/* The menu is now long enough to overflow on short screens. */
.sidebar-nav { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(241,196,15,.25); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.sidebar-group {
    display: block; padding: 14px 20px 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: rgba(255,255,255,.35);
}
.sidebar-group:first-child { padding-top: 4px; }

/* Tighter than the mockup's single-level list, so the full menu fits. */
.sidebar-nav-item { padding: 11px 20px; margin-bottom: 2px; font-size: 14px; gap: 14px; }
.sidebar-nav-item i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-nav-item.active { position: relative; }
.sidebar-nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; background: var(--gold); border-radius: 0 3px 3px 0;
}

.sidebar-logout {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; margin: 8px 10px 14px; border-radius: 12px;
    color: #e74c3c; font-weight: 700; font-size: 14px;
    border-top: 1px solid var(--border-glass); border-radius: 0;
    transition: .2s;
}
.sidebar-logout:hover { background: rgba(231,76,60,.08); color: #e74c3c; }
.sidebar-logout i { font-size: 17px; width: 20px; text-align: center; }

/* ---------- Game Zone: platform content ---------- */
.floor-intro { padding: 22px 16px 4px; }
.floor-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(241,196,15,.1); border: 1px solid rgba(241,196,15,.3);
    color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px;
}
.floor-intro h1 { font-size: 24px; font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 10px; }
.floor-intro p { font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 640px; }

.house-strip {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin: 4px 16px 8px; padding: 18px 16px;
    background: linear-gradient(135deg, rgba(192,57,43,.18), rgba(0,0,0,.25));
    border: 1px solid var(--border-glass); border-radius: 20px;
}
.house-stat { text-align: center; }
.house-stat .hs-icon { font-size: 20px; color: var(--gold); margin-bottom: 6px; }
.house-stat .hs-val { font-size: 20px; font-weight: 900; color: #fff; word-break: break-all; }
.house-stat .hs-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-dim); margin-top: 2px;
}

.feature-grid, .step-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 16px 8px;
}
.feature-card, .step-card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; padding: 18px; position: relative; transition: .25s;
}
.feature-card:hover, .step-card:hover { border-color: var(--gold-dark); transform: translateY(-3px); }
.fc-icon, .sc-icon {
    width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: linear-gradient(135deg, rgba(241,196,15,.15), rgba(192,57,43,.12));
    border: 1px solid rgba(241,196,15,.25); color: var(--gold);
}
.feature-card h4, .step-card h4 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.feature-card p, .step-card p { font-size: 12.5px; color: var(--text-dim); line-height: 1.65; }

.step-num {
    position: absolute; top: 14px; right: 16px;
    font-size: 30px; font-weight: 900; color: rgba(241,196,15,.14); line-height: 1;
}

.promo-duo { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 16px 8px; }
.promo-tile {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 18px; padding: 20px; display: block; transition: .25s;
}
.promo-tile:hover { transform: translateY(-3px); border-color: var(--gold); }
.promo-tile > i { font-size: 24px; color: var(--gold); margin-bottom: 10px; display: block; }
.promo-tile h4 { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.promo-tile p { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 12px; }
.promo-cta { font-size: 13px; font-weight: 800; color: var(--gold); }
.promo-tile--gold {
    background: linear-gradient(135deg, rgba(241,196,15,.14), rgba(212,172,13,.05));
    border-color: rgba(241,196,15,.35);
}

.faq-list {
    margin: 0 16px 8px; background: var(--bg-surface);
    border: 1px solid var(--border-glass); border-radius: 18px; overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border-glass); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
    width: 100%; background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 18px; text-align: left;
    font-size: 14px; font-weight: 700; color: #fff;
}
.faq-q i { color: var(--gold); font-size: 13px; transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a p { padding: 0 18px 16px; font-size: 12.5px; color: var(--text-dim); line-height: 1.75; }

.responsible-note {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 12px 16px 30px; padding: 16px 18px; border-radius: 16px;
    background: rgba(241,196,15,.06); border: 1px solid rgba(241,196,15,.22);
    font-size: 12.5px; color: var(--text-dim); line-height: 1.7;
}
.responsible-note i { color: var(--gold); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.responsible-note strong { color: var(--gold); }
.responsible-note a { color: var(--gold); font-weight: 700; text-decoration: underline; }

@media (min-width: 600px) {
    .feature-grid, .step-grid { grid-template-columns: repeat(2, 1fr); }
    .promo-duo { grid-template-columns: repeat(2, 1fr); }
    .house-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) {
    .floor-intro { padding: 30px 30px 6px; }
    .floor-intro h1 { font-size: 30px; }
    .house-strip { margin: 6px 30px 10px; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); padding: 0 30px 10px; }
    .step-grid { grid-template-columns: repeat(4, 1fr); padding: 0 30px 10px; }
    .promo-duo { padding: 14px 30px 10px; }
    .faq-list { margin: 0 30px 10px; }
    .responsible-note { margin: 14px 30px 34px; }
}

/* ---------- Home CMS sections ---------- */
.section-lede {
    padding: 0 16px; margin: -4px 0 14px;
    font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 680px;
}

/* About */
.about-block { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 8px 16px 20px; }
.about-media { border-radius: 20px; overflow: hidden; border: 1px solid var(--border-glass); }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-body h3 { font-size: 22px; font-weight: 900; color: #fff; margin: 10px 0; line-height: 1.3; }
.about-body > p { font-size: 13px; color: var(--text-dim); line-height: 1.75; margin-bottom: 16px; }
.about-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.about-points strong { display: block; color: #fff; font-size: 13.5px; margin-bottom: 2px; }
.ap-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: rgba(241,196,15,.1); border: 1px solid rgba(241,196,15,.25); color: var(--gold);
}

/* CTA band */
.cta-band {
    margin: 8px 16px 20px; padding: 30px 22px; border-radius: 20px; text-align: center;
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    background-size: cover; background-position: center;
    border: 1px solid var(--border-glass);
}
.cta-band h3 { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 16px; line-height: 1.35; }
.cta-band .btn-primary { display: inline-block; }

/* Referral band (reuses .banner-invite) */
.invite-copy { font-size: 13px; font-weight: 600; margin-bottom: 18px; max-width: 340px; position: relative; z-index: 2; }
.invite-copy p { margin-bottom: 6px; }
.invite-cta { align-items: center; justify-content: space-between; padding: 12px 14px; color: #000; }
.invite-cta span { font-size: 13px; font-weight: 700; }
.invite-cta__go { color: var(--gold); background: #000; padding: 8px 14px; border-radius: 8px; font-size: 12px; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 16px 20px; }
.testimonial-card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; padding: 20px; position: relative;
}
.tc-quote { color: rgba(241,196,15,.25); font-size: 22px; margin-bottom: 10px; display: block; }
.testimonial-card p { font-size: 13px; color: var(--text-dim); line-height: 1.75; margin-bottom: 16px; }
.tc-author { display: flex; align-items: center; gap: 10px; }
.tc-av {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    color: #000; font-weight: 800; font-size: 15px;
}
.tc-av img { width: 100%; height: 100%; object-fit: cover; }
.tc-author span { font-size: 13.5px; font-weight: 700; color: #fff; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 16px 20px; }
.blog-card {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; overflow: hidden; display: block; transition: .25s;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.bc-thumb { height: 150px; overflow: hidden; }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-body { padding: 14px 16px 16px; }
.bc-date { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.blog-card h4 { font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.45; margin-top: 6px; }

@media (min-width: 600px) {
    .testimonial-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
    .section-lede { padding: 0 30px; }
    .about-block { grid-template-columns: 1fr 1.15fr; align-items: center; gap: 30px; padding: 10px 30px 26px; }
    .cta-band { margin: 10px 30px 26px; padding: 40px 30px; }
    .cta-band h3 { font-size: 26px; }
    .testimonial-grid { grid-template-columns: repeat(3, 1fr); padding: 0 30px 26px; }
    .blog-grid { grid-template-columns: repeat(3, 1fr); padding: 0 30px 26px; }
}

/* ==========================================================================
   Audit fixes — markup that carried no rule once the legacy sheets were
   dropped from the shell, restyled in the royal palette.
   ========================================================================== */

/* Cookie consent card (rendered on every page by layouts/mgm) */
.cookies-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
    transition: opacity .35s ease, transform .35s ease;
}
.cookies-card__content { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin: 0; }
/* `.hide` is what the layout script toggles to animate the card away. */
.cookies-card.hide { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* Spacing utilities left over from main.css */
.mb-30 { margin-bottom: 24px; }
.mb-50 { margin-bottom: 32px; }
.mb-none-30 { margin-bottom: -24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.font-weight-bold { font-weight: 800; color: #fff; }
.bg_img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.cmn-list { list-style: none; padding: 0; margin: 0; }
.cmn-list li { padding: 6px 0; color: var(--text-dim); font-size: 13px; }

/* wow.js is not loaded in this theme; keep animated elements visible. */
.wow, .fadeInUp, .fadeInLeft, .fadeInRight { visibility: visible !important; opacity: 1 !important; }

/* Blog listing cards */
.post-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    overflow: hidden;
    transition: .25s;
    display: flex;
    flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.post-card__thumb { position: relative; height: 180px; overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__date {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(0, 0, 0, .75); color: var(--gold);
    font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 8px;
}
.post-card__content { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-size: 16px; font-weight: 800; line-height: 1.45; }
.post-card__title a { color: #fff; }
.post-card__title a:hover { color: var(--gold); }
.post-card__content .cmn-btn { align-self: flex-start; margin-top: auto; }

/* Contact page */
.contact-item {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 16px; padding: 22px; height: 100%; text-align: center;
}
.contact-item i { font-size: 26px; color: var(--gold); }
.contact-item h5 { font-size: 15px; font-weight: 800; color: #fff; }
.contact-item p { font-size: 13px; color: var(--text-dim); margin: 0; word-break: break-word; }

.contact-wrapper {
    background: var(--bg-surface); border: 1px solid var(--border-glass);
    border-radius: 20px; overflow: hidden;
}
.contact-thumb { min-height: 260px; }
.contact-form-wrapper { padding: 28px 24px; }
.contact-form-wrapper h2 { font-size: 20px; margin-bottom: 6px; }
.contact-form textarea.form-control { min-height: 130px; }

@media (max-width: 991px) {
    .contact-thumb { min-height: 180px; }
}

/* Referral ID block on the Agent page */
.ref-code-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
    position: relative; z-index: 2;
}
.ref-code-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: rgba(0, 0, 0, .6); }
.ref-code {
    font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #000;
    font-variant-numeric: tabular-nums; flex: 1; min-width: 0;
}
.ref-code-copy {
    background: #000; color: var(--gold); border-radius: 8px;
    padding: 8px 16px; font-weight: 800; font-size: 12px; white-space: nowrap;
}

/* Game card icons (Font Awesome, replacing the old emoji) */
.gc-vis > i {
    font-size: 34px;
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    transition: transform .25s ease;
}
.gc:hover .gc-vis > i { transform: scale(1.12); }
.gc-vis::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none;
}
.gc-badge { display: inline-flex; align-items: center; gap: 5px; z-index: 2; }
.gc-badge i { font-size: 9px; }
.games-grid--lg .gc-vis > i { font-size: 44px; }
@media (min-width: 769px) {
    .games-grid--lg .gc-vis > i { font-size: 54px; }
}

/* ---------- Landing hero (signed-out home) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 40px 16px 34px;
    background:
        radial-gradient(circle at 20% 0%, rgba(192, 57, 43, .35), transparent 55%),
        linear-gradient(160deg, #2a1515 0%, #110808 70%);
    border-bottom: 1px solid var(--border-glass);
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 {
    font-size: 30px; font-weight: 900; color: #fff;
    line-height: 1.2; margin: 6px 0 12px;
}
.hero p { font-size: 14px; color: var(--text-dim); line-height: 1.75; margin-bottom: 24px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero__actions .btn-primary { display: inline-block; }
.hero__ghost {
    display: inline-block; padding: 12px 24px; border-radius: 12px;
    border: 1px solid var(--border-glass); background: rgba(255, 255, 255, .04);
    color: #fff; font-weight: 800; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px; transition: .25s;
}
.hero__ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.hero__points { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero__points li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.hero__points i { color: var(--gold); font-size: 13px; }

/* Soft gold bloom behind the hero copy */
.hero__glow {
    position: absolute; top: -80px; right: -60px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 196, 15, .16), transparent 65%);
    pointer-events: none; z-index: 1;
}

@media (min-width: 769px) {
    .hero { padding: 70px 30px 60px; }
    .hero h1 { font-size: 46px; }
    .hero p { font-size: 15.5px; }
    .hero__glow { width: 460px; height: 460px; top: -110px; right: -80px; }
}

/* ==========================================================================
   Public site chrome (signed out) — header + footer instead of the app shell
   ========================================================================== */
.public-wrapper {
    min-height: 100vh; width: 100%; max-width: 1400px; margin: 0 auto;
    background: var(--bg-main);
    display: flex; flex-direction: column;
    box-shadow: 0 0 50px rgba(192, 57, 43, .1);
}
.public-main { flex: 1; min-width: 0; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(26, 10, 10, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-glass);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 16px;
}
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }

.site-nav { display: none; align-items: center; gap: 26px; }
.site-nav > a {
    font-size: 14px; font-weight: 600; color: var(--text-dim);
    transition: .2s; white-space: nowrap;
}
.site-nav > a:hover, .site-nav > a.active { color: var(--gold); }
.site-nav__auth { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 10px; }
.site-header__login {
    font-size: 13px; font-weight: 700; color: #fff;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--border-glass); transition: .2s;
}
.site-header__login:hover { border-color: var(--gold); color: var(--gold); }
.site-header__register { padding: 9px 18px; font-size: 12px; }

.site-header__burger {
    background: rgba(255, 255, 255, .06); border: 1px solid var(--border-glass);
    color: #fff; width: 40px; height: 40px; border-radius: 10px; font-size: 16px;
}

/* Mobile drawer */
@media (max-width: 991px) {
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bg-surface); border-bottom: 1px solid var(--border-glass);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    }
    .site-nav:not(.open) { display: none; }
    .site-nav.open { display: flex; }
    .site-nav > a {
        padding: 13px 20px; font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }
    .site-nav > a:last-of-type { border-bottom: none; }
    .site-header__login, .site-header__register { display: none; }
}

@media (min-width: 992px) {
    .site-header__inner { padding: 16px 30px; }
    .site-nav { display: flex; }
    .site-header__burger { display: none; }
}

/* ---------- footer ---------- */
.site-footer {
    background: linear-gradient(180deg, var(--bg-surface) 0%, #1a0d0d 100%);
    border-top: 1px solid var(--border-glass);
    margin-top: 20px;
}
.site-footer__grid {
    display: grid; grid-template-columns: 1fr; gap: 28px;
    padding: 36px 16px 28px;
}
.site-footer__brand p {
    font-size: 12.5px; color: var(--text-dim); line-height: 1.75;
    margin: 14px 0 16px; max-width: 380px;
}
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--border-glass);
    color: var(--text-dim); font-size: 15px; transition: .2s;
}
.site-footer__social a:hover { background: rgba(241, 196, 15, .12); color: var(--gold); border-color: var(--gold-dark); }

.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h5 {
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.site-footer__col a { font-size: 13px; color: var(--text-dim); transition: .2s; }
.site-footer__col a:hover { color: var(--gold); }

.site-footer__bar {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; justify-content: space-between;
    padding: 16px; border-top: 1px solid var(--border-glass);
    font-size: 12px; color: var(--text-dim);
}
.site-footer__age { display: flex; align-items: center; gap: 7px; color: var(--gold); font-weight: 600; }

@media (min-width: 600px) {
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 46px 30px 34px; gap: 36px; }
    .site-footer__bar { padding: 18px 30px; }
}

/* ---------- public bottom nav (mobile only) ---------- */
.public-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 1400px; margin: 0 auto;
    background: rgba(26, 10, 10, .96);
    backdrop-filter: blur(15px);
    display: flex; justify-content: space-around;
    height: 65px; padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--border-glass);
    z-index: 1000;
}
@media (min-width: 769px) { .public-bottom-nav { display: none; } }

/* Leave room for the bar so the footer is never trapped underneath it. */
@media (max-width: 768px) {
    .public-wrapper { padding-bottom: calc(65px + var(--safe-bottom)); }
}

/* ==========================================================================
   Landing polish — rhythm, hierarchy and touch targets
   ========================================================================== */

/* One consistent vertical rhythm between landing blocks instead of each
   section bringing its own ad-hoc margin. */
.public-main .section-title { margin: 34px 0 14px; }
.public-main .section-title h3 { font-size: 20px; letter-spacing: -.2px; }
.public-main .section-lede { margin: -6px 0 18px; }

.public-main .house-strip { margin-top: 26px; }
.public-main .cta-band,
.public-main .banner-invite,
.public-main .about-block { margin-top: 30px; }

/* Cards lift as one family */
.feature-card, .step-card, .testimonial-card, .blog-card, .gc, .promo-tile, .stat-c {
    will-change: transform;
}
.feature-card, .step-card { min-height: 100%; }

/* Numbers should read as data, not prose */
.house-stat .hs-val, .stat-c .val, .bmc-amt, .bal-amt {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

/* Section headings get a touch more presence on the landing page */
.public-main .section-title h3::before { height: 20px; width: 4px; }

/* Comfortable tap targets on small screens */
@media (max-width: 600px) {
    .hero h1 { font-size: 27px; }
    .hero__actions { gap: 10px; }
    .hero__actions .btn-primary,
    .hero__ghost { flex: 1 1 auto; text-align: center; padding: 13px 18px; }
    .hero__points { gap: 6px 16px; }
    .hero__points li { font-size: 12px; }

    .feature-card, .step-card, .testimonial-card { padding: 16px; }
    .house-strip { padding: 16px 12px; gap: 14px 8px; }
    .house-stat .hs-val { font-size: 17px; }
    .house-stat .hs-lbl { font-size: 9px; }

    .faq-q { padding: 15px 16px; font-size: 13.5px; }
    .cta-band { padding: 26px 18px; }
    .cta-band h3 { font-size: 18px; }
    .banner-invite { padding: 20px; }
    .banner-invite h3 { font-size: 19px; }
}

/* Very small phones: keep the 3-up game grid from crushing */
@media (max-width: 360px) {
    .games-grid { gap: 8px; }
    .gc-name { font-size: 12px; padding: 8px 4px; }
    .gc-vis { height: 78px; }
    .gc-vis > i { font-size: 28px; }
}

/* ==========================================================================
   LANDING PAGE
   One container governs the width of every band, so sections line up instead
   of each carrying its own margins. Bands alternate to break the stack.
   ========================================================================== */
.land-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section partials are written for the app's edge-to-edge surface. Inside the
   landing container that padding fights the container, so it is neutralised
   here rather than duplicated in every partial. */
.land-container .section-title,
.land-container .section-lede,
.land-container .games-grid,
.land-container .feature-grid,
.land-container .step-grid,
.land-container .house-strip,
.land-container .stats-grid,
.land-container .testimonial-grid,
.land-container .blog-grid,
.land-container .faq-list,
.land-container .banner-invite,
.land-container .cta-band,
.land-container .about-block,
.land-container .team-section,
.land-container .promo-duo,
.land-container .card,
.land-container .responsible-note {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.land-container .banner-invite,
.land-container .cta-band,
.land-container .responsible-note { padding: 28px; }
.land-container .card { padding: 0; }

.land-band {
    position: relative;
    padding: 54px 0;
    border-top: 1px solid rgba(241, 196, 15, .07);
}
.land-band:first-of-type { border-top: none; }

/* Alternating tone gives the page a rhythm without extra markup. */
.land-band:nth-of-type(even) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0)),
        var(--bg-main);
}

/* Marketing headings read centred; the app's left-aligned bar style is for
   dashboards, not a landing page. */
.land-band .section-title {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin: 0 0 10px;
}
.land-band .section-title h3 {
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.4px;
    justify-content: center;
}
.land-band .section-title h3::before { display: none; }
.land-band .section-lede {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 620px;
    font-size: 14px;
}
.land-band .section-title + .games-grid,
.land-band .section-title + .feature-grid,
.land-band .section-title + .step-grid { margin-top: 22px; }

/* ---------- hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 60px;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(192, 57, 43, .38), transparent 58%),
        radial-gradient(ellipse at 85% 100%, rgba(241, 196, 15, .10), transparent 55%),
        linear-gradient(165deg, #2a1515 0%, #110808 72%);
}
/* Faint grid keeps the large dark area from looking empty. */
.hero__bg {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(241, 196, 15, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 196, 15, .045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 72%);
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

.hero h1 {
    font-size: 32px; font-weight: 900; color: #fff;
    line-height: 1.14; letter-spacing: -1px; margin: 14px 0 14px;
}
.hero p { font-size: 15px; color: var(--text-dim); line-height: 1.75; margin-bottom: 26px; max-width: 520px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero__ghost {
    display: inline-block; padding: 12px 24px; border-radius: 12px;
    border: 1px solid var(--border-glass); background: rgba(255, 255, 255, .04);
    color: #fff; font-weight: 800; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px; transition: .25s;
}
.hero__ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero__points li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.hero__points i { color: var(--gold); font-size: 13px; }

/* Hero art: real game cards, fanned. */
.hero__visual { position: relative; display: none; }
.hero__cards { display: flex; gap: 16px; justify-content: center; perspective: 1000px; }
.hero__card {
    width: 132px; height: 176px; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .55);
    position: relative; overflow: hidden;
    transition: transform .35s ease;
}
.hero__card::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .2), transparent 62%);
}
.hero__card i { font-size: 40px; color: #fff; text-shadow: 0 4px 14px rgba(0, 0, 0, .5); z-index: 1; }
.hero__card span { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .3px; z-index: 1; }
.hero__card:nth-child(1) { transform: rotate(-8deg) translateY(10px); }
.hero__card:nth-child(2) { transform: rotate(0deg) translateY(-14px) scale(1.06); z-index: 2; }
.hero__card:nth-child(3) { transform: rotate(8deg) translateY(10px); }
.hero__visual:hover .hero__card:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
.hero__visual:hover .hero__card:nth-child(3) { transform: rotate(12deg) translateY(4px); }

.hero__chip {
    position: absolute; display: flex; align-items: center; gap: 8px;
    background: rgba(26, 10, 10, .92); backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass); border-radius: 14px;
    padding: 10px 15px; font-size: 12px; color: var(--text-dim); font-weight: 600;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
.hero__chip strong { color: var(--gold); font-size: 16px; font-weight: 900; }
.hero__chip--payout { bottom: -6px; left: 0; flex-direction: column; gap: 0; align-items: flex-start; }
.hero__chip--live { top: -10px; right: 0; }
.hero__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #2ecc71;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); animation: heroPulse 2s infinite;
}
@keyframes heroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); }
    70%  { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

@media (min-width: 992px) {
    .hero { padding: 92px 0 96px; }
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
    .hero h1 { font-size: 50px; }
    .hero p { font-size: 16px; }
    .hero__visual { display: block; }
    .land-band { padding: 74px 0; }
    .land-band .section-title h3 { font-size: 32px; }
}

/* ---------- landing: component refinements ---------- */

/* Stats read as figures, not boxes */
.land-band--statistics .house-strip {
    background: none;
    border: none;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
    border-radius: 0;
    padding: 30px 0;
}
.land-band--statistics .house-stat { position: relative; }
.land-band--statistics .house-stat + .house-stat::before {
    content: ''; position: absolute; left: -1px; top: 12%;
    height: 76%; width: 1px; background: var(--border-glass);
}
.land-band--statistics .hs-icon { font-size: 17px; opacity: .85; }
.land-band--statistics .hs-val { font-size: 26px; }

/* Feature cards get a gold edge on hover instead of a flat border swap */
.land-band .feature-card,
.land-band .step-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    position: relative;
    overflow: hidden;
}
.land-band .feature-card::before,
.land-band .step-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0; transition: opacity .28s ease;
}
.land-band .feature-card:hover::before,
.land-band .step-card:hover::before { opacity: 1; }
.land-band .fc-icon, .land-band .sc-icon { width: 48px; height: 48px; font-size: 21px; border-radius: 15px; }
.land-band .feature-card h4, .land-band .step-card h4 { font-size: 16px; }

/* Steps: a connecting rail across the row on desktop */
@media (min-width: 769px) {
    .land-band--how_work .step-grid { position: relative; }
    .land-band--how_work .step-grid::before {
        content: ''; position: absolute; top: 42px; left: 12%; right: 12%; height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
        opacity: .45;
    }
    .land-band--how_work .step-card { background: var(--bg-surface); }
}
.land-band--how_work .step-num { font-size: 34px; color: rgba(241, 196, 15, .18); }

/* Games: tighter grid so six cards read as a set, not six posters */
@media (min-width: 769px) {
    .land-band--game .games-grid { grid-template-columns: repeat(6, 1fr); }
    .land-band--game .gc-vis { height: 104px; }
}

/* Testimonials get quote marks and star ratings */
.land-band--testimonial .testimonial-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.land-band--testimonial .tc-quote { font-size: 26px; color: rgba(241, 196, 15, .3); }
.land-band--testimonial .testimonial-card::after {
    content: '\f005 \f005 \f005 \f005 \f005';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    display: block; color: var(--gold); font-size: 11px;
    letter-spacing: 3px; margin-top: 14px;
}

/* CTA reads as the page's closing statement */
.land-band--cta { padding-top: 0; border-top: none; }
.land-container .cta-band {
    padding: 46px 30px;
    border: 1px solid rgba(241, 196, 15, .28);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(241, 196, 15, .16), transparent 62%),
        linear-gradient(135deg, var(--red-dark), #4a1010);
}
.land-container .cta-band h3 { font-size: 24px; max-width: 620px; margin: 0 auto 20px; }

/* Invite band */
.land-band--referral .banner-invite::after { font-size: 150px; right: -10px; bottom: -40px; }

/* About: image and copy share the same optical weight */
.land-band--about .about-block { padding: 0; gap: 32px; }
.land-band--about .about-media { border-radius: 22px; box-shadow: 0 22px 46px rgba(0, 0, 0, .5); }
.land-band--about .about-body h3 { font-size: 26px; letter-spacing: -.4px; }

/* FAQ: quieter container, roomier rows */
.land-band--faq .faq-list { background: transparent; border-color: var(--border-glass); }
.land-band--faq .faq-item { background: rgba(255, 255, 255, .022); }
.land-band--faq .faq-q { padding: 18px 20px; font-size: 15px; }

/* Blog cards */
.land-band--blog .bc-thumb { height: 172px; }

/* Winners table on the landing keeps a visible frame */
.land-band--trx_win .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .land-container .cta-band h3 { font-size: 30px; }
    .land-band--about .about-body h3 { font-size: 32px; }
}

/* ==========================================================================
   Public inner pages — same design language as the landing
   ========================================================================== */

/* Page hero, used by every public page that is not the landing. */
.public-main .mgm-page-banner {
    position: relative;
    padding: 52px 20px 44px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(192, 57, 43, .38), transparent 62%),
        linear-gradient(165deg, #2a1515 0%, #110808 78%);
    border-bottom: 1px solid var(--border-glass);
}
.public-main .mgm-page-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
    background-image:
        linear-gradient(rgba(241, 196, 15, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 196, 15, .05) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
}
.public-main .mgm-page-banner h2 {
    position: relative; z-index: 1;
    font-size: 30px; font-weight: 900; letter-spacing: -.6px;
    color: #fff; margin-bottom: 12px;
}
.public-main .mgm-page-banner ul {
    position: relative; z-index: 1;
    display: flex; gap: 8px; justify-content: center;
    font-size: 13px; color: var(--text-dim);
}
.public-main .mgm-page-banner ul a { color: var(--gold); font-weight: 600; }

/* Breathing room for every non-landing public page. */
.land-page { padding-top: 44px; padding-bottom: 56px; }
.land-page > section:first-child { padding-top: 0; }

/* Bootstrap wrappers inside public pages must not add a second gutter on top
   of the shared container. */
.land-page .container,
.land-page .container-fluid { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.land-page .pt-120, .land-page .pt-150 { padding-top: 0 !important; }
.land-page .pb-120, .land-page .pb-150 { padding-bottom: 0 !important; }

/* Long-form copy (policy, terms, cookie) */
.prose-page { max-width: 820px; margin: 0 auto; color: var(--text-dim); font-size: 14.5px; line-height: 1.85; }
.prose-page p { margin-bottom: 15px; }
.prose-page h1, .prose-page h2, .prose-page h3, .prose-page h4, .prose-page h5 {
    color: #fff; font-weight: 800; margin: 28px 0 12px; line-height: 1.35;
}
.prose-page h1 { font-size: 26px; }
.prose-page h2 { font-size: 22px; }
.prose-page h3 { font-size: 19px; }
.prose-page h4, .prose-page h5 { font-size: 16px; }
.prose-page a { color: var(--gold); text-decoration: underline; }
.prose-page ul, .prose-page ol { padding-left: 20px; margin-bottom: 15px; }
.prose-page li { margin-bottom: 7px; }
.prose-page strong, .prose-page b { color: #fff; }
.prose-page img { max-width: 100%; border-radius: 14px; margin: 16px 0; }
.prose-page hr { border-color: var(--border-glass); margin: 26px 0; }

/* Blog listing + article share the landing's card language */
.land-page .post-card { height: 100%; }
.land-page .blog-details-wrapper { max-width: 820px; margin: 0 auto; }
.land-page .post-details-header { margin-bottom: 20px; }
.land-page .post-title { font-size: 27px; font-weight: 900; color: #fff; line-height: 1.28; margin-top: 8px; }
.land-page .post-details-thumb img { border-radius: 18px; border: 1px solid var(--border-glass); }
.land-page .post-details-content { color: var(--text-dim); font-size: 14.5px; line-height: 1.85; margin-top: 20px; }
.land-page .post-details-content p { margin-bottom: 15px; }

/* Games page inside the public shell */
.land-page .floor-intro { padding: 0 0 6px; text-align: center; }
.land-page .floor-intro h1 { font-size: 30px; }
.land-page .floor-intro p { margin: 0 auto; }
.land-page .games-grid, .land-page .section-title { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.land-page .section-title { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 30px 0 16px; }
.land-page .section-title h3 { font-size: 24px; justify-content: center; }
.land-page .section-title h3::before { display: none; }

/* Contact page inside the public shell */
.land-page .contact-wrapper { margin-top: 26px; }
.land-page .row { margin-left: -12px; margin-right: -12px; }
.land-page .row > [class^="col-"], .land-page .row > [class*=" col-"] { padding-left: 12px; padding-right: 12px; }

@media (min-width: 992px) {
    .public-main .mgm-page-banner { padding: 76px 20px 64px; }
    .public-main .mgm-page-banner h2 { font-size: 42px; }
    .land-page { padding-top: 56px; padding-bottom: 76px; }
    .land-page .floor-intro h1 { font-size: 36px; }
}

/* Games intro sits under the page banner, so it steps down a level */
.land-page .floor-title { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.4px; margin-bottom: 10px; }
@media (min-width: 992px) { .land-page .floor-title { font-size: 32px; } }

/* On mobile the hero has no art column beside it, so the copy is centred —
   left-aligned text against a full-width column looked off-balance.
   Desktop keeps it left, where it sits opposite the game-card visual. */
@media (max-width: 991px) {
    .hero__copy { text-align: center; }
    .hero__copy p { margin-left: auto; margin-right: auto; }
    .hero__actions { justify-content: center; }
    .hero__points { justify-content: center; }
    .hero .floor-kicker { margin-left: auto; margin-right: auto; }
}

/* ---------- bottom-bar height, for anything that must clear it ----------
   The chat widget and support page read --mgm-nav-h, but the variable was a
   leftover from the previous theme and was never defined here, so every use
   silently fell back to 70px: dead space on desktop (there is no bottom bar)
   and the wrong number on mobile (the bar is 65px plus the safe area). */
:root { --mgm-nav-h: 0px; }
@media (max-width: 768px) {
    :root { --mgm-nav-h: calc(65px + var(--safe-bottom)); }
}

/* ==========================================================================
   Bottom nav — iPhone safe-area fix
   The bar was `height: 65px` with `padding-bottom: var(--safe-bottom)`. Under
   the global `box-sizing: border-box` that padding is taken OUT of the 65px,
   so on a phone with a home indicator (~34px) the content box collapsed to
   ~31px. The icon (absolute, top:12px, 20px tall) and the label (absolute,
   bottom:10px) then occupied the same space and overlapped — and because
   Safari changes the inset as its toolbars collapse on scroll, it shifted
   while scrolling.

   Fixed by letting the safe area ADD to the bar instead of eating it, and by
   laying the icon and label out in normal flex flow so they can never overlap
   at any height.
   ========================================================================== */
.mobile-bottom-nav,
.public-bottom-nav {
    height: auto;
    min-height: 65px;
    align-items: stretch;
    padding-bottom: var(--safe-bottom);
}

.mobile-bottom-nav .nav-tab,
.public-bottom-nav .nav-tab {
    height: auto;
    justify-content: center;
    gap: 4px;
    padding: 9px 2px 8px;
    line-height: 1.1;
    min-width: 0;
}

/* Out of absolute positioning: flow keeps them stacked, never stacked on top
   of each other. */
.mobile-bottom-nav .nav-tab i,
.public-bottom-nav .nav-tab i {
    position: static;
    top: auto;
    font-size: 19px;
    line-height: 1;
}
.mobile-bottom-nav .nav-tab span,
.public-bottom-nav .nav-tab span {
    position: static;
    bottom: auto;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The FAB's circle deliberately overhangs the bar, so it stays out of flow;
   only its label sits in the flex column. */
.mobile-bottom-nav .nav-tab.fab,
.public-bottom-nav .nav-tab.fab {
    justify-content: flex-end;
}
.mobile-bottom-nav .nav-tab.fab .fab-circle,
.public-bottom-nav .nav-tab.fab .fab-circle {
    top: -22px;
}
.mobile-bottom-nav .nav-tab.fab .fab-circle i,
.public-bottom-nav .nav-tab.fab .fab-circle i {
    font-size: 22px;
}

/* Narrow phones: keep five labels on one line each */
@media (max-width: 360px) {
    .mobile-bottom-nav .nav-tab,
    .public-bottom-nav .nav-tab { font-size: 10px; padding: 8px 1px 7px; }
    .mobile-bottom-nav .nav-tab i,
    .public-bottom-nav .nav-tab i { font-size: 17px; }
}