/* ═══════════════════════════════════════════════════════════
   RAJ365 — Player App Premium Override v2
   Luxury Casino (Stake / BC.Game / Evolution-level feel)
   ═══════════════════════════════════════════════════════════
   কোনো compiled JS/CSS বদলানো হয়নি। শুধু app-এর নিজস্ব
   design-token variable আর real, খুঁজে-বের-করা class override।
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── ব্র্যান্ড গোল্ড ── */
  --main-color: #D4AF37;
  --main_gradient-color: linear-gradient(90deg, #F0D264 0%, #B8942C 100%);
  --main_gradient-color2: linear-gradient(180deg, #F0D264 0%, #B8942C 100%);
  --light-main_gradient-color: var(--main_gradient-color);
  --light-main-color: var(--main-color);

  /* ── Text hierarchy ── */
  --text_white: #fff;
  --text_color_L1: #F5EFDC;
  --text_color_L2: #C9BFA0;
  --text_color_L3: #8A8270;
  --text_color_L4: #1A1400;

  /* ── Background hierarchy ── */
  --bg_color_L1: #060605;
  --bg_color_L2: #14120C;
  --bg_color_L3: #1C1810;
  --light-bg_white: #14120C;
  --sheet_detail_bg_color: #14120C;
  --Dividing-line_color: #3A3226;

  --pop_bg-color: linear-gradient(180deg, #F0D264 0%, #B8942C 68.59%);
  --sheet_nva_color: var(--main-color);

  --norm_red-color: #E8544A;
  --norm_green-color: #1FB979;
  --norm_secondary-color: #F0C419;
  --Secondary_red_color: #E8544A;
  --Secondary_green_color: #1FB979;

  /* ── Custom luxury token ── */
  --rg-radius: 16px;
  --rg-radius-lg: 22px;
  --rg-shadow: 0 6px 24px rgba(0,0,0,.55);
  --rg-glow: 0 0 20px rgba(212,175,55,.45);
  --rg-glow-soft: 0 0 10px rgba(212,175,55,.25);
  --rg-glass: rgba(28,24,16,.62);
  --rg-font-display: 'Cinzel', serif;
  --rg-font-body: 'Inter', -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   Luxury গ্রেডিয়েন্ট Background (পুরো app)
   ═══════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(ellipse at top, #1A1610 0%, transparent 60%),
    linear-gradient(180deg, #0A0906 0%, #060605 100%) !important;
  font-family: var(--rg-font-body) !important;
}
.van-tabs__content, .van-pull-refresh {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   Header — Luxury Casino Style
   ═══════════════════════════════════════════════════════════ */
.header, .van-nav-bar, .promptHeader {
  background: linear-gradient(180deg, #17140C 0%, #0A0906 100%) !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--main-color), transparent) 1 !important;
  box-shadow: 0 2px 16px rgba(212,175,55,.12) !important;
}
.van-nav-bar__title {
  font-family: var(--rg-font-display) !important;
  color: var(--main-color) !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-shadow: 0 0 12px rgba(212,175,55,.4);
}
.homeIcon, .icons .icon {
  filter: drop-shadow(0 0 4px rgba(212,175,55,.3));
}

/* ═══════════════════════════════════════════════════════════
   Banner — Gold Glow + Overlay + Rounded
   ═══════════════════════════════════════════════════════════ */
.my-swipe {
  border-radius: var(--rg-radius-lg) !important;
  overflow: hidden !important;
  margin: 10px !important;
  box-shadow: var(--rg-shadow), 0 0 0 1px rgba(212,175,55,.25) !important;
  position: relative;
}
.my-swipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,6,5,.55) 100%);
  pointer-events: none;
  border-radius: var(--rg-radius-lg);
}
.van-swipe-item {
  border-radius: var(--rg-radius-lg) !important;
}
.van-swipe__indicator {
  background: rgba(255,255,255,.35) !important;
  width: 5px !important;
  height: 5px !important;
}
.van-swipe__indicator--active {
  background: var(--main-color) !important;
  box-shadow: 0 0 8px rgba(212,175,55,.8);
  width: 16px !important;
  border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════════════════
   Category Tabs — Premium Circular Icon Style
   ═══════════════════════════════════════════════════════════ */
.fun-tabs {
  background: rgba(20,18,12,.88) !important;
  border-radius: var(--rg-radius) !important;
  border: 1px solid rgba(212,175,55,.15) !important;
  margin: 10px !important;
  box-shadow: var(--rg-shadow) !important;
}
.tab_active {
  background: var(--main_gradient-color) !important;
  color: #1A1400 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: var(--rg-glow) !important;
}
.fun-tab-item {
  color: var(--text_color_L2) !important;
  border-radius: 999px !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
.fun-tab-item:active {
  transform: scale(.94);
}

/* ═══════════════════════════════════════════════════════════
   Game Cards — Glassmorphism + Gold Border + Hover Animation
   ═══════════════════════════════════════════════════════════ */
.gameItem1, .gameImte2, .game51, .aloneGame, .all_item, .all_slot,
.three_item, .three_item22, .three_item3 {
  border-radius: var(--rg-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  box-shadow: var(--rg-shadow) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease !important;
}
.gameItem1:active, .aloneGame:active, .all_item:active,
.gameImte2:active, .game51:active {
  transform: scale(.95) translateY(-2px);
  box-shadow: var(--rg-glow) !important;
  border-color: var(--main-color) !important;
}

/* ═══════════════════════════════════════════════════════════
   Game Card-এর উপর Premium Shine-Sweep Animation
   (শুধু transform + opacity — GPU-accelerated, তাই smooth;
   আগের version background-position/border-color ব্যবহার
   করছিল যেটা phone-কে বার বার repaint করতে বাধ্য করে,
   অনেক card একসাথে থাকলে lag তৈরি করে — এখন ঠিক করা হলো)
   ═══════════════════════════════════════════════════════════ */
.gameItem1, .aloneGame, .all_item, .gameImte2, .game51, .citem {
  position: relative;
  overflow: hidden;
}
.gameItem1::after, .aloneGame::after, .all_item::after,
.gameImte2::after, .game51::after, .citem::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(0) skewX(-20deg) translateZ(0);
  animation: rg-card-shine 4.5s ease-in-out infinite;
  animation-delay: calc(var(--rg-shine-delay, 0) * 1s);
  pointer-events: none;
  will-change: transform;
}
@keyframes rg-card-shine {
  0%, 25%  { transform: translateX(0) skewX(-20deg) translateZ(0); }
  55%, 100% { transform: translateX(340%) skewX(-20deg) translateZ(0); }
}
/* প্রতিটা card একই সময়ে চমকাবে না — সামান্য ভিন্ন delay */
.gameItem1:nth-child(2n)  { --rg-shine-delay: .6; }
.gameItem1:nth-child(3n)  { --rg-shine-delay: 1.2; }
.citem:nth-child(2)       { --rg-shine-delay: .5; }
.citem:nth-child(3)       { --rg-shine-delay: 1; }

/* Gold glow-ring, opacity দিয়ে animate করা (border-color না — smooth) */
.gameItem1, .aloneGame, .all_item, .citem {
  box-shadow: var(--rg-shadow), 0 0 0 1px rgba(212,175,55,.3);
}
.gameItem1::before, .aloneGame::before, .all_item::before, .citem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(212,175,55,.75);
  opacity: 0;
  animation: rg-glow-breathe 3s ease-in-out infinite;
  animation-delay: calc(var(--rg-shine-delay, 0) * 1s);
  pointer-events: none;
  will-change: opacity;
}
@keyframes rg-glow-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gameItem1::after, .aloneGame::after, .all_item::after,
  .gameImte2::after, .game51::after, .citem::after,
  .gameItem1::before, .aloneGame::before, .all_item::before, .citem::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Super Jackpot Card + অন্যান্য content card (.citem) — Premium
   ═══════════════════════════════════════════════════════════ */
.citem, .Xg-list .box {
  border-radius: var(--rg-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,.3) !important;
  box-shadow: var(--rg-shadow) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.citem:active {
  transform: scale(.96);
  box-shadow: var(--rg-glow) !important;
}

/* ═══════════════════════════════════════════════════════════
   Bottom-এ ভাসমান নতুন nav-এর জন্য নিচের content-এ safety
   padding — যাতে "Add to Desktop"/Bonus banner এর সাথে
   কখনো overlap না করে
   ═══════════════════════════════════════════════════════════ */
.float {
  bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 999 !important;
}
body {
  padding-bottom: calc(1.9rem + env(safe-area-inset-bottom, 0px));
}
.win_item {
  border-radius: var(--rg-radius) !important;
  box-shadow: var(--rg-shadow) !important;
  border: 1px solid rgba(212,175,55,.18) !important;
}
.profit__list-item {
  background: rgba(20,18,12,.85) !important;
  border-radius: 12px !important;
}
.profit__list-item__info {
  color: var(--text_color_L1) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   Bottom Navigation — Floating Premium Style
   (আসল class: .tabbar__container — এটা Vant-এর generic
   .van-tabbar না, বরং app-এর নিজস্ব, background-image সহ
   component। তাই background-image সহ override করা হচ্ছে।)
   ═══════════════════════════════════════════════════════════ */
.tabbar__container {
  background: rgba(20,18,12,.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background-image: none !important;
  border: 1px solid rgba(212,175,55,.28) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.1) !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
.tabbar__container-item {
  color: var(--text_color_L2) !important;
  transition: transform .15s ease, color .2s ease;
}
.tabbar__container-item:active {
  transform: translateY(-2px) scale(.96);
}

/* ── পুরনো Vant-জেনেরিক fallback (অন্য কোনো page-এ ব্যবহৃত হলে, ক্ষতি নেই) ── */
.van-tabbar {
  background: linear-gradient(180deg, #17140C 0%, #0A0906 100%) !important;
  border: 1px solid rgba(212,175,55,.2) !important;
  border-radius: 22px !important;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  width: calc(100% - 20px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.08) !important;
  position: relative;
}
.van-tabbar-item {
  color: var(--text_color_L3) !important;
  transition: transform .15s ease, color .2s ease;
}
.van-tabbar-item--active {
  color: var(--main-color) !important;
  transform: translateY(-3px);
}
.van-tabbar-item--active .van-tabbar-item__icon {
  filter: drop-shadow(0 0 6px rgba(212,175,55,.7));
}

/* ═══════════════════════════════════════════════════════════
   Buttons — Gold Gradient + Glow
   ═══════════════════════════════════════════════════════════ */
.van-button--primary {
  background: var(--main_gradient-color2) !important;
  border: none !important;
  border-radius: var(--rg-radius) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  box-shadow: var(--rg-glow) !important;
  transition: transform .12s ease, box-shadow .2s ease !important;
}
.van-button--primary:active {
  transform: scale(.96);
  box-shadow: var(--rg-glow-soft) !important;
}
.van-button--default {
  border-radius: var(--rg-radius) !important;
  background: rgba(20,18,12,.9) !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  color: var(--text_color_L1) !important;
}

/* ═══════════════════════════════════════════════════════════
   Search Box
   ═══════════════════════════════════════════════════════════ */
.van-search__content {
  background: rgba(20,18,12,.9) !important;
  border: 1px solid rgba(212,175,55,.22) !important;
  border-radius: 999px !important;
}
.van-field__control {
  color: var(--text_color_L1) !important;
}

/* ═══════════════════════════════════════════════════════════
   Cards / Popups / Dialogs — glass
   ═══════════════════════════════════════════════════════════ */
.van-cell-group, .van-card {
  background: rgba(20,18,12,.9) !important;
  border: 1px solid rgba(212,175,55,.15) !important;
  border-radius: var(--rg-radius) !important;
}
.van-popup, .van-dialog {
  background: linear-gradient(180deg, #17140C 0%, #0A0906 100%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(212,175,55,.3) !important;
  box-shadow: var(--rg-glow-soft), var(--rg-shadow) !important;
}
.van-dialog__header {
  font-family: var(--rg-font-display) !important;
  color: var(--main-color) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   Scrollbar
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg_color_L1); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--main-color); }

/* ═══════════════════════════════════════════════════════════
   Ripple + Fade-in keyframes (custom.js ব্যবহার করে)
   ═══════════════════════════════════════════════════════════ */
@keyframes rg-ripple {
  to { transform: scale(3); opacity: 0; }
}
.rg-ripple-span {
  position: absolute;
  border-radius: 50%;
  background: rgba(212,175,55,.55);
  transform: scale(0);
  animation: rg-ripple .5s ease-out;
  pointer-events: none;
}
@keyframes rg-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rg-fade-in {
  animation: rg-fade-in .45s ease both;
}
@keyframes rg-glow-pulse {
  0%, 100% { box-shadow: var(--rg-glow-soft); }
  50%      { box-shadow: var(--rg-glow); }
}
.rg-pulse {
  animation: rg-glow-pulse 2.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   Signature Shimmer — Primary button-এর উপর দিয়ে আলোর রেখা
   (এটাই সবচেয়ে premium fintech/casino app-এ দেখা যায়)
   ═══════════════════════════════════════════════════════════ */
.van-button--primary {
  position: relative;
  overflow: hidden;
}
.van-button--primary::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: rg-shimmer 3.2s ease-in-out infinite;
}
@keyframes rg-shimmer {
  0%   { left: -60%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}

/* ═══════════════════════════════════════════════════════════
   আরও Vant Component (Toast, Loading, Overlay, Empty state)
   ═══════════════════════════════════════════════════════════ */
.van-toast {
  background: rgba(15,13,9,.97) !important;
  border: 1px solid rgba(212,175,55,.3) !important;
  border-radius: var(--rg-radius) !important;
}
.van-loading__spinner {
  color: var(--main-color) !important;
}
.van-overlay {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(2px);
}
.van-empty__description {
  color: var(--text_color_L3) !important;
}
.van-pull-refresh__head {
  color: var(--main-color) !important;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — motion-sensitive user-দের জন্য সব animation বন্ধ
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .van-button--primary::before,
  .rg-pulse,
  .rg-fade-in,
  .gameItem1, .aloneGame, .all_item,
  .van-tabbar-item--active,
  .fun-tab-item {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Bottom Nav-এর মাঝের Central Button (Register) — Signature FAB
   ═══════════════════════════════════════════════════════════ */
.van-tabbar-item:nth-child(3) {
  position: relative;
  transform: translateY(-14px);
}
.van-tabbar-item:nth-child(3) .van-tabbar-item__icon {
  background: var(--main_gradient-color2);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rg-glow), 0 4px 14px rgba(0,0,0,.5);
  border: 3px solid var(--bg_color_L2);
}
.van-tabbar-item:nth-child(3) .van-tabbar-item__icon img,
.van-tabbar-item:nth-child(3) .van-tabbar-item__icon svg {
  filter: brightness(0) saturate(100%);
}
.van-tabbar-item:nth-child(3).van-tabbar-item--active .van-tabbar-item__icon {
  animation: rg-glow-pulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   VIP / Level Badge
   ═══════════════════════════════════════════════════════════ */
.level {
  background: var(--main_gradient-color) !important;
  color: #1A1400 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: var(--rg-glow-soft) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   Floating entry buttons (rewardCenter/float — support bubble ইত্যাদি)
   ═══════════════════════════════════════════════════════════ */
.float, .float-entry, .rewardCenter {
  border-radius: 50% !important;
  box-shadow: var(--rg-glow), var(--rg-shadow) !important;
  border: 1.5px solid rgba(212,175,55,.4) !important;
}