.pgg-vtlm,
.pgg-vtlm * {
  box-sizing: border-box;
}

.pgg-vtlm {
  --pgg-gold: #ffd700;
  --pgg-ink: #07090d;
  --pgg-panel: rgba(12, 15, 22, 0.96);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(100%, 1920px);
  height: min(960px, calc(100vh - 24px));
  min-height: 720px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.42);
  border-radius: 18px;
  color: #f7f7f7;
  background:
    radial-gradient(circle at 50% -15%, rgba(255, 215, 0, 0.16), transparent 40%),
    linear-gradient(145deg, #10131b 0%, #080a0f 52%, #040507 100%);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 0 70px rgba(255, 215, 0, 0.025);
  font-family: Verdana, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.pgg-vtlm.is-studio {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

body.pgg-vtlm-studio-open {
  overflow: hidden !important;
}

.pgg-vtlm__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.pgg-vtlm__header {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
  padding: 10px 16px 10px 22px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.25);
  background:
    linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent 34%),
    rgba(4, 6, 10, 0.83);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.pgg-vtlm__branding {
  min-width: 0;
}

.pgg-vtlm__kicker {
  margin-bottom: 3px;
  color: var(--pgg-gold);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.28);
}

.pgg-vtlm__title {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(23px, 2.15vw, 39px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 215, 0, 0.12);
}

.pgg-vtlm__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pgg-vtlm__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #f0f0f0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font: 800 12px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.pgg-vtlm__button:hover,
.pgg-vtlm__button:focus-visible {
  border-color: rgba(255, 215, 0, 0.62);
  color: var(--pgg-gold);
  outline: none;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.pgg-vtlm__button--studio {
  border-color: rgba(255, 215, 0, 0.32);
}

.pgg-vtlm__button-icon {
  font-size: 17px;
  line-height: 1;
}

.pgg-vtlm__workspace {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
}

.pgg-vtlm__tiers {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: repeat(5, minmax(82px, 1fr));
  gap: 6px;
  min-height: 0;
}

.pgg-vtlm-tier {
  --pgg-card-width: 86px;
  position: relative;
  display: grid;
  grid-template-columns: clamp(74px, 5.2vw, 96px) minmax(0, 1fr);
  min-height: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--pgg-tier-color) 46%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pgg-tier-color) 7%, transparent), transparent 34%),
    rgba(7, 9, 14, 0.88);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.015);
}

.pgg-vtlm-tier__label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--pgg-tier-color) 54%, transparent);
  border-radius: 10px 0 0 10px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pgg-tier-color) 42%, transparent), transparent 64%),
    linear-gradient(145deg, color-mix(in srgb, var(--pgg-tier-color) 22%, #0a0c12), #080a0e 70%);
  box-shadow:
    inset -10px 0 28px rgba(0, 0, 0, 0.32),
    5px 0 20px color-mix(in srgb, var(--pgg-tier-color) 9%, transparent);
}

.pgg-vtlm-tier__label strong {
  color: var(--pgg-tier-color);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(32px, 3.25vw, 58px);
  font-weight: 900;
  line-height: 0.82;
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.75),
    0 0 11px color-mix(in srgb, var(--pgg-tier-color) 64%, transparent);
}

.pgg-vtlm-tier__label span {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(7px, 0.55vw, 10px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pgg-vtlm-tier__label em {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--pgg-tier-color) 48%, transparent);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.pgg-vtlm-tier__dropzone,
.pgg-vtlm-pool__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 5px 9px;
  gap: 6px;
  overflow: visible;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.pgg-vtlm-tier__dropzone {
  flex-wrap: nowrap;
}

.pgg-vtlm-dropzone.is-over {
  background: radial-gradient(circle at var(--pgg-drop-x, 50%) 50%, rgba(255, 215, 0, 0.12), transparent 28%);
  box-shadow: inset 0 0 22px rgba(255, 215, 0, 0.08);
}

.pgg-vtlm-tier__empty {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(255, 255, 255, 0.15);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(12px, 0.9vw, 17px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pgg-vtlm-dropzone:not(:empty) > .pgg-vtlm-tier__empty,
.pgg-vtlm-dropzone.has-cards > .pgg-vtlm-tier__empty {
  opacity: 0;
}

.pgg-vtlm-pool {
  --pgg-card-width: 58px;
  position: relative;
  display: grid;
  flex: 0 0 clamp(150px, 18vh, 182px);
  grid-template-rows: 38px minmax(0, 1fr);
  min-height: 0;
  margin-top: 8px;
  overflow: visible;
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.055), transparent 50%),
    rgba(4, 6, 10, 0.88);
  box-shadow: inset 0 0 28px rgba(255, 215, 0, 0.02);
}

.pgg-vtlm-pool__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.pgg-vtlm-pool__heading > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.pgg-vtlm-pool__heading strong {
  color: var(--pgg-gold);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 16px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pgg-vtlm-pool__heading span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-pool__count {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pgg-vtlm-pool__count span {
  color: #fff;
  font-size: 12px;
}

.pgg-vtlm-pool__dropzone {
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5px 11px 7px;
}

.pgg-vtlm-card {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 var(--pgg-card-width);
  flex-direction: column;
  width: var(--pgg-card-width);
  min-width: 0;
  margin: 0;
  outline: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  will-change: transform, filter;
  transition: transform 150ms ease, filter 150ms ease, opacity 120ms ease;
}

.pgg-vtlm-card:hover,
.pgg-vtlm-card:focus-visible {
  z-index: 45;
  transform: translateY(-4px) scale(1.17);
  filter: brightness(1.08);
}

.pgg-vtlm-pool .pgg-vtlm-card:hover,
.pgg-vtlm-pool .pgg-vtlm-card:focus-visible {
  transform: translateY(-8px) scale(1.34);
}

.pgg-vtlm-card:active,
.pgg-vtlm-card.is-dragging {
  cursor: grabbing;
}

.pgg-vtlm-card.is-dragging {
  --pgg-drag-x: 0px;
  --pgg-drag-y: 0px;
  --pgg-drag-tilt: 0deg;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2147483646 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform: translate3d(var(--pgg-drag-x), var(--pgg-drag-y), 0) rotate(var(--pgg-drag-tilt)) scale(1.055) !important;
  transform-origin: center center !important;
  filter: brightness(1.13) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.42)) !important;
  transition: none !important;
  will-change: transform !important;
}

.pgg-vtlm-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 215, 0, 0.29);
  border-radius: clamp(5px, 0.5vw, 9px);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 215, 0, 0.11), transparent 43%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.46));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -18px 26px rgba(0, 0, 0, 0.35),
    0 5px 12px rgba(0, 0, 0, 0.28);
}

.pgg-vtlm-card__media::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: inherit;
  pointer-events: none;
}

.pgg-vtlm-card__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: scale(1.015);
}

.pgg-vtlm-card__portrait {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.52)) drop-shadow(0 0 9px rgba(255, 215, 0, 0.18));
  transform: scale(1.02);
}

.pgg-vtlm-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.84);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: calc(var(--pgg-card-width) * 0.26);
  font-weight: 900;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.18), transparent 65%);
}

.pgg-vtlm-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--pgg-card-width) * 0.205);
  margin: 0;
  padding: 3px 4px 2px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(255, 215, 0, 0.34);
  border-radius: 0 0 clamp(4px, 0.45vw, 8px) clamp(4px, 0.45vw, 8px);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(20, 18, 9, 0.88), rgba(3, 4, 6, 0.98)),
    rgba(0, 0, 0, 0.92);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(7px, calc(var(--pgg-card-width) * 0.112), 12px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.92);
  pointer-events: none;
}

.pgg-vtlm-card__badge {
  position: absolute;
  z-index: 6;
  display: block;
  width: calc(var(--pgg-card-width) * 0.235);
  height: calc(var(--pgg-card-width) * 0.235);
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.76));
}

.pgg-vtlm-card__badge--faction {
  left: 4%;
}

.pgg-vtlm-card__badge--faction-1 {
  top: 8%;
}

.pgg-vtlm-card__badge--faction-2 {
  top: 29%;
}

.pgg-vtlm-card__badge--damage {
  top: 8%;
  right: 4%;
  width: calc(var(--pgg-card-width) * 0.21);
  height: calc(var(--pgg-card-width) * 0.21);
}

.pgg-vtlm-card__badge--class {
  right: 4%;
  bottom: 18%;
  width: calc(var(--pgg-card-width) * 0.23);
  height: calc(var(--pgg-card-width) * 0.23);
}

.pgg-vtlm-card__badge--rarity {
  left: 50%;
  bottom: 17%;
  width: calc(var(--pgg-card-width) * 0.24);
  height: calc(var(--pgg-card-width) * 0.24);
  transform: translateX(-50%);
}

.pgg-vtlm-placeholder {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--pgg-card-width);
  width: var(--pgg-card-width);
  height: calc(var(--pgg-card-width) * 1.40);
  border: 1px dashed rgba(255, 215, 0, 0.86);
  border-radius: 8px;
  background: rgba(255, 215, 0, 0.075);
  box-shadow: 0 0 17px rgba(255, 215, 0, 0.18), inset 0 0 16px rgba(255, 215, 0, 0.04);
  animation: pgg-vtlm-placeholder-pulse 700ms ease-in-out infinite alternate;
}

@keyframes pgg-vtlm-placeholder-pulse {
  from { opacity: 0.48; }
  to { opacity: 1; }
}

.pgg-vtlm-card.is-drop-flash {
  z-index: 60;
  animation: pgg-vtlm-card-land 680ms cubic-bezier(.2, .9, .25, 1);
}

.pgg-vtlm-card.is-drop-flash::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 30;
  border: 2px solid rgba(255, 237, 135, 0.9);
  border-radius: 13px;
  pointer-events: none;
  animation: pgg-vtlm-ring 720ms ease-out forwards;
}

.pgg-vtlm-card.is-drop-flash::after {
  content: "";
  position: absolute;
  inset: -12% -50%;
  z-index: 29;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.08) 43%, rgba(255, 249, 206, 0.92) 50%, rgba(255, 255, 255, 0.08) 57%, transparent 64%);
  transform: translateX(-78%);
  animation: pgg-vtlm-shine 720ms ease-out forwards;
}

@keyframes pgg-vtlm-card-land {
  0% { transform: scale(0.76); filter: brightness(1.8) drop-shadow(0 0 22px rgba(255, 215, 0, 0.95)); }
  44% { transform: scale(1.15); filter: brightness(1.3) drop-shadow(0 0 18px rgba(255, 215, 0, 0.72)); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes pgg-vtlm-ring {
  0% { opacity: 1; transform: scale(0.72); box-shadow: 0 0 22px rgba(255, 215, 0, 0.9); }
  100% { opacity: 0; transform: scale(1.35); box-shadow: 0 0 38px rgba(255, 215, 0, 0); }
}

@keyframes pgg-vtlm-shine {
  0% { opacity: 0; transform: translateX(-78%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(78%); }
}

.pgg-vtlm-drop-burst {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 70;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pgg-vtlm-drop-burst i {
  --pgg-spark-angle: 0deg;
  position: absolute;
  left: -2px;
  top: -2px;
  display: block;
  width: 4px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff, #ffe36c, transparent);
  box-shadow: 0 0 8px rgba(255, 225, 89, 0.9);
  transform: rotate(var(--pgg-spark-angle)) translateY(-10px);
  transform-origin: 50% 100%;
  animation: pgg-vtlm-spark 700ms ease-out forwards;
}

@keyframes pgg-vtlm-spark {
  from { opacity: 1; transform: rotate(var(--pgg-spark-angle)) translateY(-9px) scaleY(0.55); }
  to { opacity: 0; transform: rotate(var(--pgg-spark-angle)) translateY(-44px) scaleY(1.05); }
}

.pgg-vtlm__notice {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 80px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  text-align: center;
}

.pgg-vtlm__drag-hint {
  position: absolute;
  right: 18px;
  bottom: 8px;
  z-index: 1;
  color: rgba(255, 215, 0, 0.06);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(18px, 2.2vw, 42px);
  font-weight: 900;
  letter-spacing: 0.13em;
  pointer-events: none;
}

html.pgg-vtlm-is-dragging,
html.pgg-vtlm-is-dragging body,
html.pgg-vtlm-is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

@media (max-height: 820px) {
  .pgg-vtlm {
    min-height: 650px;
  }

  .pgg-vtlm__header {
    min-height: 60px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .pgg-vtlm-pool {
    flex-basis: 170px;
    grid-template-rows: 33px minmax(0, 1fr);
  }

  .pgg-vtlm__workspace {
    padding: 7px;
  }

  .pgg-vtlm__tiers {
    gap: 4px;
  }
}

@media (max-width: 900px) {
  .pgg-vtlm__header {
    padding-left: 13px;
  }

  .pgg-vtlm__kicker {
    display: none;
  }

  .pgg-vtlm__title {
    font-size: clamp(19px, 3vw, 28px);
  }

  .pgg-vtlm__button {
    min-width: 38px;
    padding: 8px 10px;
    font-size: 0;
  }

  .pgg-vtlm__button-icon {
    font-size: 18px;
  }

  .pgg-vtlm-pool__heading > div:first-child span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pgg-vtlm *,
  .pgg-vtlm *::before,
  .pgg-vtlm *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   Versatile builder / filter launcher
   ========================================================= */
.pgg-vtlm [hidden] {
  display: none !important;
}

.pgg-vtlm:not(.is-board-active) {
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

.pgg-vtlm-board {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pgg-vtlm-setup {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.55) rgba(255,255,255,0.05);
}

.pgg-vtlm-setup__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.22);
}

.pgg-vtlm-setup__title {
  margin: 2px 0 6px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0,0,0,0.65);
}

.pgg-vtlm-setup__header p {
  max-width: 880px;
  margin: 0;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.55;
}

.pgg-vtlm-saved-launcher {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 360px) auto;
  align-items: center;
  gap: 14px;
  max-width: 1480px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,215,0,0.08), rgba(255,255,255,0.025));
}

.pgg-vtlm-saved-launcher > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pgg-vtlm-saved-launcher strong {
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.pgg-vtlm-saved-launcher span {
  color: rgba(255,255,255,0.62);
  font-size: 11px;
}

.pgg-vtlm-saved-launcher select,
.pgg-vtlm-search,
.pgg-vtlm-board-title {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #fff;
  background: #0b0e14;
  box-shadow: inset 0 1px 8px rgba(0,0,0,0.35);
  font: 700 13px/1.2 Verdana, Arial, sans-serif;
}

.pgg-vtlm-saved-launcher select,
.pgg-vtlm-search {
  padding: 10px 12px;
}

.pgg-vtlm-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1480px;
  margin: 0 auto;
}

.pgg-vtlm-filter-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(8, 11, 17, 0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 14px 30px rgba(0,0,0,0.16);
}

.pgg-vtlm-filter-card--wide {
  grid-column: 1 / -1;
}

.pgg-vtlm-filter-card__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.pgg-vtlm-filter-card__heading strong {
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 20px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.pgg-vtlm-filter-card__heading span,
.pgg-vtlm-filter-note {
  color: rgba(255,255,255,0.53);
  font-size: 10px;
  line-height: 1.4;
}

.pgg-vtlm-search:focus,
.pgg-vtlm-saved-launcher select:focus,
.pgg-vtlm-board-title:focus {
  border-color: rgba(255,215,0,0.65);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.08);
}

.pgg-vtlm-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pgg-vtlm-segmented.is-disabled {
  opacity: 0.5;
}

.pgg-vtlm-segment {
  cursor: pointer;
}

.pgg-vtlm-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pgg-vtlm-segment span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.035);
  font: 800 11px/1.2 Verdana, Arial, sans-serif;
  text-align: center;
  transition: 150ms ease;
}

