/* Activity Center — refined “lounge” depth (loads after neon.css; must beat body background-color !important) */

html:has(.container.activity-wrapper[data-v-4a7709f3]),
body:has(.container.activity-wrapper[data-v-4a7709f3]) {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 207, 255, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(30, 144, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 0% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 55%),
    radial-gradient(circle at 50% 0%, var(--bg-soft) 0%, var(--bg-main) 52%, var(--bg-main) 100%) !important;
  background-color: var(--bg-main) !important;
}

/* Less neon grid noise on Activity (neon.css body::before / ::after) */
body:has(.container.activity-wrapper[data-v-4a7709f3])::before {
  opacity: 0.1 !important;
}

body:has(.container.activity-wrapper[data-v-4a7709f3])::after {
  opacity: 0.06 !important;
}

body #app .container.activity-wrapper[data-v-4a7709f3] {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 207, 255, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(30, 144, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, var(--bg-soft) 0%, var(--bg-main) 55%, var(--bg-main) 100%);
  min-height: 100vh;
}

body #app .container.activity-wrapper[data-v-4a7709f3],
body #app .container.activity-wrapper .activity-panel[data-v-4a7709f3] {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* Stack quick tiles + rewards vertically with real gap (avoids overlap / wrong paint order) */
body #app .container.activity-wrapper .activity-panel[data-v-4a7709f3] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 12px 4px 8px !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Header — editorial title + brand underline (column stack: row flex put title + line side-by-side) */
body #app .activity-wrapper .activity-center-header[data-v-4a7709f3],
.activity-center-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 6px;
  padding: 10px 8px 18px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.activity-center-header::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: min(220px, 70%);
  max-width: 100%;
  height: 2px;
  margin: 14px 0 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 207, 255, 0.5) 22%,
    rgba(255, 215, 0, 0.35) 78%,
    transparent
  );
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.12);
}

h2.activity-center-title,
.activity-center-title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: "Bebas Neue", "Teko", system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 5.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.15;
  color: #eaf6ff !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h2.activity-center-title,
  .activity-center-title {
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(234, 246, 255, 0.92) 45%,
      rgba(166, 189, 212, 0.88) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none;
    filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.45));
  }
}

/* Kill glass halo border + neon stack on top-row tiles */
body #app .activity-wrapper .activity-glass-top .header-item[data-v-4a7709f3]::before {
  display: none !important;
  content: none !important;
  padding: 0 !important;
  background: none !important;
}

/* Glass stack — sits above rewards; height from content only (no flex stretch) */
body #app .activity-wrapper .activity-glass-stack {
  position: relative;
  z-index: 3 !important;
  display: flex;
  flex-direction: column;
  gap: 14px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body #app .activity-wrapper .activity-glass-stack::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  width: 88%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06) 50%,
    transparent
  );
  pointer-events: none;
}

/*
 * Bundle: .activity-panel-header[data-v] uses display:flex + space-between.
 * That beats the unscoped .activity-glass-top.quick-actions { grid } rule — tiles misalign.
 */
body #app .activity-wrapper .activity-panel-header.activity-glass-top.quick-actions[data-v-4a7709f3] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body #app .activity-wrapper .activity-panel-header.activity-quick-extra.quick-actions[data-v-4a7709f3] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Card system: quick actions */
body #app .activity-wrapper .activity-glass-top .header-item.action[data-v-4a7709f3] {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02) 48%,
    rgba(5, 1, 10, 0.35) 100%
  ) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* Do not use height:100% — it balloons row height in nested flex/grid */
  min-height: 158px;
  height: auto !important;
  max-height: none !important;
  justify-content: flex-start;
  align-self: stretch;
}

body #app .activity-wrapper .activity-glass-top.quick-actions .header-item.action[data-v-4a7709f3] {
  padding: 12px 8px 14px !important;
}

/* Invitation bonus tile (a2 → .blue): “Invite & Earn More” */
body #app .activity-wrapper .activity-glass-top .header-item.action.blue[data-v-4a7709f3] {
  background:
    linear-gradient(155deg, rgba(5, 0, 16, 0.82) 0%, rgba(5, 0, 16, 0.42) 55%, rgba(91, 196, 216, 0.06) 100%),
    url("/assets/banners/invitation.png") center / cover no-repeat !important;
  border-color: rgba(91, 196, 216, 0.18) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Betting rebate (a3 → .orange): “Get Cashback Daily” */
body #app .activity-wrapper .activity-glass-top .header-item.action.orange[data-v-4a7709f3] {
  background:
    linear-gradient(155deg, rgba(5, 0, 16, 0.82) 0%, rgba(5, 0, 16, 0.42) 55%, rgba(255, 213, 74, 0.05) 100%),
    url("/assets/banners/betting-rebate.png") center / cover no-repeat !important;
  border-color: rgba(255, 180, 100, 0.2) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Super jackpot (→ .green): “Win Big Rewards” */
