.vip-hero .slots-hero-art {
  background-image: url('assets/vip-hero.webp');
  background-position: right center
}

.vip-hero:after {
  background: linear-gradient(90deg, #080b24f5, #110b29ed 30%, #170c2c60 65%, transparent)
}

.vip-hero .slots-hero-copy {
  max-width: 900px
}

.vip-levels {
  margin-bottom: 15px
}

.vip-levels>.section-heading {
  padding: 4px
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch
}

.tier-card {
  --tier: #e79465;
  --tier-bg: #442b32;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 13px 11px;
  border: 1px solid var(--tier);
  border-radius: 13px;
  background: linear-gradient(150deg, var(--tier-bg), #101a2f 80%);
  box-shadow: inset 0 1px 10px #ffffff08
}

.tier-card.silver {
  --tier: #bfcde6;
  --tier-bg: #3b465f
}

.tier-card.gold {
  --tier: #f1c75b;
  --tier-bg: #5c4015
}

.tier-card.platinum {
  --tier: #65cfff;
  --tier-bg: #15446c
}

.tier-card.diamond {
  --tier: #c976ff;
  --tier-bg: #3d1b64
}

.tier-art {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: contain;
  mix-blend-mode: lighten;
  margin-bottom: 7px
}

.tier-card h2 {
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: var(--tier);
  margin: 0 0 5px
}

.tier-tagline {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 12px;
  min-height: 42px;
  color: #e1dfeb
}

.tier-stats {
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent);
  border-radius: 9px;
  background: #07122575;
  overflow: hidden
}

.tier-stats>div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px
}

.tier-stats>div+div {
  border-top: 1px solid #ffffff15
}

.tier-stats .ui-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px
}

.tier-stats dt {
  font-size: 14px;
  color: #d9deea;
  line-height: 1.5
}

.tier-stats dd {
  font-size: 14px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.5;
  color: #fff
}

.tier-details {
  margin-top: auto;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.6
}

.tier-details summary {
  cursor: pointer;
  color: var(--tier);
  padding: 4px 0
}

.tier-details p {
  margin: 8px 0;
  color: #d8deec
}

.tier-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--tier);
  border-radius: 8px;
  min-height: 54px;
  padding: 9px 7px;
  text-align: center;
  background: linear-gradient(135deg, var(--tier-bg), #29203f);
  box-shadow: inset 0 1px 8px #ffffff20;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: filter .2s, box-shadow .2s
}

.tier-cta:hover {
  filter: brightness(1.25);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 35%, transparent)
}

.tier-cta svg {
  flex: none;
  width: 16px;
  height: 16px
}

.vip-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px
}

.vip-pair>.panel {
  min-width: 0;
  height: 100%
}

.vip-content table {
  font-size: 14px;
  line-height: 1.6
}

.vip-content th {
  font-weight: 600
}

.vip-content h3 {
  font-size: 14px;
  line-height: 1.5
}

.vip-content .minor-heading {
  margin: 0 0 9px;
  color: #edc3ff
}

.points-formula {
  padding: 13px;
  border: 1px solid #b966b7;
  border-radius: 10px;
  background: linear-gradient(135deg, #653057, #302043);
  font-weight: 700
}

.points-panel>p {
  margin: 12px 0;
  color: #d5dfec
}

.points-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px
}

.points-layout table {
  width: 100%;
  min-width: 0
}

.permanent-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 10px;
  border: 1px solid #b953d7;
  border-radius: 11px;
  background: radial-gradient(#672b82, #26173d);
  text-align: center
}

.permanent-points .ui-icon {
  width: 45px;
  height: 45px
}

