/* Prize colors belong to a table slot/outcome, never to an asset or its USD value. */
:root {
  --rarity-neutral:#839baa;
  --rarity-common:#a7c7d9;
  --rarity-uncommon:#5295ff;
  --rarity-rare:#ae78ff;
  --rarity-epic:#f36baf;
  --rarity-legendary:#efbf61;
}
/* Selection accents describe the five chest collections, not their odds or contents. */
#case-grid .case-card[data-tier] {
  --premium:var(--tier);
  border-color:color-mix(in srgb,var(--tier) 36%,#233b4e);
  background:radial-gradient(ellipse at 30% 90%,color-mix(in srgb,var(--tier) 21%,transparent),transparent 62%),linear-gradient(148deg,#1a2c3a,#091923 75%);
}
#case-grid .case-card[data-tier]::after {
  left:12%;right:12%;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--tier) 18%,var(--tier) 82%,transparent);
  box-shadow:0 -3px 18px color-mix(in srgb,var(--tier) 43%,transparent);
  opacity:.8;transform:scaleX(.82);
}
#case-grid .case-card[data-tier]:is(.active,[aria-pressed=true],:hover) {
  border-color:color-mix(in srgb,var(--tier) 76%,#dcefff);
  background:radial-gradient(ellipse at 30% 88%,color-mix(in srgb,var(--tier) 30%,transparent),transparent 68%),linear-gradient(148deg,#1c3242,#0a1b29 75%);
  box-shadow:inset 0 1px #e6f6ff55,0 0 23px color-mix(in srgb,var(--tier) 16%,transparent),0 8px 20px #0003;
}
#case-grid .case-card[data-tier]:is(.active,[aria-pressed=true])::after {opacity:1;transform:scaleX(1)}
#case-grid .case-card[data-tier]:is(.active,[aria-pressed=true]) .case-card-bottom>span:last-child {color:color-mix(in srgb,var(--tier) 65%,white)}
.case-workspace .case-showroom {box-shadow:inset 0 -3px var(--tier),inset 0 -22px 35px -30px var(--tier)}
.case-workspace .stage-light {background:radial-gradient(ellipse,color-mix(in srgb,var(--tier) 17%,transparent),transparent 70%)}

/* Colored rails and restrained pools of light leave the artwork and text dominant. */
#opening-theatre .roulette-tile[data-rarity] {
  background:radial-gradient(ellipse at 50% 92%,color-mix(in srgb,var(--rarity) 26%,transparent),transparent 73%),linear-gradient(155deg,#112b3d,#071621 74%);
  border-color:color-mix(in srgb,var(--rarity) 38%,#24394b);
  box-shadow:inset 0 1px #e9f8ff10,0 10px 25px #0004;
}
#opening-theatre .roulette-tile[data-rarity]::after {
  left:13%;right:13%;bottom:0;height:3px;opacity:1;
  background:linear-gradient(90deg,transparent,var(--rarity) 18%,var(--rarity) 82%,transparent);
  box-shadow:0 -2px 17px color-mix(in srgb,var(--rarity) 55%,transparent);
}
#opening-theatre .roulette-rarity {width:100%;gap:4px;font-size:8px;flex-wrap:wrap}
#opening-theatre .roulette-rarity i {width:5px;height:5px;box-shadow:0 0 7px var(--rarity)}
#opening-theatre .roulette-rarity em {margin-left:auto;font-size:7px;font-style:normal;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--rarity)}
#opening-theatre .roulette-tile[data-rarity].is-winner {
  border-color:color-mix(in srgb,var(--rarity) 68%,white);
  box-shadow:inset 0 0 25px color-mix(in srgb,var(--rarity) 9%,transparent),0 0 28px color-mix(in srgb,var(--rarity) 23%,transparent);
}
#opening-theatre .theatre-result[data-rarity] {border-bottom:2px solid var(--rarity);padding-bottom:17px;filter:drop-shadow(0 6px 17px color-mix(in srgb,var(--rarity) 13%,transparent))}
#opening-theatre .theatre-result[data-rarity] .theatre-result-kicker {color:var(--rarity)}
#opening-theatre .theatre-result[data-rarity]>strong {text-shadow:0 0 28px color-mix(in srgb,var(--rarity) 24%,transparent)}

.slot-card[data-rarity],.reward-card[data-rarity],.collection-item[data-rarity],.featured-reward[data-rarity] {
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--rarity) 16%,transparent),transparent 67%),linear-gradient(145deg,#102b3b,#071823);
  border-color:color-mix(in srgb,var(--rarity) 32%,#294354);
  border-bottom:3px solid color-mix(in srgb,var(--rarity) 84%,#263c50);
}
.slot-card[data-rarity]:hover,.reward-card[data-rarity]:hover,.collection-item[data-rarity]:hover,.featured-reward[data-rarity]:hover {border-color:color-mix(in srgb,var(--rarity) 64%,#bacfdb)}
.slot-card[data-rarity] .reward-tag,.chest-outcome[data-rarity] .chest-outcome-copy>span,.rarity-label {color:var(--rarity)}
.slot-card.is-unavailable {filter:saturate(.35);opacity:.64}
.collection-item[data-rarity] {height:143px;min-height:143px;padding-bottom:10px}
.collection-item[data-rarity] small {display:block;font-size:9px;line-height:1.4;color:var(--rarity);white-space:normal}
.collection-item[data-rarity] strong {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reward-rarities {display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 2px;min-width:0}
.reward-rarities>span {display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid color-mix(in srgb,var(--rarity) 27%,transparent);border-radius:4px;color:var(--rarity);font-size:9px;line-height:1.2}
.reward-rarities b {font-weight:500;color:#d0dfeb;white-space:nowrap}
.rarity-swatches {display:flex;gap:4px;margin-top:8px}
.rarity-swatches i {height:3px;width:16px;border-radius:2px;background:var(--rarity);box-shadow:0 0 6px color-mix(in srgb,var(--rarity) 28%,transparent)}
#case-grid .case-best-prize[data-rarity] {border-bottom:2px solid var(--rarity);padding-bottom:5px;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--rarity) 12%,transparent),transparent 75%)}
.chest-outcome[data-rarity] {border-left:2px solid var(--rarity);background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 8%,transparent),transparent 65%)}
.odds-table tr[data-rarity]>td:first-child {box-shadow:inset 2px 0 var(--rarity)}
.detail-art[data-rarity] {background:radial-gradient(ellipse,color-mix(in srgb,var(--rarity) 16%,transparent),transparent 68%)}
@media(max-width:600px){
  .collection-item[data-rarity]{height:138px;min-height:138px}
  .collection-item[data-rarity] small{font-size:8px}
  .reward-rarities>span{font-size:8px;padding:4px 5px}
  #opening-theatre .roulette-rarity{font-size:7px;letter-spacing:0}
  #opening-theatre .roulette-rarity em{font-size:6px}
  #opening-theatre .theatre-result[data-rarity]{padding-bottom:12px}
}