/* Burma Mega Buffalo — layer 2: ခပ်မိုက်မိုက် (badass) finish.
   Adds texture, gold brackets, sheen, glow + ornaments on top of bf7-theme.css.
   Loaded LAST in index.html. Layout untouched — decoration only. */

:root {
  --bmb-gold: #ffd76a;
  --bmb-gold2: #f0a500;
  --bmb-ruby: #e11d48;
  --bmb-ruby2: #ff4d6d;
  --bmb-line: rgba(255, 215, 106, .22);
  --bmb-ink: #06030a;
}

/* ---------- 1. background: carbon weave + red halo + vignette ---------- */
html, body, #app, .app, .main-container, .middle-container {
  background-color: var(--bmb-ink) !important;
  background-image:
    radial-gradient(900px 420px at 50% -6%, rgba(225, 29, 72, .34) 0%, rgba(225, 29, 72, 0) 62%),
    radial-gradient(1200px 700px at 50% 108%, rgba(240, 165, 0, .10) 0%, rgba(240, 165, 0, 0) 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #12030a 0%, #0a0207 48%, #06030a 100%) !important;
  background-attachment: fixed !important;
}
body::after { /* vignette */
  content: "" !important;
  position: fixed !important; inset: 0 !important;
  pointer-events: none !important; z-index: 3 !important;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0, 0, 0, .55) 100%) !important;
}

/* ---------- 2. top bar: gold hairline + buffalo watermark ---------- */
.navbar, nav.navbar, .navbar.navbar-dark {
  border-bottom: 1px solid var(--bmb-line) !important;
  box-shadow: 0 1px 0 rgba(255, 215, 106, .18) inset, 0 10px 30px rgba(0, 0, 0, .65) !important;
  position: relative !important;
  overflow: hidden !important;
}
.navbar::after {
  content: "" !important;
  position: absolute !important;
  right: -18px !important; top: 50% !important;
  width: 96px !important; height: 96px !important;
  transform: translateY(-50%) !important;
  background: url("/img/icons/bf7-mark.webp") center/contain no-repeat !important;
  opacity: .10 !important;
  pointer-events: none !important;
}
.navbar-brand img, .navbar img, .navbar .logo {
  filter: drop-shadow(0 0 8px rgba(255, 61, 100, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .9)) !important;
}

/* ---------- 3. section titles: gold gradient + horn slash + shimmer ---------- */
h4.text-nowrap, .section-title, .section-head, .title-text {
  background: linear-gradient(96deg, #fff8e6 0%, var(--bmb-gold) 38%, var(--bmb-ruby2) 78%, var(--bmb-gold) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 900 !important;
  animation: bmbSweep 6s linear infinite !important;
}
h4.text-nowrap::before, .section-title::before {
  width: 4px !important; border-radius: 3px !important;
  background: linear-gradient(180deg, var(--bmb-gold), var(--bmb-ruby)) !important;
  box-shadow: 0 0 12px rgba(255, 61, 100, .8) !important;
}
@keyframes bmbSweep { to { background-position: -220% 0; } }

/* ---------- 4. game tiles: gold corner bracket + sheen + lift ---------- */
.col-3.px-1.my-2 > div, .col-4.px-1.my-2 > div, .col-6.px-1.my-2 > div {
  position: relative !important;
  border: 1px solid rgba(255, 215, 106, .20) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6) inset !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.col-3.px-1.my-2 > div::before, .col-4.px-1.my-2 > div::before, .col-6.px-1.my-2 > div::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(140deg, var(--bmb-gold) 0%, transparent 26%, transparent 74%, var(--bmb-ruby) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important; mask-composite: exclude !important;
  opacity: .55 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.col-3.px-1.my-2 > div::after, .col-4.px-1.my-2 > div::after, .col-6.px-1.my-2 > div::after {
  content: "" !important;
  position: absolute !important; top: -60% !important; left: -140% !important;
  width: 60% !important; height: 220% !important;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent) !important;
  transform: rotate(18deg) !important;
  pointer-events: none !important;
  transition: left .55s ease !important;
  z-index: 3 !important;
}
.col-3.px-1.my-2 > div:active::after, .col-4.px-1.my-2 > div:active::after { left: 130% !important; }
.col-3.px-1.my-2 > div:hover, .col-4.px-1.my-2 > div:hover {
  border-color: var(--bmb-gold) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6), 0 0 18px rgba(240, 165, 0, .35) !important;
  transform: translateY(-2px) !important;
}

