/*
 * ==========================================================
 * VIBE COLLECTION UI 2.0
 * ==========================================================
 */

/* VIBE_COLLECTION_UI_V20 */

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


.vcol-top{
  display:flex;

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

  gap:10px;
}


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


.vcol-stats{
  display:grid;

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

  gap:10px;
}


.vcol-stat-label{
  color:
    var(--vb-muted);

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

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


.vcol-stat-value{
  margin-top:7px;

  color:
    var(--vb-text);

  font-size:
    clamp(
      18px,
      1.5vw,
      25px
    );

  font-weight:900;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.vcol-taxonomy{
  display:grid;

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

  gap:8px;
}


.vcol-tax-node{
  min-width:0;

  min-height:66px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:7px;

  padding:
    10px
    12px;

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

  border-radius:11px;

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


.vcol-tax-label{
  color:
    var(--vb-muted);

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

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


.vcol-tax-node strong{
  overflow:hidden;

  color:
    var(--vb-text);

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

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


.vcol-tax-node .vb-select{
  min-height:32px;

  border:0;

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


.vcol-tools{
  display:grid;

  grid-template-columns:
    minmax(180px,1fr)
    180px
    210px;

  gap:8px;

  margin-top:14px;
}


.vcol-result{
  margin-top:9px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vcol-sets{
  display:grid;

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

  gap:10px;
}


.vcol-set{
  position:relative;

  overflow:hidden;
}


.vcol-set::after{
  content:"";

  position:absolute;

  right:-36px;
  bottom:-48px;

  width:120px;
  height:120px;

  border-radius:999px;

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

  filter:
    blur(30px);

  opacity:.35;

  pointer-events:none;
}


.vcol-set-title{
  color:
    var(--vb-text);

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


.vcol-set-state{
  margin-top:8px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vcol-set-state strong{
  color:
    var(--vb-text);
}


.vcol-set-unlocked{
  margin-top:9px;

  color:
    var(--vb-success);

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


.vcol-grid{
  display:grid;

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

  gap:12px;
}


.vcol-card{
  overflow:hidden;

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

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 38%
    ),
    var(--vb-surface);

  transition:
    transform
      var(--vb-motion-normal)
      var(--vb-ease),
    border-color
      var(--vb-motion-normal)
      var(--vb-ease);
}


.vcol-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(167,108,255,.25);
}


.vcol-media{
  position:relative;

  display:block;

  overflow:hidden;

  aspect-ratio:
    4 / 5;

  background:
    linear-gradient(
      145deg,
      rgba(154,94,255,.11),
      rgba(255,255,255,.018)
    );
}


.vcol-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.vcol-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

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

  font-size:38px;
  font-weight:900;
}


.vcol-rarity{
  position:absolute;

  top:10px;
  left:10px;

  padding:
    4px
    7px;

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

  border-radius:999px;

  background:
    rgba(8,10,15,.82);

  color:
    var(--vb-text);

  backdrop-filter:
    blur(12px);

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

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


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


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


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


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


.vcol-count{
  position:absolute;

  right:10px;
  bottom:10px;

  padding:
    5px
    8px;

  border-radius:8px;

  background:
    rgba(8,10,15,.86);

  color:
    var(--vb-text);

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

  font-variant-numeric:
    tabular-nums;
}


.vcol-body{
  padding:13px;
}


.vcol-name{
  display:block;

  overflow:hidden;

  color:
    var(--vb-text);

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

  text-decoration:none;

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


.vcol-name:hover{
  color:
    var(--vb-accent);
}


.vcol-path{
  margin-top:5px;

  color:
    var(--vb-muted);

  font-size:13px;

  line-height:1.45;
}


.vcol-path strong{
  color:
    var(--vb-accent);
}


.vcol-meta{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:10px;
}


.vcol-chip{
  padding:
    4px
    6px;

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

  border-radius:7px;

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

  color:
    var(--vb-muted);

  font-size:13px;
}


.vcol-chip strong{
  color:
    var(--vb-text);
}


.vcol-serials{
  display:flex;
  flex-wrap:wrap;

  gap:5px;

  margin-top:10px;
}


.vcol-serial{
  padding:
    4px
    6px;

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

  border-radius:7px;

  color:
    var(--vb-muted);

  font-size:13px;

  font-variant-numeric:
    tabular-nums;
}


.vcol-serial[data-status="listed"]{
  border-color:
    rgba(177,108,255,.22);

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


.vcol-serial[data-status="locked"]{
  color:
    var(--vb-warning);
}


.vcol-actions{
  display:flex;

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

  gap:8px;

  margin-top:12px;
}


.vcol-duplicate{
  color:
    var(--vb-warning);

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


.vcol-empty{
  grid-column:
    1 / -1;

  padding:
    42px
    18px;

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

  border-radius:14px;

  color:
    var(--vb-muted);

  text-align:center;
}


.vcol-season-effect{
  display:flex;

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

  gap:12px;
}


.vcol-season-effect-value{
  color:
    var(--vb-success);

  font-size:17px;
  font-weight:900;
}


@media(max-width:1240px){

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


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

}


@media(max-width:980px){

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


  .vcol-tools{
    grid-template-columns:
      1fr
      1fr;
  }


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

}


@media(max-width:620px){

  .vcol-stats,
  .vcol-taxonomy,
  .vcol-tools,
  .vcol-sets,
  .vcol-grid{
    grid-template-columns:
      1fr;
  }

}


/*
 * ==========================================================
 * VIBE COLLECTION PERMANENT SET 3.0
 * ==========================================================
 */

/* VIBE_COLLECTION_PERMANENT_SET_V30 */

.vcol-set-unlocked{
  display:inline-flex;
  align-items:center;

  min-height:30px;

  padding:
    6px
    9px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vb-success) 28%,
      var(--vb-border)
    );

  border-radius:10px;

  color:
    var(--vb-success);

  background:
    color-mix(
      in srgb,
      var(--vb-success) 8%,
      transparent
    );

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

  line-height:1.35;
}