.pgg-vtlm-segment input:checked + span {
  border-color: rgba(255,215,0,0.72);
  color: #ffd700;
  background: rgba(255,215,0,0.11);
  box-shadow: inset 0 0 16px rgba(255,215,0,0.04), 0 0 16px rgba(255,215,0,0.05);
}

.pgg-vtlm-icon-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.pgg-vtlm-icon-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.pgg-vtlm-icon-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pgg-vtlm-icon-option__visual {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  transition: 150ms ease;
}

.pgg-vtlm-icon-option__visual img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.pgg-vtlm-icon-option__visual b {
  color: rgba(255,255,255,0.75);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 17px;
}

.pgg-vtlm-icon-option small {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,0.55);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-icon-option input:checked + .pgg-vtlm-icon-option__visual {
  border-color: #ffd700;
  background: rgba(255,215,0,0.12);
  box-shadow: 0 0 0 2px rgba(255,215,0,0.08), 0 0 22px rgba(255,215,0,0.12);
  transform: translateY(-1px);
}

.pgg-vtlm-icon-option input:checked ~ small {
  color: #ffd700;
}

.pgg-vtlm-advanced-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pgg-vtlm-dropdown {
  position: relative;
  min-width: 0;
}

.pgg-vtlm-dropdown summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 11px;
  list-style: none;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  color: rgba(255,255,255,0.76);
  background: rgba(255,255,255,0.035);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.pgg-vtlm-dropdown summary::-webkit-details-marker { display: none; }
.pgg-vtlm-dropdown.has-selected summary {
  border-color: rgba(255,215,0,0.6);
  color: #ffd700;
  background: rgba(255,215,0,0.08);
}

.pgg-vtlm-dropdown summary em {
  min-width: 18px;
  color: #ffd700;
  font-style: normal;
  text-align: right;
}

.pgg-vtlm-dropdown__panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 82vw);
  max-height: 300px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px;
  background: #0b0e14;
  box-shadow: 0 18px 48px rgba(0,0,0,0.62);
}

.pgg-vtlm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 7px;
  border-radius: 7px;
  color: rgba(255,255,255,0.76);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pgg-vtlm-check:hover { background: rgba(255,255,255,0.045); }
.pgg-vtlm-check input { accent-color: #ffd700; }
.pgg-vtlm-dropdown__empty { color: rgba(255,255,255,0.5); font-size: 11px; }

.pgg-vtlm-launchbar {
  position: sticky;
  bottom: -1px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  max-width: 1480px;
  margin: 18px auto 0;
  padding: 13px;
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 14px;
  background: rgba(5,7,11,0.94);
  box-shadow: 0 -12px 38px rgba(0,0,0,0.34), 0 0 24px rgba(255,215,0,0.05);
  backdrop-filter: blur(12px);
}

.pgg-vtlm-launchbar__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pgg-vtlm-launchbar__copy strong { color: #fff; font-size: 12px; }
.pgg-vtlm-launchbar__copy span { overflow: hidden; color: rgba(255,255,255,0.58); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.pgg-vtlm-launch-button,
.pgg-vtlm-clear-button {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font: 900 11px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
}

.pgg-vtlm-launch-button {
  border: 1px solid #ffd700;
  color: #0a0b0e;
  background: linear-gradient(180deg, #ffe65f, #ffd700);
  box-shadow: 0 7px 24px rgba(255,215,0,0.15);
}

.pgg-vtlm-launch-button--small { min-height: 40px; padding-inline: 14px; }
.pgg-vtlm-clear-button { border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.04); }
.pgg-vtlm-launch-button:disabled,
.pgg-vtlm__button:disabled { opacity: 0.5; cursor: wait; }

.pgg-vtlm-status {
  max-width: 1480px;
  min-height: 20px;
  margin: 7px auto 0;
  color: rgba(255,255,255,0.63);
  font-size: 11px;
  font-weight: 700;
}

.pgg-vtlm-status.is-error,
.pgg-vtlm-board-status.is-error { color: #ff7676; }
.pgg-vtlm-status.is-success,
.pgg-vtlm-board-status.is-success { color: #76eba2; }

.pgg-vtlm-board-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pgg-vtlm-board-title {
  min-width: 260px;
  max-width: min(520px, 45vw);
  min-height: 36px;
  padding: 5px 9px;
  border-color: transparent;
  border-radius: 7px;
  color: #fff;
  background: rgba(255,255,255,0.035);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.pgg-vtlm-board-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 999px;
  color: rgba(255,215,0,0.84);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.pgg-vtlm__button--download {
  background: linear-gradient(180deg, rgba(26,44,70,.92), rgba(11,22,38,.94));
  border-color: rgba(116, 183, 255, .42);
  color: #eef7ff;
}

.pgg-vtlm__button--download:hover,
.pgg-vtlm__button--download:focus-visible {
  border-color: rgba(162, 214, 255, .75);
  box-shadow: 0 0 0 1px rgba(128, 194, 255, .24), 0 12px 28px rgba(24, 79, 145, .24);
}

.pgg-vtlm__button--save {
  border-color: rgba(255,215,0,0.55);
  color: #ffd700;
}

.pgg-vtlm-board-status {
  position: absolute;
  right: 16px;
  bottom: 6px;
  z-index: 40;
  min-height: 18px;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 980px) {
  .pgg-vtlm { min-height: 780px; }
  .pgg-vtlm-builder-grid { grid-template-columns: 1fr; }
  .pgg-vtlm-filter-card--wide { grid-column: auto; }
  .pgg-vtlm-advanced-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pgg-vtlm-saved-launcher { grid-template-columns: 1fr; }
  .pgg-vtlm-launchbar { grid-template-columns: 1fr 1fr; }
  .pgg-vtlm-launchbar__copy { grid-column: 1 / -1; }
  .pgg-vtlm__header { align-items: flex-start; flex-direction: column; }
  .pgg-vtlm__controls { flex-wrap: wrap; }
  .pgg-vtlm-board-title { max-width: 65vw; }
}

@media (max-width: 620px) {
  .pgg-vtlm-setup { padding: 16px 12px 90px; }
  .pgg-vtlm-filter-card__heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pgg-vtlm-advanced-grid { grid-template-columns: 1fr; }
  .pgg-vtlm-launchbar { grid-template-columns: 1fr; }
  .pgg-vtlm-launchbar__copy { grid-column: auto; }
  .pgg-vtlm-board-title-row { align-items: flex-start; flex-direction: column; }
  .pgg-vtlm-board-title { min-width: 0; max-width: 85vw; width: 85vw; }
}

/* v0.2.0 — saved tier list naming + management */
.pgg-vtlm-saved-launcher__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.pgg-vtlm-manage-button {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.pgg-vtlm-manager {
  max-width: 1480px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.26);
  border-radius: 14px;
  background: rgba(7, 10, 15, 0.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 14px 34px rgba(0,0,0,0.2);
}

.pgg-vtlm-manager[hidden],
.pgg-vtlm-name-modal[hidden] {
  display: none !important;
}

.pgg-vtlm-manager__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.16);
  background: linear-gradient(90deg, rgba(255,215,0,0.075), transparent);
}

.pgg-vtlm-manager__header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pgg-vtlm-manager__header strong {
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.pgg-vtlm-manager__header span {
  color: rgba(255,255,255,0.58);
  font-size: 10px;
}

.pgg-vtlm-manager__list {
  display: flex;
  flex-direction: column;
  max-height: 330px;
  overflow: auto;
}

.pgg-vtlm-manager-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.pgg-vtlm-manager-item:last-child {
  border-bottom: 0;
}

.pgg-vtlm-manager-item__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.pgg-vtlm-manager-item__main > strong {
  overflow: hidden;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pgg-vtlm-manager-item__main > span {
  color: rgba(255,255,255,0.55);
  font-size: 10px;
}

.pgg-vtlm-manager-item__main b {
  color: rgba(255,215,0,0.9);
}

.pgg-vtlm-manager-item__main i {
  font-style: normal;
}

.pgg-vtlm-manager-item__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pgg-vtlm-delete-button {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 90, 90, 0.32);
  border-radius: 10px;
  color: #ff8e8e;
  background: rgba(255, 65, 65, 0.06);
  font: 800 11px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
}

.pgg-vtlm-delete-button:hover,
.pgg-vtlm-delete-button:focus-visible {
  border-color: rgba(255, 90, 90, 0.72);
  color: #fff;
  outline: 0;
  background: rgba(255, 65, 65, 0.15);
}

.pgg-vtlm-manager__empty {
  padding: 24px 16px;
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  text-align: center;
}

.pgg-vtlm-board-author {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.52);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.pgg-vtlm-name-modal {
  position: absolute;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.pgg-vtlm-name-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(5px);
}

.pgg-vtlm-name-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,215,0,0.13), transparent 42%),
    #0b0e14;
  box-shadow: 0 28px 80px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.04);
}

.pgg-vtlm-name-modal__kicker {
  margin-bottom: 5px;
  color: #ffd700;
  font: 800 10px/1.2 Verdana, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pgg-vtlm-name-modal__dialog h3 {
  margin: 0 0 7px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
}

.pgg-vtlm-name-modal__dialog p {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.62);
  font-size: 11px;
  line-height: 1.5;
}

.pgg-vtlm-name-modal__dialog label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pgg-vtlm-name-modal__dialog label > span {
  color: rgba(255,255,255,0.76);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pgg-vtlm-name-modal__dialog input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: #fff;
  background: #07090d;
  font: 800 14px/1.2 Verdana, Arial, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

.pgg-vtlm-name-modal__dialog input:focus {
  border-color: rgba(255,215,0,0.72);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.08);
}

.pgg-vtlm-name-modal__error {
  min-height: 18px;
  margin-top: 7px;
  color: #ff7b7b;
  font-size: 10px;
  font-weight: 800;
}

.pgg-vtlm-name-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
}

body.pgg-vtlm-modal-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .pgg-vtlm-saved-launcher__actions {
    justify-content: flex-start;
  }
  .pgg-vtlm-manager-item {
    grid-template-columns: 1fr;
  }
  .pgg-vtlm-manager-item__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .pgg-vtlm-saved-launcher__actions,
  .pgg-vtlm-name-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pgg-vtlm-manager__header {
    align-items: flex-start;
  }
  .pgg-vtlm-manager-item__actions > button {
    flex: 1 1 auto;
  }
}

/* ============================================================
   v0.3 Community + horizontal hero rail
   ============================================================ */
.pgg-vtlm-pool__rail {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

.pgg-vtlm-pool__scroller {
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 215, 0, 0.72) rgba(255, 255, 255, 0.08);
  touch-action: pan-x;
}

