/*
 * ==========================================================
 * VIBE PACKS UI 2.0
 * ==========================================================
 */

/* VIBE_PACKS_UI_V20 */

.vpk{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.vpk-top{
  display:flex;

  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;

  gap:10px;
}


.vpk-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}


.vpk-balance{
  color:var(--vb-muted);

  font-size:14px;
}


.vpk-balance strong{
  color:var(--vb-text);

  font-size:14px;
}


.vpk-pack{
  display:grid;

  grid-template-columns:
    minmax(230px,330px)
    minmax(0,1fr);

  gap:16px;

  align-items:start;
}


.vpk-pack-art-card{
  overflow:hidden;
}


.vpk-pack-art{
  position:relative;

  min-height:420px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  justify-content:space-between;

  padding:25px;

  border:
    1px solid
    rgba(169,107,255,.25);

  border-radius:17px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(189,117,255,.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 78%,
      rgba(87,120,255,.22),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #17131f,
      #0c0e14 62%,
      #11141d
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255,255,255,.02);
}


.vpk-pack-art::before{
  content:"";

  position:absolute;

  width:230px;
  height:230px;

  top:70px;
  left:50%;

  transform:
    translateX(-50%)
    rotate(45deg);

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:44px;

  background:
    rgba(255,255,255,.025);

  box-shadow:
    0
    0
    80px
    rgba(156,98,255,.15);

  pointer-events:none;
}


.vpk-pack-art::after{
  content:"V";

  position:absolute;

  inset:0;

  display:grid;
  place-items:center;

  color:
    rgba(255,255,255,.10);

  font-size:145px;
  font-weight:950;

  letter-spacing:-.08em;

  transform:
    translateY(-6px);

  pointer-events:none;
}


.vpk-pack-kicker,
.vpk-pack-bottom{
  position:relative;
  z-index:1;
}


.vpk-pack-kicker{
  color:
    rgba(255,255,255,.50);

  font-size:14px;
  font-weight:850;

  letter-spacing:.18em;
}


.vpk-pack-season{
  margin-top:7px;

  color:
    var(--vb-text);

  font-size:19px;
  font-weight:900;

  letter-spacing:-.04em;
}


.vpk-pack-bottom{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:12px;
}


.vpk-pack-count{
  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;
}


.vpk-pack-id{
  color:
    rgba(255,255,255,.32);

  font-size:13px;

  word-break:break-all;
}


.vpk-summary{
  display:flex;
  flex-direction:column;
  gap:14px;
}


.vpk-title{
  margin:
    4px
    0
    0;

  color:
    var(--vb-text);

  font-size:
    clamp(
      26px,
      2.6vw,
      39px
    );

  line-height:1.08;

  font-weight:900;

  letter-spacing:-.045em;
}


.vpk-description{
  margin-top:9px;

  max-width:720px;

  color:
    var(--vb-muted);

  font-size:14px;
  line-height:1.6;
}


.vpk-status{
  display:inline-flex;

  align-items:center;

  width:max-content;

  margin-top:10px;

  padding:
    5px
    8px;

  border:
    1px solid
    var(--vb-border);

  border-radius:999px;

  color:
    var(--vb-success);

  background:
    rgba(255,255,255,.018);

  font-size:13px;
  font-weight:850;

  letter-spacing:.08em;
  text-transform:uppercase;
}


.vpk-stats{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;
}


.vpk-stat{
  padding:
    12px;

  border:
    1px solid
    var(--vb-border);

  border-radius:11px;

  background:
    rgba(255,255,255,.016);
}


.vpk-stat span{
  display:block;

  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.vpk-stat strong{
  display:block;

  margin-top:7px;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:900;

  font-variant-numeric:
    tabular-nums;
}


.vpk-action{
  display:flex;

  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:12px;

  padding:
    14px;

  border:
    1px solid
    rgba(169,107,255,.17);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(156,96,255,.07),
      rgba(255,255,255,.01)
    );
}