body #app .activity-wrapper .activity-glass-top .header-item.action.green[data-v-4a7709f3] {
  background:
    linear-gradient(155deg, rgba(5, 0, 16, 0.82) 0%, rgba(5, 0, 16, 0.42) 55%, rgba(57, 255, 20, 0.05) 100%),
    url("/assets/banners/superjackpot.png") center / cover no-repeat !important;
  border-color: rgba(74, 222, 128, 0.22) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Bottom scrim so titles read over busy art (z-index under text/icon) */
body #app .activity-wrapper .activity-glass-top .header-item.action[data-v-4a7709f3]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5, 0, 16, 0.98) 0%,
    rgba(5, 0, 16, 0.78) 22%,
    rgba(5, 0, 16, 0.35) 55%,
    transparent 100%
  );
}

body #app .activity-wrapper .activity-glass-top .header-item.action.blue[data-v-4a7709f3] i.action-ri,
body #app .activity-wrapper .activity-glass-top .header-item.action.orange[data-v-4a7709f3] i.action-ri,
body #app .activity-wrapper .activity-glass-top .header-item.action.green[data-v-4a7709f3] i.action-ri {
  position: relative;
  z-index: 3;
}

body #app .activity-wrapper .activity-glass-top .header-item.action[data-v-4a7709f3] .van-badge {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0 !important;
  line-height: 1;
  z-index: 3;
}

body #app .activity-wrapper .activity-glass-top .header-item.action[data-v-4a7709f3] .van-badge__wrapper {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}

/* Icons — no emoji + icon mix (title ::before removed) */
.activity-glass-top .header-item.action .action-title::before {
  content: none !important;
}

.activity-glass-top .header-item.action i,
.activity-glass-top .header-item.action i.action-ri {
  font-size: 26px;
  display: inline-block;
  margin-bottom: 6px;
  filter: none !important;
  position: relative;
  z-index: 3;
}

body #app .activity-wrapper .activity-glass-top .header-item.action.blue i,
body #app .activity-wrapper .activity-glass-top .header-item.action.blue i.action-ri {
  color: #4fc3f7;
}

body #app .activity-wrapper .activity-glass-top .header-item.action.orange i,
body #app .activity-wrapper .activity-glass-top .header-item.action.orange i.action-ri {
  color: #ffb74d;
}

body #app .activity-wrapper .activity-glass-top .header-item.action.green i,
body #app .activity-wrapper .activity-glass-top .header-item.action.green i.action-ri {
  color: #4ade80;
}

.activity-glass-top .action-title {
  margin: 0;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.28;
  position: relative;
  z-index: 3;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 12px rgba(0, 0, 0, 0.75);
}

.activity-glass-top .action-sub {
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 1;
  color: rgba(241, 245, 249, 0.98);
  line-height: 1.3;
  position: relative;
  z-index: 3;
  letter-spacing: 0.03em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.7);
}

.activity-glass-top .header-item.action {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-glass-top .header-item.action:hover {
  transform: translateY(-2px);
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(91, 196, 216, 0.08) !important;
}

/* Secondary quick row — softer depth */
body #app .activity-wrapper .activity-quick-extra .header-item[data-v-4a7709f3] {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(
    165deg,
    rgba(20, 25, 40, 0.75),
    rgba(11, 8, 20, 0.55) 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 28px rgba(0, 0, 0, 0.42) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body #app .activity-wrapper .activity-quick-extra .header-item[data-v-4a7709f3]:hover {
  border-color: rgba(91, 196, 216, 0.22) !important;
  transform: translateY(-1px);
}

/* Rewards — below quick row; lower z-index so tiles stay visible if anything touches */
body #app .activity-wrapper .activity-rewards-section[data-v-4a7709f3] {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body #app .activity-wrapper .activity-rewards-head[data-v-4a7709f3] {
  margin-bottom: 14px !important;
  padding-bottom: 2px !important;
}

