*{box-sizing:border-box}body{margin:0;background:#e9f5fc;color:#173b48;font:16px/1.5 'Trebuchet MS',Arial,sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #bad6df;border-radius:12px;background:white;padding:10px 16px;color:#173b48;font-weight:700}button:disabled{opacity:.6;cursor:wait}a{color:inherit}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4%;background:#fff;border-bottom:1px solid #c7e1e9}header a{text-decoration:none}main{max-width:1400px;padding:24px;margin:auto}.heading{text-align:center;margin-bottom:22px}.heading>span{font-size:13px;letter-spacing:2px;font-weight:700;color:#357080}h1{font-size:clamp(25px,4vw,44px);margin:4px 0;line-height:1.2;color:#164e63}.heading p{margin:4px;font-weight:700;letter-spacing:3px;color:#bd6324}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.game,aside{background:#fff;border-radius:22px;box-shadow:0 6px 0 #cfdee5;overflow:hidden}.stats{display:flex;justify-content:space-between;background:#164e63;color:#fff;padding:14px 22px;gap:12px}.stats strong{font-variant-numeric:tabular-nums}.park{position:relative;background:#d1eaba;padding:20px 18px 10px}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px 12px}.cell{position:relative;min-width:0;background:#fff;border:5px solid #a5a9a1;border-bottom:9px solid #848b84;border-radius:8px;transition:border-color .3s,transform .3s}.cell.active{border-color:#e59e25;box-shadow:0 0 0 4px #ffe398}.cell.passed{border-color:#379e87}.animal{background-image:url('/assets/rescue-animals.png');background-size:500% 300%;background-repeat:no-repeat;aspect-ratio:1}.cell .number{position:absolute;top:0;left:3px;font-size:12px;font-weight:bold;background:#ffffffdf;border-radius:5px;padding:0 3px}.cell .check{position:absolute;right:3px;bottom:0;color:#14705f;font-weight:bold}#key{position:absolute;font-size:30px;z-index:3;transition:left .65s ease,top .65s ease;pointer-events:none;filter:drop-shadow(0 2px 2px #987332)}.exit{margin:14px auto 0;text-align:right;background:#f7e6b7;border-radius:12px;padding:7px 16px;font-size:14px}.exit span{display:inline-block;font-size:30px;vertical-align:middle;transition:transform 1s}.freed .exit span{transform:rotate(-25deg)}.freed .cell{border-color:#56b497;animation:jump .65s ease-in-out infinite alternate}.freed .cell:nth-child(2n){animation-delay:.2s}.freed .cell:nth-child(3n){animation-delay:.4s}@keyframes jump{to{transform:translateY(-9px) rotate(3deg)}}.controls{padding:20px 24px}h2{font-size:22px;margin:0 0 10px}.controls p{margin:8px 0}.fields{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:15px 0}label{display:block;font-weight:700}input{width:100%;padding:12px;margin:6px 0;border:2px solid #b9d3db;border-radius:10px;background:#fafdff;min-width:0}input:focus{outline:3px solid #a6dce7;border-color:#18798b}.primary{background:#e8a433;border:0;color:#20363b;box-shadow:0 3px 0 #bd7d1f;padding:13px 22px}.small{font-size:14px;color:#577480}.challenge{display:flex;align-items:center;gap:24px}.portrait{width:170px;flex-shrink:0;border-radius:14px}.challenge form{flex:1;min-width:0}#feedback{font-weight:700;min-height:24px;color:#176b62}aside{padding:24px;align-self:start}.rank-heading{display:flex;align-items:center;gap:12px}.rank-heading span{font-size:32px}aside p{font-size:14px;color:#577480}ol{padding:0;list-style:none;max-height:650px;overflow:auto}li{padding:12px 0;border-bottom:1px solid #deebef;font-size:14px}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{color:#537281}[hidden]{display:none!important}:focus-visible{outline:3px solid #167f99;outline-offset:3px}@media(max-width:1000px){.layout{grid-template-columns:1fr}aside ol{max-height:400px}}@media(max-width:540px){main{padding:16px 10px}header{padding:10px;font-size:14px;flex-wrap:wrap}header strong{font-size:14px}.park{padding:14px 8px 8px}.board{gap:14px 6px}.cell{border-width:3px;border-bottom-width:6px}.cell .number{font-size:12px}.controls{padding:18px 14px}.challenge{gap:10px}.portrait{width:105px}#key{font-size:23px}.fields{grid-template-columns:1fr}.primary{padding:12px;width:100%}.stats{padding:12px;font-size:14px}.heading>span{font-size:12px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.gate-frame{border:5px solid #72684c;border-bottom:0;border-radius:18px 18px 0 0;padding:0 5px;background:#c9b582}#gate{border:2px solid #72684c;border-radius:12px 12px 0 0;width:62px;background:repeating-linear-gradient(90deg,#968969 0 4px,#e9d699 4px 12px);transform-origin:left}.freed #gate{transform:perspective(200px) rotateY(-70deg)}.board{position:relative;z-index:1}.exit{position:relative;z-index:1}.park .route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Garden rescue: dimensional characters on an open lawn. */
body{background:#e6f2e8}.game,aside{box-shadow:0 7px 0 #c8dccd}.stats{background:#22563e}.garden-caption{background:#fff5d5;color:#60481d;font-weight:700;text-align:center;padding:10px 16px;min-height:44px;font-size:14px}.park{isolation:isolate;background:#75ad42 url('/assets/rescue-garden.webp') center/cover no-repeat;padding:38px 28px 20px}.board{gap:30px 12px}.cell{background:transparent;border:0;border-bottom:5px solid #a9a68b;border-radius:50%;box-shadow:0 6px 2px #365b3440;min-height:0;transition:filter .3s,box-shadow .3s}.cell .animal{filter:drop-shadow(0 9px 4px #243e3a60);transform:translateY(-4px);transition:opacity .2s}.animal{background-image:url('/assets/rescue-animals-3d.png')}.cell.active{border-color:#ffdc54;box-shadow:0 0 0 4px #ffed77,0 0 23px #ffe271;animation:ready-glow 1.8s ease-in-out infinite}.cell.passed{border-color:#cae5ab;box-shadow:0 4px 0 #47703b50}.cell .number{top:auto;bottom:-10px;left:50%;transform:translateX(-50%);background:#fff4cb;color:#38542d;border:2px solid #ad955b;border-radius:50%;width:26px;height:26px;text-align:center;line-height:22px;z-index:2;font-size:14px}.cell .check{right:5px;bottom:4px;background:#fff9d9;border-radius:50%;padding:0 4px}.cell .check:empty{display:none}.cell.sending .animal{opacity:.12}.cell.receiving{box-shadow:0 0 0 5px #ffe66e,0 0 30px #ffe66e}.key-runner{position:absolute;z-index:8;pointer-events:none;filter:drop-shadow(0 9px 4px #244b3950)}.running-animal{width:100%;height:100%;animation:run-hop .16s ease-in-out infinite alternate}.running-animal.face-left{animation-name:run-hop-left}.carried-key{position:absolute;right:0;top:36%;font-size:32px;filter:drop-shadow(0 0 6px #fff4a6);animation:key-shine .35s infinite alternate}.park.passing #key{display:none}.portrait{background-color:#e4f1d4;box-shadow:inset 0 0 25px #93b47635;filter:drop-shadow(0 5px 2px #27443520)}.exit{margin:24px 0 0 auto;width:max-content;max-width:100%;background:#f8edc9e8;box-shadow:0 4px 0 #665a3560;padding:6px 14px}.park .route{opacity:.75;z-index:0}#key{filter:drop-shadow(0 0 6px #fff6a4);z-index:4}.freed .cell{animation:jump .65s ease-in-out infinite alternate}.freed .cell .animal{filter:drop-shadow(0 12px 4px #243e3a50)}.primary{background:#f4bf4e}.heading h1{color:#25553f}.heading>span{color:#46784d}@keyframes ready-glow{50%{box-shadow:0 0 0 5px #ffed77,0 0 30px #ffe271}}@keyframes run-hop{from{transform:translateY(0) rotate(-5deg) scale(1.03,.96)}to{transform:translateY(-13px) rotate(5deg) scale(.98,1.04)}}@keyframes run-hop-left{from{transform:translateY(0) rotate(5deg) scale(-1.03,.96)}to{transform:translateY(-13px) rotate(-5deg) scale(-.98,1.04)}}@keyframes key-shine{to{transform:rotate(14deg) scale(1.12)}}@media(max-width:540px){.park{padding:28px 10px 15px}.board{gap:24px 7px}.cell{border-bottom-width:3px}.cell .number{width:22px;height:22px;line-height:18px;font-size:12px}.carried-key{font-size:25px}.garden-caption{font-size:14px;padding:9px}.exit{font-size:12px}.cell.active{box-shadow:0 0 0 3px #ffed77,0 0 15px #ffe271}}
/* Two friends share a small garden scene. */
.park{padding:18px;background:#6d9c49}.board{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.habitat{position:relative;min-width:0;aspect-ratio:1.35;border:3px solid #d6c59a;border-bottom-width:7px;border-radius:17px;background-position:center;background-size:cover;box-shadow:0 6px 12px #25472855;transition:border-color .3s,box-shadow .3s;display:flex;align-items:flex-end;padding:28px 8px 18px}.habitat-hay{background-image:url('/assets/rescue-hay.webp')}.habitat-trees{background-image:url('/assets/rescue-trees.webp')}.habitat-flowers{background-image:url('/assets/rescue-flowers.webp')}.habitat-title{position:absolute;top:7px;left:7px;right:7px;text-align:center;color:#23452b;background:#fff9e6ed;border-radius:8px;padding:3px 5px;font-size:13px;font-weight:700;line-height:1.25}.habitat-pair{display:flex;width:100%;align-items:flex-end;justify-content:space-around;gap:8px}.habitat .cell{width:49%;flex:0 0 49%;border-bottom:3px solid #b8a47b99;box-shadow:0 3px 5px #304f3040}.habitat .cell.active{border-color:#ffe460;box-shadow:0 0 0 3px #ffe460,0 0 16px #ffe460}.habitat-current{border-color:#ffdc63;box-shadow:0 0 0 3px #ffdc6360,0 8px 14px #25472855}.habitat .animal{transform:translateY(-2px)}.habitat .number{width:23px;height:23px;line-height:19px;font-size:12px}.habitat .check{font-size:13px;right:0}.habitat-final .exit{flex:1;min-width:0;width:auto;margin:0;padding:3px;background:#fff4d5d9;text-align:center;border-radius:8px}.habitat-final .exit strong{display:block;font-size:12px;line-height:1.2}.habitat-final .gate-frame{padding:0 2px;border-width:3px}.habitat-final #gate{width:40px;font-size:25px}.park .route{opacity:.5}.freed .habitat{border-color:#d3e7a4}@media(min-width:1001px) and (max-width:1190px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.habitat{aspect-ratio:1.6}}@media(max-width:650px){.park{padding:12px 8px}.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}.habitat{aspect-ratio:1.1;padding:34px 4px 15px;border-width:2px;border-bottom-width:5px;border-radius:12px}.habitat-title{font-size:12px;top:5px;left:4px;right:4px}.habitat-pair{gap:3px}.habitat-final .exit strong{font-size:12px}.habitat-final #gate{width:30px;font-size:21px}.habitat-final .gate-frame{border-width:2px}.habitat .cell .check{right:-2px}.key-runner{z-index:12}}
/* Final celebration: the whole group waves together. */
.habitat-title{display:none}.celebration{display:none;position:relative;overflow:hidden;margin:-20px -24px 20px;padding:20px 18px 12px;border-radius:18px;background:linear-gradient(180deg,#9dd5f4,#d9f4d0 64%,#77b852);box-shadow:inset 0 -18px 0 #5c9c48}.celebration.show{display:block}.celebration-animals{display:grid;grid-template-columns:repeat(8,1fr);gap:0 2px;align-items:end;min-height:170px}.celebration-animal{aspect-ratio:1;background-size:500% 300%;filter:drop-shadow(0 6px 3px #264c3e55);animation:celebrate-wave .7s ease-in-out infinite alternate;animation-delay:var(--wave);transform-origin:bottom center}.celebration-animal:nth-child(n+9){transform:translateY(-6px)}.thank-you{position:relative;z-index:2;margin:2px auto 0;width:max-content;padding:5px 22px;border-radius:999px;background:#fff5a7;color:#1a6049;font-size:clamp(24px,5vw,44px);font-weight:900;letter-spacing:5px;text-shadow:0 2px #fff;box-shadow:0 4px 0 #c49339;animation:thank-pulse 1s ease-in-out infinite alternate}@keyframes celebrate-wave{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-13px) rotate(5deg)}}@keyframes thank-pulse{to{transform:scale(1.06);box-shadow:0 5px 0 #c49339,0 0 20px #fff2a0}}@media(max-width:540px){.celebration{margin:-18px -14px 18px;padding:14px 8px 10px}.celebration-animals{min-height:150px;grid-template-columns:repeat(8,1fr)}.thank-you{font-size:23px;letter-spacing:3px;padding:4px 15px}}
