/* PuzzleM8 site styles. Scoped to .pm8 so they sit happily inside any Joomla template.
   Layout: catalogue = editorial header over a card grid; play page = game frame beside a stats/leaderboard panel. */

@font-face { font-family: 'PM8 Lexend'; src: url(../fonts/Lexend.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'PM8 Atkinson'; src: url(../fonts/Atkinson-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PM8 Atkinson'; src: url(../fonts/Atkinson-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* Plain zeros: Atkinson Hyperlegible draws 0 with a slash (it read like 9 or θ), so the digits come from Lexend, which has a plain 0. */
@font-face { font-family: 'PM8 Atkinson'; src: url(../fonts/Lexend.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'PM8 Atkinson'; src: url(../fonts/Lexend.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url(../fonts/Lexend.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url(../fonts/Lexend.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0030-0039; }

.pm8 {
  --pm8-cream: var(--cream);
  --pm8-paper: var(--paper);
  --pm8-line: var(--line);
  --pm8-ink: #25302a;
  --pm8-muted: #5c6a61;
  --pm8-sage: #7d9a83;
  --pm8-sage-deep: #4d6a55;
  --pm8-peach: var(--peach);
  --pm8-gold: #b8913a;
  --pm8-game-bg: var(--ink-deep);
  --pm8-field-line: #cdbf9f;
  --pm8-field-bg: #efe6d3;
  --pm8-cal-line: #e2d3b5;
  --pm8-cal-bg: #e6d8bd;
  --pm8-otd-bg: #efe3cd;
  --pm8-big-ink: #4a3300;
  --pm8-big-bg: #ffe39a;
  --pm8-on-dark: #fff;   /* text that sits on a dark panel, whatever the look */
  --pm8-display: 'PM8 Lexend', 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pm8-body: 'PM8 Atkinson', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--pm8-body);
  color: var(--pm8-ink);
  line-height: 1.55;
}
.pm8 *, .pm8 *::before, .pm8 *::after { box-sizing: border-box; }

/* ---------- headings ---------- */
.pm8-eyebrow {
  margin: 0;
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  color: var(--pm8-sage-deep);
}
.pm8-title {
  margin: .15em 0 .2em;
  font-family: var(--pm8-display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance;
}
.pm8-title-sm { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: .5em; }
.pm8-lede { margin: 0; max-width: 60ch; font-size: 1.05rem; color: var(--pm8-muted); }
.pm8-hero { padding-block: 1rem 2rem; border-bottom: 1px solid var(--pm8-line); margin-bottom: 2rem; }
.pm8-empty { color: var(--pm8-muted); }

/* ---------- catalogue grid ---------- */
.pm8-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.pm8-card { min-width: 0; }
.pm8-card-link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 14px; overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pm8-card-link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37, 48, 42, .12); border-color: var(--pm8-sage); }
.pm8-card-link:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--amber); }
.pm8-thumb { display: block; aspect-ratio: 800 / 390; background: var(--pm8-game-bg); overflow: hidden; }
.pm8-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-locked .pm8-thumb img { filter: grayscale(.6) brightness(.8); }
.pm8-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.pm8-card-title { font-family: var(--pm8-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.pm8-card-text { color: var(--pm8-muted); font-size: .95rem; }
.pm8-card-cta {
  margin-top: auto; padding-top: .5rem;
  font-weight: 700; font-size: .95rem; color: var(--pm8-sage-deep);
}
.pm8-card-cta::after { content: ' \2192'; }
.pm8-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pm8-tag {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  background: var(--pm8-cream); color: var(--pm8-ink); border: 1px solid var(--pm8-line);
}
.pm8-tag-daily { background: var(--pm8-peach); border-color: var(--pm8-peach); }
.pm8-tag-free { background: var(--sage-pale); border-color: #cfdfd1; color: var(--pm8-sage-deep); }
.pm8-tag-locked { background: var(--pm8-ink); border-color: var(--pm8-ink); color: var(--pm8-paper); }

/* ---------- play page ---------- */
.pm8-crumb { margin-bottom: .5rem; font-size: .95rem; }
.pm8-crumb a { color: var(--pm8-sage-deep); font-weight: 600; text-decoration: none; }
.pm8-crumb a:hover { text-decoration: underline; }

.pm8-stage { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .pm8-stage { grid-template-columns: minmax(340px, 500px) minmax(0, 1fr); }
}

.pm8-frame-wrap {
  position: relative; width: 100%; max-width: 500px; margin-inline: auto;
  height: clamp(560px, calc(var(--pm8-vh, 100vh) - 110px), 900px);
  height: clamp(560px, calc(100dvh - 110px), 900px);
  background: var(--pm8-game-bg); border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(19, 32, 43, .25);
}
.pm8-frame-wrap { display: flex; flex-direction: column; }
.pm8-frame { display: block; width: 100%; flex: 1 1 auto; min-height: 0; border: 0; }
.pm8-frame-bar { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 4px 10px; background: rgba(0, 0, 0, .18); }
.pm8-fs {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px; cursor: pointer;
  font: 700 .95rem var(--pm8-body); color: var(--pm8-on-dark); background: rgba(255, 255, 255, .2);
}
.pm8-fs-icon { font-size: 1.15rem; line-height: 1; }
.pm8-fs.is-exit .pm8-fs-icon { display: none; }
.pm8-fs:hover { background: rgba(255, 255, 255, .32); }
.pm8-fs:focus-visible { outline: 3px solid var(--card); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-frame-wrap:fullscreen { max-width: none; height: 100%; border-radius: 0; }
.pm8-frame-wrap:fullscreen .pm8-frame-bar { order: -1; justify-content: center; padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px)); background: var(--ink-deep); }
/* Older Safari on iPad only knows the -webkit- name (kept as separate rules: one unknown selector would void the rule). */
.pm8-frame-wrap:-webkit-full-screen { max-width: none; width: 100%; height: 100%; border-radius: 0; }
.pm8-frame-wrap:-webkit-full-screen .pm8-frame-bar { order: -1; justify-content: center; padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px)); background: var(--ink-deep); }
.pm8-fs.is-exit { font-size: 1rem; padding: .55rem 1.1rem; background: var(--amber); color: var(--forest); font-weight: 800; box-shadow: inset 0 -3px 0 var(--gold-deep); }
.pm8-fs.is-exit::before { content: '\2715\00a0'; }
.pm8-fs.is-exit:hover { background: var(--amber-soft); }
.pm8-fs-tip { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 3; max-width: min(90%, 420px); padding: .7rem 1rem; border-radius: 12px; background: rgba(19, 32, 43, .94); color: var(--pm8-on-dark); font: 600 .95rem/1.4 var(--pm8-body); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; }

/* Tablets: header, crumb and title take about 200px, so the whole game (and its own bottom row) fits on screen. */
@media (min-width: 601px) {
  .pm8-play .pm8-title-sm { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin: 0 0 .5rem; }
  .pm8-play .pm8-crumb { margin-bottom: 0; }
  .pm8-frame-wrap { height: clamp(560px, calc(var(--pm8-vh, 100vh) - 210px), 900px); height: clamp(560px, calc(100dvh - 210px), 900px); }
}
/* The second Full screen button sits beside the title on laptops; on phones and tablets the bar under the game has it. */
.pm8-fs-side { display: none; }
/* Laptops and desktops (1.22.1): the game fills the space. It sits right under the site header and is as tall as the
   screen allows (up to 900px), with the title, crumb and panel in a column beside it. The game used to be 500 x 504px,
   which hid Sudoku's last row, pushed keypads below the edge and stacked buttons on top of each other. */
@media (min-width: 900px) {
  .pm8-play.pm8-play-on { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 340px); grid-template-rows: auto auto 1fr; column-gap: 1.5rem; align-items: start; }
  .pm8-play-on .pm8-stage { display: contents; }
  .pm8-play-on .pm8-frame-wrap { grid-column: 1; grid-row: 1 / span 3; max-width: none; height: clamp(520px, calc(var(--pm8-vh, 100vh) - 100px), 900px); height: clamp(520px, calc(100dvh - 100px), 900px); }
  .pm8-play-on .pm8-crumb { grid-column: 2; grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; }
  .pm8-play-on .pm8-title-sm { grid-column: 2; grid-row: 2; font-size: clamp(1.5rem, 2.2vw, 2rem); margin: .1rem 0 .75rem; }
  .pm8-play-on .pm8-panel { grid-column: 2; grid-row: 3; }
  .pm8-play-on .pm8-frame-bar { display: none; }
  .pm8-play-on .pm8-frame-wrap:fullscreen .pm8-frame-bar { display: flex; }
  .pm8-play-on .pm8-fs-side { display: inline-flex; color: var(--pm8-ink); background: var(--pm8-paper); border-color: var(--pm8-line); font-size: .9rem; padding: .4rem .8rem; }
  .pm8-play-on .pm8-fs-side:hover { background: var(--card); border-color: var(--pm8-sage); }
  .pm8-play-on .pm8-fs-side:focus-visible { outline-color: var(--forest); }
  .pm8-play-on .pm8-fs-side[hidden] { display: none; }
}
/* Scrolling inside a game never scrolls the page as well. */
.pm8-frame { overscroll-behavior: contain; }
/* Phones: the game takes the whole screen height, with a smaller title above it. */
@media (max-width: 600px) {
  .pm8-play .pm8-title-sm { font-size: 1.6rem; margin: .1rem 0 .6rem; }
  .pm8-play .pm8-crumb { margin-bottom: .2rem; }
  /* 1.26: sized to the space below the sticky site header (host.js sets --pm8-head-h), so no part of the game is under it. */
  .pm8-frame-wrap { height: calc(var(--pm8-vh, 100vh) - var(--pm8-head-h, 73px) - 12px); height: calc(100dvh - var(--pm8-head-h, 73px) - 12px); min-height: 440px; max-height: none; border-radius: 12px; }
  .pm8-stage { gap: 1rem; }
}

/* 1.27: phones held sideways (and any very short window, such as a laptop at 400% zoom). The site header no longer stays
   at the top (template.css), so the game box can be the full height of the screen. The Full screen bar moves to a slim
   strip down the right-hand side, so the game keeps every pixel of height. host.js lines the game up with the top of the
   screen when it's tapped, and shows a "turn your phone" note if a game still can't fit. */
@media (orientation: landscape) and (max-height: 500px) {
  .pm8-frame-wrap, .pm8-play-on .pm8-frame-wrap {
    height: calc(var(--pm8-vh, 100vh) - 12px); height: calc(100dvh - 12px);
    min-height: 0; max-height: none; max-width: none; border-radius: 12px;
    flex-direction: row;
  }
  .pm8-frame-bar { flex-direction: column; justify-content: flex-end; padding: 6px; }
  .pm8-frame-bar .pm8-fs { flex-direction: column; justify-content: center; gap: .1rem; width: 64px; min-height: 64px; padding: .35rem .25rem; font-size: .78rem; line-height: 1.15; text-align: center; }
  .pm8-frame-wrap:fullscreen .pm8-frame-bar { flex-direction: column; justify-content: center; padding: 6px calc(6px + env(safe-area-inset-left, 0px)); }
  .pm8-frame-wrap:-webkit-full-screen .pm8-frame-bar { flex-direction: column; justify-content: center; padding: 6px calc(6px + env(safe-area-inset-left, 0px)); }
  .pm8-frame-bar .pm8-fs.is-exit { font-size: .82rem; padding: .35rem .25rem; }
  .pm8-frame-bar .pm8-fs.is-exit::before { content: '\2715'; display: block; font-size: 1.1rem; }
  .pm8-fs-tip { top: 12px; }
  /* The "turn your phone" note leaves the Full screen strip free, so it can still be tapped. */
  .pm8-frame-bar:not([hidden]) ~ .pm8-turn { right: 76px; }
  .pm8-play .pm8-title-sm { font-size: 1.4rem; margin: 0 0 .4rem; }
  .pm8-play .pm8-crumb { margin-bottom: 0; }
}
/* "Turn your phone" note (1.27): shown over a game that can't fit a phone held sideways. "Play anyway" closes it. */
.pm8-turn { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1.25rem; background: rgba(19, 32, 43, .94); color: var(--pm8-on-dark); text-align: center; }
.pm8-turn[hidden] { display: none; }
.pm8-turn-icon { font-size: 2.2rem; line-height: 1; }
.pm8-turn p { margin: 0; max-width: 32ch; font: 600 1.05rem/1.4 var(--pm8-body); }
.pm8-turn .pm8-turn-small { font-weight: 400; font-size: .95rem; color: #dfe9e2; }
.pm8-turn button { min-height: 44px; padding: .5rem 1.2rem; border: 0; border-radius: 10px; background: var(--amber); color: var(--forest); font: 800 1rem var(--pm8-body); cursor: pointer; box-shadow: inset 0 -3px 0 var(--gold-deep); }
.pm8-turn button:focus-visible { outline: 3px solid var(--card); outline-offset: 2px; }
/* No full screen on this device (iPhone Safari): the empty bar would only take space from the game. */
.pm8-frame-bar[hidden] { display: none; }

.pm8-panel {
  display: flex; flex-direction: column; gap: 1.25rem; min-width: 0;
  background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 14px;
  padding: 1.25rem 1.4rem;
}
.pm8-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.pm8-stat { display: flex; flex-direction: column; gap: .15rem; }
.pm8-stat-label { font-size: .9rem; font-weight: 700; color: var(--pm8-muted); }
.pm8-stat-value { font-family: var(--pm8-body); font-weight: 800; font-size: 2.1rem; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.pm8-stat-value small { font-family: var(--pm8-body); font-size: .9rem; font-weight: 600; color: var(--pm8-muted); }
/* Nothing yet: a friendly line instead of a big 0 (host.js switches this after a score is saved). */
.pm8-stat-empty { display: none; font-size: .95rem; color: var(--pm8-muted); }
.pm8-stat.is-empty .pm8-stat-value { display: none; }
.pm8-stat.is-empty .pm8-stat-empty { display: block; }
.pm8-about { display: grid; gap: .5rem; }
.pm8-about p { margin: 0; }
.pm8-about-text { color: var(--pm8-ink); }
.pm8-about-help { font-size: .92rem; color: var(--pm8-muted); }
.pm8-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.pm8-guest p { margin: 0 0 .75rem; color: var(--pm8-muted); }

.pm8-toast {
  margin: 0; padding: .65rem .9rem; border-radius: 10px;
  background: var(--sage-pale); color: var(--pm8-sage-deep); font-weight: 600; font-size: .95rem;
}
.pm8-toast.is-warn { background: #fbe7dc; color: #8a3f1c; }

.pm8-board h2 { margin: 0; font-family: var(--pm8-display); font-weight: 700; font-size: 1.6rem; }
.pm8-board-note { margin: .1rem 0 .75rem; font-size: .85rem; color: var(--pm8-muted); }
.pm8-board ol { list-style: none; counter-reset: pm8; margin: 0; padding: 0; }
.pm8-board li {
  counter-increment: pm8;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .5rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--pm8-line);
}
.pm8-board li::before { content: counter(pm8); font-weight: 700; color: var(--pm8-muted); font-variant-numeric: tabular-nums; }
.pm8-board li:nth-child(1)::before { color: var(--pm8-gold); }
.pm8-board li.is-me { background: #fbf3e2; }
.pm8-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm8-score { font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.pm8-board-empty { margin: 0; color: var(--pm8-muted); font-size: .95rem; }

.pm8-locked { max-width: 60ch; padding: 1.5rem; background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 14px; }
.pm8-locked h2 { margin-top: 0; font-family: var(--pm8-display); font-weight: 700; font-size: 1.8rem; }

/* ---------- buttons ---------- */
.pm8-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.pm8-btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 10px;
  background: var(--pm8-sage-deep); color: var(--pm8-on-dark); font-weight: 700; text-decoration: none;
  border: 1px solid var(--pm8-sage-deep);
}
.pm8-btn:hover { background: var(--pm8-ink); border-color: var(--pm8-ink); color: var(--pm8-on-dark); }
.pm8-btn-quiet { background: transparent; color: var(--pm8-sage-deep); }
.pm8-btn-quiet:hover { background: var(--pm8-cream); color: var(--pm8-ink); }
.pm8-btn:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }

.pm8 [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pm8-card-link { transition: none; }
  .pm8-card-link:hover { transform: none; }
}

/* ---------- homepage ---------- */
.pm8-home { display: flex; flex-direction: column; gap: 56px; }
.pm8-hero-title { margin: .2em 0 .35em; font-family: var(--pm8-display); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; color: var(--pm8-ink); }
.pm8-hero-art { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; transform: rotate(-6deg); max-width: 380px; justify-self: center; width: 100%; }
.pm8-ht { aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; font: 800 clamp(1.4rem, 3.2vw, 2.3rem)/1 var(--pm8-display); color: var(--forest);
  background: var(--sand); box-shadow: inset 0 -6px 0 #c9b894, 0 10px 22px rgba(31,58,46,.12); animation: pm8-bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.pm8-ht-gold { background: var(--amber); box-shadow: inset 0 -6px 0 var(--gold-deep), 0 10px 22px rgba(31,58,46,.12); }
.pm8-ht-mint { background: var(--mint); box-shadow: inset 0 -6px 0 #1f9e68, 0 10px 22px rgba(31,58,46,.12); }
.pm8-ht-peach { background: var(--peach); box-shadow: inset 0 -6px 0 #d49c79, 0 10px 22px rgba(31,58,46,.12); }
@keyframes pm8-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(2deg); } }
.pm8-btn { font-family: var(--pm8-display); padding: .75rem 1.25rem; }
.pm8-btn-gold { background: var(--amber); border-color: var(--amber); color: var(--forest); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.pm8-btn-gold:hover { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--forest); }
.pm8-btn-light { background: transparent; border-color: rgba(255,255,255,.6); color: var(--pm8-on-dark); }
.pm8-btn-light:hover { background: rgba(255,255,255,.12); border-color: var(--pm8-on-dark); color: var(--pm8-on-dark); }

.pm8-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pm8-sec-head h2, .pm8-how h2 { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--pm8-display); }
.pm8-sec-head p { margin: 0; color: var(--pm8-muted); max-width: 52ch; }

.pm8-today-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* Wide screens: one even row (four daily picks, or six games for a child). */
@media (min-width: 900px) { .pm8-today-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
/* Phones: today's puzzles become a row you swipe through, instead of a long stack. */
@media (max-width: 640px) {
  .pm8-today-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .pm8-today-row > li { scroll-snap-align: start; }
}
.pm8-day { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 16px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.pm8-day:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37,48,42,.12); }
.pm8-day-img { display: block; aspect-ratio: 800 / 390; overflow: hidden; background: var(--ink-deep); }
.pm8-day-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm8-day-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pm8-day-title { font: 700 1.05rem/1.15 var(--pm8-display); }
.pm8-day-meta { font-size: .95rem; color: var(--pm8-muted); }
.pm8-day.is-done { border-color: #9fd9b8; }
.pm8-day.is-done .pm8-day-img img { filter: saturate(.5) brightness(.9); }
.pm8-done { color: #1f7a4f; font-weight: 700; }
.pm8-done::before { content: '\2713  '; }

.pm8-how { background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 24px; padding: clamp(22px, 4vw, 40px); }
.pm8-steps { list-style: none; counter-reset: step; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pm8-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 6px; padding-top: 52px; position: relative; }
.pm8-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font: 800 1.2rem/1 var(--pm8-display); background: var(--sand); box-shadow: inset 0 -4px 0 #c9b894; color: var(--forest); }
.pm8-steps li:nth-child(2)::before { background: var(--amber); box-shadow: inset 0 -4px 0 var(--gold-deep); }
.pm8-steps li:nth-child(3)::before { background: var(--mint); box-shadow: inset 0 -4px 0 #1f9e68; }
.pm8-steps b { font: 700 1.15rem/1.2 var(--pm8-display); }
.pm8-steps span { color: var(--pm8-muted); }

.pm8-join { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; background: var(--forest); color: #dfe9e2; border-radius: 24px; padding: clamp(22px, 4vw, 40px); }
.pm8-join h2 { margin: 0 0 .3em; font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--pm8-display); color: var(--pm8-on-dark); }
.pm8-join p { margin: 0; max-width: 46ch; color: #b9cbbf; }

@media (max-width: 760px) {
  .pm8-hero-art { max-width: 300px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .pm8-ht { animation: none; } .pm8-day { transition: none; } .pm8-day:hover { transform: none; } }

/* ---------- 1.1.0: profile line, share card, danger button ---------- */
.pm8-playing { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .5rem .75rem; background: var(--pm8-cream); border-radius: 10px; font-size: .95rem; }
.pm8-playing a { font-weight: 700; color: var(--pm8-sage-deep); }
.pm8-share { margin: .75rem 0; display: flex; flex-direction: column; gap: .6rem; }
.pm8-share img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--pm8-line); }
.pm8-noscript { padding: 1rem; color: var(--pm8-on-dark); }
.pm8-btn-danger { background: #a8361b; border-color: #a8361b; color: var(--pm8-on-dark); }
.pm8-btn-danger:hover { background: #7d2611; border-color: #7d2611; }
button.pm8-btn, summary.pm8-btn { font: inherit; font-family: var(--pm8-display); font-weight: 700; cursor: pointer; min-height: 44px; }

/* ---------- favourites and notes (1.6) ---------- */
.pm8-card { position: relative; }
.pm8-star {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem;
  border-radius: 999px; border: 2px solid var(--pm8-line); background: var(--pm8-paper); color: var(--pm8-ink);
  font: 700 .95rem/1 var(--pm8-body); cursor: pointer;
}
.pm8-star > span:first-child { font-size: 1.25rem; color: var(--gold-deep); }
.pm8-star.is-on { background: var(--amber-wash); border-color: var(--amber); }
.pm8-star:focus-visible { outline: 3px solid var(--pm8-sage-deep); outline-offset: 2px; }
.pm8-star-card { position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pm8-star-card .pm8-star-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm8-mine-game { display: grid; gap: .6rem; margin: .8rem 0; }
.pm8-mine-notes-box summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.pm8-note { width: 100%; min-height: 6rem; padding: .7rem .8rem; border-radius: 12px; border: 2px solid var(--pm8-line); background: var(--pm8-paper);
  font: 1rem/1.5 var(--pm8-body); color: var(--pm8-ink); resize: vertical; }
.pm8-note:focus { outline: 3px solid var(--pm8-sage); border-color: var(--pm8-sage-deep); }
.pm8-note-foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--pm8-muted); margin-top: .25rem; }
.pm8-note-status.is-bad, .pm8-mine-status.is-bad { color: #a33b2b; font-weight: 700; }
/* Saved: green with a tick, right under the box it belongs to (it used to be small grey text far off to the right). */
.pm8-note-foot { max-width: 32rem; }
.pm8-note-status.is-ok, .pm8-mine-status.is-ok { color: #1f6b3a; font-weight: 700; }
#pm8-mine-status:empty, .pm8-mine-status.is-ok { display: none; }
.pm8-mine-more { margin: .4rem 0 0; font-size: .92rem; }
.pm8-mine-sec { margin: 1.6rem 0; }
.pm8-mine-sec h2 { font-family: var(--pm8-display); font-size: 1.3rem; margin: 0 0 .7rem; }
.pm8-mine-guest { background: var(--amber-wash); border: 2px solid #ffd77a; border-radius: 14px; padding: .8rem 1rem; }
.pm8-mine-note { margin: 0 0 1rem; }
.pm8-mine-note h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.pm8-mine-status { min-height: 1.4em; color: var(--pm8-muted); font-size: .9rem; }
#all-games { scroll-margin-top: 90px; }

/* A game picture that fails to load: show the game's name on a coloured panel instead of an empty box. */
.pm8-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 800 / 390; background: linear-gradient(135deg, #2f6b52, #4f9a76 60%, #f2b64a); }
.pm8-noimg::after { content: attr(data-title); color: var(--pm8-on-dark); font: 800 1.35rem/1.15 var(--pm8-head, 'Lexend', sans-serif); text-align: center; padding: 0 1rem; text-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* ---------- 1.18: family home page, filters, tags ---------- */
.pm8-trust { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; color: var(--pm8-ink); }
.pm8-trust li { display: flex; gap: .55rem; align-items: baseline; font-weight: 700; }
.pm8-trust li span { flex: 0 0 auto; }
.pm8-free { margin: 1rem 0 0; font-size: .95rem; color: var(--pm8-muted); max-width: 52ch; }
.pm8-free a { color: var(--pm8-sage-deep); font-weight: 700; }
.pm8-how-more { margin: 1.2rem 0 0; }
.pm8-how-more a { color: var(--pm8-sage-deep); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
/* Phones: the hero is a short welcome, not a whole screen. The letter tiles are left out. */
@media (max-width: 760px) {
  .pm8-hero-art { display: none; }
  .pm8-hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .pm8-eyebrow { font-size: .85rem; }
  .pm8-hero-title { margin: .15em 0 .3em; }
  /* The header and the "Set up your family" panel lower down already offer Join, so the hero keeps one button. */
  .pm8-trust { margin-top: .9rem; font-size: .85rem; gap: .3rem; }
  .pm8-trust li { font-weight: 700; }
  .pm8-free { font-size: .85rem; margin-top: .6rem; }
  .pm8-home { gap: 36px; }
}
/* Phones: compact game cards (picture beside the words), so the full list isn't miles long. */
@media (max-width: 640px) {
  .pm8-grid { gap: .75rem; }
  .pm8-card-link { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .pm8-card-link .pm8-thumb { aspect-ratio: auto; height: 100%; min-height: 112px; }
  .pm8-card-link .pm8-thumb.pm8-noimg::after { font-size: .9rem; }
  .pm8-card-body { padding: .7rem .8rem .8rem; gap: .3rem; }
  .pm8-card-title { font-size: 1.2rem; }
  .pm8-card-body .pm8-tags { padding-right: 46px; }
  .pm8-card-text { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pm8-card-cta { display: none; }
  .pm8-tag { font-size: .75rem; padding: .1rem .5rem; }
}

.pm8-tag-age { background: var(--forest); border-color: var(--forest); color: var(--pm8-on-dark); }
.pm8-tag-subject { background: var(--sage-pale); border-color: #cfdfd1; color: #2f4a37; }

.pm8-filter-count { margin: 0; font-size: .92rem; color: var(--pm8-muted); }
.pm8-filter-none { padding: 1.2rem; background: var(--pm8-paper); border: 1px dashed var(--pm8-line); border-radius: 14px; }
.pm8-filter-none p { margin: 0 0 .6rem; }
/* Phones: the subject chips scroll sideways in one row rather than taking half the screen. */
@media (max-width: 640px) {
}
.pm8-day:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--amber); }


/* Today's date at the top of the home page. */
.pm8-date { margin: 0 0 .35rem; font: 700 .95rem/1.3 var(--pm8-head, 'Lexend', sans-serif); color: var(--pm8-muted, #5b6b62); }

/* ---------- "This day in history" banner (home page, under the date line) ---------- */
.pm8-otd { margin: .2rem 0 1rem; padding: .75rem .9rem .8rem; max-width: 40rem;
  background: var(--cream-2); border: 1px solid var(--pm8-line); border-left: 5px solid var(--pm8-gold); border-radius: 14px; }
.pm8-otd-label { margin: 0 0 .4rem; font: 700 .85rem/1.3 var(--pm8-display); letter-spacing: .02em; color: var(--pm8-sage-deep); }
.pm8-otd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pm8-otd-item { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
.pm8-otd-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--pm8-paper); border: 1px solid var(--pm8-line); font-size: 1.1rem; line-height: 1; }
.pm8-otd-body { min-width: 0; font-size: 1rem; line-height: 1.5; color: var(--pm8-ink); overflow-wrap: anywhere; }
.pm8-otd-year { display: inline-block; margin-right: .35rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--pm8-ink); color: var(--pm8-paper); font: 700 .85rem/1.6 var(--pm8-display); font-variant-numeric: lining-nums tabular-nums; }
.pm8-otd-src { margin-left: .35rem; font-size: .8rem; font-weight: 600; color: var(--pm8-sage-deep); white-space: nowrap; }
.pm8-otd-src:focus-visible, .pm8-otd-btn:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); border-radius: 6px; }
.pm8-otd-nav { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.pm8-otd-btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .6rem; border-radius: 12px;
  border: 1px solid var(--pm8-line); background: var(--pm8-paper); color: var(--pm8-ink); font: 700 1.25rem/1 var(--pm8-display); cursor: pointer; }
.pm8-otd-btn:hover { border-color: var(--pm8-sage); background: var(--card); }
.pm8-otd-pause { margin-left: auto; font-size: .85rem; }
.pm8-otd-ico-play, .pm8-otd-pause[aria-pressed="true"] .pm8-otd-ico-pause { display: none; }
.pm8-otd-pause[aria-pressed="true"] .pm8-otd-ico-play { display: inline; }
.pm8-otd-count { min-width: 4.5em; text-align: center; font-size: .9rem; font-weight: 600; color: var(--pm8-muted); font-variant-numeric: tabular-nums; }
.pm8-otd.is-js .pm8-otd-item.is-on { animation: pm8-otd-in .35s ease-out; }
@keyframes pm8-otd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pm8-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .pm8-otd.is-js .pm8-otd-item.is-on { animation: none; }
}
@media (max-width: 480px) {
  .pm8-otd { padding: .65rem .7rem; }
  .pm8-otd-body { font-size: .95rem; }
}

/* Phones: keep the hero short so today's games show on the first screen. The family promises are repeated in
   "How it works" further down, so they're left out here; the "This day in history" card is made compact. */
@media (max-width: 600px) {
  .pm8-otd { margin: .1rem 0 .7rem; padding: .5rem .6rem; }
  .pm8-otd-label { margin-bottom: .2rem; }
  .pm8-otd-emoji { width: 1.7rem; height: 1.7rem; }
  .pm8-otd-body { font-size: .9rem; line-height: 1.4; }
  .pm8-otd-nav { margin-top: .25rem; }
  .pm8-hero-title { margin-bottom: .3rem; }
  .pm8-hero-copy .pm8-lede-subjects { display: none; }   /* phones: the subject filters below say this; keep the grown-ups line */
  .pm8-free { margin-bottom: 0; }
}

/* ---------- 1.21.0: Stuck on homework? (home band and the search page) ---------- */
.pm8-help .hp-form { margin: .8rem 0 .4rem; }
.pm8-help .hp-label { display: block; margin-bottom: .35rem; font: 700 1rem/1.3 var(--pm8-display); }
.pm8-help .hp-q { width: 100%; box-sizing: border-box; min-height: 52px; padding: .7rem .9rem; font: 1.1rem/1.3 var(--pm8-body);
  border: 2px solid var(--pm8-line); border-radius: 12px; background: var(--card); color: var(--pm8-ink); }
.pm8-help .hp-q:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-help .hp-subs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.pm8-help .hp-sub { min-height: 44px; padding: .4rem .85rem; border-radius: 999px; border: 2px solid var(--pm8-line); background: var(--pm8-paper);
  font: 600 .95rem/1.2 var(--pm8-display); color: var(--pm8-ink); cursor: pointer; }
.pm8-help .hp-sub[aria-pressed="true"] { background: var(--pm8-sage-deep); border-color: var(--pm8-sage-deep); color: var(--pm8-on-dark); }
.pm8-help .hp-sub:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; }
.pm8-help .hp-count { min-height: 1.4em; margin: .8rem 0 .4rem; color: var(--pm8-muted); font-weight: 600; }
.pm8-help .hp-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.pm8-help .hp-link { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; align-items: center; padding: .75rem .9rem; min-height: 44px;
  background: var(--pm8-paper); border: 2px solid var(--pm8-line); border-radius: 12px; color: var(--pm8-ink); text-decoration: none; }
.pm8-help .hp-link:hover { border-color: var(--pm8-sage); }
.pm8-help .hp-link:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-help .hp-t { grid-column: 1; font: 700 1.02rem/1.35 var(--pm8-display); overflow-wrap: anywhere; }
.pm8-help .hp-meta { grid-column: 1; font-size: .9rem; color: var(--pm8-muted); }
.pm8-help .hp-chip { display: inline-block; padding: 0 .5rem; border-radius: 999px; background: var(--pm8-cream); color: var(--pm8-sage-deep); font-weight: 700; }
.pm8-help .hp-go { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; color: var(--pm8-sage-deep); white-space: nowrap; }
.pm8-help .hp-tips ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
@media (max-width: 600px) { .pm8-help .hp-go { display: none; } }

/* ---------- 1.25.0: home page with search, subject tiles, shelves and one age control ----------
   The idea: the home page is a well-kept games cupboard. A search box up top, a row of chunky subject tiles (the same
   tile shape as the logo) that jump to a shelf, and one shelf per subject with small cards. Grown-ups get their own
   calm corner at the end. Each subject keeps one colour, on its tile and on its shelf. */
.pm8-home { gap: 44px; }
.pm8-tone-gold { --tone: var(--amber); background: var(--tone); } .pm8-tone-mint { --tone: var(--mint); background: var(--tone); } .pm8-tone-sky { --tone: #a9d8f5; background: var(--tone); }
.pm8-tone-peach { --tone: var(--peach); background: var(--tone); } .pm8-tone-lilac { --tone: #d9cbf4; background: var(--tone); } .pm8-tone-teal { --tone: #8fd6cf; background: var(--tone); }
.pm8-tone-lemon { --tone: #fbe38e; background: var(--tone); } .pm8-tone-coral { --tone: #ffa98f; background: var(--tone); } .pm8-tone-rose { --tone: #f7c4d4; background: var(--tone); }
.pm8-tone-sage { --tone: #bcd7c0; background: var(--tone); } .pm8-tone-sand { --tone: #e8d3a8; background: var(--tone); } .pm8-tone-cream { --tone: var(--sand); background: var(--tone); }

/* Top: greeting and the search box */
.pm8-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy art" "search art"; gap: 0 40px; align-items: center;
  background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 28px; padding: clamp(20px, 4vw, 44px); }
.pm8-top-copy { grid-area: copy; }
.pm8-top .pm8-hero-title { margin: 0 0 .3em; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.pm8-top .pm8-lede { font-size: 1.12rem; max-width: 52ch; }
.pm8-top .pm8-hero-art { grid-area: art; width: 250px; max-width: none; gap: 10px; }
.pm8-top .pm8-ht { border-radius: 14px; font-size: 1.6rem; }
.pm8-search { grid-area: search; position: relative; margin-top: 22px; max-width: 760px; }
.pm8-search-label { display: block; margin-bottom: 8px; font: 700 1.05rem/1.3 var(--pm8-display); color: var(--pm8-ink); }
.pm8-search-box { position: relative; display: flex; align-items: center; gap: 6px; min-height: 62px; padding: 6px 6px 6px 16px;
  background: var(--card); border: 2px solid var(--pm8-field-line); border-radius: 18px; box-shadow: inset 0 -4px 0 var(--pm8-field-bg); }
.pm8-search-box:focus-within { border-color: var(--pm8-ink); outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--amber); }
.pm8-search-ico { flex: 0 0 auto; color: var(--pm8-sage-deep); }
.pm8-q { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0; background: transparent; padding: 0 4px; font: 1.15rem/1.3 var(--pm8-body); color: var(--pm8-ink); }
.pm8-q:focus { outline: none; }
.pm8-q::placeholder { color: #6d7a71; opacity: 1; }
.pm8-q::-webkit-search-cancel-button { cursor: pointer; }
.pm8-search-go { flex: 0 0 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--amber); color: var(--forest); font: 700 1rem/1 var(--pm8-display); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.pm8-search-go:hover { background: var(--amber-soft); }
.pm8-search-go:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; }
.pm8-search-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.pm8-search-try > span { font-weight: 700; color: var(--pm8-muted); margin-right: 2px; }
.pm8-try { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--pm8-line);
  background: var(--pm8-cream); color: var(--pm8-ink); font: 600 .95rem/1 var(--pm8-display); text-decoration: none; }
.pm8-try:hover { border-color: var(--pm8-sage); background: var(--card); }
.pm8-try:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }

/* The results panel under the box */
.pm8-sres { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: min(68vh, 540px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--pm8-paper); border: 2px solid var(--pm8-line); border-radius: 18px; box-shadow: 0 22px 48px rgba(31, 58, 46, .2); }
.pm8-sgh { padding: 10px 12px 4px; font: 700 .85rem/1.3 var(--pm8-display); color: var(--pm8-muted); }
.pm8-sopt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 52px; padding: 8px 10px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; color: var(--pm8-ink); }
.pm8-sopt:hover { background: var(--pm8-cream); }
.pm8-sopt[aria-selected="true"] { background: var(--amber-wash); border-color: var(--gold-deep); }
.pm8-sopt-img { grid-row: 1 / span 2; width: 72px; aspect-ratio: 800 / 390; border-radius: 8px; overflow: hidden; background: var(--pm8-game-bg); }
.pm8-sopt-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm8-sopt-chip { grid-row: 1 / span 2; min-width: 72px; padding: 3px 8px; border-radius: 999px; text-align: center; background: var(--sage-pale); color: #2f4a37; font: 700 .78rem/1.3 var(--pm8-body); }
.pm8-sopt-t { font: 700 1rem/1.3 var(--pm8-display); overflow-wrap: anywhere; }
.pm8-sopt-m { font-size: .88rem; color: var(--pm8-muted); }
.pm8-sopt-all { display: flex; margin-top: 4px; border-top-color: var(--pm8-line); border-radius: 0 0 12px 12px; font: 700 .98rem/1.3 var(--pm8-display); color: var(--pm8-sage-deep); }
.pm8-sopt-all[aria-selected="true"] { border-radius: 12px; }
.pm8-snote { padding: 12px; color: var(--pm8-muted); }

/* Subject tiles */
.pm8-subj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pm8-subj { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; height: 100%;
  min-height: 76px; padding: 12px; background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 18px; color: var(--pm8-ink); text-decoration: none; }
.pm8-subj:hover { border-color: var(--pm8-sage); box-shadow: 0 8px 20px rgba(37, 48, 42, .1); }
.pm8-subj:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--amber); }
.pm8-subj-ico, .pm8-shelf-ico { display: grid; place-items: center; border-radius: 13px; box-shadow: inset 0 -5px 0 rgba(31, 58, 46, .16); line-height: 1; }
.pm8-subj-ico { grid-row: 1 / span 2; width: 50px; height: 50px; font-size: 1.55rem; }
.pm8-subj-name { align-self: end; font: 700 .98rem/1.15 var(--pm8-display); overflow-wrap: anywhere; }
.pm8-subj-n { align-self: start; font-size: .85rem; color: var(--pm8-muted); }
@media (max-width: 1099px) { .pm8-subj-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Today, Games for you and favourites: a compact strip of small cards with the picture beside the words */
.pm8-today .pm8-sec-head { margin-bottom: 12px; }
.pm8-today .pm8-sec-head h2, .pm8-all .pm8-sec-head h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
.pm8-today-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
@media (min-width: 900px) { .pm8-today-row { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
.pm8-day { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; min-height: 80px; border-radius: 14px; }
.pm8-day-img { aspect-ratio: auto; height: 100%; min-height: 80px; }
.pm8-day-img.pm8-noimg::after { font-size: .8rem; }
.pm8-day-body { justify-content: center; padding: 10px 12px; gap: 2px; }
.pm8-day-meta { font-size: .88rem; }
.pm8-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--pm8-sage-deep); }

/* 1.25.1: today's date and "On this day in history" at the very top: a calendar tile, the date, then today's facts. */
.pm8-otd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cal main nav"; gap: 8px 18px; align-items: center;
  max-width: none; margin: 0; padding: 12px 12px 12px 14px; background: var(--cream-2); border: 1px solid var(--pm8-otd-bg); border-radius: 18px; }
.pm8-cal { grid-area: cal; display: flex; flex-direction: column; width: 62px; height: 66px; overflow: hidden; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--pm8-cal-bg); box-shadow: 0 4px 0 var(--pm8-cal-line); text-align: center; }
.pm8-cal-m { padding: 3px 0 2px; background: var(--pm8-sage-deep); color: var(--pm8-on-dark); font: 700 .72rem/1.2 var(--pm8-display); letter-spacing: .1em; text-transform: uppercase; }
.pm8-cal-d { flex: 1; display: grid; place-items: center; font: 700 1.75rem/1 var(--pm8-display); color: var(--pm8-ink); font-variant-numeric: tabular-nums; }
.pm8-otd-main { grid-area: main; min-width: 0; }
.pm8-otd-nav { grid-area: nav; }
.pm8-otd-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 4px; }
.pm8-otd-label .pm8-date { display: inline; margin: 0; font: 700 1.15rem/1.3 var(--pm8-display); color: var(--pm8-ink); }
.pm8-otd-title { font: 700 .82rem/1.3 var(--pm8-display); letter-spacing: .02em; color: var(--pm8-sage-deep); }
.pm8-otd-label:last-child { margin: 0; }
.pm8-otd-body { font-size: .95rem; line-height: 1.45; }
.pm8-home > .pm8-dayline + .pm8-top { margin-top: -18px; }
.pm8-otd-emoji { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.pm8-otd-nav { margin: 0; }
.pm8-otd-btn { border-radius: 12px; }
.pm8-otd-pause { margin-left: 0; }
.pm8-otd-list { align-content: center; }

/* All games: heading, "Who's playing?" and the shelves */
#all-games, .pm8-shelf, #grown-ups, #favourites, #today { scroll-margin-top: 92px; }
.pm8-all-head { display: grid; gap: 14px; margin-bottom: 26px; }
.pm8-all-head .pm8-sec-head { margin: 0; }
.pm8-age { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--pm8-line); border-radius: 18px; background: var(--pm8-paper); min-width: 0; }
.pm8-age-legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font: 700 1.05rem/1.3 var(--pm8-display); }
.pm8-age-opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.pm8-age-opt { position: relative; flex: 1 1 0; min-width: 120px; cursor: pointer; }
.pm8-age-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pm8-age-opt span { display: grid; gap: 1px; height: 100%; min-height: 56px; padding: 8px 12px; border: 2px solid var(--pm8-line); border-radius: 14px; background: var(--card); }
.pm8-age-opt b { font: 700 1rem/1.2 var(--pm8-display); }
.pm8-age-opt small { font-size: .8rem; line-height: 1.25; color: var(--pm8-muted); }
.pm8-age-opt:hover span { border-color: var(--pm8-sage); }
.pm8-age-opt input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--pm8-on-dark); }
.pm8-age-opt input:checked + span small { color: #cfe0d4; }
.pm8-age-opt input:checked + span b::before { content: '\2713\00a0'; }
.pm8-age-opt input:focus-visible + span { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-filter-count { margin: 0; font-size: .92rem; color: var(--pm8-muted); }
.pm8-filter-none { margin-top: 1rem; padding: 1.2rem; background: var(--pm8-paper); border: 1px dashed var(--pm8-line); border-radius: 14px; }
.pm8-filter-none p { margin: 0 0 .6rem; }

/* Shelves pack together like a bookcase: a shelf is as wide as its games, so short shelves sit side by side. */
.pm8-shelves { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 34px 16px; }
.pm8-shelf { grid-column: span 6; min-width: 0; --cols: 6; }
.pm8-n1 { grid-column: span 1; --cols: 1; } .pm8-n2 { grid-column: span 2; --cols: 2; } .pm8-n3 { grid-column: span 3; --cols: 3; }
.pm8-n4 { grid-column: span 4; --cols: 4; } .pm8-n5 { grid-column: span 5; --cols: 5; }
.pm8-shelf.is-open { grid-column: 1 / -1; --cols: 6; }
@media (max-width: 1099px) {
  .pm8-shelves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm8-n4, .pm8-n5, .pm8-n6, .pm8-shelf { --cols: 4; }
  .pm8-n4, .pm8-n5, .pm8-n6 { grid-column: span 4; }
  .pm8-n1 { --cols: 1; } .pm8-n2 { --cols: 2; } .pm8-n3 { --cols: 3; }
  .pm8-shelf.is-open { --cols: 4; }
}
.pm8-shelf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; margin-bottom: 12px; }
.pm8-shelf-ico { flex: 0 0 auto; width: 38px; height: 38px; font-size: 1.15rem; border-radius: 11px; box-shadow: inset 0 -4px 0 rgba(31, 58, 46, .16); }
.pm8-shelf-head h3 { margin: 0; font: 800 1.2rem/1.2 var(--pm8-display); }
.pm8-shelf-head h3:focus { outline: none; }
.pm8-shelf-head h3:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 3px; border-radius: 4px; }
.pm8-shelf-n { font-size: .88rem; color: var(--pm8-muted); }
.pm8-shelf-more { margin-left: auto; min-height: 44px; padding: 0 14px; border: 2px solid var(--pm8-line); border-radius: 999px; background: var(--pm8-paper); cursor: pointer;
  color: var(--pm8-sage-deep); font: 700 .9rem/1 var(--pm8-display); white-space: nowrap; }
.pm8-shelf-more:hover { border-color: var(--pm8-sage); background: var(--card); }
.pm8-shelf-more:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-shelf-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.pm8-home-js .pm8-shelf:not(.is-open) .is-over, .pm8-gc.is-age-hidden { display: none; }

/* Compact game card */
.pm8-gc { min-width: 0; }
.pm8-gc-link { display: flex; flex-direction: column; height: 100%; background: var(--pm8-paper); border: 1px solid var(--pm8-line); border-radius: 14px; overflow: hidden;
  color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.pm8-gc-link:hover { border-color: var(--pm8-sage); box-shadow: 0 10px 24px rgba(37, 48, 42, .12); }
.pm8-gc-link:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--amber); }
.pm8-gc-img { display: block; aspect-ratio: 800 / 390; background: var(--pm8-game-bg); overflow: hidden; }
.pm8-gc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm8-gc-img.pm8-noimg::after { font-size: 1rem; }
.is-locked .pm8-gc-img img { filter: grayscale(.6) brightness(.8); }
.pm8-gc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 10px 12px 12px; }
.pm8-gc-title { font: 700 1.05rem/1.2 var(--pm8-display); }
.pm8-gc-text { font-size: .88rem; line-height: 1.4; color: var(--pm8-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm8-gc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.pm8-gc .pm8-tag { font-size: .76rem; padding: .08rem .5rem; }
.pm8-gc .pm8-star-card { top: 6px; right: 6px; }
@media (prefers-reduced-motion: reduce) { .pm8-gc-link { transition: none; } }

/* A to Z */
.pm8-az { margin-top: 30px; border: 1px solid var(--pm8-line); border-radius: 18px; background: var(--pm8-paper); }
.pm8-az summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; cursor: pointer; font: 700 1.05rem/1.3 var(--pm8-display); list-style: none; }
.pm8-az summary::-webkit-details-marker { display: none; }
.pm8-az summary::before { content: '+'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pm8-cream); font-size: 1.2rem; }
.pm8-az[open] summary::before { content: '\2212'; }
.pm8-az summary:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); border-radius: 16px; }
.pm8-az-list { list-style: none; margin: 0; padding: 0 18px 18px; columns: 3 220px; column-gap: 24px; }
.pm8-az-list li { break-inside: avoid; }
.pm8-az-list a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 0; color: var(--pm8-ink); text-decoration: none; border-bottom: 1px solid #efe7d6; }
.pm8-az-list a:hover .pm8-az-t { text-decoration: underline; }
.pm8-az-list a:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; }
.pm8-az-t { font: 700 1rem/1.25 var(--pm8-display); }
.pm8-az-m { font-size: .85rem; color: var(--pm8-muted); }