.activity-rewards-title {
  font-family: "Bebas Neue", "Teko", system-ui, sans-serif !important;
  font-weight: 600;
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eaf6ff !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .activity-rewards-title {
    background: linear-gradient(90deg, #eaf6ff 0%, rgba(166, 189, 212, 0.95) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
  }
}

.activity-rewards-dot {
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.activity-rewards-dot.is-active {
  background: linear-gradient(135deg, #5bc4d8, #7c3acd) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(91, 196, 216, 0.25),
    0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* Rewards row: two-column grid */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content.rewards[data-v-4a7709f3] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  flex-wrap: unset !important;
  align-items: stretch !important;
}

body #app .activity-wrapper .activity-rewards-section .activity-panel-content.rewards .content-title.reward-card[data-v-4a7709f3] {
  flex: none !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Reward cards — same glass stack as actions */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card[data-v-4a7709f3] {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02) 50%,
    rgba(5, 1, 10, 0.3) 100%
  ) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 32px rgba(0, 0, 0, 0.48) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: grid !important;
  grid-template-columns: 36px 1fr minmax(76px, 38%) !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  padding: 18px 14px 16px 16px !important;
  min-height: 0 !important;
  overflow: visible !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card[data-v-4a7709f3]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Hide bundled 3D promo art so local PNG backgrounds show (lazy imgs sit on top otherwise) */
body #app .activity-wrapper .activity-rewards-section .content-title.reward-card.purple img[data-v-4a7709f3],
body #app .activity-wrapper .activity-rewards-section .content-title.reward-card.blue img[data-v-4a7709f3] {
  display: none !important;
}

/* Two-column layout; middle row grows so CTAs align bottom-left across both cards */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.purple[data-v-4a7709f3],
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.blue[data-v-4a7709f3] {
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-height: 248px;
  padding: 18px 14px 18px 16px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  overflow: visible !important;
}

/* Gift / redeem card — gift-bg.png alongside activity-dashboard.css */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.purple[data-v-4a7709f3] {
  background:
    linear-gradient(105deg, rgba(5, 0, 16, 0.92) 0%, rgba(5, 0, 16, 0.55) 48%, rgba(5, 0, 16, 0.18) 100%),
    linear-gradient(180deg, rgba(5, 0, 16, 0.72) 0%, transparent 55%),
    url("gift-bg.png") center / cover no-repeat !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Daily sign-in card — attendance-bg.png alongside activity-dashboard.css */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.blue[data-v-4a7709f3] {
  background:
    linear-gradient(105deg, rgba(5, 0, 16, 0.92) 0%, rgba(5, 0, 16, 0.55) 48%, rgba(5, 0, 16, 0.18) 100%),
    linear-gradient(180deg, rgba(5, 0, 16, 0.72) 0%, transparent 55%),
    url("attendance-bg.png") center / cover no-repeat !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Scoped bundle forces p into grid-column: 1 — override for full-width readable copy */
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.purple h4.reward-card-heading[data-v-4a7709f3],
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.blue h4.reward-card-heading[data-v-4a7709f3] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(11px, 3.1vw, 14px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.28 !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  position: relative;
  z-index: 1;
}

body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.purple .reward-card-icon[data-v-4a7709f3],
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.blue .reward-card-icon[data-v-4a7709f3] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  padding-top: 2px;
  z-index: 1;
}

body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.purple p.reward-card-desc[data-v-4a7709f3],
body #app .activity-wrapper .activity-rewards-section .activity-panel-content .content-title.reward-card.blue p.reward-card-desc[data-v-4a7709f3] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 0 !important;
  padding: 12px 14px !important;
  background: rgba(5, 0, 16, 0.9) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  font-size: 12.5px !important;
  line-height: 1.52 !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  opacity: 1 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 0.8) !important;
  position: relative;
  z-index: 2;
}

body #app .activity-wrapper .activity-rewards-section .content-title.reward-card.purple button.reward-btn,
body #app .activity-wrapper .activity-rewards-section .content-title.reward-card.blue button.reward-btn {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  justify-self: start !important;
  align-self: end !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 10px !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

.activity-rewards-section .reward-card-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0 !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.activity-rewards-section .reward-card-desc {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
  color: rgba(234, 240, 255, 0.95);
  line-height: 1.35;
  text-align: left;
  padding: 0 !important;
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: start;
}

.activity-rewards-section .reward-card-icon {
  font-size: 24px;
  line-height: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.activity-rewards-section .reward-card-icon .ri-gift-line {
  color: var(--gold);
  filter: none;
}

.activity-rewards-section .reward-card-icon .ri-calendar-check-line {
  color: var(--blue-primary);
  filter: none;
}

.activity-rewards-section .reward-card .reward-btn {
  grid-column: 1 / 3;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin-top: 0;
}

body #app .activity-wrapper .activity-rewards-section .reward-card img[data-v-4a7709f3] {
  grid-column: 3 !important;
  grid-row: 1 / span 3 !important;
  width: auto !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  justify-self: end;
  align-self: center !important;
  margin: 0 !important;
}

