@font-face{font-family:Fredoka;src:url('assets/Fredoka.ttf');font-display:swap}
:root{--forest:#174d47;--cream:#fff9e9;--gold:#f4c65e;--edge:#d2b979;--ink:#254f49;--shadow:#173b3625}
body,button,select{font-family:Fredoka,sans-serif;color:var(--ink)}button{font-weight:500;border:2px solid #bdcdb6;box-shadow:0 3px 0 #96b19c;border-radius:14px;transition:background .15s,transform .15s}button:active{box-shadow:none}button:focus-visible,select:focus-visible{outline:4px solid #2988bc;outline-offset:2px}button[aria-pressed=true],.primary{background:var(--forest);border-color:#163f39;color:#fff9dc}.app{background:linear-gradient(#fff9e50a,#f6eac916),url('assets/jardin.webp') center top/cover}header{height:12%;padding:1.4vh 2vw;align-items:flex-start}.brand{background:#fff9e9f2;border:2px solid #deca91;border-radius:10px 24px 24px 10px;padding:1vh 1.6vw;box-shadow:0 4px 0 #39654a20}.brand small{color:#87703d;letter-spacing:.2em;font-size:11px}h1{font-weight:600;font-size:clamp(24px,3.6vh,43px);color:#215d4c;letter-spacing:-.025em}.goal{background:#174d47ed;color:#fff7d9;border:2px solid #e8cf8b;border-radius:18px;font-size:clamp(15px,1.9vh,22px);padding:1vh 1.5vw;max-width:38%;box-shadow:0 4px 0 #234d3020}.story-stage{height:38%;padding:0 2vw}.mist{opacity:.38}.hero-row{inset:16% 3vw 2%;gap:3vw}.hero-station{max-width:410px}.hero-body{gap:1vw}.hero-sprite{width:70%;height:100%;object-position:center bottom;filter:drop-shadow(0 8px 5px #30503830)}.hero-caption{padding:.35vh 1.4vw;background:#fff9e9;border:2px solid var(--accent);box-shadow:0 4px 0 #284f3c20;border-radius:20px}.hero-caption strong{font-size:clamp(17px,2.2vh,25px);font-weight:600}.hero-caption span{font-size:clamp(13px,1.6vh,19px)}.light-vial{height:57%;width:clamp(30px,3.6vw,58px);border:3px solid #86b7ab;border-top:8px solid #c8a363;background:#effff69c;border-radius:12px 12px 23px 23px}.light-vial span{font-family:Fredoka;font-weight:500;color:#375744}.lantern-scene{top:-1%;height:31%;width:11%;left:44.5%}.cloud-enemy{top:-2%;height:35%;right:3%;width:16%}.cloud-enemy span{color:#5b587a;border:1px solid #c7c6da}.team-light{left:2%;top:0;width:29%;border-color:#bf9a50;font-size:clamp(12px,1.6vh,18px)}
.lower{background:linear-gradient(120deg,#fff9e8f5,#e9f3e8f7);border-top:5px solid #cfb478;padding:1vh 1.2vw .8vh;gap:.8vh;box-shadow:0 -4px 20px #345d3615}.menu{gap:3vw;padding:0 2vw}.intro{width:30%;max-width:340px;align-self:center}.intro:before{content:'';display:block;height:7vh;width:10vh;background:url('assets/mariposa.webp') center/contain no-repeat;transform:rotate(-14deg)}.intro h2{font-size:clamp(24px,4vh,43px);color:#245e4d;font-weight:600}.intro p{font-size:clamp(14px,1.9vh,21px);line-height:1.3}.eyebrow{color:#8e713a;font-size:11px}.setup{width:65%;max-width:900px;gap:.9vh}.seg{gap:.7vw}.seg button{font-size:clamp(15px,2vh,22px);min-height:4.5vh;padding:.5vh 1vw;background:#fffdf4}.seg button[aria-pressed=true]{background:var(--forest);color:#fff9e2;border-color:#194b3e}.play-style button{font-size:clamp(14px,1.8vh,19px);min-height:3.7vh}.selects{gap:1vw}.selects label{color:#526c55;font-size:clamp(13px,1.6vh,18px);font-weight:400}.selects select{background:#fffdf5;border:2px solid #c5cead;border-radius:12px;font-size:clamp(15px,1.9vh,21px);padding:.65vh .8vw;min-height:4.6vh}.categories{gap:.6vw}.categories button{font-size:clamp(13px,1.5vh,17px);border:1px solid #ccc9ab;border-radius:20px;box-shadow:none;background:#fffdf4;padding:.55vh .9vw}.categories button[aria-pressed=true]{background:#e6edcc;border-color:#9cba81;color:#33583c}.primary.start{align-items:center;justify-content:center;gap:2vw;background:linear-gradient(#f9d779,#edba4d);border:2px solid #dbb054;border-bottom:5px solid #a8792e;box-shadow:0 4px 12px #806a2020;color:#594019;border-radius:17px;min-height:5.5vh;font-size:clamp(22px,2.9vh,31px);padding:.5vh 2vw}.board{background:#fff9e9;border:3px solid var(--accent);border-radius:22px;padding:.7vh .7vw;box-shadow:0 4px 0 #829b7329;gap:.6vh}.mission{background:var(--forest);color:#fff9dd;border:1px solid #387669;border-radius:15px;min-height:7.2vh;padding:.6vh 1vw;box-shadow:0 3px 0 #103a3020}.mission small{color:#c9e7cd;font-size:clamp(12px,1.4vh,16px)}.mission strong{font-weight:500;font-size:clamp(24px,3.4vh,39px);color:#fff1b8}.listen{width:45px;height:45px;border-radius:50%;background:#fff5d1;color:transparent!important;font-size:0;position:relative;box-shadow:0 3px 0 #a88a44;border:2px solid #d8bd76;flex-shrink:0}.listen:before{content:'';display:block;width:24px;height:24px;margin:auto;background:var(--forest);clip-path:polygon(0 35%,25% 35%,55% 10%,55% 90%,25% 65%,0 65%)}.listen:after{content:'))';position:absolute;font:17px Arial;right:4px;top:12px;color:var(--forest)}.garden{background:radial-gradient(ellipse,#eff7d9,#faf8e9);border:1px solid #dae3b9;border-radius:15px;gap:.4vh 1vw;padding:.4vh .8vw}.butterfly-art{object-fit:contain;width:100%;height:100%;max-width:230px;filter:drop-shadow(0 6px 3px #644c2520);pointer-events:none}.butterfly{overflow:visible}.butterfly .butterfly-art{animation:gentleWing 4s ease-in-out infinite;animation-delay:var(--delay)}.butterfly span{font-size:clamp(21px,2.9vh,33px);color:#254c3b;background:#fffef4;border:2px solid #d8c384;border-bottom:4px solid #bc9f63;border-radius:12px;padding:.4vh 1vw;box-shadow:0 4px 8px #7c683320;max-width:98%;font-weight:500}.butterfly:hover span{background:#fff2b9;border-color:#bd922a}.butterfly:active .butterfly-art{transform:scale(.9)}.butterfly:disabled{opacity:1}.board.correct{box-shadow:0 0 0 3px #b9e6a7}.board.correct .garden{background:#e2f2d3}.board-footer{min-height:3.7vh}.board-footer p{color:#416547;font-size:clamp(12px,1.6vh,18px)}.hint{font-weight:400;font-size:clamp(13px,1.6vh,18px);border:1px solid #c4cbaf;border-radius:10px;background:#f3efd9;box-shadow:none}.sentence{font-size:clamp(20px,2.8vh,32px);color:#315c4b;line-height:1.45}.sentence mark{background:#ffe59b;border-bottom:3px solid #c79939;padding:2px 7px;border-radius:8px}.answers button{background:#fff9df;border:2px solid #d5c79b;border-bottom:4px solid #b7a875;font-size:clamp(16px,2vh,24px)}nav{gap:.6vw}nav button{background:#fffcf2;border:1px solid #bdcbb4;border-radius:11px;box-shadow:0 2px #a6baa4;font-size:clamp(12px,1.5vh,17px);font-weight:400;padding:.6vh 1vw}nav .music-toggle{background:#f9edbe}.nav-note{color:#607b5d;font-size:clamp(11px,1.4vh,15px)}.pause-layer{background:#fff9e9f5}.pause-layer h2{font-size:36px}.finish{background:#fffaf0e8;border:2px solid #dbc486;border-radius:22px;gap:2vh}.finish h2{color:#29654e;font-size:clamp(24px,3.5vh,40px)}.finish>.primary{padding:1vh 3vw;border-bottom:4px solid #0b392c}.free-butterfly .butterfly-art,.garden-wings .butterfly-art{max-width:none}.app[data-phase=menu] .hero-row{inset-top:5%}.app[data-phase=menu] .light-vial{display:none}.app[data-phase=menu] .hero-caption span{display:none}.app[data-phase=menu] .mist{opacity:.15}.app[data-phase=menu] .hero-sprite{width:90%}.app[data-count='1'] .hero-row{inset-inline:28%}.app[data-count='1'] .lantern-scene{left:18%;width:15%;height:55%;top:21%}.app[data-count='1'] .cloud-enemy{right:13%;width:21%;height:48%}
@keyframes gentleWing{0%,100%{transform:rotate(-3deg) scale(.96)}50%{transform:rotate(3deg) scale(1)}}
@media(max-width:700px) and (orientation:portrait){.app{height:auto;min-height:100dvh;overflow:visible;padding-top:0}.app header{height:90px;padding:10px 12px}.brand{padding:8px 14px}.brand h1{font-size:26px}.brand small{font-size:9px}.story-stage{height:220px}.lower{position:relative;top:auto;bottom:auto;min-height:560px;padding:10px 8px}.intro{display:none}.menu{padding:0;display:block}.setup{width:100%;gap:13px}.seg button{min-height:44px;font-size:17px;padding:8px}.selects{grid-template-columns:1fr 1fr;gap:10px}.selects label:first-child{grid-column:1/-1}.selects select{font-size:18px;min-height:44px;padding:8px}.categories{gap:7px}.categories button{font-size:14px;padding:8px 10px;min-height:39px}.primary.start{min-height:55px;font-size:25px;margin-bottom:12px}.boards{flex-direction:column;flex:none;gap:12px}.board{min-height:410px;flex:none;padding:8px}.garden{min-height:260px;gap:8px}.mission{min-height:66px;padding:8px 12px}.mission strong,.app[data-count='3'] .mission strong{font-size:29px}.mission small,.app[data-count='3'] .mission small{font-size:13px}.butterfly span,.app[data-count='3'] .butterfly span{font-size:24px}.butterfly-art{max-height:135px}.board-footer{min-height:40px}.board-footer p{font-size:15px}.hint{min-height:40px;padding:7px 12px}.app[data-count='3'] .listen{min-width:45px;min-height:45px}.hero-row{inset:15% 0 2%;gap:3px}.hero-caption{padding:3px 8px;gap:0}.hero-caption strong{font-size:15px}.hero-caption span{font-size:12px}.app[data-count='1'] .hero-row{inset-inline:23%}.app[data-count='1'] .lantern-scene{left:4%;width:22%;height:55%;top:20%}.app[data-count='1'] .cloud-enemy{right:3%;width:25%;height:40%;top:5%}.light-vial{width:28px;min-width:28px}.cloud-enemy{width:22%;height:25%}.lantern-scene{height:27%;width:16%}.team-light{width:37%;font-size:10px}.sentence-area{min-height:270px}.sentence{font-size:24px}.answers button{min-height:46px;font-size:18px}.finish{min-height:350px}.finish h2{font-size:28px}nav{flex-wrap:wrap;gap:7px;justify-content:center;margin-top:auto;padding-top:10px}nav button{font-size:14px;padding:8px;min-height:42px}.ending-controls{min-height:350px}}
@media(prefers-reduced-motion:reduce){.butterfly-art{animation:none!important}button{transition:none}}
/* Keep the lantern and Nublin above the explorers, never over their faces. */
.app:not([data-count='1']) .hero-row{inset:29% 3vw 2%}.app:not([data-count='1']) .lantern-scene{top:-2%;height:25%}.app:not([data-count='1']) .cloud-enemy{height:25%;top:-2%}.music-toggle[aria-pressed=true]{background:#f9edbe;color:#5d4d24;border-color:#c4ac6a}.app:not([data-count='1']) .story-stage{--lamp-y:10%}
@media(max-width:700px) and (orientation:portrait){.app:not([data-count='1']) .hero-row{inset:29% 0 2%}.app:not([data-count='1']) .lantern-scene{height:24%}.app:not([data-count='1']) .cloud-enemy{height:24%}}