/* The landing page: the front of the game box. Reuses the lid, tray, clue
   card and pawn styles so it reads as the same printed set. */

.cover-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 32px 40px;
  padding: 44px 44px 40px;
}

.cover-text { display: flex; flex-direction: column; gap: 18px; }
.cover-logo { font-size: clamp(4.5rem, 11vw, 8.5rem); }
.cover-pitch { margin: 0; max-width: 34ch; font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); }

.cover-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.cover-play { min-height: 58px; padding: 14px 40px; font-size: 1.2rem; }

/* a corner of the real board in its tray, set slightly askew like a photo */
.cover-art { position: relative; margin: 0; justify-self: center; transform: rotate(1.2deg); }
.cover-tray { padding: 12px; }
.cover-grid {
  --cover-cell: clamp(22px, 3.3vw, 36px);
  display: grid;
  grid-template-columns: repeat(var(--cover-cols), var(--cover-cell));
  grid-auto-rows: var(--cover-cell);
  gap: var(--gap);
}
.cover-grid i { position: relative; border-radius: 3px; }

/* the target square, with its +3 zone outlined like on a reveal */
.cover-grid .target { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px var(--ink); z-index: 1; }
.cover-zone {
  position: absolute;
  inset: calc(-1 * (var(--cover-cell) + var(--gap)) - 3px);
  border: 2px dashed var(--card);
  border-radius: 5px;
  pointer-events: none;
}
.cover-grid .pawn {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 30%;
  width: 82%;
  height: auto;
  aspect-ratio: 24 / 34;
  transform: translateX(-50%);
  z-index: 2;
}

.cover-clue {
  position: absolute;
  right: -18px;
  bottom: -26px;
  min-width: 150px;
  transform: rotate(-4deg);
}

.cover-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 44px; }
.cover-steps li + li { border-left: 2px solid var(--ink); padding-left: 20px; }
.cover-steps .num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: .75rem;
}

@media (max-width: 860px) {
  .cover-body { grid-template-columns: 1fr; padding: 32px 22px 44px; }
  .cover-pitch { max-width: none; }
  .cover-play { flex: 1 1 100%; }
  .cover-actions { justify-content: center; }
  .cover-clue { right: -6px; }
  .cover-steps { grid-template-columns: 1fr; }
  .cover-steps li, .cover-steps li + li { padding: 10px 22px; border-left: 0; }
  .cover-steps li + li { border-top: 1px dashed var(--dash); }
}