/* For grown-ups: a calmer corner, then How it works */
.pm8-grown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 36px; padding: clamp(20px, 4vw, 40px); background: #eef3ec; border: 1px solid var(--sage-line); border-radius: 28px; }
.pm8-grown-intro h2 { margin: 12px 0 8px; font: 800 clamp(1.5rem, 2.8vw, 2rem)/1.1 var(--pm8-display); }
.pm8-grown-intro p { margin: 0; color: #46564b; max-width: 36ch; }
.pm8-grown-intro .pm8-shelf-ico { width: 50px; height: 50px; font-size: 1.5rem; }
.pm8-grown-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pm8-gl { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; height: 100%; min-height: 64px; padding: 12px 14px;
  background: var(--pm8-paper); border: 1px solid var(--sage-line); border-radius: 14px; color: var(--pm8-ink); text-decoration: none; }
.pm8-gl:hover { border-color: var(--pm8-sage); box-shadow: 0 8px 20px rgba(37, 48, 42, .08); }
.pm8-gl:focus-visible { outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); }
.pm8-gl-ico { grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; text-align: center; }
.pm8-gl-t { font: 700 1rem/1.25 var(--pm8-display); }
.pm8-gl-d { font-size: .9rem; line-height: 1.4; color: var(--pm8-muted); }
.pm8-grown .pm8-how { grid-column: 1 / -1; padding: 22px 0 0; background: none; border: 0; border-top: 1px solid var(--sage-line); border-radius: 0; }
.pm8-grown .pm8-how h3 { margin: 0; font: 800 1.2rem/1.2 var(--pm8-display); }
.pm8-grown .pm8-steps { margin-top: 14px; gap: 14px 24px; }
.pm8-grown .pm8-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding-top: 0; }
.pm8-grown .pm8-steps li::before { position: static; grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 1.05rem; }
.pm8-grown .pm8-steps span { font-size: .92rem; }
.pm8-grown .pm8-trust { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: .92rem; }
.pm8-grown .pm8-free { margin-top: 10px; }
.pm8-grown .pm8-how-more { margin-top: 4px; }
.pm8-join { padding: clamp(20px, 3.4vw, 32px) clamp(20px, 4vw, 40px); }