.vpk-price{
  color:
    var(--vb-text);

  font-size:21px;
  font-weight:950;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.vpk-action-note{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vpk-sections{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:12px;
}


.vpk-panel-title{
  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;
}


.vpk-panel-sub{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vpk-odds{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-top:14px;
}


.vpk-odd{
  display:grid;

  grid-template-columns:
    86px
    minmax(0,1fr)
    54px;

  gap:9px;

  align-items:center;
}


.vpk-odd-name{
  font-size:14px;
  font-weight:800;
}


.vpk-odd-name[data-rarity="common"]{
  color:#c8ced8;
}


.vpk-odd-name[data-rarity="rare"]{
  color:#65a9ff;
}


.vpk-odd-name[data-rarity="epic"]{
  color:#c178ff;
}


.vpk-odd-name[data-rarity="legendary"]{
  color:#ffc766;
}


.vpk-bar{
  height:5px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.055);
}


.vpk-bar-fill{
  height:100%;

  border-radius:inherit;

  background:
    var(--vb-accent);
}


.vpk-odd-value{
  color:
    var(--vb-text);

  font-size:14px;
  font-weight:800;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


.vpk-progress-group{
  display:flex;
  flex-direction:column;
  gap:14px;

  margin-top:14px;
}


.vpk-progress-head{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:10px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vpk-progress-head strong{
  color:
    var(--vb-text);

  font-size:14px;
}


.vpk-progress-caption{
  margin-top:5px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vpk-unopened{
  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:13px;
}


.vpk-unopened-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    130px
    110px;

  gap:12px;

  align-items:center;

  min-height:54px;

  padding:
    9px
    12px;

  border-bottom:
    1px solid
    var(--vb-border);
}


.vpk-unopened-row:last-child{
  border-bottom:0;
}


.vpk-unopened-id{
  overflow:hidden;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:800;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vpk-unopened-date{
  color:
    var(--vb-muted);

  font-size:13px;
}


.vpk-empty{
  padding:
    30px
    15px;

  color:
    var(--vb-muted);

  text-align:center;
}


/* =========================================================
 * Pack reveal
 * ========================================================= */

.vpk-reveal{
  position:fixed;

  z-index:1300;

  inset:0;

  overflow:auto;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  padding:
    32px;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(154,93,255,.16),
      transparent 37%
    ),
    rgba(5,6,10,.95);

  backdrop-filter:
    blur(18px);
}


.vpk-reveal-head{
  max-width:900px;

  margin-bottom:22px;

  text-align:center;
}


.vpk-reveal-kicker{
  color:
    var(--vb-accent);

  font-size:14px;
  font-weight:850;

  letter-spacing:.15em;
}


.vpk-reveal-title{
  margin-top:6px;

  color:
    var(--vb-text);

  font-size:
    clamp(
      25px,
      3vw,
      40px
    );

  font-weight:950;

  letter-spacing:-.04em;
}


.vpk-reveal-cards{
  width:
    min(
      980px,
      100%
    );

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:14px;
}


.vpk-reveal-card{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:16px;

  background:
    var(--vb-surface);

  opacity:0;

  transform:
    translateY(22px)
    scale(.94);

  animation:
    vpk-reveal-in
    .52s
    var(--vb-ease)
    forwards;

  animation-delay:
    var(--vpk-delay);
}


.vpk-reveal-card[data-rarity="rare"]{
  box-shadow:
    0
    0
    45px
    rgba(58,135,255,.10);
}


.vpk-reveal-card[data-rarity="epic"]{
  border-color:
    rgba(193,120,255,.34);

  box-shadow:
    0
    0
    55px
    rgba(169,90,255,.18);
}


.vpk-reveal-card[data-rarity="legendary"]{
  border-color:
    rgba(255,199,102,.38);

  box-shadow:
    0
    0
    65px
    rgba(255,186,67,.17);
}


.vpk-reveal-media{
  position:relative;

  aspect-ratio:
    4 / 5;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(166,101,255,.12),
      rgba(255,255,255,.02)
    );
}


.vpk-reveal-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.vpk-reveal-placeholder{
  height:100%;

  display:grid;
  place-items:center;

  color:
    rgba(255,255,255,.12);

  font-size:80px;
  font-weight:950;
}


.vpk-reveal-rarity{
  position:absolute;

  top:10px;
  left:10px;

  padding:
    5px
    7px;

  border-radius:999px;

  background:
    rgba(7,9,13,.86);

  color:
    var(--vb-text);

  font-size:13px;
  font-weight:850;

  text-transform:uppercase;
}


.vpk-reveal-card[data-rarity="rare"]
.vpk-reveal-rarity{
  color:#65a9ff;
}


.vpk-reveal-card[data-rarity="epic"]
.vpk-reveal-rarity{
  color:#c178ff;
}


.vpk-reveal-card[data-rarity="legendary"]
.vpk-reveal-rarity{
  color:#ffc766;
}


.vpk-reveal-body{
  padding:13px;
}


.vpk-reveal-name{
  overflow:hidden;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:900;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vpk-reveal-meta{
  margin-top:5px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vpk-reveal-serial{
  margin-top:10px;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:850;

  font-variant-numeric:
    tabular-nums;
}


.vpk-reveal-actions{
  display:flex;

  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:20px;
}


@keyframes vpk-reveal-in{

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


@media(max-width:980px){

  .vpk-pack{
    grid-template-columns:
      240px
      minmax(0,1fr);
  }


  .vpk-stats{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media(max-width:760px){

  .vpk-pack,
  .vpk-sections{
    grid-template-columns:
      1fr;
  }


  .vpk-pack-art{
    min-height:330px;
  }


  .vpk-pack-art-card{
    max-width:320px;
  }


  .vpk-reveal-cards{
    grid-template-columns:
      1fr;

    max-width:340px;
  }


  .vpk-unopened-row{
    grid-template-columns:
      1fr
      auto;
  }


  .vpk-unopened-date{
    grid-column:
      1;
  }

}


@media(max-width:520px){

  .vpk-stats{
    grid-template-columns:
      1fr;
  }


  .vpk-reveal{
    justify-content:flex-start;

    padding:
      22px
      14px;
  }

}


@media(prefers-reduced-motion:reduce){

  .vpk-reveal-card{
    opacity:1;
    transform:none;
    animation:none;
  }

}