.pgg-vtlm-pool__scroller::-webkit-scrollbar { height: 12px; }
.pgg-vtlm-pool__scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}
.pgg-vtlm-pool__scroller::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.58), rgba(255, 215, 0, 0.9));
  border: 2px solid rgba(5, 7, 10, 0.92);
  border-radius: 999px;
}

.pgg-vtlm-pool__dropzone {
  --pgg-card-width: 62px;
  width: max-content;
  min-width: 100%;
  height: 100%;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  padding: 6px 10px 8px;
}

.pgg-vtlm-pool__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #ffd700;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(0, 0, 0, 0.34));
  font: 900 34px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease, color 150ms ease;
}
.pgg-vtlm-pool__arrow:hover:not(:disabled),
.pgg-vtlm-pool__arrow:focus-visible:not(:disabled) {
  color: #fff;
  background: rgba(255, 215, 0, 0.2);
  outline: none;
}
.pgg-vtlm-pool__arrow:disabled { opacity: 0.18; cursor: default; }
.pgg-vtlm-pool__arrow--left { border-right: 1px solid rgba(255, 215, 0, 0.14); }
.pgg-vtlm-pool__arrow--right { border-left: 1px solid rgba(255, 215, 0, 0.14); }

.pgg-vtlm-card__grip {
  display: none;
  position: absolute;
  z-index: 9;
  right: 3px;
  top: 3px;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 215, 0, 0.72);
  border-radius: 7px;
  color: #ffd700;
  background: rgba(0, 0, 0, 0.82);
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: -3px;
  cursor: grab;
}
.pgg-vtlm-card__grip:active { cursor: grabbing; }

/* Save / publish dialog */
.pgg-vtlm-save-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(92vh, 940px);
  overflow: auto;
}
.pgg-vtlm-publish-fields {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.pgg-vtlm-publish-fields[hidden] { display: none !important; }
.pgg-vtlm-publish-fields textarea {
  width: 100%;
  resize: vertical;
  min-height: 82px;
}
.pgg-vtlm-visibility {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.pgg-vtlm-visibility legend {
  padding: 0 6px;
  color: #ffd700;
  font-weight: 800;
}
.pgg-vtlm-visibility label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.pgg-vtlm-cover-editor {
  padding: 14px;
  border: 1px solid rgba(255, 215, 0, 0.24);
  border-radius: 12px;
  background: rgba(4, 6, 10, 0.62);
}
.pgg-vtlm-cover-editor__heading,
.pgg-vtlm-cover-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pgg-vtlm-cover-editor__heading strong { display: block; color: #fff; }
.pgg-vtlm-cover-editor__heading span { display: block; margin-top: 3px; color: rgba(255,255,255,.52); font-size: 11px; }
.pgg-vtlm-cover-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.pgg-vtlm-cover-tabs button {
  flex: 1 1 0;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  cursor: pointer;
}
.pgg-vtlm-cover-tabs button.is-active {
  border-color: rgba(255,215,0,.7);
  color: #ffd700;
  background: rgba(255,215,0,.1);
}
.pgg-vtlm-cover-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px dashed rgba(255,215,0,.42);
  border-radius: 10px;
  background: #06080c;
  touch-action: none;
  cursor: default;
}
.pgg-vtlm-cover-crop.has-image { cursor: move; border-style: solid; }
.pgg-vtlm-cover-crop > img {
  position: absolute;
  display: block;
  max-width: none !important;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.pgg-vtlm-cover-crop > img:not(.is-croppable) {
  inset: 0;
  width: 100%;
  height: 100%;
}
.pgg-vtlm-cover-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: rgba(255,255,255,.58);
  text-align: center;
  font-size: 13px;
}
.pgg-vtlm-cover-controls { margin-top: 10px; }
.pgg-vtlm-cover-file-button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(255,215,0,.5);
  border-radius: 8px;
  color: #ffd700;
  background: rgba(255,215,0,.07);
  font-weight: 800;
  cursor: pointer;
}
.pgg-vtlm-cover-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pgg-vtlm-cover-zoom {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}
.pgg-vtlm-cover-zoom input { flex: 1 1 auto; }
.pgg-vtlm-cover-share { display: flex !important; align-items: center; gap: 8px; margin-top: 10px !important; }
.pgg-vtlm-cover-panel > small { display: block; margin-top: 6px; color: rgba(255,255,255,.42); }
.pgg-vtlm-community-covers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 390px;
  overflow: auto;
}
.pgg-vtlm-community-cover {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  aspect-ratio: 16 / 9;
  background: #06080c;
  cursor: pointer;
}
.pgg-vtlm-community-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgg-vtlm-community-cover span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 6px 5px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pgg-vtlm-community-cover.is-selected { border-color: #ffd700; box-shadow: 0 0 18px rgba(255,215,0,.25); }

.pgg-vtlm-manager-visibility { color: #ffd700; font-style: normal; }
a.pgg-vtlm-manager-view { text-decoration: none; }

/* Community archive */
.pgg-vtlm-archive,
.pgg-vtlm-public {
  --pgg-gold: #ffd700;
  color: #f5f5f5;
  font-family: Verdana, Arial, sans-serif;
}
.pgg-vtlm-archive {
  padding: clamp(16px, 2vw, 28px);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 16px;
  background: radial-gradient(circle at 50% -10%, rgba(255,215,0,.11), transparent 38%), #080a0f;
}
.pgg-vtlm-archive__header h1,
.pgg-vtlm-archive__header h2,
.pgg-vtlm-public__header h1 {
  margin: 2px 0 8px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  text-transform: uppercase;
}
.pgg-vtlm-archive__header h1,
.pgg-vtlm-archive__header h2 { font-size: clamp(28px, 4vw, 48px); }
.pgg-vtlm-archive__header p { max-width: 820px; margin: 0; color: rgba(255,255,255,.62); }
.pgg-vtlm-archive__tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 10px;
  margin: 22px 0 16px;
}
.pgg-vtlm-archive__tools input,
.pgg-vtlm-archive__tools select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,215,0,.24);
  border-radius: 9px;
  color: #fff;
  background: #10131a;
}
.pgg-vtlm-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pgg-vtlm-archive-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,215,0,.045), transparent 38%), #10131a;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
.pgg-vtlm-archive-card__image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: rgba(255,215,0,.75);
  background: radial-gradient(circle, rgba(255,215,0,.14), transparent 62%), #06080c;
  font: 900 42px Iceberg, Orbitron, sans-serif;
  text-decoration: none;
}
.pgg-vtlm-archive-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.pgg-vtlm-archive-card:hover .pgg-vtlm-archive-card__image img { transform: scale(1.025); }
.pgg-vtlm-archive-card__body { padding: 13px 14px 14px; }
.pgg-vtlm-archive-card__byline { color: rgba(255,255,255,.48); font-size: 10px; font-weight: 700; }
.pgg-vtlm-archive-card h3 { margin: 5px 0 7px; font-size: 18px; line-height: 1.15; }
.pgg-vtlm-archive-card h3 a { color: #fff; text-decoration: none; }
.pgg-vtlm-archive-card h3 a:hover { color: #ffd700; }
.pgg-vtlm-archive-card p { min-height: 38px; margin: 0 0 11px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; }
.pgg-vtlm-archive-card__meta { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font-size: 10px; }
.pgg-vtlm-archive-card__meta > a { margin-left: auto; color: #ffd700; font-weight: 800; text-decoration: none; }
.pgg-vtlm-vote-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.04);
  font: 800 11px/1 Verdana, sans-serif;
  cursor: pointer;
}
.pgg-vtlm-vote-button.is-voted { border-color: rgba(255,215,0,.72); color: #ffd700; background: rgba(255,215,0,.1); }
.pgg-vtlm-vote-button:disabled { opacity: .45; cursor: default; }
.pgg-vtlm-archive__footer { display: grid; place-items: center; gap: 8px; margin-top: 18px; }
.pgg-vtlm-archive__empty { grid-column: 1 / -1; padding: 36px; color: rgba(255,255,255,.55); text-align: center; }

/* Public single tier list */
.pgg-vtlm-public {
  overflow: hidden;
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 16px;
  background: #080a0f;
}
.pgg-vtlm-public__cover { width: 100%; aspect-ratio: 16 / 9; max-height: 560px; overflow: hidden; background: #05070a; }
.pgg-vtlm-public__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgg-vtlm-public__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(14px, 2vw, 24px);
  border-bottom: 1px solid rgba(255,215,0,.16);
}
.pgg-vtlm-public__header h1 { font-size: clamp(26px, 4vw, 46px); }
.pgg-vtlm-public__byline { color: rgba(255,255,255,.55); font-size: 11px; }
.pgg-vtlm-public__stats { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 11px; }
.pgg-vtlm-public__description { padding: 14px clamp(14px, 2vw, 24px); color: rgba(255,255,255,.74); line-height: 1.6; }
.pgg-vtlm-public__description p { margin: 0; }
.pgg-vtlm-public__board { display: grid; gap: 7px; padding: 10px; }
.pgg-vtlm-public-tier {
  display: grid;
  grid-template-columns: clamp(68px, 7vw, 98px) minmax(0, 1fr);
  min-height: 128px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pgg-tier-color) 44%, transparent);
  border-radius: 10px;
  background: rgba(7,9,14,.92);
}
.pgg-vtlm-public-tier__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid color-mix(in srgb, var(--pgg-tier-color) 48%, transparent);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pgg-tier-color) 36%, transparent), transparent 66%), #090b10;
}
.pgg-vtlm-public-tier__label strong { color: var(--pgg-tier-color); font: 900 clamp(34px, 5vw, 58px)/.85 Iceberg, Orbitron, sans-serif; }
.pgg-vtlm-public-tier__label span { margin-top: 6px; color: rgba(255,255,255,.55); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.pgg-vtlm-public-tier__heroes {
  --pgg-card-width: 74px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,.6) rgba(255,255,255,.05);
}
.pgg-vtlm-public-tier__heroes .pgg-vtlm-card { flex: 0 0 var(--pgg-card-width); cursor: default; }
.pgg-vtlm-public-tier__heroes .pgg-vtlm-card__grip { display: none !important; }
.pgg-vtlm-public-tier__empty { margin: auto; color: rgba(255,255,255,.22); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.pgg-vtlm-public-notice { padding: 30px; border: 1px solid rgba(255,215,0,.25); border-radius: 12px; color: #fff; background: #0a0c12; }

@media (max-width: 1050px) {
  .pgg-vtlm-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgg-vtlm-community-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep the editor toolbar from colliding with title/author/autosave at
   laptop and embedded-content widths. The board header becomes two clean
   rows before the controls are forced to squeeze. */
@media (max-width: 1180px) {
  .pgg-vtlm.is-board-active .pgg-vtlm__header {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .pgg-vtlm.is-board-active .pgg-vtlm__branding {
    width: 100%;
  }

  .pgg-vtlm.is-board-active .pgg-vtlm-board-title-row {
    flex-wrap: wrap;
    row-gap: 5px;
  }

  .pgg-vtlm.is-board-active .pgg-vtlm__controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 800px) {
  .pgg-vtlm:not(.is-studio) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    touch-action: auto;
  }
  .pgg-vtlm:not(.is-studio) .pgg-vtlm-board { overflow: visible; }
  .pgg-vtlm:not(.is-studio) .pgg-vtlm__workspace { overflow: visible; }
  .pgg-vtlm:not(.is-studio) .pgg-vtlm__tiers {
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: visible;
  }
  .pgg-vtlm:not(.is-studio) .pgg-vtlm-tier { flex: 0 0 auto; min-height: 142px; }
  .pgg-vtlm-tier__dropzone {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    /* Let the tier row scroll horizontally while still allowing the page to
       scroll vertically when the gesture starts inside a tier. */
    touch-action: pan-x pan-y;
  }
  .pgg-vtlm-card {
    /* Ranked hero cards are part of the vertically scrolling page. Drag them
       with the grip so ordinary swipes never get trapped by the tier list. */
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .pgg-vtlm-pool .pgg-vtlm-card {
    /* The bottom dock owns horizontal swipes. Vertical movement is reserved
       for dragging a hero out of the dock and onto a tier. */
    touch-action: pan-x;
  }
  .pgg-vtlm-card__grip {
    display: flex;
    width: 30px;
    height: 30px;
    right: 2px;
    top: 2px;
    border-width: 2px;
    border-radius: 8px;
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.pgg-vtlm-is-dragging,
  html.pgg-vtlm-is-dragging body {
    overscroll-behavior: none;
  }
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    /* Reserve real scroll space for the fixed hero dock so D tier and the
       bottom of the board can always be brought fully above it. */
    padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    position: fixed;
    z-index: 2147482000;
    left: 8px;
    right: 8px;
    bottom: env(safe-area-inset-bottom, 0px);
    width: auto;
    max-width: none;
    flex-basis: 146px;
    height: 146px;
    min-height: 146px;
    margin: 0;
    border-radius: 14px 14px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 215, 0, 0.08), transparent 48%),
      rgba(4, 6, 10, 0.97);
    box-shadow: 0 -18px 45px rgba(0,0,0,.78), 0 0 0 1px rgba(255,215,0,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    touch-action: pan-x;
  }
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__heading {
    padding-top: 9px;
  }
  .pgg-vtlm-pool__rail { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .pgg-vtlm-pool__scroller {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
  }
  .pgg-vtlm-pool__arrow { width: 34px; min-width: 34px; }
  .pgg-vtlm-pool__heading { gap: 8px; }
  .pgg-vtlm-pool__heading span { display: none; }
  .pgg-vtlm-community-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgg-vtlm-cover-controls { align-items: stretch; flex-direction: column; }
  .pgg-vtlm-cover-zoom { max-width: none; }
  .pgg-vtlm-archive__tools { grid-template-columns: 1fr; }
  .pgg-vtlm-archive__grid { grid-template-columns: 1fr; }
  .pgg-vtlm-public__header { align-items: flex-start; flex-direction: column; }
  .pgg-vtlm-public-tier { min-height: 112px; grid-template-columns: 64px minmax(0, 1fr); }
  .pgg-vtlm-public-tier__heroes { --pgg-card-width: 64px; }
}

@media (max-width: 520px) {
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  }
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    left: 4px;
    right: 4px;
    height: 138px;
    min-height: 138px;
    flex-basis: 138px;
  }

  .pgg-vtlm-save-dialog { width: calc(100vw - 14px); max-height: 96dvh; }
  .pgg-vtlm-community-covers { grid-template-columns: 1fr 1fr; }
  .pgg-vtlm-public__stats { flex-wrap: wrap; }
}

/* v0.3.1 — single Tier List Hub shortcode */
.pgg-vtlm-package {
  width: 100%;
}

.pgg-vtlm-package__archive[hidden],
.pgg-vtlm-package__maker[hidden] {
  display: none !important;
}

.pgg-vtlm-archive__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.pgg-vtlm-archive__intro {
  min-width: 0;
  flex: 1 1 auto;
}

.pgg-vtlm-archive__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  padding-top: 5px;
}

.pgg-vtlm-hub-create {
  min-height: 46px;
  padding-inline: 18px;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.08);
}

