/* V116 — VIP Club overlay (#/vip).
   Sizing convention matches the other overlays (v111/v112): rem values are
   px/37.5, because flexible.js pins the root font-size to viewportWidth/10.
   Hero gradients and the VIP-0 label positions are the reference values, so
   the text lines up with the vip0bg artwork at any width. */

html.co-vip-open #app { visibility: hidden !important; }
html.co-vip-open, html.co-vip-open body { overflow: hidden; }

/* Vue VIP chunk still mounts; never let the old green/pink page paint. */
#app .vip-header,
#app .vip-content { display: none !important; }

#co-vip-root.co-vip {
  --co-vip-brand: #27d87e;
  --co-vip-bg: #1c2225;
  --co-vip-layer: #262d30;
  --co-vip-layer5: rgba(255, 255, 255, .08);
  --co-vip-primary: #fff;
  --co-vip-secondary: #a7b0b3;
  --co-vip-hairline: #e4eaf019;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--co-vip-bg);
  color: var(--co-vip-primary);
  font-family: avertastd, avertastd-semibold, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#co-vip-root.co-vip *,
#co-vip-root.co-vip *::before,
#co-vip-root.co-vip *::after { box-sizing: border-box; }

/* flexible.js pins 1rem to viewportWidth/10 (capped), so 10rem is the phone
   width on mobile and the same centered column the native #app uses on desktop. */
.co-vip-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 10rem;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--co-vip-bg);
}

/* ---------- header (Quest navbar: charcoal bar + grey back tile) ---------- */

.co-vip-head {
  display: flex;
  align-items: center;
  flex: none;
  height: 1.22667rem;
  padding: 0 .32rem;
  background: #232626;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}

.co-vip-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--co-vip-primary);
  cursor: pointer;
  padding: 0;
}

.co-vip-back.co-back-btn {
  flex: none;
}

.co-vip-head__title {
  flex: 1;
  text-align: center;
  font-size: .48rem;
  line-height: .48rem;
  font-weight: 700;
  color: #fff;
}

.co-vip-head__spacer {
  width: var(--co-back-size, .85333rem);
  height: var(--co-back-size, .85333rem);
  flex: none;
}

.co-vip-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .32rem .42667rem 1.06667rem;
  display: flex;
  flex-direction: column;
  gap: .32rem;
  scrollbar-width: none;
}

.co-vip-scroll::-webkit-scrollbar { display: none; }

/* The scroller is a fixed-height column flexbox, so its children must keep
   their natural height instead of shrinking to fit the viewport. */
.co-vip-scroll > * { flex: none; }

/* ---------- hero ---------- */

.co-vip-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: .384rem;
  background-color: var(--co-vip-layer);
  background-repeat: no-repeat;
}

