/* Sprout's Bible Story Match — lifted whole out of the live preview.
 *
 * Extracted by tools/extract_preview_game.py rather than retyped, because 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 into clean-rebuild/.
 */

:root{
  --match-sheet-1:url("../assets/kids/scripture-match-stories-01.png");
  --match-sheet-2:url("../assets/kids/scripture-match-stories-02.png");
}
.match-tile-deck{position:relative;height:100%;background:radial-gradient(circle at 50% 30%,#70b887,#174c39 72%);isolation:isolate}
.match-tile-deck:before{content:"";position:absolute;inset:0;background:url("../assets/images/journey/garden-background.png") center/cover;opacity:.26}
.match-tile-card{position:absolute;z-index:2;left:50%;top:50%;width:31%;aspect-ratio:3/4;overflow:hidden;border:3px solid #edcb69;border-radius:12px;background:#f8edc9;box-shadow:0 12px 20px rgba(0,0,0,.38);transform-origin:50% 110%}
.match-tile-card i{display:block;width:100%;height:100%;background-image:url("../assets/kids/scripture-match-stories-01.png");background-size:300% 200%;background-repeat:no-repeat}
.match-tile-card.creation{transform:translate(-105%,-48%) rotate(-18deg)}
.match-tile-card.creation i{background-position:0 0}
.match-tile-card.noah{transform:translate(-70%,-57%) rotate(-7deg)}
.match-tile-card.noah i{background-position:50% 0}
.match-tile-card.nativity{transform:translate(-28%,-57%) rotate(7deg)}
.match-tile-card.nativity i{background-position:50% 100%}
.match-tile-card.tomb{transform:translate(8%,-48%) rotate(18deg)}
.match-tile-card.tomb i{background-position:100% 100%}
.match-tile-card.jonah{z-index:3;width:34%;transform:translate(-50%,-47%)}
.match-tile-card.jonah i{background-image:url("../assets/kids/scripture-match-stories-02.png");background-size:200% 100%;background-position:100% 50%}
.match-tile-deck:after{content:"MATCH THE STORIES";position:absolute;z-index:4;left:50%;bottom:9px;transform:translateX(-50%);white-space:nowrap;padding:.35rem .7rem;border-radius:999px;background:#e4b848;color:#123c2d;font-size:.67rem;font-weight:900;letter-spacing:.08em;box-shadow:0 5px 12px rgba(0,0,0,.3)}
.match-view{position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:82px;padding:clamp(1rem,3vw,2.6rem);color:#fff;background:#0a291f url("../assets/images/journey/garden-background.png") center/cover fixed;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(255,226,128,.22)}
.match-view:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(4,26,20,.7),rgba(4,29,21,.86) 32%,rgba(7,36,27,.76)),radial-gradient(circle at 50% 0,rgba(255,218,106,.2),transparent 42%)}
.match-view:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffe792 0 2px,transparent 3px);background-size:110px 130px;opacity:.16;animation:matchFireflies 9s linear infinite}
@keyframes matchFireflies{50%{transform:translateY(-18px);opacity:.28}}
.match-top{text-align:center;max-width:940px;margin:0 auto .7rem}
.match-top .eyebrow{color:#ffe28a}
.match-top h4{margin:.05rem 0 .2rem;color:#fff7cf;font-size:clamp(1.6rem,3.6vw,2.6rem);text-shadow:0 4px 18px #071b13}
.match-top p{margin:.1rem auto .45rem;max-width:680px;color:#f2f4df;font-size:.92rem}
.match-status{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:.8rem 0;font-weight:800}
.match-status span{min-width:120px;padding:.55rem 1rem;border:1px solid rgba(255,226,138,.5);border-radius:999px;background:rgba(5,35,26,.78);color:#ffe89e;box-shadow:0 7px 18px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
.match-garden{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;margin:0 auto .45rem;padding:4px 12px;border-radius:999px;background:rgba(6,39,29,.62);box-shadow:inset 0 1px rgba(255,255,255,.1)}
.match-sprout{position:relative;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,227,132,.3);transition:.45s cubic-bezier(.2,.9,.25,1)}
.match-sprout:before{content:"";position:absolute;left:14px;bottom:7px;width:5px;height:14px;border-radius:5px;background:#638d55;transform:scale(.65);transform-origin:bottom}
.match-sprout:after{content:"";position:absolute;left:5px;bottom:16px;width:13px;height:9px;border-radius:100% 0 100% 0;background:#769e65;box-shadow:11px 4px 0 #638d55;transform:scale(.65);transform-origin:bottom}
.match-sprout.grown{border-color:#ffe075;background:linear-gradient(145deg,#f9d764,#b98a22);box-shadow:0 0 20px rgba(255,218,93,.65);transform:translateY(-4px) scale(1.08);animation:sproutBounce .6s ease}
.match-sprout.grown:before{background:#51a34a;transform:scale(1)}
.match-sprout.grown:after{background:#70c85b;box-shadow:11px 4px 0 #4dab49;transform:scale(1)}
@keyframes sproutBounce{50%{transform:translateY(-10px) scale(1.2)}}
.match-grid{display:grid;grid-template-columns:repeat(8,minmax(72px,1fr));gap:clamp(7px,1vw,12px);max-width:1180px;margin:auto;perspective:1400px}
.match-card{position:relative;aspect-ratio:3/4;border:0;background:none;padding:0;cursor:pointer;perspective:900px;touch-action:manipulation}
.match-card:focus-visible{outline:3px solid #fff1a6;outline-offset:3px;border-radius:14px}
.match-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.7,.2,1)}
.match-card.flipped .match-card-inner,.match-card.matched .match-card-inner{transform:rotateY(180deg)}
.match-face{position:absolute;inset:0;overflow:hidden;border-radius:14px;backface-visibility:hidden;box-shadow:0 9px 18px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,236,167,.8)}
.match-back{display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#276b4e,#0a3326 70%);border:2px solid #d9ad43}
.match-back:before,.match-back:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,225,133,.55);border-radius:10px}
.match-back:after{inset:10px;border-color:rgba(255,255,255,.12)}
.match-back img{position:relative;z-index:1;width:80%;height:82%;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(0,0,0,.4))}
.match-back-mark{position:absolute;z-index:2;bottom:4px;padding:.12rem .4rem;border-radius:99px;background:#d9ad43;color:#123b2c;font-size:.48rem;font-weight:900;letter-spacing:.1em}
.match-front{display:flex;flex-direction:column;transform:rotateY(180deg);background:#f7eed2;border:2px solid #e8c35f;color:#153d2d}
.match-story-art{flex:1;min-height:0;background-image:var(--story-sheet);background-size:var(--story-size);background-position:var(--story-position);background-repeat:no-repeat}
.match-story-label{position:relative;padding:.32rem .2rem .38rem;text-align:center;background:linear-gradient(180deg,#fff9e7,#eadcb8);box-shadow:0 -5px 12px rgba(17,48,35,.16);line-height:1.05}
.match-story-label b{display:block;font:700 clamp(.56rem,.85vw,.8rem) Georgia,serif;color:#164633}
.match-story-label small{display:block;margin-top:.12rem;color:#725c2d;font-size:clamp(.45rem,.65vw,.62rem);font-weight:800}
.match-card:not(.flipped):not(.matched):hover .match-card-inner{transform:translateY(-7px) rotateY(-5deg)}
.match-card.matched{cursor:default}
.match-card.matched .match-front{border-color:#f8df70;box-shadow:0 0 0 4px rgba(92,189,93,.75),0 0 30px rgba(255,222,105,.7)}
.match-card.matched:after{content:"✓";position:absolute;z-index:5;right:-7px;top:-7px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f2cd51;color:#164330;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.35);animation:matchPop .45s ease}
.match-message{text-align:center;min-height:34px;margin:1rem auto .65rem;color:#fff3b0;font-size:1.05rem;font-weight:800;text-shadow:0 2px 8px #061f17}
.match-actions{text-align:center}
.match-actions .btn{box-shadow:0 8px 22px rgba(0,0,0,.32)}

/* The leaves thrown up from a matched pair. These two rules live outside the
   .match- namespace in the preview, so the extractor could not see them. */
.leaf-burst {
    position: fixed; z-index: 100; pointer-events: none;
    font-size: 1.5rem;
    animation: burstAway .8s ease-out forwards;
}
@keyframes burstAway {
    to { translate: var(--x) var(--y); rotate: 180deg; opacity: 0; }
}

/* The game was a panel inside a tab in the old page. As its own page it needs
   somewhere to sit. */
.match-room {
    padding: clamp(16px, 3vw, 40px);
    background: radial-gradient(760px 380px at 50% 0%, rgba(47, 143, 107, .12), transparent 70%);
    min-height: 100vh;
}