/*
 * The games page: an animated list, and a walkthrough per game.
 *
 * No JavaScript (spec/009 W1). Selection is `:target` — clicking a game sets
 * the URL fragment, which reveals its walkthrough and, because the panel goes
 * from `display: none` to shown, restarts every animation inside it. That also
 * makes each walkthrough linkable: /games#deathroll opens it playing.
 *
 * Every animation is suppressed under `prefers-reduced-motion`, where the same
 * content is simply shown at rest.
 */

/* ── the list ──────────────────────────────────────────────────────────── */
.games { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin: 2rem 0; }

.game-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border-radius: var(--radius);
  padding: 0 0 1.25rem;
  position: relative;
  overflow: hidden;
  animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
/* Discover's cards lead with a splash banner; ours are drawn rather than
   photographed, so each game gets a band in its own colour. */
.game-card .banner {
  height: 84px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--accent) 0%, #7a83f7 100%);
}
.game-card.dice .banner { background: linear-gradient(135deg, #c9432f 0%, var(--gold) 100%); }
.game-card h3, .game-card p, .game-card .play { padding-inline: 1.25rem; }
.game-card:nth-child(1) { animation-delay: .05s; }
.game-card:nth-child(2) { animation-delay: .18s; }
.game-card:hover { transform: translateY(-3px); background: var(--card-hi); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55); }
.game-card h3 { margin: 1rem 0 .35rem; }
.game-card p { margin: 0 0 .75rem; color: var(--muted); font-size: .95rem; }
.game-card .play { color: var(--accent); font-weight: 600; font-size: .92rem; }

/* The dice on the Death Roll card tumble on hover, and once on arrival. */
.game-card .face {
  font-size: 1.6rem;
  display: inline-block;
  animation: tumble 2.4s ease-in-out 1;
}
.game-card:hover .face { animation: tumble 1.2s ease-in-out infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tumble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-18deg) translateY(-3px); }
  60% { transform: rotate(14deg); }
}

/* ── the walkthroughs ──────────────────────────────────────────────────── */
.walkthrough { display: none; margin-top: 2.5rem; }
.walkthrough:target { display: block; }

/* With nothing selected, show a hint rather than a blank space. */
.walkthrough-hint { color: var(--muted); font-size: .95rem; margin-top: 2rem; }
#tournament:target ~ .walkthrough-hint,
#deathroll:target ~ .walkthrough-hint { display: none; }

.step {
  position: relative;
  padding-left: 2.1rem;
  margin: 0 0 1.4rem;
  opacity: 0;
  animation: step-in .55s ease forwards;
}
.step::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: .8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.step h4 { margin: 0 0 .35rem; font-size: 1rem; }
.step p { margin: 0 0 .5rem; color: var(--muted); font-size: .95rem; }
.step:nth-of-type(1) { animation-delay: .1s; }
.step:nth-of-type(2) { animation-delay: 1.0s; }
.step:nth-of-type(3) { animation-delay: 1.9s; }
.step:nth-of-type(4) { animation-delay: 2.8s; }
.step:nth-of-type(5) { animation-delay: 3.7s; }
.step:nth-of-type(6) { animation-delay: 4.6s; }

@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A rolling number that settles — the ceiling coming down. */
.roll { font-weight: 700; color: var(--fg); }
.roll .cycle {
  display: inline-block;
  min-width: 2.6ch;
  text-align: right;
  animation: settle 1.1s steps(1) both;
}
@keyframes settle {
  0%   { content: "97"; opacity: .35; }
  100% { opacity: 1; }
}
.ticker { display: inline-grid; overflow: hidden; height: 1.3em; vertical-align: bottom; }
.ticker span { animation: reel 1.2s cubic-bezier(.3, .8, .2, 1) both; }
@keyframes reel { from { transform: translateY(-4.6em); } to { transform: translateY(0); } }

/* The bracket draws itself. */
.bracket-draw path, .bracket-draw line {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw 1.6s ease forwards;
}
.bracket-draw .seat { fill: var(--card); stroke: var(--line); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.bracket-draw text { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
.bracket-draw .r1 { animation-delay: .2s; }
.bracket-draw .r2 { animation-delay: 1.1s; }
.bracket-draw .r3 { animation-delay: 1.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* A message arriving in the channel. */
.msg.arrive { animation: step-in .5s ease backwards; }
.msg.d1 { animation-delay: .35s; }
.msg.d2 { animation-delay: 1.25s; }
.msg.d3 { animation-delay: 2.15s; }

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card .face, .step, .msg.arrive, .ticker span { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bracket-draw path, .bracket-draw line { stroke-dashoffset: 0; animation: none !important; }
  .game-card:hover { transform: none; }
}

@media (max-width: 40rem) {
  .step { padding-left: 1.9rem; }
  .step::before { width: 1.35rem; height: 1.35rem; font-size: .75rem; }
  .game-card .banner { height: 70px; font-size: 1.9rem; }
  /* An animation that plays while the reader is still scrolling to it is
     wasted; shorten the chain so the whole walkthrough is visible sooner. */
  .step:nth-of-type(2) { animation-delay: .8s; }
  .step:nth-of-type(3) { animation-delay: 1.5s; }
  .step:nth-of-type(4) { animation-delay: 2.2s; }
  .step:nth-of-type(5) { animation-delay: 2.9s; }
  .step:nth-of-type(6) { animation-delay: 3.6s; }
}