/* Price-driven rarity: the same tier follows a skin through catalog, inventory and upgrade. */
.rarity-common { --rarity:#9da8b1; --rarity-soft:#9da8b128; }
.rarity-uncommon { --rarity:#63d891; --rarity-soft:#63d89128; }
.rarity-rare { --rarity:#58a9ff; --rarity-soft:#58a9ff28; }
.rarity-epic { --rarity:#a982ff; --rarity-soft:#a982ff28; }
.rarity-legendary { --rarity:#f27cc5; --rarity-soft:#f27cc528; }
.rarity-mythic { --rarity:#ffad47; --rarity-soft:#ffad4728; }

.target-card.rarity-common,
.target-card.rarity-uncommon,
.target-card.rarity-rare,
.target-card.rarity-epic,
.target-card.rarity-legendary,
.target-card.rarity-mythic {
  border-top-color:var(--rarity)!important;
  background:radial-gradient(circle at 50% 36%,var(--rarity-soft),transparent 53%),#202420;
}

.target-card.rarity-common:hover,
.target-card.rarity-uncommon:hover,
.target-card.rarity-rare:hover,
.target-card.rarity-epic:hover,
.target-card.rarity-legendary:hover,
.target-card.rarity-mythic:hover,
.target-card.target {
  border-color:var(--rarity)!important;
  box-shadow:inset 0 0 17px var(--rarity-soft),0 0 12px var(--rarity-soft);
}

.target-card.rarity-common b,
.target-card.rarity-uncommon b,
.target-card.rarity-rare b,
.target-card.rarity-epic b,
.target-card.rarity-legendary b,
.target-card.rarity-mythic b,
.inv.rarity-common p,
.inv.rarity-uncommon p,
.inv.rarity-rare p,
.inv.rarity-epic p,
.inv.rarity-legendary p,
.inv.rarity-mythic p,
.store-card.rarity-common b,
.store-card.rarity-uncommon b,
.store-card.rarity-rare b,
.store-card.rarity-epic b,
.store-card.rarity-legendary b,
.store-card.rarity-mythic b {
  color:var(--rarity)!important;
}

.inv.rarity-common,
.inv.rarity-uncommon,
.inv.rarity-rare,
.inv.rarity-epic,
.inv.rarity-legendary,
.inv.rarity-mythic,
.panel-pick.rarity-common,
.panel-pick.rarity-uncommon,
.panel-pick.rarity-rare,
.panel-pick.rarity-epic,
.panel-pick.rarity-legendary,
.panel-pick.rarity-mythic,
.store-card.rarity-common,
.store-card.rarity-uncommon,
.store-card.rarity-rare,
.store-card.rarity-epic,
.store-card.rarity-legendary,
.store-card.rarity-mythic {
  border-color:var(--rarity)!important;
  box-shadow:inset 0 0 17px var(--rarity-soft);
}

@media (min-width:1151px) {
  .rail-list { gap:9px; padding:3px 6px 14px; }

  .rail-card {
    position:relative;
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    min-height:128px;
    overflow:hidden;
    border:1px solid #2e3b2e!important;
    border-left:3px solid var(--rarity)!important;
    border-radius:12px;
    color:#edf5e9;
    background:linear-gradient(115deg,#182019 0%,#151a16 57%,#111511 100%)!important;
    box-shadow:0 8px 20px #0007,inset 0 0 0 1px var(--rarity-soft);
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }

  .rail-card:before {
    position:absolute;
    inset:0;
    opacity:1;
    background:radial-gradient(ellipse at 12% 34%,var(--rarity-soft),transparent 56%),linear-gradient(100deg,#ffffff08,transparent 52%);
    content:'';
  }

  .rail-card:hover {
    filter:none;
    transform:translateX(4px);
    box-shadow:0 10px 25px #0009,0 0 18px var(--rarity-soft),inset 0 0 0 1px var(--rarity);
  }

  .rail-media {
    position:relative;
    z-index:1;
    display:grid;
    min-width:0;
    place-items:center;
    padding:7px 3px;
  }

  .rail-media:after { display:none; }

  .rail-media img {
    width:108px;
    height:100px;
    object-fit:contain;
    filter:drop-shadow(0 10px 9px #000) drop-shadow(0 0 11px var(--rarity-soft));
  }

  .rail-media em {
    position:absolute;
    top:8px;
    right:5px;
    z-index:2;
    padding:4px 5px;
    border:1px solid var(--rarity);
    border-radius:6px;
    color:#eef8e8;
    background:#0c100ce8;
    font-family:"Geologica",Inter,Arial,sans-serif;
    font-size:8px;
    font-style:normal;
    font-weight:700;
    line-height:1;
    box-shadow:0 3px 10px #0009;
  }

  .rarity-chip {
    position:absolute;
    bottom:8px;
    left:8px;
    z-index:2;
    padding:3px 5px;
    border:1px solid var(--rarity);
    border-radius:5px;
    color:var(--rarity);
    background:#0d110de0;
    font-size:7px;
    font-weight:800;
    letter-spacing:.55px;
    line-height:1;
  }

  .rail-copy {
    position:relative;
    z-index:1;
    display:flex;
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:13px 10px 12px 4px;
  }

  .rail-copy i {
    overflow:hidden;
    color:var(--rarity)!important;
    font-size:7px;
    font-style:normal;
    font-weight:800;
    letter-spacing:1px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .rail-copy strong {
    display:-webkit-box;
    overflow:hidden;
    color:#f1f5ef;
    font-size:11px;
    font-weight:650;
    letter-spacing:-.12px;
    line-height:1.22;
    text-overflow:ellipsis;
    text-transform:none;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .rail-copy b {
    overflow:hidden;
    margin-top:1px;
    color:var(--rarity)!important;
    font-size:13px;
    font-weight:700;
    letter-spacing:-.35px;
    line-height:1.1;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

}