/* Member pages: welcome + library + reader */
.member-page { min-height: 100vh; background: var(--cream); } /* solid (owner, 10 Oct 2026): the old sky-blue top showed as a hazy strip between the top bar and the tabs on iPad */
.member-page .nav { position: sticky; }
.member-main { width: min(1180px, 100% - 32px); margin: 40px auto 80px; }
.m-card {
  background: #fff; border: 4px solid var(--ink); border-radius: 30px; box-shadow: 10px 12px 0 var(--pink);
  max-width: 620px; margin: 30px auto; padding: 40px 34px; animation: popIn .5s cubic-bezier(.3,1.6,.5,1);
}
.m-card.center, .welcome-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.m-card h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 16px 0 6px; }
.m-card p { font-weight: 700; color: var(--ink-soft); }
.m-card .big { font-size: 1.2rem; }
.m-card .small { font-size: .95rem; }
.m-card .small a { font-weight: 800; color: var(--purple); }
.login-form { display: flex; gap: 10px; width: 100%; margin-top: 10px; flex-wrap: wrap; }
.login-form input {
  flex: 1 1 220px; font: inherit; font-weight: 700; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 14px;
  padding: .7em 1em; background: #fbf9ff;
}
.login-form input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.how { list-style: none; padding: 0; margin: 20px 0 28px; text-align: left; display: grid; gap: 16px; }
.how li { display: flex; gap: 16px; align-items: flex-start; font-weight: 600; }
.how .ico3d { font-size: 2.4rem; flex: none; }
.how b { font-family: var(--head); font-size: 1.15rem; }

.acct { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.acct-email { font-weight: 800; color: var(--ink-soft); font-size: .9rem; }
.acct .btn { box-shadow: 0 3px 0 var(--ink); }

.lib-title { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-top: 10px; }
.lib-sub { text-align: center; font-weight: 800; color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 36px; }
/* the shelf: covers only, as little 3D books (same book as the home page bookshelf) */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 34px 26px; }
.lib-item { position: relative; }
.lib-card { position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lib-card .stage3 { padding: 6px 0 8px; }
.lib-card .book3 { width: 84%; }
.lib-card .book3 .b { transform: rotateY(18deg); }
.lib-card.wide .stage3 { box-sizing: content-box; aspect-ratio: 0.9205; align-items: center; }   /* same height as an upright book… */
.lib-card.wide .book3 { width: 100%; }   /* …and a sideways book lies wider on the shelf */
.lib-card.wide .book3 .b { aspect-ratio: 1423/1099; }
.lib-card .book3 .b img { box-shadow: inset 6px 0 0 rgba(0,0,0,.15), 0 14px 22px rgba(45,31,94,.28); }
.lib-card:hover .book3 .b, .lib-card:focus-visible .book3 .b { transform: rotateY(-6deg) translateZ(26px) translateY(-6px); }
.lib-card:focus-visible { outline: none; }
.lib-card:focus-visible .book3 .b img { outline: 4px solid var(--yellow); outline-offset: 3px; }
.lib-card:active .book3 .b { transform: rotateY(-6deg) translateZ(10px) scale(.97); }
/* under the book: audiobook icon · reading progress · favourite heart */
.lib-row { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 50px 0 6%; }
.lib-audio { flex: none; width: 22px; font-size: 1.15rem; color: var(--ink-soft); }
.lib-progress { flex: 1; display: block; height: 8px; border-radius: 999px; background: rgba(45,31,94,.12); overflow: hidden; }
.lib-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), var(--pink)); }
.lib-progress.empty { visibility: hidden; }
/* small badges sitting on the book */
.lib-seal { position: absolute; z-index: 2; top: -10px; right: -12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5eead4, #0d9488); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transform: rotate(-8deg); }

/* reader */
.reader {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 0%, #4c3a8f, #2d1f5e 70%); color: #fff;
}
.reader[hidden] { display: none; }
.reader-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.reader-bar h2 { flex: 1; font-size: clamp(1.1rem, 2.5vw, 1.6rem); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tabs { display: flex; gap: 8px; }
.r-btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 800; font-size: 1rem;
  background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; padding: .45em .9em; cursor: pointer;
}
.r-btn.active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.r-btn[hidden] { display: none; }
.reader-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; perspective: 1800px; }
.reader-stage[hidden] { display: none; }
.reader { --pr: 0.7732; }   /* page shape (width / height): upright 8.5 x 11 books */
.reader.wide { --pr: 1.2948; } /* sideways (11 x 8.5) books, `wide: true` in BOOKS */
.r-page { position: relative; aspect-ratio: var(--pr); width: min(calc(100vw - 48px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((var(--vh, 100vh) - 196px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--pr))); }   /* 75%: also leaves room for the iPad's clock strip, so the page never touches the top bar (owner, 23 Oct 2026) */
.r-page img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.45); transform-origin: left center;
}
.r-page img.turn-next { animation: turnNext .5s ease; }
.r-page img.turn-prev { animation: turnPrev .5s ease; }
.r-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: var(--purple); pointer-events: none; }
.r-loading[hidden] { display: none; }
.reader video { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 14px; background: #000; }
.reader-foot { display: flex; align-items: center; gap: 14px; padding: 10px 24px 18px; font-weight: 800; }
.reader-foot[hidden] { display: none; }
.progress { flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), var(--pink)); transition: width .4s; }
.the-end {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(45,31,94,.9); padding: 20px; animation: fade .4s;
}
.the-end[hidden] { display: none; }
.the-end h2 { font-size: 3.4rem; color: var(--yellow); margin: 14px 0 0; }
.the-end p { font-size: 1.2rem; font-weight: 700; }

@media (max-width: 760px) {
  .acct-email { display: none; }
  .acct .btn span, .r-btn span { display: none; }
  .m-card { padding: 30px 20px; box-shadow: 6px 8px 0 var(--pink); }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 12px; }
  .fav-btn { width: 38px; height: 38px; font-size: 1.15rem; }
  .r-page { width: min(calc(100vw - 32px), calc((var(--vh, 100vh) - 196px) * var(--pr))); }
  .reader-stage { gap: 6px; padding: 4px 8px; }
}

/* layout rules above must never override hidden */
[data-state][hidden], .acct[hidden], #manageBtn[hidden] { display: none !important; }

