:root {
  --gold: #c9a84c;
  --gold-l: #e8c870;
  --gold-d: #9a7a30;
  --navy: #0d1b2a;
  --navy-m: #162436;
  --navy-c: #1a2d42;
  --navy-b: #263d57;
  --cream: #f0e8d8;
  --text: #e8dcc8;
  --muted: #8aaabe;
  --win: #27ae60;
  --draw: #e8a030;
  --loss: #e74c3c;
}

body {
  font-family: 'Heebo', sans-serif;
  background: var(--navy);
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, .font-display {
  font-family: 'Frank Ruhl Libre', serif;
}

.navbar-mandeles {
  background: var(--navy-m) !important;
  border-bottom: 1px solid var(--navy-b);
}

.navbar-brand {
  color: var(--gold) !important;
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
}

.nav-link {
  color: var(--muted) !important;
}

.nav-link:hover, .nav-link.active {
  color: var(--text) !important;
}

.product-tabs .nav-link {
  border-radius: 8px;
  font-weight: 700;
}

.product-tabs .nav-link.active {
  background: var(--gold) !important;
  color: var(--navy) !important;
}

.hero-section {
  background: var(--navy-m);
  border-bottom: 1px solid var(--navy-b);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(201, 168, 76, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.card-mandeles {
  background: var(--navy-c);
  border: 1px solid var(--navy-b);
  border-radius: 12px;
}

.card-mandeles .card-header {
  background: transparent;
  border-bottom: 1px solid var(--navy-b);
  color: var(--cream);
  font-weight: 700;
}

.text-muted-custom {
  color: var(--muted) !important;
}

.text-gold {
  color: var(--gold-l) !important;
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  border: none;
}

.btn-gold:hover {
  background: var(--gold-l);
  color: var(--navy);
}

.btn-outline-gold {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--navy);
}

.num-input {
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--navy);
  border: 2px solid var(--navy-b);
  border-radius: 10px;
  color: var(--cream);
}

.num-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22);
  outline: none;
}

@media (max-width: 420px) {
  .num-input {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

.status-approved {
  background: rgba(76, 175, 130, 0.1);
  border: 1px solid rgba(76, 175, 130, 0.35);
  color: #6adba6;
}

.status-rejected {
  background: rgba(224, 80, 80, 0.08);
  border: 1px solid rgba(224, 80, 80, 0.3);
  color: #f07070;
}

.status-loading {
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.2);
  color: var(--gold-l);
}

.validity-banner {
  background: rgba(232, 160, 48, 0.08);
  border: 1px solid rgba(232, 160, 48, 0.3);
  color: #d4aa60;
}

.prem-item {
  background: var(--navy);
  border: 1px solid var(--navy-b);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.prem-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold-l));
}

.lock-badge {
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 16px;
}

.game-item {
  background: var(--navy);
  border: 1.5px solid var(--navy-b);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.game-item:hover, .game-item.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.07);
}

.odd-pill {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
}

.odd-1 { background: rgba(39, 174, 96, 0.1); border: 1px solid rgba(39, 174, 96, 0.3); color: #6adba6; }
.odd-x { background: rgba(232, 160, 48, 0.1); border: 1px solid rgba(232, 160, 48, 0.3); color: #e8c870; }
.odd-2 { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); color: #f07070; }

.prob-bar { display: flex; border-radius: 8px; overflow: hidden; height: 36px; }
.prob-1 { background: var(--win); color: #fff; }
.prob-x { background: var(--draw); color: #fff; }
.prob-2 { background: var(--loss); color: #fff; }

.form-dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.63rem;
  font-weight: 800;
  color: #fff;
}

.fd-w { background: var(--win); }
.fd-d { background: var(--draw); }
.fd-l { background: var(--loss); }

.auth-card {
  max-width: 420px;
  margin: 0 auto;
}

.auth-card .form-control {
  background: var(--navy);
  border-color: var(--navy-b);
  color: var(--cream);
}

.auth-card .form-control:focus {
  background: var(--navy);
  border-color: var(--gold);
  color: var(--cream);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2);
}

.auth-card label {
  color: var(--muted);
}

footer.site-footer {
  background: var(--navy-m);
  border-top: 1px solid var(--navy-b);
}

footer a {
  color: var(--gold);
}

.game-type-btn.active {
  border-color: #6adba6 !important;
  background: rgba(39, 174, 96, 0.07) !important;
}

.game-type-btn {
  background: var(--navy);
  border: 1.5px solid var(--navy-b);
  color: var(--text);
}

.game-type-btn:hover {
  border-color: var(--gold-d);
}