/* OG Betz optional light mode: brighter cobalt surfaces with the approved lime brand accents. */
:root {
  --preview-canvas: #1b3043;
  --bg: #1b3043;
  --panel: #2a435a;
  --panel2: #35526b;
  --line: #c7e8ff32;
  --muted: #bdd0de;
  color: #f6fbff;
  background: #1b3043;
}
html[data-bg-theme] {
  --preview-canvas: #1b3043;
  --preview-panel: #2a435a;
  --preview-soft: #244055;
  background: #1b3043;
}
html[data-bg-theme] body, html[data-bg-theme] #app,
html[data-bg-theme] #app .home-main,
html[data-bg-theme] #app .home-content,
html[data-bg-theme] #app .page-wrap { background-color: #1b3043; }
html[data-bg-theme] #app>.topbar,
html[data-bg-theme] #app .site-rail { background: #20384d; }
html[data-bg-theme] #app .footer { background: #172c3e; }
html, body, #app, #app>.page-wrap, #app>.home-main, #app .home-content,
#app>.sports-layout { background: #1b3043; }
#app>.topbar, #app .site-rail { background: #20384d; border-color: #96c9ea36; }
#app .footer { background: #172c3e; border-color: #8fb8d04d; }
#app .site-rail .rail-scroll { scrollbar-color: #7fa7c4 #20384d; }
#app .site-rail .rail-search, #app .rail-mini-tabs, #app .member-balance {
  background: #2a4359; border-color: #a2c7e447; color: #d1e4f1;
}
#app .site-rail .rail-promo-list>.rail-promo-heading,
#app .site-rail .rail-promo-list>a,
#app .site-rail .rail-promo-children a,
#app .site-rail .rail-rewards a {
  background: #284258; border-color: #9cc7df2b;
}
#app .site-rail .rail-promo-list>.rail-promo-heading:hover,
#app .site-rail .rail-promo-list>a:hover,
#app .site-rail .rail-promo-children a:hover,
#app .site-rail .rail-rewards a:hover,
#app .site-rail .rail-primary a:hover,
#app .site-rail .rail-categories a:hover {
  background: #365570;
}
#app .site-rail .rail-primary a.active,
#app .site-rail .rail-categories a.active {
  background: #324f61; box-shadow: inset 3px 0 0 #b2f35a;
}
#app .top-actions>button:not(.primary), #app .header-chat,
#app .member-icon-button { background: #2a4359; border-color: #a5d1ea42; }
#app .primary, #app .member-wallet-cta {
  background: linear-gradient(135deg,#c7ff7a,#9eea25);
  color: #14220e;
  box-shadow: 0 6px 20px #a5f04e29;
}
#app .outline { background: #263f54; border-color: #a9ed6a8c; color: #dcffb6; }

/* A more luminous hero, with the existing OG imagery and three vivid game doors. */
#app .home-main .home-hero {
  background: radial-gradient(circle at 30% 35%,#4167a5 0%,transparent 50%),#253f5c;
  border-bottom-color: #7bb9e373;
}
#app .home-main .hero-copy h1 { text-shadow: 0 2px 14px #07111baa; }
#app .home-main .hero-card {
  border-color: #c7ebff8a;
  box-shadow: 0 8px 28px #06172865,0 0 0 1px #b8e1ff2e inset;
}
#app .home-main .hero-card img,
#app .original-tile img, #app .visual-card img,
#app .provider-tile img, #app .home-sport-tile img,
#app .case-art img {
  filter: brightness(1.11) saturate(1.12);
}
#app .home-main .hero-card:nth-child(1) { box-shadow: 0 8px 26px #8b2cca53; }
#app .home-main .hero-card:nth-child(2) { box-shadow: 0 8px 26px #13a5e658; }
#app .home-main .hero-card:nth-child(3) { box-shadow: 0 8px 26px #e34f6650; }
#app .live-wins { border-bottom: 1px solid #a4cde529; }
#app .win-card, #app .visual-card, #app .case-tile, #app .pack-tile,
#app .poker-format-row>div {
  background: #2a4359;
  border-color: #a0cae044;
  box-shadow: 0 5px 16px #0a1c2b23;
}
#app .original-tile, #app .provider-tile, #app .home-sport-tile {
  border-color: #a8d8ee72;
  box-shadow: 0 6px 20px #0b1b2b42;
}
#app .power-section-head>a, #app .section-head h2,
#app .page-heading h1 { color: #f8fcff; }
#app .power-section-view-all, #app .subtle-link { color: #d5fba9; }
#app .card-meta small, #app .win-card em { color: #c1d5e2; }
#app .activity-table, #app .activity-row.head {
  background: #274054; border-color: #a5cee240;
}
#app .activity-row:not(.head) { background: #2a4359; }

