/* V4 uses the exact same 540 x 960 coordinate space for art and input. */
:root{--ink:#123c3c;--cream:#fff6d9;--gold:#ffcb48;--leaf:#2e8d62;--mint:#bdffd0;color-scheme:dark}
body{background:radial-gradient(ellipse at 30% 40%,#205e54,#0b252c 75%)}
.masthead{border-color:#c5efbd22}.wordmark{color:#fff6d9}.logo-dot{color:#ffcb48}.sound{background:#17443e;border-color:#76ae7b55}
main{grid-template-columns:minmax(0,1fr) 230px;max-width:1400px}.cabinet{border:1px solid #85b17b55;border-radius:22px;box-shadow:0 24px 80px #001d2880}#game{background:#123c3c}
.editorial h1{font-size:43px;line-height:.98;letter-spacing:-2px;margin:22px 0}.editorial h1 span{color:#ffcb48}.desktop-brand p{font-size:17px;line-height:1.55;color:#c0d8c8}.micro{font-size:9px;letter-spacing:1.8px;color:#b9d7bd}.v3-tools{margin-top:30px}.v3-tools button{background:#265c50;color:#e8f4d9;border:1px solid #8fbc8155}.desktop-note{font-size:11px;line-height:1.6;color:#9fbeac;margin-top:28px}.controls{color:#b5d0ba}
#v4-ui{position:fixed;z-index:12;isolation:isolate;overflow:hidden;container-type:inline-size;color:#fff5d7;font-family:Arial,Helvetica,sans-serif;border-radius:inherit;--u:1cqw}
.v4-screen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#17484222,#153a2c00 45%,#113b30f0),url('assets/menu-forest.svg') center/100% 100%;display:flex;flex-direction:column;padding:6cqw;gap:2cqw;font-size:3cqw;animation:screen-in .24s ease-out}
.v4-screen button{touch-action:manipulation;font-family:inherit;font-weight:900;font-size:3.2cqw;min-height:11cqw;border:1px solid #ecffb23a;box-shadow:0 .8cqw 0 #092a2677,0 2cqw 4cqw #001c2522;border-radius:3cqw;background:linear-gradient(#2e7762,#205646);color:#fff4cf;transition:transform .12s,filter .12s;cursor:pointer;padding:2cqw 3cqw}
.v4-screen button:hover{filter:brightness(1.12);transform:translateY(-.5cqw)}.v4-screen button:active{transform:translateY(.8cqw);box-shadow:none}.v4-screen button:disabled{opacity:.5;cursor:default;transform:none}
.v4-screen button:focus-visible{outline:3px solid white;outline-offset:3px}.v4-screen .primary{background:linear-gradient(#ffdb62,#ffbd32);border:1px solid #fff1a0;color:#553712;box-shadow:0 1.2cqw 0 #bd751b,0 2cqw 7cqw #07252155;text-shadow:0 1px #ffeb9c;font-size:4.5cqw;min-height:14cqw;border-radius:4cqw}
.v4-screen .quiet{background:#163e38bb;box-shadow:none;color:#cee6cb;border:1px solid #b9dfb72a;min-height:10cqw}.v4-screen .text-button{background:transparent;border:0;box-shadow:none;color:#cfdfba;font-size:2.7cqw;min-height:8cqw}.topline{display:flex;align-items:center;justify-content:space-between;gap:3cqw;font-size:2.4cqw;font-weight:bold;letter-spacing:.15cqw}.topline .coin{background:#113c32cc;color:#ffe48c;padding:2cqw 3cqw;border:1px solid #ffe58455;border-radius:8cqw;font-size:3cqw;letter-spacing:0}.small-cap{text-transform:uppercase;letter-spacing:.6cqw;font-size:2.2cqw;color:#d4ecc8;font-weight:900}.menu-logo{text-align:center;margin-top:3cqw;transform:rotate(-4deg);position:relative;z-index:2;animation:logo-breathe 4s ease-in-out infinite}
.menu-logo span{display:block;color:#fff8cf;font-size:7.4cqw;font-weight:1000;line-height:.95;letter-spacing:-.2cqw;text-shadow:0 .7cqw #345138,0 1.2cqw #123d35;-webkit-text-stroke:.2cqw #184a3c}.menu-logo strong{display:block;font-size:17.8cqw;font-weight:1000;line-height:1.04;letter-spacing:-1cqw;color:#ffcf4d;-webkit-text-stroke:.4cqw #553525;paint-order:stroke fill;text-shadow:0 1cqw #c27426,0 2cqw #31402e,0 3cqw 5cqw #082c2c88}.logo-tag{margin-top:1cqw;text-align:center;font-size:2.4cqw;letter-spacing:.7cqw;color:#ffffdf;font-weight:bold;position:relative;z-index:2}
.menu-hero{position:relative;flex:1;min-height:31cqw;max-height:51cqw;margin:-1cqw 0 0}.hero-hole{position:absolute;left:16%;right:16%;bottom:6%;height:24%;border-radius:50%;background:radial-gradient(ellipse,#102724 40%,#604a2d 48%,#b98d49 54%,#75b856 57%,transparent 62%);filter:drop-shadow(0 1cqw 1cqw #061d2677)}.hero-brat{position:absolute;height:96%;left:18%;bottom:8%;transform:rotate(-8deg);animation:hero-pop 4s ease-in-out infinite;filter:drop-shadow(1cqw 1cqw 0 #092d3155)}.hero-vex{position:absolute;height:64%;right:8%;bottom:13%;transform:rotate(9deg);animation:fox-pop 7s ease-in-out infinite;filter:drop-shadow(1cqw 1cqw 0 #092d3155)}.hero-bubble{position:absolute;right:1%;top:7%;transform:rotate(8deg);background:#fff2c9;color:#4b4231;border:1px solid #ffd46a;border-radius:4cqw 4cqw 4cqw 0;padding:2.6cqw;font-size:2.7cqw;font-weight:900;box-shadow:0 .8cqw 0 #11352b44;z-index:3}
.menu-progress{background:#123d32d9;border:1px solid #c6e59b33;border-radius:3cqw;padding:3cqw 4cqw}.menu-progress .row{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:2.8cqw}.menu-progress .row small{font-size:2.4cqw;color:#d7e5c0}.progress-track{height:1.6cqw;background:#0b2d29;border-radius:4cqw;overflow:hidden;margin:2cqw 0 0}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#74df8d,#e5f199)}.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:2.5cqw;margin-top:2cqw}.menu-actions>.primary{grid-column:1/-1}.menu-actions .wide{grid-column:1/-1}.menu-note{text-align:center;font-size:2.1cqw;letter-spacing:.25cqw;color:#b8d3ac;margin:2cqw 0 0}
.fireflies{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.fireflies i{position:absolute;width:1cqw;height:1cqw;background:#ffffbd;border-radius:50%;box-shadow:0 0 3cqw #e0ff91;animation:firefly 7s ease-in-out infinite}.fireflies i:nth-child(2n){animation-duration:9s;background:#e6fbc3}.page-title{font-size:7.3cqw;font-weight:1000;letter-spacing:-.3cqw;text-align:center;margin:1cqw 0;color:#fff1c7;text-shadow:0 .7cqw #163b32}.page-sub{text-align:center;font-size:2.7cqw;color:#d4e1bd;line-height:1.5;margin:0}.menu-divider{width:18cqw;height:1px;background:#ffdd8455;margin:1cqw auto}
.map-screen{padding-bottom:3cqw;background:linear-gradient(#123b35f0,#153e38ee),url('assets/menu-forest.svg') center/cover}.map-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;margin:1cqw -3cqw;padding:0 3cqw;scrollbar-width:thin;scrollbar-color:#c9dfa166 transparent}.map-land{height:350cqw;position:relative;background:radial-gradient(ellipse at 20% 30%,#69a45b24,transparent 35%),radial-gradient(ellipse at 80% 80%,#8d68b744,transparent 35%);margin-bottom:4cqw}.map-path{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}.v4-screen .map-node{position:absolute;width:15cqw;height:15cqw;min-height:15cqw;transform:translate(-50%,-50%);border-radius:50%;padding:0;background:linear-gradient(#526d68,#304843);border:1.2cqw solid #607e6a;box-shadow:0 1cqw 0 #0d2828;display:flex;justify-content:center;align-items:center;font-size:5cqw;overflow:visible}.v4-screen .map-node.open{background:linear-gradient(#a4e67e,#50af67);border-color:#d2f7a3;color:#163f32}.v4-screen .map-node.boss{background:linear-gradient(#ae81dc,#604c96);border-color:#d5b0ed;color:#fff4d5}.v4-screen .map-node.current{outline:1cqw solid #ffc84d;outline-offset:1cqw}.map-node .node-stars{position:absolute;top:100%;font-size:2.8cqw;letter-spacing:.1cqw;white-space:nowrap;color:#ffda64;text-shadow:0 1px #62452a}.map-chapter{position:absolute;font-size:2cqw;letter-spacing:.2cqw;color:#bdcca5;left:2cqw}.coming-soon{background:linear-gradient(120deg,#343452,#1c303f);border:1px solid #a991d855;border-radius:3cqw;text-align:center;padding:4cqw;font-size:2.7cqw;line-height:1.8;margin:0 1cqw 3cqw}.coming-soon strong{display:block;color:#dac5f3;font-size:4.6cqw;letter-spacing:.2cqw}.map-foot{display:flex;gap:3cqw;align-items:center;justify-content:space-between}.map-foot button{min-width:30cqw}.map-foot span{font-size:2.4cqw;color:#d6dfbe}
.result-screen{align-items:stretch;justify-content:center;background:radial-gradient(ellipse at 50% 36%,#4e9b5dbb,#103d34ee 68%),url('assets/menu-forest.svg') center/100% 100%;text-align:center;gap:2.5cqw}.result-screen.world{background:radial-gradient(ellipse at 50% 30%,#96774988,#174e41ee 60%),url('assets/menu-forest.svg') center/cover}.result-kicker{color:#d8edb9;letter-spacing:.55cqw;font-size:2.6cqw;font-weight:900}.result-title{font-size:8cqw;font-weight:1000;line-height:1;letter-spacing:-.4cqw;text-shadow:0 1cqw #11362b;margin:0}.result-screen.world .result-title{font-size:7.3cqw;color:#ffdd78}.result-stars{font-size:12cqw;color:#ffc94f;letter-spacing:1cqw;text-shadow:0 1cqw #9d6328;margin:1cqw 0}.result-stars span{display:inline-block;animation:star-in .5s cubic-bezier(.2,1.6,.4,1) both}.result-stars span:nth-child(2){animation-delay:.14s}.result-stars span:nth-child(3){animation-delay:.28s}.result-stars .empty{color:#557467;text-shadow:none}.result-actor{height:29cqw;object-fit:contain;animation:defeated 1.4s ease-in-out both}.result-screen.world .result-actor{height:24cqw}.reward-box{background:#11382fca;border:1px solid #e9d98755;border-radius:4cqw;padding:4cqw;font-size:3cqw;line-height:1.6}.reward-box strong{display:block;font-size:5cqw;color:#ffda6f}.result-meta{font-size:2.6cqw;color:#d3e0b9}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw;margin-top:2cqw}.result-actions .primary{grid-column:1/-1}.confetti{position:absolute;inset:0;pointer-events:none;z-index:-1}.confetti i{position:absolute;width:1.5cqw;height:3cqw;animation:confetti-fall 3.5s linear infinite}.skip-animation{position:absolute;right:4cqw;top:3cqw!important;min-height:8cqw!important;font-size:2.6cqw!important;background:#16423588!important;box-shadow:none!important}
.intro-screen{justify-content:center;text-align:center;background:linear-gradient(#151d38ed,#26314add),url('assets/menu-forest.svg') center/cover;gap:5cqw}.intro-screen img{height:53cqw;object-fit:contain;filter:drop-shadow(0 0 6cqw #bc91ef66);animation:boss-enter .6s ease-out}.intro-screen .page-title{font-size:9cqw;color:#ffd375}.intro-screen p{font-size:3.4cqw;line-height:1.5;margin:0}.intro-rule{padding:4cqw;background:#101f32bb;border:1px solid #b897d950;border-radius:3cqw;color:#e9d8f1}.quick-screen{justify-content:center;text-align:center;gap:5cqw}.quick-screen img{height:38cqw;object-fit:contain}.quick-screen .guide-card{padding:4cqw;text-align:left;background:#123c32ed;border:1px solid #b4e18c66;border-radius:4cqw;font-size:3.3cqw;line-height:1.55}.quick-screen .guide-card strong{color:#ffdc72}.quick-screen .guide-card p{margin:2cqw 0}.screen-static *, .reduced #v4-ui *{animation:none!important;transition:none!important}
#settings-dialog, #collection-dialog, #objective-dialog{color:#fff6da;background:linear-gradient(140deg,#205749,#103a35);border:1px solid #b6d69377;box-shadow:0 25px 100px #001b22aa;border-radius:20px;width:min(540px,94vw);max-height:calc(100dvh - 24px);padding:22px}dialog h2{color:#ffda70;font-size:24px;letter-spacing:-.5px}dialog p{color:#d2e4cb}dialog button{background:#ffcf52;color:#4e3616;border-radius:10px;min-height:44px;padding:10px 16px;font-size:14px}.setting-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px 0;border-top:1px solid #c8e3b533;font-size:14px}.setting-row input[type=range]{grid-column:1/-1;width:100%;accent-color:#ffcf52;min-height:30px}.setting-row label{align-self:center}.setting-row output{color:#ffe28c}.settings-bottom{display:flex;gap:8px;flex-wrap:wrap}.power-card small{color:#ffda72}.power-card button{align-self:center}.power-card p{font-size:13px}#lesson,#context-help{background:#173e36f7;color:#f8f6da;border-color:#9bc77e}#lesson h2{color:#ffe08d}#lesson button{background:#ffda68;color:#4d3b1c;min-height:32px}.objective{background:#123b35e8;color:#d5ebcd;border-color:#88b586}.objective strong{color:#ffdc74}.objective.complete strong{color:#bcffcb}#objective-help{background:#32694e;color:#fff3c5}#objective-feedback{background:#173e35e8;color:#d2ffd2}.objective .goal-label{font-weight:600}#context-help{font-size:11px}
@keyframes screen-in{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}@keyframes logo-breathe{50%{transform:rotate(-2deg) scale(1.025)}}@keyframes hero-pop{0%,100%{transform:rotate(-8deg) translateY(2cqw)}45%{transform:rotate(-5deg) translateY(-1cqw)}70%{transform:rotate(-9deg) translateY(1cqw)}}@keyframes fox-pop{0%,100%{transform:rotate(9deg) translateY(2cqw)}50%{transform:rotate(4deg) translateY(-1cqw)}}@keyframes firefly{0%,100%{opacity:.1;transform:translate(0,0)}50%{opacity:.9;transform:translate(4cqw,-8cqw)}}@keyframes star-in{from{opacity:0;transform:scale(.3) rotate(-22deg)}to{opacity:1;transform:scale(1)}}@keyframes confetti-fall{0%{transform:translateY(-10cqw) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(185cqw) rotate(650deg);opacity:0}}@keyframes defeated{0%{transform:rotate(-4deg) scale(1.15);filter:brightness(3)}30%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}100%{transform:rotate(5deg) scale(.94)}}@keyframes boss-enter{from{opacity:0;transform:scale(1.4) translateY(9cqw)}to{opacity:1;transform:none}}
@media(max-width:850px){main{display:flex;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.cabinet{border:0;border-radius:0}.masthead,.editorial{display:none}}
@media(min-width:851px) and (max-height:700px){.editorial h1{font-size:32px}.desktop-brand p{font-size:14px}.v3-tools{margin-top:14px}.desktop-note{display:none}}
@media(prefers-reduced-motion:reduce){#v4-ui *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@keyframes trail-flow{to{stroke-dashoffset:-20}}.map-path path:last-child{animation:trail-flow 5s linear infinite}

.menu-hero{overflow:hidden}@keyframes fox-pop{0%,8%,94%,100%{transform:rotate(9deg) translateY(42cqw);opacity:0}20%,80%{transform:rotate(5deg) translateY(0);opacity:1}50%{transform:rotate(8deg) translateY(-1cqw);opacity:1}}