.pgg-vtlm-hub-create > span {
  display: inline-block;
  margin-right: 4px;
  font-size: 16px;
  line-height: 0;
  transform: translateY(1px);
}

.pgg-vtlm-package__maker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), rgba(8, 10, 15, 0.96) 38%);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.pgg-vtlm-package__back {
  min-height: 38px;
  padding: 9px 13px;
  cursor: pointer;
}

.pgg-vtlm-package__maker-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.pgg-vtlm-package__maker-label span {
  color: rgba(255, 215, 0, 0.72);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pgg-vtlm-package__maker-label strong {
  color: rgba(255,255,255,.8);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 15px;
  letter-spacing: .025em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .pgg-vtlm-archive__header {
    flex-direction: column;
    gap: 16px;
  }

  .pgg-vtlm-archive__actions,
  .pgg-vtlm-hub-create {
    width: 100%;
  }

  .pgg-vtlm-hub-create {
    justify-content: center;
  }

  .pgg-vtlm-package__maker-nav {
    position: sticky;
    top: 0;
    z-index: 90;
  }
}


/* v0.3.2 — hero names live inside the card footer */

/* v0.4.0 — community categories + SEO hierarchy */
.pgg-vtlm-category-editor {
  padding: 14px;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 12px;
  background: rgba(4, 6, 10, 0.55);
}
.pgg-vtlm-category-editor__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pgg-vtlm-category-editor__heading strong {
  display: block;
  color: #fff;
}
.pgg-vtlm-category-editor__heading span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
}
.pgg-vtlm-category-editor__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}
.pgg-vtlm-category-choice {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 !important;
  padding: 7px 8px 7px calc(8px + (var(--pgg-category-depth, 0) * 13px));
  border-radius: 7px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.025);
  font-size: 11px;
  cursor: pointer;
}
.pgg-vtlm-category-choice:hover { background: rgba(255,215,0,.055); }
.pgg-vtlm-category-choice input { width: auto !important; min-height: 0 !important; accent-color: #ffd700; }
.pgg-vtlm-category-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgg-vtlm-category-editor__new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .7fr);
  gap: 10px;
  margin-top: 10px;
}
.pgg-vtlm-category-editor__new label { margin: 0 !important; }
.pgg-vtlm-category-editor__new select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #fff;
  background: #10131a;
}
.pgg-vtlm-category-editor__note {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  line-height: 1.45;
}

.pgg-vtlm-archive__tools {
  grid-template-columns: minmax(0, 1fr) minmax(175px, 250px) minmax(150px, 210px);
}

.pgg-vtlm-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
}
.pgg-vtlm-category-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 999px;
  color: rgba(255,215,0,.88);
  background: rgba(255,215,0,.055);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.pgg-vtlm-category-chips a:hover {
  border-color: rgba(255,215,0,.72);
  color: #fff;
  background: rgba(255,215,0,.11);
}
.pgg-vtlm-category-chips--public { margin: 7px 0 9px; }
.pgg-vtlm-category-chips--large a { min-height: 34px; padding: 7px 12px; font-size: 11px; }

.pgg-vtlm-public__section-title {
  margin: 0;
  padding: 16px clamp(14px, 2vw, 24px) 4px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
}

.pgg-vtlm-taxonomy-page {
  width: 100%;
  padding: 32px 16px 56px;
  color: #f5f5f5;
  font-family: Verdana, Arial, sans-serif;
}
.pgg-vtlm-taxonomy-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}
.pgg-vtlm-seo-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  color: rgba(255,255,255,.48);
  font-size: 10px;
  font-weight: 700;
}
.pgg-vtlm-seo-breadcrumbs a { color: #ffd700; text-decoration: none; }
.pgg-vtlm-taxonomy-header {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 16px;
  background: radial-gradient(circle at 50% -15%, rgba(255,215,0,.11), transparent 42%), #080a0f;
}
.pgg-vtlm-taxonomy-header h1 {
  margin: 3px 0 9px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  text-transform: uppercase;
}
.pgg-vtlm-taxonomy-header p {
  max-width: 850px;
  margin: 0;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}
.pgg-vtlm-taxonomy-header__meta {
  margin-top: 13px;
  color: rgba(255,215,0,.72);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.pgg-vtlm-taxonomy-children,
.pgg-vtlm-taxonomy-results {
  margin-top: 22px;
}
.pgg-vtlm-taxonomy-children h2,
.pgg-vtlm-taxonomy-results > h2 {
  margin: 0 0 11px;
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
}
.pgg-vtlm-taxonomy-pagination { margin-top: 22px; }
.pgg-vtlm-taxonomy-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pgg-vtlm-taxonomy-pagination a,
.pgg-vtlm-taxonomy-pagination span {
  display: grid;
  min-width: 36px;
  min-height: 36px;
  place-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.035);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}
.pgg-vtlm-taxonomy-pagination .current {
  border-color: #ffd700;
  color: #0a0b0e;
  background: #ffd700;
}

@media (max-width: 800px) {
  .pgg-vtlm-category-editor__choices,
  .pgg-vtlm-category-editor__new { grid-template-columns: 1fr; }
  .pgg-vtlm-archive__tools { grid-template-columns: 1fr; }
  .pgg-vtlm-taxonomy-page { padding-inline: 10px; }
}
.pgg-vtlm-category-editor__search {
  display: block !important;
  margin: 0 0 8px !important;
}
.pgg-vtlm-category-editor__search input {
  width: 100%;
  min-height: 40px;
}
.pgg-vtlm-category-choice[hidden] { display: none !important; }

/* v0.5.0 — separate account management page + archive manager link */
.pgg-vtlm-archive__actions {
  gap: 9px;
}

.pgg-vtlm-hub-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 15px;
  white-space: nowrap;
  text-decoration: none !important;
}

.pgg-vtlm-account-manager {
  --pgg-gold: #ffd700;
  width: 100%;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 16px;
  color: #f5f5f5;
  background: radial-gradient(circle at 50% -10%, rgba(255,215,0,.11), transparent 38%), #080a0f;
  font-family: Verdana, Arial, sans-serif;
  box-sizing: border-box;
}

.pgg-vtlm-account-manager__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.pgg-vtlm-account-manager__header h2 {
  margin: 2px 0 7px;
  color: #fff;
  font: 900 clamp(26px, 4vw, 42px)/1 Iceberg, Orbitron, Verdana, sans-serif;
  text-transform: uppercase;
}

.pgg-vtlm-account-manager__header p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

.pgg-vtlm-account-manager__header > .pgg-vtlm-launch-button,
.pgg-vtlm-account-manager__empty .pgg-vtlm-launch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  white-space: nowrap;
}

.pgg-vtlm-account-manager__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 10px;
  border: 1px solid rgba(255,215,0,.16);
  border-radius: 999px;
  background: rgba(255,215,0,.05);
}

.pgg-vtlm-account-manager__summary strong {
  color: #ffd700;
  font: 900 15px/1 Iceberg, Orbitron, Verdana, sans-serif;
}

.pgg-vtlm-account-manager__summary span {
  color: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pgg-vtlm-account-manager__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pgg-vtlm-account-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,215,0,.045), transparent 38%), #10131a;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.pgg-vtlm-account-card__image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: rgba(255,215,0,.72);
  background: radial-gradient(circle, rgba(255,215,0,.14), transparent 62%), #06080c;
  font: 900 38px Iceberg, Orbitron, Verdana, sans-serif;
  text-decoration: none !important;
}

.pgg-vtlm-account-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.pgg-vtlm-account-card:hover .pgg-vtlm-account-card__image img {
  transform: scale(1.025);
}

.pgg-vtlm-account-card__visibility {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,7,10,.84);
  backdrop-filter: blur(7px);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pgg-vtlm-account-card__visibility.is-public {
  border-color: rgba(255,215,0,.45);
  color: #ffd700;
}

.pgg-vtlm-account-card__visibility.is-private {
  color: rgba(255,255,255,.68);
}

.pgg-vtlm-account-card__body {
  padding: 12px 13px 13px;
}

.pgg-vtlm-account-card h3 {
  margin: 0 0 7px;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-account-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  color: rgba(255,255,255,.46);
  font-size: 9px;
}

.pgg-vtlm-account-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.pgg-vtlm-account-card__actions > a,
.pgg-vtlm-account-card__actions > button {
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  text-decoration: none !important;
}

.pgg-vtlm-account-manager__empty {
  grid-column: 1 / -1;
  padding: clamp(28px, 5vw, 54px) 20px;
  border: 1px dashed rgba(255,215,0,.18);
  border-radius: 12px;
  color: rgba(255,255,255,.62);
  text-align: center;
  background: rgba(255,255,255,.018);
}

.pgg-vtlm-account-manager__empty h2,
.pgg-vtlm-account-manager__empty h3 {
  margin: 0 0 8px;
  color: #fff;
}

.pgg-vtlm-account-manager__empty p {
  margin: 0 0 16px;
}

.pgg-vtlm-account-manager > .pgg-vtlm-status {
  min-height: 18px;
  margin-top: 10px;
}

@media (max-width: 980px) {
  .pgg-vtlm-account-manager__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pgg-vtlm-archive__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .pgg-vtlm-hub-manage,
  .pgg-vtlm-hub-create { width: 100%; }
  .pgg-vtlm-account-manager__header { flex-direction: column; }
  .pgg-vtlm-account-manager__header > .pgg-vtlm-launch-button { width: 100%; }
  .pgg-vtlm-account-manager__grid { grid-template-columns: 1fr; }
}

/* v0.6.0 — list-based community archive + Youzify-native account manager */
.pgg-vtlm-archive__tools {
  grid-template-columns: minmax(260px, 1.7fr) minmax(170px, .8fr) minmax(150px, .7fr) minmax(150px, .7fr);
  align-items: center;
}

.pgg-vtlm-archive__grid,
.pgg-vtlm-archive__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pgg-vtlm-archive-card {
  display: grid;
  grid-template-columns: minmax(190px, 245px) minmax(0, 1fr) minmax(150px, 190px);
  align-items: stretch;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: linear-gradient(105deg, rgba(255,215,0,.04), transparent 34%), #10131a;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.pgg-vtlm-archive-card__image {
  width: 100%;
  height: 100%;
  min-height: 138px;
  aspect-ratio: auto;
  border-right: 1px solid rgba(255,255,255,.07);
  font-size: 34px;
}

.pgg-vtlm-archive-card__body {
  min-width: 0;
  padding: 14px 16px;
}

.pgg-vtlm-archive-card__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 700;
}

.pgg-vtlm-archive-card__byline strong { color: rgba(255,255,255,.72); }
.pgg-vtlm-archive-card h3 { margin: 5px 0 8px; font-size: clamp(18px, 2vw, 23px); }
.pgg-vtlm-archive-card p { min-height: 0; margin: 8px 0 0; font-size: 11px; }
.pgg-vtlm-archive-card .pgg-vtlm-category-chips { margin-top: 2px; }

.pgg-vtlm-archive-card__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-left: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.52);
  background: rgba(0,0,0,.13);
}

.pgg-vtlm-archive-card__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
}

