/* Story time in a tablet's web browser.
   Written for an old iPad's Safari (iPadOS 15/16): no :has(), no CSS
   nesting, no flex `gap` (Safari 14.1+), margins instead.
   Look: the Kindred family app's — navy ground, gold accents, cream cards
   with a thin silver-to-gold rim. Sized to be read at arm's length by a
   child and a grandparent. */

:root {
  --navy: #1B2A4A;
  --navy-top: #23375E;
  --navy-deep: #111C34;
  --navy-soft: #2A3B60;
  --navy-panel: #24365A;
  --gold: #FFC63D;
  --gold-press: #E8AE22;
  --cream: #FBF6EC;
  --ink: #1B2A4A;
  --muted: #B9C3D6;
  --red: #D9473F;
  --red-press: #BD3730;
  --white: #FFFFFF;
  --rim-top: rgba(255,255,255,0.6);
  --rim: linear-gradient(180deg, var(--rim-top) 0%, var(--gold) 100%);
  --side: clamp(150px, 18vw, 240px);
  --face: clamp(150px, 26vmin, 240px);
  --head: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  color: var(--white);
  font-family: var(--body); font-size: 22px; line-height: 1.4;
  overflow: hidden; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
html { background: var(--navy); }
body {
  /* Fixed to the glass: no pull-to-refresh, no rubber-band bounce. */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--navy);
  background: linear-gradient(180deg, var(--navy-top) 0%, var(--navy) 45%, var(--navy-deep) 100%);
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }

h1, h2 { font-family: var(--head); font-weight: 900; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.5vmin, 52px); }
h1 b { color: var(--gold); font-weight: 900; }
h2 { font-size: 38px; }

