/* public/css/landingRooms.css — the landing page, / (views/public/landing.hbs, views/partials/landing/,
   docs/landing.md). Linked by that route alone, beside landingDemo.css (the playable demos' card and the screenshot
   zoom).

   TWO WAYS TO READ THIS PAGE, one markup:
   · WITH the script (public/js/landingRooms.js puts `lr-on` on <html> before the page is drawn): ONE FIXED SCREEN, no
     scrolling. Home, and a room per section; one room shows at a time and the script moves between them.
   · WITHOUT it: every room is a section of one ordinary scrolling page, top to bottom.
   Everything under `html.lr-on` (the last third of this file) is the rooms; everything above it is both.

   Colours are global.css's tokens (--app-fg, --card-bg, --brand-blue…), so the dark theme needs nothing here. */

.lr { color: var(--app-fg); --lr-ink: #14309c; --lr-blue: #0a6fa8; }
[data-theme="dark"] .lr { --lr-blue: var(--brand-blue); }

/* ── The page's type ──────────────────────────────────────────────────────────────────────────── */
.lr-title { margin: 0; font-family: var(--font-kid); font-weight: 800; line-height: 1; color: var(--app-fg); }
/* The heading is two sizes: the wordmark big (the logo's own, cut by scripts/genLandingArt.js), what Friendrot is on
   a smaller line under it. */
.lr-wordmark { display: block; width: min(80vw, 340px); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
.lr-home__line { display: block; margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.lr-h2 { margin: 0; font-family: var(--font-kid); font-weight: 800; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.01em; color: var(--app-fg); text-wrap: balance; }
.lr-h2:focus { outline: none; }                       /* focused by the script on arrival, for a screen reader: no ring */
.lr-lede { margin: 12px 0 0; color: var(--app-muted); font-size: 17px; font-weight: 500; line-height: 1.45; max-width: 52ch; text-wrap: pretty; }

/* ── HOME: the brain, the tiles on a ring round it, the two ways in, Join Classroom, "Is it safe?" ──────────
   A phone stacks the words over the ring; a wide screen puts the words on the left and a ring as tall as the screen
   on the right. The ring is sized from the screen's HEIGHT (what is left after the words, the buttons, the strip),
   because as rooms the home screen must fit one screen exactly. A tile's place is a fraction of the ring's radius:
   --cx / --cy are the sine and cosine of its angle (six tiles, 60° apart from one o'clock), written out so nothing
   needs CSS trigonometry. More or fewer ring rooms in services/landing.js = new values here. */
/* What the ring gives up to the rows around it: the avatar strip, and the row Join Classroom shares with "Is it
   safe?". They are variables on .lr-home because TWO things read them — the ring's size and the room the strip needs
   at the bottom — and a shorter screen drops the strip (a media rule below sets it to 0) before the ring is cramped. */
.lr-home { position: relative; --strip: 66px; --join: 68px; padding: 16px 16px calc(var(--strip) + 18px); }
.lr-home__in { width: 100%; max-width: 860px; margin: 0 auto; text-align: center; display: grid; justify-items: center;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ring" "dock";
  --ring: min(calc(100svh - 304px - var(--strip) - var(--join)), 94vw, 600px); --r: calc(var(--ring) / 2 - 38px); }
.lr-home__head { grid-area: head; }
.lr-home__mark, .lr-tiles { grid-area: ring; }
.lr-home__mark { align-self: center; width: calc(var(--ring) * 0.4); }
.lr-home__mark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .16)); }
.lr-tiles { position: relative; width: var(--ring); height: var(--ring); margin-top: 4px; }
.lr-tiles::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--brand-blue) 34%, transparent); }
.lr-tile { position: absolute; left: calc(50% + var(--r) * var(--cx)); top: calc(50% + var(--r) * var(--cy)); transform: translate(-50%, -32px);
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--app-fg); -webkit-tap-highlight-color: transparent; }
.lr-tile:nth-child(1) { --cx: 0.5; --cy: -0.866; --i: 0; }
.lr-tile:nth-child(2) { --cx: 1; --cy: 0; --i: 1; }
.lr-tile:nth-child(3) { --cx: 0.5; --cy: 0.866; --i: 2; }
.lr-tile:nth-child(4) { --cx: -0.5; --cy: 0.866; --i: 3; }
.lr-tile:nth-child(5) { --cx: -1; --cy: 0; --i: 4; }
.lr-tile:nth-child(6) { --cx: -0.5; --cy: -0.866; --i: 5; }
.lr-tile__i { display: block; width: 62px; height: 62px; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.lr-tile__i img, .lr-door__i img, .lr-head__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A tile's name is a chip tucked under its icon (a border and a little shadow), so the two read as one thing: as bare
   words they floated between the icon and the brain (Curtis, 2026-11-10: "the ring is cramped with the words floating
   below the icons"). */
.lr-tile__t { margin-top: -4px; font-size: 14px; font-weight: 700; line-height: 1.25; padding: 1px 10px; border-radius: 999px; background: var(--card-bg);
  border: 1px solid var(--border-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); position: relative; }
.lr-tile:hover .lr-tile__i { transform: translateY(-3px) scale(1.08); }
.lr-tile:active .lr-tile__i { transform: scale(.93); }
.lr-tile:focus-visible, .lr-who:focus-visible, .lr-door:focus-visible, .lr-join:focus-visible, .lr-nav:focus-visible, .lr-shot:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
/* The one beat of life on the home screen: each tile floats a few pixels, out of step with its neighbours. */
@media (prefers-reduced-motion: no-preference) {
  .lr-tile .lr-tile__i img { animation: lrFloat 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
  @keyframes lrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}
/* THE DOCK, under the ring: the two ways in, then the students' door and "Is it safe?". */
.lr-dock { grid-area: dock; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: clamp(6px, 1.4vh, 16px); }
/* THE TWO WAYS IN, side by side and labelled by WHO they are for, so the difference is the first thing read: parents
   pay (the price, filled), teachers don't ("Free", outlined). Curtis, 2026-11-10: "there is a Parent Sign up which
   costs money and a Teacher option that is free. right now it isn't clear". Each goes to its room: the last room
   (both sign-ups) and Classrooms. */
.lr-who { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; padding: 0 14px; border-radius: 18px;
  box-sizing: border-box; text-decoration: none; line-height: 1.05; white-space: nowrap; border: 2px solid var(--btn-bg); transition: transform .15s ease; }
.lr-who small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.lr-who b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.lr-who--pay { background: var(--btn-bg); color: var(--btn-fg); }
.lr-who--free { background: var(--card-bg); color: var(--app-fg); }
.lr-who:hover { transform: translateY(-1px); }
.lr-who:active { transform: translateY(1px); }
.lr-door { flex: 1 1 30%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card-bg); color: var(--app-fg); font-size: 15px; font-weight: 700; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
.lr-door__i { flex: none; width: 24px; height: 24px; }
/* The trial button under every room: the site's own .ui-btn, as a pill. */
.lr-go { height: 50px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 800; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
/* JOIN CLASSROOM: the students' door. The logo's own yellow, so a kid finds it and a parent doesn't take it for a
   sign-up. It shares its row with "Is it safe?"; the ring gives the row up (--join). */
.lr-join { flex: 1 1 55%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 999px; box-sizing: border-box; text-decoration: none; white-space: nowrap;
  background: #ffd02e; color: #14246e; border: 3px solid var(--lr-ink); box-shadow: 0 4px 0 var(--lr-ink); font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.lr-join i { font-size: 18px; }
.lr-join small { font-size: 13px; font-weight: 700; opacity: .72; }
.lr-join:hover { transform: translateY(-1px); }
.lr-join:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lr-ink); }

/* THE AVATAR STRIP: the catalog's avatars in round frames (the app's own avatar look: every card is a toy on a pale
   backdrop, so a circle works for any card with nothing to cut out), drifting slowly along the bottom edge of the
   home screen. The ring gives up a row for it (--strip). */
.lr-strip { position: absolute; left: 0; right: 0; bottom: 10px; overflow: hidden; pointer-events: none; --av: 44px;
  -webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.lr-strip__track { display: flex; gap: 12px; width: max-content; padding: 6px 0 10px; }
.lr-strip__i { flex: none; width: var(--av); height: var(--av); }
.lr-strip__i img, .lr-card img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; background: #fff; box-sizing: border-box;
  border: 3px solid var(--card-bg); box-shadow: 0 0 0 1.5px var(--border-strong), 0 8px 16px rgba(0, 0, 0, .14); }
@media (prefers-reduced-motion: no-preference) {
  .lr-strip__track { animation: lrDrift 90s linear infinite; }
  @keyframes lrDrift { to { transform: translateX(calc(-50% - 6px)); } }
}

@media (max-width: 899px) {
  .lr-join small { display: none; }                       /* a phone: the button's name alone, beside "Is it safe?" */
}
@media (min-width: 900px) {
  .lr-home { --join: 0px; padding-bottom: calc(var(--strip) + 26px); }   /* (the dock sits beside the ring, not under it) */
  .lr-home__in { max-width: 1440px; text-align: left; justify-items: start; column-gap: clamp(24px, 5vw, 84px);
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". ring" "head ring" "dock ring" ". ring";
    --ring: min(calc(100svh - 110px - var(--strip)), 46vw, 760px); --r: calc(var(--ring) / 2 - 64px); }
  .lr-home__mark { justify-self: center; }
  .lr-wordmark { width: clamp(380px, 36vw, 620px); margin: 0 0 0 -8px; }
  .lr-home__line { font-size: clamp(26px, 2.3vw, 38px); margin-top: 18px; max-width: 16em; }
  .lr-dock { margin-top: 28px; justify-content: flex-start; width: 100%; max-width: 500px; gap: 12px; }
  .lr-who { height: 68px; }
  .lr-who b { font-size: 24px; }
  .lr-who small { font-size: 11.5px; }
  .lr-tile { transform: translate(-50%, -44px); }
  .lr-tile__i { width: 84px; height: 84px; }
  .lr-tile__t { font-size: 16px; }
  .lr-strip { --av: 56px; bottom: 14px; }
}
/* A phone-width screen that is not tall: the ring keeps its size and the avatar strip goes first. */
@media (max-width: 899px) and (max-height: 760px) {
  .lr-strip { display: none; }
  .lr-home { --strip: 0px; }
}
/* A short phone screen (Instagram's in-app browser): no strip (above), and everything a size smaller. */
@media (max-height: 700px) and (max-width: 899px) {
  .lr-wordmark { width: 250px; }
  .lr-home__line { font-size: 17px; margin-top: 8px; }
  .lr-home { --join: 58px; }
  .lr-home__in { --ring: min(calc(100svh - 262px - var(--join)), 94vw); --r: calc(var(--ring) / 2 - 32px); }
  .lr-tile { transform: translate(-50%, -26px); gap: 1px; }
  .lr-tile__i { width: 48px; height: 48px; }
  .lr-tile__t { font-size: 12px; padding: 0 6px; }
  .lr-who { height: 52px; }
  .lr-who b { font-size: 18px; }
  .lr-door, .lr-join { height: 46px; }
  .lr-join { font-size: 16px; }
  .lr-door { font-size: 14px; }
}

/* ── A ROOM (both ways): a section of the page ──────────────────────────────────────────────────── */
.lr-room:not(.lr-home) { max-width: 1120px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) 16px 0; box-sizing: border-box; }
.lr-bar[hidden], .lr-foot[hidden] { display: none; }
/* A room's head: its tile's icon as its emblem, its name, its line. */
.lr-head { display: flex; align-items: center; gap: 14px; }
.lr-head__icon { flex: none; width: 56px; height: 56px; }
.lr-head__name { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lr-blue); }
.lr-fit--plain { max-width: 760px; margin: 0 auto; }

/* A PLAYABLE GAME (Math, Words — views/partials/landing/play.hbs). Wide: the words and the screenshots on the left,
   the game on the right. A phone: the head, then the game. */
.lr-stage { min-width: 0; margin-top: 14px; padding-top: 16px; }   /* (the pills ride 14px above the card's top edge) */
.lr-stage .lp3-gameWrap { position: relative; width: 100%; max-width: none; margin: 0; }   /* the pills' anchor (landingDemo.css) */
.lr-stage .lp3-game { margin: 0; }
/* a narrow phone: the two pills a size smaller and nearer the corners, so they never touch each other */
@media (max-width: 420px) {
  .lr-stage .lp3-game__hint { left: 8px; padding: 6px 10px; font-size: 10.5px; letter-spacing: .2px; }
  .lr-stage .lp3-game__badge { right: 8px; padding: 6px 10px; font-size: 10.5px; letter-spacing: .2px; }
}
.lr-stage .lp3-gameLabel { display: none; }             /* the room's own heading names the game */
.lr-stage .mg-fr__shapeWrap { min-height: 0; }
.lr-more { margin-top: 18px; }
.lr-more__t { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--app-muted); }
.lr-more__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lr-nav.lr-swap { display: none; }                      /* a phone only (below); two classes, so .lr-nav's own display, later in this file, doesn't bring it back */
/* A screenshot: a button that opens the zoom. */
.lr-shot { display: block; margin: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
  color: var(--app-fg); font: inherit; text-align: center; cursor: zoom-in; transition: transform .15s ease; }
