/* ═══════════════════════════════════════════════════════════
   GIRO PRIME — Casino Light Theme
   Visual leve, cream + navy/gold, ambient de mesa de jogos
   ═══════════════════════════════════════════════════════════ */

:root,
[data-theme="light"],
html {
  --bg-body: #f7f1e8;
  --bg-primary: #fffdf9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0e8dc;
  --bg-card: #ffffff;
  --bg-card-hover: #fffaf3;
  --bg-input: #f7f9fd;
  --bg-overlay: rgba(20, 40, 80, 0.45);

  --color-red: #d32f3a;
  --color-red-dark: #b71c1c;
  --color-red-light: #e53935;
  --color-red-glow: rgba(211, 47, 58, 0.22);

  --color-black: #2a3142;
  --color-black-dark: #1a2030;
  --color-black-light: #3d465c;
  --color-black-glow: rgba(42, 49, 66, 0.2);

  --color-white: #f5f5f5;
  --color-white-dark: #e0e0e0;
  --color-white-light: #ffffff;
  --color-white-glow: rgba(255, 255, 255, 0.6);

  --color-green: #1f9d55;
  --color-green-dark: #187a3e;
  --color-gold: #c9970a;
  --color-blue: #0f5bd8;

  --text-primary: #152038;
  --text-secondary: #5a6785;
  --text-muted: #8a96b0;
  --text-bright: #0a1628;

  --border-color: rgba(15, 60, 145, 0.12);
  --border-light: rgba(15, 60, 145, 0.18);

  --shadow-sm: 0 1px 3px rgba(20, 40, 90, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 40, 90, 0.1);
  --shadow-lg: 0 16px 48px rgba(20, 40, 90, 0.14);

  color-scheme: light;
}

/* ── Ambient background ── */
html, body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary);
}

body {
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -8%, rgba(15, 91, 216, 0.09), transparent 55%),
    radial-gradient(circle at 6% 92%, rgba(201, 151, 10, 0.09), transparent 28%),
    radial-gradient(circle at 96% 14%, rgba(211, 47, 58, 0.06), transparent 26%),
    linear-gradient(165deg, #fffdf9 0%, #f7f1e8 42%, #efe6d8 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Felt pattern + suits overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f3c91' stroke-opacity='0.055' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Cpath d='M40 12v56M12 40h56'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='18' y='42' font-size='26' fill='%230f3c91' fill-opacity='0.06'%3E♠%3C/text%3E%3Ctext x='88' y='48' font-size='22' fill='%23d32f3a' fill-opacity='0.06'%3E♥%3C/text%3E%3Ctext x='30' y='108' font-size='22' fill='%23d32f3a' fill-opacity='0.06'%3E♦%3C/text%3E%3Ctext x='96' y='112' font-size='24' fill='%230f3c91' fill-opacity='0.06'%3E♣%3C/text%3E%3C/svg%3E");
  background-size: 96px 96px, 160px 160px;
}

/* Soft pastel spinning wheels */
.gp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gp-ambient__wheel {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,253,249,0.7) 0 11%, transparent 12%),
    repeating-conic-gradient(
      from 0deg,
      #f0d9c4 0deg 18deg,
      #d9d5d0 18deg 36deg,
      #f7ebe0 36deg 54deg,
      #e8ddd4 54deg 72deg,
      #f3d0c0 72deg 90deg,
      #cfc9c3 90deg 108deg,
      #f6e8dc 108deg 126deg,
      #e2d8cf 126deg 144deg
    );
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,0.4),
    inset 0 0 36px rgba(255,255,255,0.28),
    0 0 0 1px rgba(180,160,140,0.1);
  opacity: 0.2;
  will-change: transform;
}
.gp-ambient__wheel::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf9 0%, #f0e4d6 70%, #e0d2c4 100%);
  box-shadow: inset 0 0 0 2px rgba(200,180,160,0.22);
}
.gp-ambient__wheel--1 { width: min(380px,65vw); height: min(380px,65vw); right: -10%; bottom: -12%; opacity: .24; animation: gp-spin-cw 58s linear infinite; }
.gp-ambient__wheel--2 { width: min(240px,42vw); height: min(240px,42vw); left: -8%; top: 10%; opacity: .16; animation: gp-spin-ccw 72s linear infinite; }
.gp-ambient__wheel--3 { width: min(180px,34vw); height: min(180px,34vw); right: 12%; top: -5%; opacity: .14; animation: gp-spin-cw 42s linear infinite; }
.gp-ambient__wheel--4 { width: min(140px,28vw); height: min(140px,28vw); left: 22%; bottom: 8%; opacity: .12; animation: gp-spin-ccw 50s linear infinite; }
@keyframes gp-spin-cw { to { transform: rotate(360deg); } }
@keyframes gp-spin-ccw { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gp-ambient__wheel { animation: none !important; }
}

