/* ui/UpgradeCard — contract: ./UpgradeCard.spec.md. Tokens from ui/Theme. */

.qc-card {
  --rarity: var(--qc-rarity-common);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--qc-text);
  font: inherit;
  text-align: left;
  background: var(--qc-space-1);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--rarity) 11%, var(--qc-space-1)) 0%,
    var(--qc-space-1) 58%
  );
  border: 1px solid color-mix(in oklab, var(--rarity) 36%, transparent);
  border-radius: var(--qc-radius);
}

.qc-card[data-rarity="rare"] { --rarity: var(--qc-rarity-rare); }
.qc-card[data-rarity="epic"] { --rarity: var(--qc-rarity-epic); }
.qc-card[data-rarity="legendary"] { --rarity: var(--qc-rarity-legendary); }

button.qc-card {
  cursor: pointer;
  transition:
    transform var(--qc-dur-fast) var(--qc-ease-out),
    border-color var(--qc-dur) var(--qc-ease-out),
    box-shadow var(--qc-dur) var(--qc-ease-out);
}

button.qc-card:hover,
button.qc-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rarity);
  box-shadow: 0 16px 40px -18px color-mix(in oklab, var(--rarity) 70%, transparent);
}

button.qc-card:active {
  transform: translateY(0);
}

/* Epic and legendary earn a little more presence. */
.qc-card[data-rarity="epic"] {
  box-shadow: 0 0 28px -14px var(--rarity);
}

.qc-card[data-rarity="legendary"] {
  box-shadow: 0 0 36px -12px color-mix(in oklab, var(--rarity) 80%, transparent);
}

/* A slow light sweep around the legendary border. */
.qc-card[data-rarity="legendary"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, var(--rarity) 50%, transparent 62%) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
  animation: qc-card-sheen 3.6s linear infinite;
  pointer-events: none;
}

@keyframes qc-card-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* ------------------------------------------------------------ pieces --- */

/* Everything inside is a span (valid in a <button>); make them blocks by
   default at zero specificity so the class rules below can override freely. */
:where(.qc-card) > span,
:where(.qc-card__top) > span {
  display: block;
}

.qc-card__pips {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.qc-card__pip {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rarity);
  border-radius: 1.5px;
  transform: rotate(45deg);
  opacity: 0.55;
}

.qc-card__pip[data-filled] {
  background: var(--rarity);
  opacity: 1;
}

.qc-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qc-card__rarity {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rarity);
}

.qc-card__hotkey {
  flex: none;
  margin-left: auto;
}

.qc-card__category {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
}

.qc-card__name {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.qc-card__desc {
  color: var(--qc-text-dim);
}

.qc-card__stacks {
  font: 600 11px/1 var(--qc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
}

.qc-card__stacks[data-new] {
  color: var(--qc-accent-2);
}

/* -------------------------------------------------------------- full --- */

.qc-card--full {
  gap: 0;
  padding: 20px 20px 18px;
}

.qc-card--full .qc-card__category { margin-top: 26px; }
.qc-card--full .qc-card__name { margin-top: 8px; font-size: 22px; }
.qc-card--full .qc-card__desc { flex: 1; margin-top: 14px; font-size: 14px; line-height: 1.5; }
.qc-card--full .qc-card__stacks { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--qc-line); }

/* ----------------------------------------------------------- compact --- */

.qc-card--compact {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--qc-glass);
  border-radius: 9px;
  backdrop-filter: blur(8px);
}

.qc-card--compact .qc-card__name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-card--compact .qc-card__category {
  margin-left: auto;
  padding-left: 12px;
  font-size: 10px;
}

.qc-card--compact .qc-card__hotkey {
  margin-left: 0;
}

.qc-card--compact:hover,
.qc-card--compact:focus-visible {
  transform: translateX(-3px);
}

/* A landscape phone: the full card is the whole screen's height budget, so it
   keeps its shape and loses its air. The compact card in the HUD tray is
   already small and is left alone. */
@media (max-height: 520px) {
  .qc-card--full { padding: 10px 12px 9px; }
  .qc-card--full .qc-card__category { margin-top: 10px; }
  .qc-card--full .qc-card__name { margin-top: 4px; font-size: 16px; }
  .qc-card--full .qc-card__desc { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .qc-card--full .qc-card__stacks { margin-top: 10px; padding-top: 7px; }
  .qc-card--full .qc-card__rarity,
  .qc-card--full .qc-card__category { font-size: 10px; }
}