/* THE /play/ SHELF -- shipped ONLY on /play/.

   This lived at the end of arcade.css, which every arcade GAME page also
   loads -- and a game page can never render one of these classes. Measured:
   3,646 bytes on each of five pages that cannot use a byte of it, inside a
   4.0 s load budget the arcade was already close to spending.

   It follows arcade.css's own stated rule one level down: "a build with no
   arcade does not pay for it". A page that does not draw the shelf does not
   pay for the shelf. tests/test_arcade.py pins that a game page never links
   this file, so the saving cannot be undone by a later convenience. */
/* THE /play/ SHELF -- the longer kind, above the article games.
   THE FULL RECORD IS IN buildlib/emit.py (arcade_card_html and _ARCADE_MARKS),
   deliberately: that file is read at build time and never sent anywhere, while
   every byte of this one is downloaded by a child on contended wifi. Reasoning
   belongs in the file that does not ship.

   NOT `.card`: a game teaches one article's idea in two minutes, this has five
   worlds and remembers where you got to, and a child must be able to tell them
   apart. A TILE, NOT A BANNER -- the banner said "different" by being big, and
   measured at 320px it put 2,179px between the top of the page and the first
   two-minute game. Do not make these big again.

   --ink IS BOUND, NEVER INHERITED: :root's #1f6f78 sits one hex step from
   --ink-science and would read as a wrong Science card. Not a subject's, which
   would bind standalone play to a subject ink; not --board, which made five
   near-black slabs ("they are not colourful cards"); and ONE for the shelf
   rather than one each, which would put eleven colours above six regions.
   #7d2f63 is measured, not chosen by eye: the largest MINIMUM CIELAB distance
   to the six inks and --board (dE 35.7), and 7.45:1 on stock, which is AAA. */

/* Renamed from .play-longer: "longer" was measurably false of these games.
   The numbers are in buildlib/emit.py at PLAY_SAVED_TITLE. */
.play-keeps-place {
  /* Scoped, never global: this is the shelf's colour, not a seventh subject. */
  --ink-arcade: #7d2f63;
}

.play-keeps-place > h2 { margin-bottom: .35rem; }

.play-arcade-list {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
  display: grid;
  gap: var(--gap);
  /* One-up on a phone. Two and three across come from the queries below rather
     than auto-fill, so this shelf never accidentally settles into the same
     column rhythm as the games grid underneath it. */
  grid-template-columns: minmax(0, 1fr);
}

.play-arcade-card {
  --ink: var(--ink-arcade);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: stretch;
  background: var(--stock);
  border: var(--stroke) solid var(--rule);
  border-radius: var(--die-cut);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* The ink block, bled to the card's edges exactly as .card-mark is, so the two
   kinds are plainly the same site drawn to different plans. FIXED WIDTH, full
   height: it reads as the spine of a box on a shelf, and it cannot grow into
   the 90px-tall band that made the banner expensive. */
.play-arcade-mark {
  display: grid;
  place-items: center;
  background: var(--ink);
  border-right: var(--stroke) solid var(--rule);
  padding: .5rem;
}

.play-arcade-mark svg {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--stock);
}

.play-arcade-text {
  padding: .7rem .85rem;
  display: grid;
  align-content: start;
  gap: .3rem;
}

.play-arcade-text > a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--board);
  text-decoration: none;
}

/* The whole tile is the target, matching .article-list .card > a::after. The
   tile clears the 44px floor on the mark column alone. */
.play-arcade-text > a::after { content: ""; position: absolute; inset: 0; }
.play-arcade-text > a:hover { color: var(--ink); text-decoration: underline; }
.play-arcade-card:focus-within { outline: var(--stroke) solid var(--ink); outline-offset: 3px; }
.play-arcade-text > a:focus-visible { outline: none; }

/* What you actually DO — the fact a child chooses on, and a sentence rather
   than a category. CLAMPED to three lines: the summaries are written for the
   game's own page and run to three sentences, which made one tile twice the
   height of its neighbour and put the scanning problem back. Three lines carry
   the action; the rest is one tap away on the page that owns it. */
.play-arcade-do {
  margin: 0;
  font-size: .92rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--board) 82%, var(--stock));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Longer, keeps your place, not timed — the three things that make it the
   other kind. Same weight as .card-subject so the two card shapes agree about
   what a small bold fact line looks like. */
.play-arcade-facts {
  margin: .1rem 0 0;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

/* Two across as soon as a tile can hold its title and three clamped lines
   without the text column collapsing; three when all five fit in two rows.
   Both are breakpoints site.css already uses. */
@media (min-width: 34rem) {
  .play-arcade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .play-arcade-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-contrast: more) {
  .play-arcade-card { border-width: 4px; }
}