/* Bible Garden (change list #3, #26, #32). Separate file so it never clashes with css/style.css edits. */
.bg-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 1100px; margin: 0 auto; }
.bg-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bg-act { justify-content: center; font-size: 1.02rem; padding: .6em .7em; min-height: 52px; white-space: nowrap; }
.bg-act .ico { width: 1.35em; height: 1.35em; flex: none; }
@media (max-width: 640px) { .bg-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bg-sample { margin: 0; text-align: center; font-weight: 700; color: #b0552a; background: #fff1e0; border: 2px dashed #f0a46a; border-radius: 14px; padding: 4px 10px; }
.bg-garden-card { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bg-garden { position: relative; border-radius: 20px; overflow: hidden; height: max(360px, calc(100vh - 330px)); background: #05060c; box-shadow: inset 0 0 0 3px rgba(255,255,255,.4); }
.has-demo .bg-garden { height: max(340px, calc(100vh - 360px)); }
.garden-svg { display: block; width: 100%; height: 100%; }
.garden-svg .g-new { animation: gNew 2.2s ease-out both; }
@keyframes gNew { from { opacity: 0; } to { opacity: 1; } }
.garden-svg .g-twinkle { animation: gTw 2.4s ease-in-out infinite alternate; }
@keyframes gTw { from { opacity: .2; } to { opacity: 1; } }
.g-visitor-pet { width: 84px; height: 88px; }
.g-visitor-pet svg { width: 100%; height: 100%; }
.bg-garden-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 2px 6px; }
.bg-garden-label h2 { margin: 0; font-size: 1.3rem; }
.bg-days { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bg-day { background: #eef9ee; color: #2f6b3a; border-radius: 999px; padding: 3px 10px; font-size: .92rem; }
.bg-day b { color: #23552d; }
.bg-day.new { background: #fff3c4; color: #7a5a00; animation: popin .5s; }
/* activities */
.bg-game { max-width: 760px; }
.bg-page-art { border-radius: 18px; overflow: hidden; height: 260px; margin: 6px 0 12px; }
.bg-page h2 { margin-bottom: .3em; }
/* a Story Walk page with no picture (art: false, page 9): content centred in about a picture page's height, so the
   page doesn't collapse and Back/Next don't jump far up; on a phone the text is already that tall */
.bg-page-noart { min-height: 440px; display: flex; flex-direction: column; justify-content: center; padding: 8px 0; box-sizing: border-box; }
.bg-say { font-size: 1.22rem; line-height: 1.45; margin: 0 0 12px; }
.bg-quote { margin: 0 auto 10px; max-width: 620px; background: #fbf6ea; border-left: 6px solid #d9a441; border-radius: 12px; padding: 10px 16px; text-align: left; }
.bg-quote p { font-size: 1.18rem; line-height: 1.45; margin: 4px 0; font-style: italic; }
.bg-quote cite { display: block; text-align: right; font-style: normal; font-weight: 600; color: #8a6420; }
.bg-quote-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a6420; }
.bg-quote-tag .ico { width: 1.1em; height: 1.1em; }
.bg-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 0; }
.bg-word { background: #eef4ff; border-radius: 12px; padding: 4px 10px; font-size: .95rem; }
.bg-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.bg-count { color: var(--ink-soft); font-weight: 600; min-width: 5em; }
.bg-q { margin-top: 8px; }
.bg-slots { list-style: none; margin: 10px auto; padding: 0; max-width: 560px; display: grid; gap: 6px; }
.bg-slot { min-height: 44px; border: 2px dashed #d9cff7; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; text-align: left; }
.bg-slot.filled { border-style: solid; border-color: #8fdcb9; background: #effbf5; animation: popin .3s; }
.bg-slot small { margin-left: auto; color: var(--ink-soft); }
.bg-slot-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: #fff; font-weight: 700; flex: none; }
.bg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; margin: 12px auto 0; }
.bg-card { background: #fff; box-shadow: 0 5px 0 #ddd3fa, 0 0 0 3px #ebe5ff inset; min-height: 58px; font-size: 1.05rem; }
.bg-card.gone { display: none; }
.bg-card.nope, .bg-tile.nope { animation: shake .4s; }
.bg-ref { font-weight: 700; color: #8a6420; font-size: 1.15rem; margin: 4px 0; }
.bg-answer { min-height: 96px; border: 3px dashed #e3d6a8; background: #fffaf0; border-radius: 16px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; justify-content: center; }
.bg-answer.right { border-color: #8fdcb9; background: #effbf5; }
.bg-answer-hint { color: #b9a77a; align-self: center; }
.bg-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; min-height: 60px; }
.bg-tile { background: #fff3cf; box-shadow: 0 4px 0 #e7c76f; font-size: 1.1rem; padding: .45em .8em; }
.bg-tile.placed { background: #fff; box-shadow: 0 4px 0 #d9cff7, 0 0 0 2px #ebe5ff inset; }
.bg-tile:disabled { opacity: .25; }
.bg-choices .choice { font-size: 1.2rem; }
body[data-theme="garden"] { background: linear-gradient(180deg, #fff6d8, #d8f3dc) fixed; }
/* Harold's Oct 4 fixes: kid gloss inside a quote (not part of the NASB text) and the reference after the kid words */
.bg-gloss { font-style: normal; font-size: .88em; color: #3d6b35; font-weight: 600; }
.bg-say-ref { display: inline-block; font-style: normal; font-size: .8em; font-weight: 600; color: #8a6420; margin-left: 4px; }