/*
 * SlavBot.com: real Calamity Cards and pictures the bot draws (src/features/cards.js, src/features/samples.js). Linked by the
 * Games page and the home page only, after site.css and motion.css; theme.css still comes last.
 *
 * The pictures are the bot's own renders (data/cards.json, data/samples.json); everything around them is the poster: flat
 * ink, red, gold and paper, hard edges, the display face for labels. Colours are site.css's tokens: the brand ones only
 * inside an ink area (the deal, the home band), the jobs (--text, --rule, --quiet) on the page ground, so the dark theme
 * follows by itself. The motion (the deal, the light bar, the fan) is in css/motion.css with the rest of the site's motion.
 */

/* ---------- the deal: one card of each rarity, on an ink stage under the Calamity Cards bar ---------- */

/* The stage replaces the poster body's top padding, so the black bar runs straight into it. */
.cards-body {
  padding-top: 0;
}

.cards-body > .wrap {
  padding-top: 36px;
}

/* The edge in the cards' own colour (the bar's, from the bot's /help guide) sits on the stage's own ink, so it says that fill. */
.ink.pull {
  padding: 26px 0 34px;
  border-top: 4px solid var(--g-cards);
  background: var(--ink);
  color: var(--cream);
}

.ink.pull .pull-lede {
  max-width: 40em;
  margin: 0 0 26px;
  color: var(--cream);
  font: 600 var(--fs-small)/1.4 var(--body);
}

.pull-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .pull-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Six across, climbing: each rarity stands a step above the last, so the row reads as the ladder it is. A red band
   rises behind them along the same slope. */
@media (min-width: 1000px) {
  .pull-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 18px;
    padding-top: 90px;
  }

  .pull-slot:nth-child(2) {
    translate: 0 -18px;
  }

  .pull-slot:nth-child(3) {
    translate: 0 -36px;
  }

  .pull-slot:nth-child(4) {
    translate: 0 -54px;
  }

  .pull-slot:nth-child(5) {
    translate: 0 -72px;
  }

  .pull-slot:nth-child(6) {
    translate: 0 -90px;
  }

  .ink.pull .pull-cards::before {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    top: 34%;
    height: 52%;
    background: var(--red);
    clip-path: polygon(0 62%, 100% 0, 100% 38%, 0 100%);
  }
}

.pull-slot {
  position: relative;
  display: grid;
  gap: 22px;
  align-content: start;
}

.pull-card {
  margin: 0;
}

/* Without a script both fives show, one under the other. js/cards.js marks the stage live and then shows one five at
   a time, swapping on the button. */
.pull.live .pull-card[data-set='b'],
.pull.live.show-b .pull-card[data-set='a'] {
  display: none;
}

.pull.live.show-b .pull-card[data-set='b'] {
  display: block;
}

.pull-face {
  position: relative;
  display: block;
}

.pull-face img {
  display: block;
  width: 100%;
  height: auto;
}

.pull-card figcaption {
  margin-top: 10px;
}

.ink.pull .pull-card b {
  display: block;
  color: var(--gold);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.ink.pull .pull-card figcaption span {
  display: block;
  margin-top: 4px;
  color: var(--cream);
  font: 600 var(--fs-small)/1.3 var(--body);
}

/* The light bar: two flat cream bars on a slant, a wide one and a thin one, held inside the card's face (the box stops
   short of the rounded corners, so nothing lights the corners the picture leaves clear). It rests outside that box;
   css/motion.css moves it across once. */
.pull-glare {
  position: absolute;
  inset: 1.6% 2.4%;
  overflow: hidden;
  pointer-events: none;
}

.pull-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  transform: translateX(-180%) skewX(-18deg);
}

.ink .pull-shine::before,
.ink .pull-shine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--cream);
  opacity: 0.55;
}

.ink .pull-shine::before {
  left: 0;
  width: 62%;
}

.ink .pull-shine::after {
  left: 76%;
  width: 12%;
}

.pull-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 34px;
}

/* The Mythic's place when her picture is switched off (flags.slavGirlCards): a plain tile the size of a card. */
.ink .pull-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 440 / 620;
  border: 4px solid var(--gold);
  background: var(--ink);
  color: var(--gold);
  font: 400 var(--fs-4)/1 var(--display);
  text-align: center;
  text-transform: uppercase;
}

