/* AnomicFlip — VIP Club page (/vip) */
.vp, .vp * { box-sizing: border-box; }
.vp { max-width: 1640px; margin: 0 auto; padding: 44px 40px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; }
.vp-box { border-radius: 16px; background: #1e2125; overflow: hidden; }
.vp-top { padding: 36px 44px; background: radial-gradient(120% 160% at 100% 0%, rgba(63,214,143,.08), transparent 55%), #24272c; }
.vp-h { margin: 0 0 22px; font-size: 24px; font-weight: 800; }

/* your progress */
.vp-me {
  width: min(100%, 600px); padding: 24px 26px; border-radius: 14px; background: #141619; border: 2px solid #3a3f46;
  display: grid; gap: 14px;
}
.vp-me-who { display: flex; align-items: center; gap: 12px; min-width: 0; justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; font: 800 20px 'Archivo', system-ui, sans-serif; color: inherit; text-decoration: none; }
.vp-me-who:hover span { text-decoration: underline; }
.vp-me-av { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #2c3036 center / cover no-repeat; display: grid; place-items: center; color: #3fd68f; font-size: 17px; }
.vp-me-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-me-pct { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-bar { height: 10px; border-radius: 99px; background: #2c3036; overflow: hidden; }
.vp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #3fd68f; transition: width .7s ease; }
.vp-me-next { font-size: 17px; color: #9a9ea6; }
.vp-me-next b { color: var(--rc); }

/* ladder */
.vp-ladder { padding: 56px 44px 40px; }
.vp-title { margin: 0; text-align: center; font-size: 34px; font-weight: 800; text-wrap: balance; }
.vp-logo {
  margin: 0 auto; width: 400px; max-width: 100%; height: 41px;
  background: url('/vip-title.png') center / contain no-repeat; image-rendering: pixelated;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.vp-sub { margin: 14px 0 0; text-align: center; font-size: 17px; color: #8b8f97; }

.vp-track { margin-top: 42px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.vp-track::-webkit-scrollbar { display: none; }
.vp-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; }
.vp-col { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 24px; min-width: 0; }
.vp-star { display: flex; align-items: center; gap: 16px; }
.vp-star b { flex: none; width: 66px; height: 66px; border-radius: 50%; background: #2a2d33; display: grid; place-items: center; color: var(--rc); }
.vp-star b svg { width: 32px; height: 32px; }
.vp-star.got b svg { fill: var(--rc); }
.vp-star i { flex: 1; height: 5px; border-radius: 99px; background: #2c3036; overflow: hidden; }
.vp-star i::before { content: ''; display: block; height: 100%; width: var(--fill, 0%); background: var(--rc); border-radius: inherit; }

.vp-card { position: relative; padding: 28px; border-radius: 14px; background: #2a2d33; display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.vp-card.me { box-shadow: inset 0 0 0 2px #3fd68f; }
.vp-tag { align-self: flex-start; padding: 8px 12px; border-radius: 7px; font-size: 19px; font-weight: 700; color: #111; background: var(--rc); }
.vp-amt { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-coin { flex: none; width: 24px; height: 32px; background: url('/coin.png') center / contain no-repeat; }
.vp-amt-l { font-size: 18px; color: #8b8f97; }
.vp-perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.vp-perks li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.35; color: #e6e8eb; }
.vp-perks svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--rc); }
.vp-you { align-self: flex-start; margin-top: 24px; padding: 8px 12px; border-radius: 6px; background: rgba(63,214,143,.12); color: #3fd68f; font-size: 15px; font-weight: 700; }

.vp-arrows { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.vp-arrows button {
  width: 52px; height: 52px; border: 0; border-radius: 8px; background: #2a2d33; color: #fff; cursor: pointer; display: grid; place-items: center;
}
.vp-arrows button:hover:not(:disabled) { background: #33373e; }
.vp-arrows button:disabled { opacity: .35; cursor: default; }

/* benefits */
.vp-ben { padding: 56px 44px 20px; }
.vp-ben-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.vp-b { padding: 32px; border-radius: 14px; background: #2a2d33; }
.vp-b-ic { width: 34px; height: 34px; color: #3fd68f; }
.vp-b h3 { margin: 22px 0 0; font-size: 24px; font-weight: 800; }
.vp-b p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #9a9ea6; }
.vp-b-tier { color: var(--rc); font-weight: 700; }

/* FAQ */
.vp-faq { padding: 50px 44px 56px; }
.vp-faq-list { display: grid; gap: 14px; margin-top: 30px; }
.vp-faq details { border-radius: 12px; background: #2a2d33; }
.vp-faq summary { list-style: none; cursor: pointer; padding: 24px 28px; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::before { content: '▶'; font-size: 12px; transition: transform .15s; }
.vp-faq details[open] summary::before { transform: rotate(90deg); }
.vp-faq details p { margin: 0; padding: 0 28px 24px 52px; font-size: 17px; line-height: 1.6; color: #9a9ea6; }

/* rank colors */
.vp .r-bronze { --rc: #d9883f; } .vp .r-silver { --rc: #c9ccd1; } .vp .r-gold { --rc: #f5c84a; }
.vp .r-platinum { --rc: #6fd3e0; } .vp .r-diamond { --rc: #5b8cff; }

.vp-arrows button:focus-visible, .vp-faq summary:focus-visible, .vp-me-who:focus-visible { outline: 2px solid #3fd68f; outline-offset: 2px; }

@media (max-width: 1250px) {
  .vp-row { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
  .vp-ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .vp { padding: 24px 16px 56px; }
  .vp-top, .vp-ladder, .vp-ben, .vp-faq { padding-left: 20px; padding-right: 20px; }
  .vp-row { grid-auto-columns: 85%; }
  .vp-title { font-size: 26px; }
  .vp-logo { height: 28px; }
  .vp-amt { font-size: 32px; }
  .vp-ben-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .vp-bar i { transition: none; } .vp-track { scroll-behavior: auto; } }