/* Aquabet ocean3n — sports/legacy emerald chrome remap (no sports-engine rewrite) */
:root {
  --gm-canvas: #020b12; --gm-canvas-rgb: 2 11 18;
  --gm-surface: #061a26; --gm-surface-rgb: 6 26 38;
  --gm-raised: #0a2f44; --gm-raised-rgb: 10 47 68;
  --gm-leaf: #0096c7; --gm-leaf-rgb: 0 150 199;
  --gm-accent: #00e5ff; --gm-accent-rgb: 0 229 255;
  --gm-muted: #8fb4c8; --gm-muted-rgb: 143 180 200;
  --gm-soft: #c8e4f0; --gm-soft-rgb: 200 228 240;
  --gm-text: #f2f9fc; --gm-text-rgb: 242 249 252;
  --gm-gold: #00fbff; --gm-gold-rgb: 0 251 255;
  --gm-pine: #074a66; --gm-pine-rgb: 7 74 102;
  --gm-ocean: #0077b6; --gm-ocean-rgb: 0 119 182;
  --gm-cyan-bright: #5eefff; --gm-cyan-bright-rgb: 94 239 255;
  --gm-cyan-soft: #b8f4ff; --gm-cyan-soft-rgb: 184 244 255;

  --primary: var(--gm-soft, #c8e4f0) !important;
  --secondary: var(--gm-canvas, #020b12) !important;
  --tertiary: var(--gm-text, #f2f9fc) !important;
  --neutral: var(--gm-canvas, #020b12) !important;
  --bg-0: var(--gm-canvas, #020b12) !important;
  --bg-1: var(--gm-surface, #061a26) !important;
  --bg-2: var(--gm-raised, #0a2f44) !important;
  --panel: var(--gm-canvas, #020b12) !important;
  --panel-strong: var(--gm-surface, #061a26) !important;
  --emerald: var(--gm-accent, #00e5ff) !important;
  --emerald-strong: var(--gm-leaf, #0096c7) !important;
  --mint: var(--gm-soft, #c8e4f0) !important;
  --gold: var(--gm-gold, #00fbff) !important;
  --gold-bright: var(--gm-cyan-bright, #5eefff) !important;
  --gold-dark: var(--gm-ocean, #0077b6) !important;
  --gold-text: var(--gm-cyan-soft, #b8f4ff) !important;
  --glow-primary: rgb(var(--gm-accent-rgb, 0 229 255) / .5) !important;
  --glow-soft: rgb(var(--gm-accent-rgb, 0 229 255) / .16) !important;
  --line: rgb(var(--gm-accent-rgb, 0 229 255) / .28) !important;
}

html, body {
  background-color: var(--gm-canvas, #020b12) !important;
  color: var(--gm-text, #f2f9fc);
}

/* Emerald leftover greens / CTAs -> ocean cyan */
.news-ticker,
.topbar .auth-btn.btn-register,
.btn-register,
.btn-primary,
.quick-link.active,
.nav-item.active,
.icon-nav a.active,
.main-nav a.active {
  background-image: linear-gradient(135deg, #00fbff, #00e5ff 45%, #0096c7) !important;
  color: #04141c !important;
  border-color: rgb(0 229 255 / .45) !important;
}

.topbar,
.header-main,
.site-header,
.top-bar {
  background: linear-gradient(180deg, rgba(6,26,38,.98), rgba(2,11,18,.96)) !important;
  border-bottom-color: rgb(0 229 255 / .22) !important;
}

.topbar .auth-btn.btn-login,
.btn-login {
  border-color: rgb(0 229 255 / .4) !important;
  color: #b8f4ff !important;
  background: rgba(6,26,38,.85) !important;
}

/* Sports stage chrome (sports.php companion) */
#game-stage .game-topbar {
  background: linear-gradient(180deg, rgba(6,26,38,.98), rgba(2,11,18,.95)) !important;
  border-bottom: 1px solid rgb(0 229 255 / .28) !important;
}
#game-stage .game-pill {
  border-color: rgb(0 229 255 / .45) !important;
  background: rgba(0,150,199,.28) !important;
  color: #b8f4ff !important;
}
#game-stage .balance-chip {
  border: 1px solid rgb(0 251 255 / .5) !important;
  background: linear-gradient(135deg, #00fbff, #00e5ff 50%, #0096c7) !important;
  color: #04141c !important;
  font-weight: 800;
}
#game-stage .game-btn {
  border-color: rgb(0 229 255 / .35) !important;
  background: rgba(6,26,38,.78) !important;
  color: #e7f8ff !important;
}
#game-stage .game-btn:hover { background: rgba(10,47,68,.9) !important; }
#game-stage .sports-spinner { border-top-color: #00e5ff !important; }
#game-stage .game-frame-wrap {
  border-color: rgb(0 229 255 / .28) !important;
  background: var(--gm-canvas, #020b12) !important;
}

.dob-select-row select { border-color: rgb(0 229 255 / .28) !important; }
.dob-select-row select:focus {
  border-color: rgb(0 229 255 / .55) !important;
  box-shadow: 0 0 0 2px rgb(0 229 255 / .12) !important;
}

.auth-modal .tab.active,
.modal .tab.active,
.smallModal .tab.active {
  color: #00fbff !important;
  border-bottom-color: #00e5ff !important;
}

/* ============================================================
   ocean3n - sports guest auth labels + logo (2026-09-12)
   emerald-clone @max-width:480px hides .auth-segment span ->
   icon-only GIRIS/KAYIT chips on sports/legacy heads.
   Also harden logo so it is not crushed beside auth-split.
   ============================================================ */
@media (max-width: 980px) {
  .topbar .auth-segment span,
  .auth-split .auth-segment span,
  .auth-links .auth-segment span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: inherit !important;
    line-height: 1.2 !important;
    color: inherit !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .topbar .auth-segment,
  .auth-split .auth-segment,
  .auth-links .auth-segment {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    gap: 6px !important;
    white-space: nowrap;
    overflow: visible;
  }
  .auth-segment-login {
    border-color: rgb(0 229 255 / .45) !important;
    color: #b8f4ff !important;
    background: rgba(6, 26, 38, .9) !important;
  }
  .auth-segment-register {
    background: linear-gradient(135deg, #00fbff, #00e5ff 45%, #0096c7) !important;
    color: #04141c !important;
    border-color: transparent !important;
  }
  .topbar .brand,
  .topbar-row .brand {
    width: auto !important;
    max-width: min(150px, 34vw) !important;
    flex: 0 1 auto;
    min-width: 0;
  }
  .topbar .brand img,
  .topbar-row .brand img {
    height: 44px !important;
    max-height: 44px !important;
    max-width: min(140px, 34vw) !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .topbar .auth-segment span,
  .auth-split .auth-segment span,
  .auth-links .auth-segment span {
    display: inline !important;
  }
  .topbar .auth-segment,
  .auth-split .auth-segment {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .topbar .brand img,
  .topbar-row .brand img {
    height: 40px !important;
    max-height: 40px !important;
    max-width: min(110px, 30vw) !important;
  }
}