.lr-shot:hover { transform: translateY(-2px); }
.lr-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; background: #fff; }
.lr-shot__t { display: block; padding: 6px 8px 7px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }

/* Classrooms (the teachers' room): the way in, a picture of a class tile and two PIN slips, and the exercises by
   grade behind one disclosure (closed, so the room is one screen). */
.lr-class__go { margin-top: 16px; }
.lr-class__go .lr-go { width: auto; gap: 10px; }
.lr-class { display: flex; gap: 12px; align-items: stretch; margin-top: 18px; }
.lr-class__tile { flex: 1.2; min-width: 0; border-radius: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--accent-2) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.lr-class__tile p { margin: 0; }
.lr-class__name { font-size: 14px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.lr-class__name i { color: var(--accent-2); }
.lr-class__label { margin-top: 8px !important; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); }
.lr-class__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 28px; font-weight: 800; letter-spacing: .12em; line-height: 1.1; }
.lr-class__url { font-size: 12.5px; font-weight: 700; color: var(--app-muted); }
.lr-class__slips { flex: 1; min-width: 0; display: grid; gap: 8px; }
.lr-slip { margin: 0; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; border: 2px dashed var(--border-strong); background: var(--card-bg); font-size: 12.5px; color: var(--app-muted); }
.lr-slip b { font-size: 14px; color: var(--app-fg); }
.lr-slip strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--app-fg); letter-spacing: .06em; }
.lr-ex { margin-top: 16px; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 16px; padding: 0 14px; box-shadow: var(--shadow-sm); }
.lr-ex summary { display: flex; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 15.5px; }
.lr-ex summary::-webkit-details-marker { display: none; }
.lr-ex summary::after { content: "+"; margin-left: auto; padding-left: 12px; font-weight: 600; font-size: 22px; line-height: 1; color: var(--app-muted); }
.lr-ex[open] summary::after { content: "\2212"; }
.lr-ex .lr-grades { margin: 0 0 14px; }
.lr-ex .lr-grade { box-shadow: none; }
.lr-fit--class { max-width: 1000px; margin: 0 auto; }
.lr-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.lr-grade { background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 16px; padding: 12px 14px 10px; box-shadow: var(--shadow-sm); }
.lr-grade__n { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lr-blue); }
.lr-grade__list { list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.lr-grade__list li { padding: 4px 0; border-top: 1px solid var(--border); }
.lr-grade__list li:first-child { border-top: 0; }

/* Collect: twelve avatars with their names. The tier is global.css's .rarity-pill (its colours come from the card's
   data-rarity); only its size and place are set here. */
.lr-cards { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.lr-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lr-card img { width: min(100%, 92px); height: auto; aspect-ratio: 1; }
.lr-card__n { margin-top: 6px; font-size: 14px; font-weight: 800; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lr-card__r { margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Friends: four facts and the chat screenshot. */
.lr-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lr-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; color: var(--app-muted); }
.lr-facts strong { color: var(--app-fg); }
.lr-facts i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; color: var(--lr-blue); background: color-mix(in srgb, var(--brand-blue) 14%, var(--card-bg)); }
.lr-chatshot { margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); background: #fff; }
.lr-chatshot img { display: block; width: 100%; height: auto; }

/* Is it safe: four questions, one open at a time. */
.lr-qa { margin-top: 18px; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 18px; padding: 2px 16px; box-shadow: var(--shadow-sm); }
.lr-qa__it { border-top: 1px solid var(--border); }
.lr-qa__it:first-child { border-top: 0; }
.lr-qa__it summary { display: flex; align-items: center; gap: 10px; padding: 13px 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; }
.lr-qa__it summary::-webkit-details-marker { display: none; }
.lr-qa__it summary::after { content: "+"; margin-left: auto; font-weight: 600; font-size: 22px; line-height: 1; color: var(--app-muted); }
.lr-qa__it[open] summary::after { content: "\2212"; }
.lr-qa__it summary i { flex: none; width: 22px; text-align: center; color: var(--lr-blue); }
.lr-qa__it p { margin: -2px 0 14px 32px; color: var(--app-muted); font-size: 15px; line-height: 1.5; }

/* The last room: both ways in (families pay, classrooms are free), side by side, and the site footer under them. */
.lr-start__in { text-align: center; display: grid; justify-items: center; padding: 8px 16px 24px; }
.lr-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 760px; margin-top: 18px; }
.lr-way { display: flex; flex-direction: column; align-items: center; padding: 16px 16px 14px; border-radius: 20px; background: var(--card-bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.lr-way p { margin: 0; }
.lr-way__who { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lr-blue); }
.lr-price { margin-top: 6px !important; display: flex; align-items: baseline; gap: 8px; }
.lr-price__n { font-size: clamp(34px, 6vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.lr-price__per { font-size: 16px; font-weight: 700; color: var(--app-muted); }
.lr-way__what { margin-top: 8px !important; flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--app-muted); max-width: 30ch; }
.lr-start__go { margin-top: 14px; height: 50px; padding: 0 20px; font-size: 16px; gap: 10px; width: auto; max-width: 100%; }
/* the teachers' button is the quieter of the two: an outline, the families' is the filled one */
.lr-start__go--teacher { background: var(--card-bg); color: var(--app-fg); border: 2px solid var(--app-fg); }
.lr-way .lr-start__fine { margin-top: 8px; }
.lr-go__g { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #fff; box-sizing: content-box; }
.lr-start__fine { margin: 12px 0 0; max-width: 46ch; font-size: 12.5px; line-height: 1.45; color: var(--app-muted); }
.lr-start__fine a, .lr-start__links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lr-start__back { display: none; }                      /* the rooms' back link: only when the page is rooms (below) */
.lr-start__links { margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; font-weight: 700; }

@media (min-width: 900px) {
  .lr-fit--game { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); align-items: start;
    grid-template-areas: "head stage" "lede stage" "more stage"; }
  .lr-fit--game .lr-head, .lr-fit--split .lr-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 14px; }
  .lr-fit--game .lr-head__icon, .lr-fit--split .lr-head__icon { width: 96px; height: 96px; }
  .lr-head__icon { width: 72px; height: 72px; }
  .lr-room__lede { grid-area: lede; margin: 14px 0 0; max-width: 40ch; font-size: 18px; }
  .lr-stage { grid-area: stage; align-self: center; margin-top: 0; }
  .lr-more { grid-area: more; margin-top: 26px; align-self: end; }
  /* Friends: the words and the facts on the left, the screenshot on the right. */
  .lr-fit--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: start;
    grid-template-areas: "head shot" "lede shot" "facts shot"; }
  .lr-fit--split .lr-lede { grid-area: lede; }
  .lr-facts { grid-area: facts; }
  .lr-chatshot { grid-area: shot; align-self: center; margin-top: 0; max-height: 460px; }
  .lr-chatshot img { height: 100%; max-height: 460px; object-fit: cover; object-position: top center; }
  /* Versus: the words on the left, the six screenshots (three by two) on the right. */
  .lr-fit--shots { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 64px); align-items: start;
    grid-template-areas: "head shots" "lede shots" ". shots"; }
  .lr-fit--shots .lr-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 14px; }
  .lr-fit--shots .lr-head__icon { width: 96px; height: 96px; }
  .lr-fit--shots .lr-lede { grid-area: lede; }
  .lr-fit--shots .lr-shots { grid-area: shots; margin-top: 0; align-self: center; }
  .lr-grades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Classrooms: the words, the facts and the way in on the left; the class tile and slips on the right; the
     exercises across the bottom. */
  .lr-fit--class { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 64px); align-items: start;
    grid-template-areas: "head pic" "lede pic" "facts pic" "go pic" "ex ex"; }
  .lr-fit--class .lr-head { grid-area: head; }
  .lr-fit--class .lr-lede { grid-area: lede; }
  .lr-fit--class .lr-facts { grid-area: facts; }
  .lr-class__go { grid-area: go; }
  .lr-class { grid-area: pic; align-self: center; margin-top: 0; flex-direction: column; }
  .lr-class__code { font-size: 40px; }
  .lr-class__slips { grid-template-columns: 1fr 1fr; }
  .lr-ex { grid-area: ex; margin-top: 22px; }
  .lr-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 14px; }
  .lr-shots { gap: 16px; }
}
@media (max-width: 899px) {
  .lr-head__icon { width: 46px; height: 46px; }
  .lr-lede { font-size: 15.5px; margin-top: 10px; }
  .lr-room__lede { display: none; }                       /* a phone: the heading and the game carry it */
  .lr-shots { gap: 8px; margin-top: 14px; }
  .lr-grade__list { font-size: 13.5px; }
  .lr-ways { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .lr-way { padding: 12px 14px; }
  .lr-way__what { font-size: 13.5px; max-width: none; }
  .lr-start__go { margin-top: 10px; height: 46px; }
  .lr-class__go .lr-go { width: 100%; }
  .lr-facts li { font-size: 14.5px; }
  .lr-qa__it summary { font-size: 16px; padding: 11px 0; }
  .lr-qa__it p { font-size: 14px; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE ROOMS (html.lr-on — the script is running). One fixed screen under the site header; a room is a layer of it.
   The room she's in is `.is-on`; while she moves, the one she's leaving is `.is-moving` (the script animates both).
   --lr-top is the header's real height, measured by the script.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
html.lr-on, html.lr-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.lr-on .lr { position: fixed; inset: var(--lr-top, 59px) 0 0 0; overflow: hidden;
  /* --lr-gap: on a screen taller than a room needs, the room and its chrome keep to a band in the middle, so Home and
     the arrows sit right above and below the content, never out at the screen's edges. --lr-w: the chrome is as wide
     as the room's content (the script sets data-room-w). */
  --lr-gap: max(0px, calc((100svh - var(--lr-top, 59px) - 860px) / 2)); --lr-w: 1152px; }
html.lr-on .lr[data-room-w="plain"] { --lr-w: 792px; }
html.lr-on .lr-room { position: absolute; inset: 0; display: none; max-width: none; margin: 0; will-change: transform, opacity; }
html.lr-on .lr-room:not(.lr-home) { padding: calc(58px + var(--lr-gap)) 0 calc(74px + var(--lr-gap)); }   /* under the bar, over the foot */
html.lr-on .lr-room.is-on, html.lr-on .lr-room.is-moving { display: block; }
html.lr-on .lr-home { padding: 10px 16px calc(var(--strip) + 10px); box-sizing: border-box; }
html.lr-on .lr-home.is-on, html.lr-on .lr-home.is-moving { display: grid; place-items: center; }
/* A link straight to a room (#versus): hold the home screen back for the instant before the script opens that room. */
html.lr-on[data-lr-at] .lr-home { visibility: hidden; }
html.lr-on .lr-body { position: relative; height: 100%; overflow: hidden; }
/* A room's content, centred by its own middle (so one the script has shrunk to fit stays centred). */
html.lr-on .lr-fit { position: absolute; left: 50%; top: 50%; width: calc(100% - 32px); max-width: 1120px; margin: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
html.lr-on .lr-fit--plain { max-width: 760px; }
html.lr-on .lr-fit--class { max-width: 1000px; }
/* The chrome: Home and the count over the room, the two arrows and the trial button under it. One button shape,
   .lr-nav: a pill on the card colour with a real border and a soft shadow; the forward one wears the brand blue. */
.lr-bar, .lr-foot { position: absolute; left: 0; right: 0; max-width: var(--lr-w); margin: 0 auto; padding: 0 16px; box-sizing: border-box; z-index: 5; }
.lr-bar { top: var(--lr-gap); height: 58px; display: flex; align-items: center; justify-content: space-between; }
.lr-foot { bottom: var(--lr-gap); height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lr-nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--card-bg);
  color: var(--app-fg); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); box-sizing: border-box; }
.lr-nav--next { color: var(--lr-blue); border-color: color-mix(in srgb, var(--brand-blue) 60%, var(--border)); background: color-mix(in srgb, var(--brand-blue) 12%, var(--card-bg)); }
.lr-bar__name { display: none; font-size: 17px; font-weight: 800; }
.lr-bar__n { font-size: 14px; font-weight: 700; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.lr-foot__prev { justify-self: start; }
.lr-foot__next { justify-self: end; }
.lr-foot__next[hidden], .lr-foot__go[hidden] { visibility: hidden; display: inline-flex; }   /* gone, but the row keeps its shape */
/* The sign-up button under every room: the home screen's .lr-who shape (who it is for in the small line), smaller. */
.lr-foot__go { flex: none; justify-self: center; height: 56px; padding: 0 24px; }
.lr-foot__go b { font-size: 18px; }
.lr-foot__go small { font-size: 11.5px; letter-spacing: .06em; }
@media (min-width: 900px) { html.lr-on .lr-home { padding: 10px clamp(24px, 5vw, 88px) calc(var(--strip) + 26px); } }   /* the words never hug a wide screen's edge */

/* The last room: the price in the middle, the footer at the bottom. */
/* The last room runs to the bottom of the SCREEN (no band, no foot row): the sign-ups in the middle, its own back
   link under them at the content's left corner, then the site footer on the screen's bottom edge. */
/* If a screen is too short for all of it, the room scrolls inside itself (the footer last); nothing shrinks or
   overlaps: the sign-ups keep their height (flex: 1 0 auto). */
html.lr-on .lr-start { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
html.lr-on .lr-start::-webkit-scrollbar { display: none; }
html.lr-on .lr-start__in { flex: 1 0 auto; align-content: center; padding-bottom: 8px; }
html.lr-on .lr-start__back { display: flex; flex: none; width: 100%; max-width: var(--lr-w); margin: 0 auto; padding: 0 16px 16px; box-sizing: border-box; }
html.lr-on .lr-start .app-footer { flex: none; }
html.lr-on .lr-room.lr-room--start:not(.lr-home) { padding-bottom: 0; }   /* (must outweigh the rooms' own padding rule, which reserves the foot row) */

@media (max-width: 899px) {
  html.lr-on .lr-room:not(.lr-home) { padding-top: 54px; padding-bottom: 66px; }
  .lr-bar { height: 54px; padding: 0 12px; }
  .lr-foot { height: 66px; padding: 0 12px; }
  .lr-nav { height: 42px; padding: 0 14px; font-size: 14px; }
  .lr-foot__prev span { display: none; }                  /* a phone: the back arrow alone, the room for the way on */
  .lr-foot { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .lr-foot__next { max-width: 34vw; min-width: 0; }
  .lr-foot__next span { overflow: hidden; text-overflow: ellipsis; }
  .lr-foot__go { height: 46px; padding: 0 10px; min-width: 0; max-width: 100%; }
  .lr-foot__go b { font-size: 15px; }
  .lr-foot__go small { font-size: 9px; letter-spacing: .03em; }
  /* A ROOM ON A PHONE fills the space between the bar and the foot from the top; it is never centred-and-shrunk. A
     room of words taller than that scrolls inside itself (the script lets a swipe there scroll the room, and only a
     swipe from its end steps to the next room — landingRooms.js ownMove). */
  html.lr-on .lr-fit { position: static; width: auto; max-width: none !important; transform: none; height: 100%; padding: 0 14px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  html.lr-on .lr-fit::-webkit-scrollbar { display: none; }
  /* A PLAYABLE GAME ON A PHONE IS NEVER SCALED DOWN. Fracture's drawing (a square, sized by CSS alone) takes what is
     left of the screen's height after the header, the bar, the room's head, the game's own rows, the swap button and
     the foot; every label, tile and button keeps its real size. */
  html.lr-on .lr-fit--game { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
  html.lr-on .lr-fit--game .lr-stage { flex: none; margin-top: 0; }
  html.lr-on .lr-stage .mg-fr__shape { max-width: min(320px, calc(100svh - 566px)); }
  html.lr-on .lr-fit--game .lr-more { display: none; flex: 1; min-height: 0; margin-top: 0; }
  html.lr-on .lr-more__t { display: none; }
  /* THE SWAP: a phone has no room for the screenshots beside the game, so one button trades the game for them and
     back (the script toggles .is-shots). The game keeps its state underneath. */
  html.lr-on .lr-nav.lr-swap { display: inline-flex; align-self: center; flex: none; height: 38px; font-size: 13.5px; }
  html.lr-on .lr-swap__back, html.lr-on .is-shots .lr-swap__more { display: none; }
  html.lr-on .is-shots .lr-swap__back { display: inline; }
  html.lr-on .is-shots .lr-stage { display: none; }
  html.lr-on .is-shots .lr-more { display: block; }
  html.lr-on .is-shots .lr-more__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.lr-on .lr-start__back { padding: 0 12px 12px; }
  /* Friends: the facts keep their size; the chat screenshot takes what is left and is cropped from the bottom. */
  html.lr-on .lr-fit--split { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px; }
  html.lr-on .lr-fit--split > * { flex: none; }
  html.lr-on .lr-fit--split .lr-chatshot { flex: 1; min-height: 0; }
  html.lr-on .lr-chatshot img { height: 100%; object-fit: cover; object-position: top center; }
  /* Versus: two bigger screenshots a row. */
  html.lr-on .lr-shots--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A GAME ROOM ON A PHONE THAT IS NOT TALL. The game never shrinks, so the rows round it go instead, in steps:
   · under 830px Vowel Pop's three words (a fixed height) close up — each word's picture and its Hint sit side by
     side — so the words and the vowel tray are all on screen at once (a drag needs both);
   · under 780px the room's name moves up into the bar (the head goes) and the game's progress row steps aside, so
     Fracture's drawing still gets 190px or more. */
@media (max-width: 899px) and (max-height: 830px) {
  html.lr-on .lr-stage .mg-vp__zone { padding: 6px 12px; }
  html.lr-on .lr-stage .mg-vp__zoneLeft { flex-direction: row; gap: 8px; }
  html.lr-on .lr-stage .mg-vp__zoneImg { width: 38px; height: 38px; }
  html.lr-on .lr-stage .mg-vp__zones { gap: 6px; }
  html.lr-on .lr-stage .mg-vp__board { gap: 6px; }
  html.lr-on .lr-stage .mg-vp__tray { padding: 4px 0; }
}
@media (max-width: 899px) and (max-height: 780px) {
  html.lr-on .lr-fit--game .lr-head, html.lr-on .lr-stage .mg-fr__progressRow, html.lr-on .lr-stage .mg-vp__progressRow { display: none; }
  html.lr-on .lr-bar__name { display: block; }
  html.lr-on .lr-stage .mg-fr__shape { max-width: min(320px, calc(100svh - 428px)); }
}
/* A short phone screen (an in-app browser): the rooms of pictures show one row fewer, the last room no brain. */
@media (max-width: 899px) and (max-height: 700px) {
  html.lr-on .lr-shots--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.lr-on .lr-card:nth-child(n + 9) { display: none; }
  html.lr-on .lr-qa__it summary { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) { .lr-tile__i, .lr-shot, .lr-join { transition: none; } }