/* Bible Story Journey - lifted whole out of the live preview.
 *
 * Extracted by tools/extract_preview_game.py and tools/_build_journey.py rather
 * than retyped: this is the approved version of the game, and re-implementing
 * it by hand would quietly change it. Asset paths are the only edit - they
 * moved up one level when the game came out of the root page.
 */

.game-world{position:relative;min-height:520px;perspective:850px;overflow:hidden;background:linear-gradient(#a9dbed 0 36%,#8fc36a 36% 100%)}
.game-world:before{display:none}
.game-world.sun-celebrate .game-sun{animation:sunCelebrate .9s ease}
.game-world:after{content:"☁️       ☁️";position:absolute;top:32px;left:8%;right:18%;font-size:3rem;letter-spacing:5rem;opacity:.85;animation:cloudFloat 9s ease-in-out infinite alternate}
.game-scene{position:absolute;inset:120px -8% -185px;transform-style:preserve-3d;transform:rotateX(58deg);background:radial-gradient(ellipse at center,#acd77b,#568d49 72%);border-radius:50%;box-shadow:inset 0 0 70px rgba(26,74,45,.4)}
.game-path{position:absolute;left:50%;bottom:18%;width:34%;height:82%;transform:translateX(-50%);background:linear-gradient(90deg,#caa66f,#f0d49a,#c29a61);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);box-shadow:0 8px 20px rgba(63,42,20,.35)}
.verse-stone{position:absolute;width:68px;height:42px;border-radius:50%;background:#eee0b7;border:4px solid #ad8a55;box-shadow:0 8px 0 #80633e;display:grid;place-items:center;color:#18372c;font-weight:bold;transform:rotateX(-12deg)}
.game-tree{position:absolute;left:50%;top:8px;width:220px;height:275px;transform:translateX(-50%) rotateX(-58deg) translateZ(30px);transform-origin:bottom;filter:drop-shadow(0 18px 12px rgba(25,45,27,.3))}
.tree-mound{position:absolute;left:39px;bottom:-22px;width:145px;height:48px;border-radius:50%;background:radial-gradient(ellipse,#86532f,#56321d 75%);border:5px solid #3f6f36;box-shadow:0 8px 0 #2d5b2c}
.game-roots{position:absolute;left:53px;bottom:-18px;width:86px;height:55px;transform:scale(0);transform-origin:top;transition:transform .8s ease}
.game-root{position:absolute;top:0;left:38px;width:12px;height:68px;background:#6e4427;border-radius:50%;transform-origin:top}
.game-root:nth-child(1){transform:rotate(58deg)}
.game-root:nth-child(2){transform:rotate(-58deg)}
.game-root:nth-child(3){transform:rotate(28deg)}
.game-root:nth-child(4){transform:rotate(-28deg)}
.game-trunk{position:absolute;bottom:5px;left:92px;width:38px;height:145px;background:linear-gradient(90deg,#56331d 0 18%,#a36a36 42%,#744421 72%,#452817);border:4px solid #472819;border-radius:55% 55% 18% 18%;transform:scaleY(.12);transform-origin:bottom;transition:transform .75s cubic-bezier(.2,.9,.25,1.2)}
.game-trunk:after{content:"";position:absolute;inset:12px 8px;background:repeating-linear-gradient(100deg,transparent 0 18px,rgba(65,35,17,.35) 19px 23px);border-radius:50%}
.tree-branch{position:absolute;bottom:112px;left:103px;width:16px;height:88px;border-radius:12px;background:#70401f;border:3px solid #472819;transform-origin:bottom;transition:transform .75s ease}
.game-crown{position:absolute;left:4px;top:-3px;width:212px;height:166px;transform:scale(.06);transform-origin:center bottom;transition:transform .75s cubic-bezier(.2,.9,.25,1.25)}
.canopy-cluster{position:absolute;width:92px;height:82px;border-radius:48% 55% 45% 58%;background:radial-gradient(circle at 34% 27%,#b8e96c 0 15%,#65b847 45%,#2e7a3c 82%);border:4px solid #2a6736;box-shadow:inset -9px -10px 0 rgba(21,94,43,.18),0 7px 0 rgba(38,93,48,.3)}
.game-tree:not([data-stage="0"]) .tree-branch{transform:rotate(var(--angle)) scaleY(1)}
.tree-fruit{position:absolute;z-index:4;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd45b,#e36b26 70%);border:2px solid #9f431d;box-shadow:0 3px 5px rgba(58,40,18,.28);animation:fruitPop .45s ease}
@keyframes fruitPop{from{transform:scale(0)}70%{transform:scale(1.35)}to{transform:scale(1)}}
.game-tree[data-stage="1"] .game-trunk{transform:scaleY(.45)}
.game-tree[data-stage="1"] .game-crown{transform:scale(.3)}
.game-tree:not([data-stage="0"]) .game-roots{transform:scale(1)}
.game-tree[data-stage="2"] .game-trunk{transform:scaleY(.62)}
.game-tree[data-stage="2"] .game-crown{transform:scale(.48)}
.game-tree[data-stage="3"] .game-trunk{transform:scaleY(.78)}
.game-tree[data-stage="3"] .game-crown{transform:scale(.68)}
.game-tree[data-stage="4"] .game-trunk{transform:scaleY(.9)}
.game-tree[data-stage="4"] .game-crown{transform:scale(.84)}
.game-tree[data-stage="5"] .game-trunk{transform:scaleY(1)}
.game-tree[data-stage="5"] .game-crown{transform:scale(1)}
.collect-leaf{position:absolute;width:58px;height:40px;border:4px solid #fff5a5;border-radius:100% 0 100% 0;background:linear-gradient(145deg,#b6ec5e,#35a044);box-shadow:0 8px 0 #24743a,0 11px 18px rgba(22,70,38,.3);cursor:pointer;z-index:4;animation:leafDance 3s ease-in-out infinite alternate}
.collect-leaf:after{content:"";position:absolute;left:8px;top:19px;width:40px;height:3px;background:#24743a;transform:rotate(-25deg);border-radius:4px}
.collect-leaf:hover,.collect-leaf:focus-visible{filter:brightness(1.2);transform:scale(1.15) rotate(12deg)}
.collect-leaf.collected{animation:leafCollect .45s ease forwards;pointer-events:none}
.tree-growth{display:block;color:#ffe58c;font-size:.78rem;margin-top:.15rem}
.watering-can{position:absolute;right:-130px;top:150px;width:105px;height:80px;z-index:8;opacity:0;transform-origin:40% 70%;pointer-events:none}
.can-body{position:absolute;right:0;bottom:0;width:64px;height:54px;border-radius:12px 12px 22px 22px;background:linear-gradient(145deg,#ffd754,#e39a22);border:4px solid #925c17;box-shadow:inset 8px 8px 0 rgba(255,255,255,.25)}
.can-body:before{content:"";position:absolute;left:13px;top:-26px;width:34px;height:33px;border:7px solid #925c17;border-bottom:0;border-radius:25px 25px 0 0}
.can-spout{position:absolute;left:4px;bottom:22px;width:58px;height:18px;background:#efb32d;border:4px solid #925c17;border-radius:18px 0 0 18px;transform:rotate(-18deg);transform-origin:right}
.can-spout:before{content:"";position:absolute;left:-12px;top:-8px;width:22px;height:28px;border-radius:50%;background:#efb32d;border:4px solid #925c17}
.water-drop{position:absolute;left:-2px;top:57px;width:9px;height:15px;border-radius:50% 50% 55% 55%;background:#64c9f2;opacity:0}
.water-drop:nth-child(2){left:18px;animation-delay:.12s}
.water-drop:nth-child(3){left:36px;animation-delay:.24s}
.watering-can.watering{animation:canWater 1.55s ease-in-out}
.watering-can.watering .water-drop{animation:waterFall .7s .55s ease-in infinite}
.game-panel{padding:2rem;background:linear-gradient(145deg,#fffdf6,#eee4cc);color:#33413a;display:flex;flex-direction:column;justify-content:center}
.game-progress{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:1rem}
.seed-row{font-size:1.45rem;letter-spacing:.15rem}
.game-question{font-size:1.35rem;margin:.5rem 0 1rem}
.game-answers{display:grid;gap:10px}
.game-feedback{min-height:54px;font-weight:bold;margin:1rem 0 0}
.score-pill{background:#143f31;color:white;border:2px solid var(--gold);border-radius:999px;padding:.35rem .7rem;white-space:nowrap}
.game-next{align-self:flex-start;display:none}
.game-next.show{display:inline-block}
.journey-mission{max-width:820px;margin:0 auto;padding:.75rem 1.5rem 1.15rem;text-align:center;color:#f8edc7;font-size:1.08rem;line-height:1.55}
.journey-mission strong{color:#ffd86a}
#journey-game{position:relative;display:block;min-height:760px;background:#0b2b21;overflow:hidden}
#journey-game[hidden]{display:none}
#journey-game>.game-world:not(.journey-world),#journey-game>.game-panel:not(.journey-question-panel){display:none}
.journey-world{position:relative;min-height:760px;background-image:linear-gradient(180deg,rgba(7,34,25,.06),rgba(7,34,25,.5)),url("../assets/images/journey/garden-background.png");background-size:cover;background-position:center;isolation:isolate}
.journey-world:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 28%,transparent 0 30%,rgba(4,24,17,.28) 100%);pointer-events:none;z-index:1}
.journey-hud{position:absolute;z-index:12;left:24px;right:24px;top:20px;display:flex;justify-content:space-between;gap:12px;color:#fff8dc;font-weight:800;text-shadow:0 2px 4px #071f18}
.journey-hud span{padding:.6rem .9rem;border:2px solid rgba(240,202,101,.8);border-radius:999px;background:rgba(7,39,28,.84);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.journey-progress{position:absolute;z-index:12;left:8%;right:8%;top:82px;height:14px;padding:3px;border-radius:999px;background:rgba(7,31,23,.75);border:1px solid #f0cc70}
.journey-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#66c956,#ffdd5e);box-shadow:0 0 18px #dfff75;transition:width .8s ease}
.journey-ambient{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.journey-firefly{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff4a0;box-shadow:0 0 14px 5px #dfff76;animation:journeyFirefly 5s ease-in-out infinite alternate}
.journey-firefly:nth-child(1){left:15%;top:25%}
.journey-firefly:nth-child(2){left:40%;top:42%;animation-delay:-2s}
.journey-firefly:nth-child(3){right:14%;top:30%;animation-delay:-3.5s}
.journey-firefly:nth-child(4){right:35%;top:20%;animation-delay:-1s}
@keyframes journeyFirefly{to{transform:translate(38px,-30px) scale(.6);opacity:.35}}
.journey-mob{position:absolute;z-index:4;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));pointer-events:none}
.journey-grub{width:92px;left:25%;bottom:165px;animation:journeyPatrol 7s ease-in-out infinite alternate}
.journey-moth{width:86px;right:23%;top:150px;animation:journeyFly 5s ease-in-out infinite alternate}
@keyframes journeyPatrol{to{transform:translateX(95px) scaleX(-1)}}
@keyframes journeyFly{to{transform:translate(-70px,35px) rotate(-7deg)}}
.journey-checkpoints{position:absolute;z-index:5;left:45%;right:5%;bottom:118px;height:105px}
.journey-checkpoint{position:absolute;bottom:0;width:54px;height:38px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(ellipse at 45% 30%,#9ad265,#47753d 67%,#243f29);border:3px solid #d2b768;box-shadow:0 11px 0 #382d20,0 16px 18px rgba(0,0,0,.36);transition:.45s ease}
.journey-checkpoint.done{filter:brightness(1.45);box-shadow:0 0 25px #e7ff7c,0 11px 0 #382d20}
.journey-checkpoint:after{content:"";position:absolute;left:50%;top:-14px;width:12px;height:18px;border-radius:100% 0 100% 0;background:#65c855;transform:translateX(-50%) rotate(-35deg);opacity:0;transition:.35s}
.journey-checkpoint.done:after{opacity:1;transform:translateX(-50%) rotate(-35deg) scale(1.25)}
.journey-page{position:absolute;z-index:8;width:62px;bottom:190px;left:54%;filter:drop-shadow(0 0 16px #fff6a8);animation:journeyPageFloat 1.7s ease-in-out infinite alternate;transition:left .75s ease,opacity .35s,transform .35s}
.journey-page.collected{opacity:0;transform:translateY(-100px) rotate(18deg) scale(.25)}
@keyframes journeyPageFloat{to{translate:0 -15px;rotate:4deg}}
.journey-sprout{position:absolute;z-index:9;width:116px;height:150px;object-fit:contain;object-position:center bottom;left:46%;bottom:143px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.42));transition:left .8s cubic-bezier(.2,.8,.2,1),transform .3s}
.journey-sprout.running{animation:journeyRun .22s ease-in-out 5 alternate}
.journey-sprout.cheer{animation:journeyCheer .65s ease}
@keyframes journeyRun{to{transform:translateY(-7px) rotate(2deg)}}
@keyframes journeyCheer{50%{transform:translateY(-32px) rotate(-6deg) scale(1.08)}}
.journey-tree-wrap{position:absolute;z-index:6;right:1%;bottom:105px;width:330px;height:520px;filter:drop-shadow(0 20px 16px rgba(0,0,0,.4))}
.journey-tree{position:absolute;inset:0;transform-origin:50% 100%;transition:filter .6s}
.journey-trunk{position:absolute;left:111px;bottom:25px;width:50px;height:225px;border:5px solid #45291a;border-radius:60% 42% 22% 24%;background:linear-gradient(90deg,#56321e,#a06a38 42%,#704123 73%,#3b2419);transform-origin:50% 100%;transform:scaleY(.12);transition:transform .85s cubic-bezier(.2,.85,.25,1.18)}
.journey-trunk:before,.journey-trunk:after{content:"";position:absolute;bottom:125px;width:30px;height:120px;border:13px solid #5a351f;border-bottom:0;border-radius:60% 60% 0 0;transition:transform .8s}
.journey-trunk:before{left:-50px;--branch-angle:-42deg;transform:rotate(-42deg) scale(.2)}
.journey-trunk:after{right:-50px;--branch-angle:42deg;transform:rotate(42deg) scale(.2)}
.journey-canopy{position:absolute;left:14px;top:8px;width:235px;height:235px;transform:scale(.05);transform-origin:50% 85%;transition:transform .9s cubic-bezier(.2,.9,.2,1.2)}
.journey-canopy i{position:absolute;width:112px;height:102px;border:5px solid #28572f;border-radius:52% 44% 55% 46%;background:radial-gradient(circle at 35% 28%,#b5e766,#559b43 48%,#24643a 83%);box-shadow:inset -12px -12px rgba(17,79,40,.22)}
.journey-canopy i:nth-child(1){left:4px;top:70px}
.journey-canopy i:nth-child(2){left:61px;top:10px}
.journey-canopy i:nth-child(3){right:2px;top:72px}
.journey-canopy i:nth-child(4){left:60px;top:96px}
.journey-fruits b{position:absolute;z-index:3;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe475,#e86d2c 65%,#a32f20);border:2px solid #8e321b;box-shadow:0 4px 8px rgba(0,0,0,.3);animation:fruitPop .5s ease both}
.journey-tree[data-stage]:not([data-stage="0"]) .journey-trunk:before,.journey-tree[data-stage]:not([data-stage="0"]) .journey-trunk:after{transform:rotate(var(--branch-angle)) scale(1)}
.journey-tree-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform-origin:50% 100%;transform:scale(.12);clip-path:inset(72% 0 0 0);transition:transform .9s cubic-bezier(.2,.9,.2,1.16),clip-path .9s ease,filter .6s;filter:saturate(.82) brightness(.85)}
.journey-tree>.journey-trunk,.journey-tree>.journey-canopy{display:none}
.journey-tree.victory .journey-tree-art{animation:victoryTree 1.1s ease-in-out 2;filter:saturate(1.25) brightness(1.12) drop-shadow(0 0 30px #ffe576)!important}
@keyframes victoryTree{0%,100%{transform:scale(1)}45%{transform:scale(1.08) translateY(-8px)}}
.journey-victory{position:absolute;z-index:40;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;background:radial-gradient(circle,rgba(255,240,132,.32),rgba(5,35,25,.84) 68%);opacity:0;visibility:hidden;transition:.45s;overflow:hidden}
.journey-victory.active{position:fixed;z-index:1000;opacity:1;visibility:visible}
.journey-victory-card{position:relative;z-index:3;max-width:570px;padding:2rem 2.2rem;border:4px solid #ffe08a;border-radius:28px;color:#fffbe9;background:linear-gradient(145deg,rgba(17,77,49,.96),rgba(6,41,30,.97));box-shadow:0 0 60px rgba(255,223,101,.6),0 24px 60px rgba(0,0,0,.45);animation:victoryCard .8s cubic-bezier(.2,.9,.25,1.3)}
.journey-victory-card h3{font-size:clamp(2rem,5vw,3.7rem);margin:.2rem 0;color:#ffe274;text-shadow:0 4px 0 #795918}
.journey-victory-card p{font-size:1.15rem;line-height:1.55}
.journey-victory-card .btn{margin:.4rem}
@keyframes victoryCard{from{transform:scale(.35) rotate(-5deg);opacity:0}70%{transform:scale(1.06) rotate(1deg)}to{transform:scale(1)}}
.game-question>span:first-child{background:rgba(255,246,206,.62);border-left:5px solid #d4a43d;padding:.75rem;border-radius:8px}
.journey-age-gate{position:fixed;z-index:1000;inset:8px 0 auto;display:flex;justify-content:center;padding:.35rem;background:none;pointer-events:none}
.journey-age-gate[hidden]{display:none}
.journey-age-card{width:min(620px,94vw);min-height:66px;padding:.45rem .7rem;display:flex;align-items:center;justify-content:center;gap:.55rem;text-align:center;color:#163b2d;border:3px solid #d9b755;border-radius:16px;background:linear-gradient(145deg,#fffdf2,#f0e1b9);box-shadow:0 10px 24px rgba(0,0,0,.35);pointer-events:auto}
.journey-age-card>div:first-child,.journey-age-card .eyebrow,.journey-age-card>p,.journey-age-help{display:none}
.journey-age-card h3{font-size:1.05rem;margin:0;white-space:nowrap}
.journey-age-card label{font-size:.75rem;white-space:nowrap}
.journey-age-input{display:inline-block;width:65px;margin:0;padding:.35rem;text-align:center;font:800 .95rem Georgia,serif;color:#143e2f;border:2px solid #b99037;border-radius:9px;background:#fff}
.journey-age-card .btn{padding:.48rem .7rem;font-size:.7rem;white-space:nowrap}
.journey-age-card #journey-age-message:not(:empty){display:block;position:absolute;top:70px;padding:.3rem .55rem;border-radius:8px;background:#fff3c9;color:#7b341e}
.journey-question-panel{position:absolute;z-index:20;left:3%;bottom:24px;width:min(560px,56%);max-height:480px;overflow:auto;padding:1.35rem 1.5rem;border:3px solid #d8b45d;border-radius:22px;background:linear-gradient(145deg,rgba(255,253,242,.97),rgba(235,223,191,.97));box-shadow:0 20px 45px rgba(0,0,0,.38);justify-content:flex-start}
.journey-question-panel .game-question{font-size:1.15rem}
.journey-question-panel .game-feedback{font-size:.93rem;min-height:28px;margin:.65rem 0}
.journey-question-panel .game-answer{padding:.62rem .8rem}
.journey-question-panel .game-progress{margin-bottom:.55rem}
.journey-question-panel .seed-row{font-size:.9rem;letter-spacing:0;color:#5c6c5d}

/* The game was a panel inside a tab in the old page, so it never needed a page
   of its own to sit on. */
.journey-room {
    padding: clamp(12px, 2vw, 28px);
    background: radial-gradient(760px 380px at 50% 0%, rgba(47, 143, 107, .12), transparent 70%);
    min-height: 100vh;
}
.journey-room .scripture-game { max-width: 1280px; margin: 0 auto; }


/* Answer buttons: base styles came from the live preview's stylesheet, which
   did not travel with the extraction. Styled for the cream question panel. */
.game-answer {
    padding: .8rem 1rem; border-radius: 12px;
    border: 2px solid rgba(20, 63, 49, .25);
    background: rgba(255, 255, 255, .8); color: #1c3a2d;
    font: 700 .95rem var(--serif); text-align: left; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.game-answer:hover:not(:disabled) { background: #fff; border-color: #143f31; transform: translateY(-1px); }
.game-answer:disabled { cursor: default; opacity: .75; }
.game-answer.correct {
    background: #dff3d9; border-color: #3f8f4d; color: #1c4a26; opacity: 1;
    box-shadow: 0 0 0 3px rgba(92, 189, 93, .35);
}