.pgg-vtlm-archive-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255,215,0,.22);
  border-radius: 8px;
  color: #ffd700 !important;
  background: rgba(255,215,0,.05);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none !important;
}
.pgg-vtlm-archive-card__view:hover { background: rgba(255,215,0,.1); }

/* Let Youzify provide the page canvas. The shortcode content itself should float. */
.pgg-vtlm-account-manager {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pgg-vtlm-account-manager__header {
  margin-bottom: 14px;
  padding: 0 2px;
}

.pgg-vtlm-account-manager__toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(150px, .8fr) minmax(135px, .65fr) minmax(155px, .75fr);
  gap: 8px;
  margin: 0 0 12px;
}

.pgg-vtlm-account-manager__toolbar input,
.pgg-vtlm-account-manager__toolbar select {
  width: 100%;
  min-height: 40px;
  margin: 0;
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 8px;
  color: #fff;
  background: #10131a;
  box-sizing: border-box;
}

.pgg-vtlm-account-manager__summary {
  margin-bottom: 10px;
  background: rgba(255,215,0,.035);
}
.pgg-vtlm-account-manager__summary span b { color: rgba(255,255,255,.78); }

.pgg-vtlm-account-manager__grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pgg-vtlm-account-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 10px;
  background: linear-gradient(105deg, rgba(255,215,0,.035), transparent 38%), rgba(16,19,26,.96);
  box-shadow: 0 7px 18px rgba(0,0,0,.16);
}

.pgg-vtlm-account-card__image {
  width: 150px;
  height: 92px;
  aspect-ratio: auto;
  border-right: 1px solid rgba(255,255,255,.07);
  font-size: 28px;
}

.pgg-vtlm-account-card__body {
  min-width: 0;
  padding: 11px 14px;
}

.pgg-vtlm-account-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pgg-vtlm-account-card h3 {
  min-width: 0;
  margin: 0;
  font-size: 16px;
}

.pgg-vtlm-account-card__visibility {
  position: static;
  flex: 0 0 auto;
  padding: 4px 7px;
  backdrop-filter: none;
}

.pgg-vtlm-account-card__categories {
  margin: 6px 0 0;
}

.pgg-vtlm-account-card__meta {
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  margin-top: 7px;
}

.pgg-vtlm-account-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  align-content: center;
  gap: 6px;
  min-width: 160px;
  margin: 0;
  padding: 10px 12px 10px 4px;
}

.pgg-vtlm-account-card__actions > a,
.pgg-vtlm-account-card__actions > button {
  width: 100%;
  min-height: 31px;
  margin: 0;
  padding: 6px 8px;
  text-align: center;
}

.pgg-vtlm-account-manager__no-results {
  padding: 28px 16px;
  border: 1px dashed rgba(255,215,0,.18);
  border-radius: 10px;
  color: rgba(255,255,255,.55);
  text-align: center;
}

@media (max-width: 980px) {
  .pgg-vtlm-archive__tools,
  .pgg-vtlm-account-manager__toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgg-vtlm-archive-card { grid-template-columns: 210px minmax(0, 1fr); }
  .pgg-vtlm-archive-card__meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding: 9px 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-left: 0;
  }
  .pgg-vtlm-archive-card__stats { flex-direction: row; align-items: center; }
  .pgg-vtlm-archive-card__view { min-width: 125px; }
}

@media (max-width: 760px) {
  .pgg-vtlm-archive__tools,
  .pgg-vtlm-account-manager__toolbar { grid-template-columns: 1fr; }

  .pgg-vtlm-archive-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 92px;
  }
  .pgg-vtlm-archive-card__image { min-height: 92px; }
  .pgg-vtlm-archive-card__body { padding: 10px 11px; }
  .pgg-vtlm-archive-card__byline { font-size: 8px; }
  .pgg-vtlm-archive-card h3 { margin: 4px 0 6px; font-size: 16px; }
  .pgg-vtlm-archive-card p { display: none; }
  .pgg-vtlm-archive-card__meta { grid-column: 1 / -1; }
  .pgg-vtlm-vote-label { display: none; }

  .pgg-vtlm-account-manager__header { padding: 0; }
  .pgg-vtlm-account-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 78px;
  }
  .pgg-vtlm-account-card__image { width: 96px; height: 78px; }
  .pgg-vtlm-account-card__body { padding: 9px 10px; }
  .pgg-vtlm-account-card__meta { flex-wrap: wrap; gap: 5px 10px; }
  .pgg-vtlm-account-card__actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    padding: 7px 8px 8px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
}

/* v0.6.1 — floating archive/setup shells + isolated plugin select styling */

/*
 * All plugin-owned pulldowns get their own class and a deliberately strong style.
 * This prevents Youzify/theme select rules from replacing the Tier List UI.
 */
.pgg-vtlm-select,
.pgg-vtlm .pgg-vtlm-select,
.pgg-vtlm-archive .pgg-vtlm-select,
.pgg-vtlm-account-manager .pgg-vtlm-select,
.pgg-vtlm-category-editor .pgg-vtlm-select {
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 38px 9px 12px !important;
  border: 1px solid rgba(255,215,0,.22) !important;
  border-radius: 8px !important;
  outline: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #10131a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FFD700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.25 6 6.25 11 1.25'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 12px 8px !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.28) !important;
  font: 700 12px/1.2 Verdana, Arial, sans-serif !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark;
  cursor: pointer;
}

.pgg-vtlm-select:hover,
.pgg-vtlm .pgg-vtlm-select:hover,
.pgg-vtlm-archive .pgg-vtlm-select:hover,
.pgg-vtlm-account-manager .pgg-vtlm-select:hover,
.pgg-vtlm-select:focus,
.pgg-vtlm .pgg-vtlm-select:focus,
.pgg-vtlm-archive .pgg-vtlm-select:focus,
.pgg-vtlm-account-manager .pgg-vtlm-select:focus {
  border-color: rgba(255,215,0,.6) !important;
  background-color: #0c1017 !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,.07), inset 0 1px 8px rgba(0,0,0,.3) !important;
}

.pgg-vtlm-select option,
.pgg-vtlm .pgg-vtlm-select option,
.pgg-vtlm-archive .pgg-vtlm-select option,
.pgg-vtlm-account-manager .pgg-vtlm-select option,
.pgg-vtlm-category-editor .pgg-vtlm-select option {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #10131a !important;
  font: 700 12px/1.35 Verdana, Arial, sans-serif !important;
}

.pgg-vtlm-select option:disabled {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
}

/* Community Hub archive: the page itself is the canvas; only rows/controls need panels. */
.pgg-vtlm-archive {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Category archive pages use the same floating hierarchy. */
.pgg-vtlm-taxonomy-header {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * Filter/setup mode is normal document flow instead of a fixed-height app window.
 * The contained app shell returns only after Launch Tier List switches to board mode.
 */
.pgg-vtlm:not(.is-board-active) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pgg-vtlm:not(.is-board-active) > .pgg-vtlm__ambient {
  display: none !important;
}

.pgg-vtlm:not(.is-board-active) .pgg-vtlm-setup {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  scrollbar-width: auto;
}

.pgg-vtlm:not(.is-board-active) .pgg-vtlm-launchbar {
  position: static !important;
}

/* Keep the setup content aligned now that the old outer shell padding is gone. */
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-setup__header,
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-saved-launcher,
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-builder-grid,
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-launchbar,
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-status {
  width: 100%;
}

/* The package nav should float above the builder instead of adding another large panel. */
.pgg-vtlm-package__maker-nav {
  border-color: rgba(255,215,0,.16);
  background: rgba(8,10,15,.48);
  box-shadow: none;
}

@media (max-width: 620px) {
  .pgg-vtlm:not(.is-board-active) .pgg-vtlm-setup {
    padding: 0 !important;
  }
}

/* v0.6.2 — Youzify-proof account manager dropdowns
 * Youzify applies its own native <select> treatment inside profile tabs. The account
 * manager now renders a plugin-owned visual dropdown and keeps the real select hidden
 * only as the filtering state/control source.
 */
.pgg-vtlm-account-manager__toolbar {
  overflow: visible !important;
}

.pgg-vtlm-account-manager__toolbar label,
.pgg-vtlm-account-manager__toolbar > .pgg-vtlm-custom-select {
  min-width: 0;
}

.pgg-vtlm-select--native-hidden,
.pgg-vtlm-account-manager select.pgg-vtlm-select--native-hidden {
  display: none !important;
}

.pgg-vtlm-custom-select {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Verdana, Arial, sans-serif !important;
  z-index: 20;
}

.pgg-vtlm-custom-select.is-open {
  z-index: 5000;
}

.pgg-vtlm-custom-select__button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 40px 9px 12px !important;
  border: 1px solid rgba(255,215,0,.22) !important;
  border-radius: 8px !important;
  outline: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #10131a !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.28) !important;
  font: 700 12px/1.2 Verdana, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.pgg-vtlm-custom-select__button::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 13px !important;
  width: 12px !important;
  height: 8px !important;
  margin-top: -4px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FFD700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.25 6 6.25 11 1.25'/%3E%3C/svg%3E") center/12px 8px no-repeat !important;
  transform: rotate(0deg) !important;
  transition: transform .14s ease !important;
  pointer-events: none !important;
}

.pgg-vtlm-custom-select.is-open .pgg-vtlm-custom-select__button::after {
  transform: rotate(180deg) !important;
}

.pgg-vtlm-custom-select__button:hover,
.pgg-vtlm-custom-select__button:focus,
.pgg-vtlm-custom-select.is-open .pgg-vtlm-custom-select__button {
  border-color: rgba(255,215,0,.65) !important;
  background: #0c1017 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,.07), inset 0 1px 8px rgba(0,0,0,.3) !important;
}

.pgg-vtlm-custom-select__value {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

.pgg-vtlm-custom-select__menu {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  right: 0 !important;
  display: none !important;
  max-height: 280px !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255,215,0,.34) !important;
  border-radius: 8px !important;
  background: #10131a !important;
  box-shadow: 0 16px 35px rgba(0,0,0,.55) !important;
  z-index: 99999 !important;
}

.pgg-vtlm-custom-select.is-open .pgg-vtlm-custom-select__menu {
  display: block !important;
}

.pgg-vtlm-custom-select__option {
  display: block !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  outline: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 12px/1.35 Verdana, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer !important;
}

.pgg-vtlm-custom-select__option + .pgg-vtlm-custom-select__option {
  margin-top: 2px !important;
}

.pgg-vtlm-custom-select__option:hover,
.pgg-vtlm-custom-select__option:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255,215,0,.09) !important;
}

.pgg-vtlm-custom-select__option.is-selected,
.pgg-vtlm-custom-select__option[aria-selected='true'] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255,215,0,.14) !important;
  box-shadow: inset 2px 0 0 #ffd700 !important;
}

/* Deliberately high specificity fallback in case JS is delayed/disabled. */
html body .pgg-vtlm-account-manager[data-pgg-vtlm-account-manager] .pgg-vtlm-account-manager__toolbar select.pgg-vtlm-select {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #10131a !important;
  border-color: rgba(255,215,0,.22) !important;
}


/* Client-side PNG export helpers. The brand image is preloaded in the DOM so
   canvas export can reuse the already-loaded same-origin asset. */
.pgg-vtlm-export-brand-logo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  left: -9999px !important;
  top: -9999px !important;
}

.pgg-vtlm-export-dialog {
  max-width: 520px;
}

.pgg-vtlm-export-option {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  margin: 16px 0 4px;
  border: 1px solid rgba(255, 215, 0, .24);
  border-radius: 10px;
  background: rgba(255, 215, 0, .045);
  cursor: pointer;
}

.pgg-vtlm-export-option input {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  accent-color: #ffd700;
  flex: 0 0 auto;
}

.pgg-vtlm-export-option span {
  display: grid;
  gap: 3px;
  color: #fff;
}

.pgg-vtlm-export-option small {
  color: rgba(255,255,255,.58);
  font-size: 11px;
}


/* =========================================================
   v0.8.0 — floating setup shell + custom tier rank editor
   ========================================================= */
.pgg-vtlm-package__maker,
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-setup {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pgg-vtlm-package__maker-nav {
  padding: 0 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pgg-vtlm-rank-customizer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pgg-vtlm-rank-customizer__heading > div {
  min-width: 0;
}

.pgg-vtlm-rank-customizer__reset {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
}

.pgg-vtlm-rank-customizer__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pgg-vtlm-rank-customizer__row {
  display: grid;
  grid-template-columns: 64px minmax(72px, .7fr) minmax(140px, 1.5fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--pgg-tier-color) 38%, transparent);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pgg-tier-color) 10%, transparent), rgba(7,10,16,.78) 46%);
}

.pgg-vtlm-rank-customizer__preview {
  display: flex;
  min-height: 62px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pgg-tier-color) 42%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pgg-tier-color) 17%, transparent), rgba(3,6,10,.85));
  text-align: center;
}