/* Catalog, sports, poker and promotional routes use the same bright canvas. */
#app .search-field, #app .select-wrap, #app .tab-strip,
#app .battle-filters, #app .sports-sidebar, #app .sports-chip,
#app .match-card, #app .odd, #app .betslip,
#app .pack-format, #app .pack-picks, #app .pack-special,
#app .notice-panel, #app .promo-hub-page .promo-cards article,
#app .vip-benefits article, #app .vip-transfer {
  background: #2a4359; border-color: #a4cde247;
}
#app .sport-chips button, #app .sports-featured a,
#app .sports-market, #app .event-detail-markets .sports-market {
  background: #314e66; border-color: #aed8ee42;
}
#app .sports-hero, #app .sports-feature-card, #app .pack-feature,
#app .poker-lobby, #app .races-page .races-hero,
#app .promo-hub-page .promos-hero, #app .vip-hero {
  border-color: #88c8f38c;
  box-shadow: inset 0 0 0 1px #b2e5ff21,0 10px 30px #09213730;
}
#app .sports-hero { background: linear-gradient(90deg,#2a4e70 0%,#2b5175c9 55%,#13385065),url('./assets/sports.webp') right center/auto 185% no-repeat; }
#app .sports-layout:not(.sports-event-layout) .sports-banner-row .sports-hero {
  background: linear-gradient(90deg,#2b5678 0%,#2b5678ed 25%,#2b5678a6 48%,#1b45682a 75%),
    url('./assets/trending-sports-primary.jpg') right center/66% auto no-repeat,#2b5678;
}
#app .sports-layout:not(.sports-event-layout) .match-card {
  background: #2c465d; border-color: #9ccbe24f;
}
#app .sports-layout:not(.sports-event-layout) .sports-top-tabs a,
#app .sports-layout:not(.sports-event-layout) .sports-chip-row a {
  background: #31516a; border-color: #a8d5e154; color: #e5f0f7;
}
#app .sports-layout:not(.sports-event-layout) .sports-top-tabs a.active {
  background: #3c625e; border-color: #b7f768; color: #edffd5;
}
#app .sports-layout:not(.sports-event-layout) .event-market-grid .odd {
  background: #38566d; border-color: #a7d4e154;
}
#app .poker-lobby { background: radial-gradient(circle at 50% 30%,#386fa0,#274a6c 55%,#1f354c); }
#app .poker-frame-bar { background: #1e3c58; }
#app .poker-format-row>div { border-top: 2px solid #df8eff; }
#app .pack-feature { background: radial-gradient(circle at 80% 20%,#eab65440,transparent 42%),linear-gradient(110deg,#325479,#223a54); }
#app .case-toolbar select, #app .battle-toolbar select,
#app .member-profile-edit input { background: #29455d; color: #f5fbff; border-color: #a7d1e050; }