/* ── Screens ─────────────────────────────────────────────────────── */
.screen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* A short window scrolls rather than squeezing anything. */
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.screen.on { display: -webkit-box; display: flex; }
.col {
  margin: auto; width: 100%; max-width: 760px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Nothing in a column may be squashed to fit — it scrolls instead. */
.col > * { margin-top: 0; margin-bottom: 0; flex: 0 0 auto; max-width: 100%; }
.col > * + * { margin-top: clamp(12px, 2.4vmin, 24px); }

.lead { font-size: clamp(22px, 3vmin, 26px); color: #E4E9F2; line-height: 1.4; }
.small { font-size: 20px; color: var(--muted); line-height: 1.45; max-width: 600px; }
.err { min-height: 1.4em; font-size: 22px; font-weight: 700; color: #FFB4AE; line-height: 1.4; }
.err:empty { min-height: 0; }

.mark { width: clamp(56px, 9vmin, 84px); height: auto; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.gold, .red {
  font-family: var(--head); font-weight: 900; border-radius: 999px;
  min-height: 72px; padding: 0 40px; line-height: 1.15;
  box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.22);
  transition: transform .08s ease;
}
.gold { background: var(--gold); color: var(--ink); }
.gold:active { background: var(--gold-press); transform: translateY(3px); }
.red { background: var(--red); color: var(--white); }
.red:active { background: var(--red-press); transform: translateY(3px); }
.big { font-size: 28px; min-height: 80px; min-width: 280px; }
.huge {
  font-size: clamp(32px, 5vmin, 42px); min-height: 100px;
  min-width: min(100%, 440px); padding: 14px 56px;
}
.link { font-size: 20px; font-weight: 600; color: var(--muted); text-decoration: underline; padding: 12px 20px; }
.buttons { display: flex; flex-wrap: wrap; justify-content: center; }
.buttons > button { margin: 8px 10px; }
.buttons:empty { display: none; }

/* ── Number boxes and pad ────────────────────────────────────────── */
.boxes { display: flex; justify-content: center; }
.boxes span {
  width: clamp(48px, 8.4vmin, 76px); height: clamp(62px, 10.6vmin, 92px);
  margin: 0 clamp(4px, .9vmin, 8px);
  border-radius: 16px; color: var(--ink);
  border: 2px solid transparent;
  background: linear-gradient(var(--cream), var(--cream)) padding-box, var(--rim) border-box;
  font-family: var(--head); font-weight: 900; font-size: clamp(34px, 6.4vmin, 56px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.boxes span.next { box-shadow: inset 0 0 0 4px var(--gold), 0 6px 16px rgba(0,0,0,.22); }
.boxes span:nth-child(3) { margin-right: clamp(14px, 2.6vmin, 26px); }

.pad { display: grid; grid-template-columns: repeat(3, clamp(88px, 13vmin, 124px)); justify-content: center; }
.pad button {
  height: clamp(60px, 9.2vmin, 86px); margin: clamp(4px, .8vmin, 7px);
  border-radius: 20px; background: var(--navy-soft); color: var(--white);
  font-family: var(--head); font-weight: 800; font-size: clamp(32px, 5vmin, 44px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 0 rgba(0,0,0,.28);
}
.pad button.soft { font-size: clamp(20px, 2.8vmin, 24px); color: #DCE3EF; }
.pad button:active { background: #3A4D78; transform: translateY(2px); }

/* ── Faces ───────────────────────────────────────────────────────── */
/* Her photo is a background on the circle (set by app.js), so `cover`
   and `center 30%` do what object-fit/object-position would. Width and
   height are the same fixed size and the circle never flexes, so it
   stays perfectly round on every screen and every Safari. */
.face {
  border-radius: 50%;
  background-color: var(--navy-soft);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 30%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 900; color: var(--gold);
  line-height: 1;
}
.face.big {
  width: var(--face); height: var(--face);
  min-width: var(--face); min-height: var(--face);
  max-width: var(--face); max-height: var(--face);
  -webkit-box-flex: 0; flex: 0 0 auto; align-self: center;
  aspect-ratio: 1 / 1;
  font-size: calc(var(--face) * .42);
  box-shadow: 0 0 0 5px var(--gold), 0 14px 34px rgba(0,0,0,.4);
  margin-bottom: 6px;
}
.col > .face.big + * { margin-top: clamp(18px, 3vmin, 30px); }
.face.pulse { -webkit-animation: pulse 1.6s ease-in-out infinite; animation: pulse 1.6s ease-in-out infinite; }
@-webkit-keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--gold), 0 0 0 5px rgba(255,198,61,.5), 0 14px 34px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 0 5px var(--gold), 0 0 0 32px rgba(255,198,61,0), 0 14px 34px rgba(0,0,0,.4); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--gold), 0 0 0 5px rgba(255,198,61,.5), 0 14px 34px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 0 5px var(--gold), 0 0 0 32px rgba(255,198,61,0), 0 14px 34px rgba(0,0,0,.4); }
}

.who {
  font-size: clamp(22px, 3.2vmin, 28px); font-weight: 700; line-height: 1.4; color: #EEF2F8;
  border-radius: 22px; padding: 16px 28px;
  border: 2px solid transparent;
  background: linear-gradient(var(--navy-panel), var(--navy-panel)) padding-box, var(--rim) border-box;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

/* ── Counted progress (never a spinner) ──────────────────────────── */
.count { font-family: var(--head); font-weight: 900; font-size: clamp(34px, 5.4vmin, 48px); color: var(--gold); }
.count:empty { display: none; }
.bar { width: min(460px, 80%); height: 16px; border-radius: 8px; background: var(--navy-soft); overflow: hidden; display: none; }
.bar.on { display: block; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 8px; transition: width .2s ease; }

/* ── Reading ─────────────────────────────────────────────────────── */
#scrRead {
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.read {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "her  page you"
    "back page next"
    "foot foot foot";
  grid-column-gap: 14px; grid-row-gap: 10px;
}
#herTile { grid-area: her; }
#youTile { grid-area: you; }
#pageCard { grid-area: page; }
#foot { grid-area: foot; }
.turn.back { grid-area: back; }
.turn.next { grid-area: next; }

.tile { min-width: 0; }
.vid {
  position: relative; width: 100%; height: calc(var(--side) * 1.25);
  border-radius: 18px; overflow: hidden; background: var(--navy-soft);
  border: 2px solid transparent;
  background: linear-gradient(var(--navy-soft), var(--navy-soft)) padding-box, var(--rim) border-box;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.vid video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; border-radius: 16px; }
.vid video.mirror { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.face.fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; font-size: 72px; }
.name { margin: 8px 0 0; text-align: center; font-family: var(--head); font-weight: 800; font-size: 20px; color: #E4E9F2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card {
  position: relative; min-width: 0; min-height: 0; border-radius: 22px; overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(var(--cream), var(--cream)) padding-box, var(--rim) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.stage { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; display: flex; align-items: center; justify-content: center; }
.pagebox { position: relative; touch-action: none; }
.pagebox img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.dots { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.dot {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255,198,61,.8); box-shadow: 0 0 0 4px rgba(255,255,255,.75), 0 4px 14px rgba(0,0,0,.25);
  -webkit-animation: dotLife 2.2s ease-out forwards; animation: dotLife 2.2s ease-out forwards;
}
.dot.hers { box-shadow: 0 0 0 4px rgba(27,42,74,.65), 0 4px 14px rgba(0,0,0,.25); }
@-webkit-keyframes dotLife { 0% { -webkit-transform: scale(.4); opacity: 0; } 12% { -webkit-transform: scale(1.1); opacity: 1; } 25% { -webkit-transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dotLife { 0% { transform: scale(.4); opacity: 0; } 12% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

.turn {
  align-self: end; justify-self: center;
  width: clamp(88px, 11.5vmin, 112px); height: clamp(88px, 11.5vmin, 112px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.22);
}
.turn svg { width: 46%; height: 46%; }
.turn.back { background: var(--navy-soft); color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 6px 0 rgba(0,0,0,.25); }
.turn.next { background: var(--gold); color: var(--ink); }
.turn:active { transform: translateY(3px); }

.foot { display: flex; align-items: center; min-width: 0; min-height: 64px; }
.foot-ic { width: 38px; height: 38px; flex: 0 0 auto; margin-right: 12px; }
.foot-title { font-family: var(--head); font-weight: 900; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.foot-page { font-size: 24px; color: var(--muted); white-space: nowrap; margin-left: 14px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 22px; min-height: 60px; padding: 0 28px; flex: 0 0 auto; margin-left: 12px; }

/* Upright iPad: faces in a row on top, the page below, buttons under it. */
@media (orientation: portrait) {
  .read {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "her  you"
      "page page"
      "back next"
      "foot foot";
  }
  .vid { height: clamp(130px, 21vh, 260px); }
  .turn { align-self: center; }
}

/* A narrow footer: the page count gives way first, then the title. */
@media (max-width: 820px) {
  .foot-title { font-size: 24px; }
  .foot-page { font-size: 22px; }
  .pill { font-size: 20px; padding: 0 22px; }
}

/* A short landscape window (a laptop browser, an iPad with Safari's bars):
   drop the little book mark so the number pad fits without scrolling. */
@media (max-height: 900px) and (orientation: landscape) {
  .mark { display: none; }
  .col > * + * { margin-top: clamp(10px, 2vmin, 18px); }
  .col > .face.big + * { margin-top: clamp(16px, 2.6vmin, 26px); }
}

/* ── Chips, the floating "hear" button, the confirm veil ─────────── */
.chip {
  position: absolute; left: 50%; top: max(18px, env(safe-area-inset-top));
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: 21px;
  padding: 14px 24px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  display: none; max-width: calc(100% - 32px); text-align: center; z-index: 5;
}
.chip.on { display: block; }
.chip.warn { background: var(--cream); top: auto; bottom: 100px; }
.floating { position: absolute; left: 50%; bottom: 116px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; z-index: 6; }
.floating.on { display: block; }

.veil {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  background: rgba(10,18,34,.72); display: none; align-items: center; justify-content: center; padding: 16px;
}
.veil.on { display: flex; }
.ask {
  border-radius: 28px; padding: 38px 28px; text-align: center; max-width: 600px; width: 100%;
  border: 3px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--rim) border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ask .buttons { margin-top: 24px; }
.ask .big { min-width: 200px; }

/* ── A paired tablet: the tick, the bookshelf, who reads ──────────── */
.soft-btn {
  font-family: var(--head); font-weight: 900; border-radius: 999px;
  min-height: 72px; padding: 0 40px; line-height: 1.15; color: var(--white);
  background: var(--navy-soft);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 6px 0 rgba(0,0,0,.25);
  transition: transform .08s ease;
}
.soft-btn:active { background: #3A4D78; transform: translateY(3px); }

.tick {
  width: clamp(120px, 20vmin, 180px); height: clamp(120px, 20vmin, 180px);
  border-radius: 50%; background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(255,198,61,.25), 0 14px 34px rgba(0,0,0,.4);
}
.tick svg { width: 62%; height: 62%; }
.col > .tick + * { margin-top: clamp(22px, 3.6vmin, 36px); }

/* Back to the books: top-left, out of the way of the middle column. */
.screen.hasback { padding-top: calc(max(20px, env(safe-area-inset-top)) + 84px); }
.backbtn {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  display: none; align-items: center;
  min-height: 64px; padding: 0 26px 0 14px; border-radius: 999px;
  background: var(--navy-soft); color: var(--white);
  font-family: var(--head); font-weight: 800; font-size: 24px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.28);
  z-index: 3;
}
.hasback > .backbtn { display: flex; }
.backbtn svg { width: 30px; height: 30px; margin-right: 6px; }
.backbtn:active { background: #3A4D78; transform: translateY(2px); }

/* The shelf: top-aligned and wide, scrolls when there are many books. */
.wide { margin: 0 auto; width: 100%; max-width: 1180px; align-self: flex-start; padding-bottom: 24px; }
.shelf-head { display: flex; align-items: center; justify-content: center; text-align: left; padding: 6px 0 4px; }
.face.ring {
  width: clamp(84px, 13vmin, 120px); height: clamp(84px, 13vmin, 120px);
  min-width: clamp(84px, 13vmin, 120px); flex: 0 0 auto;
  font-size: clamp(36px, 5.5vmin, 52px);
  box-shadow: 0 0 0 4px var(--gold), 0 10px 24px rgba(0,0,0,.35);
  margin-right: clamp(16px, 3vmin, 28px);
}
.shelf-note { text-align: center; margin: 14px 0 0; }
.books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-gap: clamp(18px, 3vmin, 30px);
  margin-top: clamp(20px, 3.4vmin, 34px);
}
.books:empty { display: none; }
.book {
  display: block; width: 100%; padding: 10px 10px 0; text-align: center; color: var(--ink);
  border-radius: 24px; border: 3px solid transparent;
  background: linear-gradient(var(--cream), var(--cream)) padding-box, var(--rim) border-box;
  box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 12px 26px rgba(0,0,0,.28);
  transition: transform .08s ease;
}
.book:active { transform: translateY(3px) scale(.99); }
.cover {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 16px; background: #EFE6D2;
  display: flex; align-items: center; justify-content: center;
}
.cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.cover svg { width: 46%; height: auto; }
.book-title {
  display: block; font-family: var(--head); font-weight: 900; font-size: clamp(22px, 2.8vmin, 27px);
  line-height: 1.2; padding: 12px 6px 16px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shelf-empty { text-align: center; margin-top: 40px; display: none; }
.shelf-empty.on { display: block; }
.shelf-foot { text-align: center; margin: 34px auto 0; }

/* Who reads: the cover big, then two huge choices. */
.cover-big {
  position: relative; width: clamp(200px, 34vmin, 340px); aspect-ratio: 1 / 1;
  border-radius: 24px; overflow: hidden; border: 3px solid transparent;
  background: linear-gradient(#EFE6D2, #EFE6D2) padding-box, var(--rim) border-box;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.cover-big img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-big svg { width: 46%; height: auto; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.choice {
  flex: 1 1 300px; max-width: 440px; min-height: 120px; margin: 10px;
  padding: 18px 28px; border-radius: 30px;
  font-family: var(--head); font-weight: 900; font-size: clamp(28px, 4.4vmin, 38px); line-height: 1.15;
  box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.22);
  transition: transform .08s ease;
}
.choice:active { transform: translateY(3px); }
.choice.gold-c { background: var(--gold); color: var(--ink); }
.choice.cream-c { color: var(--ink); border: 3px solid transparent;
  background: linear-gradient(var(--cream), var(--cream)) padding-box, var(--rim) border-box; }