/* Orli v3 site · Play (play.html)
   ---------------------------------------------------------------------------
   The games hub. The hero follows the home page's: the title, one lead and
   the two settings that matter for play on the left; the featured game,
   Find the Orli, as the one picture on the right, its title the outlined
   wordmark (as on the home page: the one handwritten word in view). Then a
   card for every world's game: neutral like the home page's (ink labels,
   the standard arrow), the colour coming only from the island on its
   world's wash. One for every public world with a game; Joy's is still an
   idea, a Concept card under them. System tokens and components only.
   ------------------------------------------------------------------------- */

/* ================================================================== hero */
.p-hero { padding-block: var(--o-space-8) var(--o-space-7); }
@media (min-width: 900px) {
  .p-hero { padding-block: var(--o-space-8); }
  .p-hero .o-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}

.p-hero .o-section-head { margin: 0; }
/* The title, and beside it the visitor's own Orli when they have one (a 48 px
   seat, features/your-orli), well clear of the buttons below. */
.p-title-row { display: flex; align-items: center; gap: var(--o-space-5); min-width: 0; }
.p-title-row .p-title { margin: 0; }
.p-settings { gap: var(--o-space-3); }
.p-settings__note { color: var(--o-ink-2); max-inline-size: 34ch; text-wrap: pretty; }

/* The featured game: a link card with the game's own dark field on top. */
.p-feature .o-card__media { --ratio: 16 / 9; background: #080808; /* the game's own ground (find-the-orli/lib/game.css) */ }
.p-feature .o-card__body { padding: var(--o-space-5) var(--o-space-6) var(--o-space-6); gap: var(--o-space-2); }
.p-feature .o-card__title { font-size: var(--o-text-title); line-height: var(--o-lh-title); letter-spacing: var(--o-track-title); }
/* The wordmark is about 7.8 hand-sizes wide: at very large text on a phone it
   scales to its card (as on the home page) instead of running past it. */
.p-feature .o-card__body { container-type: inline-size; }
.p-feature__title .hand { --hand-size: min(1.12em, calc(100cqi / 8)); }
.p-feature .o-card__text { max-inline-size: 46ch; }
.p-feature .o-card__foot { padding-block-start: var(--o-space-5); }
.p-go { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-ink); }

/* ============================================================ the games */
.p-games { padding-block-start: var(--o-space-8); }
.p-cards { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .p-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Heart pop, our pick: first, across the whole row, its island beside its
   words (two columns of art, one of words, so the edges line up with the
   six cards under it: three rows of two, or two rows of three). */
@media (min-width: 700px) {
  .p-card--pick { grid-column: 1 / -1; flex-direction: row; }
  .p-card--pick .p-card__art { flex: 0 0 calc((100% - var(--o-grid-gap)) / 2); --ratio: 16 / 9; }
  .p-card--pick .p-card__art .p-island { width: 64%; }
  .p-card--pick .o-card__body { justify-content: center; padding: var(--o-space-6) var(--o-space-7); }
  /* (the art's automatic minimum came from its ratio times the stretched
     card's height, and squeezed the words into 150px: spacing rules, 2 Nov) */
  .p-card--pick .p-card__art { min-width: 0; aspect-ratio: auto; }
  .p-card--pick .o-card__body { min-width: 0; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .p-card--pick .o-card__body { padding: var(--o-space-6); }
}
@media (min-width: 1100px) {
  .p-card--pick .p-card__art { flex-basis: calc((100% - 2 * var(--o-grid-gap)) * 2 / 3 + var(--o-grid-gap)); --ratio: 2 / 1; }
  .p-card--pick .p-card__art .p-island { width: auto; height: 82%; }
}

/* A world's card: its island, cut out, on the world's own wash, standing on
   a soft contact shadow. Everything else is ink. */
.p-card { scroll-margin-top: calc(var(--o-header-h) + var(--o-space-5)); }
.p-card__art { position: relative; --ratio: 16 / 10; display: grid; place-items: center; }
.p-card__art[data-world] { background: var(--world-wash); }
.p-card__art .p-island { position: relative; width: 74%; aspect-ratio: 10 / 7; }
.p-card__art .p-island::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -4%; height: 13%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .22), rgb(60 57 50 / 0));
}
.p-card__art .p-island img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.p-card__world { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.p-card .o-card__text { max-inline-size: 36ch; }
/* Arriving from a world (play.html#nova): the card you came for. */
.p-card:target { border-color: var(--o-ink); box-shadow: var(--o-shadow-raised); }

/* ideas: quieter, the island beside the words */
.p-ideas { padding-block-start: 0; }
.p-cards--ideas .p-card { flex-direction: row; }
.p-cards--ideas .p-card__art { flex: 0 0 38%; aspect-ratio: auto; min-height: 168px; }
.p-cards--ideas .p-card__art .p-island { width: 82%; }
.p-cards--ideas .o-card__body { padding: var(--o-space-5); }
.p-cards--ideas .o-card__title { font-size: var(--o-text-body); }
.p-card .o-media__tag .o-pill { --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }
@media (max-width: 459.98px) {
  .p-cards--ideas .p-card { flex-direction: column; }
  .p-cards--ideas .p-card__art { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .p-cards--ideas .p-card__art .p-island { width: 64%; }
}
html:not([data-verify="on"]) [data-verify-only] { display: none; }

@media (forced-colors: active) {
  .p-card__art .p-island::before { display: none; }
  .p-card:target { outline: 2px solid Highlight; }
}

/* without script the two toggles can't do anything, so they step aside */
html:not(.js) .p-settings { display: none; }