/* Self-hosted fonts (SIL Open Font License, see fonts/OFL-*.txt), so they also work offline.
   Andika (SIL) is made for beginning readers and covers Latin and Greek; Comfortaa is for titles. */
@font-face { font-family: "Andika"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/andika-regular.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/andika-bold.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/comfortaa-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/comfortaa-greek-700.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* Warm palette: soft plum-brown, warm cream, honey gold (no blue). */
:root {
  --bg: #2e2733;
  --bg-2: #3b3241;
  --card: #463b4d;
  --text: #f6eedb;
  --muted: #b9b6cc;
  --moon: #f3d68c;
  --heart: #ef9a9a;
  --line: rgba(246, 238, 219, 0.12);
  --radius: 22px;
  --fade: 450ms;
  --font-text: "Andika", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-title: "Comfortaa", "Andika", ui-rounded, system-ui, sans-serif;
  font-family: var(--font-text);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --fade: 0ms; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }
.icon { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view { min-height: 100%; animation: fadein var(--fade) ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Library ---------- */
/* The home and setup screens are a warm reading room, lit like the time of day (roomLight() in
   app.js): cream walls and honey shelves by day, a softer lamp-lit room in the evening. The colours
   are set on the room, so the open book, the player and the covers keep their own. */
.library, .setup {
  --wall: #f5ead6; --glow: #fff7e6; --dots: rgba(150, 105, 60, 0.1);
  --text: #47362a; --muted: #7d6856; --bg-2: #fffaf1; --card: #fff; --line: rgba(90, 60, 30, 0.15);
  --moon: #efb862; --title-ink: #a85a2a; --focus: #b5662a; --raise: 0 1px 3px rgba(90, 60, 30, 0.1);
  --wood: #c99a66; --wood-top: #e0bb8a; --wood-dark: #a77a4b; --label: #4e321b; --shade: #e2cfb0;
  --frame: #fffaf1; --frame-line: #e6d2b2; --case: #8f6646; --case-dark: #6f4c33; --case-ink: #f7ead6;
  color: var(--text);
  background: radial-gradient(1000px 560px at 15% -10%, var(--glow), transparent 70%),
    radial-gradient(var(--dots) 1.3px, transparent 1.7px) 0 0 / 28px 28px, var(--wall);
}
[data-light="evening"] .library, [data-light="evening"] .setup {
  --wall: #2e2733; --glow: rgba(240, 170, 95, 0.14); --dots: rgba(246, 225, 190, 0.05);
  --text: #f4e9d8; --muted: #c4b4a4; --bg-2: #3b3241; --card: #463b4d; --line: rgba(246, 230, 205, 0.14);
  --moon: #f0c27a; --title-ink: #f0c27a; --focus: #f0c27a; --raise: none;
  --wood: #6f4b34; --wood-top: #8c6245; --wood-dark: #523524; --label: #f0dcc0; --shade: #231d28;
  --frame: #40354a; --frame-line: #594b58; --case: #4a3226; --case-dark: #34221a; --case-ink: #f0dfc8;
}
.library .book-cover, .library .fav { --text: #f6eedb; --moon: #f3d68c; --heart: #ef9a9a; }  /* covers look the same everywhere */
.library button:focus-visible, .setup button:focus-visible { outline-color: var(--focus); }
.library { min-height: 100vh; min-height: 100dvh; }
html[data-light="day"], html[data-light="day"] body { background: #f5ead6; }
html[data-light="evening"], html[data-light="evening"] body { background: #2e2733; }
/* Portrait: a short header (greeting, settings, the shelf switch) above the bookcase.
   Landscape (further down): the room on the left 2/5, the bookcase on the right 3/5. */
.room-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px;
  padding: max(14px, env(safe-area-inset-top)) max(clamp(16px, 4vw, 40px), env(safe-area-inset-right)) 18px max(clamp(16px, 4vw, 40px), env(safe-area-inset-left)); }
.room-side .brand { display: none; }
.room-side .hero { grid-column: 1; grid-row: 1; }
.room-side .tools { grid-column: 2; grid-row: 1; }
.room-side .tabs { grid-column: 1 / -1; }
.tools { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; font-family: var(--font-title); color: var(--muted); }
.brand .icon { font-size: 26px; color: var(--title-ink); }
/* The bookcase: a slightly deeper wall, the shelves running across it. */
/* The bookcase: a brown wooden back with soft vertical grain, darker towards its edges, and deep
   shadows under the top and along the sides, so the shelves sit inside a box. */
.bookcase { --wall: var(--case); --shade: var(--case-dark); position: relative; overflow-x: clip; color: var(--case-ink);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 9px, rgba(255, 255, 255, 0.025) 9px 11px, transparent 11px 23px),
    radial-gradient(120% 90% at 50% 40%, var(--case), var(--case-dark));
  box-shadow: inset 0 22px 26px -14px rgba(20, 10, 4, 0.55), inset 18px 0 24px -16px rgba(20, 10, 4, 0.5), inset -18px 0 24px -16px rgba(20, 10, 4, 0.5);
  padding: clamp(18px, 3vw, 36px) max(clamp(16px, 4vw, 40px), env(safe-area-inset-right)) 56px max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
  container-type: inline-size; }
.bookcase .grid { grid-template-columns: 1fr; }
@container (min-width: 520px) { .bookcase .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .bookcase .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (orientation: landscape) and (min-width: 900px) {
  .library { display: grid; grid-template-columns: 2fr 3fr; height: 100vh; height: 100dvh; overflow: hidden; }
  /* Top: the name (left) and the settings and full screen buttons (right); middle: the greeting; bottom: the shelf switch. */
  .room-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: center;
    gap: 18px 14px; min-height: 0; overflow-y: auto;
    padding: max(24px, env(safe-area-inset-top)) clamp(20px, 3vw, 40px) max(24px, env(safe-area-inset-bottom)) max(clamp(20px, 3vw, 40px), env(safe-area-inset-left)); }
  .room-side .brand { display: flex; grid-column: 1; grid-row: 1; }
  .room-side .tools { grid-column: 2; grid-row: 1; }
  .room-side .hero { grid-column: 1 / -1; grid-row: 2; align-self: stretch; flex-direction: column; justify-content: center; text-align: center; gap: clamp(14px, 3vh, 28px); }
  .room-side .room-window { display: block; width: min(56%, 34vh, 240px); }
  .room-side .tabs { grid-column: 1 / -1; grid-row: 3; display: grid; justify-self: stretch; border-radius: 26px; }
  .room-side .tab { justify-content: center; padding: 14px 18px; font-size: 19px; border-radius: 20px; }
  .room-side .tab-glow { border-radius: 20px; }
  .room-side .profile-chip { width: 50px; padding: 0; justify-content: center; }
  .room-side .profile-chip span { display: none; }
  .bookcase { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-top: clamp(28px, 5vh, 48px); padding-left: clamp(28px, 3vw, 48px);
    border-left: 14px solid var(--wood); border-right: 10px solid var(--wood); border-image: linear-gradient(90deg, var(--wood-top), var(--wood), var(--wood-dark)) 1; }
}
.pills { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.pill { padding: 10px 18px; border-radius: 999px; font-size: 17px; color: var(--muted); min-width: 56px; }
.pill[aria-pressed="true"] { background: var(--moon); color: #3a2a1c; font-weight: 700; }
.fs-btn { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--raise); transition: color var(--fade); }
.fs-btn[aria-pressed="true"] { color: var(--moon); }
/* The child's profile (name, age, language): the one way to change them, quiet but easy to find. */
.profile-chip { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: 999px; font-size: 17px;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--raise); }
.profile-chip .icon { font-size: 22px; }
.list-note { margin: -6px 0 14px; color: var(--muted); font-size: 16px; }
/* A picture not drawn yet: a still, soft gradient in the age's colours with a quiet note. */
.ph { display: grid; place-items: center; text-align: center; color: rgba(255, 255, 255, 0.62);
  background: radial-gradient(70% 60% at 50% 40%, #c99a72 0%, transparent 70%), linear-gradient(#9a7460, #5a4248); }
.ph[data-age="2-3"] { background: radial-gradient(70% 60% at 50% 40%, #f6d6c8 0%, transparent 70%), linear-gradient(#f0d9b8, #e3bf98); color: rgba(80, 52, 30, 0.6); }
.ph[data-age="6-7"] { background: radial-gradient(45% 45% at 50% 40%, rgba(243, 200, 120, 0.45) 0%, transparent 70%), linear-gradient(#4a3640, #2a2026); }
.stage .pg > .ph { position: absolute; inset: 0; }
.stage .ph span { position: absolute; left: 20%; right: 20%; top: 30%; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.5; font-style: italic; }
/* The two shelves, as one switch: the stories for the child's age, and the favorites. */
.tabs { position: relative; display: inline-flex; justify-self: start; gap: 4px; padding: 5px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--raise); }
.tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 11px 22px; border-radius: 999px; font-size: 18px; color: var(--muted); transition: background var(--fade), color var(--fade); }
.tab[aria-pressed="true"] { color: #3a2a1c; font-weight: 700; }
/* The yellow highlight behind the chosen shelf: it slides softly to the other one (app.js placeGlow). */
.tab-glow { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 20px; background: var(--moon); pointer-events: none;
  transition: transform 520ms cubic-bezier(0.45, 0, 0.3, 1), width 520ms cubic-bezier(0.45, 0, 0.3, 1), height 520ms cubic-bezier(0.45, 0, 0.3, 1); }
.tabs:not(.ready) .tab-glow { transition: none; }
@media (prefers-reduced-motion: reduce) { .tab-glow { transition: none; } }
.tab .icon { font-size: 20px; }
.notice { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; color: var(--muted); margin-bottom: 16px; font-size: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
/* A story is a picture book: its cover, with a spine on the left and page edges on the right. */
.card { position: relative; transition: opacity var(--fade); }
.card.unavailable { opacity: 0.45; }
.card.lifted { visibility: hidden; }
.card.off { display: none; }  /* on the other shelf (stories for the age / favorites) */
.age-note { display: none; }
.library[data-tab="favs"] .age-note { display: inline; }  /* its book is open: the place on the shelf stays empty */
.card .open { display: block; width: 100%; text-align: left; border-radius: 6px 16px 16px 6px; }
.book-cover { position: relative; display: block; aspect-ratio: 1; container-type: inline-size; border-radius: 6px 16px 16px 6px; overflow: hidden;
  background: var(--card-color, #8a6a4a); box-shadow: 3px 3px 0 -1px #d9cfb6, 6px 6px 0 -2px #b3a98f, 0 14px 30px rgba(0, 0, 0, 0.35); }
.book-cover > img, .book-cover > .ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.book-cover::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 5%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.14) 55%, rgba(0, 0, 0, 0.2)); }
/* The title is printed on the cover: big, centred in the clear band at the bottom of the picture,
   with a soft shade behind it instead of a band. Sizes follow the cover, so it looks the same
   on the shelf and on the cover that turns. */
.book-cover::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, rgba(28, 19, 12, 0.55)); }
/* Pressed into the cover: a dark edge along the top of the letters and a light one along the
   bottom, like a stamped title, with a soft glow kept for reading on busy pictures. */
.book-title { position: absolute; z-index: 1; left: 9%; right: 6%; bottom: 7%; text-align: center; text-wrap: balance; color: #efe2c2;
  font-family: var(--font-title); font-weight: 700; font-size: 8.5cqw; line-height: 1.12; letter-spacing: 0.01em;
  text-shadow: 0 -0.28cqw 0.1cqw rgba(30, 20, 10, 0.7), 0 0.24cqw 0.1cqw rgba(255, 248, 225, 0.35), 0 0.5cqw 2.6cqw rgba(22, 14, 8, 0.5); }
/* On the cover, top left: the value and the minutes. */
.cover-tags { position: absolute; z-index: 1; top: 14px; left: calc(5% + 10px); right: 76px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.cover-tags > * { padding: 4px 11px; border-radius: 999px; background: rgba(32, 23, 16, 0.62); color: var(--text); }
.cover-tags .tag { background: rgba(32, 23, 16, 0.62); color: var(--moon); }
/* Under the cover: the offline badge and, in Favorites, the age note. The heart sits on the cover, top right. */
/* The books stand on wooden shelves that run across the room, one under each row. Each book draws
   the whole shelf under it (clipped by the room); the room's labels sit on its front edge. */
.library .grid { row-gap: clamp(34px, 5vw, 56px); column-gap: clamp(20px, 3vw, 40px); }
.card .open { position: relative; z-index: 1; }  /* the book stands on the shelf, in front of its top */
.shelf-row { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; margin-top: -10px; padding: 14px 8px 0;
  color: var(--label); font-size: 14px; }
.shelf-row::before, .shelf-row::after { content: ""; position: absolute; z-index: 0; left: -100vw; right: -100vw; }
/* The top of the shelf (the books stand on it), its front edge, and its shadow on the wall. */
.shelf-row::before { top: 0; height: 100%;
  background: linear-gradient(var(--wood-top), var(--wood-top) 14px, var(--wood-dark) 14px, var(--wood) 16px, var(--wood) 80%, var(--wood-dark)); }
.shelf-row::after { top: 100%; height: 26px;
  background: linear-gradient(var(--shade), color-mix(in srgb, var(--shade) 35%, var(--wall)) 45%, var(--wall)); }
.shelf-row > * { position: relative; z-index: 1; }
.card.lifted .shelf-row { visibility: visible; }  /* the shelf stays while its book is open */
.card .sub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-right: auto; color: inherit; font-size: 15px; }
.tag { padding: 3px 10px; border-radius: 999px; background: rgba(243, 214, 140, 0.15); color: var(--moon); }
.fav { position: absolute; z-index: 2; top: 10px; right: 10px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(32, 23, 16, 0.62); font-size: 26px; color: var(--text); }
.fav[aria-pressed="true"] { color: var(--heart); }
.fav[aria-pressed="true"] .icon { fill: currentColor; }
.age-note { color: var(--muted); opacity: 0.8; }  /* this story is read in a younger version for now */
.offline-badge { flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.shelf-row .offline-badge, .shelf-row .age-note { color: inherit; opacity: 0.85; }
.offline-badge .icon { font-size: 15px; }
.offline-badge[hidden] { display: none; }
.empty { color: var(--muted); text-align: center; padding: 60px 20px; font-size: 19px; line-height: 1.5; }
.bookcase .list-note, .bookcase .empty { color: var(--case-ink); opacity: 0.9; }
.tab-glow { border-radius: 999px; }

/* ---------- Player ---------- */
.player { position: fixed; inset: 0; background: #1f1a1e; }
/* The picture fills the whole screen (cropping a little at the edges if the shape differs). */
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.stage .pg { position: absolute; inset: 0; transition: opacity var(--fade) ease; }
.stage .pg > svg, .stage .pg > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* Gentle motion inside the pictures stops when switched off in the options, on the picture that
   is fading out, and while the app is in the background. */
.stage.still .mv, .stage .pg.off .mv, .app-hidden .stage .mv { animation-play-state: paused !important; }
.stage .tap { position: absolute; top: 0; bottom: 0; width: 30%; z-index: 2; }
.stage .tap.prev { left: 0; } .stage .tap.next { right: 0; }
/* The current phrase: bottom left, in a soft dark grey see-through box. */
.caption { position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  max-width: min(60%, 820px); background: rgba(28, 28, 30, 0.62); border-radius: 20px; padding: 14px 22px;
  font-size: clamp(21px, 2.6vw, 32px); line-height: 1.4; text-wrap: pretty; pointer-events: none; transition: opacity var(--fade); }
/* Hidden words stay in the layout but out of sight. The phrase fade-in must not run on them: an
   animation's opacity would override the hiding (that made "Show words" seem not to work). */
.caption[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }
.caption.fresh:not([hidden]) { animation: fadein calc(var(--fade) * 0.6) ease both; }
/* Back / play / next: bottom right. */
.controls { position: absolute; z-index: 3; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; }
/* Narrow phones: the words take the full width above the buttons and the page counter. */
@media (max-width: 600px) {
  .caption { right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); max-width: none;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 114px); font-size: 20px; padding: 12px 18px; }
}
/* Controls float on the picture: small and see-through so little ones hardly notice them,
   fully visible when hovered or focused. */
.ctl, .float { border-radius: 50%; display: grid; place-items: center; color: var(--text); background: rgba(28, 28, 30, 0.6);
  opacity: 0.45; transition: opacity var(--fade); }
.ctl:hover, .ctl:focus-visible, .float:hover, .float:focus-visible, .float[aria-expanded="true"] { opacity: 1; }
.ctl { width: 52px; height: 52px; font-size: 24px; }
.ctl:disabled { opacity: 0.2; }
.ctl.big { width: 64px; height: 64px; font-size: 30px; background: rgba(243, 214, 140, 0.85); color: #3a2a1c; }
.float { position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); width: 48px; height: 48px; font-size: 22px; }
.float.home { left: max(12px, env(safe-area-inset-left)); }
.float.opts { right: max(12px, env(safe-area-inset-right)); }
.options { position: absolute; z-index: 6; top: calc(max(12px, env(safe-area-inset-top)) + 58px); right: max(12px, env(safe-area-inset-right));
  display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(28, 28, 30, 0.9); border: 1px solid var(--line);
  animation: fadein var(--fade) ease both; }
.options[hidden] { display: none; }
.options .pills { justify-content: center; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font-size: 17px; color: var(--muted); background: var(--bg-2); }
.opt-row .icon { font-size: 20px; }
.opt-row[aria-pressed="true"] { background: var(--moon); color: #3a2a1c; font-weight: 700; }
/* Quiet page counter ("7 / 32"), centred just above back / play / next (192px wide). Tapping it
   opens the page picker. */
.counter { position: absolute; z-index: 4; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  right: calc(max(16px, env(safe-area-inset-right)) + 96px); transform: translateX(50%);
  padding: 4px 12px; border-radius: 999px; background: rgba(28, 28, 30, 0.5); color: var(--text); font-size: 15px;
  font-variant-numeric: tabular-nums; opacity: 0.45; white-space: nowrap; transition: opacity var(--fade); }
.counter:hover, .counter:focus-visible { opacity: 1; }
/* The page picker: every page's picture with its number, the current one ringed. */
.pages-view { position: absolute; inset: 0; z-index: 8; overflow-y: auto; background: rgba(30, 23, 18, 0.95); animation: fadein var(--fade) ease both;
  padding: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.pages-view[hidden] { display: none; }
.pages-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 4px 14px; background: rgba(30, 23, 18, 0.97);
  font-family: var(--font-title); font-weight: 700; font-size: 22px; color: var(--text); }
.pages-close { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(255, 255, 255, 0.08); }
.pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.page-pick { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #3a2e25; }
.page-pick > img, .page-pick > .ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.page-pick .num { position: absolute; left: 8px; bottom: 8px; padding: 2px 10px; border-radius: 999px; font-size: 15px;
  font-variant-numeric: tabular-nums; background: rgba(28, 28, 30, 0.75); color: var(--text); }
.page-pick[aria-current] { outline: 3px solid var(--moon); outline-offset: 2px; }
.page-pick[aria-current] .num { background: var(--moon); color: #3a2a1c; font-weight: 700; }

/* End page */
.the-end { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(800px 500px at 50% 30%, #4a3a44, #241d22); animation: fadein var(--fade) ease both; }
.the-end h2 { font-size: clamp(30px, 5vw, 48px); margin: 0 0 12px; color: var(--moon); font-family: var(--font-title); }
.the-end p { font-size: clamp(18px, 2.6vw, 26px); max-width: 720px; margin: 0 auto 28px; line-height: 1.5; }
.the-end .row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: 19px; background: var(--bg-2); border: 1px solid var(--line); }
.btn.primary { background: var(--moon); color: #3a2a1c; font-weight: 700; border: 0; }
.btn .icon { font-size: 22px; }
.btn.faved .icon { fill: var(--heart); stroke: var(--heart); }

/* ?safe=1: the picture safe area (dev aid). Reserved bands are shaded. */
.safe-guide { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; outline: 3px dashed rgba(240, 120, 120, 0.9);
  box-shadow: 0 0 0 100vmax rgba(200, 60, 60, 0.22); }

/* Home: a big greeting with the child's name, and the room's window (sun by day, moon in the evening). */
.hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
.greeting { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 4vw, 44px); line-height: 1.15; color: var(--text); text-wrap: balance; }
.hero-sub { margin: 6px 0 0; font-size: clamp(16px, 2vw, 22px); color: var(--muted); }
.room-window { flex-shrink: 0; width: 64px; height: auto; display: block; }
.room-window .frame { fill: var(--frame); }
.room-window .frame-line { fill: none; stroke: var(--frame-line); stroke-width: 6; }
.room-window .sill { fill: var(--wood-top); }
.room-window .leaf { fill: none; stroke: #7fa56b; stroke-width: 5; stroke-linecap: round; }
.room-window .pot { fill: #d9805a; }

/* Child setup: one calm card with large, easy choices. */
/* Phones: the window and the long profile words go; the settings button keeps its icon. */
@media (max-width: 600px) {
  .room-window { display: none; }
  .profile-chip { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .profile-chip span { display: none; }
  .fs-btn { width: 48px; height: 48px; }
  .room-side .tabs { display: flex; justify-self: stretch; }
  .tab { flex: 1; justify-content: center; padding: 10px; font-size: 16px; }
}

/* Child setup (and later the child's settings): a page that scrolls, every choice saved at once. */
.setup { min-height: 100vh; min-height: 100dvh; display: grid; justify-items: center; align-content: start;
  padding: max(clamp(20px, 5vh, 56px), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.setup.no-fade { animation: none; }
.setup-card { width: min(680px, 100%); display: grid; gap: 20px; }
.setup-head { display: flex; align-items: center; gap: 14px; }
.setup .back { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  color: var(--text); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--raise); }
.setup-panel { display: grid; gap: 24px; padding: clamp(18px, 4vw, 30px); border-radius: 26px; background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(90, 60, 30, 0.08); }
.setup h1 { margin: 0; font-family: var(--font-title); font-size: clamp(24px, 4vw, 34px); color: var(--title-ink); }
.setup .lead { margin: 4px 0 0; color: var(--muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.5; }
.setup .field { display: grid; gap: 10px; }
.setup .label { font-size: 16px; font-weight: 700; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; }
.choice { min-height: 56px; padding: 10px 14px; border-radius: 18px; font-size: clamp(17px, 2.2vw, 20px); background: var(--wall);
  border: 1px solid var(--line); color: var(--text); transition: background var(--fade), color var(--fade); }
.choice[aria-pressed="true"] { background: var(--moon); color: #3a2a1c; font-weight: 700; border-color: transparent; }
.setup .hint { color: var(--muted); font-size: 15px; line-height: 1.4; }
.setup .row { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .choices { grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 8px; }
  .choice { padding: 8px 10px; font-size: 16px; line-height: 1.25; }
}
.setup .btn { font-size: 20px; padding: 16px 28px; }

/* Intro splash: the cgeosoft logo and the app name, soft fade in and out. */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(900px 600px at 50% 40%, #3f3340, var(--bg)); animation: fadein calc(var(--fade) * 1.4) ease both;
  transition: opacity calc(var(--fade) * 1.4) ease; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-in { display: grid; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
.intro-logo { width: min(150px, 34vw); aspect-ratio: 320 / 285; background: var(--moon); opacity: 0.85;
  -webkit-mask: url("/brand/cgeosoft.png") center / contain no-repeat; mask: url("/brand/cgeosoft.png") center / contain no-repeat; }
.intro-name { font-family: var(--font-title); font-weight: 700; font-size: clamp(22px, 4vw, 32px); color: var(--text); opacity: 0.9; }

/* The silent keep-awake video: playing but not visible. */
.awake { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--line);
  padding: 12px 20px; border-radius: 14px; font-size: 16px; z-index: 10; max-width: calc(100% - 32px); animation: fadein var(--fade) ease both; }

/* ---------- The open book ----------
   Tapping a cover lifts the book from the shelf and opens it: the picture on the left page,
   the excerpt and "Read" on the right. Slow and soft (app.js); just a fade under reduced motion.
   Narrow portrait screens get one page: the picture above the words. */
.book-open { overflow: hidden; }
.book-view { position: fixed; inset: 0; z-index: 20; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr);
  --pad: clamp(28px, 7vmin, 88px); padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right))
    max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); }
.book-view .backdrop { position: fixed; inset: 0; background: radial-gradient(900px 600px at 50% 40%, rgba(62, 46, 34, 0.94), rgba(24, 18, 13, 0.97)); }
.spread { position: relative; margin: auto; display: grid; grid-template-columns: 1fr 1fr; transform-origin: 0 0; perspective: 2600px;
  width: min(100%, (100vh - 2 * var(--pad)) * 2); width: min(100%, (100dvh - 2 * var(--pad)) * 2); }
.page { position: relative; overflow: hidden; }
/* One shadow under the whole book (a shadow per page would fall across the binding). While the
   book is still closed it sits under the right half only, then widens softly as the cover lands. */
.spread::before { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4); }
.spread.closed::before { left: 50%; }
.spread.landing::before { transition: left 700ms ease; }  /* only as the cover lands or closes, never as the book appears */
.spread { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The picture page: the picture glued onto darker paper, with a margin all round. */
.page.left, .flip .back { background: var(--grain), #cbbb96; }
.page.left { aspect-ratio: 1; border-radius: 14px 0 0 14px; }
.page.left::after, .flip .back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(70, 50, 30, 0.3), transparent 9%); }
.page.left > img, .page.left > .ph, .flip .back > img, .flip .back > .ph { position: absolute; inset: 7%; width: 86%; height: 86%; display: block;
  object-fit: cover; object-position: center; border-radius: 3px; box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.18), 0 2px 4px rgba(60, 40, 20, 0.25), 0 8px 18px rgba(60, 40, 20, 0.22); }
/* The words page is square too, on warm paper with a soft fold at the spine; its sizes follow the
   page (and it scrolls if a long excerpt needs it). */
.page.right { aspect-ratio: 1; overflow-y: auto; container-type: inline-size; display: flex; flex-direction: column; justify-content: safe center;
  gap: clamp(10px, 3cqw, 20px); border-radius: 0 14px 14px 0; color: #3a3247;
  padding: clamp(20px, 8cqw, 60px) clamp(22px, 9cqw, 68px) clamp(76px, 20cqw, 120px);
  background: linear-gradient(to right, rgba(70, 50, 30, 0.28), rgba(70, 50, 30, 0.06) 7%, transparent 14%),
    radial-gradient(130% 100% at 60% 40%, transparent 60%, rgba(120, 90, 50, 0.16)),
    var(--grain), #e9dec4; }
.page.right h2 { margin: 0; font-family: var(--font-title); color: #4a3826; font-size: clamp(22px, 6.4cqw, 40px); line-height: 1.2; }
.page.right .sub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #75695e; font-size: 15px; }
.page.right .tag { background: rgba(110, 80, 45, 0.12); color: #6e5132; }
.page.right .excerpt { margin: 0; font-size: clamp(16px, 3.9cqw, 25px); line-height: 1.5; text-wrap: pretty; }
/* "Read" hovers over the book's bottom-right corner, a little outside its edges. */
.spread .read { position: absolute; z-index: 2; right: -14px; bottom: -22px;
  font-size: clamp(19px, 2vw, 24px); padding: 15px 34px 15px 28px; box-shadow: 0 12px 30px rgba(24, 14, 6, 0.55), 0 2px 6px rgba(24, 14, 6, 0.3); }
/* The cover, hinged at the spine, turns over to the left to open the book. */
.flip { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; }
.flip .face { position: absolute; inset: 0; aspect-ratio: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* The back of the cover is the left page, fold included, so nothing changes when it lands. */
.flip .back { overflow: hidden; transform: rotateY(180deg); border-radius: 14px 0 0 14px; }
.book-close { position: fixed; z-index: 21; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--text);
  background: rgba(40, 30, 22, 0.85); border: 1px solid rgba(246, 225, 190, 0.18); }
@media (orientation: portrait) and (max-width: 900px) {
  .spread { grid-template-columns: 1fr; width: min(600px, 100%); }
  .page.left { border-radius: 14px 14px 0 0; }
  .page.left::after { display: none; }
  .page.right { aspect-ratio: auto; border-radius: 0 0 14px 14px; }
  .flip { display: none; }
}