/* a stamp sitting at its coin wall wants a material next, so it reads as ready */

.slot.ready { box-shadow: inset 0 0 0 1px var(--accent); }

/* statue tiers: StuG is a tier, not a gold flag, so the three of them each get a corner */

.slot.gold, .slot.onyx, .slot.zenith { position: relative; }
.slot.gold::after, .slot.onyx::after, .slot.zenith::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid transparent;
  border-top-color: var(--flag);
  border-left-color: var(--flag);
}
.slot.onyx::after { border-top-color: var(--text); border-left-color: var(--text); }
.slot.zenith::after { border-top-color: var(--accent); border-left-color: var(--accent); }

/* cards: the collection page centres a 28x36 face in a 31x43 frame whose pips are the star
   level, both drawn from the same point, so the frame is the tile and the face sits inside it */

.card-sets { display: grid; gap: 4px; }
.card-set + .card-set { margin-top: 10px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); gap: 3px; }

.card-tile { position: relative; width: 50px; aspect-ratio: 31 / 43; }
.card-tile .sprite { position: absolute; }
.card-tile .card-frame { inset: 0; width: 100%; height: 100%; }
.card-tile .card-face { left: 4.84%; top: 8.14%; width: 90.32%; height: 83.72%; }
/* the game backs an unfound card with a near-black plate, which wants an edge to read as a slot */
.card-tile.unfound { outline: 1px solid var(--rule); outline-offset: -2px; }
.card-tile.chip { outline: 1px solid var(--accent); outline-offset: 1px; }
.card-tile.empty-slot { border: 1px dashed var(--rule-strong); }

/* decks: the ten slots the game reads, with the Lab's two chip slots outlined */

.decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px 24px; }
.deck { display: grid; gap: 6px; align-content: start; justify-items: start; }
.deck-who { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-family: var(--mono); font-size: 12px; }
.deck-who .muted { font-size: 11px; color: var(--faint); }
.deck-set { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.deck .card-grid { grid-template-columns: repeat(4, 50px); }

.board-note { margin-top: 14px; max-width: 72ch; }