/* The Bible reader's Kids mode (reader/kids.js): a font for early readers, bigger text, verse
   numbers in colored bubbles, the story's people beside their names, the big stories' pictures,
   and a bouncy ring */
html.br-kids :is(.br-body, .br-inline) .br-p, html.br-kids :is(.br-body, .br-inline) .br-q, html.br-kids :is(.br-body, .br-inline) .br-d { font-family: "Andika", var(--br-font, Georgia, serif) !important; font-size-adjust: none; }
html.br-kids :is(.br-sheet, .br-inline-wrap).size-sm .br-p, html.br-kids :is(.br-sheet, .br-inline-wrap).size-sm .br-q { font-size: 19px; }
html.br-kids :is(.br-sheet, .br-inline-wrap).size-md .br-p, html.br-kids :is(.br-sheet, .br-inline-wrap).size-md .br-q { font-size: 22px; }
html.br-kids :is(.br-sheet, .br-inline-wrap).size-lg .br-p, html.br-kids :is(.br-sheet, .br-inline-wrap).size-lg .br-q { font-size: 25px; }
html.br-kids :is(.br-sheet, .br-inline-wrap).size-xl .br-p, html.br-kids :is(.br-sheet, .br-inline-wrap).size-xl .br-q { font-size: 29px; }
html.br-kids :is(.br-sheet, .br-inline-wrap).size-xxl .br-p, html.br-kids :is(.br-sheet, .br-inline-wrap).size-xxl .br-q { font-size: 34px; }
html.br-kids :is(.br-body, .br-inline) .br-p { line-height: calc(1.8 * var(--br-lh, 1)); }
/* verse numbers: colored bubbles, round and round the rainbow */
html.br-kids :is(.br-body, .br-inline) sup.br-n { display: inline-grid; place-items: center; min-width: 1.55em; height: 1.55em; margin-right: 0.28em; padding: 0 0.32em; border-radius: 999px; background: var(--kn, #E4574E); color: #fff; font: 800 0.6em/1 -apple-system, "Segoe UI", system-ui, sans-serif; vertical-align: 0.3em; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
html.br-kids :is(.br-body, .br-inline) .br-verse:nth-of-type(5n+2) sup.br-n { --kn: #F28C28; }
html.br-kids :is(.br-body, .br-inline) .br-verse:nth-of-type(5n+3) sup.br-n { --kn: #3DAA5C; }
html.br-kids :is(.br-body, .br-inline) .br-verse:nth-of-type(5n+4) sup.br-n { --kn: #3B82C4; }
html.br-kids :is(.br-body, .br-inline) .br-verse:nth-of-type(5n+5) sup.br-n { --kn: #8E5CC4; }
/* headings like a storybook's */
html.br-kids :is(.br-body, .br-inline) .br-h { font: 700 18px/1.3 "Andika", -apple-system, system-ui, sans-serif; color: var(--coral); letter-spacing: 0; }
html.br-kids :is(.br-body, .br-inline) .br-h::before { content: '★ '; color: #F2B233; }
html.br-kids .br-bignum { font-family: "Andika", Georgia, serif; color: #F28C28; }

/* the people, beside their names: little bobbing faces */
.kd-face { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin: 0 0.12em 0 0.2em; padding: 0; overflow: hidden; vertical-align: -0.45em; border: 2px solid #fff; border-radius: 50%; background: #FFE7B3; box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.35); cursor: pointer; animation: kd-bob 2.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.kd-face svg, .kd-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-face:nth-of-type(2n) { animation-delay: -1.1s; }
@keyframes kd-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
.kd-face:active { transform: scale(0.9); }
html:not(.br-kids) .kd-face { display: none; }

/* a big story's picture, at the top of its chapter */
.kd-scene { clear: both; margin: 4px 0 18px; }
.kd-scene button { display: block; width: 100%; padding: 0; border: none; border-radius: 20px; overflow: hidden; background: #1A1614; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55); cursor: pointer; text-align: left; }
.kd-art { position: relative; display: block; aspect-ratio: 16 / 10; }
.kd-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kd-scene figcaption { display: block; padding: 10px 14px 12px; background: #FFF6E0; color: #3A2A1E; font: 700 16px/1.3 "Andika", -apple-system, system-ui, sans-serif; }
html:not(.br-kids) .kd-scene { display: none; }

/* a person's card */
.kd-pop { position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.35); opacity: 0; transition: opacity 0.2s ease; }
.kd-pop[hidden] { display: none; }
.kd-pop.open { opacity: 1; }
.kd-card { position: relative; width: min(360px, 100%); margin-bottom: max(20px, env(safe-area-inset-bottom)); padding: 58px 20px 18px; border-radius: 26px; background: #FFF9EC; color: #3A2A1E; text-align: center; font-family: "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55); transform: translateY(40px) scale(0.9); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kd-pop.open .kd-card { transform: none; }
.kd-big { position: absolute; left: 50%; top: -46px; width: 96px; height: 96px; margin-left: -48px; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: #FFE7B3; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.45); animation: kd-hello 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kd-big svg, .kd-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes kd-hello { 0% { transform: scale(0.3) rotate(-20deg); } 60% { transform: scale(1.1) rotate(6deg); } 100% { transform: none; } }
.kd-card h3 { margin: 0 0 6px; font-size: 22px; }
.kd-card p { margin: 0 0 14px; font-size: 17px; line-height: 1.45; }
.kd-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kd-acts button { padding: 10px 16px; border: none; border-radius: 999px; background: #3B82C4; color: #fff; font: 700 15px "Andika", -apple-system, system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #2A6399; }
.kd-acts button + button { background: #3DAA5C; box-shadow: 0 4px 0 #2C8246; }
.kd-acts button:active { transform: translateY(2px); box-shadow: none; }
.kd-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 50%; background: #F3E6C8; color: #3A2A1E; font-size: 22px; line-height: 1; cursor: pointer; }

/* the ring, for kids: bright, big, and bouncy */
.wr-ring.is-kids .wr-word { background: #F28C28; color: #fff; font-family: "Andika", -apple-system, system-ui, sans-serif; font-size: 17px; }
.wr-ring.is-kids .wr-b { width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 3px solid #fff; background: var(--kb, #E4574E); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14), 0 12px 24px -10px rgba(0, 0, 0, 0.5); transition: transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1) var(--d), opacity 0.2s ease var(--d); }
.wr-ring.is-kids .wr-b svg { width: 24px; height: 24px; }
.wr-ring.is-kids .wr-b:nth-of-type(2) { --kb: #F28C28; } .wr-ring.is-kids .wr-b:nth-of-type(3) { --kb: #3DAA5C; } .wr-ring.is-kids .wr-b:nth-of-type(4) { --kb: #3B82C4; } .wr-ring.is-kids .wr-b:nth-of-type(5) { --kb: #8E5CC4; } .wr-ring.is-kids .wr-b:nth-of-type(6) { --kb: #E0559B; } .wr-ring.is-kids .wr-b:nth-of-type(7) { --kb: #2BA3A8; }
.wr-ring.is-kids .wr-b span { background: #fff; color: #3A2A1E; font-family: "Andika", -apple-system, system-ui, sans-serif; font-size: 12px; }
.wr-ring.is-kids.open .wr-b { animation: kd-wiggle 2.8s ease-in-out calc(var(--d) + 0.6s) infinite; }
@keyframes kd-wiggle { 0%, 88%, 100% { rotate: 0deg; } 92% { rotate: -8deg; } 96% { rotate: 8deg; } }
.wr-card.is-kids { font-family: "Andika", -apple-system, system-ui, sans-serif; }
.wr-card.is-kids .kd-def { margin: 6px 0 10px; font-size: 18px; line-height: 1.45; color: var(--ink); }
.wr-card.is-kids h4 { font-size: 22px; color: #F28C28; }
@media (prefers-reduced-motion: reduce) { .kd-face, .kd-big, .wr-ring.is-kids.open .wr-b { animation: none; } .kd-card, .wr-ring.is-kids .wr-b { transition: none; } }

/* ---- cards: the verse's, the chapter's, drawing, learning by heart, questions, the sticker book */
.kd-card { max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.kd-card.is-verse, .kd-card.is-chapter, .kd-card.is-draw, .kd-card.is-learn, .kd-card.is-quiz, .kd-card.is-book { padding-top: 22px; }
.kd-badge { display: inline-grid; place-items: center; min-width: 54px; height: 54px; margin: 0 auto 6px; padding: 0 10px; border-radius: 999px; background: var(--kb); color: #fff; font: 800 24px "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15); animation: kd-hello 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kd-sub { margin: 0 0 10px !important; font-size: 15px !important; color: #7A6A58; }
.kd-verse { margin: 4px 0 14px !important; padding: 12px 14px; border-radius: 16px; background: #FFF1CF; font-size: 19px !important; line-height: 1.5 !important; text-align: left; }
.kd-ref { margin: -6px 0 12px !important; font-weight: 700; color: #F28C28; }
.kd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.kd-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: none; border-radius: 18px; background: var(--kb); color: #fff; font: 700 15px/1.2 "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-btn span { font-size: 26px; line-height: 1; }
.kd-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.kd-grown { margin-top: 12px; padding: 6px 12px; border: 1px dashed #CDB98F; border-radius: 999px; background: none; color: #7A6A58; font: 600 13px -apple-system, system-ui, sans-serif; cursor: pointer; }
/* drawing */
.kd-pad { overflow: hidden; border: 3px solid #F3E6C8; border-radius: 16px; background: #fff; touch-action: none; }
.kd-pad canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.kd-colors { display: flex; justify-content: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.kd-colors button { width: 32px; height: 32px; padding: 0; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: pointer; }
.kd-colors button.is-on { transform: scale(1.2); box-shadow: 0 0 0 3px #3A2A1E; }
/* learning by heart */
.kd-blank { display: inline-block; color: #8E5CC4; letter-spacing: 0.08em; font-weight: 700; }
/* questions */
.kd-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.kd-ans { padding: 14px; border: none; border-radius: 18px; background: var(--kb); color: #fff; font: 700 17px/1.3 "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 0.2s, opacity 0.2s; }
.kd-ans.is-right { background: #3DAA5C; transform: scale(1.04); }
.kd-ans.is-right::after { content: ' ✓'; }
.kd-ans.is-wrong { animation: kd-shake 0.4s; }
.kd-ans.is-dim:not(.is-wrong) { opacity: 0.45; }
@keyframes kd-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* the sticker book */
.kd-card.is-book h4 { margin: 14px 0 8px; font-size: 16px; color: #F28C28; text-align: left; }
.kd-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kd-tally span { display: flex; flex-direction: column; padding: 8px 4px; border-radius: 14px; background: #FFF1CF; font-size: 11.5px; color: #7A6A58; }
.kd-tally b { font-size: 22px; color: #3A2A1E; }
.kd-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.kd-sticker { display: flex; flex-direction: column; gap: 4px; padding: 5px; border: 2px dashed #E4D3AE; border-radius: 14px; background: #FFF6E0; cursor: pointer; }
.kd-sticker small { font: 600 10.5px/1.2 "Andika", -apple-system, system-ui, sans-serif; color: #7A6A58; }
.kd-sticker-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #EFE3C6; color: #C9B48A; font: 800 22px "Andika", sans-serif; }
.kd-sticker-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kd-sticker.is-got { border-style: solid; border-color: #F2B233; background: #FFF1CF; transform: rotate(-2deg); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3); }
.kd-sticker.is-got:nth-child(2n) { transform: rotate(2deg); }
.kd-chips { display: flex; flex-wrap: wrap; gap: 6px; text-align: left; }
.kd-chips span { padding: 4px 10px; border-radius: 999px; background: #E3F1FF; color: #2A6399; font-size: 13px; font-weight: 700; }

/* ---- in the chapter: the word hunt, act it out, and the end */
.kd-hunt { position: sticky; top: calc(var(--br-head-h, 64px) + 6px); z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 16px; background: #E3F7E9; color: #245C35; font: 600 15px "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.4); }
.kd-hunt mark { padding: 0 6px; border-radius: 6px; background: #FFE27A; color: #3A2A1E; font-weight: 800; }
.kd-hunt-n { margin-left: auto; color: #F2B233; font-size: 20px; letter-spacing: 2px; }
.kd-found { border-radius: 6px; background: #FFE27A; box-shadow: 0 0 0 3px #FFE27A; animation: kd-found 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes kd-found { 0% { background: #F2B233; box-shadow: 0 0 0 12px rgba(242, 178, 51, 0); } }
.kd-act { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 14px; border-radius: 20px; background: #F3E8FF; color: #4A2E75; font-family: "Andika", -apple-system, system-ui, sans-serif; }
.kd-act > span { font-size: 34px; }
.kd-act b { display: block; font-size: 17px; }
.kd-act p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; }
.kd-act button { flex: none; padding: 10px 14px; border: none; border-radius: 999px; background: #8E5CC4; color: #fff; font: 700 14px "Andika", sans-serif; box-shadow: 0 4px 0 #6A3F99; cursor: pointer; }
.kd-end { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 10px; }
.kd-bigbtn { padding: 16px; border: none; border-radius: 22px; background: var(--kb); color: #fff; font: 800 20px "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18); cursor: pointer; }
.kd-bigbtn.is-done { opacity: 0.75; }
html:not(.br-kids) .kd-hunt, html:not(.br-kids) .kd-act, html:not(.br-kids) .kd-end { display: none; }

/* ---- hooray: confetti, stars, and a word of cheer */
.kd-confetti { position: fixed; inset: 0; z-index: 2147483400; pointer-events: none; overflow: hidden; }
.kd-confetti i { position: absolute; width: 9px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px; animation: kd-fly 1.3s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
.kd-confetti i.is-star { width: auto; height: auto; font-size: 20px; font-style: normal; }
@keyframes kd-fly { 0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--r)) scale(1); opacity: 0; } }
.kd-cheer { position: fixed; left: 50%; top: 38%; z-index: 2147483401; padding: 14px 22px; border-radius: 999px; background: #fff; color: #3A2A1E; font: 800 22px "Andika", -apple-system, system-ui, sans-serif; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); animation: kd-cheer 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; pointer-events: none; white-space: nowrap; }
@keyframes kd-cheer { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 25%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; } }

/* ---- a page turned, for kids: the back of the page is a rainbow of stars, and the new page lands with a bounce */
html.br-kids .br-peel-back { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0 3px, transparent 4px) 0 0 / 46px 46px, radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px) 0 0 / 34px 34px, linear-gradient(160deg, #FF9AA2, #FFDAC1 25%, #FFF5BA 45%, #B5EAD7 65%, #A0C4FF 85%, #CDB4F6) !important; }
html.br-kids .br-peel-shade { opacity: 0.6; }
.br-body.kd-boing { animation: kd-boing 0.55s cubic-bezier(0.34, 1.7, 0.64, 1); transform-origin: 50% 20%; }
@keyframes kd-boing { 0% { transform: scale(0.96) rotate(-0.6deg); } 60% { transform: scale(1.01) rotate(0.3deg); } 100% { transform: none; } }
/* the Bible Scroll, over the reader when it's opened from it */
html.kd-scroll-over .sb { z-index: 2147483150; }
@media (prefers-reduced-motion: reduce) { .kd-confetti, .kd-cheer { display: none; } .br-body.kd-boing, .kd-badge, .kd-found, .kd-ans.is-wrong { animation: none; } }
/* the ring's cards (Where else?, the big dictionary) in the kids' style too */
.wr-card.is-kids { border-radius: 24px; background: #FFF9EC; color: #3A2A1E; }
.wr-card.is-kids button:not(.wr-cx):not(.wr-say) { border-radius: 999px; background: #3B82C4; color: #fff; border: none; font-family: "Andika", -apple-system, system-ui, sans-serif; font-weight: 700; box-shadow: 0 3px 0 #2A6399; }
.wr-card.is-kids .wr-big { color: #F28C28; font-family: "Andika", sans-serif; }

/* ---- the sticker book's tabs, and My page */
.kd-tabs { display: flex; gap: 6px; margin: 4px 0 12px; padding: 4px; border-radius: 999px; background: #F3E6C8; }
.kd-tabs button { flex: 1; padding: 9px 8px; border: none; border-radius: 999px; background: none; color: #7A6A58; font: 700 15px "Andika", -apple-system, system-ui, sans-serif; cursor: pointer; }
.kd-tabs button.is-on { background: #fff; color: #3A2A1E; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.kd-chips button { padding: 5px 11px; border: none; border-radius: 999px; background: #E3F1FF; color: #2A6399; font: 700 13px "Andika", -apple-system, system-ui, sans-serif; cursor: pointer; }
.kd-sticker:disabled { cursor: default; opacity: 0.7; }
.kd-sticker-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kd-board { position: relative; width: 100%; aspect-ratio: 3 / 4; margin: 4px 0 8px; overflow: hidden; border: 3px solid #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px -12px rgba(0, 0, 0, 0.4); touch-action: none; }
.kd-bi { position: absolute; transform: rotate(var(--r)) scale(var(--s)); transform-origin: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.kd-bi.is-sel { outline: 3px dashed #F28C28; outline-offset: 4px; border-radius: 8px; }
.kd-bi-art { position: relative; display: block; width: 110px; aspect-ratio: 16 / 10; overflow: hidden; border: 5px solid #fff; border-radius: 10px; background: #1A1614; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.kd-bi-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kd-bi img { display: block; width: 110px; border: 5px solid #fff; border-radius: 10px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); pointer-events: none; }
.kd-bi-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #F28C28; color: #fff; font: 700 15px "Andika", -apple-system, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.4); }
.kd-bi-chip.is-verse { background: #3B82C4; }
.kd-bi-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.kd-bi-tools[hidden] { display: none; }
.kd-bi-tools .kd-btn { padding: 8px 4px; font-size: 12px; }
.kd-bi-tools .kd-btn span { font-size: 20px; }

/* ---- the person's card: the whole of them, standing on the card (not a circle that cuts off heads) */
.kd-big { top: -78px; width: 124px; height: 140px; margin-left: -62px; overflow: visible; border: none; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25)); }
.kd-big svg, .kd-big img { object-fit: contain; }
.kd-card:not(.is-verse):not(.is-chapter):not(.is-draw):not(.is-learn):not(.is-quiz):not(.is-book):not(.is-holy) { padding-top: 70px; margin-top: 70px; }
/* the faces in the text: a little bigger, the head up close */
.kd-face { width: 2.35em; height: 2.35em; vertical-align: -0.6em; }
/* Jesus, God, the Holy Spirit: a crown, a light, a dove (symbols, never a picture) */
.kd-holy { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin: 0 0.1em 0 0.15em; padding: 0; vertical-align: -0.28em; border: none; border-radius: 50%; background: #FFF4D6; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35); cursor: pointer; animation: kd-glow 3s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.kd-holy svg { width: 82%; height: 82%; }
.kd-holy.is-spirit { background: #E3F1FF; }
@keyframes kd-glow { 0%, 100% { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(242, 178, 51, 0.25), 0 2px 6px -2px rgba(0, 0, 0, 0.35); } }
html:not(.br-kids) .kd-holy { display: none; }
.kd-card.is-holy { padding-top: 24px; }
.kd-sym { width: 84px; height: 84px; margin: 0 auto 8px; padding: 12px; border-radius: 50%; background: #FFF4D6; box-shadow: 0 0 0 8px rgba(242, 178, 51, 0.18); animation: kd-hello 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kd-sym svg { width: 100%; height: 100%; }
/* the sticker book: an empty book says how to fill it; the stories still to find, folded away */
.kd-empty { margin: 8px 0 4px !important; padding: 14px; border-radius: 16px; background: #FFF1CF; font-size: 16px !important; }
.kd-togo { margin-top: 14px; text-align: left; }
.kd-togo summary { padding: 10px 12px; border-radius: 14px; background: #F3E6C8; color: #7A6A58; font: 700 15px "Andika", -apple-system, system-ui, sans-serif; cursor: pointer; }
.kd-togo .kd-stickers { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .kd-holy, .kd-sym { animation: none; } }
/* no double-tap zoom on Kids mode's cards and the sticker book, as in the reader */
.kd-pop, .kd-pop *, .kd-confetti, .kd-cheer { touch-action: manipulation; }
.kd-pad, .kd-pad canvas, .kd-board, .kd-bi { touch-action: none; }

/* ---- the sticker book fills the screen: title and tabs on top; on My page, the page takes what's
   left, so every button fits without scrolling; on My stickers, just the stickers scroll */
.kd-pop.is-full { align-items: stretch; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.kd-pop.is-full .kd-card.is-book { display: flex; flex-direction: column; width: min(620px, 100%); height: 100%; max-height: none; margin: 0 auto; padding: 16px 14px 12px; overflow: hidden; }
.kd-card.is-book h3 { flex: none; margin: 0 0 2px; }
.kd-card.is-book .kd-tabs { flex: none; margin-bottom: 8px; }
.kd-card.is-book .kd-hint { flex: none; margin: 0 0 6px !important; font-size: 13.5px !important; }
.kd-bookbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 4px; }
.kd-boardwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.kd-boardwrap .kd-board { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 3 / 4; margin: 0; }
.kd-card.is-book .kd-bi-tools, .kd-card.is-book .kd-colors, .kd-card.is-book > .kd-grid { flex: none; }
.kd-card.is-book .kd-colors { margin: 0 0 8px; }
.kd-card.is-book .kd-colors button { width: 28px; height: 28px; }
.kd-card.is-book > .kd-grid { margin: 0; }
.kd-card.is-book > .kd-grid .kd-btn { flex-direction: row; justify-content: center; gap: 8px; padding: 11px 8px; }
.kd-card.is-book > .kd-grid .kd-btn span { font-size: 20px; }

/* ---- the little characters, standing in the line (the whole of them, no circle), bobbing; a tap
   and they do their act (tree/cartoon.css), then step into the spotlight */
.kd-face { width: 2.5em; height: 2.85em; margin: 0 0.05em 0 0.12em; vertical-align: -0.9em; overflow: visible; border: none; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22)); }
.kd-face svg { width: 100%; height: 100%; object-fit: contain; overflow: visible; }
.kd-face.is-acting { animation: none; }
/* the character's card: a stage with a spotlight, the character in the light, doing their act */
.kd-card.is-person { margin-top: 0 !important; padding: 0 0 18px !important; overflow: hidden; }
.kd-stage { position: relative; display: block; height: 190px; margin-bottom: 12px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255, 226, 150, 0.35), transparent 70%), linear-gradient(180deg, #2B2340, #3E3159 70%, #4A3A66); }
.kd-beam { position: absolute; left: 50%; top: -10%; width: 260px; height: 110%; transform: translateX(-50%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 244, 214, 0.75), rgba(255, 238, 196, 0.2) 70%, rgba(255, 236, 190, 0.05)); opacity: 0; animation: ks-beam-on 0.9s ease 0.1s both; }
.kd-floor { position: absolute; left: 50%; bottom: 10px; width: 150px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 238, 196, 0.6), transparent 70%); }
.kd-star { position: absolute; left: 50%; bottom: 14px; width: 128px; height: 150px; margin-left: -64px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); animation: kd-step 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
.kd-star svg { width: 100%; height: 100%; overflow: visible; }
@keyframes kd-step { 0% { transform: translateY(40px) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.kd-card.is-person h3, .kd-card.is-person p, .kd-card.is-person .kd-acts { padding: 0 18px; }
.kd-card.is-person .kd-x { z-index: 2; background: rgba(255, 255, 255, 0.85); }
.kd-acts button[data-kd-act="stickperson"] { background: #F2B233; box-shadow: 0 4px 0 #C48C1C; }
.kd-acts button.is-done { opacity: 0.75; }
/* in the sticker book, and on the page */
.kd-sticker-art.is-person { background: linear-gradient(180deg, #3E3159, #4A3A66); }
.kd-sticker-art.is-person svg { position: absolute; left: 10%; top: 4%; width: 80%; height: 96%; }
.kd-bi-person { display: block; width: 90px; height: 104px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.kd-bi-person svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kd-beam, .kd-star { animation: none; opacity: 1; } }

/* back to the chapter, from the family tree */

/* ---- for kids, the auto-scroll button is a star: a tap and it grows, stars shoot out, and the
   sticker book opens (the grown-ups' shortcuts and tips aren't needed) */
html.br-kids .as-ctl { display: none !important; }
.kd-starbtn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2147483050; display: none; width: 66px; height: 66px; padding: 6px; border: 4px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C8, #FFD23F 60%, #F2A800); box-shadow: 0 6px 0 #D08A00, 0 14px 26px -8px rgba(0, 0, 0, 0.45); cursor: pointer; animation: kd-twirl 4s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
html.br-kids.br-open .kd-starbtn { display: grid; place-items: center; }
html.br-kids.br-open.br-listening .kd-starbtn { bottom: calc(150px + env(safe-area-inset-bottom)); }
.kd-starbtn svg { width: 100%; height: 100%; }
@keyframes kd-twirl { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }
.kd-starbtn.is-go { animation: kd-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes kd-grow { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.7) rotate(-20deg); box-shadow: 0 0 0 16px rgba(255, 210, 63, 0.35), 0 0 60px 20px rgba(255, 210, 63, 0.5); } 100% { transform: scale(1) rotate(360deg); } }
.kd-shoot { position: fixed; z-index: 2147483100; width: 34px; height: 4px; margin: -2px 0 0 -17px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 210, 63, 0), #FFD23F 70%, #fff); transform: rotate(var(--rot)); pointer-events: none; animation: kd-shoot 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.kd-shoot::after { content: '★'; position: absolute; right: -9px; top: -9px; color: #FFD23F; font-size: 16px; font-style: normal; text-shadow: 0 0 8px #fff; }
@keyframes kd-shoot { 0% { transform: translate(0, 0) rotate(var(--rot)) scaleX(0.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kd-starbtn, .kd-starbtn.is-go { animation: none; } .kd-shoot { display: none; } }

/* ---- taking stickers out of the book */
.kd-editrow { display: flex; align-items: center; gap: 10px; }
.kd-editrow .kd-sub { flex: 1; margin: 6px 0 !important; text-align: left; }
.kd-edit { flex: none; padding: 7px 12px; border: 2px solid #E4D3AE; border-radius: 999px; background: #fff; color: #3A2A1E; font: 700 13px "Andika", -apple-system, system-ui, sans-serif; cursor: pointer; }
.kd-edit.is-on { border-color: #3DAA5C; background: #3DAA5C; color: #fff; }
.kd-bookbody.is-edit .kd-sticker.is-got, .kd-bookbody.is-edit .kd-chips button { position: relative; animation: kd-jiggle 0.35s ease-in-out infinite alternate; }
.kd-bookbody.is-edit .kd-sticker.is-got::after, .kd-bookbody.is-edit .kd-chips button::after { content: '✕'; position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: #E4574E; color: #fff; font: 800 12px -apple-system, system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
@keyframes kd-jiggle { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .kd-bookbody.is-edit .kd-sticker.is-got, .kd-bookbody.is-edit .kd-chips button { animation: none; } }

/* ---- the Study pane, the kids' way: Pictures (in place of the commentary), More verses, Compare;
   round, bright tabs, and cards that follow the reading (reader/kids.js pictures) */
.br-lbl-kids { display: none; }
html.br-kids .bs-tab[data-bs-tab="notes"] .bs-tl-name, html.br-kids .bs-tab[data-bs-tab="notes"] .br-lbl-short { display: none !important; }
html.br-kids .bs-tab[data-bs-tab="notes"] .br-lbl-kids { display: inline; }
html.br-kids .bs-tab[data-bs-tab="notes"] .br-lbl-kids::before { content: '🎨 '; }
html.br-kids .bs-pane { font-family: "Andika", -apple-system, system-ui, sans-serif; }
html.br-kids .bs-tabs { gap: 6px; padding: 8px 10px 6px; }
html.br-kids .bs-tab { flex: 1; padding: 8px 6px; border: 2.5px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--kt, #E4574E) 13%, var(--bg-raised)); color: color-mix(in srgb, var(--kt, #E4574E) 75%, var(--ink)); font: 700 14px "Andika", -apple-system, system-ui, sans-serif; box-shadow: none; transition: transform 0.2s cubic-bezier(0.34, 1.7, 0.64, 1); }
html.br-kids .bs-tab[data-bs-tab="xrefs"] { --kt: #3B82C4; }
html.br-kids .bs-tab[data-bs-tab="compare"] { --kt: #3DAA5C; }
html.br-kids .bs-tab.is-on { background: var(--kt, #E4574E); border-color: #fff; color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--kt, #E4574E) 55%, #000); transform: translateY(-1px); }
html.br-kids .bs-tab:active { transform: scale(0.94); }
html.br-kids .bs-seg { font-family: "Andika", Georgia, serif; font-size: 17px; border-bottom: 2px dotted color-mix(in srgb, var(--coral) 30%, var(--rule)); }
html.br-kids .bs-v { min-width: 28px; border-radius: 999px; background: #E4574E; color: #fff; font: 700 12.5px "Andika", -apple-system, sans-serif; }
html.br-kids .bs-seg:nth-child(5n+2) .bs-v { background: #F28C28; } html.br-kids .bs-seg:nth-child(5n+3) .bs-v { background: #3DAA5C; }
html.br-kids .bs-seg:nth-child(5n+4) .bs-v { background: #3B82C4; } html.br-kids .bs-seg:nth-child(5n+5) .bs-v { background: #8E5CC4; }
html.br-kids .bs-xref { border-radius: 999px; font-family: "Andika", -apple-system, sans-serif; font-weight: 700; }
/* the Pictures: one card for each thing to see, do, or meet */
.kp-seg { border-bottom: none !important; padding-bottom: 6px; }
.kp-cards { display: grid; gap: 10px; }
.kp-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 3px solid #fff; border-radius: 20px; background: color-mix(in srgb, var(--kc, #F2B233) 14%, var(--bg-raised)); color: var(--ink); font-family: "Andika", -apple-system, system-ui, sans-serif; text-align: left; box-shadow: 0 5px 0 color-mix(in srgb, var(--kc, #F2B233) 35%, transparent), 0 10px 20px -14px rgba(0, 0, 0, 0.4); animation: kp-in 0.45s cubic-bezier(0.34, 1.6, 0.64, 1) both; }
button.kp-card { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.18s cubic-bezier(0.34, 1.7, 0.64, 1); }
button.kp-card:active { transform: scale(0.96); }
@keyframes kp-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.kp-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-t b { font-size: 17px; line-height: 1.2; color: color-mix(in srgb, var(--kc, #F2B233) 55%, var(--ink)); }
.kp-t small { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.kp-t em { margin-top: 2px; font-style: normal; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--kc, #F2B233) 70%, var(--ink)); }
.kp-emoji { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; font-size: 26px; }
.kp-scene { --kc: #3B82C4; flex-direction: column; align-items: stretch; max-width: 380px; padding: 8px; }
.kp-art { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 8 / 5; background: #CFE3F2; }
.kp-art svg { display: block; width: 100%; height: 100%; }
.kp-scene .kp-t { padding: 2px 4px 4px; }
.kp-person { --kc: #E0559B; }
.kp-face { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: #fff; border: 3px solid color-mix(in srgb, var(--kc) 50%, #fff); }
.kp-face > * { width: 100%; height: 100%; }
.kp-face img, .kp-face svg { width: 100%; height: 100%; object-fit: cover; }
.kp-holy { --kc: #F2B233; }
.kp-sym { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.kp-sym svg { width: 32px; height: 32px; }
.kp-hunt { --kc: #3DAA5C; }
.kp-act { --kc: #8E5CC4; }
.kp-empty { font-family: "Andika", -apple-system, sans-serif; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .kp-card { animation: none; } }

/* ---- the ring's buttons, in Kids mode: squish when tapped; held, a balloon that pops (reader/kids.js) */
.wr-ring.is-kids .wr-b { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
.wr-ring.is-kids.open .wr-b { transform: translate(var(--x), var(--y)) scale(var(--inf, 1), var(--infy, 1)); }
.wr-ring.is-kids .wr-b.is-blowing { transition: none; z-index: 3; filter: brightness(1.08) saturate(1.15); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.12), inset 6px 6px 0 rgba(255, 255, 255, 0.35), 0 12px 24px -10px rgba(0, 0, 0, 0.5); }
.wr-ring.is-kids .wr-b.is-blowing span { opacity: 0; }
.wr-ring.is-kids .wr-b.is-squish { animation: wr-squish 0.42s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes wr-squish { 0% { scale: 1; } 30% { scale: 1.18 0.78; } 55% { scale: 0.9 1.12; } 80% { scale: 1.05 0.96; } 100% { scale: 1; } }
.wr-ring.is-kids .wr-b.is-deflate { animation: wr-deflate 0.65s ease-out; }
@keyframes wr-deflate { 0% { scale: 1.35; rotate: 0deg; } 20% { scale: 1.1; rotate: -14deg; } 40% { scale: 0.92; rotate: 11deg; } 60% { rotate: -7deg; } 80% { rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } }
.wr-ring.is-kids .wr-b.is-popped { animation: wr-regrow 0.9s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes wr-regrow { 0%, 35% { scale: 0; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.wr-pop { position: fixed; z-index: 2147483200; width: 0; height: 0; pointer-events: none; }
.wr-pop b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 900 30px/1 "Andika", -apple-system, system-ui, sans-serif; color: #fff; -webkit-text-stroke: 2px #E4574E; paint-order: stroke; text-shadow: 0 3px 0 #E4574E; animation: wr-popword 0.9s cubic-bezier(0.34, 1.8, 0.5, 1) forwards; }
@keyframes wr-popword { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 35% { transform: translate(-50%, -70%) scale(1.4); } 100% { transform: translate(-50%, -120%) scale(1); opacity: 0; } }
.wr-pop i { position: absolute; left: -5px; top: -4px; width: 10px; height: 8px; border-radius: 2px; animation: wr-confetti 1.25s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes wr-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wr-ring.is-kids .wr-b.is-squish, .wr-ring.is-kids .wr-b.is-deflate { animation: none; } }

/* ---- Draw it: a bigger page, and its tools (reader/kids.js drawPad) */
.kd-card.is-draw { width: min(820px, calc(100vw - 16px)); }
.kd-padtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 8px; }
.kd-tool { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 3px solid #fff; border-radius: 14px; background: #F3E6C8; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); transition: transform 0.15s cubic-bezier(0.34, 1.7, 0.64, 1); }
.kd-tool.is-on { background: #FFD66B; box-shadow: 0 0 0 3px #3A2A1E; }
.kd-tool:active { transform: scale(0.9); }
.kd-tool[disabled] { opacity: 0.35; cursor: default; }
.kd-sizes { display: inline-flex; gap: 4px; padding: 0 4px; }
.kd-size { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #F3E6C8; cursor: pointer; }
.kd-size i { display: block; border-radius: 50%; background: #3A2A1E; }
.kd-size.is-on { box-shadow: 0 0 0 3px #3A2A1E; background: #FFD66B; }
.kd-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 0 8px; padding: 6px; border-radius: 16px; background: #FFF1CF; }
.kd-stamps[hidden] { display: none; }
.kd-stamps button { width: 40px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.kd-stamps button.is-on { border-color: #3A2A1E; background: #FFD66B; }
.kd-pad canvas.is-erase { cursor: cell; }
.kd-dwrap { position: relative; display: inline-block; }
.kd-printone { position: absolute; right: -4px; top: -6px; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #3B82C4; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

/* ---- the sticker book, printed (reader/kids.js printBook): letter sheets in kids/print.js's window */
.kd-ps { gap: 16px; text-align: center; }
.kd-ps h2 { margin: 0; font-size: 30px; font-weight: 700; color: #2E2B27; }
.kd-ps-cover { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.kd-ps-star { font-size: 90px; line-height: 1; }
.kd-ps-cover h1 { margin: 0; font-size: 56px; line-height: 1.1; }
.kd-ps-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0; font-size: 20px; color: #555; }
.kd-ps-tally b { color: #2E2B27; }
.kd-ps-by { margin: 40px 0 0; font-size: 24px; }
.kd-ps-grid { display: grid; gap: 18px 16px; align-content: start; }
.kd-ps-grid.is-c3 { grid-template-columns: repeat(3, 1fr); }
.kd-ps-grid.is-c5 { grid-template-columns: repeat(5, 1fr); }
.kd-ps-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.25; }
.kd-ps-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 2px solid #ccc; border-radius: 12px; background: #1A1614; }
.kd-ps-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kd-ps-art * { animation: none !important; }
.kd-ps-face { display: block; width: 96px; height: 110px; }
.kd-ps-face svg { width: 100%; height: 100%; }
.kd-ps-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 10px; }
.kd-ps-chips span { padding: 7px 14px; border: 2.5px solid #F28C28; border-radius: 999px; font-size: 17px; font-weight: 700; }
.kd-ps-chips span.is-verse { border-color: #3B82C4; }
.kd-ps-draws { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.kd-ps-draws figure { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.kd-ps-draws img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; border: 2px solid #ccc; border-radius: 14px; }
.kd-ps-draws figcaption { font-size: 18px; font-weight: 700; }
.kd-ps-board { flex: 1; min-height: 0; display: flex; justify-content: center; }
.kd-ps-board .kd-board { width: 380px; zoom: 1.6; margin: 0; border: 1px solid #ccc; box-shadow: none; }
.kd-ps-board .kd-bi { cursor: default; }

/* the verse a kids' card is for (a tap anywhere in it, or its number: reader/verse.js), glowing */
.br-kids .br-verse.is-kpick { background: color-mix(in srgb, #FFD54F 38%, transparent); border-radius: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, #FFD54F 38%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.25s; }