/* Member pages and account controls retain their structure with clearer surfaces. */
#app .member-page .member-subnav { background: #28435a; border-color: #a6d3e34b; }
#app .member-page .member-subnav a { color: #c4d8e5; }
#app .member-page .member-subnav a.active,
#app .member-page .member-subnav a:hover { background: #41617b; color: #fff; }
#app .member-feature-panel, #app .member-quick-grid a,
#app .member-reward-grid a, #app .member-activity-list,
#app .member-table, #app .member-settings-card,
#app .member-detail-summary>div, #app .member-detail-callout,
#app .member-stat-grid>div, #app .member-filter-row button {
  background: #2b465c; border-color: #a5cfe345;
}
#app .member-table-head { background: #36536a; color: #d2e4ed; }
#app .member-detail-hero {
  background: linear-gradient(112deg,#31597b,#385b81 55%,#34526b);
  border-color: #9acbed70;
}
#app .member-page-title p, #app .member-settings-card p,
#app .member-detail-row span { color: #bfd3df; }
#app .member-wallet-modal, #app .member-ranks-modal,
#app .member-profile-menu, #app .member-balance-menu,
#app .utility-panel { background: #29445a; border-color: #b5d9e457; }

/* Rewards keeps its approved layout and OG rank language. */
html #app .og-rewards-reference.og-reward-palette-cobalt {
  --rp-canvas: #1b3043; --rp-card: #2b455b; --rp-inset: #274258;
  --rp-hero: #2c4c6c; --rp-stats: #355775ed;
  --rp-soft: #38586a; --rp-border: #a1cde070;
  --rp-hero-wash: #234566ba; --rp-hero-glow: #49b5f186;
  background: #1b3043;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-rewards-profile {
  background: #315473;
  border-color: #9acbeb71;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-rewards-profile::before {
  opacity: .85;
  filter: blur(7px) brightness(1.35) saturate(1.15);
  background: linear-gradient(90deg,#1f4364b8,#24446e87 50%,#21507590),
    url('./assets/og-club-hero-ambient.png') center 54%/cover no-repeat;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-profile-stats>div:nth-child(n) {
  background: #315474e8; border-color: #a1d4ec70;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-feature-rewards>.og-reward-feature:nth-child(n),
html #app .og-rewards-reference.og-reward-palette-cobalt .og-vip-feature,
html #app .og-rewards-reference.og-reward-palette-cobalt .og-gameplay-panel {
  background: #2a445a; border-color: #9fcde069;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-feature-top {
  background: linear-gradient(90deg,#3a5d64,#31546b 64%,#2d4b61);
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-reward-amounts,
html #app .og-rewards-reference.og-reward-palette-cobalt .og-boost-stage,
html #app .og-rewards-reference.og-reward-palette-cobalt .og-upcoming-feature .og-upcoming-detail {
  background: #2a445a;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-gameplay-period,
html #app .og-rewards-reference.og-reward-palette-cobalt .og-gameplay-metrics>div {
  background: #31536b; border-color: #a3d0e04d;
}
html #app .og-rewards-reference.og-reward-palette-cobalt .og-gameplay-period button.active {
  background: #4a7184;
}
html #app .og-rank-modal, html #app .og-rank-modal-head {
  background: #263e52;
}
html #app .og-modal-rank:not(.selected), html #app .og-modal-levels button:not(.selected),
html #app .og-modal-perk-pills>span { background: #324d62; }
html #app .og-modal-bar i { background: #668397; }

/* Auth and overlays should feel part of the same palette. */
#app .auth-modal, #app .auth-content { background: #263e52; }
#app .auth-content .auth-tabs, #app .auth-content .auth-social-button,
#app .auth-content input:not([type="checkbox"]), #app .auth-content .modal-close {
  background: #34536b; border-color: #abd2e459; color: #f7fbff;
}
#app .auth-art { filter: brightness(1.18) saturate(1.15); }
#app .auth-content .auth-divider, #app .auth-content .check-line { color: #c4d8e2; }
#app .auth-content form>label:not(.check-line) { color: #f5fbff; }

@media (max-width: 700px) {
  #app .site-rail { background: #20384d; }
  #app .home-content { background: #1b3043; }
}