/* Arcanes page. Tokens and components come from style.css. */

:root {
  --common: var(--intact);
  --uncommon: var(--exceptional);
  --rare: var(--flawless);
  --legendary: var(--radiant);
  --well: color-mix(in srgb, var(--lapis-950) 60%, transparent); /* sunken tracks */
}

/* Price chips with a label above and what the chosen price means below */
.price { display: grid; gap: var(--sp-1); }
.price .eyebrow { margin: 0; }
.price p { margin: 0; }
.totals .note { display: block; margin-top: 0.1rem; color: var(--muted); font: 400 var(--step--2)/1.3 var(--ui); }

.lead, .summary { max-width: 62rem; margin: 0 0 var(--sp-4); font-size: var(--step--1); color: var(--muted); }
.summary b { color: var(--ivory); font-weight: 600; font-family: var(--num); }
.note { margin: var(--sp-2) 0 0; font-size: var(--step--2); color: var(--muted); }

/* Name cell: thumbnail, then the name over a line of details */
.cell-name > div { display: grid; min-width: 0; }
.cell-name .sub { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-size: var(--step--2); }
a.item { color: inherit; text-decoration: none; }
a.item:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }

/* Rarity: a .chip tinted with the rarity colour */
.chip.rarity { color: var(--r, var(--muted)); text-transform: capitalize; }
.rarity.common { --r: var(--common); }
.rarity.uncommon { --r: var(--uncommon); }
.rarity.rare { --r: var(--rare); }
.rarity.legendary { --r: var(--legendary); background: color-mix(in srgb, var(--radiant) 12%, transparent); }

/* ---------- packs ---------- */

.packs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.packs > .lead { margin: 0; }

.card.pack { margin: 0; transition: border-color var(--mid) ease; }
.card.pack:hover { border-color: var(--line-hover); }
.card.pack.best {
  --cut-line: var(--gold);
  --fill: linear-gradient(180deg, var(--gold-soft), var(--surface-1) 70%);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.pack-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-2) var(--sp-5); }
.pack h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; font: 400 var(--step-1)/1.25 var(--display); }
.pack .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--step--1); }
.pack .meta b { color: var(--ivory); font: 600 var(--step-0) var(--num); }
/* The long note chip wraps on narrow screens instead of widening the card */
.pack-head > div:first-child { min-width: 0; }
.pack .meta .chip { white-space: normal; }

.ev { display: grid; justify-items: end; text-align: right; }
.ev strong { font: 600 var(--step-2)/1.1 var(--num); font-variant-numeric: tabular-nums; border-radius: var(--r-panel); }
.pack.best .ev strong { color: var(--gold-hi); }
.ev span { font-size: var(--step--2); }

.bar { height: 4px; margin: var(--sp-3) 0; border-radius: 999px; background: var(--well); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--line); transition: width var(--mid) var(--ease); }
.pack.best .bar span { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }

.pool-wrap { margin-top: var(--sp-3); animation: rise 320ms var(--ease); }
table.pool thead th { position: static; }
table.pool tr.need td:first-child { box-shadow: inset 2px 0 0 var(--void); }

/* ---------- spare arcanes and levels ---------- */

td.win { color: var(--gold-hi); font-weight: 600; }

.pips { display: inline-flex; gap: 3px; margin-right: var(--sp-2); vertical-align: middle; }
.pips i { width: 0.6rem; height: 0.6rem; transform: rotate(45deg) scale(0.8); border: 1px solid var(--line); background: var(--well); }
.pips i.on { border-color: var(--gold); background: var(--gold); }
tr.maxed .pips i.on { border-color: var(--ok); background: var(--ok); }
.rank { font-family: var(--num); color: var(--muted); }

.progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-family: var(--num); }
.progress .track { width: 7rem; height: 6px; border-radius: 999px; background: var(--well); overflow: hidden; }
.progress .track span { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width var(--mid) var(--ease); }
tr.ready .progress .track span { background: var(--void); }
.progress .others { font-family: var(--ui); font-size: var(--step--2); }

@media (max-width: 40rem) {
  .ev { justify-items: start; text-align: left; }
  .card.pack .toggle { width: 100%; }
  /* Rows are cards: the details sit right-aligned against their labels */
  table.stack td .progress { justify-content: flex-end; }
  .progress .track { width: 4rem; }
}