@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:Nunito,Arial,sans-serif;color:#09252e;background:#e3f4f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #f0cd00;outline-offset:3px}.hidden{display:none!important}
.site-header{height:70px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px)}.logo{font-size:34px;font-weight:900;letter-spacing:-3.5px;color:#171d21;line-height:1}.logo span{color:#087679}.logo .logo-dot{font-size:17px;vertical-align:top;letter-spacing:0}.header-pill{border-radius:999px;background:#f0cd00;padding:10px 17px;font-size:14px;font-weight:900}.header-pill span{margin-left:6px}
main{min-height:calc(100vh - 70px);background:radial-gradient(circle at 5% 5%,#fff8 0 5%,transparent 22%),radial-gradient(circle at 90% 80%,#f8de78aa,transparent 20%),linear-gradient(160deg,#ddf1ef,#f7ffff 48%,#c4e9e7);padding:24px clamp(16px,3vw,48px) 36px}.page{max-width:1280px;margin:auto}.menu-intro{text-align:center;margin:0 auto 30px}.kicker{color:#007278;font-weight:900;letter-spacing:2px;font-size:13px}.menu-intro h1{font-size:clamp(34px,4.5vw,62px);line-height:1.02;letter-spacing:-2.8px;margin:6px auto 10px;max-width:860px}.menu-intro em{font-style:normal;color:#087679}.menu-intro p{font-size:18px;font-weight:800;margin:0}
.game-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.game-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;min-height:322px;background:#fff;border:0;border-radius:26px;padding:18px 12px 16px;box-shadow:0 12px 22px #09565c28;transition:transform .18s,box-shadow .18s}.game-card:hover{transform:translateY(-5px);box-shadow:0 17px 25px #09565c3b}.game-card:before{content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:260px;height:235px;border-radius:50%;background:var(--card)}.card-image-wrap{position:relative;display:grid;place-items:center;width:160px;height:160px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px #fff8,0 7px 16px #00575b3b;overflow:hidden;margin-bottom:15px}.card-image{width:100%;height:100%;object-fit:cover}.card-image.monkey{object-fit:contain;mix-blend-mode:multiply;transform:scale(1.17)}.game-card h2{position:relative;font-size:25px;line-height:1;margin:0 0 5px;font-weight:900}.game-card p{position:relative;font-size:14px;font-weight:800;line-height:1.15;margin:0;min-height:34px}.card-action{position:relative;margin-top:auto;background:#087477;color:#fff;border-radius:12px;padding:9px 19px;font-size:16px;font-weight:900}.menu-footer{text-align:center;color:#466b6c;font-weight:900;font-size:15px;margin:25px 0 0}
.game-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 12px;max-width:1050px}.back-button,.progress{background:#fff;border:0;border-radius:15px;padding:10px 17px;color:#075d64;font-weight:900;box-shadow:0 5px 15px #075f5f1f}.progress{min-width:102px;text-align:center}.arena{position:relative;margin:auto;max-width:1050px;height:min(690px,calc(100dvh - 151px));min-height:520px;overflow:hidden;isolation:isolate;border-radius:32px;background:linear-gradient(160deg,#126e71,#073e53);box-shadow:0 17px 32px #07545842;color:white;touch-action:none}.arena:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 12% 10%,#73d9d944,transparent 31%),radial-gradient(circle at 89% 79%,#efe45625,transparent 28%)}
.intro,.outro{height:100%;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:26px;z-index:5}.intro-card,.outro-card{max-width:570px;width:100%;position:relative}.intro-mascot{width:184px;height:184px;border-radius:50%;background:#fff;object-fit:cover;box-shadow:0 0 0 9px #ffffff32,0 14px 23px #00343a6b}.intro-mascot.monkey{object-fit:contain}.intro h2,.outro h2{font-size:clamp(32px,4vw,50px);line-height:1.03;letter-spacing:-1px;margin:20px 0 10px}.intro p,.outro p{font-size:19px;line-height:1.25;font-weight:800;margin:0 auto 22px;max-width:500px}.primary{border:0;background:#f0cd00;color:#09252e;font-size:20px;font-weight:900;padding:14px 32px;border-radius:16px;box-shadow:0 6px 0 #ac9300}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #ac9300}.secondary{display:block;margin:18px auto 0;border:0;border-radius:13px;padding:9px 17px;background:#fff;color:#087477;font-weight:900}.outro{background:#086468ed}.outro-emoji{font-size:66px}
.game-label{position:absolute;z-index:7;top:17px;left:50%;transform:translateX(-50%);margin:0;padding:9px 16px;border-radius:13px;background:#fff;color:#075963;font-weight:900;font-size:19px;line-height:1.1;text-align:center;white-space:nowrap;box-shadow:0 5px 13px #00383a29}.pop-message{position:absolute;z-index:12;top:67px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:12px;background:#fff;color:#0b6266;font-weight:900;pointer-events:none;animation:fade-pop .9s forwards}.pop-message.bad{background:#ffd4df;color:#8d173e}@keyframes fade-pop{0%{opacity:0;transform:translate(-50%,7px)}15%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-12px)}}
.game-mascot{position:absolute;z-index:2;width:135px;height:135px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 4px #00363f5b)}.unicorn-art{left:2px;bottom:0}.sloth-art{left:12px;top:67px;width:150px;height:150px}.raccoon-art{right:3px;bottom:0}
/* Monkey: follow a short touch maze. */
.maze-scene{height:100%;display:flex;align-items:center;justify-content:center;padding:72px 20px 48px;background:radial-gradient(circle at 50% 45%,#318e88,#0b5e63 76%)}.maze-board{width:min(100%,490px,calc(100dvh - 240px));aspect-ratio:1;flex:none;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px;padding:8px;border-radius:22px;background:#0a5458;box-shadow:0 12px 19px #00323b64;touch-action:none}.maze-cell{min-width:0;min-height:0;border:0;border-radius:9px;padding:0;display:grid;place-items:center;font-size:clamp(23px,3vw,39px);background:#dcf7e7;box-shadow:inset 0 -3px 0 #a8d9cc}.maze-cell.wall{background:#156668;box-shadow:inset 0 0 0 3px #18767a;cursor:default}.maze-cell.visited{background:#a0e4d7}.maze-cell.current{background:#f5e68f;box-shadow:inset 0 0 0 4px #fff}.maze-cell img{width:90%;height:90%;border-radius:50%;object-fit:contain;pointer-events:none}.maze-help{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#fff;color:#075f62;border-radius:20px;padding:6px 13px;font-size:14px;font-weight:900;white-space:nowrap}
/* Squirrel: steer across a sky to gather acorns. */
.sky-scene{height:100%;background:linear-gradient(#4faecb,#a7e7e8 72%,#e2f7dc 72%);position:relative}.sky-scene:before,.sky-scene:after{content:"";position:absolute;z-index:0;width:300px;height:70px;background:#fff9;border-radius:50%;top:19%;left:10%;filter:blur(7px)}.sky-scene:after{top:37%;left:67%;width:230px}.sky-item{position:absolute;z-index:2;width:75px;height:75px;display:grid;place-items:center;font-size:44px;border-radius:50%;background:#fff9;box-shadow:0 5px 14px #165a6b55;user-select:none;pointer-events:none}.sky-item.hazard{background:#253f64aa}.flyer{position:absolute;z-index:5;width:126px;height:126px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 9px 4px #16546c66);transition:transform .12s}.sky-trail{position:absolute;z-index:1;left:0;right:0;bottom:0;height:29%;background:linear-gradient(160deg,#539970,#16756d);clip-path:polygon(0 60%,18% 37%,40% 64%,63% 26%,83% 55%,100% 35%,100% 100%,0 100%)}.sky-help{position:absolute;z-index:5;bottom:15px;left:50%;transform:translateX(-50%);background:#ffffffd9;color:#095966;border-radius:100px;padding:7px 14px;font-size:15px;font-weight:900;white-space:nowrap}
/* Unicorn: paint a rainbow with colors. */
.rainbow-layout{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:76px 20px 32px}.rainbow-art{height:50%;width:min(640px,90%);display:grid;place-items:center;position:relative}.rainbow-svg{height:100%;width:100%;overflow:visible}.rainbow-svg path{fill:none;stroke-width:24;stroke-linecap:round;transition:stroke .28s,filter .28s}.rainbow-goal{position:absolute;bottom:3px;border-radius:20px;background:#fff;color:#063f4b;font-size:20px;font-weight:900;padding:9px 16px;box-shadow:0 5px 13px #00343e40}.swatches{width:100%;display:flex;justify-content:center;gap:clamp(12px,2.5vw,28px)}.swatch{width:clamp(74px,12vw,112px);height:clamp(74px,12vw,112px);border-radius:24px;border:5px solid #fff;background:var(--swatch);box-shadow:inset 0 -10px 0 #0002,0 8px 12px #003a4050;display:grid;place-items:center;font-size:45px;touch-action:manipulation}.swatch:active{transform:scale(.95)}.swatch.wrong{animation:shake .3s}@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-5px)}}
/* Sloth: move a basket under falling food, avoid trash. */
.snack-scene{position:relative;height:100%;background:linear-gradient(#72b9a8,#afd9b5 75%,#447c55 75%)}.snack-scene:before{content:"";position:absolute;top:12%;left:-8%;width:116%;height:30px;border-radius:50%;background:#587d45;transform:rotate(-5deg);box-shadow:0 13px 0 #76935a}.falling-fruit{position:absolute;z-index:3;width:65px;height:65px;display:grid;place-items:center;font-size:46px;user-select:none;pointer-events:none;filter:drop-shadow(0 4px 4px #245c4966)}.falling-fruit.bad{filter:grayscale(.5) drop-shadow(0 4px 4px #245c4966)}.basket{position:absolute;z-index:4;bottom:20px;width:150px;height:75px;border:9px solid #e2a734;border-top:0;border-radius:0 0 75px 75px;background:repeating-linear-gradient(30deg,#c67c2f,#c67c2f 10px,#db9850 10px,#db9850 20px);box-shadow:0 7px 0 #3d663b}.snack-tip{position:absolute;z-index:5;left:16px;bottom:15px;border-radius:13px;background:#fff;color:#155966;padding:7px 11px;font-size:14px;font-weight:900}
/* Raccoon: move a scanner to reveal the hidden objects. */
.scan-cache,.scanner{transform:translate(-50%,-50%)}
.scan-cache.done{transform:translate(-50%,-50%) scale(.3)}
.scan-scene{position:relative;height:100%;background:radial-gradient(circle at 50% 50%,#1f8890,#083f50 72%)}.scan-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(#66dcd14d 1px,transparent 1px),linear-gradient(90deg,#66dcd14d 1px,transparent 1px);background-size:54px 54px}.scan-cache{position:absolute;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#165a58;border:5px solid #b0dbc54f;box-shadow:0 7px 14px #002a3452;z-index:3;touch-action:manipulation}.scan-cache:before{content:"🍃";font-size:50px;position:absolute;inset:0;display:grid;place-items:center;transition:opacity .18s}.scan-cache .secret{opacity:0;font-size:47px;transition:opacity .18s}.scan-cache.revealed{background:#e4fcf7;border-color:#79efda;box-shadow:0 0 18px #79efdaaa}.scan-cache.revealed:before{opacity:0}.scan-cache.revealed .secret{opacity:1}.scan-cache.done{opacity:0;transform:scale(.3);pointer-events:none;transition:.3s}.scanner{position:absolute;width:156px;height:156px;border-radius:50%;border:5px solid #82ffeb;background:#8affd61f;box-shadow:0 0 0 8px #60f7e831,inset 0 0 31px #adfff784,0 0 22px #6ffff2a0;z-index:4;pointer-events:none;transition:left .07s,top .07s}.scanner:after{content:"";position:absolute;inset:50%;width:17px;height:17px;background:#d8fff6;border-radius:50%;transform:translate(-50%,-50%)}.scan-help{position:absolute;z-index:6;left:50%;bottom:15px;transform:translateX(-50%);border-radius:30px;padding:7px 14px;background:#fff;color:#075a62;font-size:15px;font-weight:900;white-space:nowrap}
/* Keep percentage positions centred on smaller tablet screens too. */
.scan-cache,.scanner{transform:translate(-50%,-50%)}
.scan-cache.done{transform:translate(-50%,-50%) scale(.3)}
/* Squirrel: generous gaps, a clear tap cue, and three chances. */
.flap-scene{height:100%;position:relative;overflow:hidden;background:linear-gradient(#54afd0,#9fe2e8 73%,#d7f5d4 73%)}.flap-scene:before,.flap-scene:after{content:"";position:absolute;left:11%;top:16%;width:190px;height:58px;border-radius:50%;background:#fff9;filter:blur(8px)}.flap-scene:after{left:69%;top:33%;width:250px}.flap-hills{position:absolute;bottom:0;left:0;right:0;height:22%;background:linear-gradient(#5eb596,#348379);clip-path:polygon(0 60%,22% 19%,42% 66%,68% 25%,100% 67%,100% 100%,0 100%)}.flap-flyer{position:absolute;z-index:5;width:116px;height:116px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 6px #24657975);transition:filter .16s}.flap-flyer.flapping{filter:drop-shadow(0 0 18px #fff)}.flap-flyer.ouch{opacity:.5}.flap-gate{position:absolute;z-index:2;width:82px;background:linear-gradient(90deg,#217b72,#3ca694 53%,#20766e);border:5px solid #156e6a;box-shadow:0 5px 10px #24657955}.flap-gate.top{top:0;border-radius:0 0 18px 18px}.flap-gate.bottom{bottom:0;border-radius:18px 18px 0 0}.flap-gate:after{content:"🍃";position:absolute;left:13px;bottom:3px;font-size:34px}.flap-gate.bottom:after{bottom:auto;top:3px}.flap-nut{position:absolute;z-index:3;width:82px;text-align:center;font-size:41px;pointer-events:none;filter:drop-shadow(0 3px 3px #2d7f5d88)}.flap-hearts{position:absolute;z-index:8;left:18px;top:78px;font-size:28px;letter-spacing:2px;filter:drop-shadow(0 3px 2px #003e4b88)}.flap-help{position:absolute;z-index:7;bottom:15px;left:50%;transform:translateX(-50%);padding:8px 15px;border-radius:30px;background:#fff;color:#075966;font-size:15px;font-weight:900;white-space:nowrap}
.flap-scene{background:linear-gradient(#54afd0,#9fe2e8)}
/* Sloth trash is visually separate from edible fruit. */
.falling-fruit.bad{background:#ffe6e5;border:4px solid #ec5b69;border-radius:50%;font-size:39px;filter:drop-shadow(0 4px 4px #7a343466)}
/* Scanned leaves form a memory game; chosen and matched pairs stay visible. */
.scan-cache.picked{border-color:#f0cd00;box-shadow:0 0 22px #f0cd00aa}.scan-cache.picked:before,.scan-cache.peek:before,.scan-cache.matched:before{opacity:0}.scan-cache.picked .secret,.scan-cache.peek .secret,.scan-cache.matched .secret{opacity:1}.scan-cache.peek{background:#fff2bb}.scan-cache.matched{background:#74d6b2;border-color:#e9fff5;box-shadow:0 0 17px #b8fff0aa}.scan-cache.matched .secret{color:#075b59;font-size:51px}
.scan-scene,.scan-cache,.scan-cache .secret{user-select:none;-webkit-user-select:none}
@media(max-width:1050px){.game-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.game-card{min-height:295px}.card-image-wrap{width:140px;height:140px}}
@media(max-width:700px){.site-header{height:60px;padding:0 15px}.logo{font-size:29px}.header-pill{font-size:10px;padding:8px 10px}main{min-height:calc(100vh - 60px);padding:18px 12px 30px}.menu-intro{margin-bottom:20px}.menu-intro h1{letter-spacing:-1.5px}.menu-intro p{font-size:15px}.game-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-card{min-height:230px;border-radius:20px;padding:10px}.card-image-wrap{width:99px;height:99px;margin-bottom:10px}.game-card h2{font-size:20px}.game-card p{font-size:12px}.card-action{font-size:13px;padding:6px 13px}.arena{height:min(650px,calc(100dvh - 126px));min-height:410px;border-radius:22px}.game-nav{margin-bottom:7px}.back-button,.progress{padding:8px 12px;font-size:13px}.intro-mascot{width:135px;height:135px}.intro h2,.outro h2{margin:15px 0 8px}.intro p,.outro p{font-size:16px}.game-label{top:12px;font-size:15px;white-space:normal;max-width:85%}.rainbow-layout{padding-top:73px}.rainbow-art{height:46%}.swatch{font-size:30px}.sky-help,.scan-help{font-size:11px}.scanner{width:115px;height:115px}.scan-cache{width:65px;height:65px}.scan-cache:before{font-size:34px}.scan-cache .secret{font-size:34px}}
@media(max-width:700px){.game-mascot{width:80px;height:80px}.sloth-art{top:60px;width:85px;height:85px}}
.flap-finish-line{position:absolute;top:0;bottom:0;z-index:4;width:118px;box-sizing:border-box;border-left:15px solid transparent;border-right:15px solid transparent;border-image:repeating-linear-gradient(180deg,#fff 0 20px,#087b82 20px 40px) 15 stretch;background:#e7ffff38;box-shadow:inset 0 0 24px #fff8,0 0 25px #fff9;pointer-events:none}.flap-finish-label{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);padding:8px 15px;border-radius:18px;background:#fffbea;color:#075b65;font-size:21px;font-weight:900;white-space:nowrap;box-shadow:0 5px 12px #0a546280}.flap-finish-line.won{box-shadow:inset 0 0 35px #fff,0 0 34px #fff}.flap-flyer.won{filter:drop-shadow(0 0 21px #fff5b1)}
@media(max-width:700px){.flap-flyer{width:85px;height:85px}.flap-hearts{top:65px;font-size:21px}.flap-help{font-size:11px;max-width:92%;white-space:normal;text-align:center}}

/* Keep rapid taps in the squirrel game from zooming or scrolling the host page. */
.flap-scene{touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* A phone in landscape has little vertical room; the desktop 520px minimum
   would push the arena and controls off-screen. */
@media (orientation:landscape) and (max-height:600px){
  body.playing{height:100dvh;overflow:hidden}
  body.playing .site-header{display:none}
  body.playing main{height:100dvh;min-height:0;padding:4px 8px}
  body.playing .game-nav{height:34px;max-width:none;margin:0 auto 4px}
  body.playing .back-button,body.playing .progress{padding:5px 10px;font-size:12px;border-radius:9px}
  body.playing .arena{height:calc(100dvh - 50px);min-height:0;max-width:none;border-radius:14px}
  body.playing .game-label{top:4px;padding:4px 10px;font-size:13px;white-space:normal;max-width:70%}
  body.playing .maze-scene{padding:34px 12px 25px}
  body.playing .maze-board{width:min(100%,490px,calc(100dvh - 120px))}
  body.playing .maze-help{bottom:3px;font-size:11px;padding:3px 9px}
  body.playing .flap-flyer{width:66px;height:66px}
  body.playing .flap-hearts{top:6px;left:9px;font-size:18px}
  body.playing .flap-help{bottom:4px;padding:4px 10px;font-size:11px}
  body.playing .rainbow-layout{padding:42px 14px 14px}
  body.playing .swatch{width:56px;height:56px;font-size:27px;border-radius:14px}
}

/* Starting any game fills its own viewport; the WordPress loader expands the
   iframe to the device viewport as well. The menu keeps its normal page flow. */
body.playing{height:100dvh;overflow:hidden}
body.playing .site-header{display:none}
body.playing main{height:100dvh;min-height:0;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
body.playing .game-page{height:100%;min-height:0;max-width:none;display:flex;flex-direction:column}
body.playing .game-nav{width:100%;height:40px;max-width:none;flex:none;margin:0 0 4px}
body.playing .arena{width:100%;height:auto;min-height:0;max-width:none;flex:1}