/* Ensure main content above ambient */
.header, .main, .container, .toast-container,
.modal-overlay, .payment-modal, .auth-overlay {
  position: relative;
  z-index: 1;
}
.header { z-index: var(--z-header, 100) !important; }
.toast-container { z-index: var(--z-toast, 400) !important; }
.payment-modal, .modal-overlay { z-index: 10000 !important; }

/* ── Header glass ── */
.header {
  background: rgba(255, 253, 249, 0.88) !important;
  border-bottom: 1px solid rgba(15, 60, 145, 0.1) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(20, 40, 90, 0.06);
}
.header__logo-img {
  filter: none !important;
  height: 42px !important;
  border-radius: 0 !important;
}
.header__balance {
  background: linear-gradient(180deg, #fff, #f7f1e8) !important;
  border-color: rgba(15, 60, 145, 0.14) !important;
  box-shadow: 0 2px 10px rgba(20, 40, 90, 0.06);
}
.balance__amount, .profile__name {
  color: var(--text-bright) !important;
}
.header__auth-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(15, 60, 145, 0.14);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
#loginQuickBtn {
  background: rgba(15, 60, 145, 0.06) !important;
  color: #0a2a6b !important;
  border-color: rgba(15, 60, 145, 0.18) !important;
}
#loginQuickBtn:hover {
  background: rgba(15, 60, 145, 0.12) !important;
  transform: translateY(-1px);
}
#registerQuickBtn {
  background: linear-gradient(135deg, #0a2a6b 0%, #0f5bd8 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 91, 216, 0.28) !important;
}
#registerQuickBtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.profile__dropdown {
  background: #fff !important;
  border: 1px solid rgba(15, 60, 145, 0.12) !important;
  box-shadow: 0 16px 40px rgba(20, 40, 90, 0.14) !important;
}
.dropdown__item { color: var(--text-secondary) !important; }
.dropdown__item:hover {
  background: rgba(15, 60, 145, 0.06) !important;
  color: var(--text-bright) !important;
}

