/* The informational pages: How to play, Press kit, What's new, Get the game.
   Same three materials as everywhere else (components.css); this file only
   lays them out. */

.section--tight {
  padding-block: clamp(24px, 4vw, 48px);
}

/* --- How to play ---------------------------------------------------------- */

.guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
}

.guide-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  background: rgba(255, 253, 246, 0.94);
  box-shadow: 0 3px 0 rgba(196, 214, 228, 0.7);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--ink-card-title);
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--sky-0);
}

.guide {
  display: grid;
  gap: var(--s6);
  max-width: 920px;
}

.guide > .card {
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  color: var(--ink-card-body);
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(var(--gummy-blue-top), var(--gummy-blue-bottom));
  box-shadow: 0 3px 0 var(--gummy-blue-lift);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
}

.steps strong,
.guide strong {
  color: var(--ink-card-title);
}

.tool-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--s4);
  font-size: 0.98rem;
}

.tool-table th,
.tool-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s3);
  border-bottom: 2px solid var(--card-rim);
  color: var(--ink-card-body);
}

.tool-table th {
  font-family: 'Baloo 2', sans-serif;
  color: var(--ink-card-title);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tool-table td:first-child {
  font-weight: 700;
  color: var(--ink-card-title);
  white-space: nowrap;
}

.tool-table tr:last-child td {
  border-bottom: 0;
}

/* A table is the one thing here that can't reflow, so below phablet width it
   becomes a stack of labelled rows instead of scrolling sideways. */
@media (max-width: 560px) {
  .tool-table thead {
    display: none;
  }

  .tool-table tr {
    display: block;
    padding: var(--s3) 0;
    border-bottom: 2px solid var(--card-rim);
  }

  .tool-table tr:last-child {
    border-bottom: 0;
  }

  .tool-table td {
    display: block;
    padding: 2px 0;
    border: 0;
    white-space: normal;
  }
}

.tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--s3);
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}

.tier-list li {
  padding: var(--s3);
  border-radius: var(--r-tile);
  background: var(--card-sunken);
  text-align: center;
  color: var(--ink-card-body);
}

.tier-list strong {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  color: var(--ink-card-title);
}

.tips {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}

.tips li {
  padding: var(--s4);
  border-radius: var(--r-tile);
  background: var(--card-sunken);
  color: var(--ink-card-body);
}

.tips li strong {
  display: block;
  margin-bottom: var(--s1);
}

/* --- Press kit ------------------------------------------------------------ */

.press {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .press {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.press__copy {
  display: grid;
  gap: var(--s5);
}

.facts {
  margin: var(--s4) 0 0;
  display: grid;
  gap: 0;
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) 1fr;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 2px solid var(--card-rim);
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--ink-card-meta);
}

.facts dd {
  margin: 0;
  color: var(--ink-card-body);
  overflow-wrap: anywhere;
}

.asset-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  list-style: none;
  margin: var(--s6) 0 var(--s6);
  padding: 0;
}

.asset-grid > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.asset-grid img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: var(--r-thumb);
  background: var(--card-sunken);
  padding: var(--s3);
}

@media (min-width: 700px) {
  .asset--wide {
    grid-column: span 2;
  }
}

.press__more {
  max-width: 760px;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s1);
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* --- What's new ----------------------------------------------------------- */

.releases {
  display: grid;
  gap: var(--s6);
  max-width: 820px;
}

.release__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.release__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

.release__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  color: var(--ink-card-meta);
  font-weight: 700;
}

.release__list {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.release__list li {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-tile);
  background: var(--card-sunken);
  color: var(--ink-card-body);
}

/* --- Get the game --------------------------------------------------------- */

.download__inner {
  display: grid;
  gap: var(--s7);
  align-items: center;
}

@media (min-width: 860px) {
  .download__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.download__status {
  display: inline-block;
  font-weight: 700;
  margin-bottom: var(--s5);
}

.download__status[hidden] {
  display: none;
}

.download__qr {
  margin: 0;
  justify-self: center;
  max-width: 320px;
  text-align: center;
}

.download__qr img {
  width: 200px;
  height: 200px;
  margin: 0 auto var(--s4);
  image-rendering: pixelated;
}

.download__qr figcaption {
  color: var(--ink-card-body);
}

.download__qr strong {
  display: block;
  color: var(--ink-card-title);
}

/* A phone can't scan its own screen, so the QR card is desktop furniture. */
@media (max-width: 859px) and (pointer: coarse) {
  .download__qr {
    display: none;
  }
}

/* Links in the fact sheet stand alone in their cell, so they are tap targets
   in their own right, not inline links in a sentence. */
.facts dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.facts > div {
  align-items: center;
}

.guide .steps,
.guide .tick-list,
.guide .tier-list,
.guide .tips,
.guide .tool-table {
  margin-bottom: var(--s5);
}

.guide .card > :last-child {
  margin-bottom: 0;
}