/* special books + locked books */
.lib-cover { position: relative; }
.lib-card.special .book3 .b img { box-shadow: inset 6px 0 0 rgba(0,0,0,.15), 0 0 0 4px #ffe066, 0 14px 26px rgba(255,95,162,.45); }
.special-grid { margin-bottom: 60px; }
.lib-ribbon {
  position: absolute; z-index: 2; top: 10px; left: -10px; white-space: nowrap; background: var(--pink); color: #fff; border: 3px solid var(--ink);
  border-radius: 12px; padding: 2px 10px; font-weight: 800; font-size: .85rem; transform: rotate(-5deg);
  box-shadow: 0 3px 0 var(--ink);
}
.lib-card.locked img { filter: grayscale(.45) brightness(.9); }
.lib-lock {
  position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: #fff;
  background: rgba(45,31,94,.28); border-radius: 3px 8px 8px 3px; pointer-events: none;
}
.lib-lock i { background: var(--ink); border-radius: 50%; padding: 12px; border: 3px solid #fff; }
.join-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
  background: #fff; border: 4px solid var(--ink); border-radius: 24px; padding: 18px 22px; margin: 0 auto 34px;
  max-width: 820px; box-shadow: 0 8px 0 var(--pink); font-weight: 700;
}
.join-banner > div { flex: 1 1 260px; }
.join-banner b { font-family: var(--head); font-size: 1.2rem; }
.lock-ico.small { width: 60px; height: 60px; font-size: 1.9rem; flex: none; }

/* demo login */
.demo-form input { flex: 1 1 160px; }
.demo-box { width: 100%; margin-top: 18px; border-top: 3px dashed #d9d1f5; padding-top: 16px; }
.demo-tag { font-weight: 800; color: var(--purple) !important; margin: 0 0 12px; }
.demo-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.demo-acct {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; cursor: pointer;
  background: #fbf9ff; border: 3px solid #d9d1f5; border-radius: 16px; padding: 10px 14px; color: var(--ink);
  transition: transform .2s, border-color .2s;
}
.demo-acct:hover { transform: translateY(-3px); border-color: var(--purple); }
.demo-acct b { font-family: var(--head); font-size: 1.05rem; }
.demo-acct span { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.demo-acct code { font-size: .8rem; background: #efeaff; border-radius: 6px; padding: 1px 6px; margin-top: 2px; }
.m-card:has(.demo-box:not([hidden])) { max-width: 760px; }

/* ============ page-turn animations ============ */
.r-page { perspective: 2200px; }
.flip-leaf {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform-origin: left center; transform-style: preserve-3d; will-change: transform;
}
.leaf-front, .leaf-back { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; }
.leaf-front { background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.leaf-front img { width: 100%; height: 100%; object-fit: contain; }
.leaf-front::after { /* the page curls away from the light as it lifts */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.08) 80%, rgba(0,0,0,.22));
}
.leaf-back { /* the plain back of the paper */
  transform: rotateY(180deg);
  background: linear-gradient(90deg, #efe5cf 0%, #fffaf0 25%, #fbf4e4 70%, #eadfc6 100%);
  box-shadow: inset 18px 0 30px -12px rgba(0,0,0,.18);
}
.flip-leaf.is-cover { z-index: 3; }
.flip-leaf.is-cover .leaf-front { border-radius: 6px 14px 14px 6px; box-shadow: inset 10px 0 0 rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.45); }
.flip-leaf.is-cover .leaf-front img { object-fit: cover; }
.flip-leaf.is-cover .leaf-back { background: linear-gradient(90deg, #d9c9f7, #f3edff 30%, #e6dcfb); }
.page-shade {
  position: absolute; inset: 0; z-index: 1; border-radius: 12px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(20,10,50,.55), rgba(20,10,50,0) 65%);
}

/* ============ page curl ============ */
.curl-canvas { position: absolute; z-index: 2; pointer-events: none; }
.r-page { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.r-page:active { cursor: grabbing; }
.r-page img { -webkit-user-drag: none; }
#soundBtn { padding: .45em .6em; }

/* ============ My Hive ============ */
.hive { background: #fff; border: 4px solid var(--ink); border-radius: 32px; padding: 28px 26px 30px; margin: 10px 0 56px; box-shadow: 0 10px 0 var(--yellow); position: relative; }
.hive::before { content: ""; position: absolute; inset: 0; border-radius: 28px; opacity: .45; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32V66' fill='none' stroke='%23f5d77a' stroke-width='2'/%3E%3C/svg%3E"); }
.hive > * { position: relative; }
.hive-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 5px solid #fff; box-shadow: 0 0 0 4px var(--ink), 0 6px 0 4px var(--pink); background: #fff4a8; }
.avatar-bee { display: grid; place-items: center; }
.hive-hi h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0; display: flex; align-items: center; gap: 8px; }
.hive-hi p { margin: 0; font-weight: 800; color: var(--ink-soft); }
.hive-hi .lvl-name { color: #e11d74; }
.hive-hi p i { color: #ff8a3d; }
.edit-name { border: 2px solid #d9d1f5; background: #fbf9ff; color: var(--ink-soft); border-radius: 10px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; font-size: 1rem; }
.edit-name:hover { border-color: var(--purple); color: var(--purple); }
.hive-buzz { display: flex; align-items: center; gap: 6px; }
.change-buddy { font: 800 .85rem "Baloo 2", sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 2px 12px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.change-buddy:hover { background: #fff4a8; }
.avatar-bee svg { width: 78px; height: 78px; }
.hive-buzz > svg { flex: none; }
.hive .bubble { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 8px 14px; font-family: var(--head); font-weight: 800; font-size: 1rem; box-shadow: 0 4px 0 var(--ink); max-width: 230px; }
.hive .bubble::after { content: ""; position: absolute; left: -11px; top: 50%; margin-top: -8px; width: 15px; height: 15px; background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 22px 0 24px; }
.stat { width: 150px; aspect-ratio: 1/1.1; position: relative; display: grid; place-items: center; text-align: center; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.stat:nth-child(even) { margin-top: 40px; }
.stat:hover { transform: scale(1.06) rotate(-2deg); }
.stat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stat .in { position: relative; }
.stat i { font-size: 1.7rem; color: var(--ink); }
.stat b { display: block; font-family: var(--head); font-size: 2.1rem; line-height: 1; }
.stat span { font-weight: 800; color: #6b4a00; font-size: .82rem; }
.level { display: flex; align-items: center; gap: 16px; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 14px 20px; max-width: 620px; margin: 0 auto 24px; box-shadow: 0 5px 0 var(--yellow); }
.level > svg { width: 58px; height: 58px; flex: none; }
.level-text { flex: 1; }
.level-text b { font-family: var(--head); font-size: 1.2rem; }
.level-text small { font-weight: 800; color: var(--ink-soft); }
.bar2 { height: 14px; border-radius: 999px; background: #f2ecd9; border: 2px solid var(--ink); overflow: hidden; margin: 6px 0 4px; }
.bar2 span { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #f59e0b); border-radius: 999px; transition: width .8s cubic-bezier(.3,1.3,.5,1); }
.word-jar { text-align: center; }
.word-jar h3 { font-size: 1.35rem; margin-bottom: 12px; }
.word-jar h3 i { color: #f59e0b; }
.word-jar h3 small { font-family: var(--body); font-size: .9rem; color: var(--ink-soft); }
.wchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wchip { position: relative; font: inherit; font-family: var(--head); font-weight: 800; font-size: 1.05rem; color: var(--ink); background: #fff4a8; border: 3px solid var(--ink); padding: 2px 14px; margin: 4px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(var(--r)); cursor: pointer; transition: transform .2s; }
.wchip:hover { transform: rotate(0) scale(1.08); }
.wchip .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 230px; background: var(--ink); color: #fff; font-family: var(--body); font-size: .85rem; font-weight: 700; line-height: 1.35; border-radius: 12px; padding: 8px 10px; opacity: 0; pointer-events: none; transition: .2s; z-index: 5; }
.wchip .tip i { opacity: .75; }
.wchip:hover .tip, .wchip.show .tip, .wchip:focus-visible .tip { opacity: 1; }
.empty-jar { font-weight: 800; color: var(--ink-soft); }

/* Buzz Board on one screen, no page scroll (the owner's option A): a tall "Me" card on the left
   (big buddy, name, level, honey jar) and a honeycomb of six stats + the Word Jar on the right.
   Hive.fit() stretches the board to the bottom of the screen. Phones stack it. */
body[data-tab="buzz"] .member-main { margin-top: 6px; margin-bottom: 12px; }
body[data-tab="buzz"] .tab-panel[data-panel="buzz"] { padding-top: 8px; }
.hive { --hw: 150px; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 18px 22px 20px; margin: 0 0 12px; min-height: 0; }
.hive-me { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--yellow); padding: 16px 16px 14px; min-width: 0; }
.hive-me .bubble { max-width: 100%; margin: auto 0 6px; }
.hive-me .hive-hi { margin-bottom: auto; }
.hive .bubble::after { left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -8px; border-left: 0; border-right: 3px solid var(--ink); }
.hive-me .me-buddy svg, .hive-me .me-buddy img.buddy { width: 90px; width: clamp(70px, calc(var(--vh, 100vh) * .22 - 64px), 160px); height: auto; display: block; }
.hive-hi h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); justify-content: center; }
.hive-hi h2 .avatar { width: 46px; height: 46px; border-width: 3px; box-shadow: 0 0 0 3px var(--ink); }
.hive-me .level { margin: 0; width: 100%; max-width: none; padding: 10px 12px; gap: 12px; text-align: left; background: #fffbea; border: 2px solid #f5d77a; box-shadow: none; border-radius: 18px; }
.level > svg { width: 52px; height: 52px; }
.level-text b { font-size: 1.05rem; line-height: 1.2; }
.hive-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 0; }
/* honeycomb: 3 on top, 3 below shifted half a hexagon */
.stats { display: grid; grid-template-columns: repeat(3, var(--hw)); gap: 0 14px; margin: 0; justify-content: center; transform: translateX(calc((var(--hw) + 14px) / -4)); }
.stat { width: var(--hw); height: calc(var(--hw) * 1.1); aspect-ratio: auto; }
.stat:nth-child(even) { margin-top: 0; }
.stat:nth-child(n+4) { margin-top: calc(var(--hw) * -.2); transform: translateX(calc(50% + 7px)); }
.stat:nth-child(n+4):hover { transform: translateX(calc(50% + 7px)) scale(1.06) rotate(-2deg); }
.stat .in { max-width: 76%; }
.stat i { font-size: calc(var(--hw) * .17); }
.stat b { font-size: calc(var(--hw) * .23); }
.stat span { font-size: .68rem; font-size: max(.62rem, calc(var(--hw) * .068)); line-height: 1.1; display: block; }
.word-jar { flex: 1; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 12px 14px; box-shadow: 0 5px 0 var(--yellow); min-width: 0; min-height: 110px; }
.word-jar h3 { font-size: 1.2rem; margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.word-jar h3 small { font-size: .85rem; }
.wchips { flex: 1; min-height: 0; overflow: hidden; align-content: flex-start; padding-top: 2px; }
.wchip { font-size: 1rem; padding: 1px 12px; margin: 4px; }
.wchip[hidden] { display: none; }
.wchip.more { background: var(--yellow); }
.wchip.ghost { background: #fff; border-style: dashed; color: #b8afd6; box-shadow: none; cursor: default; }
.jar-close { display: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font-size: 1rem; place-items: center; }
/* "+N more" opens the whole jar on top of the board */
.word-jar.open { position: absolute; z-index: 6; inset: 12px; }
.word-jar.open .jar-close { display: grid; }
.word-jar.open .wchips { overflow-y: auto; padding-bottom: 70px; }
/* the word card that opens when a word is tapped */
.word-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.word-pop[hidden] { display: none; }
.wp-card { position: relative; width: min(420px, 100%); background: #fff; border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--yellow); padding: 26px 22px 20px; text-align: center; animation: wpIn .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes wpIn { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.wp-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.wp-close:hover { background: #fff4a8; }
.wp-kind { display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--purple); background: #f4efff; border-radius: 999px; padding: 2px 10px; }
.wp-word { font: 800 2.6rem/1.1 var(--head); color: var(--pink); margin: 6px 0 4px; }
.wp-sayrow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wp-say-text { font-weight: 800; color: var(--ink-soft); font-size: 1.05rem; letter-spacing: .5px; }
.wp-say { display: inline-flex; align-items: center; gap: 6px; font: 800 .95rem var(--head); border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); padding: 3px 14px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.wp-meaning { font-size: 1.15rem; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.wp-line { display: block; background: #fffbea; border: 2px dashed #f5d77a; border-radius: 16px; padding: 10px 12px; font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.wp-line mark { background: #fff4a8; color: var(--ink); font-style: normal; font-weight: 800; border-radius: 4px; padding: 0 3px; }
.wp-from { margin: 10px 0 0; font-weight: 800; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .hive { --hw: 124px; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }
/* tablets in portrait and phones: the "Me" card becomes a strip on top, then the honeycomb, then the Word Jar */
@media (max-width: 900px) {
  .hive { --hw: 150px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
  .hive-me { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "pic hi lvl"; align-items: center; text-align: left; gap: 4px 14px; padding: 10px 14px; }
  .hive-me .bubble { display: none; }
  .hive-me .me-buddy { grid-area: pic; }
  .hive-me .me-buddy svg, .hive-me .me-buddy img.buddy { width: 84px; }
  .hive-me .hive-hi { grid-area: hi; margin: 0; }
  .hive-me .change-buddy { grid-area: btn; justify-self: start; }
  .hive-me .level { grid-area: lvl; margin: 0; }
  .hive-hi h2 { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .hive { --hw: 86px; grid-template-rows: none; gap: 8px; padding: 8px 12px 10px; }
  .hive-me { grid-template-columns: auto 1fr; grid-template-areas: "pic hi" "lvl lvl"; gap: 2px 10px; padding: 8px 10px; border-radius: 18px; }
  .hive-me .me-buddy svg, .hive-me .me-buddy img.buddy { width: 58px; }
  .hive-me .change-buddy { font-size: .78rem; padding: 1px 9px; }
  .hive-me .level { margin-top: 2px; padding: 5px 10px; }
  .hive-hi h2 { font-size: 1.35rem; }
  .hive-hi h2 .avatar { width: 34px; height: 34px; }
  .hive-hi p { font-size: .8rem; line-height: 1.25; }
  .level > svg { width: 34px; height: 34px; }
  .level-text b { font-size: .95rem; }
  .level-text small { font-size: .78rem; }
  .bar2 { height: 11px; margin: 4px 0 2px; }
  .hive-right { gap: 8px; }
  .stat:nth-child(n+4) { margin-top: calc(var(--hw) * -.24); }
  .stats { gap: 0 8px; transform: translateX(calc((var(--hw) + 8px) / -4)); }
  .stat:nth-child(n+4), .stat:nth-child(n+4):hover { transform: translateX(calc(50% + 4px)); }
  .stat span { font-size: .56rem; }
  .word-jar { padding: 6px 10px 8px; border-radius: 18px; min-height: 0; flex: none; }
  .word-jar h3 { font-size: 1rem; margin-bottom: 2px; }
  .wchips { flex: none; max-height: 72px; }
  .wchip { font-size: .88rem; margin: 2px; }
}

/* favourites + finished badges on library cards */
.lib-item { position: relative; }
.fav-btn {
  position: absolute; z-index: 3; bottom: 0; right: 4%; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 3px solid var(--ink); color: #d9d1f5; font-size: 1.3rem; cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .2s, color .2s;
}
.fav-btn:hover { transform: scale(1.1); color: #ff9ec4; }
.fav-btn.on { color: #e11d74; background: #ffe4ef; }
#favWrap { margin-bottom: 56px; }

/* ============ The End + Spotlight Words ============ */
.the-end { overflow-y: auto; padding: 24px 16px; justify-content: flex-start; }
.end-box { position: relative; width: min(760px, 100%); margin: auto; text-align: center; }
.end-box h2 { font-size: 3.2rem; color: var(--yellow); margin: 0; }
.end-msg { font-size: 1.2rem; font-weight: 700; color: #d9d3ff; margin: 4px 0 18px; }
.end-stars { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 18px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 16px; font: 800 1.15rem var(--head); box-shadow: 0 4px 0 var(--ink); animation: starPop .6s cubic-bezier(.3,1.6,.5,1) both .3s; }
.end-stars[hidden] { display: none; }
@keyframes starPop { from { transform: scale(0) rotate(-12deg); } to { transform: none; } }
.end-bee { position: absolute; right: 0; top: -6px; }
.spot { margin-bottom: 20px; }
.spot-intro { font-weight: 800; color: #fff; margin: 0 0 14px; }
.spot-intro i { color: var(--yellow); }
.flips { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; perspective: 1000px; margin-bottom: 16px; }
.flip { width: 200px; height: 180px; position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); cursor: pointer; border: 0; padding: 0; background: none; font: inherit; }
.flip.open { transform: rotateY(180deg); }
.flip > div { position: absolute; inset: 0; backface-visibility: hidden; border: 4px solid var(--ink); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; color: var(--ink); }
.flip .front { background: #fff; box-shadow: 0 6px 0 var(--pink); }
.flip .front b { font-family: var(--head); font-size: 1.8rem; color: var(--pink); line-height: 1.1; }
.flip .front small { font-weight: 800; color: var(--ink-soft); margin-top: 2px; }
.flip .front em { font-style: normal; font-weight: 800; font-size: .78rem; color: var(--purple); margin-top: 8px; }
.flip .back { background: #fff4a8; transform: rotateY(180deg); font-weight: 700; font-size: .9rem; line-height: 1.35; box-shadow: 0 6px 0 var(--yellow); }
.flip .back .kind { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--purple); margin-bottom: 4px; }
.flip .back q { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .8rem; font-style: italic; }
.flip .back mark { background: #fff; color: var(--ink); font-weight: 800; font-style: normal; border-radius: 4px; padding: 0 3px; }
.quiz2 { background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; padding: 14px; max-width: 620px; margin: 0 auto; }
.quiz2:empty { display: none; }
.quiz2 p { font-weight: 800; margin: 0 0 10px; }
.quiz2 .opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.quiz2 button { font: inherit; font-weight: 800; border: 3px solid var(--ink); background: #fff; border-radius: 14px; padding: 6px 14px; cursor: pointer; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.quiz2 button.right { background: var(--teal); color: #fff; }
.quiz2 button.wrong { background: #ffd6e7; animation: shake .4s; }
.quiz2 .result { min-height: 1.4em; font-weight: 800; margin-top: 8px; }
#addJar { margin-top: 16px; }
#addJar:disabled { background: var(--teal); color: #fff; cursor: default; transform: none; }
.jar-count { margin-top: 10px; font-weight: 800; color: #d9d3ff; }
@media (max-width: 700px) {
  .end-bee { display: none; }
  .flip { width: 100%; max-width: 280px; height: 160px; }
}
.end-box .modal-ctas { justify-content: center; }

/* ============ Library tabs (pill buttons) ============ */
.lib-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 6px 0 34px; position: sticky; top: 72px; z-index: 20; padding: 10px 0; }
.lib-tab {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 800; font-size: 1.05rem;
  padding: 10px 22px; border-radius: 999px; cursor: pointer; background: #fff; color: var(--c);
  border: 2.5px solid var(--c); box-shadow: 0 4px 0 rgba(45,31,94,.12);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s, box-shadow .2s;
}
.lib-tab i { font-size: 1.25rem; }
.lib-tab:hover { transform: translateY(-2px); }
.lib-tab.active { background: var(--c); color: #fff; box-shadow: 0 6px 16px rgba(45,31,94,.25), 0 4px 0 rgba(0,0,0,.18); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 45%, transparent), 0 4px 0 rgba(0,0,0,.18); }
.lib-tab[data-tab="library"].active i { color: #5eead4; }
.lib-tab[hidden] { display: none; }
.tab-count { background: #fff; color: #e11d74; border-radius: 999px; font-size: .78rem; min-width: 22px; padding: 0 6px; line-height: 20px; border: 2px solid currentColor; }
.tab-count:empty { display: none; }
.lib-tab:not(.active) .tab-count { background: #ffe4ef; }
.tab-panel .hive { margin-top: 0; }
.fav-empty { text-align: center; padding: 20px 0 40px; }
.fav-empty p { font-weight: 800; color: var(--ink-soft); font-size: 1.15rem; }
.fav-empty i { color: #e11d74; }
@media (max-width: 700px) {
  .lib-tabs { top: 64px; gap: 6px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 2px; }
  .lib-tab { font-size: .92rem; padding: 8px 14px; white-space: nowrap; }
}

/* ============ "Welcome, name!" after signing in ============ */
.welcome {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: radial-gradient(circle at 50% 35%, #a78bfa 0%, #7c3aed 45%, #2d1f5e 100%); color: #fff; overflow: hidden;
  animation: wIn .45s ease both;
}
.welcome.leave { animation: wOut .75s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes wIn { from { opacity: 0; } }
@keyframes wOut { to { clip-path: circle(0% at 50% 45%); opacity: .6; } }
.welcome { clip-path: circle(150% at 50% 45%); }
.w-stars i { position: absolute; color: #ffe066; animation: twinkle 2.2s ease-in-out infinite; }
.w-bee { position: relative; animation: wBeeFly 1.4s cubic-bezier(.3,1.1,.5,1) both; }
.w-bee .bee { display: block; animation: beeHover 3s ease-in-out 1.4s infinite; }
@keyframes wBeeFly {
  0% { transform: translate(-70vw, 30vh) rotate(-30deg) scale(.5); opacity: 0; }
  60% { transform: translate(8vw, -6vh) rotate(12deg) scale(1.05); opacity: 1; }
  100% { transform: none; }
}
.w-title { font-size: clamp(2.6rem, 8vw, 5rem); margin: 10px 0 6px; color: #fff;  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.42px 1.42px 0 var(--ink), -1.42px 1.42px 0 var(--ink), 1.42px -1.42px 0 var(--ink), -1.42px -1.42px 0 var(--ink), 0 6px 0 var(--ink); }
.w-hello { display: inline-block; animation: wUp .6s cubic-bezier(.3,1.5,.5,1) .45s both; }
.w-name { color: var(--yellow); white-space: nowrap; }
.w-name span { display: inline-block; animation: wLetter .6s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes wUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes wLetter { 0% { opacity: 0; transform: translateY(-70px) scale(.4) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
.w-sub { font-weight: 800; font-size: 1.25rem; margin: 0; opacity: 0; animation: wUp .6s ease 1.5s forwards; }
.w-skip { position: absolute; right: 20px; bottom: 20px; background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4); border-radius: 999px; padding: 6px 16px; font: inherit; font-weight: 800; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .w-bee, .w-hello, .w-name span, .w-sub, .welcome.leave { animation: none !important; opacity: 1; }
}

/* ============ After payment: Hurray! → add your reader ============ */
.hurray-page { min-height: 100vh; margin: 0; color: #fff; overflow-x: hidden; overflow-x: clip;
  background: radial-gradient(circle at 50% 30%, #a78bfa 0%, #7c3aed 42%, #2d1f5e 100%) fixed; }
.h-stars { position: fixed; inset: 0; pointer-events: none; }
.h-stars i { position: absolute; color: #ffe066; animation: twinkle 2.2s ease-in-out infinite; }
.h-stage { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; box-sizing: border-box; }
.h-stage[hidden] { display: none; }
.h-small { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 18px 0 4px; }
.h-sub { font-weight: 800; opacity: .9; margin: 0; }
.h-spin .bee { animation: beeHover 1.4s ease-in-out infinite; }

.h-bee { animation: wBeeFly 1.4s cubic-bezier(.3,1.1,.5,1) both; }
.h-bee .bee { display: block; animation: beeHover 3s ease-in-out 1.4s infinite; }
.h-title { margin: 6px 0 22px; line-height: 1.02; color: #fff; }
.h-word { display: inline-block; font-size: clamp(3.6rem, 12vw, 7rem); color: var(--yellow);  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2.13px 2.13px 0 var(--ink), -2.13px 2.13px 0 var(--ink), 2.13px -2.13px 0 var(--ink), -2.13px -2.13px 0 var(--ink), 0 8px 0 var(--ink); }
.h-word span { display: inline-block; animation: wLetter .7s cubic-bezier(.3,1.8,.5,1) both, hWiggle 2.4s ease-in-out 2s infinite; }
.h-word span:nth-child(odd) { animation-delay: inherit; }
.h-welcome { display: inline-block; font-size: clamp(1.6rem, 4.6vw, 2.8rem);  text-shadow: 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 1.5px 0 var(--ink), 0 -1.5px 0 var(--ink), 1.06px 1.06px 0 var(--ink), -1.06px 1.06px 0 var(--ink), 1.06px -1.06px 0 var(--ink), -1.06px -1.06px 0 var(--ink), 0 4px 0 var(--ink); animation: wUp .6s cubic-bezier(.3,1.5,.5,1) 1.2s both; }
@keyframes hWiggle { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) rotate(-3deg); } }
.h-lines { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; width: min(520px, 100%); text-align: left; }
.h-lines li { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 10px 16px; box-shadow: 0 5px 0 var(--ink); opacity: 0; animation: hLine .6s cubic-bezier(.3,1.5,.5,1) forwards; }
.h-lines li .ico3d { font-size: 1.6rem; flex: none; }
.h-lines li:nth-child(1) { animation-delay: 1.7s; }
.h-lines li:nth-child(2) { animation-delay: 2.05s; }
.h-lines li:nth-child(3) { animation-delay: 2.4s; }
.h-lines li:nth-child(4) { animation-delay: 2.75s; }
@keyframes hLine { from { opacity: 0; transform: translateX(-40px) scale(.9); } to { opacity: 1; transform: none; } }
.h-receipt { font-weight: 700; opacity: 0; margin: 0 0 18px; animation: wUp .5s ease 3.2s forwards; }
.h-receipt b { color: var(--yellow); }
.h-next { width: auto; align-self: center; opacity: 0; animation: wUp .5s cubic-bezier(.3,1.5,.5,1) 3.3s forwards; }

.profile-card { position: relative; width: min(480px, 100%); box-sizing: border-box; background: #fff; color: var(--ink); text-align: center;
  border: 4px solid var(--ink); border-radius: 32px; padding: 64px 28px 26px; box-shadow: 0 10px 0 var(--ink); }
.pc-bee { position: absolute; top: -58px; left: 50%; transform: translateX(-50%); }
.profile-card h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 0 0 4px; }
.pc-sub { margin: 0 0 18px; font-weight: 700; color: var(--ink-soft); }
.pc-label { display: block; text-align: left; font-weight: 800; margin: 14px 0 8px; }
.profile-card input { display: block; width: 100%; box-sizing: border-box; font: inherit; font-family: var(--head); font-size: 1.5rem; font-weight: 800; color: var(--ink); text-align: center;
  border: 3px solid #d9d1f5; border-radius: 18px; padding: .45em .8em; background: #fbf9ff; }
.profile-card input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.age-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.age { font: inherit; font-family: var(--head); font-size: 1.5rem; font-weight: 800; color: var(--ink); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: background .2s, color .2s, transform .15s; }
.age:hover { transform: translateY(-3px); background: #f6f0ff; background: color-mix(in srgb, var(--c) 18%, #fff); }
.age.on { background: var(--c); color: #fff;  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 0.71px 0.71px 0 var(--ink), -0.71px 0.71px 0 var(--ink), 0.71px -0.71px 0 var(--ink), -0.71px -0.71px 0 var(--ink); }
.lets-go { width: 100%; justify-content: center; margin-top: 22px; }
.lets-go:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.hurray-page .m-card { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .h-bee, .h-word span, .h-welcome, .h-lines li, .h-receipt, .h-next { animation: none !important; opacity: 1; }
}

/* ============ PHONES, TABLETS & THE INSTALLED APP ============ */
@supports (height: 100dvh) {
  .member-page, .hurray-page, .h-stage { min-height: 100dvh; }
}
.lib-tabs { top: calc(72px + env(safe-area-inset-top)); }
.h-stage { padding: calc(40px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.welcome { padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
.w-skip { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* reader: full screen, clear of the notch and home bar, finger-sized buttons */
.reader { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior: contain; }
.r-btn { min-height: 44px; min-width: 44px; justify-content: center; }
#listenStage { overflow: auto; }

/* phone, upright: the page gets the whole width (there are no arrow buttons: tap or swipe the page) */
@media (max-width: 600px) and (orientation: portrait) {
  #readStage .r-page { width: min(calc(100vw - 24px), calc((var(--vh, 100vh) - 196px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--pr))); }
}
/* phone on its side (short screen): slimmer bars so the page can be as tall as possible */
@media (max-height: 520px) and (orientation: landscape) {
  .reader-bar { padding: 6px 14px; gap: 10px; }
  .reader-bar h2 { font-size: 1.05rem; }
  .reader-foot { padding: 2px 20px 8px; }
  .r-page { width: min(calc(100vw - 48px), calc((var(--vh, 100vh) - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--pr))); }
  .reader video { max-height: calc(var(--vh, 100vh) - 90px); }
  .lib-tabs { top: calc(64px + env(safe-area-inset-top)); }
}


/* ============ Fixed header band: menu + tabs + the current section title stay put; only the content scrolls ============ */
:root { --band: #fff8ec; }
.member-page .nav { background: var(--band); box-shadow: none; }
.lib-tabs { top: var(--nav-h, 72px); margin-bottom: 0; background: var(--band); }
.lib-tabs::before, .pin-title::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--band); z-index: -1; }
.pin-title { position: sticky; top: calc(var(--nav-h, 72px) + var(--tabs-h, 64px)); z-index: 15; margin: 0 0 22px; padding: 12px 0 14px;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); background: var(--band); }
.pin-title::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: rgba(45,31,94,.08); box-shadow: 0 6px 14px rgba(45,31,94,.10); opacity: var(--stuck, 0); transition: opacity .2s; }
.pin-title.stuck { --stuck: 1; }
.pin-title .ico3d { font-size: .9em; }
.tab-panel { padding-top: 18px; }
@media (max-width: 700px) {
  .pin-title { font-size: 1.45rem; padding: 8px 0 10px; margin-bottom: 14px; }
  .pin-title .ico3d { display: none; }
}

/* ============ Bedtime Audiobooks ============ */
.aud-actions { display: flex; justify-content: center; margin: -10px 0 26px; }
.aud-grid { gap: 34px 26px; }
.aud-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.aud-art { position: relative; width: 78%; aspect-ratio: 900/1164; margin: 6px 14% 8px 0; }
.aud-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 6px 10px 10px 6px; box-shadow: 0 14px 22px rgba(45,31,94,.28); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
/* a little vinyl record peeking out from behind the cover */
.aud-disc { position: absolute; z-index: 0; top: 8%; right: -22%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 17%, #1d1733 18% 21%, #2d2552 22%, #1d1733 40%, #2d2552 41%, #1d1733 60%, #2d2552 61%, #14102a 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.3); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.aud-card:hover .aud-disc, .aud-card:focus-visible .aud-disc { transform: translateX(18%) rotate(140deg); }
.aud-card:hover img { transform: translateY(-4px) rotate(-2deg); }
.aud-card b { font-family: var(--head); font-size: 1rem; line-height: 1.2; color: var(--ink); }
.aud-art .lib-seal { z-index: 2; }

/* ============ Up next (audiobook autoplay) ============ */
.up-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; margin: 0 0 18px; padding: 12px 14px;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 #6366f1; animation: unIn .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes unIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.un-cover { position: relative; width: 64px; height: 64px; }
.un-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(45,31,94,.25); }
.un-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); }
.un-ring circle { fill: none; stroke-width: 3.5; stroke: rgba(99,102,241,.2); }
.un-ring .un-prog { stroke: #6366f1; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; }
.un-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-size: 1.6rem; color: #fff; border-radius: 50%; background: rgba(45,31,94,.35); text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.un-text { min-width: 0; }
.un-text small { display: block; font-weight: 800; color: #6366f1; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.un-text b { display: block; font-family: var(--head); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-text span { font-weight: 700; color: var(--ink-soft); font-size: .9rem; }
.un-btns { display: flex; gap: 8px; }
@media (max-width: 560px) {
  .up-next { grid-template-columns: auto minmax(0, 1fr); }
  .un-btns { grid-column: 1 / -1; justify-content: stretch; }
  .un-btns .btn { flex: 1; justify-content: center; }
}
/* while "Up next" is showing, Buzz steps aside so he doesn't cover the buttons */
.end-box:has(.up-next:not([hidden])) .end-bee { display: none; }

.acct-trial { font-weight: 800; font-size: .8rem; color: var(--ink); background: #fff4a8; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
@media (max-width: 760px) { .acct-trial { display: none; } }

/* a small pop-up message (for example: "this story unlocks after your trial") */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 400; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; max-width: min(92vw, 520px);
  background: var(--ink); color: #fff; font-weight: 800; border-radius: 999px; padding: 10px 20px; box-shadow: 0 8px 24px rgba(45,31,94,.35); transition: transform .3s cubic-bezier(.3,1.4,.5,1), opacity .3s; text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast i { color: var(--yellow); margin-right: 4px; }

.aud-card.locked img { filter: grayscale(.45) brightness(.9); }
.aud-card.locked .aud-disc { opacity: .5; }
.aud-art .lib-lock { z-index: 2; }

/* ---------- Manage Account ---------- */
.account-card { width: min(520px, 100%); max-height: calc(var(--vh, 100vh) - 32px); overflow: auto; padding: 26px 26px 20px; }
.account-card h2 { margin: 0 0 6px; font-size: 1.6rem; }
.account-card h2 i { color: var(--purple); }
.acc-sec { border-top: 2px solid #ece6f5; padding: 14px 0 12px; }
.acc-sec h3 { margin: 0 0 8px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.acc-sec h3 i { color: var(--pink); }
.acc-status { margin: 0; font-family: var(--head); font-weight: 800; font-size: 1.25rem; }
.acc-note { margin: 2px 0 8px; font-weight: 600; color: var(--ink-soft); font-size: .92rem; }
.acc-note:empty { display: none; }
.acc-buddy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-buddy > div { display: flex; flex-direction: column; flex: 1; min-width: 130px; }
.acc-buddy b { font-family: var(--head); font-size: 1.1rem; }
.acc-buddy small { color: var(--ink-soft); font-weight: 600; }
.acc-buddy svg, .acc-buddy img.buddy { width: 64px; height: 64px; display: block; }
.acc-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.acc-row label, .acc-row .lbl { width: 56px; font-weight: 800; color: var(--ink-soft); }
.acc-row input { flex: 1; min-width: 120px; font: inherit; font-weight: 700; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 12px; padding: .35em .7em; background: #fbf9ff; }
.acc-row input:focus { outline: none; border-color: var(--purple); }
.acc-row b { overflow-wrap: anywhere; }

/* ---------- "Hey Mia!" greeting in the top bar ---------- */
.hey { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 18px; padding: 3px 16px 3px 6px; background: #fff4a8; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--head); font-weight: 800; font-size: 1.15rem; color: var(--ink); white-space: nowrap; min-width: 0; animation: heyIn .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.hey[hidden] { display: none; }
.hey b { color: #e11d74; }
.hey-text { overflow: hidden; text-overflow: ellipsis; }
.hey-buddy { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.hey-buddy svg { width: 40px; height: 40px; display: block; animation: none; }
@keyframes heyIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
@media (max-width: 560px) {
  .member-page .nav .logo-text { display: none; }        /* on phones the greeting takes the place of the wordmark */
  .hey { margin-left: 8px; font-size: 1rem; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hey { animation: none; } }

/* phones: keep the top bar on one line (owner, 15 Oct 2026: on bigger phones Log out dropped under the star) */
@media (max-width: 560px) {
  .member-page .nav:has(#hey:not([hidden])) .logo { display: none; }   /* a signed-in child on a phone: no logo, the greeting gets the room (owner, 15 Oct 2026) */
  .member-page .nav:has(#hey:not([hidden])) .hey { margin-left: 0; }
  .acct { flex-wrap: nowrap; gap: 6px; flex: none; }
  .hey { min-width: 0; flex: 0 1 auto; }
}
/* very small phones (for example the first iPhone SE) */
@media (max-width: 400px) {
  .member-page .nav { gap: 6px; }
  .acct { flex-wrap: nowrap; gap: 6px; }
  .acct .btn { padding: .4em .65em; }
  .hey { font-size: .9rem; padding: 2px 10px 2px 4px; gap: 5px; margin-left: 6px; }
  .hey-buddy { width: 28px; height: 28px; }
  .hey-buddy svg { width: 30px; height: 30px; }
}

/* ---------- Daily reading time ---------- */
.hey-text small { display: block; font: 800 .68rem/1.1 "Nunito", sans-serif; color: var(--ink-soft); letter-spacing: .01em; margin-top: -2px; }
.hey.low { background: #ffe3ef; animation: heyLow 1.4s ease-in-out infinite; }
.hey.low small { color: #e11d74; }
@keyframes heyLow { 50% { transform: scale(1.04); } }
.acc-times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.acc-times button { font: 800 1rem/1.1 var(--head); border: 3px solid #d9d1f5; background: #fbf9ff; color: var(--ink); border-radius: 14px; padding: 8px 0; cursor: pointer; }
.acc-times small { display: block; font: 700 .7rem "Nunito", sans-serif; color: var(--ink-soft); }
.acc-times button.on { background: var(--yellow); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.acc-gate { margin-top: 10px; background: #f3ecff; border-radius: 14px; padding: 10px 12px; font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-gate[hidden] { display: none; }
.acc-gate input { width: 70px; font: inherit; font-weight: 800; border: 3px solid #d9d1f5; border-radius: 10px; padding: 3px 8px; }
#accTimerMsg { margin-top: 8px; color: #0d9488; font-weight: 800; }
/* Time's up (owner, 24 Oct 2026, B2a of mockups/goodbye-portal.html): a rainbow arch with two lilac doors. The story, about 5.5s:
   the doors open (0.6s), today's stars fly in (1.6s), the buddy waves then jumps through (3.2s), the doors close (4.6s) and the
   buddy's goodbye changes to "I'll miss you!" (5.2s). In the iPad app the clock strip and the home bar take the same colours. */
.timeup { position: fixed; inset: 0; z-index: 6000; text-align: center; color: #3b0764; overflow: hidden; perspective: 900px;
  background: #fde68a; background: linear-gradient(#fde68a 0%, #fbcfe8 45%, #c4b5fd 100%); }
.timeup[hidden] { display: none; }
.timeup * { animation-fill-mode: both; }
.gb { --w: min(250px, 40vw, 27svh); }
.gb-stage { position: absolute; left: 50%; top: 42%; width: var(--w); height: calc(var(--w) * 1.35); transform: translate(-50%, -50%); }
.gb-arch { position: absolute; inset: 0; border-radius: calc(var(--w) / 2) calc(var(--w) / 2) 18px 18px; background: #5b21b6; overflow: visible;
  box-shadow: 0 0 0 calc(var(--w) * .06) #f472b6, 0 0 0 calc(var(--w) * .12) #facc15, 0 0 0 calc(var(--w) * .18) #22c55e, 0 0 0 calc(var(--w) * .24) #38bdf8, 0 20px 40px rgba(0,0,0,.25);
  animation: gbArch .8s cubic-bezier(.3,1.4,.5,1); }
@keyframes gbArch { from { transform: scale(.4); opacity: 0; } }
.gb-light { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: radial-gradient(circle at 50% 55%, #fff, #fde68a 35%, #a855f7 70%, #5b21b6); }
.gb-light::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(#fff, #fde047, #f472b6, #fff); opacity: .45; animation: gbSpin 3s linear infinite; }
@keyframes gbSpin { to { transform: rotate(360deg); } }
.gb-door { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(160deg, #c4b5fd, #8b5cf6); box-shadow: inset 0 0 0 5px #fde68a, inset 0 0 0 9px #a78bfa; }
.gb-door.l { left: 0; border-radius: calc(var(--w) / 2) 0 0 18px; transform-origin: 0 50%; animation: gbOpenL 1.1s .6s ease-in-out forwards, gbShutL .8s 4.6s ease-in forwards; }
.gb-door.r { right: 0; border-radius: 0 calc(var(--w) / 2) 18px 0; transform-origin: 100% 50%; animation: gbOpenR 1.1s .6s ease-in-out forwards, gbShutR .8s 4.6s ease-in forwards; }
.gb-door::before { content: "★"; position: absolute; top: 32%; color: #fde047; font-size: calc(var(--w) * .13); text-shadow: 0 2px 0 #b45309; }
.gb-door.l::before { right: 16%; } .gb-door.r::before { left: 16%; }
.gb-door::after { content: ""; position: absolute; top: 55%; width: calc(var(--w) * .06); aspect-ratio: 1; border-radius: 50%; background: #fde047; box-shadow: 0 2px 0 #b45309; }
.gb-door.l::after { right: 5%; } .gb-door.r::after { left: 5%; }
@keyframes gbOpenL { to { transform: rotateY(-72deg); } } @keyframes gbShutL { from { transform: rotateY(-72deg); } to { transform: rotateY(0); } }
@keyframes gbOpenR { to { transform: rotateY(72deg); } } @keyframes gbShutR { from { transform: rotateY(72deg); } to { transform: rotateY(0); } }
.gb-bud { position: absolute; left: 50%; top: 58%; width: calc(var(--w) * .6); transform: translate(-50%, -50%); display: block;
  animation: gbWave .5s 3 alternate ease-in-out, gbJump 1.4s 3.2s cubic-bezier(.5,-.4,.7,1) forwards; }
.gb-bud img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
@keyframes gbWave { from { transform: translate(-50%, -50%) rotate(-8deg); } to { transform: translate(-50%, -50%) rotate(8deg); } }
@keyframes gbJump { 25% { transform: translate(-50%, -30%) scale(1.05); } 55% { transform: translate(-50%, -110%) scale(.8) rotate(-30deg); } to { transform: translate(-50%, -80%) scale(0) rotate(360deg); opacity: 0; } }
.gb-star { position: absolute; color: #fde047; font-size: clamp(18px, 2.4vw, 28px); text-shadow: 0 0 10px #fff, 0 0 4px #f59e0b; pointer-events: none; opacity: 0;
  animation: gbFly 1.2s var(--d) cubic-bezier(.5,0,.6,1) forwards; }
@keyframes gbFly { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3) rotate(220deg); } }
.gb-dot { position: absolute; border-radius: 50%; background: #fff; opacity: .7; animation: gbDrift 6s ease-in-out infinite alternate; }
@keyframes gbDrift { to { transform: translate(var(--dx), var(--dy)); opacity: .25; } }
.gb-cap { position: absolute; left: 0; right: 0; bottom: max(8svh, 40px); padding: 0 24px; }
.timeup h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; color: #3b0764; text-shadow: 0 2px 0 #fff; }
.timeup h2 span { color: #db2777; }
.gb-say { position: relative; margin: 12px auto 0; height: 1.6em; font: 800 clamp(1.15rem, 3vw, 1.6rem) Nunito, system-ui, sans-serif; color: #4c1d95; }
.gb-say span { position: absolute; left: 0; right: 0; }
.gb-say .one { animation: gbHide .4s 4.4s forwards; } .gb-say .two { opacity: 0; animation: gbShow .6s 5.2s forwards; }
@keyframes gbHide { to { opacity: 0; } } @keyframes gbShow { to { opacity: 1; } }
.tu-count { margin: 18px 0 0; color: #7c3aed; font-weight: 800; font-size: 1rem; }
.tu-count[hidden] { display: none; }
.tu-grown { margin-top: 26px; background: none; border: 0; color: #cfc2ff; font: 700 .85rem "Nunito", sans-serif; text-decoration: underline; cursor: pointer; }
#accountModal { z-index: 6100; } /* a grown-up can open it over the goodnight screen */
@media (prefers-reduced-motion: reduce) {   /* no story: the doors stay shut and the buddy says goodbye */
  .hey.low, .timeup *, .timeup *::after { animation: none !important; }
  .gb-bud { transform: translate(-50%, -50%); } .gb-say .one { opacity: 0; } .gb-say .two { opacity: 1; } .gb-star { display: none; }
}

/* ---------- "Hurray! You're here!": one card, four little chips, short and fits a phone screen ---------- */
.h-title { margin-bottom: 16px; }
.h-card { width: min(520px, 100%); background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 26px; padding: 18px 18px 16px; box-shadow: 0 8px 0 var(--ink); opacity: 0; animation: wUp .55s cubic-bezier(.3,1.5,.5,1) 1.6s forwards; }
.h-card h2 { margin: 0 0 12px; font-size: clamp(1.15rem, 3.4vw, 1.45rem); line-height: 1.25; }
.h-card h2 span { color: #e11d74; white-space: nowrap; }
.h-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.h-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--c); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1rem; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.h-words { margin: 0; font-weight: 800; color: var(--ink-soft); }
.h-words i { color: #f5b400; }
.h-magic { margin: 18px 0 8px; font-family: var(--head); font-weight: 800; font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--yellow); opacity: 0; animation: wUp .5s ease 2.2s forwards; }
.h-receipt { max-width: 520px; font-size: .95rem; line-height: 1.5; animation-delay: 2.5s; }
.h-receipt small { display: block; margin-top: 6px; font-size: .8rem; opacity: .85; }
.h-receipt a { color: #fff; }
.h-next { animation-delay: 2.7s; }
@media (max-height: 760px), (max-width: 420px) {
  .h-bee .bee { width: 104px; height: 104px; }
  .h-word { font-size: clamp(3rem, 14vw, 4.4rem); }
  .h-title { margin: 2px 0 12px; }
  .h-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 250px; margin-left: auto; margin-right: auto; }
  .h-chips li { justify-content: center; }
  .h-chips li { font-size: .84rem; padding: 4px 9px; gap: 4px; border-width: 2.5px; }
  .h-card { padding: 16px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .h-card, .h-magic { animation: none !important; opacity: 1; } }

/* Manage Account → Subscription: start now / cancel / keep */
.acc-plan { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.acc-plan:empty { display: none; }
.acc-plan .btn { white-space: nowrap; }

/* ---------- the child's reading buddy rides the progress bar under the page and cheers them on ---------- */
.r-ride { position: relative; flex: 1; min-width: 0; padding-top: 50px; }
.r-ride { margin-right: 26px; }
.r-ride .progress { display: block; width: 100%; }
.r-goal { position: absolute; right: -26px; bottom: -7px; font-size: 1.5rem; color: var(--yellow); filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.r-buddy { position: absolute; bottom: -10px; left: calc((100% - 56px) * var(--p, 0)); width: 56px; transition: left .7s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.r-buddy { height: 60px; }
.r-buddy > svg, .r-buddy > img.buddy { position: absolute; left: 0; bottom: 0; display: block; width: 56px; height: 60px; animation: rBob 2.6s ease-in-out infinite; }
@keyframes rBob { 50% { transform: translateY(-5px); } }
.r-say { position: absolute; left: 100%; bottom: 30px; margin-left: 4px; white-space: nowrap; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: 3px 12px; font-family: var(--head); font-weight: 800; font-size: .95rem; box-shadow: 0 3px 0 var(--pink); animation: rSay .45s cubic-bezier(.3,1.6,.5,1); }
.r-say:empty { display: none; }
.r-buddy.flip .r-say { left: auto; right: 100%; margin: 0 4px 0 0; border-radius: 16px 16px 4px 16px; }
@keyframes rSay { from { transform: scale(.5); opacity: 0; } }
@media (max-width: 600px) { .r-say { font-size: .82rem; padding: 2px 9px; } }
@media (max-height: 520px) and (orientation: landscape) { .r-ride { padding-top: 34px; } .r-buddy, .r-buddy > svg, .r-buddy > img.buddy { width: 40px; height: 44px; } .r-say { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .r-buddy > svg, .r-say, .r-buddy > img.buddy { animation: none; } .r-buddy { transition: none; } }

/* the little message at the bottom: a slim, wide pill on phones, never a big block */
/* one line when it fits (up to 680px wide); a longer message wraps inside the pill, never past its edge */
.toast { width: max-content; max-width: min(calc(100vw - 32px), 680px); white-space: normal; line-height: 1.3; }
@media (max-width: 600px) {
  .toast { bottom: calc(18px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); padding: 9px 20px; font-size: 1rem; line-height: 1.3; border-radius: 999px; white-space: normal; text-align: center; }
}

/* ============ Manage Account → Activity (grown-ups' log): this week's minutes, then each day ============ */
.act-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 0 2px 26px; border-bottom: 2px solid #eee6fb; margin: 6px 0 4px; position: relative; }
.act-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; position: relative; }
.act-bar span { width: 100%; max-width: 42px; border-radius: 10px 10px 4px 4px; background: #8b5cf6; background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.act-bar.today span { background: #e11d74; background: linear-gradient(180deg, #ff9ec4, #e11d74); }
.act-bar small { font-size: .72rem; font-weight: 800; color: var(--ink-soft); min-height: 1em; }
.act-bar b { position: absolute; bottom: -24px; font-size: .78rem; color: var(--ink-soft); }
.act-day { margin-top: 14px; }
.act-day h4 { margin: 0 0 4px; font-size: 1rem; color: var(--ink-soft); }
.act-item { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.act-item img { width: 44px; aspect-ratio: 900 / 1164; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 3px 8px rgba(45,31,94,.22); flex: none; background: #f1ecfb; }
.act-item div { flex: 1; min-width: 0; }
.act-item b { display: block; font-family: var(--head); font-size: 1.02rem; line-height: 1.2; }
.act-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 800; border-radius: 999px; padding: 1px 9px; color: #fff; background: var(--c); }
.act-time { font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.act-empty { color: var(--ink-soft); font-weight: 700; }
.act-more { margin-top: 10px; }

/* ============ A child's easy sign-in: 3 secret pictures or 4 number-word keys (kid-lock.js) ============ */
.kl { max-width: 340px; margin: 0 auto; }
.kl-slots { display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px; }
.kl-slots i { width: 46px; height: 46px; border-radius: 12px; border: 3px solid var(--ink); display: grid; place-items: center; font-size: 1.5rem; font-style: normal; font-family: var(--head); font-weight: 800; background: #fff4a8; color: var(--ink); }
.kl-slots i.empty { background: #fff; border-style: dashed; border-color: #b8afd6; }
.kl-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kl-pic, .kl-num { font: inherit; cursor: pointer; border: 3px solid #d9d1f5; border-radius: 18px; background: #fbf9ff; color: var(--ink); transition: transform .15s; }
.kl-pic { aspect-ratio: 1; font-size: 2.3rem; color: var(--c); display: grid; place-items: center; }
.kl-num { padding: 8px 0 6px; font-family: var(--head); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.kl-num small { display: block; font-family: var(--body); font-size: .66rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.kl-back { font-size: 1.5rem; color: var(--ink-soft); }
.kl-pic:hover, .kl-num:hover { border-color: var(--ink); }
.kl-pic.tap, .kl-num:active { transform: scale(.92); background: #fff4a8; }
.kl-no { animation: shake .4s; }

/* ============ Who's reading today? (a grown-up signed in) ============ */
.who-card { max-width: 900px; }
.who { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 18px; }
.who-kid { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; width: 150px; color: var(--ink); }
.who-face { width: 132px; height: 132px; margin: 0 auto; border-radius: 50%; background: #fff4a8; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--pink); display: grid; place-items: center; overflow: hidden; font-size: 3rem; color: var(--purple); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.who-face svg { width: 116px; height: 116px; }
.who-kid:hover .who-face { transform: scale(1.06) rotate(-3deg); }
.who-kid b { display: block; font-family: var(--head); font-size: 1.3rem; margin-top: 10px; }
.who-add .who-face { background: #fff; border-style: dashed; color: #b8afd6; box-shadow: none; }
.who-grown .who-face { background: var(--ink); color: var(--yellow); box-shadow: 0 6px 0 var(--yellow); }
@media (max-width: 520px) { .who { gap: 16px; } .who-kid { width: 120px; } .who-face { width: 104px; height: 104px; } .who-face svg { width: 90px; height: 90px; } }

/* ============ Grown-ups area (Parent Dashboard) ============ */
.dash-card { width: min(860px, 100%); }
.gu-gate { max-width: 380px; margin: 14px auto 6px; text-align: center; }
.gu-gate p { font-weight: 700; color: var(--ink-soft); }
.gu-gate input { display: block; width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 14px; padding: .7em .9em; background: #fbf9ff; margin: 8px 0 12px; }
.gu-gate input:focus { outline: none; border-color: var(--purple); }
.dash-kids { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dash-kids:empty { display: none; }
.dash-kid { display: inline-flex; align-items: center; gap: 6px; font: 800 .95rem var(--head); color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 12px 2px 4px; cursor: pointer; }
.dash-kid svg { width: 30px; height: 30px; }
.dash-kid.on { background: #fff4a8; box-shadow: 0 3px 0 var(--ink); }
.kid-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 2px solid #ece6f5; }
.kid-row-face { width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fff4a8; border: 3px solid var(--ink); display: grid; place-items: center; overflow: hidden; font-size: 1.6rem; color: var(--purple); }
.kid-row-face svg { width: 56px; height: 56px; }
.kid-row-main { flex: 1; min-width: 0; }
.kid-row-lbl { margin: 6px 0 4px; font-weight: 800; color: var(--ink-soft); font-size: .88rem; }
.kid-locks { display: flex; flex-wrap: wrap; gap: 6px; }
.kid-locks button { display: inline-flex; align-items: center; gap: 5px; font: 800 .88rem var(--head); color: var(--ink); background: #fbf9ff; border: 2.5px solid #d9d1f5; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.kid-locks button.on { background: var(--yellow); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.kid-setup { margin: 12px 0 0; max-width: 300px; }
.kid-row-more { display: flex; gap: 14px; margin-top: 8px; }
.kid-row-more:empty { display: none; }
.linkish { font: 800 .88rem var(--head); color: var(--purple); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.linkish.danger { color: #e11d74; }
.dash-add { margin-top: 14px; }
.dash-add h3 { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 6px; }
.dash-add h3 i { color: var(--pink); }
.time-row { padding: 10px 0; border-bottom: 2px solid #ece6f5; }
.time-row b { display: block; font-family: var(--head); font-size: 1.1rem; margin-bottom: 6px; }
.fam-code { font: 800 2.4rem/1 var(--head); letter-spacing: 3px; color: var(--ink); background: #fff4a8; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 20px; display: inline-block; margin: 8px 0 14px; box-shadow: 0 4px 0 var(--ink); }
.gu-gate .gsi-slot { display: flex; justify-content: center; min-height: 44px; margin: 8px 0; }
.gu-gate .gsi-slot[hidden] { display: none; }

/* Auto page turn: water rises inside the Auto button for 10 seconds (a gentle wave on top), then the page turns */
#autoBtn { position: relative; overflow: hidden; isolation: isolate; }
#autoBtn > * { position: relative; z-index: 1; }
#autoBtn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 0; opacity: .9; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3 V6 H0Z' fill='%23ff9100'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 6px, linear-gradient(transparent 5px, #ff9100 5px); }
#autoBtn.auto-go::after { animation: autoWater 10s linear forwards, autoWave 1.2s linear infinite; }
@keyframes autoWater { from { height: 0; } to { height: calc(100% + 6px); } }
@keyframes autoWave { to { background-position: 24px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { #autoBtn.auto-go::after { animation: autoWater 10s linear forwards; } }
#autoBtn[hidden] { display: none; }

/* Book size (75% to 100%): the − 75% + control, and a bigger book takes the room of the bars around it */
.r-size { display: flex; align-items: center; gap: 4px; }
.r-size[hidden] { display: none; }
.r-size span { min-width: 3.1em; text-align: center; font-family: var(--head); font-weight: 800; }
.r-size .r-btn { padding: .3em .55em; }
.r-size .r-btn:disabled { opacity: .35; cursor: default; }
.reader.big-book .reader-foot { display: none; }
.reader.big-book #readStage { padding: 12px; }
@media (max-width: 600px) {
  .r-size .r-btn { min-width: 36px; min-height: 36px; padding: 0; }
  .r-size span { min-width: 2.7em; font-size: .85rem; }
  #autoBtn span { display: none; }
}


/* ---------- Star rewards (rewards.js): star with a ring, flying stars, gift box and the 500-star book ---------- */
.star-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 2px 12px 2px 3px; box-shadow: 0 3px 0 var(--ink); font-family: var(--head); flex: none; }
.star-chip[hidden] { display: none; }
.sc-ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eee6ff; background: conic-gradient(#ffb020 calc(var(--p, 0) * 1%), #eee6ff 0); transition: background .3s; }
.sc-star { width: 29px; height: 29px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.sc-star svg { width: 22px; height: 22px; display: block; }
.sc-txt b { display: block; font-size: 1.1rem; line-height: 1; font-weight: 800; }
.sc-txt small { display: block; font-size: .66rem; line-height: 1.1; color: var(--ink-soft, #6b5e94); font-weight: 800; white-space: nowrap; }
@media (max-width: 700px) { .acct .star-chip { padding-right: 8px; } .acct .star-chip small { display: none; } .sc-ring { width: 32px; height: 32px; } .sc-star { width: 24px; height: 24px; } .sc-star svg { width: 18px; height: 18px; } }
.star-fly { position: fixed; z-index: 500; width: 30px; height: 30px; pointer-events: none; }
.star-fly svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(45,31,94,.35)); }
.end-box .star-chip { position: absolute; left: 0; top: -4px; }
.end-again { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 18px; background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.4); border-radius: 16px; padding: 6px 14px; font: 800 1rem var(--head); }
.end-again[hidden] { display: none; }
.end-gift { width: min(420px, 90%); margin: 0 auto 22px; }
.gift-bar { position: relative; height: 22px; border-radius: 999px; background: rgba(255,255,255,.22); border: 3px solid #fff; }
.gift-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffd23f, #ffb020); transition: width 1.2s cubic-bezier(.3,1,.5,1); }
.gift-bar .gift-ico { position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; display: grid; place-items: center; color: #fff; font-size: 1.2rem; }
.gift-txt { display: block; margin-top: 8px; font: 800 .95rem var(--head); color: #fff; }
.rw-moment { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: hidden; }
.rw-card { position: relative; z-index: 1; width: min(400px, 100%); text-align: center; border: 4px solid var(--ink); border-radius: 30px; padding: 24px 20px; box-shadow: 0 10px 0 var(--ink); background: radial-gradient(circle at 50% 30%, #fff 0, #ffe9f3 55%, #ffc4dd 100%); animation: rwPop .5s cubic-bezier(.3,1.5,.5,1) both; }
.rw-m-book .rw-card { background: radial-gradient(circle at 50% 30%, #fff 0, #fff6cf 55%, #ffd88a 100%); }
.rw-card h2 { margin: 12px 0 6px; font-size: 1.7rem; line-height: 1.1; }
.rw-p { margin: 0 0 16px; font-weight: 700; color: var(--ink-soft, #6b5e94); }
@keyframes rwPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.rw-box { position: relative; width: 130px; height: 120px; margin: 0 auto; border: 0; background: none; cursor: pointer; animation: rwWob 1.6s ease-in-out infinite; }
.rw-base { position: absolute; left: 12px; right: 12px; bottom: 0; height: 74px; border: 4px solid var(--ink); border-radius: 10px; background: linear-gradient(90deg, transparent 42%, #ffd23f 42% 58%, transparent 58%), #ff5fa2; }
.rw-lid { position: absolute; left: 2px; right: 2px; top: 22px; height: 30px; z-index: 1; border: 4px solid var(--ink); border-radius: 10px; background: linear-gradient(90deg, transparent 42%, #ffd23f 42% 58%, transparent 58%), #ff7db5; }
.rw-lid::before, .rw-lid::after { content: ""; position: absolute; top: -26px; width: 30px; height: 24px; border: 4px solid var(--ink); border-radius: 50% 50% 10% 50%; background: #ffd23f; }
.rw-lid::before { left: 30px; transform: rotate(-20deg); } .rw-lid::after { right: 30px; transform: scaleX(-1) rotate(-20deg); }
@keyframes rwWob { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.rw-surprise { width: 110px; height: 110px; margin: 0 auto; animation: rwSpin 1.2s cubic-bezier(.3,1.4,.5,1) both; }
.rw-surprise svg { width: 100%; height: 100%; }
@keyframes rwSpin { 0% { transform: scale(0) rotate(-180deg); } 100% { transform: none; } }
.rw-book { width: 130px; height: 160px; margin: 0 auto; border: 4px solid var(--ink); border-radius: 6px 16px 16px 6px; background: linear-gradient(135deg, #ffd23f, #ffb020); box-shadow: inset 12px 0 0 rgba(45,31,94,.15), 0 8px 0 rgba(45,31,94,.3); display: grid; place-items: center; padding: 12px 10px 12px 20px; font: 800 1rem var(--head); line-height: 1.15; animation: rwWob 2.4s ease-in-out infinite; }
.rw-conf { position: absolute; top: 0; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rw-box, .rw-book, .rw-card, .rw-surprise { animation: none; } }

/* ---------- Parent area as its own page (after Parent Login) ---------- */
.modal.as-page { position: static; display: block; padding: 18px 16px 40px; background: none; }
.modal.as-page[hidden] { display: none; }
.modal.as-page .modal-backdrop { display: none; }
.modal.as-page .modal-card { width: min(980px, 100%); max-height: none; overflow: visible; margin: 0 auto; animation: none; }
.parent-mode .member-main { display: none; }
.dash-ipad { margin: 8px 0 4px; padding: 12px 14px; border: 3px dashed var(--pink); border-radius: 18px; background: #fff4f9; }
.dash-ipad[hidden] { display: none; }
.dash-ipad p { margin: 0 0 8px; }
.dash-h { margin: 16px 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 6px; }
.dash-h:first-child { margin-top: 0; }
.dash-h i { color: var(--pink); }
.reader-row { align-items: center; margin: 6px 0; flex-wrap: wrap; }
.reader-face { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.reader-face svg { width: 34px; height: 34px; }
.reader-who { min-width: 70px; }
.reader-row input { flex: 1; min-width: 140px; font: 800 1rem var(--head); letter-spacing: .05em; text-transform: uppercase; }
.act-starline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.act-stars .star-chip { box-shadow: none; border-width: 2.5px; }
.act-book { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: #fff6cf; border: 2px solid #ffb020; color: var(--ink); font-weight: 800; }
.acct #kidsLoginBtn span { display: inline; }

/* ---------- The End, owner's option D (mockups/end-screen.html): one screen, no scrolling ----------
   iPad / computer: a banner on top, three big word cards, one bar of buttons; the quiz pops up.
   Phones: just the stars, the 3 words and Quiz me (a right answer also fills the Word Jar), with an X to close. */
.the-end { overflow: hidden; padding: 14px 16px; justify-content: stretch; }
.end-box { width: min(1100px, 100%); height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.end-box > * { flex-shrink: 0; }
.end-x { display: none; }
.end-banner { position: relative; padding: 12px 130px 14px; border-radius: 26px; background: linear-gradient(90deg, rgba(255,210,63,.18), rgba(255,95,162,.18)); }
.end-banner h2 { font-size: clamp(2.2rem, 5vh, 3.2rem); margin: 0; line-height: 1; }
.end-banner .end-msg { margin: 4px 0 8px; font-size: 1.1rem; }
.end-banner .end-stars, .end-banner .end-again { margin: 0; }
.end-banner .end-gift { width: min(420px, 60%); margin: 10px auto 0; }
.end-banner .end-bee { position: absolute; left: 18px; right: auto; top: auto; bottom: 4px; display: block; }
.end-banner .star-chip { position: absolute; right: 16px; left: auto; top: 14px; }
.end-box .spot { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; }
.end-box .spot[hidden] { display: none; }
.end-box .spot-intro { margin: 0 0 10px; }
.end-box .flips { flex: 1; min-height: 120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.end-box .flip { width: auto; height: auto; min-height: 0; }
.end-box .flip .front b { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.end-box .flip .front small { font-size: 1.05rem; }
.end-box .flip .back { font-size: clamp(.9rem, 1.6vw, 1.15rem); }
.end-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.end-bar .end-ctas { display: flex; gap: 10px; margin-left: auto; }
.end-bar #addJar { margin: 0; }
.end-bar [hidden] { display: none; }
.quiz-pop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.6); }
.quiz-pop[hidden] { display: none; }
.quiz-card { position: relative; width: min(560px, 100%); animation: rwPop .35s cubic-bezier(.3,1.5,.5,1) both; }
.quiz-card .quiz2 { max-width: none; padding: 22px 18px 16px; box-shadow: 0 8px 0 var(--yellow); }
.quiz-card .quiz2 p { font: 800 1.3rem var(--head); }
.quiz-card .quiz2 .opts { flex-direction: column; align-items: stretch; }
.quiz-card .quiz2 button { padding: 10px 14px; font-size: 1.05rem; }
.quiz2 .result.yay { color: #17b3a3; font-size: 1.2rem; }
.quiz2 .result.again { color: var(--pink); font-size: 1.1rem; }
.quiz-x { position: absolute; right: -10px; top: -12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.end-box:has(.up-next:not([hidden])) .end-banner .end-gift { display: none; }   /* audiobooks: room for Up next */
@media (max-width: 700px) {
  .the-end { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .end-box { gap: 10px; justify-content: center; }
  .end-x { display: grid; place-items: center; position: absolute; right: 0; top: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
  .end-banner { padding: 6px 44px 4px; background: none; }
  .end-banner .end-bee, .end-banner .star-chip, .end-banner .end-msg, .end-banner .end-gift { display: none; }
  .end-banner h2 { font-size: 2.3rem; margin-bottom: 10px; }
  .end-box .spot { flex: 0 1 auto; }
  .end-box .spot-intro { font-size: .95rem; }
  .end-box .flips { grid-template-columns: 1fr; gap: 10px; min-height: 0; flex: 0 1 auto; }
  .end-box .flip { height: 104px; max-width: none; }
  .end-box .flip .front b { font-size: 1.9rem; }
  .end-bar { justify-content: center; }
  .end-bar #addJar, .end-bar .end-ctas { display: none; }
  .end-bar #quizBtn { font-size: 1.15rem; padding: 10px 26px; }
  .end-box:has(.up-next:not([hidden])) .flip { height: 84px; }
}
@media (max-height: 640px) and (min-width: 701px) { .end-banner .end-msg { display: none; } .end-banner { padding-top: 8px; padding-bottom: 10px; } }
/* the End bar always stays on one line: the buttons get a little smaller on narrower screens instead of wrapping */
@media (min-width: 701px) {
  .end-bar { flex-wrap: nowrap; gap: clamp(6px, 1vw, 10px); }
  .end-bar .end-ctas { gap: clamp(6px, 1vw, 10px); flex-shrink: 0; }
  .end-bar .btn { white-space: nowrap; font-size: clamp(.8rem, 1.45vw, 1.05rem); padding: .6em clamp(.7em, 1.4vw, 1.2em); }
}
/* The End on iPad and computers (owner, 23 Oct 2026: mockups/end-screen-final.html): a solid night background; the banner
   keeps today's design on a stage (two swaying spotlights, a warm glow, falling confetti); the Spotlight Words are big round
   stickers on a sticker sheet (tap to peel and read the meaning); a story read before says so in a little pop-up, so the
   banner always looks like the first time. Everything fits on one screen. Phones keep their own compact End screen. */
@media (min-width: 701px) {
  .the-end { background: #2d1f5e; }
  .end-box { justify-content: center; gap: clamp(12px, 2.4vh, 26px); }
  .end-banner { padding-left: 180px; padding-right: 180px; overflow: hidden; background: radial-gradient(ellipse at 50% 125%, #ffb3d6 0, #ff5fa2 20%, #7c3aed 58%, #3b2386 100%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.18); }
  .end-banner > :is(h2, .end-msg, .end-stars, .end-again, .end-gift) { position: relative; z-index: 1; }
  .end-banner .star-chip, .end-banner .end-bee { z-index: 2; }
  .end-banner .end-gift { display: none; }   /* the star counter in the corner already shows the gift (owner, 23 Oct 2026) */
  .end-banner .end-bee img { width: clamp(140px, 18vmin, 165px) !important; max-height: 176px; height: auto !important; }   /* a bigger reading buddy */
  @media (orientation: portrait) {   /* upright: bigger buttons, two rows of two */
    .end-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .end-bar .end-ctas { display: contents; }
    .end-bar .btn { font-size: 1.25rem; padding: .75em 1em; justify-content: center; margin: 0; }
  }
  .end-banner h2 { text-shadow: 0 4px 0 #c2306e, 0 0 30px rgba(255,210,63,.55); }
  .end-banner .end-stars { animation: endPulse 2.4s ease-in-out infinite; }
  .the-end.end-repeat .end-banner .end-again { display: none; }
  .end-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .end-spot { position: absolute; top: -40px; width: 240px; height: 560px; background: linear-gradient(180deg, rgba(255,240,180,.32), transparent 72%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: endSway 5s ease-in-out infinite; }
  .end-spot.l { left: 2%; } .end-spot.r { right: 2%; animation-delay: -2.5s; }
  .end-glow { position: absolute; left: 50%; top: 55%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,225,120,.3), transparent 62%); animation: endGlow 2.4s ease-in-out infinite; }
  .end-fx b { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 3px; animation: endFall var(--d) linear var(--dl) infinite; }
  /* upright: the banner takes a fair share of the tall screen */
  .end-banner { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; }   /* room for the bigger buddy */
  @media (orientation: portrait) { .end-banner { min-height: 28vh; } }

  /* the sticker sheet */
  .end-box .spot { flex: 1 1 auto; min-height: 0; max-height: 600px; }
  .end-box .flips { flex: 1; min-height: 210px; height: auto; gap: 20px; position: relative; container-type: size; perspective: 1200px;
    border-radius: 30px; padding: 20px 22px 48px; background: #fff7fb radial-gradient(#f3d4e6 1.5px, transparent 1.6px) 0 0 / 22px 22px; box-shadow: 0 6px 0 #c9b8f0; }
  .end-box .flips::after { content: "Peel a sticker to see what it means"; position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 800 1.05rem Nunito, system-ui, sans-serif; color: #8b5cf6; }
  .end-box .flip { --s: min(calc((100cqw - 40px) / 3), 100cqh, 250px); width: var(--s); height: var(--s); justify-self: center; align-self: start; }
  .end-box .flip:nth-child(2) { align-self: end; }   /* the stickers sit a little up and down, like on a real sheet */
  .end-box .flip > div { border-radius: 50%; border: 7px solid #fff; padding: 12%; overflow: hidden; }
  .end-box .flip .front { background: var(--sc); color: #fff; transform: rotate(var(--tilt)); box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 10px 22px rgba(80,40,120,.28); }
  .end-box .flip .front::after { content: ""; position: absolute; right: 7%; bottom: 7%; width: 22%; height: 22%; background: linear-gradient(135deg, transparent 50%, #f3e9ff 50%); border-radius: 0 0 50% 0; box-shadow: -2px -2px 6px rgba(0,0,0,.15); }
  .end-box .flip .front .ic { font-size: calc(var(--s) * .14); margin-bottom: 2px; }
  .end-box .flip .front b { color: #fff; font-size: min(calc(var(--s) * .14), calc(var(--s) * 1.15 / var(--len))); text-shadow: 0 3px 0 rgba(0,0,0,.18); white-space: nowrap; }   /* long words get smaller, never split */
  .end-box .flip .front small { color: #fff; opacity: .92; font-size: max(.8rem, calc(var(--s) * .062)); }
  .end-box .flip .front em { display: none; }
  .end-box .flip .back { background: #fff; border-color: var(--sc); box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 10px 22px rgba(80,40,120,.28); font-size: max(.68rem, calc(var(--s) * .058)); line-height: 1.22; padding: 11% 12%; }
  .end-box .flip .back .kind { color: var(--sc); font-size: max(.62rem, calc(var(--s) * .05)); }
  .end-box .flip .back q { font-size: max(.62rem, calc(var(--s) * .05)); margin-top: 3px; }
  .end-box .flip .back mark { background: #fde68a; }

  /* "read before": a little pop-up over the End screen */
  .end-pop { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(20,12,50,.55); }
  .end-pop[hidden] { display: none; }
  .end-pop-card { width: min(440px, 100%); background: #fff; color: var(--ink); border-radius: 28px; padding: 26px 24px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 8px 0 var(--yellow), 0 24px 50px rgba(0,0,0,.35); animation: rwPop .35s cubic-bezier(.3,1.5,.5,1) both; }
  .end-pop-card > i { font-size: 2.6rem; color: #ffc81e; }
  .end-pop-card b { font: 800 1.6rem/1.15 var(--head); } .end-pop-card span { font-weight: 800; color: var(--ink-soft); font-size: 1.1rem; }
  .end-pop-card .btn { margin-top: 10px; min-width: 140px; justify-content: center; }
}
@keyframes endSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes endGlow { 50% { transform: scale(1.1); opacity: .7; } }
@keyframes endFall { to { transform: translateY(560px) rotate(540deg); } }
@keyframes endPulse { 50% { transform: scale(1.06); } }
.end-fx, .flip .ic { display: none; }
@media (min-width: 701px) { .end-fx { display: block; } .end-box .flip .ic { display: block; } }
@media (prefers-reduced-motion: reduce) { .end-spot, .end-glow, .end-fx b, .end-banner .end-stars { animation: none !important; } }
.flip .back q { quotes: none; }   /* the story line brings its own quote marks */

/* "New release" on books added this week (isNewRelease in books.js): a yellow circle with a star, like the green "finished" one */
.lib-seal.lib-new { background: #ffd23f; background: radial-gradient(circle at 35% 30%, #fff3a3, #ffc81e); color: var(--ink); animation: newTwinkle 3s ease-in-out infinite; }
@keyframes newTwinkle { 0%, 80%, 100% { transform: none; } 88% { transform: scale(1.15) rotate(12deg); } 94% { transform: scale(1) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .lib-seal.lib-new { animation: none; } }

/* reader bar: round buttons (back, smaller, bigger, sound) and a pill-shaped Auto, like the rest of the app */
.reader .r-btn { border-radius: 999px; }
#readerClose, .r-size .r-btn, #soundBtn { width: 46px; height: 46px; min-width: 0; padding: 0; justify-content: center; flex: none; }
#autoBtn { height: 46px; padding: 0 1.1em; }
@media (max-width: 600px) {
  #readerClose, .r-size .r-btn, #soundBtn { width: 40px; height: 40px; min-height: 0; }
  #autoBtn { width: 40px; height: 40px; min-width: 0; padding: 0; justify-content: center; }
}

/* Match 3 pictures: the 3 to find show at the top (faded), and light up as the child taps them in order */
.kl-slots i.kl-want, .kl-slots i.kl-done { width: 64px; height: 64px; font-size: 2.3rem; border-radius: 18px; }
.kl-slots i.kl-want { background: #fff; border: 3px dashed var(--ink); }
.kl-slots i.kl-done { background: #fff4a8; border: 3px solid var(--ink); animation: klPop .3s cubic-bezier(.3,1.6,.5,1); }
.kl-slots i.kl-done::after { content: "✓"; position: absolute; margin: -44px 0 0 44px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal, #17b3a3); color: #fff; font: 800 .8rem var(--head); display: grid; place-items: center; }
@keyframes klPop { 0% { transform: scale(.6); } 100% { transform: none; } }

/* kid characters (kid-faces.js): the child's own picture on Kids Login, their name badge and the Parent area */
.face-dot { display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); overflow: hidden; flex: none; }
.face-dot svg { display: block; }
.hey-buddy { border-radius: 50%; border: 2px solid var(--ink); overflow: hidden; display: grid; place-items: center; }
.kid-faces { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 6px; margin-bottom: 4px; }
.kid-faces button { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2.5px solid var(--ink); overflow: hidden; cursor: pointer; display: grid; place-items: center; }
.kid-faces button.on { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5px var(--ink); }

/* ---------- Welcome letter (welcome-letter.js): the 💌 button in the top bar + the envelope and cards ---------- */
.letter-btn { position: relative; width: 44px; height: 44px; padding: 0; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.letter-btn[hidden] { display: none; }
.letter-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.letter-btn svg { width: 28px; height: 28px; display: block; }
.letter-btn .wl-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; }
.letter-btn.new { animation: wlWiggle 2.4s ease-in-out infinite; }
@keyframes wlWiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } }
@media (max-width: 600px) { .letter-btn { width: 38px; height: 38px; border-width: 2.5px; } .letter-btn svg { width: 23px; height: 23px; } }

.wl { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: rgba(29,24,56,.68); display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 56px) calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 14px); }
.wl[hidden] { display: none; }
body.wl-open { overflow: hidden; }
.wl-close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: calc(env(safe-area-inset-right) + 12px); width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.15); color: #fff; font-size: 1.25rem; display: grid; place-items: center; cursor: pointer; }
.wl-box { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.wl-stage { touch-action: pan-y; position: relative; width: min(100%, calc((var(--vh, 100vh) - 190px) * 1366 / 768)); aspect-ratio: 1366 / 768; border-radius: 22px; overflow: hidden; background: #f7d9c4; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.wl-stage video, .wl-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-card { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .45s, transform .55s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.wl-card.on { opacity: 1; transform: none; }
.wl-tap { position: absolute; left: 25%; top: 5%; width: 60%; height: 80%; border: 0; background: none; cursor: pointer; }
.wl-arrow { position: absolute; top: 50%; margin-top: -28px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 1.7rem; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.wl-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.wl-arrow.prev { left: 10px; } .wl-arrow.next { right: 10px; }
@media (max-width: 600px) { .wl-arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 1.3rem; } .wl-arrow.prev { left: 6px; } .wl-arrow.next { right: 6px; } }
.wl-stage video.opening { animation: wlOpen .6s ease-in forwards; }
@keyframes wlOpen { to { transform: scale(1.35) rotate(-3deg); opacity: 0; } }
.wl-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wl-btn { box-shadow: 0 4px 0 var(--ink); }
.wl-dots { display: flex; gap: 6px; }
.wl-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); }
.wl-dots i.on { background: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .letter-btn.new { animation: none; } .wl-card { transition: none; } }
@media (max-width: 400px) { .acct { gap: 4px; } .letter-btn { width: 34px; height: 34px; } .letter-btn svg { width: 21px; height: 21px; } .member-page .nav .logo-img { height: 56px; width: auto; } }

/* the kid characters are round pictures that fill their circle */
.hey-buddy .kf-img, .kid-row-face .kf-img, .kid-faces button .kf-img { width: 100%; height: 100%; display: block; }
.face-dot .kf-img { display: block; }

/* ---------- "Me" panel: tap the "Hey Mia!" badge to pick a character or find a new reading buddy ---------- */
.hey.tappable { cursor: pointer; position: relative; }
.hey.tappable:active { transform: translateY(2px); }
.hey.tappable:focus-visible { outline: 4px solid var(--pink); outline-offset: 2px; }
.hey.tappable .hey-buddy::after { content: ""; position: absolute; left: 30px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.5V20h2.5L17 9.5 14.5 7z M18.4 8.1l-2.5-2.5 1.4-1.4a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 0 1 0 1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 10px no-repeat; border: 2px solid #fff; }
.me-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: rgba(29,24,56,.62); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px); }
.me-panel[hidden] { display: none; }
body.me-open { overflow: hidden; }
.mp-card { position: relative; width: min(100%, 560px); max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff8ec; border: 4px solid var(--ink); border-radius: 26px; padding: 16px 18px 20px; box-shadow: 0 8px 0 var(--ink); }
.mp-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.mp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mp-face { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 4px solid var(--ink); overflow: hidden; display: block; }
.mp-face .kf-img { width: 100%; height: 100%; display: block; }
.mp-top h2 { margin: 0; font: 800 1.7rem var(--head); color: var(--ink); }
.mp-card h3 { margin: 12px 0 8px; font: 800 1.15rem var(--head); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.mp-card h3 i { color: var(--pink); }
.mp-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.mp-faces button { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 3px solid var(--ink); overflow: hidden; cursor: pointer; background: #fff; }
.mp-faces button .kf-img { width: 100%; height: 100%; display: block; }
.mp-faces button.on { box-shadow: 0 0 0 4px var(--yellow), 0 0 0 7px var(--ink); }
.mp-saved { margin: 6px 0 0; min-height: 1.3em; font-weight: 800; color: var(--teal, #17b3a3); text-align: center; }
.mp-buddy { display: flex; align-items: center; gap: 14px; background: #fff; border: 3px solid #e8def8; border-radius: 20px; padding: 10px 14px; }
.mp-buddy img.buddy { width: 110px; height: 110px; flex: none; }
.mp-buddy b { display: block; font: 800 1.25rem var(--head); color: var(--ink); margin-bottom: 8px; }
@media (max-width: 420px) { .mp-faces { grid-template-columns: repeat(5, 1fr); gap: 6px; } .mp-buddy img.buddy { width: 84px; height: 84px; } .mp-top h2 { font-size: 1.4rem; } }
@media (max-width: 600px) { .hey.tappable .hey-buddy::after { left: 17px; top: -4px; width: 12px; height: 12px; background-size: 8px; } }

/* ---------- Parent area, "Your child" (owner, 10 Oct 2026): one child, age, gender, two ways to sign in, "Saved!" pop-up ---------- */
.kid-one { border-bottom: 0; align-items: flex-start; }
.kid-one .kid-row-lbl { margin-top: 14px; }
.kid-one .kid-row-lbl:first-child { margin-top: 0; }
.kid-age { appearance: none; -webkit-appearance: none; min-width: 200px; font: 800 1rem var(--body, Nunito), sans-serif; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 14px; padding: 9px 42px 9px 14px; cursor: pointer;
  background: #fbf9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232d1f5e' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.kid-age:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.kid-genders { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-genders button { font: 800 .95rem var(--head); color: var(--ink); background: #fff; border: 3px solid #d9d1f5; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.kid-genders button.on { background: #ffe1ee; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.kid-one .kid-locks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 540px; }
.kid-one .kid-locks button { border-radius: 16px; padding: 10px 12px; text-align: left; align-items: flex-start; gap: 8px; font-size: .95rem; }
.kid-one .kid-locks button i { font-size: 1.4rem; color: var(--purple); }
.kid-one .kid-locks button small { display: block; font: 700 .78rem var(--body, Nunito), sans-serif; opacity: .7; }
.kid-one .kid-locks button.on { background: #f3ecff; }
@media (max-width: 560px) { .kid-one { flex-direction: column; } .kid-one .kid-locks { grid-template-columns: 1fr; } }

.saved-pop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.35); }
.saved-pop[hidden] { display: none; }
.saved-card { width: min(360px, 100%); background: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 22px 22px 20px; text-align: center; box-shadow: 0 10px 0 var(--teal, #17b3a3), 0 10px 0 3px var(--ink); animation: savedIn .4s cubic-bezier(.3,1.6,.5,1); }
.saved-tick { width: 68px; height: 68px; margin: -56px auto 8px; border-radius: 50%; background: var(--teal, #17b3a3); border: 3px solid var(--ink); display: grid; place-items: center; color: #fff; font-size: 2.1rem; }
.saved-card h3 { font: 800 1.7rem var(--head); margin: 0; }
.saved-card p { margin: 6px 0 16px; font-weight: 700; color: var(--ink-soft); }
@keyframes savedIn { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saved-card { animation: none; } }

/* Subscription (owner's pick A, 10 Oct 2026): their plan highlighted, one Upgrade button, a one-line cancel */
.plan-now { position: relative; background: #fff; border: 3px solid var(--teal, #17b3a3); border-radius: 22px; padding: 22px 20px 18px; margin: 0 0 18px; max-width: 560px; box-shadow: 0 0 0 5px rgba(23,179,163,.18); }
.plan-tag { position: absolute; top: -14px; left: 16px; background: var(--teal, #17b3a3); color: #fff; font: 800 .85rem var(--head); border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 12px; }
.plan-now h3 { font: 800 1.6rem var(--head); margin: 2px 0 4px; display: flex; gap: 8px; align-items: center; }
.plan-now h3 i { color: var(--teal, #17b3a3); }
.plan-now p { margin: 0; font-weight: 700; color: var(--ink-soft); }
.plan-bar { height: 12px; border-radius: 99px; background: #e6f7f4; border: 2px solid var(--ink); margin-top: 12px; overflow: hidden; }
.plan-bar i { display: block; height: 100%; background: var(--teal, #17b3a3); }
.plan-who { margin: 4px 0 26px; }
.who-chip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 2.5px solid #d9d1f5; border-radius: 999px; padding: 6px 14px; font-weight: 800; }
.who-chip i { color: var(--teal, #17b3a3); font-size: 1.1rem; }
.who-chip span { font-weight: 700; color: var(--ink-soft); }
#accPlan { max-width: 560px; }
#accPlan .plan-go { width: 100%; justify-content: center; font-size: 1.15rem; padding: 12px 18px; }
.plan-manage { margin-top: 12px; }
.plan-links { max-width: 560px; text-align: center; margin: 18px 0 0; font-weight: 800; font-size: .95rem; }
.plan-links a, .plan-links .plan-cancel { color: var(--ink-soft); text-decoration: underline; font: inherit; }

/* first-time setup ("Who's reading today?"): age dropdown and Gender (owner, 10 Oct 2026) */
.pc-select { appearance: none; -webkit-appearance: none; width: 100%; font: 800 1.1rem var(--body, Nunito), sans-serif; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 16px; padding: 12px 44px 12px 16px; cursor: pointer; margin-bottom: 4px;
  background: #fbf9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232d1f5e' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.pc-select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.pc-genders { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pc-genders button { font: 800 1.05rem var(--head); color: var(--ink); background: #fff; border: 3px solid #d9d1f5; border-radius: 999px; padding: 8px 20px; cursor: pointer; }
.pc-genders button.on { background: #ffe1ee; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
/* "Your child" and Reading time: nothing is saved until Save (owner, 10 Oct 2026) */
.kid-one .kid-name { width: 100%; max-width: 360px; font: inherit; font-weight: 700; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 12px; padding: .45em .7em; background: #fbf9ff; }
.kid-one .kid-name:focus { outline: none; border-color: var(--purple); }
.kid-one .kid-save { margin-top: 20px; }
.time-row .time-save { margin-top: 14px; }

/* ---------- After joining (welcome.html): W3 of mockups/welcome-ideas.html (owner's pick, 10 Oct 2026) ---------- */
.h-badge { width: 170px; height: 170px; background: url(assets/login/join.webp) center / contain no-repeat; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); animation: wUp .6s cubic-bezier(.3,1.5,.5,1) both, hFloat 4s ease-in-out 1s infinite; }
@keyframes hFloat { 50% { transform: translateY(-8px) rotate(-2deg); } }
.hurray-page .h-title { margin: 8px 0 14px; }
.hurray-page .h-word { font-size: clamp(3.2rem, 10vw, 5.4rem); }
.hurray-page .h-chips { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; opacity: 0; animation: wUp .5s ease 1.6s forwards; }
.hurray-page .h-chips li { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font: 800 1rem var(--head); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.hurray-page .h-receipt { font-size: 1.1rem; margin: 0 0 20px; animation-delay: 2s; }
.hurray-page .h-receipt strong { color: var(--yellow); }
.hurray-page .h-next { animation-delay: 2.2s; font-size: 1.3rem; border-color: transparent; box-shadow: 0 5px 0 #e0a800; }
.hurray-page .h-next i { color: #ff8a1f; }
.hurray-page .profile-card { border: 0; border-radius: 30px; padding: 26px 26px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.pc-badge { width: 96px; height: 96px; margin: 0 auto 4px; background: url(assets/login/kids.webp) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(45,31,94,.25)); }
.hurray-page .profile-card h1 { color: var(--purple); font-size: clamp(1.8rem, 5vw, 2.2rem); }
.hurray-page .pc-sub { margin: 0 0 16px; }
.hurray-page .pc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hurray-page .profile-card input, .hurray-page .pc-select { border: 2px solid #e3dbf5; background-color: #fff; font-size: 1.2rem; margin-bottom: 10px; border-radius: 16px; }
.hurray-page .pc-genders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.hurray-page .pc-genders button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid #e3dbf5; border-radius: 18px; padding: 10px; box-shadow: none; }
.hurray-page .pc-genders button i { width: 56px; height: 56px; border-radius: 50%; background: center / cover #ffe9b8; }
.hurray-page .pc-genders button.on { border-color: var(--purple); background: #f3edff; box-shadow: none; }
.hurray-page .lets-go { margin-top: 14px; border-color: transparent; box-shadow: 0 5px 0 #d83d7c; }
@media (prefers-reduced-motion: reduce) { .h-badge, .hurray-page .h-chips { animation: none !important; opacity: 1; } }

/* the welcome page on iPads and phones (owner, 10 Oct 2026: "make sure this works on iPad and phone") */
.fonts-wait .h-stage { opacity: 0; }
.h-stage { transition: opacity .25s ease; }
.hurray-page, .hurray-page .h-stage { min-height: 100vh; min-height: 100svh; }   /* steady height: the browser bars can't make it jump */
.hurray-page { overscroll-behavior: none; }
.h-badge { filter: none; will-change: transform; backface-visibility: hidden; }   /* iPad Safari shimmers a filter on a moving picture */
.hurray-page .h-stage { padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.hurray-page .h-chips li, .hurray-page .h-next, .hurray-page .pc-genders button, .hurray-page .lets-go { min-height: 44px; }   /* easy to tap */
.hurray-page .profile-card input, .hurray-page .pc-select { font-size: max(16px, 1.1rem); }   /* 16px+ so iPhone doesn't zoom in when typing */
@media (max-width: 520px) {
  .h-badge { width: 132px; height: 132px; }
  .hurray-page .h-word { font-size: 3.2rem; }
  .hurray-page .h-welcome { font-size: 1.7rem; }
  .hurray-page .h-chips li { font-size: .92rem; padding: 6px 12px; }
  .hurray-page .h-next { width: 100%; max-width: 340px; justify-content: center; }
  .hurray-page .profile-card { padding: 22px 18px 20px; }
  .pc-badge { width: 84px; height: 84px; }
}
@media (max-height: 560px) and (orientation: landscape) {   /* a phone held sideways: smaller badge so it all fits */
  .h-badge { width: 96px; height: 96px; }
  .hurray-page .h-word { font-size: 2.6rem; }
  .hurray-page .h-title { margin: 4px 0 8px; }
  .pc-badge { display: none; }
}
/* the owner's "Welcome! Hurray!" badge on the Hurray screen (10 Oct 2026), a little bigger than the Join Us one */
.h-badge { width: 220px; height: 210px; background-image: url(assets/login/welcome.webp); }
@media (max-width: 520px) { .h-badge { width: 170px; height: 162px; } }
@media (max-height: 560px) and (orientation: landscape) { .h-badge { width: 110px; height: 105px; } }

/* H1 of mockups/hurray-words.html (owner, 10 Oct 2026): "You're in!" in a brighter, sunnier yellow, and more room between the parts */
.hurray-page .h-word { color: #ffe81a; font-size: clamp(2.8rem, 8vw, 4.4rem); white-space: nowrap; }
.hurray-page .h-welcome { font-size: clamp(1.25rem, 3.4vw, 1.7rem); text-shadow: 0 2px 0 rgba(45,31,94,.6); margin-top: 6px; }
.hurray-page .h-badge { margin-bottom: 26px; }
.hurray-page .h-title { margin: 0 0 30px; }
.hurray-page .h-chips { margin: 0 0 24px; }
.hurray-page .h-receipt { margin: 0 0 30px; }
.hurray-page .h-receipt strong { color: #ffe81a; }
@media (max-height: 560px) and (orientation: landscape) { .hurray-page .h-badge { margin-bottom: 10px; } .hurray-page .h-title { margin-bottom: 14px; } .hurray-page .h-chips, .hurray-page .h-receipt { margin-bottom: 12px; } }

/* ---------- Brainy Play: Shadow Friends (owner, 10 Oct 2026; brainy.js, mockups/shadow-match.html) ---------- */
/* (owner, 23 Oct 2026) the board's height also leaves room for the iPad's clock strip and home bar in the app, so it never scrolls */
.brp-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 8px; }
.brp-world { border: 0; border-radius: 24px; padding: 12px 8px 12px; background: var(--c); color: #fff; font: inherit; cursor: pointer; text-align: center; box-shadow: 0 6px 0 rgba(45,31,94,.18); transition: transform .15s; }
.brp-world:hover { transform: translateY(-3px); }
.brp-world img { display: block; width: 74%; aspect-ratio: 1; object-fit: contain; margin: 0 auto 4px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.brp-world b { display: block; font: 800 1.15rem var(--head); } .brp-world small { font-weight: 700; font-size: .8rem; opacity: .92; }
.brp-board { position: relative; width: min(100%, 1000px, calc((100svh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3)); margin: 6px auto 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; border: 4px solid var(--ink); box-shadow: 0 10px 0 rgba(45,31,94,.18); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.brp-sky { position: absolute; inset: 0; pointer-events: none; } .brp-sky i { position: absolute; }
.brp-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 5; pointer-events: none; }
.brp-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: 6px 14px; font: 800 1rem var(--head); box-shadow: 0 4px 10px rgba(45,31,94,.15); cursor: pointer; }
.brp-chip i { color: var(--purple); }
.brp-scene img { position: absolute; pointer-events: none; }
.brp-shadow { filter: brightness(0) opacity(.28); }
.brp-night .brp-shadow { filter: brightness(0) invert(1) opacity(.3); }
.brp-pop { animation: bpPop .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes bpPop { from { transform: scale(.6); } to { transform: none; } }
.brp-tray { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: rgba(255,255,255,.78); border-top: 3px dashed rgba(45,31,94,.25); display: flex; justify-content: space-evenly; align-items: center; z-index: 4; }
.brp-piece { width: 15%; aspect-ratio: 1; touch-action: none; cursor: grab; }
.brp-piece img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(45,31,94,.25)); }
.brp-drag { position: absolute; z-index: 20; transform: scale(1.12); cursor: grabbing; }
.brp-gone { visibility: hidden; }
.brp-say { position: absolute; z-index: 6; font: 800 1.3rem var(--head); color: #fff; background: var(--purple); border-radius: 999px; padding: 4px 16px; transform: translate(-50%, -120%); animation: bpSay 1.2s ease forwards; pointer-events: none; white-space: nowrap; }
@keyframes bpSay { 0% { opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -130%); } 80% { opacity: 1; } 100% { opacity: 0; } }
.brp-fact, .brp-win { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; }
.brp-fact[hidden], .brp-win[hidden] { display: none; }
.brp-fact { background: rgba(45,31,94,.25); }
.brp-fact-card { width: min(560px, 90%); background: #fff; border-radius: 28px; padding: 18px 20px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; box-shadow: 0 18px 40px rgba(45,31,94,.3); animation: bpPop .4s cubic-bezier(.3,1.6,.5,1); }
.brp-fact-card img { width: min(120px, 22vw); aspect-ratio: 1; object-fit: contain; }
.brp-fact-card b { display: block; font: 800 clamp(1.3rem, 3.4vw, 1.8rem) var(--head); color: var(--purple); line-height: 1.05; }
.brp-fact-card p { margin: 6px 0 0; font-weight: 700; font-size: clamp(.95rem, 2.4vw, 1.15rem); line-height: 1.4; color: var(--ink); }
.brp-fact-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.brp-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 24px; font: 800 1.1rem var(--head); cursor: pointer; min-height: 46px; }
.brp-yellow { background: #ffd23f; color: var(--ink); box-shadow: 0 5px 0 #e0a800; }
.brp-purple { background: var(--purple); color: #fff; box-shadow: 0 5px 0 #6a3fd6; }
.brp-white { background: #fff; color: var(--ink); box-shadow: 0 5px 0 rgba(45,31,94,.2); }
.brp-say-btn { background: #efe8ff; color: var(--purple); padding: 11px 16px; font-size: 1.3rem; }
.brp-win { flex-direction: column; text-align: center; background: rgba(255,248,236,.94); padding: 16px; }
.brp-win h2 { font: 800 clamp(2.2rem, 7vw, 3.2rem) var(--head); color: var(--purple); margin: 0; }
.brp-win p { font-weight: 800; color: var(--ink-soft); margin: 6px 0 18px; font-size: clamp(1rem, 2.6vw, 1.25rem); }
.brp-win-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* phones (owner, 15 Oct 2026: B1 of mockups/phone-fixes.html): the game fills the screen instead of the top half */
@media (max-width: 560px) {
  .brp-board { width: 100%; aspect-ratio: auto; height: calc(100svh - var(--sec-top, 150px) - 26px); min-height: 440px; max-height: 820px; }
  .brp-tray { height: 18%; }
  .brp-piece { width: 17%; }
}
@media (max-width: 520px) { .brp-chip { font-size: .85rem; padding: 4px 10px; } .brp-btn { font-size: .95rem; padding: 9px 16px; } .brp-say { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .brp-pop, .brp-fact-card { animation: none; } }
.brp-formula { display: inline-block; margin: 8px 0 0 !important; background: #eef2ff; color: #4338ca !important; border-radius: 12px; padding: 5px 12px; font: 800 clamp(.85rem, 2.2vw, 1rem) var(--head) !important; }
.brp-formula:empty { display: none; }
.brp-formula::before { content: "Big-kid formula: "; font-weight: 700; opacity: .8; }

/* Cancel flow (owner, 11 Oct 2026: C1 of mockups/cancel-why.html, all screens in mockups/cancel-flow.html) */
.cx-pop { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.45); overflow-y: auto; }
.cx-pop[hidden] { display: none; }
.cx-card { position: relative; width: min(860px, 100%); display: grid; grid-template-columns: 1fr 320px; background: #fff8ec; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(20,10,50,.35); }
.cx-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #5b4f8a; display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 10px rgba(45,31,94,.15); }
.cx-l { padding: 30px 30px 26px; display: flex; flex-direction: column; min-height: 560px; text-align: left; }
.cx-l h2 { font: 800 1.9rem var(--font-head, "Baloo 2"), system-ui, sans-serif; line-height: 1.05; margin: 0; color: #2d1f5e; }
.cx-sub { font-weight: 700; color: #5b4f8a; margin: 8px 0 0; }
.cx-p { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg,#d9ccff,#bfa9ff); }
.cx-p.sky { background: linear-gradient(180deg,#8fd3ff,#dff3ff); }
.cx-p.night { background: linear-gradient(180deg,#2a2470,#4b3fa0); }
.cx-p img { width: 210px; animation: cx-float 4s ease-in-out infinite; }
@keyframes cx-float { 50% { transform: translateY(-8px); } }
.cx-bub { position: relative; background: #fff; border-radius: 20px; padding: 10px 16px; font: 800 1.15rem "Baloo 2", system-ui, sans-serif; color: #8b5cf6; box-shadow: 0 6px 14px rgba(45,31,94,.12); }
.cx-bub::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.cx-reasons { display: grid; gap: 8px; margin-top: 16px; }
.cx-r { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 2px solid #efe8fb; border-radius: 16px; padding: 9px 14px; font: 700 1rem Nunito, system-ui, sans-serif; color: #2d1f5e; text-align: left; cursor: pointer; }
.cx-r .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #cfc3ee; }
.cx-r i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.cx-r.on { border-color: #8b5cf6; background: #f5f0ff; }
.cx-r.on .dot { border: 7px solid #8b5cf6; }
.cx-note { margin-top: 8px; width: 100%; border: 2px solid #e6def7; border-radius: 14px; padding: 10px 12px; font: 600 16px Nunito, system-ui, sans-serif; color: #2d1f5e; background: #fff; resize: vertical; }
.cx-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
.cx-btns button { flex: 1 1 0; min-width: 0; white-space: nowrap; line-height: 1.1; min-height: 52px; border-radius: 999px; padding: 12px 16px; font: 800 1.05rem "Baloo 2", system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.cx-keep { border: 0; background: #8b5cf6; color: #fff; box-shadow: 0 5px 0 #6a3fd6; }
.cx-go { background: #fff; color: #2d1f5e; border: 2px solid #d9cff3; }
.cx-go:disabled { opacity: .5; cursor: default; }
.cx-bye { background: #fff; color: #c0265f; border: 2px solid #ffd0e1; }
.cx-btns button:disabled { cursor: default; }
.cx-msg { min-height: 1.2em; margin: 10px 0 0; font-weight: 700; color: #c0265f; }
.cx-lbl { font: 800 1rem "Baloo 2", system-ui, sans-serif; margin: 18px 0 6px; }
.cx-sel { width: 100%; border: 2px solid #e6def7; border-radius: 14px; padding: 11px 12px; font: 800 16px Nunito, system-ui, sans-serif; color: #2d1f5e; background: #fff; }
.cx-tl { background: #fff; border-radius: 20px; padding: 16px 18px; margin-top: 14px; box-shadow: 0 6px 14px rgba(45,31,94,.07); }
.cx-st { display: grid; grid-template-columns: 34px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.cx-st:last-child { padding-bottom: 0; }
.cx-st:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 3px; background: #ece6f9; border-radius: 3px; }
.cx-st.on:not(:last-child)::before { background: #ff5c9d; }
.cx-st > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f3effc; color: #5b4f8a; font-size: 1.05rem; }
.cx-st.on > i { background: #ff5c9d; color: #fff; }
.cx-st b { font: 800 1.05rem "Baloo 2", system-ui, sans-serif; display: block; line-height: 1.15; padding-top: 5px; color: #2d1f5e; }
.cx-st span { font-weight: 700; color: #5b4f8a; font-size: .92rem; }
.cx-ticket { position: relative; margin-top: 18px; border: 3px dashed #f5b800; background: linear-gradient(135deg,#fff7cc,#ffe98a); border-radius: 22px; padding: 22px; text-align: center; }
.cx-ticket small { font: 800 1rem "Baloo 2", system-ui, sans-serif; color: #8a6a00; }
.cx-ticket .big { font: 800 3.2rem "Baloo 2", system-ui, sans-serif; line-height: 1; color: #2d1f5e; margin: 4px 0; }
.cx-ticket .big s { font-size: 1.6rem; color: #b49a4a; margin-right: 8px; }
.cx-ticket p { margin: 4px 0 0; font-weight: 700; color: #6b5a1e; }
.cx-ticket::before, .cx-ticket::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff8ec; }
.cx-ticket::before { left: -15px; } .cx-ticket::after { right: -15px; }
.cx-fine { font-weight: 700; color: #5b4f8a; font-size: .88rem; margin: 10px 0 0; }
.cx-done { margin: auto 0; text-align: center; }
.cx-done .ic { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; background: #f5f0ff; display: grid; place-items: center; font-size: 2.6rem; color: #8b5cf6; }
.cx-done .cx-btns { margin-top: 18px; }
.cx-mini { display: none; }
@media (max-width: 760px) {
  .cx-pop { align-items: start; }
  .cx-card { grid-template-columns: 1fr; border-radius: 24px; }
  .cx-p { display: none; }
  .cx-l { min-height: 0; padding: 20px 16px 16px; text-align: center; }
  .cx-mini { display: block; width: 72px; margin: 0 auto 4px; }
  .cx-l h2 { font-size: 1.45rem; }
  .cx-sub { font-size: .92rem; }
  .cx-reasons { text-align: left; gap: 7px; } .cx-r { padding: 8px 10px; font-size: .94rem; gap: 10px; } .cx-r i { width: 30px; height: 30px; font-size: 1rem; }
  .cx-tl, .cx-lbl { text-align: left; }
  .cx-btns { flex-direction: column-reverse; gap: 8px; }
  .cx-ticket .big { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cx-p img { animation: none; } }

/* Watch & Wonder (owner, 11 Oct 2026; V1 of mockups/little-movies.html) */
.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.wm-card { display: block; width: 100%; border: 0; background: #fff; border-radius: 22px; padding: 10px; text-align: left; font: inherit; color: #2d1f5e; cursor: pointer; box-shadow: 0 6px 14px rgba(45,31,94,.08); transition: transform .15s; }
.wm-card:hover:not(:disabled) { transform: translateY(-3px); }
.wm-card:disabled { cursor: default; opacity: .7; }
.wm-card b { display: block; font: 800 1.15rem "Baloo 2", system-ui, sans-serif; margin: 8px 4px 2px; }
.wm-card small { display: block; font-weight: 700; color: #5b4f8a; margin: 0 4px 4px; }
.wm-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #2d1f5e center / cover; }
.wm-play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); color: #ff5c9d; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.wm-len { position: absolute; right: 10px; bottom: 10px; background: rgba(20,10,50,.72); color: #fff; border-radius: 999px; padding: 2px 10px; font: 800 .85rem "Baloo 2", system-ui, sans-serif; }
.wm-chip { position: absolute; left: 10px; top: 10px; background: #ffd23f; color: #2d1f5e; border-radius: 999px; padding: 3px 10px; font: 800 .8rem "Baloo 2", system-ui, sans-serif; display: inline-flex; gap: 5px; align-items: center; }
.wm-pop { position: fixed; inset: 0; z-index: 220; background: rgba(20,10,50,.88); display: grid; place-items: center; padding: 16px; }
.wm-pop[hidden] { display: none; }
.wm-box { width: min(1100px, 100%); }
.wm-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; margin-bottom: 10px; }
.wm-bar b { font: 800 1.35rem "Baloo 2", system-ui, sans-serif; }
.wm-close { flex: none; border: 0; background: #fff; color: #2d1f5e; border-radius: 999px; padding: 10px 20px; min-height: 44px; font: 800 1.05rem "Baloo 2", system-ui, sans-serif; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.wm-box video { display: block; width: 100%; max-height: calc(100svh - 110px); border-radius: 18px; background: #000; }
@media (max-width: 520px) { .wm-bar b { font-size: 1.1rem; } }

/* Home of picture tiles (owner, 11 Oct 2026; K2 of mockups/home-soft.html): no tab rows any more, one section at a time */
.lib-tabs { display: none !important; }
.kid-home { position: relative; padding: 4px 0 20px; }
.kid-home[hidden] { display: none; }
.kh-dots { position: absolute; inset: -20px -16px 0; pointer-events: none; }
.kh-dots i { position: absolute; border-radius: 50%; opacity: .55; }
.kh-hello { position: relative; text-align: center; font: 800 clamp(1.5rem, 4vw, 2.2rem) "Baloo 2", system-ui, sans-serif; color: #8b5cf6; margin: 0 0 22px; }
.kh-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 186px)); justify-content: center; gap: 24px 30px; }
.kh-tile { border: 0; background: none; padding: 0; font: inherit; color: #2d1f5e; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; -webkit-tap-highlight-color: transparent; }
.kh-blob { position: relative; width: 100%; aspect-ratio: 1 / .93; display: grid; place-items: center; animation: khFloat 4s ease-in-out infinite; will-change: transform; backface-visibility: hidden; }
.kh-blob::before { content: ""; position: absolute; inset: 0; background: var(--b); border-radius: var(--br); transform: rotate(var(--rot)); }
.kh-pic { position: relative; width: 84%; aspect-ratio: 1; border-radius: 50%; background: #17b3a3 center / cover no-repeat; box-shadow: 0 10px 18px rgba(45,31,94,.16); display: grid; place-items: center; color: #fff; font-size: 3rem; transition: transform .15s; }
.kh-tile:hover .kh-pic, .kh-tile:focus-visible .kh-pic { transform: scale(1.05); }
.kh-tile:active .kh-pic { transform: scale(.96); }
.kh-tile b { margin-top: 10px; font: 800 1.12rem "Baloo 2", system-ui, sans-serif; line-height: 1.05; }
.kh-count { position: absolute; top: 4%; right: 6%; min-width: 28px; height: 28px; border-radius: 999px; background: #ff5c9d; color: #fff; font: 800 .9rem "Baloo 2", system-ui, sans-serif; display: grid; place-items: center; padding: 0 7px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
@keyframes khFloat { 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .kh-blob { animation: none; } }
/* laptops and iPads held sideways (owner, 15 Oct 2026): the tiles fill the whole screen, wider than the page, two rows of up to
   6 (the second row in the middle) spread top to bottom, blobs as big as the screen allows. Phones and upright iPads: below */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-tab="home"] .member-main { margin-top: 16px; margin-bottom: 0; }
  .kid-home { --khw: min(calc(100vw - 64px), 1600px); width: var(--khw); margin-left: calc(50% - var(--khw) / 2); display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h, 80px) - 16px); padding-bottom: 20px; }
  .kh-hello { margin-bottom: 4px; }
  .kh-grid { --t: clamp(140px, min(calc((var(--khw) - 5 * 36px) / 6), calc((100svh - var(--nav-h, 80px)) * .4 - 70px)), 250px); flex: 1; display: flex; flex-wrap: wrap;
    justify-content: center; align-content: space-evenly; gap: 20px 36px; width: 100%; max-width: calc(6 * var(--t) + 5 * 36px); margin: 0 auto; }
  .kh-tile { width: var(--t); }
  .kh-tile b { font-size: 1.25rem; }
}
@media (max-width: 520px) { .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .kh-tile b { font-size: 1rem; } .kh-hello { margin-bottom: 14px; } }
/* inside a section: the purple Home button and the section's name */
.sec-bar { position: sticky; top: 72px; top: calc(72px + env(safe-area-inset-top)); top: var(--sec-top, var(--nav-h, calc(72px + env(safe-area-inset-top)))); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 0 12px; margin-bottom: 14px; background: #fff8ec; box-shadow: 0 calc(-1 * var(--sec-gap, 0px)) 0 #fff8ec, 0 2px 0 rgba(45,31,94,.06); }
.sec-bar[hidden] { display: none; }
.sec-home { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: #8b5cf6; color: #fff; padding: 8px 18px 8px 10px; min-height: 44px; font: 800 1.05rem "Baloo 2", system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #6a3fd6; }
.sec-home i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 1.05rem; }
.sec-name { display: inline-flex; align-items: center; gap: 8px; font: 800 1.2rem "Baloo 2", system-ui, sans-serif; color: #2d1f5e; }
.sec-name i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--c); }
@media (max-width: 520px) { .sec-name { font-size: 1.05rem; } }
/* iPad held upright (owner, 11 Oct 2026, P1 of mockups/home-portrait.html): 4 across, spread top to bottom so the screen is used */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  body[data-tab="home"] .member-main { margin-top: 12px; margin-bottom: 0; }
  .kid-home { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h, 110px) - 12px); padding-bottom: 20px; }
  .kh-hello { font-size: 2.2rem; margin-bottom: 4px; }
  /* 11 tiles = rows of 4, 4 and 3 (owner, 15 Oct 2026: no scrolling, the bubbles not too big): each tile is as big as fits 4 across
     and 3 rows down, and the last row sits in the middle */
  .kh-grid { --t: clamp(140px, min(calc((100vw - 32px - 3 * 30px) / 4), calc((100svh - var(--nav-h, 110px) - 230px) / 2.79)), 215px); flex: 1; display: flex; flex-wrap: wrap; justify-content: center;
    align-content: space-evenly; gap: 10px 30px; width: 100%; max-width: calc(4 * var(--t) + 3 * 30px); margin: 0 auto; }
  .kh-tile { width: var(--t); }
  .kh-tile b { font-size: 1.3rem; }
}

/* ============ Parent area (owner's picks, 15 Oct 2026) ============
   Sideways iPad and laptop: W1, every card on one screen (mockups/parent-wide2.html).
   Upright iPad: U2. Phones: P2, one tab at a time with a tab bar along the bottom (mockups/parent-phone-p2.html). */
.modal.as-page .dash-card { width: min(1500px, 100%); background: none; border: 0; padding: 0; }
.parent-mode .modal.as-page { padding: 10px 16px 18px; }
/* the top bar lines up with the cards (logo over the first card, buttons over the last), with a calmer logo */
.parent-mode .nav { padding-left: max(16px, calc((100% - 1500px) / 2), calc(env(safe-area-inset-left) + 8px)); padding-right: max(16px, calc((100% - 1500px) / 2), calc(env(safe-area-inset-right) + 8px)); }
.parent-mode .nav .logo-img { height: 64px; margin: 0; }
.dash-card > h2 { font-size: 1.5rem; margin: 0 0 10px; }
.dash { display: block; }
.dash-tabs { display: none; }
.pd-grid { display: grid; gap: 14px; }
.pd-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 2px solid #f0eafb; border-radius: 22px; padding: 14px 16px; box-shadow: 0 5px 14px rgba(45,31,94,.07); }
.pd-h { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 1.1rem var(--head); }
.pd-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--c, var(--purple)); color: #fff; font-size: 1rem; }
.pd-more { margin-left: auto; font: 800 .9rem var(--head); color: var(--purple); background: #f3eeff; border: 0; border-radius: 999px; padding: 3px 14px; cursor: pointer; }
.pd-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: 1rem; display: grid; place-items: center; cursor: pointer; }
.pd-sum { margin-left: auto; font: 800 .88rem var(--head); color: var(--ink-soft); }
.pd-dim { display: none; }
/* your child, at a glance */
.pd-kidrow { display: flex; align-items: center; gap: 12px; }
.pd-av { width: 64px; height: 64px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px #f4b8d0; }
.pd-av img, .pd-av svg { width: 100%; height: 100%; display: block; }
.pd-kidrow b { display: block; font: 800 1.35rem/1.15 var(--head); }
.pd-kidrow small { font-weight: 800; color: var(--ink-soft); }
.pd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pd-stats div { background: #f8f5ff; border-radius: 14px; padding: 8px 4px; text-align: center; }
.pd-stats b { display: block; font: 800 1.45rem/1 var(--head); color: var(--purple); }
.pd-stats small { font-weight: 800; font-size: .74rem; color: var(--ink-soft); }
.pd-kid .act-book { margin-top: 10px; font-size: .86rem; }
/* this week and what they did */
.pd-chart .act-chart { margin: 0; }
.pd-today .act-day { margin: 0 0 10px; break-inside: avoid; }
.pd-today .act-day h4 { margin: 0 0 2px; font-size: .92rem; }
.pd-today .act-item { padding: 5px 0; border-top: 1px solid #f3eefc; }
.pd-today .act-item:first-of-type { border-top: 0; }
.pd-today .act-item img { width: 36px; }
.pd-today .act-item b { font-size: .95rem; }
/* Reading time: T1, a dial with - and + */
.t1 { flex: 1; display: flex; align-items: center; gap: 16px; }
.t1-dial { --p: 0; width: 128px; height: 128px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--purple) calc(var(--p) * 1%), #efe8ff 0); transition: background .3s; }
.t1-dial > div { width: 100px; height: 100px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #fff; }
.t1-dial b { font: 800 2.1rem/1 var(--head); color: var(--purple); }
.t1-dial small { font-weight: 800; font-size: .72rem; color: var(--ink-soft); }
.t1-side { flex: 1; min-width: 0; }
.t1-used { margin: 0; font-weight: 800; font-size: .9rem; color: var(--ink-soft); }
.t1-used b { color: var(--ink); }
.t1-bar { height: 10px; margin: 6px 0 12px; overflow: hidden; border-radius: 9px; background: #efe8ff; }
.t1-bar i { display: block; height: 100%; border-radius: 9px; background: #22c55e; }
.t1-pm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t1-c { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); font: 800 1.5rem/1 var(--head); color: var(--ink); cursor: pointer; padding: 0; }
.t1-c:disabled { opacity: .35; cursor: default; }
.t1-pm .time-save { margin: 0 0 0 auto; }
/* Kids Login and this device */
.pd-meter { display: flex; gap: 6px; margin: 0 0 4px; }
.pd-meter i { flex: 1; height: 8px; border-radius: 9px; background: #efe8ff; }
.pd-meter i.on { background: var(--purple); }
.pd-dev { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #f3eefc; }
.pd-dev:first-child { border-top: 0; }
.pd-dev > div { flex: 1; min-width: 0; }
.pd-dev b { display: block; font: 800 .95rem var(--head); }
.pd-dev small { font-weight: 700; font-size: .8rem; color: var(--ink-soft); }
.pd-dev-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #efe8ff; color: var(--purple); font-size: 1.2rem; }
.pd-me { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #dcfce7; color: #15803d; font: 800 .62rem/1.6 var(--head); vertical-align: middle; }
.pd-rm { flex: none; padding: 3px 12px; font-size: .82rem; }
.pd-kl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: auto 0 0; padding-top: 8px; font-weight: 700; font-size: .84rem; color: var(--ink-soft); }
.pd-kl > i { color: var(--purple); }
.pd-kl .linkish { font-size: .84rem; }
.pd-lbl { margin: 12px 0 2px; font: 800 .8rem var(--head); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.pd-devices .reader-row { flex-wrap: nowrap; margin: 4px 0; }
.pd-devices .reader-row input { min-width: 96px; width: 100%; }
/* Subscription: PL1 */
.pd-plan .plan-now { margin: 0; max-width: none; border: 0; box-shadow: none; border-radius: 16px; padding: 12px 14px; color: #fff; background: linear-gradient(140deg, #8b5cf6, #ec4899); }
.pd-plan .plan-tag { position: static; display: inline-block; border: 0; background: rgba(255,255,255,.25); font-size: .72rem; padding: 0 9px; }
.pd-plan .plan-now h3 { font-size: 1.3rem; margin: 4px 0 2px; }
.pd-plan .plan-now h3 i { color: #fff; }
.pd-plan .plan-now p { color: #fff; opacity: .92; font-weight: 800; font-size: .86rem; }
.pd-plan .plan-bar { border-color: #fff; background: rgba(255,255,255,.3); }
.pd-plan .plan-bar i { background: #fff; }
.pd-ticks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
.pd-ticks li { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: .86rem; }
.pd-ticks i { color: #22c55e; }
.pd-plan #accPlan { max-width: none; }
.pd-plan #accPlan .plan-go { margin-top: 10px; font-size: 1rem; padding: 8px 14px; }
.pd-plan-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pd-plan .plan-manage { margin: 0; }
.pd-plan .plan-links { margin: 0; text-align: left; font-size: .86rem; }
.pd-plan #accPlanMsg:empty { display: none; }
/* iPad and laptop. Big enough screens get every card on one screen (W1 sideways / laptop, U2 upright);
   smaller windows (a narrow or short browser window) get the same cards in two columns and the page scrolls,
   so nothing is ever squashed or drawn on top of something else. */
@media (min-width: 700px) {
  .pd-phone-only { display: none; }
  .dash-ipad { display: none !important; }   /* the Kids Login card has the same Turn on */
  .pd-grid { gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 220px auto 460px; grid-template-areas: "kid time" "week week" "dev plan" "today today"; }
  .pd-kid { grid-area: kid; } .pd-time { grid-area: time; } .pd-week { grid-area: week; } .pd-today { grid-area: today; } .pd-devices { grid-area: dev; } .pd-plan { grid-area: plan; }
  .pd-card { padding: 12px 15px; }
  .pd-h { margin-bottom: 8px; }
  .pd-devices .pd-lbl { display: none; }
  .pd-dev { padding: 4px 0; }
  .pd-dev-ic { width: 34px; height: 34px; font-size: 1.1rem; }
  .pd-devices #readerNames { margin-top: 4px; padding-top: 6px; border-top: 1px solid #f3eefc; }
  .t1-pm .time-save { font-size: 1rem; padding: 6px 16px; }
  .pd-today { contain: size; }   /* the list scrolls inside its card instead of stretching the page */
  .pd-chart { flex: 1; min-height: 0; }
  .pd-chart .act-chart { height: 100%; box-sizing: border-box; }
  .pd-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
  /* the activity list in two columns when it runs across the screen */
  .pd-today .act { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; align-content: start; }
  .pd-today .act-day { display: contents; }
  .pd-today .act-day h4, .pd-today .act-more, .pd-today .act-empty { grid-column: 1 / -1; }
  .pd-today .act-day h4 { margin-top: 8px; }
  .pd-today .act-item { border-top: 1px solid #f3eefc !important; }
  /* "Your child" opens as a pop-up from Edit */
  .pd-child { display: none; }
  .dash.editing .pd-child { display: flex; position: fixed; z-index: 120; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 32px)); max-height: calc(var(--vh, 100vh) - 40px); overflow: auto; }
  .dash.editing .pd-dim { display: block; position: fixed; inset: 0; z-index: 119; background: rgba(45,31,94,.5); }
}
/* one screen, no scrolling: the cards fill the window */
@media (min-width: 1150px) and (min-height: 730px) and (orientation: landscape), (min-width: 700px) and (min-height: 860px) and (orientation: portrait) {
  .modal.as-page .dash-card { display: flex; flex-direction: column; height: max(620px, calc(var(--vh, 100vh) - var(--nav-h, 80px) - 28px)); }   /* (never so short the chart gets squashed) */
  .dash:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pd-grid { flex: 1; min-height: 0; grid-template-rows: auto 220px auto minmax(0, 1fr); }
}
@media (min-width: 1150px) and (min-height: 730px) and (orientation: landscape) {   /* W1 */
  .dash-card > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the cards say it all; kept for screen readers */
  .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "kid time today" "week week today" "dev plan today"; }
  .pd-today .act { display: block; }
  .pd-today .act-day { display: block; }
  .pd-today .act-day h4 { margin-top: 0; }
}
/* phones: P2, one tab at a time and the tab bar along the bottom */
@media (max-width: 699px) {
  .dash { padding-bottom: 86px; }
  .dash-tabs { display: flex; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 2px solid #eee6fb; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .dash-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 66px; padding: 0; border: 0; background: none; font: 800 .72rem var(--head); color: var(--ink-soft); cursor: pointer; }
  .dash-tabs button i { font-size: 1.45rem; padding: 3px 14px; border-radius: 12px; }
  .dash-tabs button.on { color: var(--purple); }
  .dash-tabs button.on i { background: #efe8ff; }
  .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pd-card { display: none; }
  .dash[data-tab="activity"] [data-tab="activity"], .dash[data-tab="children"] [data-tab="children"], .dash[data-tab="time"] [data-tab="time"],
  .dash[data-tab="plan"] [data-tab="plan"], .dash[data-tab="code"] [data-tab="code"] { display: flex; }
  .pd-x { display: none; }
  .t1 { flex-direction: column; gap: 14px; }
  .t1-dial { width: 180px; height: 180px; }
  .t1-dial > div { width: 146px; height: 146px; }
  .t1-dial b { font-size: 3rem; }
  .t1-dial small { font-size: .85rem; }
  .t1-side { width: 100%; }
  .t1-pm { justify-content: center; gap: 14px; }
  .t1-c { width: 52px; height: 52px; font-size: 1.8rem; }
  .t1-pm .time-save { flex-basis: 100%; margin: 6px 0 0; justify-content: center; }
  .pd-ticks { grid-template-columns: 1fr 1fr; }
  .pd-plan-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .pd-plan .plan-links { text-align: center; }
  .pd-kl { margin-top: 10px; }
}

/* Brainy Play on phones held sideways: the board fills the screen under the top bar (it was a tiny 4:3 box) */
@media (orientation: landscape) and (max-height: 540px) {
  .brp-board { width: 100%; aspect-ratio: auto; height: calc(100svh - var(--sec-top, 120px) - 14px); min-height: 230px; max-height: none; }
}

/* Phones (owner, 16 Oct 2026: the titles took too much room): the top row already names the section, so the big heading
   that repeats it is hidden and the line under it is smaller. "Pick a ..." headings stay: they tell the child what to do. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 540px) {
  .lib-sub { font-size: .92rem; line-height: 1.35; margin: 0 auto 14px; max-width: 34em; }
}
/* Every screen (owner, 16 Oct 2026: the title and the line under it wasted room in every section): the section row on top
   already names the section, so the repeated title and its line are gone. Notes that matter (free trial, join) still show. */
.dup-title, .dup-title + .lib-sub:not(.keep) { display: none; }
/* phones held sideways: a slimmer top bar and section row, so the content gets the screen */
@media (orientation: landscape) and (max-height: 540px) {
  .member-page .nav { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .member-page .nav .logo-img { height: 46px; margin: 0; }
  .member-main { margin-top: 10px; }
  .sec-bar { padding: 4px 0 6px; margin-bottom: 8px; }
  .sec-home { min-height: 36px; padding: 4px 14px 4px 6px; font-size: .95rem; }
  .sec-home i { width: 26px; height: 26px; }
  .sec-name { font-size: 1.05rem; } .sec-name i { width: 28px; height: 28px; }
  .pin-title { font-size: 1.2rem; padding: 4px 0 6px; margin-bottom: 8px; }
  .pin-title .ico3d { display: none; }
  .brp-board { height: calc(100svh - var(--sec-top, 90px) - 86px); }
}
/* My Creations with nothing in it yet (owner, 16 Oct 2026): the owner's pictures in one white card.
   Upright screens: the picture on top (E1). Sideways screens: the picture beside the words (E2). */
.mc-none { background: #fff; border-radius: 28px; box-shadow: 0 10px 30px rgba(45,31,94,.08); text-align: center; padding: 22px 20px 30px; }
.mc-none img { display: block; width: min(260px, 62vw); height: auto; aspect-ratio: 1; margin: 0 auto 4px; mix-blend-mode: multiply; }
.mc-none b { display: block; font-family: var(--head); font-size: 1.7rem; line-height: 1.15; color: var(--ink); }
.mc-none p { font-weight: 800; font-size: 1.08rem; color: var(--ink-soft, #5b4f8a); margin: 6px 0 18px; }
@media (orientation: landscape) {
  .mc-none { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 24px; text-align: left; padding: 18px 34px 18px 18px; max-width: 900px; margin: 0 auto; }
  .mc-none img { width: clamp(150px, 26vw, 300px); margin: 0; }
}
@media (orientation: landscape) and (max-height: 540px) {   /* phones held sideways */
  .mc-none img { width: 140px; }
  .mc-none b { font-size: 1.35rem; }
  .mc-none p { font-size: .95rem; margin-bottom: 12px; }
}
@media (max-width: 420px) { .mc-none b { font-size: 1.4rem; } .mc-none p { font-size: .98rem; } }
.mc-none[hidden] { display: none; }
.mc-none p i { color: #ff5fa2; }
/* Bedtime Audiobooks (owner, 16 Oct 2026, L2 of mockups/play-all.html): a friendly line on the left, a small Play all pill on the right */
.aud-actions { justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 22px; }
.aud-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aud-line > i { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(140deg, #a78bfa, #6d4bd1); }
.aud-line b { font-family: var(--head); font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.aud-play { flex: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--head); font-weight: 800; font-size: 1.05rem; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 5px 16px 5px 5px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.aud-play i { width: 32px; height: 32px; border-radius: 50%; background: var(--pink, #ff5fa2); color: #fff; display: grid; place-items: center; font-size: .95rem; }
.aud-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
@media (max-width: 560px) {
  .aud-line > i { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 12px; }
  .aud-line b { font-size: 1.02rem; }
  .aud-play { font-size: .95rem; padding-right: 12px; }
  .aud-play i { width: 28px; height: 28px; }
}
/* sideways iPads and laptops (owner, 16 Oct 2026: the card sat too high): the card fills the room under the section row,
   with the picture and words bigger and centred in it. (library.js sets --mc-room to the exact space left.) */
@media (orientation: landscape) and (min-height: 541px) {
  .mc-none { min-height: var(--mc-room, 420px); grid-template-columns: auto auto; align-content: center; justify-content: center; column-gap: clamp(24px, 4vw, 60px); max-width: 1100px; }
  .mc-none img { width: clamp(200px, 30vw, 380px); }
  .mc-none b { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
  .mc-none p { font-size: clamp(1.08rem, 1.5vw, 1.3rem); margin-bottom: 22px; }
}

/* Delete my account (17 Oct 2026, mockups/delete-account.html) */
.del-link { color: #e5484d !important; font-weight: 800; }
.del-pop { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 16px; background: rgba(45,31,94,.45); overflow-y: auto; }
.del-pop[hidden] { display: none; }
.del-card { width: min(420px, 100%); background: #fff; border-radius: 26px; padding: 24px 22px 20px; text-align: center; box-shadow: 0 18px 40px rgba(20,10,50,.35); }
.del-ico { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; font-size: 2rem; background: #ffe4e6; color: #e5484d; }
.del-ico.ok { background: #dcfce7; color: #16a34a; }
.del-card h2 { font-family: var(--head); font-size: 1.5rem; margin: 0 0 6px; color: var(--ink); }
.del-card p { font-weight: 700; color: var(--ink-soft, #5b4f8a); margin: 0 0 12px; }
.del-list { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; font-weight: 700; color: var(--ink); }
.del-list li { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.del-list i { color: #e5484d; font-size: 1.1rem; }
.del-lbl { display: block; text-align: left; font-weight: 800; font-size: .9rem; margin: 8px 0 4px; color: var(--ink); }
.del-in { width: 100%; font: inherit; font-weight: 700; padding: 10px 14px; border: 2.5px solid #d9d1f5; border-radius: 14px; }
.del-in:focus { outline: none; border-color: #8b5cf6; }
.del-err { color: #e5484d !important; min-height: 1.2em; margin: 8px 0 0 !important; }
.del-btns { display: grid; gap: 10px; margin-top: 10px; }
.del-btns button { font: inherit; font-family: var(--head); font-weight: 800; font-size: 1.1rem; border-radius: 999px; padding: 10px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.del-keep { background: #fff; color: var(--ink); }
.del-go { background: #e5484d; color: #fff; }
.del-done { background: var(--pink, #ff5fa2); color: #fff; }
.del-btns button:disabled { opacity: .6; }

/* ===== Big Explorer home (ages 7 to 10, owner, 17 Oct 2026): the usual home, with two cards above the tiles ===== */
.kb { position: relative; width: min(100%, 1060px); margin: 0 auto 22px; }
.kb[hidden] { display: none; }
.kb-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
/* soft lavender (owner, 17 Oct 2026: the purple-to-blue was "too dark and awkward"; C1 in mockups/up-next-colors.html) */
.kb-cont { display: flex; align-items: center; gap: 18px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 3px solid #e2d6ff; border-radius: 26px; padding: 16px 18px;
  background: linear-gradient(120deg, #efe7ff, #f8f3ff); }
.kb-cont img { width: 96px; aspect-ratio: 1100 / 1423; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 14px rgba(45,31,94,.22); flex: none; transform: rotate(-3deg); }
.kb-cont-txt { min-width: 0; display: block; }
.kb-cont small { font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: #7c3aed; }
.kb-cont b { display: block; font: 800 clamp(1.2rem, 2.1vw, 1.55rem)/1.1 "Baloo 2", system-ui, sans-serif; margin: 3px 0; }
.kb-cont-sub { font-weight: 800; color: var(--ink-soft, #5b4f8a); }
.kb-bar { display: block; height: 9px; border-radius: 999px; background: #e2d6ff; overflow: hidden; margin: 9px 0 12px; }
.kb-bar i { display: block; height: 100%; background: #8b5cf6; border-radius: 999px; }
.kb-gap { display: block; height: 12px; }
.kb-go { display: inline-flex; align-items: center; gap: 8px; font: 800 1rem "Baloo 2", system-ui, sans-serif; color: #fff; background: #8b5cf6; padding: 7px 18px; border-radius: 999px; box-shadow: 0 4px 0 #6d28d9; }
.kb-cont:active { transform: translateY(2px); }
.kb-miss { background: #fff; border-radius: 26px; padding: 14px 18px; box-shadow: 0 10px 24px rgba(45,31,94,.08); color: var(--ink); }
.kb-miss h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 1.2rem "Baloo 2", system-ui, sans-serif; }
.kb-miss h2 i { color: #f97316; }
.kb-miss h2 span { margin-left: auto; font-size: .88rem; padding: 2px 10px; border-radius: 999px; background: #f3effc; }
.kb-mi { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-weight: 800; border-top: 2px dashed #ece6fb; }
.kb-mi i { font-size: 1.3rem; color: #b4a6ea; }
.kb-mi em { margin-left: auto; font-style: normal; color: #d97706; }
.kb-mi.done i { color: #16a34a; } .kb-mi.done span { opacity: .6; text-decoration: line-through; }
@media (max-width: 820px) { .kb-row { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .kb-cont { gap: 14px; padding: 14px; } .kb-cont img { width: 76px; } }

/* Parent area → the child's Home look (Automatic / Little Explorer / Big Explorer) */
.kid-looks { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-looks button { font: 800 .95rem var(--head); color: var(--ink); background: #fff; border: 3px solid #d9d1f5; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.kid-looks button.on { background: #ede4ff; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.kid-looks-note { margin: 6px 0 0; font-weight: 700; font-size: .85rem; color: var(--ink-soft, #5b4f8a); }
/* the two cards take about 190px, so on iPads and laptops the tiles shrink to keep the home on one screen */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="big"] .kh-grid { --t: clamp(120px, min(calc((var(--khw) - 5 * 36px) / 6), calc((100svh - var(--nav-h, 80px) - 240px) * .4 - 64px)), 230px); gap: 8px 36px; }
  body[data-look="big"] .kb { margin-bottom: 10px; }
}
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  body[data-look="big"] .kh-grid { --t: clamp(120px, min(calc((100vw - 32px - 3 * 30px) / 4), calc((100svh - var(--nav-h, 110px) - 230px - 300px) / 2.79)), 200px); }
  body[data-look="big"] .kb { margin-bottom: 8px; }
}

/* ===== Big Explorer dashboard, side panel and bottom bar (owner, 17 Oct 2026, mockups/big-kid-dashboard.html) ===== */
body[data-look="big"] .kh-hello, body[data-look="big"] #khGrid, body[data-look="big"] .kh-dots { display: none; }
body[data-look="big"] .kid-home { width: auto; margin-left: 0; min-height: 0; display: block; }
.kb-side, .kb-tabbar { display: none; }
.kd-top { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.kd-top h1 { flex: 1; min-width: 0; margin: 0; font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.05 "Baloo 2", system-ui, sans-serif; color: var(--ink); }
.kd-top h1 small { display: block; font: 800 1rem Nunito, system-ui, sans-serif; color: var(--ink-soft, #5b4f8a); margin-bottom: 2px; }
.kd-stat { display: inline-flex; align-items: center; gap: 8px; font: 800 1.05rem "Baloo 2", system-ui, sans-serif; background: #fff; border-radius: 999px; padding: 6px 16px; box-shadow: 0 4px 12px rgba(45,31,94,.08); }
.kd-stat i { color: #f97316; }
.kd-h { margin: 20px 0 10px; font: 800 1.3rem "Baloo 2", system-ui, sans-serif; color: var(--ink); }
.kd-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Today's affirmation: the owner's card, always shown whole (2:3, words baked in), soft sea-green like the cards */
.kd-aff { display: flex; align-items: center; gap: 28px; margin-top: 18px; padding: 14px 28px 14px 14px; border-radius: 28px; background: linear-gradient(120deg, #e8faf4, #f0fdfa); box-shadow: inset 0 0 0 3px #bdeee0; }
.kd-aff-pic { height: 100%; max-height: 640px; min-height: 0; aspect-ratio: 2 / 3; flex: none; border: 0; padding: 0; cursor: zoom-in; background: none; border-radius: 16px; }
.kd-aff-pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; box-shadow: 0 8px 18px rgba(16,90,80,.18); display: block; }
.kd-aff-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.kd-aff-txt small { font: 900 .8rem Nunito, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #0f766e; }
.kd-aff-txt b { font: 800 clamp(1.5rem, 3vw, 2.4rem)/1.15 "Baloo 2", system-ui, sans-serif; color: var(--ink); }
.kd-aff-say { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: #14b8a6; color: #fff; font: 800 1.1rem "Baloo 2", system-ui, sans-serif; border-radius: 999px; padding: 9px 20px; box-shadow: 0 4px 0 #0f766e; }
.kd-aff-say:active { transform: translateY(2px); box-shadow: 0 2px 0 #0f766e; }
.kd-aff-pop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(20,60,60,.5); }
.kd-aff-big { background: #fff; border-radius: 30px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 24px 50px rgba(10,40,40,.35); }
.kd-aff-big img { height: min(76svh, 900px); max-width: calc(100vw - 68px); aspect-ratio: 2 / 3; object-fit: contain; border-radius: 18px; }
.kd-aff-row { display: flex; gap: 12px; }
.kd-aff-done { border: 0; cursor: pointer; background: #8b5cf6; color: #fff; font: 800 1.1rem "Baloo 2", system-ui, sans-serif; border-radius: 999px; padding: 9px 26px; box-shadow: 0 4px 0 #6d28d9; }
.kd-jt { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 0; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 6px 14px rgba(45,31,94,.07); min-width: 0; }
.kd-jt img { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex: none; }
.kd-jt b { display: block; font: 800 1.02rem/1.15 "Baloo 2", system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kd-jt small { font-weight: 800; color: var(--ink-soft, #5b4f8a); font-size: .8rem; }
.kd-jt span { min-width: 0; }
.kd-grp h1 { margin: 0 0 14px; font: 800 2rem "Baloo 2", system-ui, sans-serif; color: var(--ink); }
.kd-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kd-bt { position: relative; aspect-ratio: 1.15; border: 0; padding: 0; cursor: pointer; border-radius: 26px; overflow: hidden; background: center / cover no-repeat; box-shadow: 0 10px 22px rgba(45,31,94,.14); text-align: left; }
.kd-bt::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(30,20,70,.85)); }
.kd-bt b { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; font: 800 1.4rem "Baloo 2", system-ui, sans-serif; }
.kd-bt.nopic { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); display: grid; place-items: center; }   /* no picture yet: colour and icon */
.kd-bt.nopic > i { font-size: clamp(3rem, 8vw, 5.5rem); color: rgba(255,255,255,.9); margin-bottom: 1.4rem; }
:is(.kd-jt, .kd-bt, .kb-cont):active { transform: scale(.98); }

/* how they reach the sections (owner, 17 Oct 2026, L1 of mockups/big-kid-landscape.html): the floating bottom bar on the
   dashboard and the group pages, on every screen */
.kb-tabbar { display: none; }
body[data-look="big"][data-tab="home"] .kb-tabbar { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; position: fixed; z-index: 30;
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 72px; background: #fff; border-radius: 24px; box-shadow: 0 10px 26px rgba(45,31,94,.18); }
body[data-look="big"][data-tab="home"] .member-main { padding-bottom: 96px; }
@media not ((orientation: landscape) and (min-width: 1000px)) { .kd-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="big"][data-tab="home"] .kb-tabbar { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
}
.kb-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; font: 800 .85rem "Baloo 2", system-ui, sans-serif; color: #8b80b6; -webkit-tap-highlight-color: transparent; }
.kb-tab i { font-size: 1.55rem; padding: 2px 12px; border-radius: 12px; }
.kb-tab.on { color: #7c3aed; } .kb-tab.on i { background: #f1ebff; }
/* the owner's clay icons in the bar (23 Oct 2026): a picture each, sized with the bar */
.kb-tab i img { display: block; width: 1.45em; height: 1.45em; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(45,31,94,.15)); }
.kb-tab:not(.on) i img { opacity: .9; }
@media (max-width: 560px) {
  .kd-big { grid-template-columns: 1fr 1fr; gap: 10px; } .kd-bt b { font-size: 1.1rem; }
  .kd-jt img { width: 46px; height: 46px; }
}

/* sideways iPad / laptop (owner, 17 Oct 2026: things slid under the bottom bar and the page scrolled): the dashboard and
   the group pages are sized to the space above the bar, so everything shows at once */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="big"][data-tab="home"] .member-main { margin-bottom: 0; padding-bottom: 0; }
  body[data-look="big"] .kid-home { padding: 0; }
  body[data-look="big"][data-tab="home"] #khBig { height: var(--home-h, calc(100svh - var(--nav-h, 80px) - 18px - 104px - env(safe-area-inset-bottom))); display: flex; flex-direction: column; overflow: hidden; }
  #khBig .kd-top { flex: none; margin-bottom: 12px; }
  #khBig .kd-aff { flex: 1 1 200px; min-height: 190px; margin-top: 16px; }   /* always after Jump back in (owner, 17 Oct 2026) */
  #khBig .kb-row { flex: none; }
  #khBig .kd-h { flex: none; margin: 14px 0 8px; }
  #khBig .kd-jump { flex: none; }
  #khBig .kd-grp { height: 100%; display: flex; flex-direction: column; }
  #khBig .kd-grp h1 { flex: none; margin-bottom: 12px; }
  #khBig .kd-big { flex: 1; min-height: 0; grid-auto-rows: 1fr; }
  #khBig .kd-bt { aspect-ratio: auto; height: auto; min-height: 0; }
  #khBig .kd-big[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #khBig .kd-big[data-n="1"] { grid-template-columns: 1fr; }
}
/* sideways iPad in Safari (owner, 17 Oct 2026: Safari's bars leave less height, New stories was squeezed to a strip):
   a more compact top part, today's affirmation never smaller than a real card; if the screen is still too short, only the
   dashboard itself scrolls, above the bar */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="big"][data-tab="home"] #khBig { overflow-y: auto; scrollbar-width: none; }
  #khBig::-webkit-scrollbar { display: none; }
  #khBig .kd-top h1 { font-size: 1.75rem; } #khBig .kd-top h1 small { font-size: .9rem; }
  #khBig .kb-cont { padding: 12px 16px; } #khBig .kb-cont img { width: 78px; }
  #khBig .kb-cont b { font-size: 1.35rem; }
  #khBig .kb-miss { padding: 10px 16px; } #khBig .kb-mi { padding: 5px 0; }
  #khBig .kd-h { margin: 10px 0 6px; font-size: 1.15rem; }
  #khBig .kd-jt { padding: 7px; } #khBig .kd-jt img { width: 44px; height: 44px; border-radius: 12px; }
}
/* upright iPad (owner, 17 Oct 2026: "make the cards cute like landscape"): the group pages use smaller cards, three
   across for three sections, two across for four, and stay above the bar */
@media (orientation: portrait) and (min-width: 600px) {
  #khBig .kd-big { gap: 16px; }
  #khBig .kd-big[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #khBig .kd-big[data-n="3"] .kd-bt { aspect-ratio: .78; }
  #khBig .kd-big[data-n="4"] .kd-bt { aspect-ratio: 1.3; }
  #khBig .kd-bt b { font-size: 1.25rem; }
}
/* sideways iPad / laptop (owner, 17 Oct 2026: "make the panel sideways"): the same bar stands upright as a floating pill
   on the left, so the dashboard and group pages get the whole height; it sits in the middle of the space under the top bar */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="big"][data-tab="home"] .kb-tabbar { left: 16px; right: auto; top: calc(var(--nav-h, 80px) + (100svh - var(--nav-h, 80px)) / 2); bottom: auto; transform: translateY(-50%); width: 92px; height: auto;
    grid-template-columns: 1fr; grid-auto-rows: 78px; padding: 8px 0; border-radius: 28px; }
  body[data-look="big"][data-tab="home"] .member-main { width: min(1180px, 100% - 160px); margin-left: calc(124px + (100% - 124px - min(1180px, 100% - 160px)) / 2); }
  body[data-look="big"][data-tab="home"] #khBig { height: var(--home-h, calc(100svh - var(--nav-h, 80px) - 18px - 20px - env(safe-area-inset-bottom))); }
  .kb-tabbar .kb-tab { font-size: .9rem; }
}
/* upright iPad and phone (owner, 17 Oct 2026: "make the menu bar smaller like the landscape"): a compact pill in the middle */
@media not ((orientation: landscape) and (min-width: 1000px)) {
  body[data-look="big"][data-tab="home"] .kb-tabbar { left: 50%; right: auto; width: min(440px, 100% - 24px); transform: translateX(-50%); height: 68px; border-radius: 26px; }
  .kb-tabbar .kb-tab { font-size: .82rem; } .kb-tabbar .kb-tab i { font-size: 1.4rem; }
}
/* bigger icons in the bar (owner, 17 Oct 2026) */
.kb-tabbar .kb-tab i { font-size: 1.85rem; }
@media not ((orientation: landscape) and (min-width: 1000px)) { body[data-look="big"][data-tab="home"] .kb-tabbar { height: 74px; } .kb-tabbar .kb-tab i { font-size: 1.75rem; } }
/* phones: the card above its words */
@media (max-width: 560px) {
  .kd-aff { flex-direction: column; padding: 14px; gap: 12px; text-align: center; margin-bottom: 20px; }
  .kd-aff-pic { height: 300px; } .kd-aff-txt { align-items: center; } .kd-aff-txt b { font-size: 1.45rem; }
}
/* upright iPad (owner, 17 Oct 2026: "make sure the home is not scrolling"): the dashboard fits between the top bar and the
   bottom bar, a little lower so the logo never sits on the greeting; today's affirmation takes what's left */
@media (orientation: portrait) and (min-width: 600px) {
  body[data-look="big"][data-tab="home"] .member-main { margin-top: 30px; margin-bottom: 0; padding-bottom: 0; }
  body[data-look="big"] .kid-home { padding: 0; min-height: 0; }
  body[data-look="big"][data-tab="home"] #khBig { height: var(--home-h, calc(100svh - var(--nav-h, 80px) - 30px - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); display: flex; flex-direction: column; overflow: hidden auto; scrollbar-width: none; }   /* (the app on iPad also has the clock strip at the top: owner, 23 Oct 2026, the card ran under the bar) */
  #khBig .kd-top { flex: none; margin-bottom: 12px; } #khBig .kd-top h1 { font-size: 1.8rem; }
  #khBig .kd-aff { flex: 1 1 200px; min-height: 190px; }
  #khBig .kb-row { flex: none; gap: 12px; }
  #khBig .kb-cont { padding: 12px 16px; } #khBig .kb-cont img { width: 78px; } #khBig .kb-cont b { font-size: 1.35rem; }
  #khBig .kb-miss { padding: 10px 16px; } #khBig .kb-mi { padding: 5px 0; }
  #khBig .kd-h { flex: none; margin: 12px 0 8px; font-size: 1.15rem; }
  #khBig .kd-jump { flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #khBig .kd-jt:nth-child(n+4) { display: none; }
  #khBig .kd-jt { padding: 7px; } #khBig .kd-jt img { width: 44px; height: 44px; border-radius: 12px; }
  #khBig .kd-grp { height: 100%; }
}

/* Big Explorer group pages (owner, 23 Oct 2026: T1 of mockups/big-kid-sections-title.html, "only pic and title"): the
   first section is the big card, the others sit beside it. The picture fills each card (no frame) and the name sits on a
   soft fade of the section's colour in big white sticker letters. Four sections sideways make an even 2 x 2, so no picture
   is cut to a thin strip. It fills the space above the bar on iPads and computers; phones get a grid that scrolls. */
.kg { display: grid; gap: 16px; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(var(--rest), minmax(0, 1fr)); }
.kg-card { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; border-radius: 26px; min-height: 0; min-width: 0; overflow: hidden;
  background: var(--c); box-shadow: 0 10px 24px rgba(40,20,90,.22); }
.kg-card:active { transform: scale(.985); }
.kg-pic { position: absolute; inset: 0; display: block; }
.kg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-ico { width: 100%; height: 100%; display: grid; place-items: center; font-size: clamp(3rem, 8vmin, 5rem); color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c)); }
.kg-card::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--c) 62%, transparent)); pointer-events: none; }   /* a short, light fade: the picture keeps its colours (owner: pictures looked light and dull on the iPad) */
.kg-card > b { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 12px; text-align: left; color: #fff; font: 800 clamp(1.3rem, 2.6vmin, 1.9rem)/1.05 "Baloo 2", system-ui, sans-serif;
  --o: color-mix(in srgb, var(--c) 70%, #000);
  text-shadow: 3px 3px 0 var(--o), -2px -2px 0 var(--o), 2px -2px 0 var(--o), -2px 2px 0 var(--o), 0 6px 14px rgba(0,0,0,.35); }
.kg-hero { grid-row: 1 / -1; } .kg-hero > b { left: 24px; bottom: 20px; font-size: clamp(1.8rem, 4vmin, 2.8rem); }
.kg[data-n="1"] { grid-template-columns: 1fr; }
.kg[data-n="2"] .kg-card > b { left: 24px; bottom: 20px; font-size: clamp(1.8rem, 4vmin, 2.8rem); }   /* two cards (Learn): both names as big as the first */
/* sizing: the group page fills the space above the bar */
#khBig .kd-grp { display: flex; flex-direction: column; min-height: 0; }
#khBig .kd-grp h1 { flex: none; }
#khBig .kg { flex: 1; min-height: 0; }
/* (owner, 23 Oct 2026) the group page a little narrower than the screen: sideways a bit smaller and centred, upright the
   cards reach down to just above the bar with a clear gap between them */
@media (min-width: 600px) {   /* sideways: a little smaller and centred (owner: "landscape looks lovely, do not disturb") */
  #khBig .kd-grp { width: 88%; margin: 0 auto; }
  #khBig .kg { flex: 0 1 auto; height: 86%; }
}
@media (orientation: portrait) and (min-width: 600px) {   /* upright iPad: the cards reach down to just above the bar, with a clear gap */
  #khBig .kd-grp { width: 92%; }
  #khBig .kg { flex: 1; height: auto; gap: 26px; padding-bottom: 10px; }
}
/* four or five sections on a wide screen: an even grid, so no picture becomes a strip */
@media (orientation: landscape) and (min-width: 600px) {
  .kg[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .kg[data-n="4"] .kg-hero { grid-row: auto; }
  .kg[data-n="5"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; } .kg[data-n="5"] .kg-hero { grid-row: 1 / -1; }
}
/* upright iPad: the big card goes across the top, the rest side by side underneath */
@media (orientation: portrait) and (min-width: 600px) {
  .kg { grid-template-columns: repeat(var(--rest), minmax(0, 1fr)); grid-template-rows: 1.25fr 1fr; }
  .kg-hero { grid-row: auto; grid-column: 1 / -1; }
  .kg-card:not(.kg-hero) > b { left: 12px; right: 12px; font-size: clamp(1.1rem, 2.4vmin, 1.5rem); }
  .kg[data-n="1"] { grid-template-rows: 1fr; }
}
/* phones: the big card across the top, then two pictures to a row (the page scrolls) */
@media (max-width: 599px) {
  .kg { grid-template-columns: 1fr 1fr; grid-template-rows: 220px; grid-auto-rows: 160px; gap: 12px; }
  .kg-hero { grid-row: auto; grid-column: 1 / -1; }
  .kg-card:not(.kg-hero) > b { left: 10px; right: 10px; bottom: 10px; font-size: 1.15rem; }
  #khBig .kg { flex: none; }
}

/* today's affirmation on the Little Explorer home (owner, 23 Oct 2026: Y1 of mockups/little-affirmation.html): a sunny strip under
   "What shall we do today?", the bubbles a little smaller so the home still fits one screen */
.kh-aff { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; width: min(100%, 900px); margin: 6px auto 10px; padding: 12px 26px 12px 12px; border-radius: 26px;
  background: linear-gradient(120deg, #e8faf4, #f0fdfa); box-shadow: inset 0 0 0 3px #bdeee0; }
.kh-aff[hidden] { display: none; }
.kh-aff-pic { flex: none; height: 130px; aspect-ratio: 2 / 3; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 14px; }
.kh-aff-pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 18px rgba(16,90,80,.2); }
.kh-aff-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.kh-aff-txt small { font: 900 .8rem Nunito, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #0f766e; }
.kh-aff-txt b { font: 800 clamp(1.35rem, 3vw, 2rem)/1.1 "Baloo 2", system-ui, sans-serif; color: var(--ink); }
@media (max-width: 520px) { .kh-aff { gap: 14px; padding: 10px 14px 10px 10px; margin-bottom: 16px; } .kh-aff-pic { height: 100px; } .kh-aff-txt b { font-size: 1.25rem; } .kh-aff-txt .kd-aff-say { font-size: 1rem; padding: 7px 14px; } }
/* sideways iPad (owner, 23 Oct 2026: "landscape we do L3", Y3 of the mockup): a tall card on the left, the bubbles four across on the right;
   upright keeps the strip */
@media (orientation: landscape) and (min-width: 1000px) {
  body[data-look="little"] .kid-home { display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 28px; }
  body[data-look="little"] .kh-hello { grid-column: 1 / -1; }
  body[data-look="little"] .kh-aff { grid-column: 1; grid-row: 2; align-self: center; width: 100%; margin: 0; flex-direction: column; justify-content: center; gap: 12px;
    padding: 16px 14px 18px; text-align: center; background: linear-gradient(160deg, #e8faf4, #f0fdfa); }
  body[data-look="little"] .kh-aff-pic { height: min(330px, calc(100svh - var(--nav-h, 80px) - 330px)); min-height: 180px; }
  body[data-look="little"] .kh-aff-txt { align-items: center; } body[data-look="little"] .kh-aff-txt b { font-size: 1.45rem; }
  body[data-look="little"] .kh-grid { grid-column: 2; grid-row: 2; --t: clamp(100px, min(calc((var(--khw) - 298px - (var(--kc, 4) - 1) * 30px) / var(--kc, 4)), calc((100svh - var(--nav-h, 80px) - 120px) / (var(--kr, 3) * 1.15))), 200px);
    max-width: calc(var(--kc, 4) * var(--t) + (var(--kc, 4) - 1) * 30px); gap: 6px 30px; }   /* --kc, --kr: columns and rows for however many sections there are (library.js) */
}
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {
  body[data-look="little"] .kh-grid { --t: clamp(110px, min(calc((100vw - 60px - 3 * 30px) / 4), calc((100svh - var(--nav-h, 110px) - 230px - 160px) / (var(--kr, 3) * .93 + (var(--kr, 3) - 3) * .36))), 205px); }   /* --kr: rows of 4 (library.js) */
}
/* phones held sideways: a slimmer strip, so the bubbles start sooner */
@media (orientation: landscape) and (max-height: 540px) { .kh-aff { padding: 8px 18px 8px 8px; gap: 14px; margin: 2px auto 8px; } .kh-aff-pic { height: 78px; } .kh-aff-txt { gap: 4px; } .kh-aff-txt b { font-size: 1.2rem; } .kh-aff-txt .kd-aff-say { font-size: .95rem; padding: 5px 14px; } }
/* Learning Lab (23 Oct 2026): the little ones' page has a back arrow by its title; the older bar's Learn button shows its icon
   (until the owner's clay one arrives) and the bar is a little wider for six buttons */
.kh-labback { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 6px 20px 6px 6px; font: 800 1.15rem "Baloo 2", system-ui, sans-serif; color: #6d28d9; box-shadow: 0 4px 0 #ddd6fe; }
.kh-labback i { width: 40px; height: 40px; border-radius: 50%; background: #8b5cf6; color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
/* (24 Oct 2026, option B of mockups/little-learning-lab.html) the Learning Lab page: one big coloured card for each section,
   one under the other when upright, side by side when sideways; sized so the page never scrolls */
.kid-home.lab .kh-hello { grid-column: 1 / -1; }
.kid-home.lab .kh-grid { --lp: clamp(80px, calc((100svh - var(--nav-h, 100px) - 260px) / var(--lc, 3) - 40px), 210px); display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; align-content: start; gap: 22px; width: 100%; max-width: none; margin-top: 12px; }
.kh-labcard { display: flex; align-items: center; gap: 24px; width: 100%; border: 0; cursor: pointer; text-align: left; border-radius: 32px; padding: 16px 26px 16px 16px; background: var(--bg); box-shadow: 0 7px 0 var(--sh); font-family: inherit; color: #2d1f5e; transition: transform .15s; }
.kh-labcard:hover { transform: translateY(-3px); } .kh-labcard:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--sh); }
.kh-labpic { flex: none; width: var(--lp); height: var(--lp); border-radius: 50%; border: 7px solid #fff; background: #fde7f3 center / cover; box-shadow: 0 6px 16px rgba(0,0,0,.12); display: grid; place-items: center; overflow: hidden; }
.kh-abc { display: flex; gap: 4px; } .kh-abc em { font: 800 calc(var(--lp) * .2) "Baloo 2", system-ui, sans-serif; font-style: normal; color: #fff; border-radius: 12px; padding: 0 .22em; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.kh-abc em:nth-child(1) { background: #f472b6; } .kh-abc em:nth-child(2) { background: #8b5cf6; } .kh-abc em:nth-child(3) { background: #22c55e; }
.kh-labtxt { flex: 1; display: grid; gap: 6px; } .kh-labtxt b { font: 800 clamp(1.5rem, 3.4vw, 2.2rem) "Baloo 2", system-ui, sans-serif; line-height: 1; } .kh-labtxt small { font: 700 clamp(.95rem, 2vw, 1.2rem) Nunito, system-ui, sans-serif; color: #5b4f8a; }
.kh-labgo { flex: none; width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.8rem; color: var(--ink); }
@media (orientation: landscape) {
  .kid-home.lab .kh-grid { --lp: clamp(96px, min(calc(100svh - var(--nav-h, 100px) - 360px), calc((100vw - 140px) / var(--lc, 3) - 90px)), 250px); grid-template-columns: repeat(var(--lc, 3), minmax(0, 330px)); margin-top: 10px; }
  .kh-labcard { flex-direction: column; text-align: center; padding: 26px 18px 24px; gap: 14px; } .kh-labtxt { justify-items: center; } .kh-labgo { display: none; }
}
@media (max-width: 520px) { .kh-labback { position: static; transform: none; margin-right: 8px; } .kh-labgo { display: none; } .kh-labcard { gap: 16px; padding: 12px 16px 12px 12px; } }
.kb-tab i .kb-ico { display: block; font-size: 1.3em; line-height: 1.12; color: #8b5cf6; }
@media not ((orientation: landscape) and (min-width: 1000px)) { body[data-look="big"][data-tab="home"] .kb-tabbar { width: min(520px, 100% - 24px); } }
.kid-home.lab .kh-grid { grid-column: 1 / -1; align-content: center; }   /* the Learning Lab page: its bubbles across the whole width */