/* ---------- 5. category chips ---------- */
.mid-item {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 215, 106, .16) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .5) inset !important;
}
.mid-item.active {
  border-color: var(--bmb-gold) !important;
  background: linear-gradient(160deg, rgba(240, 165, 0, .22), rgba(225, 29, 72, .16)) !important;
  box-shadow: 0 6px 18px rgba(240, 165, 0, .35), 0 0 14px rgba(255, 61, 100, .28) inset !important;
}

/* ---------- 6. buttons: metal + bevel + breathing glow ---------- */
.btn-primary, .van-button--primary, .van-button--danger, .btn-danger {
  background: linear-gradient(180deg, #ff5c7c 0%, var(--bmb-ruby) 52%, #a30f33 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(0, 0, 0, .35) inset,
              0 8px 22px rgba(225, 29, 72, .38) !important;
  border: 0 !important; border-radius: 14px !important;
  letter-spacing: .3px !important;
  transition: transform .12s ease, box-shadow .2s ease !important;
}
.btn-warning, .btn-success, .van-button--warning, .van-button--success {
  background: linear-gradient(180deg, #ffe9a8 0%, var(--bmb-gold) 45%, var(--bmb-gold2) 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -3px 0 rgba(140, 90, 0, .55) inset,
              0 8px 22px rgba(240, 165, 0, .38) !important;
  color: #2a1200 !important;
  border: 0 !important; border-radius: 14px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
  animation: bmbBreathe 3.6s ease-in-out infinite !important;
}
.btn-primary:active, .btn-warning:active, .van-button--primary:active, .van-button--warning:active {
  transform: scale(.975) !important;
}
@keyframes bmbBreathe {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(140,90,0,.55) inset, 0 8px 22px rgba(240,165,0,.34); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(140,90,0,.55) inset, 0 10px 30px rgba(255,61,100,.46); }
}

/* ---------- 7. popups: double gold frame + horn ornaments ---------- */
.modal-content, .van-popup, .van-dialog {
  border: 1px solid rgba(255, 215, 106, .38) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8) inset, 0 0 0 4px rgba(255, 215, 106, .06),
              0 26px 60px rgba(0, 0, 0, .75), 0 0 40px rgba(225, 29, 72, .22) !important;
}
.modal-content::before, .van-dialog::before {
  content: "" !important;
  position: absolute !important; inset: 6px !important;
  border: 1px solid rgba(255, 215, 106, .14) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

/* ---------- 8. bottom nav: frost + gold active glow ---------- */
.footer, .footer-sm, .nav-footer {
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-top: 1px solid var(--bmb-line) !important;
  box-shadow: 0 -1px 0 rgba(255, 215, 106, .16) inset, 0 -12px 30px rgba(0, 0, 0, .7) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.nav-footer .nav-item.active img, .nav-footer .nav-item .active img {
  filter: drop-shadow(0 0 7px rgba(255, 215, 106, .75)) !important;
}
.nav-footer .nav-item.active .footer-text { color: var(--bmb-gold) !important; }

/* ---------- 9. money + numbers ---------- */
.balance, .balance-text, .amount, .wallet-amount, .money {
  color: var(--bmb-gold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .4px !important;
  text-shadow: 0 0 14px rgba(240, 165, 0, .45) !important;
}

/* ---------- 10. small chrome ---------- */
.badge, .van-tag {
  background: linear-gradient(135deg, var(--bmb-ruby), var(--bmb-ruby2)) !important;
  box-shadow: 0 0 10px rgba(225, 29, 72, .55) !important;
  font-weight: 800 !important;
}
::selection { background: rgba(255, 215, 106, .28) !important; color: #fff !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bmb-gold), var(--bmb-ruby)) !important;
  box-shadow: 0 0 8px rgba(255, 215, 106, .4) !important;
}
.van-loading__spinner { color: var(--bmb-gold) !important; }

/* ---------- 11. respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  h4.text-nowrap, .section-title, .btn-warning, .van-button--warning { animation: none !important; }
  .col-3.px-1.my-2 > div::after, .col-4.px-1.my-2 > div::after { transition: none !important; }
}