/* Reference tier-group gradients */
.co-vip-grad0 { background-image: linear-gradient(20deg, rgba(93, 129, 172, 0) 60%, #504944); }
.co-vip-grad1 { background-image: linear-gradient(20deg, rgba(93, 129, 172, 0) 60%, #506d8e); }
.co-vip-grad2 { background-image: linear-gradient(20deg, rgba(93, 129, 172, 0) 60%, #714e2d); }
.co-vip-grad3 { background-image: linear-gradient(20deg, rgba(93, 129, 172, 0) 60%, #5e668a); }
.co-vip-grad4 { background-image: linear-gradient(20deg, rgba(93, 129, 172, 0) 60%, #63508d); }

/* The artwork is larger than the card in the reference and fills it, so cover
   the whole card rather than leaving a visible seam on one side. */
.co-vip-hero__corner {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
  opacity: .5;
  pointer-events: none;
}

.co-vip-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .21333rem;
  padding: .48rem .42667rem .42667rem .64rem;
}

.co-vip-hero__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: .21333rem;
}

.co-vip-hero__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
}

.co-vip-hero__badge {
  width: 2.24rem;
  height: auto;
  pointer-events: none;
}

.co-vip-hero__row {
  display: flex;
  align-items: baseline;
  gap: .16rem;
  flex-wrap: wrap;
}

.co-vip-hero__level {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

.co-vip-hero__hint {
  font-size: .32rem;
  font-weight: 600;
  color: var(--co-vip-secondary);
}

.co-vip-hero__done {
  margin-left: .12rem;
  font-size: .29333rem;
  font-weight: 700;
  color: var(--co-vip-brand);
}

.co-vip-hero__next {
  margin-left: .12rem;
  font-size: .29333rem;
  font-weight: 700;
  color: var(--co-vip-brand);
}

.co-vip-hero__xp {
  font-size: .32rem;
  font-weight: 600;
}

.co-vip-xp-now { color: var(--co-vip-primary); }
.co-vip-xp-max { color: var(--co-vip-secondary); }

.co-vip-bar {
  position: relative;
  height: .21333rem;
  width: 100%;
  border-radius: .21333rem;
  background: rgba(0, 0, 0, .25);
}

.co-vip-bar__fill {
  position: relative;
  height: 100%;
  width: 0;
  min-width: 0;
  border-radius: .21333rem;
  background-image: linear-gradient(-90deg, #43b152, #42b691 50%, #4cb5c8);
  transition: width 1s cubic-bezier(.22, .61, .36, 1);
}

.co-vip-bar__dot {
  position: absolute;
  right: -.10667rem;
  top: 50%;
  width: .34667rem;
  height: .34667rem;
  border-radius: 50%;
  background: #fff;
  border: .05333rem solid var(--co-vip-brand);
  transform: translateY(-50%);
}

.co-vip-hero__deposit {
  height: .64rem;
  padding: 0 .37333rem;
  font-size: .32rem;
}

/* ---------- buttons ---------- */

.co-vip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .13333rem;
  border: 0;
  border-radius: .16rem;
  font-weight: 800;
  cursor: pointer;
  color: #04140b;
  background: var(--co-vip-brand);
  line-height: 1;
  white-space: nowrap;
}

.co-vip-btn svg { width: .42667rem; height: .42667rem; }
.co-vip-btn[disabled] { opacity: .5; cursor: default; }

.co-vip-chip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.76rem;
  height: .59733rem;
  border: 0;
  border-radius: .13333rem;
  font-size: .29867rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.co-vip-chip--brand { background: var(--co-vip-brand); color: #04140b; }
.co-vip-chip--muted { background: #b3bec1; color: #000; cursor: default; }
.co-vip-chip[disabled] { cursor: default; }

/* ---------- reward items ---------- */

.co-vip-card {
  position: relative;
  z-index: 0;
  border-radius: .32rem;
  background: var(--co-vip-layer);
  padding: .32rem .21333rem;
}

.co-vip-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .13333rem;
  margin-bottom: .32rem;
}

.co-vip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .10667rem;
  min-width: 0;
}

.co-vip-item__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05333rem;
}

.co-vip-item__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 1.28rem;
}

.co-vip-item__img img {
  width: auto;
  max-width: 1.70667rem;
  max-height: 1.28rem;
  object-fit: contain;
}

.co-vip-item__label {
  font-size: .384rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.co-vip-item__box {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 1.81333rem;
  height: 1.28rem;
  border-radius: .13333rem;
  background-color: rgba(255, 255, 255, .14);
}

.co-vip-item__box--flat { background-color: transparent; }

/* Top-tier amounts reach ₹20,000, so this has to fit the widest value. */
.co-vip-item__amt {
  display: inline-block;
  max-width: 100%;
  font-size: .34667rem;
  font-weight: 600;
  line-height: .58667rem;
  transform: translateY(.05333rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-vip-item__box--flat .co-vip-chip {
  position: static;
  margin-top: .29333rem;
  height: .64rem;
  width: auto;
  min-width: 1.49333rem;
  padding: 0 .16rem;
}

.co-vip-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .28rem;
  line-height: 1.3;
  padding: 0 .21333rem;
}

.co-vip-accent { color: var(--co-vip-brand); }

/* ---------- tier carousel ---------- */

.co-vip-card--list {
  display: flex;
  flex-direction: column;
  gap: .26667rem;
  padding: .37333rem .26667rem;
  background-image: linear-gradient(#403930 -.63%, #2b3134 10%);
}

.co-vip-unlock {
  font-size: .29333rem;
  color: var(--co-vip-brand);
  margin-left: .13333rem;
}

.co-vip-swipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .13333rem;
}

.co-vip-nav {
  flex: none;
  width: 1.06667rem;
  height: 1.06667rem;
  border-radius: .17067rem;
  background-color: #464f50;
}

.co-vip-nav svg { width: .74667rem; height: .74667rem; }
.co-vip-nav--next svg { transform: rotate(180deg); }
.co-vip-nav[disabled] { opacity: .35; cursor: default; }

.co-vip-swipe__stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .21333rem;
}

.co-vip-swipe__badge {
  width: 2.56rem;
  height: auto;
  flex: none;
}

.co-vip-swipe__meta { text-align: center; min-width: 0; }

.co-vip-swipe__level {
  font-size: .68267rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
}

.co-vip-swipe__xp {
  font-size: .37333rem;
  font-weight: 800;
  margin-top: .05333rem;
  white-space: nowrap;
}

.co-vip-swipe__xp.is-reached { color: var(--co-vip-brand); }
.co-vip-swipe__xp.is-locked { color: var(--co-vip-secondary); }

/* ---------- benefit rows (VIP 1+) ---------- */

.co-vip-benefits {
  display: flex;
  flex-direction: column;
  padding: 0 .13333rem;
}

.co-vip-benefit {
  display: flex;
  align-items: center;
  gap: .42667rem;
  padding: .32rem 0;
  border-top: .02667rem solid var(--co-vip-hairline);
}

.co-vip-benefit:first-child { border-top: 0; }

.co-vip-benefit__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: .05333rem;
  align-self: center;
}

.co-vip-benefit__title {
  font-size: .42667rem;
  font-weight: 800;
}

.co-vip-benefit__desc {
  font-size: .37333rem;
  font-weight: 600;
  color: var(--co-vip-secondary);
  line-height: 1.4;
}

.co-vip-benefit__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.92rem;
  height: 1.92rem;
  padding: .18667rem;
  border-radius: 50%;
  background: var(--co-vip-layer5);
}

.co-vip-benefit__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- VIP 0 benefit art ---------- */

.co-vip-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.co-vip-zero__art {
  --co-vip-zero-label-w: 21.1921%;
  --co-vip-zero-limit-w: 27.3731%;
  --co-vip-zero-pot-w: 18.543%;
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 453 / 918;
  pointer-events: none;
}

.co-vip-zero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

.co-vip-zero__title,
.co-vip-zero__label {
  position: absolute;
  z-index: 1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.co-vip-zero__title {
  top: 49.0196%;
  left: 50%;
  color: #fff;
  font-size: .37083rem;
  line-height: .43257rem;
  letter-spacing: -.00927rem;
  font-weight: 800;
  white-space: nowrap;
}

.co-vip-zero__accent { color: var(--co-vip-brand); }

.co-vip-zero__label {
  color: #c9c9c9;
  font-size: .28838rem;
  line-height: .41198rem;
  letter-spacing: -.00773rem;
  font-weight: 400;
  width: var(--co-vip-zero-label-w);
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.co-vip-zero__label--no-fee { top: 65.7407%; left: 20.8609%; }
.co-vip-zero__label--gift { top: 65.7407%; left: 50%; }
.co-vip-zero__label--cash-back { top: 65.7407%; left: 79.1391%; }

.co-vip-zero__label--limit {
  top: 84.2593%;
  left: 20.8609%;
  width: var(--co-vip-zero-limit-w);
  line-height: .37083rem;
}

.co-vip-zero__label--pot {
  top: 84.2593%;
  left: 50%;
  width: var(--co-vip-zero-pot-w);
  line-height: .30898rem;
}

.co-vip-zero__label--soon { top: 84.3137%; left: 79.1391%; }

.co-vip-nowrap { white-space: nowrap; }

.co-vip-zero__cta {
  margin-top: -.68267rem;
  height: 1.06667rem;
  padding: 0 .58667rem;
  font-size: .4rem;
}

/* ---------- states ---------- */

.co-vip-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: 1.6rem .32rem;
  color: var(--co-vip-secondary);
  font-size: .34667rem;
  text-align: center;
}

.co-vip-retry {
  height: .90667rem;
  padding: 0 .53333rem;
  font-size: .34667rem;
}

.co-vip-toast {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  max-width: 80%;
  padding: .21333rem .37333rem;
  border-radius: .16rem;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  font-size: .32rem;
  text-align: center;
  z-index: 5;
}