/* Premium CTA — theme gradient */
.activity-rewards-section .reward-card button,
.activity-rewards-section .reward-card .reward-btn {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Teko", "Bebas Neue", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: #0a1628;
  background: linear-gradient(105deg, var(--gold) 0%, var(--gold-warm) 50%, var(--gold-dark) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
}

.activity-rewards-section .reward-card .reward-btn--blue {
  background: linear-gradient(105deg, var(--blue-primary) 0%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
}

@keyframes tw-activity-scroll-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Space between Activity panel (tiles + rewards) and the promo list */
body #app .container.activity-wrapper > .van-list {
  margin-top: 24px !important;
}

/* Activity list rows — premium frame + staggered entrance (bundled .scroll lives in page-activity) */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3] {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 48px rgba(0, 0, 0, 0.55) !important;
  opacity: 0;
  animation: tw-activity-scroll-card-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(1) {
  animation-delay: 0.04s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(2) {
  animation-delay: 0.1s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(3) {
  animation-delay: 0.16s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(4) {
  animation-delay: 0.22s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(5) {
  animation-delay: 0.28s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(6) {
  animation-delay: 0.34s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(7) {
  animation-delay: 0.4s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(8) {
  animation-delay: 0.46s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(9) {
  animation-delay: 0.52s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(10) {
  animation-delay: 0.58s;
}
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:nth-child(n + 11) {
  animation-delay: 0.64s;
}

/* Hover/active: keep lift + scale in sync with entrance transform */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:hover {
  transform: translate3d(0, 0, 0) scale(1.03) !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:active {
  transform: translate3d(0, 0, 0) scale(1.015) !important;
}

@media (prefers-reduced-motion: reduce) {
  body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3] {
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]::before {
  background:
    linear-gradient(90deg, rgba(0, 207, 255, 0.12) 0%, transparent 28%),
    linear-gradient(270deg, rgba(255, 215, 0, 0.06) 0%, transparent 30%),
    radial-gradient(ellipse 140px 100px at 12% 92%, rgba(30, 144, 255, 0.1), transparent 55%),
    linear-gradient(to top, rgba(3, 8, 18, 0.97) 0%, rgba(3, 8, 18, 0.55) 42%, transparent 72%) !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3] .box-title[data-v-4a7709f3] {
  font-family: "Bebas Neue", "Teko", system-ui, sans-serif !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3] .box-content p[data-v-4a7709f3] {
  color: rgba(234, 246, 255, 0.82) !important;
  letter-spacing: 0.02em;
}

/*
 * Activity list — custom banner art (act_0 … act_3)
 * Photo layer: contain = entire image visible (no crop); letterboxing uses background-color.
 */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_0) {
  background-color: #050a12 !important;
  background-image:
    linear-gradient(to top, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.18) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, transparent 52%),
    url("/assets/banners/banner5.jpg") !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_1) {
  background-color: #050a12 !important;
  background-image:
    linear-gradient(to top, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.18) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, transparent 52%),
    url("/assets/banners/banner1.jpg") !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

/* Daily Bonus Until 1 CRORE (act_2 / banner3) — same as other rows: full image visible, letterboxed */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_2) {
  background-color: #050a12 !important;
  background-image:
    linear-gradient(to top, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.18) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, transparent 52%),
    url("/assets/banners/banner3.jpg") !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_3) {
  background-color: #050a12 !important;
  background-image:
    linear-gradient(to top, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.18) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, transparent 52%),
    url("/assets/banners/banner7.jpg") !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_0) > img.act_0,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_1) > img.act_1,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_2) > img.act_2,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_3) > img.act_3 {
  opacity: 0 !important;
  pointer-events: none;
  height: clamp(200px, 54vw, 290px) !important;
  min-height: 190px !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_0)::before,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_1)::before,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_2)::before,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_3)::before {
  background:
    linear-gradient(90deg, rgba(0, 207, 255, 0.1) 0%, transparent 28%),
    linear-gradient(270deg, rgba(255, 215, 0, 0.06) 0%, transparent 30%),
    linear-gradient(to top, rgba(3, 8, 18, 0.4) 0%, transparent 48%) !important;
}

/* CLAIM NOW — on-brand pill */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]::after {
  left: auto !important;
  right: 14px !important;
  bottom: 20px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(105deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
  font-family: "Teko", "Bebas Neue", system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_0):hover > img.act_0,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_0):active > img.act_0,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_1):hover > img.act_1,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_1):active > img.act_1,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_2):hover > img.act_2,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_2):active > img.act_2,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_3):hover > img.act_3,
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3]:has(> img.act_3):active > img.act_3 {
  transform: none !important;
}

/* Title + subtitle: left column, clear space for pill; tighter top gap under banner */
body #app .activity-wrapper .activitySection__container.scroll > .box[data-v-4a7709f3] > .box-content[data-v-4a7709f3] {
  left: 0 !important;
  right: 132px !important;
  padding: 8px 8px 14px 18px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Press feedback */
.activity-glass-top .header-item:active,
body #app .activity-wrapper .activity-rewards-section .content-title.reward-card:active,
.reward-btn:active {
  transform: scale(0.98);
}