:root{--ink:#25392B;--muted:#62715B;--cream:#FFF9E9;--butter:#FFD85A;--edge:#BD8734;--rose:#CF6265;--display:'Nai Display CN','Nai Display Latin','Nai Body SC',sans-serif;--body:'Nai Body Latin','Nai Body SC','Nai Body Thai',system-ui,sans-serif;font-family:var(--body);font-size:16px;color:var(--ink);background:#F8F1DF;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #156E76;outline-offset:4px}button:active{transform:translateY(2px)}svg{width:24px;height:24px;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--display);font-weight:400;line-height:1.14}p{line-height:1.7}button{touch-action:manipulation}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;top:-70px;left:10px;z-index:100;padding:12px;background:white}.skip-link:focus{top:10px}:lang(en),:lang(id),:lang(ms){--display:'Nai Display Latin','Nai Body Latin',sans-serif}:lang(th){--display:'Nai Body Thai','Nai Body Latin',sans-serif}:lang(vi){--display:'Nai Body Latin',sans-serif}:lang(th) h1,:lang(vi) h1{font-weight:800;line-height:1.2}:lang(th) h2,:lang(vi) h2{font-weight:800}:lang(th){line-height:1.7}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:60px;padding:15px 28px;border-radius:18px;background:var(--butter);box-shadow:0 5px 0 #BD8734,0 10px 22px #5E682026,inset 0 2px 0 #FFF2AC;color:#3C351F;font-size:18px;font-weight:800;border:1px solid #EDBD42;transition:background .16s,transform .16s}.button:hover{background:#FFE78A}.button:active{box-shadow:0 2px 0 #BD8734;transform:translateY(3px)}.button.secondary{background:#F7EED8;border-color:#E5D8BB;box-shadow:0 3px 0 #CFBE9A}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;padding:11px 12px;min-height:44px;font-weight:700;font-size:14px;border-radius:12px}.text-button:hover{background:#FFFFFF60}.round-button{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:#FFF9EDE6;border:1px solid #FFFFFF9E;border-radius:16px;box-shadow:0 3px 9px #30412712;flex-shrink:0}.round-button:hover{background:#FFFDF6}.full-width{width:100%}.kicker{font-size:11px;font-weight:800;letter-spacing:2.8px;line-height:1.5}.language select{max-width:155px;min-height:44px;background:#FFF8EAC7;color:var(--ink);border:1px solid #FFFFFF85;border-radius:14px;padding:8px 28px 8px 12px;cursor:pointer;font-size:13px;font-weight:700}.language{display:inline-flex;align-items:center}.brand{display:flex;gap:10px;align-items:center;font-size:18px;font-weight:800;white-space:nowrap}.brand small{display:block;font-size:9px;letter-spacing:3.4px;margin-top:3px}.brand-drop{background:#FFD95F;border:2px solid #E4B44F;border-radius:50% 50% 46% 46%;display:grid;place-items:center;width:42px;height:49px;font-family:'Nai Display Latin';font-size:29px;transform:rotate(-9deg);box-shadow:inset 3px 3px 0 #FFF4AE}.hero{min-height:max(900px,100svh);height:auto;display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate}.scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-2;background:#D9E5AD}.living-world{width:100%;height:100%;display:block}.hero-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#F7F1D5EB 0%,#F7F1D5C9 25%,#F7F1D52B 57%,transparent 77%),linear-gradient(0deg,#F6EFD8ED 0%,#F6EFD800 30%)}.home-header{height:108px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:relative;z-index:2}.header-actions{display:flex;align-items:center;gap:12px}.hero-copy{position:relative;flex-shrink:0;z-index:2;width:58%;padding:90px 0 0 7%;pointer-events:none}.hero-copy>*{pointer-events:auto}.hero-copy .kicker{color:#658067;margin-bottom:25px}.hero-copy h1{font-size:clamp(60px,6.8vw,112px);letter-spacing:-3px;line-height:1.12;text-shadow:0 2px 0 #FFFFD9}.hero-copy h1 em{font-style:normal;color:#A95B2F}.hero-intro{font-size:17px;max-width:410px;margin:26px 0 30px;color:#4F624B;font-weight:600}.play-cta{padding:17px 25px;min-width:235px;font-size:21px;min-height:68px}.play-cta>svg:last-child{margin-left:25px}.hero-footnote{font-size:12px;color:#647557;margin-top:17px}.sprite{display:block;width:100%;aspect-ratio:3/4;background-image:var(--atlas);background-position:var(--sx) var(--sy);background-repeat:no-repeat;background-size:400% 200%;filter:drop-shadow(0 14px 10px #684F2517)}.sprite[data-id="egg"]{clip-path:inset(0 3.125% 0 16.666%)}.sprite[data-id="dog"]{aspect-ratio:430/512;background-size:357.2093% 200%;background-position:0 100%}.hero-cast{position:absolute;right:1%;top:10%;width:53%;height:65%;z-index:1;pointer-events:none}.hero-frog{position:absolute;left:22%;top:1%;width:72%;animation:soft-idle 5.5s ease-in-out infinite;transform-origin:50% 88%}.hero-mouse{position:absolute;width:43%;left:0;top:47%;animation:soft-idle 4.7s ease-in-out -1.4s infinite;transform-origin:50% 88%}.hero-egg{position:absolute;width:32%;right:-1%;top:65%;animation:soft-idle 4.4s ease-in-out -.8s infinite}.orbit-sticker{position:absolute;right:2%;top:25%;font-family:'Nai Display Latin';font-size:21px;line-height:.95;text-align:center;border-radius:50%;width:98px;height:98px;display:grid;align-content:center;background:#FFF6D0;transform:rotate(14deg);border:2px dashed #E1B966;color:#A96B33;box-shadow:0 8px 20px #6F612815}.world-dock{position:relative;margin:auto 7% 30px;padding-top:48px;z-index:3}.dock-title{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:15px}.dock-title h2{font-size:27px}.dock-title p{font-size:13px;color:#5F7057}.world-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.world-card{background:#FFFBEDD9;padding:6px 6px 11px;border:2px solid transparent;border-radius:18px;box-shadow:0 4px 0 #A9B18C33;min-width:0;transition:transform .2s,border-color .2s}.world-card:hover{transform:translateY(-3px)}.world-card.selected{border-color:#486244;background:#FFF8D9;box-shadow:0 4px 0 #48624433}.world-thumb{display:block;position:relative;aspect-ratio:2.35;overflow:hidden;border-radius:11px}.world-thumb img{width:100%;height:100%;object-fit:cover}.world-card strong{display:block;font-size:13px;line-height:1.4;padding:10px 3px 0;overflow-wrap:anywhere}.selected-check{display:none;position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:#FFFADF;color:#365832;align-items:center;justify-content:center}.selected-check svg{width:16px;height:16px}.selected .selected-check{display:flex}.how-section{text-align:center;padding:90px 7% 85px;background:#FFFAED}.how-section>.kicker{color:#8C825F}.how-section h2{font-size:42px;margin:16px 0 42px}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1000px;margin:0 auto 42px}.how-steps article{position:relative;padding:16px 12px}.how-steps article>span{position:absolute;top:10px;left:15px;color:#B6B49B;font-size:12px}.how-steps h3{font-size:15px;font-weight:700;margin-top:22px}.key-demo,.milk-demo{height:64px;display:flex;align-items:center;justify-content:center;gap:13px;font-family:'Nai Display Latin';font-size:28px;color:#7C8A62}.key-demo svg{width:40px;height:40px}.milk-demo .shot-icon{width:26px;height:26px}.how-section>.button{font-size:16px}footer{padding:26px 7%;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#707B61;border-top:1px solid #E9E3D1}
/* The static illustration is a reusable base; all living layers use CSS only. */
.vegetation{transform-box:view-box;animation:plant-sway 6.4s ease-in-out infinite;will-change:transform}.vegetation.left{transform-origin:120px 941px}.vegetation.right{transform-origin:1560px 941px;animation-delay:-3.1s;animation-duration:7.8s}.soft-glow{animation:light-breathe 5.8s ease-in-out infinite}.world-spark{animation:twinkle var(--duration,5s) ease-in-out var(--delay,0s) infinite;transform-box:fill-box;transform-origin:center}.blink-eyelid{animation:eyelid 7.6s infinite;opacity:0}.floating-drop{position:absolute;width:36px;height:45px;background:radial-gradient(circle at 30% 26%,#FFFCE2 1%,#FFE584 45%,#DAB74F 100%);border-radius:52% 50% 44% 44%;box-shadow:inset 2px 3px 4px #FFFDEBB8,0 8px 16px #9B883B19;opacity:.85;animation:drop-float 7s ease-in-out infinite}.floating-drop:before{content:'';position:absolute;left:9px;top:-6px;width:18px;height:23px;background:#FFE686;border-radius:80% 0 40% 40%;transform:rotate(-34deg);z-index:-1}.floating-drop i{position:absolute;width:4px;height:6px;background:#4D5A35;border-radius:50%;top:21px;left:9px;animation:blink 5.9s infinite;transform-origin:center}.floating-drop i+i{left:23px}.floating-drop b{position:absolute;width:8px;height:4px;border-bottom:1px solid #796735;border-radius:50%;top:28px;left:15px}.drop-one{left:4%;top:34%}.drop-two{right:3%;top:52%;width:28px;height:35px;animation-delay:-3s;transform:scale(.75)}.drop-two i{top:15px}.drop-two i+i{left:19px}.drop-two b{top:22px;left:12px}.scene[data-world="forest"] .floating-drop{box-shadow:0 0 28px #FFF3BA50}.scene[data-world="cloud"] .floating-drop{background:radial-gradient(circle at 30% 20%,#FFF8EA,#FFD1CD 55%,#ECA8AC)}
@keyframes plant-sway{0%,100%{transform:rotate(-.25deg)}50%{transform:rotate(.35deg)}}@keyframes light-breathe{0%,100%{opacity:.25}50%{opacity:.55}}@keyframes twinkle{0%,100%{opacity:.08;transform:translateY(3px) scale(.65)}50%{opacity:.6;transform:translateY(-8px) scale(1)}}@keyframes eyelid{0%,90%,95%,100%{opacity:0}91%,94%{opacity:1}}@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}45%,47%{transform:scaleY(.12)}}@keyframes drop-float{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -12px;rotate:5deg}}@keyframes soft-idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-8px) scale(1.015,.988)}}
/* Full-window arena, not a phone frame. */
.in-game{overflow:hidden;background:#C2DA9E}.game-screen{position:fixed;inset:0;isolation:isolate;overflow:hidden}.battle-scene{z-index:0}.battle-shade{position:absolute;inset:0;background:linear-gradient(#20372825,transparent 28%,transparent 80%,#20372814);z-index:1;pointer-events:none}.game-screen>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;outline:none}.game-hud{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));left:32px;right:32px;display:flex;gap:18px;align-items:center;pointer-events:none}.game-hud button{pointer-events:auto}.health-block{width:205px;filter:drop-shadow(0 2px 4px #172F3620)}.health-label{display:flex;gap:7px;align-items:center;color:#FFFCE9;font-size:12px;font-weight:800;text-shadow:0 1px 5px #405227}.health-label svg{color:#FFCCC3;fill:#D76C68;stroke:#FFF3E1;width:23px;height:23px}.health-track{height:12px;background:#2C4E3CAC;overflow:hidden;border:2px solid #FFF9E5D9;border-radius:12px;margin-top:5px;box-shadow:0 2px 0 #324C3922}.health-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#DA6765,#FFA790);transform-origin:left;transition:transform .13s}.health-block.hurt{animation:hurt-jolt .14s 2}.health-block.low .health-track i{background:#E54842}.chapter-pill{position:absolute;left:50%;transform:translateX(-50%);text-align:center;padding:8px 24px;border-radius:25px;background:#FFFAE9D9;box-shadow:0 3px 10px #52672B14;max-width:45%}.chapter-pill small{display:block;font-size:11px;font-weight:700}.chapter-pill strong{display:block;font-family:var(--display);font-size:21px;line-height:1.3}.score-block{margin-left:auto;text-align:right;color:#FFFDF0;text-shadow:0 2px 5px #304C35AA}.score-block small{display:block;font-size:11px;font-weight:700}.score-block strong{font-family:'Nai Display Latin';font-size:30px;line-height:1.1}.game-corner{position:absolute;left:max(30px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));z-index:6;display:flex;gap:10px}.dash-button{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));right:max(36px,env(safe-area-inset-right));z-index:6;display:flex;align-items:center;gap:12px;padding:0;background:transparent;text-align:left;color:#244B42}.dash-circle{width:74px;height:74px;position:relative;background:#FFF9DDEC;box-shadow:0 4px 0 #A9B279,0 7px 18px #304C3522;border:2px solid #FFFFFFDD;border-radius:50%;display:grid;place-items:center}.dash-circle svg{width:32px;height:32px;fill:#D5F0C3;stroke:#426749}.dash-circle b{position:absolute;inset:0;display:grid;place-items:center;background:#E8E4CBE6;border-radius:50%;font-family:'Nai Display Latin';font-size:26px}.dash-circle b:empty{display:none}.dash-button>span:last-child{font-size:13px;font-weight:800}.dash-button kbd{display:block;font:10px var(--body);margin-top:6px;letter-spacing:1px}.dash-button:disabled{opacity:.7}.damage-note{position:absolute;top:105px;left:50%;transform:translate(-50%,-8px);color:#8C302D;background:#FFF1EDEB;padding:10px 18px;border:1px solid #EBBFB4;border-radius:14px;font-size:13px;font-weight:800;z-index:6;opacity:0;transition:.15s;pointer-events:none;white-space:nowrap}.damage-note.visible{opacity:1;transform:translate(-50%,0)}.friend-note{position:absolute;top:105px;left:28px;display:flex;align-items:center;gap:8px;background:#FFFBE9E3;border-radius:16px;padding:0 14px 0 3px;z-index:5;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}.friend-note .sprite{width:40px;height:53px}.friend-note.visible{opacity:1}.state-overlay{position:absolute;inset:0;z-index:8;background:#1F34275E;backdrop-filter:blur(7px);display:grid;place-items:center;padding:24px}.state-card{width:min(460px,100%);max-height:calc(100svh - 48px);overflow:auto;text-align:center;background:#FFF9EB;padding:38px;border-radius:32px;box-shadow:0 14px 0 #67824E30,0 35px 80px #1536252E;border:2px solid #FFFFFF}.state-card>.kicker{font-size:11px;letter-spacing:1px;color:#758166}.state-card h2{font-size:44px;margin:14px 0 18px}.state-card>p:not(.kicker){font-size:14px;color:#6F795E;margin-bottom:24px}.state-card>.button{width:100%;margin:12px 0}.state-card>.text-button{margin-top:8px}.pause-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}.pause-links button{background:#F0ECD9;border-radius:14px;min-height:60px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:700}.pause-links button:hover{background:#E7E8CD}.result-number{font-family:'Nai Display Latin';font-size:68px;color:#B57B2C;line-height:1}.result-number small{display:block;font:12px var(--body);margin:12px 0 24px;color:#69775B}.upgrades{display:grid;gap:12px}.upgrades>button{display:flex;gap:14px;align-items:center;background:#F2EDD7;border:1px solid #E0D7B9;border-radius:17px;text-align:left;padding:15px}.upgrades>button:hover{background:#F9E7A8}.upgrade-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:#FFF9E8}.upgrades strong{display:block;font-size:16px}.upgrades small{display:block;font-size:12px;color:#77815F;margin-top:4px}.upgrades>button>svg{margin-left:auto;width:20px}.wave-overlay{position:absolute;inset:0;z-index:7;pointer-events:none;display:grid;place-items:center;background:linear-gradient(transparent,#F5F0D548,transparent)}.wave-banner{text-align:center;animation:wave-in .35s ease-out;background:#FFF9E9F0;border:2px solid #FFFFFFCF;padding:23px 35px 19px;border-radius:28px;box-shadow:0 14px 38px #3B542326;max-width:88vw}.wave-banner>p{font-size:12px;color:#798567;font-weight:700}.wave-banner>h2{font-size:46px;margin:12px 0;color:#3C5C3B}.wave-banner>span{display:inline-block;font-family:'Nai Display Latin','Nai Display CN';font-size:22px;background:#F4DA83;padding:4px 17px;border-radius:10px}.incoming-cast{display:flex;justify-content:center;margin-top:6px}.incoming-cast .sprite{width:60px}.wave-banner small{font-size:12px;color:#798567}.tutorial-tip{position:absolute;z-index:6;bottom:26px;left:50%;transform:translateX(-50%);width:min(410px,calc(100vw - 240px));background:#FFF9EAF2;border:1px solid white;padding:20px 26px 10px;border-radius:24px;text-align:center;box-shadow:0 10px 32px #4F6E2933}.tutorial-progress{display:flex;justify-content:center;gap:6px;margin-bottom:10px}.tutorial-progress i{width:25px;height:4px;border-radius:4px;background:#D9DCC5}.tutorial-progress i.done{background:#719058}.tutorial-tip h2{font-size:26px;margin-bottom:7px}.tutorial-tip p{font-size:12px;color:#637355}.tutorial-tip .text-button{font-size:11px;color:#7B816C}.tutorial-tip .button{font-size:14px;min-height:46px;margin:10px 0}.tutorial-tip .button svg{width:19px}.modal-open{overflow:hidden}
/* Player-facing journal and settings; all specification controls live outside the game. */
.modal-scrim{position:fixed;inset:0;z-index:30;background:#20372872;backdrop-filter:blur(9px);display:grid;place-items:center;padding:28px}.modal-card{width:min(550px,100%);max-height:calc(100svh - 56px);overflow:auto;background:#FFF9EA;border:2px solid #FFFFFF;border-radius:28px;padding:28px;box-shadow:0 25px 80px #20372833}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.modal-heading h2{font-size:31px}.modal-card>p{font-size:14px;color:#778064;margin:0 0 22px}.modal-heading .round-button{background:#EFEAD7;box-shadow:none;border:0}.world-modal{width:min(1120px,100%)}.world-modal .world-cards{margin:24px 0 28px}.world-modal .button{max-width:320px;display:flex;margin-left:auto;margin-right:auto}.book-modal{width:min(1000px,100%)}.book-progress{font-size:12px;font-weight:700;color:#7E876E;margin-bottom:16px}.book-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.book-character{padding:14px 12px 18px;background:#F0EBD4;border:1px solid #E4DFC6;border-radius:20px;text-align:left;min-width:0}.book-character:hover:not(:disabled){background:#F8E4A1;border-color:#D6B76B}.book-art{height:137px;position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:6px}.book-art .sprite{width:110px;max-height:146px}.book-character strong,.book-character small{display:block;text-align:center;overflow-wrap:anywhere}.book-character strong{font-size:14px}.book-character small{font-size:11px;color:#7D866A;margin-top:6px;line-height:1.5}.book-character.locked{background:#F3F0E4;border-style:dashed}.locked .sprite{filter:brightness(0) opacity(.10)}.book-art>svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#8B957A;width:20px;height:20px}.skill-detail{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:16px}.skill-stage{background:radial-gradient(ellipse at center,#E3EDC3,#C5D5A7);border-radius:26px;overflow:hidden;aspect-ratio:360/460}.skill-stage canvas{width:100%;height:100%;display:block}.skill-description .kicker{font-size:10px;letter-spacing:1px;color:#80876B}.skill-description h3{font-size:24px;font-family:var(--display);font-weight:400;margin:12px 0}.skill-description p{font-size:14px;color:#607151}.skill-description small{display:block;font-size:11px;color:#899179;margin-top:18px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;width:100%;border-bottom:1px solid #E5E1CE;font-size:15px}.setting-row .language select{background:#F1ECD9}.sound-toggle{background:transparent}.sound-toggle>span{display:flex;align-items:center;gap:10px}.toggle{display:block;position:relative;width:45px;height:26px;border-radius:20px;background:#C8CDB9;flex-shrink:0}.toggle:after{content:'';display:block;position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:#FFFCED;transition:left .15s}.toggle.on{background:#789B5E}.toggle.on:after{left:23px}.modal-card .small-note{font-size:11px;margin:15px 0 25px}.weapon-choices{display:grid;gap:12px}.weapon-choice{display:flex;gap:18px;align-items:center;background:#F1ECD9;border:2px solid transparent;padding:20px;border-radius:18px;font-weight:700}.weapon-choice.selected{border-color:#70875B;background:#F4EABF}.weapon-choice>svg{margin-left:auto}.shot-icon{display:block;width:28px;height:28px;box-shadow:inset 3px 3px 4px #FFFFFF9C,0 3px 7px #71834A26;flex-shrink:0}.shot-icon.milk{border-radius:80% 0 70% 70%;background:radial-gradient(circle at 30% 30%,#FFF,#AAF3E4 55%,#52B4A1);transform:rotate(-40deg);border:1px solid #75BAA7}.shot-icon.butter{background:radial-gradient(circle at 30% 30%,#FFF6B6,#FFD957 60%);clip-path:polygon(50% 0,64% 30%,99% 35%,75% 60%,80% 99%,50% 80%,18% 99%,24% 60%,0 35%,35% 30%)}.shot-icon.berry{background:radial-gradient(circle at 30% 25%,#FFF7F0,#F9B1CD 50%,#DB85AB);border-radius:50%;border:1px solid #D88EAA}.shot-icon.berry:after{content:'';display:block;width:7px;height:5px;border-radius:50%;background:#FFF8;transform:translate(5px,5px) rotate(-35deg)}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,10px);z-index:80;pointer-events:none;background:#334C35;color:#FFF8E5;padding:12px 22px;border-radius:14px;font-size:13px;opacity:0;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}
@keyframes wave-in{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes hurt-jolt{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(min-width:1700px){.hero-copy{padding-top:11vh}.hero-cast{right:4%;max-width:900px;top:8%}.world-dock{margin-bottom:4vh}.world-thumb{aspect-ratio:2.7}}
@media(max-width:1100px) and (min-width:761px){.hero-copy{padding-top:100px}.hero-copy h1{font-size:70px}.hero-cast{top:20%;width:57%;right:-4%}.hero-intro{max-width:320px}.hero{min-height:max(960px,100svh)}.world-dock{margin-left:5%;margin-right:5%}.world-cards{gap:10px}.home-header{padding:0 5%}.hero-copy{padding-left:5%}}
@media(max-width:760px){:root{font-size:15px}.hero{display:block;height:auto;min-height:1050px;padding-bottom:32px}.home-header{height:85px;padding:0 20px}.brand{font-size:15px;gap:7px}.brand-drop{width:32px;height:39px;font-size:23px}.brand small{font-size:8px;letter-spacing:2.1px}.header-actions{gap:7px}.header-actions>.text-button{width:40px;padding:8px}.header-actions>.text-button span{display:none}.header-actions .round-button{width:38px;height:38px;border-radius:13px}.header-actions .language select{max-width:84px;font-size:11px;min-height:38px;padding:6px 18px 6px 8px}.hero-wash{background:linear-gradient(#FFF7DEE8 0%,#FFF7DEB8 27%,transparent 60%,#F8F1DFE8 86%)}.hero-copy{width:100%;padding:25px 24px 0;text-align:left}.hero-copy .kicker{font-size:9px;margin-bottom:14px;letter-spacing:2px}.hero-copy h1{font-size:clamp(46px,12.3vw,76px);letter-spacing:-1.8px;line-height:1.12}.hero-intro{font-size:13px;max-width:280px;margin:18px 0 22px}.play-cta{font-size:17px;min-height:56px;min-width:202px;padding:13px 20px;border-radius:16px}.play-cta>svg:last-child{margin-left:12px}.hero-footnote{font-size:10px;margin-top:13px}.hero-cast{top:400px;right:1%;width:91%;height:345px}.hero-frog{width:67%;left:27%;top:-2%}.hero-mouse{width:43%;left:0;top:34%}.hero-egg{width:30%;top:62%;right:-4%}.orbit-sticker{width:64px;height:64px;font-size:14px;right:1%;top:12%}.world-dock{position:relative;left:auto;right:auto;bottom:auto;margin:365px 20px 0;padding-top:0}.dock-title{display:block;margin-bottom:16px}.dock-title h2{font-size:24px;margin-bottom:6px}.dock-title p{font-size:11px}.world-cards{grid-template-columns:repeat(5,136px);gap:10px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#AEBB96 transparent}.world-card{scroll-snap-align:start;border-radius:15px;padding:5px 5px 9px}.world-thumb{aspect-ratio:1.65}.world-card strong{font-size:11px;padding-top:8px}.how-section{padding:55px 24px}.how-section h2{font-size:30px;margin:14px 0 28px}.how-section>.kicker{font-size:9px}.how-steps{grid-template-columns:1fr;gap:12px;text-align:left;margin-bottom:30px}.how-steps article{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid #E7E5D5}.how-steps article>span{top:10px;left:0;font-size:9px}.how-steps h3{font-size:13px;margin:0}.key-demo,.milk-demo{font-size:18px;gap:7px;height:58px}.milk-demo .shot-icon{width:20px;height:20px}.key-demo svg{width:24px}.how-section>.button{width:100%}footer{padding:20px;gap:10px;font-size:9px}footer .text-button{font-size:11px}.game-hud{top:max(16px,env(safe-area-inset-top));left:16px;right:16px;gap:10px;align-items:flex-start}.health-block{width:116px}.health-track{height:11px}.health-label{font-size:10px}.health-label svg{width:18px;height:18px}.chapter-pill{top:60px;max-width:90%;padding:6px 17px}.chapter-pill small{font-size:9px}.chapter-pill strong{font-size:17px}.score-block{padding-top:0}.score-block small{font-size:9px}.score-block strong{font-size:25px}.game-hud .round-button{width:40px;height:40px;border-radius:13px}.dash-button{right:22px;bottom:max(32px,env(safe-area-inset-bottom));display:block;text-align:center}.dash-circle{width:68px;height:68px}.dash-button>span:last-child{display:block;font-size:11px;margin-top:9px;color:#2A4B35;text-shadow:0 1px #FFF}.dash-button kbd{display:none}.game-corner{left:20px;bottom:max(30px,env(safe-area-inset-bottom))}.fullscreen-button{display:none}.game-corner .round-button{width:43px;height:43px}.damage-note{top:134px;font-size:11px;padding:8px 12px;max-width:94vw;white-space:normal;text-align:center}.friend-note{top:125px;left:12px;font-size:10px;padding-right:9px}.friend-note .sprite{width:29px;height:39px}.friend-note.visible:has(+ .dash-button){max-width:60%}.state-card{padding:28px 24px;border-radius:27px}.state-card h2{font-size:37px}.state-card>p:not(.kicker){font-size:12px}.state-card>.button{min-height:53px;font-size:16px}.pause-links{gap:8px}.pause-links button{font-size:11px;gap:7px;min-height:58px}.pause-links svg{width:19px}.result-number{font-size:60px}.wave-banner{padding:20px 18px 17px;width:88vw}.wave-banner>h2{font-size:34px}.wave-banner>p,.wave-banner>small{font-size:10px}.incoming-cast .sprite{width:43px}.wave-banner>span{font-size:18px}.tutorial-tip{top:141px;bottom:auto;width:calc(100vw - 42px);padding:16px 18px 6px}.tutorial-tip h2{font-size:24px}.tutorial-tip p{font-size:11px}.modal-scrim{padding:14px}.modal-card{padding:21px;max-height:calc(100svh - 28px);border-radius:24px}.modal-heading{margin-bottom:16px}.modal-heading h2{font-size:27px}.modal-heading .round-button{width:38px;height:38px}.modal-card>p{font-size:12px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.book-character{padding:9px 8px 15px;border-radius:16px}.book-art{height:116px}.book-art .sprite{width:90px}.book-character strong{font-size:12px}.book-character small{font-size:10px}.book-progress{font-size:11px}.world-modal .world-cards{grid-template-columns:1fr 1fr;overflow:visible;gap:10px}.world-modal .world-thumb{aspect-ratio:1.8}.world-modal .world-cards .world-card:last-child{grid-column:1/-1;max-width:50%;justify-self:center;width:100%}.world-modal .button{font-size:15px;min-height:53px}.skill-detail{grid-template-columns:1fr;gap:18px}.skill-stage{max-height:280px;aspect-ratio:360/400;width:100%;margin:auto}.skill-description h3{font-size:25px;margin:8px 0}.skill-description p{font-size:13px}.skill-description small{margin-top:10px}.setting-row{font-size:13px}.weapon-choice{font-size:13px;padding:17px}.floating-drop{scale:.8}.drop-one{left:1%;top:39%}.drop-two{right:2%;top:64%}}
@media(max-width:360px){.home-header{padding:0 13px}.brand{font-size:13px}.header-actions{gap:3px}.hero-copy{padding-left:20px;padding-right:20px}.hero-copy h1{font-size:44px}.hero-cast{top:399px}.hero{min-height:980px}.world-dock{margin-top:315px}.game-hud{left:12px;right:12px}.health-block{width:100px}.state-card{padding:24px 18px}.book-character small{font-size:9px}.modal-card{padding:16px}.modal-heading h2{font-size:25px}}
@media(max-height:600px) and (min-width:761px){.game-hud{top:15px}.state-card{padding:23px 28px}.state-card h2{font-size:34px;margin:9px 0}.state-card>.button{min-height:48px}.pause-links{margin:10px 0}.pause-links button{min-height:48px}.tutorial-tip{bottom:14px;padding-top:13px}.wave-banner{padding:15px 30px}.wave-banner>h2{font-size:35px}.incoming-cast .sprite{width:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.blink-eyelid{opacity:0}.world-spark{opacity:.25}}
.reduced .vegetation,.reduced .soft-glow,.reduced .world-spark,.reduced .blink-eyelid,.reduced .floating-drop,.reduced .floating-drop i,.reduced .hero-frog,.reduced .hero-mouse,.reduced .hero-egg{animation:none!important}.reduced .blink-eyelid{opacity:0}
.new-journey{display:block;margin-top:12px;width:max-content}.hero-copy .new-journey+.hero-footnote{margin-top:4px}#time-left{display:block;color:#B3483F;font-size:11px;font-weight:800}#time-left:empty{display:none}
@media(max-width:760px){.hero{min-height:0}.hero-cast{position:relative;top:auto;right:auto;left:auto;width:91%;height:345px;margin:4px 1% 10px auto}.world-dock{margin:24px 20px 0}:lang(en) .hero-copy h1,:lang(vi) .hero-copy h1,:lang(id) .hero-copy h1,:lang(ms) .hero-copy h1{font-size:43px}}
@media(max-width:360px){.hero-cast{height:300px}.world-dock{margin-top:20px}:lang(en) .hero-copy h1,:lang(vi) .hero-copy h1,:lang(id) .hero-copy h1,:lang(ms) .hero-copy h1{font-size:37px}}
@media(max-width:760px){.home-header .brand{max-width:calc(100% - 175px);white-space:normal;font-size:13px;line-height:1.2}.brand-drop{flex-shrink:0}.brand>span:last-child{min-width:0}.home-header .brand small{font-size:7px;white-space:nowrap;letter-spacing:1.5px}.header-actions{flex-shrink:0}}
/* V5: complete source crop, living ammunition, encounter cards and the family flipbook. */
.sprite[data-id="frog"]{aspect-ratio:384/536;background-size:400% 191.044776%;background-position:100% 100%}
.shot-icon{position:relative}.shot-icon:before{content:'';position:absolute;left:32%;top:43%;width:12%;height:18%;border-radius:50%;background:#284D40;box-shadow:7px 0 0 #284D40;z-index:2}.shot-icon.milk:before{transform:rotate(40deg);transform-origin:5px 2px;left:29%;top:49%}.milk-demo .shot-icon{width:38px;height:38px}.milk-demo .shot-icon:before{box-shadow:9px 0 0 #284D40}
.family-show{padding:90px max(6vw,28px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:60px;background:#E6ECCD;overflow:hidden;min-height:720px;border-top:1px solid #FFFDF5;border-bottom:1px solid #C7D4AA}.show-copy{max-width:500px}.show-copy .kicker{color:#69825B;font-size:12px;letter-spacing:2.7px}.show-copy h2{font-size:clamp(46px,4.8vw,78px);line-height:1.13;letter-spacing:-2px;margin:24px 0}.show-copy>p:not(.kicker){font-size:17px;color:#526C4A;line-height:1.8}.show-copy>small{display:block;color:#778268;font-size:12px;margin:18px 0 32px;max-width:350px;line-height:1.8}.show-controls{display:flex;align-items:center;gap:15px}.show-controls .button{font-size:14px;min-height:52px;box-shadow:none;background:#F9F6E6;border:1px solid #BAC798}.show-controls .round-button{box-shadow:none;background:transparent;border:1px solid #AAB98C}.show-stage{height:550px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 46%,#FFF9DB 0%,#D5E0B3 60%,#D5E0B300 70%);border-radius:46%;padding:0;color:#304D39;min-width:0}.show-stage:focus-visible{outline:3px solid #4E7454;outline-offset:10px}.show-stage .show-orbit{position:absolute;border:1px dashed #AEC28A;border-radius:50%;inset:6%;z-index:-1;transform:rotate(-24deg)}.show-stage .orbit-b{inset:15% -4%;transform:rotate(28deg)}.show-art{position:absolute;inset:3% 14% 8%;display:grid;place-items:center;pointer-events:none}.show-art .sprite{width:min(100%,340px);max-height:455px;animation:none}.show-count{position:absolute;top:8%;left:4%;font:22px 'Nai Display Latin';color:#72835A;letter-spacing:2px}.show-speech{position:absolute;left:50%;top:1%;transform:translateX(-50%) rotate(-5deg);padding:13px 19px;max-width:80%;background:#FFFAE7;border:1px solid #DFD4AC;border-radius:20px 20px 20px 4px;font-size:13px;box-shadow:0 7px 0 #B6C69233;white-space:normal;line-height:1.6}.show-name{position:absolute;bottom:0;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:var(--display);font-size:36px;line-height:1.1;border-radius:12px;padding:12px 23px;background:#F9D66A;box-shadow:0 4px 0 #C6A955;max-width:100%;white-space:nowrap}.show-spark{position:absolute;right:5%;top:32%;font-size:60px;color:#B38B36}.show-stage.is-paused .show-speech{border-color:#6E8D5D}.show-touch{display:none}@keyframes show-pop{0%{transform:scale(.97,1.02) rotate(-1deg)}65%{transform:scale(1.025,.98)}100%{transform:scale(1)}}
.wave-overlay.has-newcomer{pointer-events:auto;background:#304D3940;backdrop-filter:blur(6px);padding:24px}.meet-card{width:min(680px,100%);max-height:calc(100svh - 48px);overflow:auto;background:#FFFAEB;border:2px solid white;border-radius:32px;padding:30px;box-shadow:0 16px 0 #54724B26;text-align:center}.meet-card>.kicker{color:#7B886B;font-size:11px;letter-spacing:1px}.meet-card>h2{font-size:40px;margin:14px 0}.meet-list{display:grid;gap:12px;text-align:left;margin:20px 0}.meet-list article{display:flex;align-items:center;gap:20px;background:#F1ECD5;border:1px solid #E5DCB9;border-radius:20px;padding:14px 20px 14px 5px}.meet-list .sprite{width:120px;flex-shrink:0}.meet-list h3{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 8px}.meet-list strong{font-size:15px;color:#887025}.meet-list p{font-size:13px;line-height:1.7;color:#697A58;margin:8px 0}.meet-quote{font-size:12px;color:#799064}.meet-card>.button{width:100%;min-height:54px}.meet-card>small{display:block;color:#82906E;font-size:11px;margin-top:14px}.upgrade-value{display:block;margin-top:10px;font-size:14px;color:#3F6548;font-weight:800;font-variant-numeric:tabular-nums}.upgrade-value i{font-style:normal;color:#819765;margin:0 4px}.upgrade-value small{color:#56794E}.state-card .growth-note{font-size:10px!important;margin:20px 0 0!important;color:#8C9679!important;line-height:1.6}.state-card .revive-note{font-size:11px!important;margin:4px 0 12px!important;line-height:1.7}.revive-button{background:#CDE2AB!important;box-shadow:0 4px 0 #91AC6D!important}.state-card #share-feedback{font-size:11px;color:#9E5846}.state-card #share-feedback .text-button{font-size:12px}.auth-illustration{display:flex;justify-content:center;gap:18px;margin:8px 0 25px}.auth-illustration .shot-icon{width:34px;height:34px}.auth-illustration+p{font-size:14px;color:#718164;margin-bottom:22px}.field-label{display:block;font-size:12px;font-weight:800;margin:20px 0 8px}#auth-form>input{width:100%;min-height:52px;border:1px solid #C9CEAE;border-radius:13px;background:#FFFDF3;padding:12px 15px;color:#2C4D38;font:16px var(--body)}#auth-form>input:focus{outline:2px solid #749261;outline-offset:2px}#auth-form>input:disabled{opacity:.5}.consent-row{display:flex;gap:10px;align-items:flex-start;margin:20px 0 10px;font-size:12px;line-height:1.7;color:#5E7352}.consent-row input{width:17px;height:17px;flex-shrink:0;accent-color:#65864F;margin-top:2px}.privacy-note{font-size:10px;color:#8B947B;line-height:1.8;margin-bottom:15px}#auth-feedback{font-size:12px;line-height:1.7;color:#8A7548;margin-bottom:20px}#resend-code{font-size:12px;margin-top:8px}#resend-code:disabled{opacity:.5;cursor:default}
@media(max-width:760px){.family-show{padding:58px 24px 55px;grid-template-columns:1fr;gap:36px;min-height:0}.show-copy{max-width:none}.show-copy .kicker{font-size:9px;letter-spacing:2px}.show-copy h2{font-size:43px;margin:16px 0}.show-copy>p:not(.kicker){font-size:13px}.show-copy>small{font-size:10px;margin:12px 0 20px}.show-controls .button{font-size:12px;min-height:45px;padding:10px 14px}.show-controls .round-button{width:42px;height:42px}.show-stage{height:410px}.show-art{inset:5% 7% 9%}.show-art .sprite{width:260px;max-height:345px}.show-speech{font-size:11px;padding:10px 14px;max-width:85%;width:max-content;top:-1%}.show-name{font-size:27px;bottom:0}.show-count{font-size:17px;top:14%;left:0}.show-spark{font-size:42px;right:-1%}.show-desktop{display:none}.show-touch{display:block}.meet-card{padding:24px 18px;border-radius:26px}.meet-card>h2{font-size:31px}.meet-list article{padding:12px 12px 12px 0;gap:7px}.meet-list .sprite{width:84px}.meet-list h3{font-size:24px}.meet-list strong{font-size:12px}.meet-list p{font-size:11px}.meet-quote{font-size:10px}.meet-card>.button{font-size:14px}.upgrade-value{font-size:12px}.upgrades>button{gap:10px;padding:13px 11px}.upgrades strong{font-size:14px}.upgrade-icon{width:35px;height:39px;flex-shrink:0}.upgrades small{font-size:10px}.upgrades>button>span:nth-child(2){flex:1}.upgrades>button>svg{width:15px;flex-shrink:0}.milk-demo .shot-icon{width:23px;height:23px}.milk-demo .shot-icon:before{box-shadow:6px 0 0 #284D40}}
@media(prefers-reduced-motion:reduce){.show-art .sprite{animation:none}}.reduced .show-art .sprite{animation:none}

/* Friend-visit revive: stable waiting state, explicit claim, no share-action reward. */
.invite-box{margin:12px 0 18px;padding:18px;background:#F1EED9;border:1px solid #E0DDBF;border-radius:24px}.invite-box>.button{width:100%;padding-inline:12px;font-size:16px}.invite-status{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 15px}.invite-status strong{font-size:17px}.invite-status small{flex-basis:100%;font-size:12px;color:#6A785A;line-height:1.6}.invite-status svg{width:23px;height:23px;color:#3D7658}.invite-pulse{width:10px;height:10px;border-radius:50%;background:#D8AA42;box-shadow:0 0 0 5px #D8AA4222;animation:invite-breathe 2s ease-in-out infinite}.invite-actions{display:flex;gap:9px}.invite-actions .button{flex:1;min-height:48px;padding:12px 15px;font-size:14px}.invite-box .text-button{margin:10px auto 0}.invite-box .revive-note{font-size:11px;margin:12px 0 0}.invite-box #share-feedback{font-size:12px;line-height:1.6;color:#8D4E30;margin-top:8px}.arrival-note{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;background:#FFF9E9;color:#25392B;border:2px solid #FFFDF6;border-radius:22px;padding:16px 24px;box-shadow:0 9px 32px #263D3026;max-width:calc(100vw - 32px);width:max-content;font-size:14px;line-height:1.6}@keyframes invite-breathe{50%{opacity:.45;transform:scale(.86)}}@media(prefers-reduced-motion:reduce){.invite-pulse{animation:none}}@media(max-width:420px){.invite-box{padding:14px}.invite-actions{flex-direction:column}.invite-status strong{font-size:15px}.arrival-note{font-size:12px;padding:13px 17px}}

.revive-count{font-size:13px;font-weight:800;color:var(--ink);margin:14px 0 4px}.arrival-screen{z-index:100;background:#23433388;backdrop-filter:blur(12px)}.arrival-card{width:min(460px,calc(100vw - 32px));text-align:center;max-height:calc(100svh - 28px);overflow:auto}.arrival-art{display:block;width:105px;margin:0 auto 6px}.arrival-card h2{font-size:clamp(28px,5vw,40px)}.arrival-feedback{color:#A34430;min-height:1.5em;margin:12px 0}.arrival-card .button{white-space:normal}

.arrival-language{display:flex;justify-content:flex-end;margin:-6px -6px 0}

/* Preserve soft character proportions in the expanded skill viewer. */
.detail-modal{width:min(820px,100%)}.skill-stage canvas{object-fit:contain}.skill-description #skill-phase:empty{display:none}.skill-description #skill-phase{color:#51683E;font-weight:700}

/* The roulette swaps art on a steady background; only a caught character settles. */
.show-controls{display:none}.show-static{display:none}
.show-stage:not(.is-paused) .show-name,.show-stage:not(.is-paused) .show-speech{visibility:hidden}
.show-stage.is-paused .show-art .sprite{animation:show-pop .18s ease-out}
.show-stage.is-paused .show-name{white-space:normal;text-align:center;width:max-content;max-width:94%}
@media(hover:none),(pointer:coarse){.show-controls{display:flex}.show-desktop{display:none}.show-touch{display:block}}
@media(prefers-reduced-motion:reduce){.show-controls{display:flex}.show-controls [data-action="show-toggle"]{display:none}.show-static{display:block}.show-desktop,.show-touch{display:none!important}.show-stage.is-paused .show-art .sprite{animation:none}}
.reduced .show-stage.is-paused .show-art .sprite{animation:none}

.invite-keep-open{display:flex;gap:8px;text-align:left;padding:12px 14px;border-radius:14px;background:#f4e7c8;color:#5b4a2b;font-size:13px;line-height:1.6;margin:12px 0}.invite-keep-open svg{width:18px;height:18px;flex:none;margin-top:2px}

/* Optional account controls reuse the cream game panels. */
.account-note{font-size:13px;max-width:29rem;color:#526345;margin:16px 0 0;line-height:1.6}.account-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#f1ead4;border-radius:20px;padding:20px 10px}.account-stats span{display:grid;gap:8px;font-size:13px}.account-stats b{font-size:24px}.account-mascot{height:140px;display:flex;justify-content:center}.account-mascot .sprite{width:110px;height:146px}.run-history p{display:flex;justify-content:space-between;border-bottom:1px solid #dcd4bd;padding:12px 0;gap:20px;font-size:14px}.account-welcome{font-weight:800}.cl-modalBackdrop{z-index:1000!important}.cl-card{box-shadow:0 10px 0 #314b3520!important}@media(max-width:760px){.header-actions .account-button{padding:8px;min-width:40px}.header-actions .account-button span{display:none}.account-note{font-size:12px;max-width:26ch}.account-stats{gap:6px}.account-stats b{font-size:20px}}

/* Public privacy notice: a readable page at /?privacy=1, no login required. */
.at-privacy{background:#fff9ec;color:#263f30}.privacy-page{max-width:850px;margin:auto;padding:28px clamp(20px,5vw,64px) 72px}.privacy-page nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:64px}.privacy-page h1{font-size:clamp(36px,7vw,64px);line-height:1.15;margin-bottom:36px}.privacy-page h2{font-size:22px;margin:32px 0 12px}.privacy-page p{line-height:1.85;overflow-wrap:anywhere}.privacy-page a{color:inherit}.privacy-page .privacy-links{margin:36px 0}.privacy-page .button{display:inline-flex;margin-top:20px}.privacy-page .brand{font-size:20px}.privacy-page .language{max-width:45%}.privacy-page select{max-width:100%}