.pgg-vtlm-rank-customizer__preview strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--pgg-tier-color);
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: 30px;
  line-height: .95;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-rank-customizer__preview span {
  max-width: calc(100% - 6px);
  overflow: hidden;
  color: rgba(255,255,255,.8);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pgg-vtlm-rank-customizer__row label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.pgg-vtlm-rank-customizer__row label > span {
  color: rgba(255,255,255,.52);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pgg-vtlm-rank-customizer__row input {
  width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 7px !important;
  outline: 0;
  color: #fff !important;
  background: rgba(4,7,12,.82) !important;
  box-shadow: none !important;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

.pgg-vtlm-rank-customizer__row input:focus {
  border-color: color-mix(in srgb, var(--pgg-tier-color) 72%, white 5%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pgg-tier-color) 13%, transparent) !important;
}


.pgg-vtlm-rank-customizer__heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pgg-vtlm-rank-customizer__add {
  border-color: rgba(255,215,0,.5) !important;
  color: #ffd700 !important;
}

.pgg-vtlm-rank-customizer__controls {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 5px;
}

.pgg-vtlm-rank-customizer__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  color: rgba(255,255,255,.78);
  background: rgba(4,7,12,.82);
  box-shadow: none;
  font: 800 15px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
}

.pgg-vtlm-rank-customizer__controls button:hover:not(:disabled),
.pgg-vtlm-rank-customizer__controls button:focus-visible:not(:disabled) {
  border-color: rgba(255,215,0,.58);
  color: #ffd700;
  outline: 0;
}

.pgg-vtlm-rank-customizer__controls button:disabled {
  opacity: .25;
  cursor: default;
}

.pgg-vtlm-rank-customizer__controls .pgg-vtlm-rank-customizer__remove:hover:not(:disabled),
.pgg-vtlm-rank-customizer__controls .pgg-vtlm-rank-customizer__remove:focus-visible:not(:disabled) {
  border-color: rgba(255,91,91,.65);
  color: #ff7777;
}

.pgg-vtlm-rank-customizer__note {
  margin-top: 9px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
}

/* Dynamic tier counts: five ranks still fill the board like before; additional
   ranks create a scrollable rank stack on desktop rather than crushing rows. */
.pgg-vtlm__tiers {
  grid-template-rows: repeat(var(--pgg-tier-count, 5), minmax(82px, 1fr));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,.45) rgba(255,255,255,.04);
}

.pgg-vtlm__tiers::-webkit-scrollbar { width: 8px; }
.pgg-vtlm__tiers::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.pgg-vtlm__tiers::-webkit-scrollbar-thumb { background: rgba(255,215,0,.38); border-radius: 999px; }

/* Setup is deliberately shell-less: only the individual filter/rank cards
   provide visual grouping. */
.pgg-vtlm:not(.is-board-active),
.pgg-vtlm:not(.is-board-active) .pgg-vtlm-setup,
.pgg-vtlm-package__maker {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .pgg-vtlm-rank-customizer__row {
    grid-template-columns: 60px minmax(66px, .7fr) minmax(120px, 1.4fr) auto;
  }
}

@media (max-width: 620px) {
  .pgg-vtlm-rank-customizer__heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .pgg-vtlm-rank-customizer__heading-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .pgg-vtlm-rank-customizer__row {
    grid-template-columns: 58px 70px minmax(0, 1fr);
  }
  .pgg-vtlm-rank-customizer__controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}


