:root{--ink:#164d50;--muted:#6e9791;--teal:#1d9b98;--coral:#ee896b;--cream:#fffdf5;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);overscroll-behavior:none}body{background:radial-gradient(ellipse at 5% 10%,#fff3d1,transparent 55%),#cce8e4;display:flex;justify-content:center}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}button:disabled{cursor:default}button:active:not(:disabled){transform:translateY(2px)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #d88651;outline-offset:3px}[hidden]{display:none!important}#app{position:relative;width:100%;max-width:480px;min-height:100svh;background:#f3f9ef;isolation:isolate;box-shadow:0 0 65px #296e7220}.topbar{position:absolute;top:calc(16px + var(--safe-top));left:22px;right:22px;z-index:10;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{width:102px;height:38px;object-fit:contain;background:#fff;border-radius:10px;box-shadow:0 3px 15px #407f6f08}.top-actions{display:flex;gap:9px}.circle-button{width:35px;height:35px;border-radius:50%;background:#ffffffdb;border:1px solid #fff;display:grid;place-items:center;font-size:19px;font-weight:700;box-shadow:0 4px 13px #2b74651a;pointer-events:auto}.circle-button[aria-pressed=false]{color:#a4bab2}.eyebrow{font-size:9px;line-height:1.5;letter-spacing:.16em;font-weight:750;color:#6a9e93}.text-button{background:none;padding:7px 2px;font-size:10px;font-weight:650;color:#749a8c}.home{min-height:100svh;background:linear-gradient(#fbfcf1,#f0f8ed 33%,#d8efe6 66%,#fffdf5 92%);overflow:hidden}.hero-heading{padding:calc(83px + var(--safe-top)) 22px 0;text-align:center}.game-name{font-size:15px;letter-spacing:.13em;font-weight:800;margin:12px 0 9px;color:#467f75}.hero-heading h1{font-size:clamp(31px,8.8vw,40px);line-height:1.16;margin:0;font-weight:900;letter-spacing:-.045em}.hero-heading h1 span{color:#ec8569}.hero-subtitle{font-size:11px;line-height:1.7;color:#75988e;letter-spacing:.06em;margin:13px 0 0}.hero-scene{height:230px;max-width:430px;margin:0 auto;position:relative;background:linear-gradient(#eef8ed22,#bde9e442),url('assets/waterpark.jpg.png') center 61%/cover;mask-image:linear-gradient(transparent,black 20%,black 85%,transparent);-webkit-mask-image:linear-gradient(transparent,black 20%,black 85%,transparent)}.scene-glow{position:absolute;inset:0;background:linear-gradient(#f0f8ed66,transparent 45%)}.scene-orbit{position:absolute;width:57%;height:18%;left:21%;bottom:0;border-radius:50%;background:#e4f4dcd6;border:5px solid #ffffeeb3;box-shadow:0 6px 0 #6dc5bd77}.hero-trajectory{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px #fff8)}.demo-brick{position:absolute;width:51px;height:49px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;box-shadow:inset 0 2px 4px #fff9,inset 0 -5px 1px #539b8b22,0 6px 13px #478d801e;border:2px solid #fff9;transform:rotate(-9deg)}.demo-brick span{position:absolute;right:3px;top:1px;font-size:12px;color:#fff}.brick-one{left:22%;top:16%;background:linear-gradient(#a1e9de,#67c5bd);color:#287d7c}.brick-two{left:43%;top:7%;background:linear-gradient(#ffd492,#f2b866);color:#aa6c2b;transform:rotate(7deg)}.brick-three{right:19%;top:20%;background:linear-gradient(#f3c1dd,#dca4d3);color:#99629c;transform:rotate(15deg)}.combo-sticker{position:absolute;top:43%;left:44%;font-size:9px;font-weight:700;padding:7px 10px;background:#fff8d9;color:#b18239;border:1px solid #ffe3a7;border-radius:15px;transform:rotate(-11deg);box-shadow:0 4px 11px #b4a86722;z-index:4}.combo-sticker b{font-size:16px;margin-left:4px;color:#e19045}.hero-pal{position:absolute;width:27%;height:auto;filter:drop-shadow(0 9px 7px #2c897a30);animation:floaty 4s ease-in-out infinite}.pal-turtle{left:10%;bottom:11%;width:26%;rotate:-9deg}.pal-star{right:7%;bottom:8%;width:26%;animation-delay:-1s}.pal-blue{left:32%;bottom:-6%;width:38%;z-index:3;animation-delay:-2s}.pal-purple{right:12%;top:24%;width:18%;animation-delay:-.5s}.scene-bubble{position:absolute;border:1.5px solid #fffe;border-radius:50%;background:radial-gradient(circle at 25% 20%,#fff9,#fff1 60%)}.bubble-a{width:24px;height:24px;left:13%;top:43%}.bubble-b{width:17px;height:17px;right:12%;bottom:9%}.home-bottom{padding:4px 24px calc(19px + var(--safe-bottom));position:relative}.section-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;font-size:11px;font-weight:750;color:#528478}.hero-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hero-choice{position:relative;display:flex;flex-direction:column;align-items:center;border:1.5px solid #ffffffc7;border-radius:17px;background:#ffffff8f;padding:3px 1px 9px;min-width:0;transition:background .2s,border .2s;box-shadow:0 4px 12px #5d9c8220}.hero-choice canvas{display:block;width:58px;max-width:100%;height:58px;object-fit:contain}.hero-choice strong{font-size:11px;font-weight:800;margin-top:0}.hero-choice small{font-size:8px;line-height:1.6;margin-top:2px;color:#7c9c8d}.hero-choice.selected{border-color:#67ac99;background:#f4ffef;box-shadow:0 0 0 2px #83c6ad20}.selected-check{position:absolute;top:-4px;right:-3px;width:15px;height:15px;background:#5caa95;color:white;border-radius:50%;font-size:10px;display:none}.selected .selected-check{display:block}.selected-skill{font-size:9px;color:#659186;text-align:center;min-height:16px;line-height:1.5;margin:10px -3px 13px}.primary{width:100%;min-height:52px;padding:13px 20px;border-radius:16px;background:linear-gradient(110deg,#f5a176,#ee8069);color:#fffdf8;font-size:17px;font-weight:800;box-shadow:0 5px 0 #d2785420,0 10px 24px #c7865022;display:flex;align-items:center;justify-content:center;gap:15px;letter-spacing:.02em;text-decoration:none}.primary b{font-size:23px;line-height:1}.primary:disabled{opacity:.55}.secondary{display:block;width:100%;padding:13px 16px;margin-top:11px;border:1px solid #d8e7dc;background:#fafef4;border-radius:14px;font-size:13px;font-weight:700;color:#5c8e7d}.resume-button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;margin-top:10px;padding:9px;background:#fafff3;border:1px solid #d7e7d5;border-radius:12px;font-size:12px;font-weight:700;color:#659482}.home-reward{text-align:center;color:#b27842;font-size:12px;line-height:1.6;margin:15px 0 5px}.home-reward strong{color:#b54d2a;font-size:17px;margin:0 3px}.home-meta{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8da295}.home-meta strong{color:#638f7d;margin-left:3px}
.play{padding:calc(77px + var(--safe-top)) 20px calc(16px + var(--safe-bottom));min-height:100svh;background:radial-gradient(ellipse at 7% 15%,#fff7de70,transparent 65%),linear-gradient(#f0f7ec,#e6f3eb)}.play-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.play-heading .eyebrow{margin:0 0 3px;letter-spacing:.06em;font-size:9px}.play-heading h2{font-size:20px;line-height:1.3;letter-spacing:-.04em;margin:0;font-weight:850}.play-heading .circle-button{width:31px;height:31px;font-size:14px;box-shadow:none;background:#fff8}.scoreboard{display:flex;align-items:center;justify-content:space-between;background:#fffdf4db;border:1px solid white;border-radius:20px;padding:11px 15px;box-shadow:0 4px 18px #52947f0a}.scoreboard>div>span{font-size:9px;display:block;color:#81998a;margin-bottom:1px}.scoreboard strong{font-size:31px;line-height:1.1;color:#e58969;letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block}.scoreboard small{font-size:10px;font-weight:600;color:#8caa96;letter-spacing:0}.scoreboard .ball-count{text-align:right}.ball-count strong{color:#538d81;font-size:25px}.stage-dots{display:flex;align-items:center;gap:4px}.stage-dots i{font-style:normal;font-size:9px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e9efe2;color:#a4b6a1;font-weight:800}.stage-dots i.current{background:#66ad99;color:white;box-shadow:0 0 0 4px #77b9a516}.stage-dots i.done{background:#d3ead7;color:#6e9f7e}.stage-dots em{width:7px;height:1px;background:#cadccc}.turn-strip{display:flex;align-items:center;gap:7px;font-size:9px;color:#6c9588;min-height:32px;line-height:1.4}.turn-strip>span:last-child{margin-left:auto;white-space:nowrap;color:#9caf9c}.turn-strip .text-button{font-size:9px;padding:0;color:#b18853}.board-shell{position:relative;width:100%;border:2px solid #fffdf5;border-radius:25px;overflow:hidden;box-shadow:0 6px 18px #2a777b1a;background:#b7e8e1}.board-shell canvas{width:100%;height:auto;aspect-ratio:360/500;display:block;touch-action:none;outline-offset:-5px}.floating-feedback{position:absolute;pointer-events:none;left:50%;top:30%;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;padding:8px 16px;border-radius:18px;background:#fff9dbea;color:#c58337;border:1px solid #fff8;font-size:20px;font-weight:900;box-shadow:0 6px 20px #5ca1971a;animation:feedback .8s ease-out}.play-bottom{padding-top:12px}.skill-button{width:100%;display:flex;gap:10px;align-items:center;padding:7px 11px;background:#fffdf2;border:1px solid #dfe8d6;border-radius:18px;text-align:left;box-shadow:0 4px 12px #66977c09;transition:background .2s,box-shadow .2s}.skill-button>canvas{width:45px;height:45px;flex:none}.skill-info{flex:1;min-width:0}.skill-info strong{font-size:12px;display:block;color:#568b79}.skill-info small{font-size:9px;display:block;color:#90a48a;margin-top:2px}.charge-track{height:4px;border-radius:9px;display:block;background:#e4ebda;margin-top:6px;max-width:130px;overflow:hidden}.charge-track i{height:100%;display:block;background:linear-gradient(90deg,#83cbb2,#41aa9c);width:0;transition:width .2s}.charge-value{font-size:11px;font-weight:800;padding:6px 8px;border-radius:20px;color:#9ba98e;background:#f0f2e6}.skill-button.ready{background:#ffefd4;border-color:#f5bc6f;box-shadow:0 0 0 3px #ffcc7733,0 5px 15px #d2ab5620}.ready .skill-info strong{color:#ae722c}.ready .charge-value{color:#fffdf1;background:#e8a65e}.skill-button.armed{background:#e6f4dc;border-color:#88ba78}.round-summary{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#97aa98;margin-top:9px}.round-summary b{color:#609987;margin-left:3px}.dialog{border:0;border-radius:27px;padding:0;width:calc(100% - 40px);max-width:400px;max-height:88svh;overflow:auto;background:#fffdf5;color:var(--ink);box-shadow:0 20px 80px #073e4b35}.dialog::backdrop{background:#17494b88;backdrop-filter:blur(6px)}.modal-content{padding:32px 26px 24px;position:relative}.modal-content h2{font-size:26px;line-height:1.25;letter-spacing:-.04em;margin:9px 0 13px}.modal-content .eyebrow{font-size:8px}.close{position:absolute;top:11px;right:13px;width:29px;height:29px;background:#edf4e8;border-radius:50%;color:#7d9d8d;font-size:22px;line-height:1}.modal-description{font-size:12px;line-height:1.8;color:#88a08d;margin:0 0 20px}.centered{text-align:center}.how-steps{display:grid;gap:15px;margin:22px 0}.how-steps>div{display:flex;gap:13px}.how-steps>div>b{font-size:20px;color:#e2b381;letter-spacing:-.04em}.how-steps p{margin:0}.how-steps strong{font-size:12px;display:block;margin-bottom:5px}.how-steps span{display:block;color:#829a8b;font-size:11px;line-height:1.7}.skill-list{padding:8px 13px;background:#edf5e7;border-radius:15px;margin:17px 0 22px}.skill-list p{font-size:10px;line-height:1.6;color:#86a084}.skill-list b{color:#5f8d75;display:block}.eligibility{background:#f2f5e7;border:1px solid #e0e8cf;border-radius:15px;padding:16px 14px;margin:15px 0 18px;text-align:left}.eligibility strong{font-size:16px;line-height:1.6;color:#628658}.eligibility p{font-size:13px;line-height:1.7;color:#859877;margin:7px 0 0}.fine-print{font-size:10px;color:#98a48c;line-height:1.8;margin-bottom:23px}.result-avatar{width:108px;height:108px;display:block;margin:-9px auto 0}.result-stats{display:flex;justify-content:space-around;background:#f3f6e9;border-radius:17px;padding:16px 4px;margin:20px 0 23px}.result-stats span{display:block;font-size:9px;color:#9aab8e;margin-bottom:6px}.result-stats strong{font-size:24px;color:#dc9065;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.modal-content>.text-button{margin-top:12px;font-size:11px}.toast{position:fixed;z-index:200;left:50%;bottom:calc(30px + var(--safe-bottom));transform:translateX(-50%);width:max-content;max-width:86vw;padding:11px 17px;border-radius:24px;font-size:12px;line-height:1.6;color:#fff9e9;background:#225b56ec;box-shadow:0 5px 20px #275d5833;pointer-events:none}.pop{animation:numberpop .3s ease-out}@keyframes floaty{50%{translate:0 -7px}}@keyframes numberpop{50%{scale:1.1}}@keyframes feedback{0%{opacity:0;scale:.8}20%,70%{opacity:1;scale:1}100%{opacity:0;translate:0 -12px}}@media(min-width:600px){#app{margin:16px 0;border-radius:28px;overflow:hidden;min-height:0}.home,.play{min-height:0}.hero-scene{height:255px}.home-bottom{padding-left:30px;padding-right:30px}.play{padding-left:28px;padding-right:28px}.hero-heading h1{font-size:40px}}@media(max-height:760px){.hero-heading{padding-top:calc(71px + var(--safe-top))}.hero-heading h1{font-size:32px}.game-name{margin:8px 0 7px}.hero-subtitle{margin-top:9px}.hero-scene{height:198px}.play{padding-top:calc(70px + var(--safe-top))}.play-heading{margin-bottom:8px}.play-heading h2{font-size:18px}.scoreboard{padding:8px 13px}.scoreboard strong{font-size:27px}.turn-strip{min-height:29px}.play-bottom{padding-top:9px}}@media(max-width:350px){.home-bottom{padding-left:17px;padding-right:17px}.hero-heading{padding-left:16px;padding-right:16px}.hero-heading h1{font-size:31px}.hero-choices{gap:5px}.hero-choice canvas{height:49px}.hero-choice strong{font-size:10px}.hero-choice small{font-size:7px}.play{padding-left:12px;padding-right:12px}.topbar{left:17px;right:17px}.selected-skill{font-size:8px}.play-heading h2{font-size:17px}.round-summary{font-size:7px}.modal-content{padding:28px 22px 21px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.home-reward{font-size:14px;font-weight:700;color:#aa6738;background:#fff1dd;border:1px solid #ebc797;border-radius:13px;padding:9px 8px;margin:15px 0 7px}.home-reward strong{font-size:19px}
@media(max-height:760px){.board-shell{width:clamp(230px,calc((100svh - 300px)*.72),100%);margin-inline:auto}}