/* ── Cards / panels ── */
.livestream,
.roulette,
.previous-rolls,
.roulette-table,
.chip-rack,
.table-players__panel,
.chat,
.last-result-panel,
.modal,
.history__item,
.settings__option {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 60, 145, 0.1) !important;
  box-shadow: 0 10px 32px rgba(20, 40, 90, 0.08);
}
.livestream__topbar,
.chat__header,
.modal__header {
  background: linear-gradient(180deg, #fffdf9, #f7f1e8) !important;
  border-bottom-color: rgba(15, 60, 145, 0.1) !important;
}
.livestream__title,
.modal__title,
.status__text,
.chat__header-title,
.auth-card__title {
  color: var(--text-bright) !important;
}
.roulette__viewport {
  background: linear-gradient(180deg, #f0e8dc, #e8dfd2) !important;
  border-radius: 12px;
}
.table__cell {
  border-color: rgba(15, 60, 145, 0.12) !important;
}
.table__cell--zero {
  background: #f0e8dc !important;
  color: #152038 !important;
}
.chip-rack__label,
.previous-rolls__label,
.panel__bets-count,
.panel__bets-total,
.stats__item {
  color: var(--text-secondary) !important;
}

/* Chat */
.chat__messages { background: #faf7f2 !important; }
.chat__message { color: var(--text-primary) !important; }
.chat__input-field {
  background: #fff !important;
  border: 1px solid rgba(15, 60, 145, 0.14) !important;
  color: var(--text-primary) !important;
}
.chat-toggle {
  background: #fff !important;
  border: 1px solid rgba(15, 60, 145, 0.12) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 8px 24px rgba(20, 40, 90, 0.12);
}

/* Toast */
.toast {
  background: #fff !important;
  border: 1px solid rgba(15, 60, 145, 0.12) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 12px 32px rgba(20, 40, 90, 0.14) !important;
}

/* Modal / forms */
.modal__close { color: var(--text-muted) !important; }
.profile-form__input,
.auth-form__input {
  background: #f7f9fd !important;
  border: 1.5px solid rgba(15, 60, 145, 0.14) !important;
  color: var(--text-primary) !important;
}
.profile-form__input:focus,
.auth-form__input:focus {
  background: #fff !important;
  border-color: rgba(15, 91, 216, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(15, 91, 216, 0.12);
}
.profile-form__label,
.auth-form__label,
.auth-card__subtitle {
  color: var(--text-secondary) !important;
}

/* Payment modals — light casino cards */
.payment-modal__overlay {
  background: rgba(15, 30, 60, 0.4) !important;
}
.payment-modal__container {
  background: linear-gradient(165deg, #fffdf9 0%, #ffffff 45%, #f7f1e8 100%) !important;
  border: 1px solid rgba(15, 60, 145, 0.12) !important;
  box-shadow: 0 24px 60px rgba(20, 40, 90, 0.2) !important;
  color: var(--text-primary);
}
.payment-modal__header {
  border-bottom-color: rgba(15, 60, 145, 0.1) !important;
}
.payment-modal__header h2,
.payment-amount-btn__value,
.payment-method-btn__name,
.payment-processing h3,
.payment-success h3 {
  color: var(--text-bright) !important;
}
.payment-step__label,
.payment-custom-amount label,
.payment-method-btn__desc,
.payment-processing p,
.payment-success p,
.payment-security,
.payment-balance-info span {
  color: var(--text-secondary) !important;
}
.payment-amount-btn,
.payment-method-btn,
.payment-custom-amount__input-wrap,
.payment-quick-btn,
.payment-balance-info,
.payment-pix-key select,
.payment-pix-key input {
  background: #f7f9fd !important;
  border-color: rgba(15, 60, 145, 0.12) !important;
  color: var(--text-primary) !important;
}
.payment-pix-key select option {
  background: #fff !important;
  color: var(--text-primary) !important;
}
.payment-custom-amount__input-wrap input {
  color: var(--text-primary) !important;
}
.payment-btn--secondary {
  background: rgba(15, 60, 145, 0.06) !important;
  color: var(--text-primary) !important;
  border-color: rgba(15, 60, 145, 0.14) !important;
}
.payment-modal__close {
  background: rgba(15, 60, 145, 0.06) !important;
  color: var(--text-secondary) !important;
}
.payment-modal__footer {
  border-top-color: rgba(15, 60, 145, 0.1) !important;
}

/* Scrollbar light */
::-webkit-scrollbar-thumb {
  background: rgba(15, 60, 145, 0.2) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 60, 145, 0.35) !important;
}

/* Selection */
::selection {
  background: rgba(201, 151, 10, 0.28);
  color: var(--text-bright);
}

/* Soft top gold/navy accent line on main cards */
.roulette,
.roulette-table,
.chip-rack {
  position: relative;
  overflow: hidden;
}
.roulette::before,
.roulette-table::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0f3c91, #2d7dff, #e8b923, #d32f3a, #0f3c91);
  z-index: 2;
  pointer-events: none;
}

/* Auth overlay if used on index */
.auth-overlay {
  background: linear-gradient(165deg, #fffdf9, #f0e8dc) !important;
}
.auth-card {
  background: #fff !important;
  border: 1px solid rgba(15, 60, 145, 0.12) !important;
  box-shadow: 0 24px 56px rgba(20, 40, 90, 0.12) !important;
}