/* Tablets */
@media (max-width: 899px) {
  .pm8-grown { grid-template-columns: 1fr; }
}
/* Phones: everything stacks; the subject tiles, the age choice and each shelf swipe sideways. */
@media (max-width: 759px) {
  .pm8-home { gap: 30px; }
  .pm8-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "search"; padding: 18px 16px 16px; border-radius: 20px; }
  .pm8-top .pm8-hero-title { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .pm8-top .pm8-lede { font-size: 1rem; line-height: 1.45; }
  .pm8-top .pm8-lede-subjects { display: none; }
  .pm8-search { margin-top: 14px; }
  .pm8-search-label { font-size: .98rem; }
  .pm8-search-box { min-height: 56px; padding: 4px 4px 4px 12px; border-radius: 16px; }
  .pm8-search-go { padding: 0 14px; }
  .pm8-q { font-size: 1.05rem; }
  .pm8-search-try { flex-wrap: nowrap; overflow-x: auto; margin: 10px -16px 0; padding: 4px 16px 6px; scrollbar-width: none; }
  .pm8-search-try a { flex: 0 0 auto; }
  .pm8-search-try > span { flex: 0 0 auto; }
  .pm8-sres { position: absolute; left: -10px; right: -10px; max-height: 62vh; }
  .pm8-sopt-img, .pm8-sopt-chip { width: 56px; min-width: 56px; }
  .pm8-subj-list, .pm8-shelf:not(.is-open) .pm8-shelf-row, .pm8-age-opts {
    grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -20px; padding: 6px 20px 10px; scroll-padding-inline: 20px; scrollbar-width: thin; }
  .pm8-subj-list { display: grid; grid-auto-columns: 108px; gap: 10px; }
  .pm8-subj-list > li, .pm8-shelf-row > li, .pm8-age-opt { scroll-snap-align: start; }
  .pm8-subj { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; align-content: start; row-gap: 6px; text-align: center; padding: 12px 8px; }
  .pm8-subj-ico { grid-row: auto; width: 52px; height: 52px; }
  .pm8-subj-name { align-self: start; font-size: .88rem; }
  .pm8-subj-n { font-size: .78rem; }
  .pm8-shelves { display: block; }
  .pm8-shelf + .pm8-shelf { margin-top: 26px; }
  .pm8-shelf:not(.is-open) .pm8-shelf-row { grid-auto-columns: min(64%, 230px); gap: 12px; }
  .pm8-shelf.is-open .pm8-shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pm8-age { padding: 12px 0 4px; border: 0; background: none; }
  .pm8-age-legend { margin-bottom: 4px; }
  .pm8-age-opts { display: flex; flex-wrap: nowrap; padding-top: 6px; }
  .pm8-age-opt { flex: 0 0 auto; min-width: 0; }
  .pm8-age-opt span { min-height: 52px; padding: 6px 12px; }
  .pm8-today-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82%, 300px); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 6px 20px 10px; scroll-padding-inline: 20px; }
  .pm8-today-row > li { scroll-snap-align: start; }
  .pm8-today .pm8-sec-head p { font-size: .95rem; }
  .pm8-otd { padding: 10px 10px 10px 12px; }
  .pm8-az-list { columns: 1; }
  .pm8-grown { padding: 20px 16px; border-radius: 20px; }
}
/* 1.25.0 refinements after looking at the screenshots */
.pm8-day { grid-template-columns: 148px minmax(0, 1fr); }
.pm8-today-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
@media (min-width: 900px) { .pm8-today-row { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); } }
/* Shelf headings in one row of the bookcase line up, so the cards under them do too. */
@media (min-width: 760px) {
  @supports (grid-template-rows: subgrid) {
    .pm8-shelves { row-gap: 0; }
    .pm8-shelf { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px; padding-bottom: 34px; }
    .pm8-shelf-head { margin-bottom: 0; align-self: end; }
  }
}
@media (max-width: 759px) {
  .pm8-otd { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cal main" "cal nav"; gap: 2px 12px; align-items: start; padding: 10px 8px 6px 10px; }
  .pm8-home > .pm8-dayline + .pm8-top { margin-top: -12px; }
  .pm8-otd-src { margin-left: .25rem; }
  .pm8-cal { width: 50px; height: 54px; border-radius: 10px; box-shadow: 0 3px 0 var(--pm8-cal-line); }
  .pm8-cal-m { font-size: .66rem; }
  .pm8-cal-d { font-size: 1.4rem; }
  .pm8-otd-label { gap: 0 10px; }
  .pm8-otd-label .pm8-date { font-size: 1.02rem; }
  .pm8-otd-emoji { display: none; }
  .pm8-otd-nav { justify-content: flex-end; gap: 2px; }
  .pm8-otd-count { min-width: 3.6em; font-size: .85rem; }
  .pm8-search-ico { display: none; }
  .pm8-search-box { padding-left: 6px; }
  .pm8-top { padding: 16px 14px 14px; }
  .pm8-top .pm8-hero-title { margin-bottom: .2em; }
  .pm8-subj { padding: 10px 6px; row-gap: 4px; }
  .pm8-subj-ico { width: 44px; height: 44px; font-size: 1.35rem; }
  .pm8-gc-text { -webkit-line-clamp: 1; }
  .pm8-day { grid-template-columns: 132px minmax(0, 1fr); }
}
/* Wider screens: today's puzzles, games for a child and favourites are small picture-on-top cards in one even row. */
@media (min-width: 760px) {
  .pm8-today-row { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .pm8-day { display: flex; flex-direction: column; min-height: 0; }
  .pm8-day-img { aspect-ratio: 800 / 390; height: auto; min-height: 0; }
  .pm8-day-body { justify-content: flex-start; padding: 10px 12px 12px; }
}
@media (max-width: 759px) {
  .pm8-subj-list { grid-auto-columns: 118px; }
  .pm8-subj { min-height: 0; }
  .pm8-subj-name { font-size: .85rem; }
}
.pm8-search .pm8-q { height: auto; min-height: 48px; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; width: auto; }
.pm8-search .pm8-q:focus { outline: none; box-shadow: none; }
@media (max-width: 759px) { .pm8-subj-n { display: none; } }
@media (min-width: 760px) {
  .pm8-today-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  #pm8-favs-row { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
/* Phones: "See all 4" already gives the number, so the count makes way and the button stays on the heading's line. */
@media (max-width: 759px) {
  .pm8-shelf-head { flex-wrap: nowrap; }
  .pm8-shelf-head h3 { min-width: 0; font-size: 1.12rem; }
  .pm8-shelf-n { display: none; }
}

/* 1.25.0 review: every shelf is a full-width row with its heading on one line, and every card is the same width
   (6 to a row on laptops, 4 on tablets). Short shelves are simply short rows. */
.pm8-shelves { display: block; }
.pm8-shelf, .pm8-shelf.pm8-n1, .pm8-shelf.pm8-n2, .pm8-shelf.pm8-n3, .pm8-shelf.pm8-n4, .pm8-shelf.pm8-n5, .pm8-shelf.is-open { grid-column: auto; --cols: 6; }
.pm8-shelf + .pm8-shelf { margin-top: 30px; }
@media (min-width: 760px) {
  @supports (grid-template-rows: subgrid) {
    .pm8-shelf { display: block; padding-bottom: 0; }
    .pm8-shelf-head { margin-bottom: 12px; }
  }
  .pm8-shelf-head { flex-wrap: nowrap; }
  .pm8-shelf-head h3 { white-space: nowrap; }
}
@media (max-width: 1099px) {
  .pm8-shelf, .pm8-shelf.pm8-n1, .pm8-shelf.pm8-n2, .pm8-shelf.pm8-n3, .pm8-shelf.pm8-n4, .pm8-shelf.pm8-n5, .pm8-shelf.is-open { --cols: 4; }
}

/* Phones: the subject tiles are a compact grid (3 across, 2 on the narrowest phones), so every subject shows at a glance. */
@media (max-width: 759px) {
  .pm8-home { gap: 24px; }
  .pm8-subj-list { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto;
    gap: 8px; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .pm8-subj { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; align-content: center; row-gap: 3px;
    min-height: 60px; padding: 7px 4px; border-radius: 14px; text-align: center; }
  .pm8-subj-ico { width: 30px; height: 30px; font-size: 1rem; border-radius: 9px; box-shadow: inset 0 -3px 0 rgba(31, 58, 46, .16); }
  .pm8-subj-name { font-size: .78rem; line-height: 1.15; }
  .pm8-subj-n { display: none; }
  .pm8-today .pm8-sec-head { margin-bottom: 8px; }
  .pm8-today .pm8-sec-head p { display: none; }
}
@media (max-width: 359px) { .pm8-subj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: icon beside the name keeps every tile about 52px tall, even when the name runs to two or three lines. */
@media (max-width: 759px) {
  .pm8-subj { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto; justify-items: start; align-items: center; column-gap: 6px;
    min-height: 52px; padding: 5px 6px; text-align: left; }
  .pm8-subj-ico { grid-row: auto; width: 28px; height: 28px; font-size: .95rem; border-radius: 8px; }
  .pm8-subj-name { align-self: center; font-size: .76rem; line-height: 1.12; }
  .pm8-top .pm8-hero-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .pm8-search-try { margin-top: 8px; }
  .pm8-search { margin-top: 10px; }
}
@media (max-width: 759px) {
  .pm8-subj-list { gap: 6px; }
  .pm8-subj { grid-template-columns: 24px minmax(0, 1fr); column-gap: 5px; padding: 4px 5px; }
  .pm8-subj-ico { width: 24px; height: 24px; font-size: .85rem; border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(31, 58, 46, .16); }
  .pm8-subj-name { font-size: .75rem; letter-spacing: -.01em; overflow-wrap: normal; word-break: normal; }
}

/* 1.26: the "Today" cards crop a wide picture into a narrow box on phones. Keep the left side (where each picture has its title) in view. */
.pm8-day-img img { object-position: left center; }
/* 1.26: the "Switch" link beside "Playing as" and "See all my notes" are easy to tap (at least 44px tall). */
.pm8-playing a, .pm8-mine-more a { display: inline-flex; align-items: center; min-height: 44px; }
/* 1.26: anything that scrolls the game into view stops just below the sticky site header. host.js sets the page's
   scroll-padding-top to the header's height (not scroll-margin here as well: the two add up and the game stopped too low). */

/* 1.28.1: "On this day": how long ago each fact was, a gold badge for a big date ("⭐ 960 years ago today"), and the
   "Look up a date" button and pop-up. The badge sits inline so the bar is no taller on phones. */
.pm8-otd-ago { display: inline-block; margin-right: .35rem; font: 600 .8rem/1.6 var(--pm8-display); color: var(--pm8-muted); white-space: nowrap; }
.pm8-otd-item.is-big .pm8-otd-ago, .pm8-otd-big { display: inline-block; margin-right: .35rem; padding: 0 .5rem; border-radius: 999px;
  background: var(--pm8-big-bg); color: var(--pm8-big-ink); font: 700 .8rem/1.6 var(--pm8-display); white-space: nowrap; }
.pm8-otd-learn { white-space: nowrap; }
.pm8-otd { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "cal main nav look"; }
.pm8-otd-look { grid-area: look; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; min-height: 44px;
  padding: 0 .8rem; border-radius: 12px; border: 1px solid var(--pm8-line); background: var(--pm8-paper); color: var(--pm8-ink);
  font: 700 .85rem/1.15 var(--pm8-display); cursor: pointer; }
.pm8-otd-look[hidden] { display: none; }
.pm8-otd-look:hover { border-color: var(--pm8-sage); background: var(--card); }
.pm8-otd-look:focus-visible, .pm8-lookup-x:focus-visible, .pm8-lookup select:focus-visible, .pm8-lookup a:focus-visible {
  outline: 3px solid var(--pm8-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amber); border-radius: 6px; }
.pm8-otd-look-ico { font-size: 1.05rem; line-height: 1; }
/* Phones on their side and small tablets (760 to 1019px): the button goes under the arrows, so the facts keep their room. */
@media (min-width: 760px) and (max-width: 1019px) {
  .pm8-otd { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cal main nav" "cal main look"; }
  .pm8-otd-nav { align-self: end; }
  .pm8-otd-look { justify-self: stretch; align-self: start; }
}
/* 1020 to 1099px: "📅 Look up" beside the arrows (the whole name, "Look up a date", is still read out). */
@media (min-width: 1020px) and (max-width: 1099px) {
  .pm8-otd-look-more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 759px) {
  /* Phones: the button sits in the empty space under the calendar tile, the same width, so the bar keeps its height. */
  .pm8-otd { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "cal main" "look main" "look nav"; }
  .pm8-otd-look { align-self: start; flex-direction: column; gap: 1px; width: 50px; min-width: 0; margin-top: 8px; padding: 5px 2px 6px;
    border-radius: 10px; font-size: .64rem; line-height: 1.12; text-align: center; overflow-wrap: anywhere; }
  .pm8-otd-look-ico { font-size: 1.1rem; }
}
/* Small phones (up to 480px): every fact now says "N years ago", which takes some room. To keep the bar no taller,
   the "On this day in history" heading is read out but not shown there (the date, the years and "years ago" already
   say what the facts are), and the date fits on one line at 360px. */
@media (max-width: 480px) {
  .pm8-otd-label .pm8-otd-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 400px) {
  .pm8-otd-label .pm8-date { font-size: .94rem; letter-spacing: -.005em; }
}

dialog.pm8-lookup { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(var(--pm8-vh, 100vh) - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--pm8-paper); color: var(--pm8-ink); overflow: auto;
  overscroll-behavior: contain; box-shadow: 0 24px 60px rgba(31, 58, 46, .3); }
dialog.pm8-lookup::backdrop { background: rgba(31, 58, 46, .45); }
.pm8-lookup-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 8px 20px; background: var(--pm8-paper); }
.pm8-lookup-h { margin: 0; font: 700 1.3rem/1.25 var(--pm8-display); color: var(--pm8-ink); }
.pm8-lookup-x { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--pm8-line);
  background: var(--card); color: var(--pm8-ink); font: 700 1.1rem/1 var(--pm8-display); cursor: pointer; }
.pm8-lookup-lede { margin: 0 20px 12px; color: var(--pm8-muted); font-size: 1rem; line-height: 1.45; }
.pm8-lookup-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 20px 14px; }
.pm8-lookup-field { display: flex; flex-direction: column; gap: 4px; font: 700 .9rem/1.2 var(--pm8-display); color: var(--pm8-ink); }
.pm8-lookup-field select { min-width: 5.5rem; min-height: 44px; padding: 6px 10px; border: 1px solid #b9ad95; border-radius: 10px; background: var(--card);
  color: var(--pm8-ink); font: 600 1rem/1.2 var(--pm8-body, inherit); }
.pm8-lookup-field:last-child select { min-width: 9.5rem; }
.pm8-lookup-status { margin: 0 20px 10px; font: 700 1rem/1.35 var(--pm8-display); color: var(--pm8-sage-deep); }
.pm8-lookup-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0 20px 20px; }
.pm8-lookup-item { display: flex; gap: .6rem; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--cream-2); border: 1px solid var(--pm8-otd-bg); }
.pm8-lookup-item.is-big { background: #fff6d8; border-color: #ecd28a; border-left: 5px solid var(--pm8-gold); }
.pm8-lookup .pm8-otd-emoji { display: grid; }
.pm8-lookup .pm8-otd-body { font-size: 1rem; line-height: 1.5; }
@media (max-width: 480px) {
  .pm8-lookup-top { padding-left: 16px; }
  .pm8-lookup-lede, .pm8-lookup-pick, .pm8-lookup-status { margin-left: 16px; margin-right: 16px; }
  .pm8-lookup-list { padding: 0 12px 16px; }
  .pm8-lookup-item { padding: 8px 10px; }
  .pm8-lookup .pm8-otd-emoji { display: none; }
}
/* Wider phones and phones on their side (560 to 759px): there is room beside the arrows, so the button sits there in full. */
@media (min-width: 560px) and (max-width: 759px) {
  .pm8-otd { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "cal main main" "cal nav look"; }
  .pm8-otd-look { flex-direction: row; gap: .35rem; width: auto; min-width: 44px; margin: 0; padding: 0 .8rem; align-self: end;
    border-radius: 12px; font-size: .85rem; line-height: 1.15; }
  .pm8-otd-look-ico { font-size: 1.05rem; }
}

/* 1.30: "How I like it" in the For grown-ups corner is a button, not a link, so it matches the other tiles. */
.pm8-gl-btn { font: inherit; text-align: left; cursor: pointer; width: 100%; }