.permanent-points span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.status-grid article {
  padding: 15px;
  border: 1px solid #744584;
  border-radius: 12px;
  background: linear-gradient(145deg, #4d245b, #131b34);
  text-align: center
}

.status-step {
  display: block;
  color: #f2adfa;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9px
}

.status-grid .ui-icon {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px
}

.status-grid h3 {
  margin: 0 0 9px
}

.status-grid p {
  margin: 0;
  color: #d9deef
}

.vip-contact-actions {
  grid-template-columns: 1fr 1fr;
  margin-top: 15px;
  gap: 12px
}

.vip-contact-actions a {
  min-height: 46px
}

.vip-reward-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.vip-reward-grid>article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  isolation: isolate;
  padding: 16px;
  border: 1px solid #a651cd;
  border-radius: 11px;
  background: linear-gradient(140deg, #4b2264, #121b36);
  text-align: center
}

.vip-reward-grid>article:nth-child(2) {
  border-color: #4299d9;
  background: linear-gradient(140deg, #153a64, #171b39)
}

.vip-reward-grid>article:nth-child(3) {
  border-color: #de59ae;
  background: linear-gradient(140deg, #7b215f, #271835)
}

.vip-reward-grid>article:nth-child(4) {
  border-color: #7e55d9;
  background: linear-gradient(140deg, #45216a, #182039)
}

.vip-reward-grid>article:nth-child(5) {
  border-color: #b15dd6;
  background: linear-gradient(140deg, #5c2578, #17203a)
}

.vip-reward-grid .ui-icon {
  width: 47px;
  height: 47px;
  display: block;
  margin: 0 auto 13px;
  filter: drop-shadow(0 0 7px #c856ea55)
}

.vip-reward-grid h3 {
  margin: 0 0 8px
}

.vip-reward-grid p {
  margin: 6px 0;
  color: #e4dced
}

.reward-more {
  margin-top: auto;
  padding-top: 9px
}

.reward-more summary {
  cursor: pointer;
  color: #ecb1ff;
  font-size: 14px;
  line-height: 1.5
}

.retention-panel>p {
  margin-bottom: 12px;
  color: #d8e1ed
}

.retention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.retention-grid article {
  padding: 14px 11px;
  background: linear-gradient(140deg, #262145, #0e2035);
  border: 1px solid #493b76;
  border-radius: 11px;
  text-align: center
}

.retention-grid .ui-icon {
  width: 41px;
  height: 41px;
  display: block;
  margin: 0 auto 10px
}

.retention-grid h3 {
  margin: 0 0 8px
}

.retention-grid p {
  margin: 0;
  color: #d5dded
}

.vip-content .vip-policy {
  padding: 12px;
  border: 1px solid #ad4fca;
  border-radius: 9px;
  background: linear-gradient(90deg, #5c2273, #231b39);
  margin: 14px 0 0;
  font-weight: 600;
  color: #f2dcff
}

.value-panel>p {
  margin: 12px 0;
  color: #d4deed
}

.value-panel table {
  width: 100%;
  min-width: 380px
}

.value-panel th,
.value-panel td {
  padding: 10px 8px
}

.table-badge {
  width: 29px;
  height: 29px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
  mix-blend-mode: lighten
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.rules-grid article {
  padding: 15px;
  border: 1px solid #433e66;
  border-radius: 10px;
  background: linear-gradient(135deg, #2e2447, #0e1d32);
  min-width: 0
}

.rules-grid .ui-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 11px
}

.rules-grid h3 {
  margin: 0 0 8px;
  color: #efc3ff
}

.rules-grid p {
  margin: 0;
  color: #d5deec
}

.vip-content :is(a, button, summary):focus-visible {
  outline: 2px solid #f1a2ff;
  outline-offset: 3px
}

@media(max-width:1350px) {
  .tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .vip-pair {
    grid-template-columns: 1fr
  }

  .vip-reward-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .rules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media(max-width:680px) {
  .vip-hero .slots-hero-art {
    background-position: 68% center
  }

  .vip-hero:after {
    background: linear-gradient(90deg, #080b24ef, #110b29c4 70%, #170c2c80)
  }

  .tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px
  }

  .tier-card {
    padding: 12px 9px
  }

  .tier-art {
    height: 90px
  }

  .tier-card h2 {
    font-size: 16px
  }

  .tier-stats>div {
    gap: 6px;
    padding: 10px 6px
  }

  .tier-stats .ui-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px
  }

  .tier-cta {
    min-height: 70px
  }

  .points-layout {
    grid-template-columns: 1fr
  }

  .permanent-points {
    flex-direction: row;
    padding: 14px
  }

  .permanent-points .ui-icon {
    flex: 0 0 40px
  }

  .status-grid {
    grid-template-columns: 1fr 1fr
  }

  .status-grid article {
    padding: 13px
  }

  .vip-reward-grid,
  .rules-grid {
    grid-template-columns: 1fr 1fr;
    gap: 11px
  }

  .vip-reward-grid>article,
  .rules-grid article {
    padding: 14px 12px
  }

  .retention-grid {
    grid-template-columns: 1fr
  }

  .retention-grid article {
    padding: 15px
  }

  .vip-contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .vip-contact-actions a {
    padding: 10px
  }
}

@media(max-width:360px) {

  .tier-grid,
  .vip-reward-grid,
  .rules-grid {
    grid-template-columns: 1fr
  }

  .tier-art {
    height: 120px
  }

  .tier-tagline {
    min-height: 0
  }

  .tier-cta {
    min-height: 44px
  }

  .vip-contact-actions {
    grid-template-columns: 1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  .tier-cta {
    transition: none
  }
}

.tier-art,
.table-badge {
  mix-blend-mode: normal
}

.tier-emblem {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 105px;
  margin: 0 auto 10px;
  flex: none
}

.tier-emblem .tier-art {
  display: block;
  width: 100%;
  height: 105px;
  object-fit: contain;
  margin: 0;
  mask-image: radial-gradient(ellipse 75% 70% at center, #000 45%, transparent 85%);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tier) 30%, transparent))
}

.tier-emblem h2 {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 17px;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 800;
  letter-spacing: .1px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px #080a20, 0 0 8px color-mix(in srgb, var(--tier) 40%, transparent))
}

.tier-stats .tier-stat-icon {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  background: none;
  color: var(--tier);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tier) 35%, transparent))
}

@media(max-width:680px) {
  .tier-emblem {
    height: 100px
  }

  .tier-emblem .tier-art {
    height: 100px
  }

  .tier-emblem h2 {
    left: 15px;
    right: 15px;
    bottom: 16px
  }

  .tier-stats .tier-stat-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px
  }
}