.pgg-vtlm-tier.has-long-rank .pgg-vtlm-tier__label strong {
  max-width: calc(100% - 8px);
  overflow: hidden;
  font-size: clamp(19px, 2vw, 34px);
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-rank-customizer__row.has-long-rank .pgg-vtlm-rank-customizer__preview strong {
  font-size: 20px;
  letter-spacing: -.035em;
}

.pgg-vtlm-public-tier.has-long-rank .pgg-vtlm-public-tier__label strong {
  max-width: calc(100% - 8px);
  overflow: hidden;
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   v0.9.1 — tier-rank accordion
   ========================================================= */
.pgg-vtlm-rank-customizer {
  overflow: hidden;
}

.pgg-vtlm-rank-customizer > summary {
  list-style: none;
}

.pgg-vtlm-rank-customizer > summary::-webkit-details-marker {
  display: none;
}

.pgg-vtlm-rank-customizer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.pgg-vtlm-rank-customizer__summary:hover,
.pgg-vtlm-rank-customizer__summary:focus-visible {
  background: rgba(255, 215, 0, .035);
  outline: 0;
}

.pgg-vtlm-rank-customizer__summary-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.pgg-vtlm-rank-customizer__summary-copy strong {
  color: #fff;
  font-family: Iceberg, Orbitron, Verdana, sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

.pgg-vtlm-rank-customizer__summary-copy span {
  color: rgba(255,255,255,.5);
  font-size: 9px;
  line-height: 1.35;
}

.pgg-vtlm-rank-customizer__summary-meta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

.pgg-vtlm-rank-customizer__count {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 999px;
  color: #ffd700;
  background: rgba(255,215,0,.055);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pgg-vtlm-rank-customizer__chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid #ffd700;
  border-bottom: 2px solid #ffd700;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.pgg-vtlm-rank-customizer[open] .pgg-vtlm-rank-customizer__chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.pgg-vtlm-rank-customizer__body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.pgg-vtlm-rank-customizer__body .pgg-vtlm-rank-customizer__heading-actions {
  justify-content: flex-end;
  padding-top: 12px;
}

@media (max-width: 620px) {
  .pgg-vtlm-rank-customizer__summary {
    align-items: flex-start;
    padding: 12px;
  }
  .pgg-vtlm-rank-customizer__summary-copy span {
    display: none;
  }
  .pgg-vtlm-rank-customizer__summary-meta {
    gap: 8px;
  }
  .pgg-vtlm-rank-customizer__body {
    padding: 0 10px 10px;
  }
}


/* =========================================================
   v0.9.2 — wrapped ranked tiers + larger hero cards
   ========================================================= */

/* Ranked heroes are no longer a one-line strip. Each tier wraps naturally
   and becomes taller as additional rows are needed. The unranked pool keeps
   its purpose-built horizontal scrolling rail. */
.pgg-vtlm.is-board-active .pgg-vtlm__tiers {
  grid-template-rows: none !important;
  grid-auto-rows: minmax(150px, auto) !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto;
}

.pgg-vtlm.is-board-active .pgg-vtlm-tier {
  min-height: 150px;
  height: auto !important;
  align-items: stretch;
}

.pgg-vtlm.is-board-active .pgg-vtlm-tier__dropzone {
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  scrollbar-width: none !important;
  overscroll-behavior-x: none !important;
}

.pgg-vtlm.is-board-active .pgg-vtlm-tier__dropzone::-webkit-scrollbar {
  display: none !important;
}

/* The pool is intentionally still one horizontal row. */
.pgg-vtlm.is-board-active .pgg-vtlm-pool__dropzone {
  flex-wrap: nowrap !important;
}

/* Public/shared tier lists should wrap the same way rather than showing an
   internal horizontal scrollbar. */
.pgg-vtlm-public-tier {
  height: auto;
  min-height: 150px;
  align-items: stretch;
}

.pgg-vtlm-public-tier__heroes {
  --pgg-card-width: 89px;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 8px;
  padding: 9px 11px;
  scrollbar-width: none;
}

.pgg-vtlm-public-tier__heroes::-webkit-scrollbar {
  display: none;
}

/* In Studio Mode the app still owns the viewport, so the rank stack itself
   can scroll vertically if wrapped rows make the complete board taller than
   the screen. There is never a horizontal tier scrollbar. */
.pgg-vtlm.is-studio .pgg-vtlm__workspace {
  overflow: hidden;
}

.pgg-vtlm.is-studio .pgg-vtlm__tiers {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 2px;
}

@media (max-width: 800px) {
  .pgg-vtlm:not(.is-studio) .pgg-vtlm__tiers {
    overflow: visible !important;
  }

  .pgg-vtlm:not(.is-studio) .pgg-vtlm-tier {
    min-height: 136px;
  }

  .pgg-vtlm-tier__dropzone {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
    touch-action: pan-y;
  }

  .pgg-vtlm-public-tier__heroes {
    --pgg-card-width: 72px;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  /* The larger unranked cards need a slightly taller fixed mobile dock. */
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    padding-bottom: calc(178px + env(safe-area-inset-bottom, 0px));
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    height: 166px;
    min-height: 166px;
    flex-basis: 166px;
  }
}

@media (max-width: 520px) {
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    padding-bottom: calc(174px + env(safe-area-inset-bottom, 0px));
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    height: 162px;
    min-height: 162px;
    flex-basis: 162px;
  }
}


/* =========================================================
   v0.9.3 — true auto-growing ranked tiers
   ========================================================= */

/* Normal mode is page-flow content. The board and rank stack are not allowed
   to become their own vertical scroll areas: a tier simply grows taller when
   its wrapped cards need another line. */
.pgg-vtlm.is-board-active:not(.is-studio) {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board,
.pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm__workspace {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm__tiers {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  grid-auto-rows: unset !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  padding-right: 0 !important;
}

/* Each rank derives its height from the wrapped dropzone content. */
.pgg-vtlm.is-board-active .pgg-vtlm-tier {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.pgg-vtlm.is-board-active .pgg-vtlm-tier__dropzone {
  height: auto !important;
  min-height: 150px !important;
  max-height: none !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

/* Remove any rank-stack scrollbar styling left by the dynamic-rank system. */
.pgg-vtlm.is-board-active .pgg-vtlm__tiers::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Fullscreen still has a finite viewport. Keep the ranks themselves fully
   expanded, and if the complete board exceeds the screen, scroll the workspace
   as one surface rather than making the rank stack or individual tier scroll. */
.pgg-vtlm.is-studio .pgg-vtlm__workspace {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
}

.pgg-vtlm.is-studio .pgg-vtlm__tiers {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  grid-auto-rows: unset !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.pgg-vtlm.is-studio .pgg-vtlm-tier,
.pgg-vtlm.is-studio .pgg-vtlm-tier__dropzone {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The unranked pool is intentionally the only hero area that remains a
   horizontal scrolling rail. */
.pgg-vtlm.is-board-active .pgg-vtlm-pool__scroller {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}


/* v0.9.5 — persistent user sound toggle */
.pgg-vtlm__button--sound[aria-pressed="true"] {
  border-color: rgba(255,215,0,.46);
  color: #fff4b3;
}
.pgg-vtlm__button--sound.is-muted,
.pgg-vtlm__button--sound[aria-pressed="false"] {
  background: rgba(12,15,21,.88);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.62);
}
.pgg-vtlm__button--sound .pgg-vtlm__button-icon { line-height: 1; }

/* =========================================================
   v0.10.0 — recovery autosave, share UX, loading diagnostics,
   normal rank editing, and mobile whole-card drag
   ========================================================= */

.pgg-vtlm-list-details__grid {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.4fr);
  gap: 12px;
  margin-top: 10px;
}

.pgg-vtlm-list-details__grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.pgg-vtlm-list-details__grid label > span {
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pgg-vtlm-list-details__grid input,
.pgg-vtlm-list-details__grid textarea {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,215,0,.22);
  border-radius: 8px;
  outline: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(7,10,15,.92);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.28);
  font: 600 12px/1.4 Verdana, Arial, sans-serif;
  box-sizing: border-box;
}

.pgg-vtlm-list-details__grid textarea {
  min-height: 62px;
  resize: vertical;
}

.pgg-vtlm-list-details__grid input:focus,
.pgg-vtlm-list-details__grid textarea:focus {
  border-color: rgba(255,215,0,.68);
  box-shadow: 0 0 0 3px rgba(255,215,0,.07), inset 0 1px 8px rgba(0,0,0,.3);
}

.pgg-vtlm-autosave-note,
.pgg-vtlm-board-autosave {
  color: rgba(255,255,255,.42);
  font-size: 9px;
  font-weight: 700;
}

.pgg-vtlm-autosave-note {
  margin: 8px 2px 0;
}

.pgg-vtlm-board-autosave {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 0;
  border: 0;
  line-height: 1.35;
  white-space: normal;
}

[data-pgg-vtlm-autosave-status].is-saving { color: #f0cf57; }
[data-pgg-vtlm-autosave-status].is-saved { color: #79d99a; }
[data-pgg-vtlm-autosave-status].is-error { color: #ffb36f; }

.pgg-vtlm-setup {
  position: relative;
}

.pgg-vtlm-loading-overlay[hidden] { display: none !important; }

.pgg-vtlm-loading-overlay {
  position: fixed;
  z-index: 2147482600;
  left: 50%;
  top: 50%;
  display: flex;
  min-width: min(340px, calc(100vw - 28px));
  max-width: 460px;
  padding: 22px 24px;
  border: 1px solid rgba(255,215,0,.38);
  border-radius: 14px;
  background: rgba(5,8,13,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 35px rgba(255,215,0,.08);
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.pgg-vtlm-loading-overlay strong { color: #fff; font-size: 14px; }
.pgg-vtlm-loading-overlay small { color: rgba(255,255,255,.52); font-size: 10px; }

.pgg-vtlm-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255,215,0,.16);
  border-top-color: #ffd700;
  border-radius: 50%;
  animation: pgg-vtlm-spin .72s linear infinite;
}

@keyframes pgg-vtlm-spin { to { transform: rotate(360deg); } }

.pgg-vtlm-setup.is-loading-heroes .pgg-vtlm-setup__header,
.pgg-vtlm-setup.is-loading-heroes .pgg-vtlm-saved-launcher,
.pgg-vtlm-setup.is-loading-heroes .pgg-vtlm-builder-grid,
.pgg-vtlm-setup.is-loading-heroes .pgg-vtlm-launchbar {
  opacity: .38;
  filter: saturate(.7);
  transition: opacity .18s ease;
  pointer-events: none;
}

.pgg-vtlm-share-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 16px 0 4px;
}

.pgg-vtlm-share-link[hidden] { display: none !important; }
.pgg-vtlm-share-link label { min-width: 0; }
.pgg-vtlm-share-link input {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgg-vtlm-archive-card__actions {
  display: grid;
  gap: 7px;
}

.pgg-vtlm-archive-card__copy,
.pgg-vtlm-public__share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: rgba(255,255,255,.78);
  background: rgba(12,16,23,.88);
  font: 800 10px/1.2 Verdana, Arial, sans-serif;
  cursor: pointer;
}

.pgg-vtlm-archive-card__copy:hover,
.pgg-vtlm-archive-card__copy:focus-visible,
.pgg-vtlm-public__share-button:hover,
.pgg-vtlm-public__share-button:focus-visible,
[data-pgg-vtlm-copy-link].is-copied {
  border-color: rgba(255,215,0,.52);
  color: #ffd700;
  background: rgba(255,215,0,.07);
}

.pgg-vtlm-public__stats {
  flex-wrap: wrap;
}

.pgg-vtlm-public__share-button {
  min-height: 30px;
  padding: 6px 9px;
}

.pgg-vtlm__button--mobile-menu {
  display: none;
}

.pgg-vtlm-pool-hint--mobile { display: none; }

@media (max-width: 800px) {
  .pgg-vtlm-list-details__grid { grid-template-columns: 1fr; }

  .pgg-vtlm__header {
    align-items: stretch;
  }

  .pgg-vtlm__controls {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  .pgg-vtlm__controls .pgg-vtlm__button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .pgg-vtlm__button--mobile-menu {
    display: inline-flex !important;
  }

  .pgg-vtlm-mobile-extra {
    display: none !important;
  }

  .pgg-vtlm.is-mobile-tools-open .pgg-vtlm-mobile-extra {
    display: inline-flex !important;
  }

  .pgg-vtlm.is-mobile-tools-open .pgg-vtlm__button--mobile-menu {
    border-color: rgba(255,215,0,.5);
    color: #ffd700;
  }

  .pgg-vtlm-board-autosave {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    border: 0;
  }

  /* The whole hero card is a reliable touch target now. Scrolling that begins
     on a card is handled manually in JS until the brief hold becomes a drag. */
  .pgg-vtlm-card,
  .pgg-vtlm-pool .pgg-vtlm-card,
  .pgg-vtlm-tier .pgg-vtlm-card {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* The old three-dot grip is no longer required on phones; hiding it removes
     the confusing overlap while desktop retains normal drag behavior. */
  .pgg-vtlm-card__grip {
    display: none !important;
  }

  .pgg-vtlm-pool__heading .pgg-vtlm-pool-hint--desktop { display: none !important; }
  .pgg-vtlm-pool__heading .pgg-vtlm-pool-hint--mobile {
    display: inline !important;
    margin-left: 6px;
    color: rgba(255,255,255,.52);
    font-size: 8px;
    font-weight: 600;
  }

  .pgg-vtlm-share-link { grid-template-columns: 1fr; }
  .pgg-vtlm-archive-card__actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .pgg-vtlm__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pgg-vtlm-loading-overlay {
    padding: 18px 16px;
  }

  .pgg-vtlm-pool__heading .pgg-vtlm-pool-hint--mobile {
    display: block !important;
    margin: 2px 0 0;
  }
}


/* v0.10.1 - searchable Saved + Recovery Draft loader */
.pgg-vtlm-saved-launcher--button { grid-template-columns: minmax(0, 1fr) auto; }
.pgg-vtlm-load-dialog {
  width: min(760px, calc(100vw - 30px));
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}
.pgg-vtlm-load-dialog__search { display: block; margin: 6px 0 12px; }
.pgg-vtlm-load-dialog__search input { width: 100% !important; min-height: 44px; }
.pgg-vtlm-load-dialog__list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 0;
  min-height: 80px;
}
.pgg-vtlm-load-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14,19,28,.98), rgba(8,12,19,.98));
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.pgg-vtlm-load-item:hover,
.pgg-vtlm-load-item:focus-visible {
  border-color: rgba(255,215,0,.58);
  background: linear-gradient(180deg, rgba(25,28,25,.99), rgba(11,14,18,.99));
  transform: translateY(-1px);
  outline: none;
}
.pgg-vtlm-load-item.is-search-hidden { display: none !important; }
.pgg-vtlm-load-item--draft {
  border-color: rgba(255,215,0,.42);
  background: linear-gradient(135deg, rgba(45,38,12,.82), rgba(12,16,22,.98) 58%);
}
.pgg-vtlm-load-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #ffd93d;
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.22);
  font-weight: 800;
}
.pgg-vtlm-load-item__body { min-width: 0; display: grid; gap: 4px; }
.pgg-vtlm-load-item__body strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pgg-vtlm-load-item__body small { color: rgba(255,255,255,.56); font-size: 10px; line-height: 1.35; }
.pgg-vtlm-load-item__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,.35);
  color: #ffd93d;
  background: rgba(255,215,0,.07);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
}
.pgg-vtlm-load-item__badge--saved {
  border-color: rgba(123,179,255,.25);
  color: rgba(255,255,255,.72);
  background: rgba(90,130,190,.08);
}
.pgg-vtlm-load-item__open { color: #ffd93d; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pgg-vtlm-load-dialog__empty {
  padding: 28px 14px;
  text-align: center;
  color: rgba(255,255,255,.55);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 10px;
}
.pgg-vtlm-load-dialog__note { margin-top: 10px; color: rgba(255,255,255,.43); font-size: 10px; line-height: 1.45; }
@media (max-width: 680px) {
  .pgg-vtlm-saved-launcher--button { grid-template-columns: 1fr; }
  .pgg-vtlm-saved-launcher--button .pgg-vtlm-saved-launcher__actions,
  .pgg-vtlm-saved-launcher--button .pgg-vtlm-launch-button { width: 100%; }
  .pgg-vtlm-load-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 16px; }
  .pgg-vtlm-load-item { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .pgg-vtlm-load-item__icon { width: 32px; height: 32px; }
  .pgg-vtlm-load-item__badge { grid-column: 2; justify-self: start; }
  .pgg-vtlm-load-item__open { grid-column: 3; grid-row: 1 / span 2; }
}


/* v0.10.2 — editor header collision fix */
.pgg-vtlm.is-board-active .pgg-vtlm__branding { min-width: 0; }
.pgg-vtlm.is-board-active .pgg-vtlm-board-title-row { min-width: 0; }
.pgg-vtlm.is-board-active .pgg-vtlm__controls { min-width: 0; }
.pgg-vtlm.is-board-active .pgg-vtlm__controls .pgg-vtlm__button { flex: 0 0 auto; }
.pgg-vtlm.is-studio .pgg-vtlm__header { max-width: 100%; }


/* ============================================================
   v0.10.3 - viewport-safe modals + reliable mobile action menu
   ============================================================ */

/* Keep modal overlays attached to the browser viewport, never the tall builder. */
.pgg-vtlm-name-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh;
  padding: clamp(10px, 2.5vw, 24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
}

.pgg-vtlm-name-modal[hidden] {
  display: none !important;
}

.pgg-vtlm-name-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
}

.pgg-vtlm-name-modal__dialog {
  position: relative !important;
  inset: auto !important;
  margin: auto !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.pgg-vtlm-save-dialog {
  width: min(720px, calc(100vw - 20px)) !important;
}

.pgg-vtlm-export-dialog,
.pgg-vtlm-share-dialog {
  width: min(560px, calc(100vw - 20px)) !important;
}

.pgg-vtlm-load-dialog {
  width: min(760px, calc(100vw - 20px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

body.pgg-vtlm-modal-open .pgg-vtlm,
body.pgg-vtlm-modal-open .pgg-vtlm-package {
  overflow: visible !important;
}

/* Desktop: the extra tool wrapper behaves as though it is not there. */
.pgg-vtlm-mobile-tools-panel {
  display: contents;
}

/* Explicitly undo the maker's old <=900px icon-only rule. */
@media (max-width: 900px) {
  .pgg-vtlm__controls .pgg-vtlm__button {
    font-size: 11px !important;
    line-height: 1.1 !important;
    color: #f0f0f0 !important;
  }
  .pgg-vtlm__controls .pgg-vtlm__button-icon {
    font-size: 14px !important;
  }
  .pgg-vtlm__controls .pgg-vtlm__button--save {
    color: #ffd700 !important;
  }
}

@media (max-width: 800px) {
  .pgg-vtlm__header {
    overflow: visible !important;
  }

  .pgg-vtlm__controls {
    position: relative !important;
    z-index: 180 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .pgg-vtlm__controls > .pgg-vtlm__button {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 7px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .pgg-vtlm__button--mobile-menu {
    display: inline-flex !important;
  }

  .pgg-vtlm-mobile-tools-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 2147481000 !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: min(286px, calc(100vw - 28px)) !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 215, 0, .42) !important;
    border-radius: 12px !important;
    background: rgba(7, 10, 16, .985) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .pgg-vtlm.is-mobile-tools-open .pgg-vtlm-mobile-tools-panel {
    display: grid !important;
  }

  .pgg-vtlm-mobile-tools-panel .pgg-vtlm-mobile-extra {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
    color: #f0f0f0 !important;
  }

  .pgg-vtlm.is-mobile-tools-open .pgg-vtlm__button--mobile-menu {
    border-color: rgba(255,215,0,.65) !important;
    color: #ffd700 !important;
    background: rgba(255,215,0,.08) !important;
  }

  .pgg-vtlm-name-modal {
    padding: 8px !important;
  }

  .pgg-vtlm-name-modal__dialog,
  .pgg-vtlm-save-dialog,
  .pgg-vtlm-export-dialog,
  .pgg-vtlm-share-dialog,
  .pgg-vtlm-load-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 430px) {
  .pgg-vtlm__controls > .pgg-vtlm__button {
    min-height: 38px !important;
    padding-inline: 5px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }
  .pgg-vtlm__controls .pgg-vtlm__button-icon {
    font-size: 12px !important;
  }
}


/* ============================================================
   v0.10.4 — single Options menu for editor controls
   ============================================================ */
.pgg-vtlm.is-board-active .pgg-vtlm__header {
  overflow: visible !important;
}

.pgg-vtlm.is-board-active .pgg-vtlm__branding {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.pgg-vtlm.is-board-active .pgg-vtlm__controls.pgg-vtlm__controls--options {
  position: relative !important;
  z-index: 500 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.pgg-vtlm .pgg-vtlm__button--options,
.pgg-vtlm .pgg-vtlm__controls .pgg-vtlm__button--mobile-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 106px !important;
  min-height: 40px !important;
  padding: 9px 13px !important;
  gap: 8px !important;
  border-color: rgba(255, 215, 0, .38) !important;
  color: #f5f5f5 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
  font: 800 11px/1 Verdana, Arial, sans-serif !important;
  white-space: nowrap !important;
}

.pgg-vtlm-options-icon {
  display: inline-flex;
  flex: 0 0 17px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 17px;
  height: 14px;
}

.pgg-vtlm-options-icon i {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 5px rgba(255,215,0,.14);
}

.pgg-vtlm .pgg-vtlm-options-panel.pgg-vtlm-mobile-tools-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2147483200 !important;
  display: none !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  width: 250px !important;
  max-width: calc(100vw - 20px) !important;
  padding: 8px !important;
  border: 1px solid rgba(255,215,0,.44) !important;
  border-radius: 12px !important;
  background: rgba(6,9,14,.985) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.045) !important;
  overflow: visible !important;
}

.pgg-vtlm.is-mobile-tools-open .pgg-vtlm-options-panel.pgg-vtlm-mobile-tools-panel {
  display: grid !important;
}

.pgg-vtlm .pgg-vtlm-options-panel .pgg-vtlm-mobile-extra,
.pgg-vtlm .pgg-vtlm-options-panel .pgg-vtlm__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  gap: 10px !important;
  border-radius: 8px !important;
  color: #f0f0f0 !important;
  font: 800 11px/1.15 Verdana, Arial, sans-serif !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.pgg-vtlm .pgg-vtlm-options-panel .pgg-vtlm__button--save {
  color: #ffd700 !important;
  border-color: rgba(255,215,0,.34) !important;
}

.pgg-vtlm .pgg-vtlm-options-panel .pgg-vtlm__button--download {
  color: #eef7ff !important;
}

.pgg-vtlm.is-mobile-tools-open .pgg-vtlm__button--options {
  border-color: rgba(255,215,0,.72) !important;
  color: #ffd700 !important;
  background: rgba(255,215,0,.08) !important;
}

/* With one header control there is no reason to force the editor header into
   a second toolbar row at laptop widths. */
@media (min-width: 801px) {
  .pgg-vtlm.is-board-active .pgg-vtlm__header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }
}

@media (max-width: 800px) {
  .pgg-vtlm.is-board-active .pgg-vtlm__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .pgg-vtlm.is-board-active .pgg-vtlm__branding {
    width: 100% !important;
  }

  .pgg-vtlm.is-board-active .pgg-vtlm__controls.pgg-vtlm__controls--options {
    align-self: start !important;
    width: auto !important;
  }

  .pgg-vtlm .pgg-vtlm__button--options,
  .pgg-vtlm .pgg-vtlm__controls .pgg-vtlm__button--mobile-menu {
    min-width: 94px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  .pgg-vtlm .pgg-vtlm-options-panel.pgg-vtlm-mobile-tools-panel {
    width: min(250px, calc(100vw - 18px)) !important;
    top: calc(100% + 6px) !important;
  }
}

@media (max-width: 430px) {
  .pgg-vtlm .pgg-vtlm__button--options,
  .pgg-vtlm .pgg-vtlm__controls .pgg-vtlm__button--mobile-menu {
    min-width: 88px !important;
    font-size: 9px !important;
  }
  .pgg-vtlm .pgg-vtlm-options-panel .pgg-vtlm__button {
    min-height: 40px !important;
    font-size: 10px !important;
  }
}


/* ============================================================
   v0.10.5 - full-width opaque mobile hero dock + non-sticky hub nav
   ============================================================ */

@media (max-width: 800px) {
  /* The hub navigation belongs to normal document flow on phones. It should
     not float over the site's own sticky header or the active tier board. */
  .pgg-vtlm-package__maker-nav {
    position: static !important;
    top: auto !important;
    inset: auto !important;
    z-index: auto !important;
  }

  /* Reserve enough document space for the viewport-fixed dock. */
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    padding-bottom: calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Make Unranked Heroes a true viewport dock rather than a translucent panel
     inside the WordPress content column. */
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    position: fixed !important;
    z-index: 2147482000 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset-inline: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: calc(164px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(164px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(164px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: #05070b !important;
    background-image: none !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.88), 0 -1px 0 rgba(255,215,0,.34) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    isolation: isolate;
    overflow: hidden !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool::before {
    display: none !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__heading {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 5px 10px !important;
    gap: 8px !important;
    background: #080b10 !important;
    border-bottom: 1px solid rgba(255,215,0,.24) !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__heading > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: block !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__heading strong {
    display: block !important;
    overflow: hidden !important;
    color: #ffd700 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* The instructional hint is useful on wider layouts but consumes too much
     of a phone dock. The whole card interaction is now direct anyway. */
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool-hint--desktop,
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool-hint--mobile,
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__heading > div:first-child > span {
    display: none !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__count {
    flex: 0 0 auto !important;
    max-width: 42vw !important;
    overflow: hidden !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__count span {
    font-size: 11px !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__rail {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    background: #05070b !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__scroller {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    background: #05070b !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__dropzone {
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px 8px 9px !important;
    align-items: center !important;
    align-content: center !important;
    background: #05070b !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool__arrow {
    width: 32px !important;
    min-width: 32px !important;
    height: 100% !important;
    background: #070a0f !important;
  }
}

@media (max-width: 520px) {
  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-board {
    padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pgg-vtlm.is-board-active:not(.is-studio) .pgg-vtlm-pool {
    height: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pgg-vtlm-package__maker-nav {
    gap: 8px !important;
    align-items: center !important;
  }

  .pgg-vtlm-package__back {
    min-width: 0 !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
  }

  .pgg-vtlm-package__maker-label strong {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}


/* v0.10.6 — recovery drafts in My Tier Lists */
.pgg-vtlm-account-card--draft {
  border-color: rgba(255, 205, 55, .34);
  background: linear-gradient(90deg, rgba(71, 53, 8, .16), rgba(9, 13, 21, .96) 28%);
}
.pgg-vtlm-account-card__image--draft {
  background: radial-gradient(circle at 50% 42%, rgba(255, 215, 62, .18), rgba(5, 8, 13, .98) 72%);
}
.pgg-vtlm-account-card__image--draft span {
  color: #f5d449;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}
.pgg-vtlm-account-card__visibility.is-draft {
  color: #f7d952;
  border-color: rgba(247, 217, 82, .45);
  background: rgba(91, 67, 7, .22);
}


/* =========================================================
   v0.10.7 — reliable My Tier Lists faceted filtering
   ========================================================= */
.pgg-vtlm-account-manager [data-pgg-vtlm-account-item][hidden],
.pgg-vtlm-account-manager [data-pgg-vtlm-account-item].is-filtered-out {
  display: none !important;
}

.pgg-vtlm-account-manager [data-pgg-vtlm-account-no-results][hidden] {
  display: none !important;
}

.pgg-vtlm-account-manager .pgg-vtlm-custom-select__option[hidden],
.pgg-vtlm-account-manager .pgg-vtlm-custom-select__option.is-unavailable {
  display: none !important;
}


/* SEO breadcrumb fallback for tier-list singles/category archives.
   When Blocksy or Yoast already renders a breadcrumb elsewhere on the page,
   JS hides this fallback to avoid duplicate visible trails. */
.pgg-vtlm-visible-breadcrumbs {
  width: 100%;
  margin: 0 0 18px;
  color: rgba(255,255,255,.58);
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
}
.pgg-vtlm-visible-breadcrumbs[hidden] { display: none !important; }
.pgg-vtlm-visible-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pgg-vtlm-visible-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.pgg-vtlm-visible-breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin-left: 7px;
  color: rgba(255,215,0,.55);
  font-size: 13px;
  line-height: 1;
}
.pgg-vtlm-visible-breadcrumbs a {
  color: #ffd700;
  text-decoration: none;
  transition: color .16s ease, opacity .16s ease;
}
.pgg-vtlm-visible-breadcrumbs a:hover,
.pgg-vtlm-visible-breadcrumbs a:focus-visible {
  color: #fff0a1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pgg-vtlm-visible-breadcrumbs [aria-current="page"] {
  max-width: min(460px, 70vw);
  overflow: hidden;
  color: rgba(255,255,255,.82);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pgg-vtlm-visible-breadcrumbs {
    margin-bottom: 12px;
    font-size: 9px;
  }
  .pgg-vtlm-visible-breadcrumbs ol { gap: 5px; }
  .pgg-vtlm-visible-breadcrumbs li:not(:last-child)::after { margin-left: 5px; }
  .pgg-vtlm-visible-breadcrumbs [aria-current="page"] { max-width: 58vw; }
}

/* =========================================================
   v0.12.0 — Like / Dislike reactions + public creator profiles
   ========================================================= */
.pgg-vtlm-reactions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pgg-vtlm-reactions__buttons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pgg-vtlm-reaction-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.045);
  box-shadow: none;
  font: 800 10px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.pgg-vtlm-reaction-button:hover,
.pgg-vtlm-reaction-button:focus-visible {
  border-color: rgba(255,215,0,.5);
  color: #fff;
  background: rgba(255,215,0,.07);
  transform: translateY(-1px);
}

.pgg-vtlm-reaction-button--like.is-active {
  border-color: rgba(255,215,0,.75);
  color: #ffd700;
  background: rgba(255,215,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.08), 0 0 18px rgba(255,215,0,.06);
}

.pgg-vtlm-reaction-button--dislike.is-active {
  border-color: rgba(255,92,92,.68);
  color: #ff8888;
  background: rgba(255,74,74,.11);
  box-shadow: inset 0 0 0 1px rgba(255,90,90,.07);
}

.pgg-vtlm-reaction-button:disabled {
  opacity: .46;
  cursor: default;
  transform: none;
}

.pgg-vtlm-reaction-button__icon {
  font-size: 14px;
  line-height: 1;
}

.pgg-vtlm-reaction-button b {
  color: inherit;
  font: 900 11px/1 Verdana, Arial, sans-serif;
}

.pgg-vtlm-reactions__prompt {
  flex: 1 0 100%;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.pgg-vtlm-reactions__score {
  color: rgba(255,255,255,.58);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.pgg-vtlm-reactions--full {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.pgg-vtlm-public__stats {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pgg-vtlm-public__share-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pgg-vtlm-archive-card__stats .pgg-vtlm-reactions--compact {
  width: 100%;
}

.pgg-vtlm-archive-card__stats .pgg-vtlm-reactions__buttons {
  width: 100%;
}

.pgg-vtlm-archive-card__stats .pgg-vtlm-reaction-button {
  flex: 1 1 0;
  min-width: 0;
}

.pgg-vtlm-view-count {
  white-space: nowrap;
}

.pgg-vtlm-account-card__reaction-results {
  color: rgba(255,255,255,.63);
  font-weight: 700;
  white-space: normal;
}

/* Another member's Youzify tab uses the public archive presentation instead
   of exposing management controls. Let the profile itself remain the canvas. */
.pgg-vtlm-profile-tier-lists {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pgg-vtlm-profile-tier-lists__header {
  margin-bottom: 14px;
}

.pgg-vtlm-profile-tier-lists__toolbar {
  grid-template-columns: minmax(220px, 1.7fr) minmax(160px, 1fr) minmax(160px, .9fr) !important;
}

.pgg-vtlm-profile-tier-lists__list {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .pgg-vtlm-profile-tier-lists__toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
  .pgg-vtlm-profile-tier-lists__toolbar > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .pgg-vtlm-profile-tier-lists__toolbar {
    grid-template-columns: 1fr !important;
  }
  .pgg-vtlm-profile-tier-lists__toolbar > :first-child {
    grid-column: auto;
  }

  .pgg-vtlm-reaction-button {
    min-height: 32px;
    padding: 6px 8px;
  }

  .pgg-vtlm-reaction-button__label {
    display: none;
  }

  .pgg-vtlm-reactions--full {
    width: 100%;
  }

  .pgg-vtlm-public__share-actions {
    width: 100%;
  }

  .pgg-vtlm-public__share-actions > button {
    flex: 1 1 0;
  }
}

.pgg-vtlm-archive-card__byline strong a,
.pgg-vtlm-public__byline strong a {
  color: inherit !important;
  text-decoration: none !important;
}
.pgg-vtlm-archive-card__byline strong a:hover,
.pgg-vtlm-public__byline strong a:hover {
  color: #ffd700 !important;
}


/* ============================================================
   v0.12.1 — true visual-viewport-safe dialogs
   Mobile browser chrome and virtual keyboards can make 100vh/100dvh
   larger than the actually visible screen. JS keeps these variables
   synced to window.visualViewport when supported.
   ============================================================ */
:root {
  --pgg-vtlm-vv-top: 0px;
  --pgg-vtlm-vv-left: 0px;
  --pgg-vtlm-vv-width: 100vw;
  --pgg-vtlm-vv-height: 100dvh;
  --pgg-vtlm-modal-max-height: 88dvh;
}

html body .pgg-vtlm-name-modal {
  position: fixed !important;
  inset: auto !important;
  top: var(--pgg-vtlm-vv-top) !important;
  left: var(--pgg-vtlm-vv-left) !important;
  width: var(--pgg-vtlm-vv-width) !important;
  height: var(--pgg-vtlm-vv-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: clamp(8px, 2vw, 20px) !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .pgg-vtlm-name-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
}

html body .pgg-vtlm-name-modal__dialog,
html body .pgg-vtlm-save-dialog,
html body .pgg-vtlm-export-dialog,
html body .pgg-vtlm-share-dialog,
html body .pgg-vtlm-load-dialog {
  position: relative !important;
  inset: auto !important;
  max-height: var(--pgg-vtlm-modal-max-height) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Save is the tallest dialog. Keep its actions visible at all times and
   scroll only the form body. */
html body .pgg-vtlm-save-dialog {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(920px, calc(var(--pgg-vtlm-vv-width) - 24px)) !important;
}

html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  padding: 22px 24px 8px !important;
}

html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__actions--fixed {
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(255, 215, 0, .20) !important;
  background: #0b0e14 !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .28) !important;
}

@media (max-width: 800px) {
  html body .pgg-vtlm-name-modal {
    padding: 6px !important;
  }

  html body .pgg-vtlm-name-modal__dialog,
  html body .pgg-vtlm-export-dialog,
  html body .pgg-vtlm-share-dialog,
  html body .pgg-vtlm-load-dialog {
    width: calc(var(--pgg-vtlm-vv-width) - 12px) !important;
    max-width: calc(var(--pgg-vtlm-vv-width) - 12px) !important;
    max-height: var(--pgg-vtlm-modal-max-height) !important;
  }

  html body .pgg-vtlm-save-dialog {
    width: calc(var(--pgg-vtlm-vv-width) - 12px) !important;
    max-width: calc(var(--pgg-vtlm-vv-width) - 12px) !important;
    max-height: var(--pgg-vtlm-modal-max-height) !important;
    border-radius: 12px !important;
  }

  html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__scroll {
    padding: 16px 14px 8px !important;
  }

  html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__actions--fixed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__actions--fixed > button {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  html body .pgg-vtlm-save-dialog .pgg-vtlm-name-modal__dialog h3,
  html body .pgg-vtlm-save-dialog h3 {
    font-size: 25px !important;
  }
  html body .pgg-vtlm-save-dialog .pgg-vtlm-publish-fields {
    gap: 12px !important;
  }
}