/* Buffalo 777 — layer 1: palette + component restyle (ruby night / gold).
   Loaded LAST in index.html; every rule !important so it beats the bundle. */
:root {
  --b7-bg: #07040a;
  --b7-bg2: #12030a;
  --b7-card: #150710;
  --b7-card2: #1c0a13;
  --b7-line: rgba(255, 215, 106, .16);
  --b7-gold: #ffd76a;
  --b7-gold2: #f0a500;
  --b7-ruby: #e11d48;
  --b7-ruby2: #ff4d6d;
  --b7-text: #f6ecdf;
  --b7-dim: #b9a58f;
}

html, body, .app, #app, .main-container, .middle-container {
  background: radial-gradient(1200px 520px at 50% -8%, #3b0518 0%, #150310 42%, var(--b7-bg) 100%) !important;
  background-attachment: fixed !important;
  color: var(--b7-text) !important;
  font-family: "Sora", "Noto Sans Myanmar", -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body { padding-bottom: 76px !important; }

/* ---------- header ---------- */
.navbar, .navbar.navbar-dark, nav.navbar {
  background: linear-gradient(180deg, rgba(28, 5, 16, .96), rgba(12, 3, 8, .92)) !important;
  border-bottom: 1px solid var(--b7-line) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(10px) !important;
}
.navbar-brand img, .navbar .logo, .navbar img { filter: drop-shadow(0 2px 6px rgba(255, 45, 90, .35)) !important; }
.navbar .btn, .navbar a.btn, .navbar button.btn, .navbar .btn-warning, .navbar .btn-danger {
  background: linear-gradient(135deg, var(--b7-gold), var(--b7-gold2)) !important;
  border: 0 !important;
  color: #2a1200 !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(240, 165, 0, .28) !important;
}

/* ---------- hero / carousel ---------- */
.carousel, .carousel-inner, .carousel-item { background: transparent !important; }
.carousel-item img.img-fluid, .carousel img {
  border-radius: 18px !important;
  border: 1px solid var(--b7-line) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 215, 106, .08) inset !important;
}
.carousel-indicators li, .carousel-indicators [data-bs-target] {
  background: var(--b7-gold) !important;
  border-radius: 999px !important;
  height: 4px !important;
  opacity: .8 !important;
}

/* ---------- category chips ---------- */
.mid-items-container { background: transparent !important; }
.mid-item {
  background: linear-gradient(160deg, var(--b7-card2), var(--b7-card)) !important;
  border: 1px solid var(--b7-line) !important;
  border-radius: 16px !important;
  color: var(--b7-dim) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.mid-item.active, .mid-item:active {
  border-color: var(--b7-gold) !important;
  color: var(--b7-gold) !important;
  box-shadow: 0 8px 22px rgba(240, 165, 0, .28) !important;
  transform: translateY(-1px) !important;
}
.mid-item *, .mid-item span, .mid-item label { color: inherit !important; }

/* ---------- section titles ---------- */
h4.text-nowrap, h4.text-nowrap *, .section-title {
  background: linear-gradient(92deg, #fff 6%, var(--b7-gold) 46%, var(--b7-ruby2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  position: relative !important;
  padding-left: 14px !important;
}
h4.text-nowrap::before, .section-title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important; height: 1.1em !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, var(--b7-gold), var(--b7-ruby)) !important;
}

/* ---------- game / provider tiles ---------- */
.col-3.px-1.my-2 > div, .col-4.px-1.my-2 > div, .col-6.px-1.my-2 > div {
  background: linear-gradient(165deg, var(--b7-card2), var(--b7-card)) !important;
  border: 1px solid var(--b7-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
  overflow: hidden !important;
}
.col-3.px-1.my-2 img, .col-4.px-1.my-2 img, .col-6.px-1.my-2 img {
  border-radius: 12px !important;
  transition: transform .18s ease !important;
}
.col-3.px-1.my-2 > div:active, .col-4.px-1.my-2 > div:active { transform: scale(.97) !important; }

/* ---------- cards / popups / inputs / buttons ---------- */
.card, .modal-content, .van-popup, .van-dialog, .list-group-item, .dropdown-menu {
  background: linear-gradient(165deg, var(--b7-card2), var(--b7-card)) !important;
  border: 1px solid var(--b7-line) !important;
  border-radius: 18px !important;
  color: var(--b7-text) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6) !important;
}
input, .form-control, .van-field__control, textarea, select {
  background: #0d0509 !important;
  border: 1px solid var(--b7-line) !important;
  border-radius: 12px !important;
  color: var(--b7-text) !important;
}
input::placeholder, .form-control::placeholder { color: #8a7767 !important; }
.btn-primary, .van-button--primary, .van-button--danger {
  background: linear-gradient(135deg, var(--b7-ruby), var(--b7-ruby2)) !important;
  border: 0 !important; border-radius: 14px !important; font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(225, 29, 72, .3) !important;
}
.btn-warning, .btn-success, .van-button--warning {
  background: linear-gradient(135deg, var(--b7-gold), var(--b7-gold2)) !important;
  border: 0 !important; border-radius: 14px !important; color: #2a1200 !important; font-weight: 800 !important;
}

/* ---------- bottom nav ---------- */
.footer, .footer-sm, .nav-footer {
  background: linear-gradient(180deg, rgba(20, 4, 12, .97), rgba(8, 2, 6, .99)) !important;
  border-top: 1px solid var(--b7-line) !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .6) !important;
}
.nav-footer .nav-item img {
  filter: grayscale(1) brightness(1.9) sepia(1) saturate(5) hue-rotate(-18deg) !important;
  opacity: .92 !important;
}
.nav-footer .nav-item.active img, .nav-footer .nav-item .active img { filter: none !important; opacity: 1 !important; }
.nav-footer .customize-icon {
  background: radial-gradient(circle at 50% 35%, rgba(240, 165, 0, .30), rgba(225, 29, 72, .16) 60%, transparent 72%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px var(--b7-line), 0 0 20px rgba(255, 45, 90, .35) !important;
}
.footer-text, .nav-footer .footer-text { color: var(--b7-dim) !important; }

/* ---------- misc ---------- */
a, .text-primary, .text-warning { color: var(--b7-gold) !important; }
.badge, .van-tag { background: linear-gradient(135deg, var(--b7-ruby), var(--b7-ruby2)) !important; color: #fff !important; }
hr, .divider { border-color: var(--b7-line) !important; }
.table, .table td, .table th { color: var(--b7-text) !important; border-color: var(--b7-line) !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--b7-gold2), var(--b7-ruby)); border-radius: 8px; }
::-webkit-scrollbar-track { background: #0b0407; }