*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;position:fixed;inset:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#1a1440;display:flex;align-items:center;justify-content:center}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:#1a1440}canvas{display:block;background:#87ceeb;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;max-height:100dvh}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(180deg,#87ceeb,#b0e0e6);color:#fff;text-align:center;padding:1vh 1.5vh;padding-bottom:max(1vh,env(safe-area-inset-bottom));z-index:1000;overflow:hidden;touch-action:none}.screen.active{display:flex}.title{font-size:clamp(22px,5.2vh,48px);font-weight:700;text-shadow:3px 3px 0 rgba(0,0,0,.3);margin-bottom:.6vh;color:#ff69b4;letter-spacing:1px;line-height:1.1}.subtitle{font-size:clamp(13px,2.4vh,20px);margin-bottom:.8vh;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.section-label{font-size:clamp(13px,2.2vh,18px);font-weight:700;margin:.6vh 0 .4vh;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.hint{font-size:clamp(12px,1.8vh,16px);max-width:640px;margin:.4vh auto .8vh;opacity:.95;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.button{background:#4ade80;border:none;padding:1vh 2.4vh;font-size:clamp(14px,2.6vh,22px);font-weight:700;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3);border-radius:12px;cursor:pointer;margin:.4vh;box-shadow:0 .6vh #22c55e,0 1vh 1.4vh #0000004d;transition:all .1s;text-transform:uppercase;touch-action:manipulation}.button:hover{transform:translateY(2px);box-shadow:0 6px #22c55e,0 10px 15px #0000004d}.button:active{transform:translateY(6px);box-shadow:0 2px #22c55e,0 4px 8px #0000004d}.button.active{outline:4px solid #fff;outline-offset:4px}.button.secondary{background:#f97316;box-shadow:0 8px #ea580c,0 12px 20px #0000004d}.button.secondary:hover{box-shadow:0 6px #ea580c,0 10px 15px #0000004d}.button.secondary:active{box-shadow:0 2px #ea580c,0 4px 8px #0000004d}.button.danger{background:#ef4444;box-shadow:0 8px #dc2626,0 12px 20px #0000004d}.button.danger:hover{box-shadow:0 6px #dc2626,0 10px 15px #0000004d}.button.danger:active{box-shadow:0 2px #dc2626,0 4px 8px #0000004d}.play-cta{margin-top:1.2vh;font-size:clamp(16px,3vh,26px);padding:1.2vh 3vh}.difficulty-buttons,.choice-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;justify-content:center;align-items:center}.controls{display:flex;gap:1.5vh;margin:.8vh 0;justify-content:center;align-items:stretch;flex-wrap:wrap;max-width:100%}.player-controls{background:#fff3;padding:1.2vh 2vh;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.player-controls h3{font-size:clamp(16px,2.6vh,22px);margin-bottom:.6vh;text-shadow:1px 1px 0 rgba(0,0,0,.3)}.control-item{display:flex;align-items:center;gap:1vh;margin:.4vh 0;font-size:clamp(13px,2vh,18px);font-weight:700}.key{background:#fff;color:#333;padding:.4vh 1vh;border-radius:6px;font-weight:700;min-width:4vh;text-align:center;box-shadow:0 .4vh #0003}.instructions{margin:.6vh 0;max-width:900px;width:min(900px,100%)}.instruction-list{display:flex;flex-direction:column;gap:.6vh;list-style:none}.instruction-list li{font-size:clamp(13px,2.1vh,18px);background:#fff3;padding:.7vh 1.4vh;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;gap:1vh;text-align:left;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.instruction-list .emoji{font-size:2.4vh;flex-shrink:0}.win-stats{font-size:clamp(20px,3.5vw,32px);margin:24px 0;line-height:1.8}.mute-button{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:56px;height:56px;background:#ffffff4d;border:none;border-radius:50%;cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0003;transition:all .2s;touch-action:manipulation}.mute-button:hover{background:#fff6;transform:scale(1.1)}.mute-button:active{transform:scale(.95)}.character-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:12px}.character-card{width:min(280px,86vw);border:none;border-radius:24px;padding:28px 20px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;touch-action:manipulation;box-shadow:0 10px #00000040,0 16px 24px #00000040}.character-card.harbin{background:#00ced1}.character-card.agam{background:orange}.character-card:active{transform:translateY(6px);box-shadow:0 4px #00000040,0 8px 12px #00000040}.character-swatch{width:88px;height:88px;border-radius:22px;border:4px solid rgba(255,255,255,.8);box-shadow:0 6px #0003}.character-name{font-size:36px;font-weight:700;text-shadow:2px 2px 0 rgba(0,0,0,.25)}.character-meta{font-size:16px;font-weight:700;opacity:.95}.touch-controls{position:fixed;inset:0;pointer-events:none;z-index:1500}.touch-controls.hidden{display:none}.touch-cluster{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:14px;pointer-events:auto;align-items:flex-end}.touch-left{left:max(12px,env(safe-area-inset-left))}.touch-right{right:max(12px,env(safe-area-inset-right));flex-direction:column}.touch-btn{width:84px;height:84px;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:#14142873;color:#fff;font-size:28px;font-weight:700;box-shadow:0 6px #00000059;touch-action:none;user-select:none;-webkit-user-select:none}.touch-btn.pressed{transform:translateY(4px);box-shadow:0 2px #00000059;background:#ffffff59}.touch-jump,.touch-action{border-radius:18px;width:110px;height:72px;font-size:18px;letter-spacing:.5px}.touch-jump{background:#4ade808c}.touch-action{background:#facc1599}@media(min-width:768px){.touch-btn{width:100px;height:100px;font-size:32px}.touch-jump,.touch-action{width:128px;height:84px;font-size:20px}}@media(max-width:700px){.difficulty-buttons,.choice-row{flex-direction:column}.button{width:min(320px,90vw)}}@media(max-height:500px)and (orientation:landscape){.title{font-size:28px;margin-bottom:8px}.subtitle,.section-label,.hint{margin-bottom:6px}.button{padding:10px 20px;font-size:16px;margin:4px}.touch-btn{width:64px;height:64px;font-size:22px}.touch-jump,.touch-action{width:96px;height:56px;font-size:14px}}body.playing-touch #app{position:fixed;inset:0;padding-bottom:calc(190px + env(safe-area-inset-bottom));align-items:stretch;justify-content:stretch}body.playing-touch canvas{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover}body.playing-touch .touch-btn{width:22vw;height:22vw;max-width:120px;max-height:120px;min-width:72px;min-height:72px;font-size:7vw}body.playing-touch .touch-jump,body.playing-touch .touch-action{width:28vw;height:17vw;max-width:160px;max-height:88px;min-width:96px;min-height:56px;font-size:5vw;border-radius:22px}@media(min-width:768px){body.playing-touch #app{padding-bottom:calc(220px + env(safe-area-inset-bottom))}body.playing-touch .touch-btn{width:110px;height:110px;font-size:36px}body.playing-touch .touch-jump,body.playing-touch .touch-action{width:150px;height:84px;font-size:22px}}.native-app,.native-app body,.native-app #app{width:100%;height:100%;overflow:hidden;background:#102342}.native-app body{padding:0;font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif}.native-app .mute-button{display:none}.mobile-shell,.mobile-shell>section{position:fixed;inset:0}.mobile-shell .hidden{display:none!important}.mobile-menu,.mobile-win{display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 18%,#5ed6e8 0,#2384c6 42%,#102342)}.story-card{width:min(760px,88vw);max-height:92vh;overflow:auto;text-align:center;color:#fff;padding:20px 32px 22px;border:3px solid rgba(255,255,255,.72);border-radius:28px;background:linear-gradient(150deg,#0a2346e6,#263162e6);box-shadow:0 14px #050f2880,0 24px 50px #00000059}.story-card h1{margin:0;font-size:clamp(32px,7vh,62px);color:#fff5c0;text-shadow:0 4px 0 #7b3b7d}.story-card h1 span{color:#ffc83d}.story-card p{margin:4px 0 14px;font-weight:800}.stars{color:#ffd84d;font-size:22px}.kid-picks{display:flex;justify-content:center;gap:18px;margin:10px auto 15px}.kid-card{width:min(210px,28vw);padding:12px;border-radius:20px;border:3px solid transparent;color:#fff;background:#ffffff1f;box-shadow:0 6px #0000004d}.kid-card.selected{border-color:#fff6a8;transform:translateY(-3px)}.kid-card i{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;margin:auto;font-size:26px;font-style:normal;font-weight:900}.kid-card.harbin i{background:#00ced1}.kid-card.agam i{background:#ff9f1c}.kid-card b,.kid-card small{display:block}.kid-card b{font-size:20px;margin-top:5px}.kid-card small{opacity:.82}.mobile-play,.quiet-button{border:0;border-radius:18px;font-weight:900;color:#16344d}.mobile-play{min-width:190px;padding:13px 30px;background:#ffe268;font-size:22px;box-shadow:0 6px #c58b21}.quiet-button{padding:9px 20px;margin-left:12px;background:#dff7ff;box-shadow:0 4px #75b5c9}.mobile-play:active,.quiet-button:active,.pressed{transform:translateY(4px)!important;box-shadow:0 2px #00000059!important}.mobile-game{background:#6dc5ec}.mobile-game canvas{position:absolute;inset:0;width:100%!important;height:100%!important}.pause-orb{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:5;width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:#122344b8;color:#fff;font-size:20px;font-weight:900}.gesture-layer{position:absolute;inset:0;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.modal-card .how-to{margin:0 0 8px;font-size:12.5px;font-weight:700;opacity:.85;text-align:center;line-height:1.4}.modal-card .update-status{margin:4px 0 0;font-size:12.5px;font-weight:700;opacity:.85;text-align:center;min-height:14px}.modal-card #update-button{margin-top:6px}.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#030c20c2;padding:18px;overflow-y:auto}.modal-card{width:min(420px,85vw);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:16px 24px;border-radius:24px;border:3px solid #d9f7ff;background:#17345d;color:#fff;box-shadow:0 12px #00000059}.modal-card h2{text-align:center;margin:0 0 6px;color:#fff1a4;font-size:26px}.modal-card label{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:5px 0;font-weight:800}.modal-card input{width:24px;height:24px}.modal-card select{font-size:17px;padding:5px;border-radius:8px}.modal-card .mobile-play{display:block;margin:0 auto 8px}.modal-card .quiet-button{display:block;margin:8px auto 0}.big-rainbow{font-size:50px}@media(max-height:400px){.story-card{padding:10px 26px}.story-card h1{font-size:32px}.kid-card{padding:7px}.kid-card i{width:38px;height:38px}.mobile-play{padding:9px 24px}}@media(prefers-reduced-motion:reduce){.native-app *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.gesture-hint{position:absolute;left:50%;top:16%;transform:translate(-50%);z-index:6;display:flex;flex-direction:column;gap:6px;padding:14px 22px;border-radius:18px;border:2px solid rgba(255,255,255,.85);background:#122344d1;color:#fff;text-align:center;pointer-events:none;animation:hintFade .4s ease-out}.gesture-hint b{font-size:16px;color:#fff1a4;letter-spacing:.4px}.gesture-hint span{font-size:14px;font-weight:800}.gesture-hint.hidden{display:none}@keyframes hintFade{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.modal.is-pause .modal-card .how-to{display:none}@media(max-height:480px){.mobile-shell .modal{padding:8px}.mobile-shell .modal-card{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding:8px 18px;border-radius:18px}.mobile-shell .modal-card h2{font-size:20px;margin:0 0 4px}.mobile-shell .modal-card label{margin:3px 0}.mobile-shell .modal-card .how-to{font-size:11px;margin:0 0 4px}.mobile-shell .modal-card input{width:20px;height:20px}.mobile-shell .modal-card .quiet-button{margin:6px auto 0}.mobile-shell .modal-card .mobile-play{margin:0 auto 4px}}