.vp-hub,
.vp-overlay {
  --vp-gold: var(--ui-gold, #b58a3b);
  --vp-border: var(--ui-line, #c7a56866);
  color: var(--ui-ink, #302419);
  font: inherit;
  line-height: 1.6;
}
.vp-hub {
  margin-bottom: 24px;
}
.vp-hub *,
.vp-overlay * {
  box-sizing: border-box;
}
.vp-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 20px;
  border: 1px solid var(--vp-border);
  border-radius: 22px;
  background:
    linear-gradient(
      90deg,
      var(--ui-panel, #fff7eb) 20%,
      color-mix(in srgb, var(--ui-panel, #fff7eb) 86%, transparent)
    ),
    url("./assets/vip-privileges-v1/palace.png") center/cover;
}
.vp-hero small {
  color: var(--vp-gold);
  letter-spacing: 2px;
  font-size: 10px;
}
.vp-hero h2 {
  font-size: 28px !important;
  margin: 8px 0 !important;
}
.vp-hero h2 span {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.vp-hero p {
  font-size: 12px;
  margin: 0;
}
.vp-hub button,
.vp-overlay button,
.vp-sound-toggle {
  min-height: 44px;
  border: 1px solid var(--vp-border);
  background: var(--ui-raised, #fff9ef);
  color: var(--ui-ink, #302419);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.vp-hub button:disabled,
.vp-overlay button:disabled {
  opacity: 0.55;
  cursor: default;
}
.vp-hub button[aria-pressed="true"] {
  background: linear-gradient(135deg, #a77b27, #e5c879);
  color: #251b0e;
  border-color: #a77b27;
  font-weight: 700;
}
.vp-hub :focus-visible,
.vp-overlay :focus-visible {
  outline: 2px solid var(--vp-gold);
  outline-offset: 3px;
}
.vp-details {
  margin: 12px 0;
  border: 1px solid var(--vp-border);
  border-radius: 18px;
  background: var(--ui-panel, #fff7eb);
  overflow: hidden;
}
.vp-details > summary {
  padding: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.vp-details > p {
  padding: 0 16px 16px;
  margin: 0;
  font-size: 13px;
}
.vp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 12px 12px;
}
.vp-hub select,
.vp-overlay select,
.vp-hub input,
.vp-overlay input {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--ui-raised, #fffaf0);
  color: var(--ui-ink, #302419);
  padding: 10px;
  font: inherit;
  font-size: 13px;
}
.vp-tabs select {
  flex: 1;
  width: 180px;
}
.vp-grid {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vp-cumulative {
  grid-column: 1/-1;
  font-size: 12px;
  color: var(--ui-muted, #74634f);
  margin: 0;
}
.vp-reward {
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--vp-border);
  background: var(--ui-raised, #fffaf1);
  overflow-wrap: anywhere;
}
.vp-reward[data-locked="true"] {
  background: var(--ui-panel, #f3ecdf);
}
.vp-reward small {
  font-size: 10px;
  color: var(--vp-gold);
}
.vp-reward h3 {
  font-size: 16px;
  margin: 7px 0;
}
.vp-reward p {
  font-size: 12px;
  color: var(--ui-muted, #74634f);
  margin: 0 0 12px;
}
.vp-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vp-reward > button,
.vp-reward > select {
  margin: 6px 6px 0 0;
}
.vp-reward label,
.vp-modal label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  margin: 12px 0;
}
.vp-details > .vp-reward {
  margin: 12px;
}
.vp-details > .vp-details {
  margin: 12px;
}
.vp-message {
  font-size: 12px !important;
  color: var(--ui-ink, #302419) !important;
  padding: 10px;
  border-left: 3px solid var(--vp-gold);
}
.vp-overlay {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: var(--ui-overlay, #120e0acc);
  display: grid;
  place-items: center;
  padding: 12px;
}
.vp-modal {
  width: min(680px, 100%);
  max-height: 95dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vp-border);
  border-radius: 24px;
  background: var(--ui-panel, #fff7eb);
  overflow: hidden;
}
.vp-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px;
  border-bottom: 1px solid var(--vp-border);
}
.vp-modal h2 {
  font-size: 20px;
  margin: 0;
}
.vp-modal-body {
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.vp-modal-body > p {
  font-size: 13px;
}
.vp-modal-body > button {
  margin: 6px 6px 6px 0;
}
.vp-modal .vp-check {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
}
.vp-check input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  accent-color: #a77b27;
}
.vp-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.vp-list-row span {
  flex: 1;
  overflow-wrap: anywhere;
}
.vp-collection {
  width: 100%;
  border-radius: 16px;
}
.vp-preview {
  position: relative;
  min-height: 320px;
  background: url("./assets/vip-privileges-v1/palace.png") center/cover;
  border: 1px solid #c7a568;
  border-radius: 20px;
  text-align: center;
  display: grid;
  place-content: center;
  padding: 30px;
  color: #fff5d7;
  text-shadow: 0 2px 6px #291a06;
}
.vp-preview[data-vp-scene*="sardis"] {
  background-image: url("./assets/vip-privileges-v1/sardis.png");
}
.vp-preview[data-vp-scene*="paktolos"] {
  background-image: url("./assets/vip-privileges-v1/paktolos.png");
}
.vp-preview-medallion {
  width: 110px;
  margin: auto;
}
.vp-profile-surface {
  position: relative;
}
.vp-profile-cover {
  height: 120px;
  flex: none;
  width: 100%;
  background-position: center;
  background-size: cover;
  border-radius: 16px;
  border: 1px solid #c7a56888;
  margin-bottom: 12px;
  animation: vp-glow 5s ease-in-out infinite alternate;
}
.vp-profile-extras {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  position: relative;
  padding: 14px;
  color: var(--ui-ink);
  border-top: 1px solid var(--ui-line);
}
.vp-crest {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.vp-status {
  padding: 8px 16px;
  border: 1px solid #b88b38;
  border-radius: 20px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.vp-status[data-style="seal"] {
  border-radius: 6px;
}
.vp-status[data-style="marble"] {
  background: linear-gradient(130deg, #f6efdf, #e0d4bb);
  color: #47371c;
}
.vp-home-decor {
  width: 100%;
  padding: 22px 12px;
  border-radius: 14px;
  text-align: center;
  background:
    linear-gradient(#24170799, #24170799),
    url("./assets/vip-privileges-v1/palace.png") center/cover;
  color: #fff4d7;
  font-size: 12px;
}
.vp-showcase,
.vp-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.vp-showcase img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-panel);
}
.vp-gallery img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
}
.vp-gold-name {
  color: var(--ui-gold, #a87a20) !important;
  text-shadow: 0 0 8px #d9b76333;
}
.vp-crown-name:before {
  content: "♛ ";
  color: var(--ui-gold, #a87a20);
}
[data-vp-aura="gold"] {
  box-shadow: 0 0 24px #c9a44e66 !important;
}
[data-vp-aura="pearl"] {
  box-shadow: 0 0 24px #e4d8b866 !important;
}
[data-vp-panel="ivory"] .vp-profile-extras {
  background: #f5efdf;
  color: #44351e;
}
[data-vp-panel="onyx"] .vp-profile-extras {
  background: #282016;
  color: #f7e6bd;
}
[data-vp-scene="throne"] .vp-profile-cover,
[data-vp-scene="royal"] .vp-profile-cover {
  height: 165px;
  animation: vp-glow 4s infinite alternate;
}
[data-vp-scene="lion"] .vp-profile-cover {
  background-image: url("./assets/vip-privileges-v1/lion.png") !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.vp-note {
  font-size: 11px !important;
  line-height: 1.6;
}
.vp-royal-entry {
  background:
    linear-gradient(#21170bb3, #21170bb3),
    url("./assets/vip-privileges-v1/palace.png") center/cover !important;
  pointer-events: auto !important;
}
.vp-entry-card .eris-vip-entry-identity {
  border-bottom: 2px solid #d9b763;
}
.vp-duo-mark {
  font-size: 11px;
  color: #e4c77b;
}
.vp-royal-entry .eris-vip-entry-dismiss {
  pointer-events: auto !important;
}
.eris-vip-entrance[data-vp-particles="dust"] .eris-vip-entry-banner {
  filter: drop-shadow(0 0 16px #d9b763);
}
.eris-vip-entrance[data-vp-particles="laurel"] .eris-vip-entry-banner {
  border: 2px double #d9b763;
  border-radius: 24px;
}
#erisRoomSurface[data-vp-room]:not([data-vp-room=""]):before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("./assets/vip-privileges-v1/palace.png") center/cover;
  opacity: 0.18;
}
#erisRoomSurface[data-vp-room="sardis"]:before {
  background-image: url("./assets/vip-privileges-v1/sardis.png");
}
#erisRoomSurface[data-vp-room="royal"]:before {
  opacity: 0.28;
}
#erisRoomSurface[data-vp-seats="gold"] .eris-seat {
  box-shadow: 0 0 0 2px #c7a568 !important;
}
#erisRoomSurface[data-vp-seats="pearl"] .eris-seat {
  box-shadow: 0 0 0 2px #e5dac1 !important;
}
#erisRoomSurface[data-vp-crest="lion"] .eris-room-emblem:before,
#erisRoomSurface[data-vp-crest="laurel"] .eris-room-emblem:before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("./assets/vip-privileges-v1/lion.png") center/contain
    no-repeat;
}
.vp-room-board {
  position: relative;
  margin: 8px 16px;
  padding: 8px 12px;
  border: 1px solid #c7a568;
  border-radius: 10px;
  background: var(--ui-panel);
  color: var(--ui-ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.vp-sound-toggle {
  position: absolute;
  right: 12px;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 6;
  font-size: 10px;
  min-height: 32px;
}
.vp-gift-seal {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11400;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c7a568;
  border-radius: 20px;
  padding: 14px;
  background: var(--ui-panel, #fff7eb);
  color: var(--ui-ink, #302419);
  max-width: 85vw;
  pointer-events: none;
  animation: vp-glow 1s infinite alternate;
}
.vp-gift-seal img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.vp-gift-seal[data-scene="palace"] {
  background:
    linear-gradient(#241707cc, #241707cc),
    url("./assets/vip-privileges-v1/palace.png") center/cover;
  color: #fff5d7;
}
.vp-gift-seal[data-motion="rain"] {
  border-bottom: 4px solid #c7a568;
}
.vp-gift-seal[data-motion="laurel"] {
  border: 4px double #c7a568;
}
.vp-gift-seal[data-motion="palace"] {
  box-shadow: 0 0 34px #d9b76388;
}
@keyframes vp-glow {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.12);
  }
}
@media (max-width: 540px) {
  .vp-grid {
    grid-template-columns: 1fr;
  }
  .vp-hero {
    padding: 18px 14px;
    align-items: flex-start;
  }
  .vp-hero h2 {
    font-size: 24px !important;
  }
  .vp-hero button {
    font-size: 11px;
    max-width: 120px;
  }
  .vp-overlay {
    padding: 0;
  }
  .vp-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vp-profile-cover,
  .vp-gift-seal,
  [data-vp-scene] .vp-profile-cover {
    animation: none !important;
  }
}
#erisRoomSurface[data-vp-room]:not([data-vp-room=""]) .eris-room-wall {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-panel) 62%, transparent),
      color-mix(in srgb, var(--ui-panel) 85%, transparent)
    ),
    url("./assets/vip-privileges-v1/palace.png") !important;
}
#erisRoomSurface[data-vp-room="sardis"] .eris-room-wall {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-panel) 62%, transparent),
      color-mix(in srgb, var(--ui-panel) 85%, transparent)
    ),
    url("./assets/vip-privileges-v1/sardis.png") !important;
}
.vp-room-board {
  position: absolute;
  top: calc(82px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  margin: 0;
  max-height: 48px;
  overflow: auto;
  z-index: 4;
}
.vp-reward-art {
  width: 64px;
  height: 64px;
  object-fit: contain;
  float: right;
  margin: 0 0 6px 8px;
  border-radius: 12px;
}
.vp-profile-surface[data-vp-scene]:not([data-vp-scene=""]) {
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--ui-panel) 88%, transparent),
      color-mix(in srgb, var(--ui-panel) 94%, transparent)
    ),
    var(--vp-scene-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
.eris-vip-dialog > header h2 {
  flex: 1;
}
.eris-vip-dialog > header {
  gap: 8px;
}
.vp-profile-cover[data-variant="palace_night"] {
  background-blend-mode: multiply;
  background-color: #4a3824;
}
.vp-profile-cover[data-variant="paktolos_gold"] {
  border: 3px double #b58b3a;
}
.vp-gift-seal[data-seal="laurel"] img {
  border: 3px double #b58b3a;
  border-radius: 50%;
  padding: 4px;
}
#erisRoomSurface[data-vp-crest="laurel"] .eris-room-emblem:before {
  border: 3px double #b58b3a;
  border-radius: 50%;
  box-sizing: border-box;
}
.vp-membership {
  border: 1px solid var(--vp-border);
  border-radius: 20px;
  background: var(--ui-raised, #fffaf1);
  padding: 20px;
  margin: 14px 0;
}
.vp-membership small {
  color: var(--vp-gold);
  letter-spacing: 1px;
  font-size: 10px;
}
.vp-membership h3 {
  margin: 10px 0;
  font-size: 20px;
}
.vp-membership p {
  font-size: 12px;
  line-height: 1.7;
}
.vp-membership progress {
  display: block;
  width: 100%;
  height: 14px;
  accent-color: #b58a3b;
}
.vp-countdown {
  font-size: 18px;
  color: var(--vp-gold);
}
.vp-retention-warning {
  padding: 12px;
  border-left: 3px solid var(--vp-gold);
  background: var(--ui-panel);
}
.vp-success {
  color: var(--ui-ink);
  font-weight: 700;
}
.vp-gender-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}
.vp-gender-variants button {
  padding: 8px;
  min-width: 0;
  width: 100%;
}
.vp-gender-variants img {
  display: block;
  width: 100%;
  height: 115px;
  object-fit: contain;
  background: var(--ui-panel);
  border-radius: 8px;
  margin-bottom: 8px;
}
.vp-level-reward .vp-note {
  margin: 10px 0;
}
.vp-art-stage {
  margin: 0;
  padding: 14px;
  background: var(--ui-raised);
  border: 1px solid var(--vp-border);
  border-radius: 18px;
}
.vp-art-stage img {
  width: 100%;
  max-height: 65dvh;
  object-fit: contain;
  display: block;
}
.vp-art-stage figcaption {
  text-align: center;
  font-size: 12px;
  margin-top: 12px;
  color: var(--ui-ink);
}
.vp-threshold-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.vp-threshold-table th,
.vp-threshold-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--vp-border);
  text-align: right;
}
.vp-threshold-table th:first-child,
.vp-threshold-table td:first-child {
  text-align: left;
}
.vp-direct-status {
  background-size: 100% 100%;
  padding: 20px 38px;
  min-width: 180px;
  border: 0 !important;
  background-repeat: no-repeat;
}
.vp-level-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}
.vp-level-frame ~ * {
  position: relative;
}
.vp-level-collection > .vp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#erisRoomSurface[data-vp-direct-room="true"] .eris-room-wall {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-panel) 60%, transparent),
      color-mix(in srgb, var(--ui-panel) 85%, transparent)
    ),
    var(--vp-direct-room) !important;
}
@media (max-width: 540px) {
  .vp-level-collection > .vp-grid {
    grid-template-columns: 1fr;
  }
  .vp-membership {
    padding: 16px;
  }
  .vp-countdown {
    font-size: 16px;
  }
}