.pull-next[hidden] {
  display: none;
}

.ink.pull .pull-note {
  max-width: 40em;
  margin: 0;
  color: var(--muted-on-ink);
  font-size: var(--fs-small);
}

/* ---------- your copy: one card as a player owns it, with numbered marks beside the frame ---------- */

/* The marks sit outside the card, level with what they point at, each with a short leader to the frame: on top of the
   card they would hide the very rank, rating and stars they name. The heights are the bot's own layout (a 52px top bar
   and the stars 32px above the foot, on a 620px card). */
.copy-card {
  display: grid;
  gap: 22px 30px;
  align-items: start;
}

/* The heading comes first in the page (a phone shows it above the card). Where the copy has the panel's whole width (700 to
   899px) the card stands beside its notes; in half a panel (900px and up) the notes stay under the card, where their lines
   are long enough to read (beside it they wrapped at a dozen letters). */
@media (min-width: 700px) and (max-width: 899px) {
  .copy-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .copy-face {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

.copy-face {
  position: relative;
  justify-self: center;
  width: 170px;
  margin: 0 44px;
}

@media (min-width: 700px) {
  .copy-face {
    width: 190px;
  }
}

.copy-face img {
  display: block;
  width: 100%;
  height: auto;
}

.mk,
.copy-notes li::before {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font: 400 var(--fs-ui)/1 var(--display);
}

.mk {
  position: absolute;
}

/* The markers carry the numbers of the list beside the card, in the same order (rank, rating, stars). */
.copy-face {
  counter-reset: mk;
}

.mk::before {
  content: counter(mk);
  counter-increment: mk;
}

.mk-rank {
  left: -42px;
  top: calc(4.4% - 15px);
}

.mk-rating {
  right: -42px;
  top: calc(4.4% - 15px);
}

.mk-stars {
  right: -42px;
  top: calc(94.8% - 15px);
}

.mk::after {
  content: '';
  position: absolute;
  top: calc(50% - 1.5px);
  width: 12px;
  height: 3px;
  background: var(--rule);
}

.mk-rank::after {
  right: -15px;
}

.mk-rating::after,
.mk-stars::after {
  left: -15px;
}

.copy-card h3 {
  margin: 0;
}

.copy-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mark;
}

.copy-notes li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 44px;
  counter-increment: mark;
}

.copy-notes li::before {
  content: counter(mark);
  position: absolute;
  left: 0;
  top: -2px;
}

.cards-body .credit {
  margin-top: 18px;
  color: var(--quiet);
  font-size: var(--fs-small);
}

/* ---------- pictures the bot draws, with made-up players (the Games page's posters) ---------- */

.shot {
  max-width: 540px;
  margin: 18px 0 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--rule);
}

.shot figcaption {
  margin-top: 8px;
  color: var(--quiet);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.shot-slots {
  max-width: 300px;
}

.shots {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

@media (min-width: 900px) {
  .shots {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
  }

  .poster-body .wrap.two > .shot {
    margin-top: 0;
  }
}

/* ---------- the home page: three real cards, fanned like a hand ---------- */

.fan-row {
  display: grid;
  gap: 30px 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .fan-row {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
}

.fan {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 24px 0 8px;
  list-style: none;
}

/* The fan is three custom properties: the rest of each card (--fan), and where motion.css starts it from when it arrives. */
.fan-card {
  position: relative;
  flex: none;
  width: min(31vw, 200px);
  transform: var(--fan, none);
  transform-origin: 50% 100%;
}

.fan-card + .fan-card {
  margin-left: max(-9vw, -58px);
}

.fan-card:nth-child(1) {
  --fan: rotate(-9deg);
  --stack: translateX(36%);
}

.fan-card:nth-child(2) {
  z-index: 1;
  --fan: translateY(-8%);
  --stack: translateY(6%);
}

.fan-card:nth-child(3) {
  --fan: rotate(9deg);
  --stack: translateX(-36%);
}

.fan-copy .actions {
  margin-top: 24px;
}