:root {
  --ink:#17445c; --sky:#82d6f4; --cream:#ffe4d1; --cell:20%; --board-size:min(88vw,58vh,490px);
  font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  color:var(--ink); background:#76cdf0; touch-action:manipulation;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:linear-gradient(#6fc9ef 0 18%,#b7ebfa 62%,#7ad1f0);user-select:none}
body::before,body::after{content:"";position:fixed;width:48vw;height:12vw;border-radius:50%;background:#fff6;filter:blur(1px)}
body::before{top:17%;left:-12%}body::after{bottom:11%;right:-9%}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.game-shell{position:relative;z-index:1;max-width:560px;height:100dvh;margin:auto;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));gap:8px}
.topbar{height:66px;display:grid;grid-template-columns:54px 1fr 1.4fr 54px;align-items:center;gap:8px}
.icon-button{width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #2494c0;box-shadow:0 4px 0 #167499,0 6px 12px #25638033;font-size:25px;font-weight:900}
.icon-button:active{transform:translateY(3px);box-shadow:0 1px 0 #167499}
.level-display,.timer{height:54px;display:flex;align-items:center;justify-content:center;border:3px solid #207ca6;background:#fff8;border-radius:16px;box-shadow:0 4px 0 #16668c}
.level-display{flex-direction:column;line-height:.9}.level-display small,.timer small{font-size:10px;font-weight:900;letter-spacing:.08em}.level-display strong{font-size:28px}.timer{gap:8px;background:#178fbd;color:#fff}.timer strong{font-size:23px;text-shadow:0 2px #13526c}
.level-display:active{transform:translateY(2px)}
.mission{align-self:center;min-width:70%;height:38px;border-radius:20px;background:#fff;border:2px solid #5ab3d3;box-shadow:0 3px 0 #3498bd;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:900}.mission b{color:#e65362}
.play-area{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.board{--cols:5;--rows:5;position:relative;width:var(--board-size);height:var(--board-size);max-width:100%;max-height:100%;aspect-ratio:1;border:12px solid #258bad;border-radius:20px;background:#ffdcca;box-shadow:0 12px 0 #16647e,0 18px 24px #1b5b773b,inset 0 0 0 4px #fff7;touch-action:none;overflow:hidden}
.grid,.layer{position:absolute;inset:0}.grid{background-image:linear-gradient(#fff9 3px,transparent 3px),linear-gradient(90deg,#fff9 3px,transparent 3px);background-size:calc(100% / var(--cols)) calc(100% / var(--rows))}
.wall{position:absolute;width:calc(100% / var(--cols));height:calc(100% / var(--rows));display:grid;place-items:center;font-size:clamp(25px,8vw,42px);filter:drop-shadow(0 4px 1px #6c5237aa)}
.hamster{position:absolute;width:calc(100% / var(--cols));height:calc(100% / var(--rows));display:grid;place-items:center;z-index:3;transition:opacity .2s,transform .24s cubic-bezier(.4,0,.2,1);pointer-events:none}
.hamster::before{content:"";position:absolute;bottom:8%;width:68%;height:23%;border-radius:50%;background:color-mix(in srgb,var(--kind),transparent 58%);filter:blur(1px);box-shadow:0 4px 3px #17384c35}
.hamster img{position:relative;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 3px 1px #59351d55);z-index:1}
.hamster .mark{position:absolute;right:4%;top:4%;z-index:2;width:25%;height:25%;border-radius:50%;display:grid;place-items:center;background:var(--kind);color:#fff;font-size:10px;border:2px solid #fff;box-shadow:0 2px 2px #17384c55}
.hamster.falling{opacity:0!important;filter:blur(2px)}
.hole-piece{position:absolute;z-index:5;will-change:left,top,transform;filter:drop-shadow(0 5px 1px #1a314952);touch-action:none;transition:left .11s cubic-bezier(.2,.8,.2,1),top .11s cubic-bezier(.2,.8,.2,1),opacity .22s,transform .22s}
.hole-piece svg{display:block;width:100%;height:100%;overflow:visible;touch-action:none}
.hole-piece .hole-body{stroke-linejoin:round;stroke-linecap:round}
.hole-piece .well{filter:drop-shadow(0 2px 1px #0008)}
.hole-piece .rail{opacity:.34;pointer-events:none}
.hole-piece.selected{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 5px 1px #1a314952);transform:scale(1.035);z-index:7}
.hole-count{position:absolute;right:-7px;top:-8px;z-index:4;min-width:26px;height:26px;padding:0 5px;border-radius:10px;background:#fff;color:var(--dark);border:3px solid var(--kind);display:grid;place-items:center;font-size:14px;font-weight:1000;box-shadow:0 2px 0 #263a4e55}
.hole-piece.bump{animation:bump .18s linear}@keyframes bump{50%{filter:drop-shadow(0 0 12px #ff405d);transform:scale(.94)}}
.hole-piece.clearing{opacity:0;transform:scale(.18) rotate(8deg);filter:drop-shadow(0 0 18px #fff)}
.fx{position:absolute;z-index:12;font-size:24px;font-weight:1000;color:#fff;text-shadow:0 2px 0 #159f8b,0 0 6px #159f8b;animation:pop .7s forwards;pointer-events:none}@keyframes pop{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:translateY(-35px)}}
.spark{position:absolute;z-index:14;width:9px;height:9px;border-radius:3px;background:var(--spark);box-shadow:0 0 6px #fff;animation:spark .55s ease-out forwards;pointer-events:none}@keyframes spark{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(180deg) scale(.2)}}
.combo-pop{position:absolute;z-index:20;left:50%;top:43%;transform:translate(-50%,-50%) scale(.3);opacity:0;color:#fff;font-size:clamp(24px,8vw,42px);font-weight:1000;font-style:italic;letter-spacing:-1px;text-shadow:0 3px 0 #e34c63,0 0 12px #ffdb4e;pointer-events:none}.combo-pop.show{animation:combo .7s cubic-bezier(.2,.9,.25,1)}@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-7deg)}30%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-72%) scale(.9)}}
.direction-cue{position:absolute;z-index:22;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ee536c;border:4px solid #ffc84a;box-shadow:0 4px 0 #bd7b17,0 0 0 8px #fff7;font-size:30px;font-weight:1000;opacity:0;transform:translate(-50%,-50%) scale(.4);pointer-events:none}.direction-cue.show{animation:cue 1.25s ease-in-out forwards}@keyframes cue{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-62%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-72%) scale(.9)}}
.gesture-coach{position:absolute;z-index:15;left:20%;top:67%;font-size:40px;filter:drop-shadow(0 3px 1px #0003);animation:coach 1.35s ease-in-out infinite;pointer-events:none}.gesture-coach.hidden{display:none}@keyframes coach{0%,20%{transform:translateY(0)}70%,100%{transform:translateY(-70px)}}
.message-bar{min-height:36px;margin:0;padding:8px 18px;border-radius:18px;background:#fffdf2;border:2px solid #efb96c;box-shadow:0 3px 0 #c78e40;text-align:center;font-size:13px;font-weight:900}
.bottombar{height:58px;display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:8px}.bottombar button{height:48px;padding:1px 0;line-height:1;border-radius:15px;background:#fff;border:3px solid #36a2c7;box-shadow:0 4px 0 #1d7899;font-size:12px;font-weight:900}.bottombar button span{display:block;font-size:18px;line-height:1.1}.progress{text-align:center;color:#fff;font-size:13px;font-weight:1000;text-shadow:0 2px #28738d}.progress span{font-size:22px}
.bottombar button:disabled{opacity:.42;filter:grayscale(.6);box-shadow:0 2px 0 #5e8795;cursor:default}.bottombar button.pulse{animation:button-pulse .7s ease-in-out 2}@keyframes button-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 7px #fff7,0 4px 0 #1d7899}}
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}dialog::backdrop{background:#123a57b8;backdrop-filter:blur(3px)}.panel{position:relative;width:min(88vw,390px);border:6px solid #fff;border-radius:28px;background:linear-gradient(#ffeddb,#fff);box-shadow:0 10px 0 #164f6a,0 18px 40px #061c2b66;text-align:center;padding:24px}.close-button{position:absolute;right:10px;top:8px;width:36px;height:36px;border-radius:50%;background:#f36b76;color:#fff;font-size:22px}.level-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level-list button{aspect-ratio:1;border-radius:18px;background:#58c2e4;color:#fff;border:3px solid #fff;box-shadow:0 4px 0 #237fa2;font-size:24px;font-weight:1000}.level-list button.current{background:#ffbb43;color:#784610}.result-panel img{width:140px;height:120px;object-fit:contain}.result-panel small{display:block;color:#2488a8;font-weight:900}.result-panel h2{margin:0;color:#ff5471;font-size:50px;line-height:1;text-shadow:0 4px #fff,0 6px #a6334e}.stars{font-size:46px;color:#ffc629;text-shadow:0 3px #b66b13;letter-spacing:-4px}.stars.two{background:linear-gradient(90deg,#ffc629 66%,#b9c4c9 66%);background-clip:text;color:transparent}.stars.one{background:linear-gradient(90deg,#ffc629 33%,#b9c4c9 33%);background-clip:text;color:transparent}.result-actions{display:grid;grid-template-columns:58px 1fr;gap:10px;margin-top:18px}.result-actions button{height:54px;border-radius:16px;background:#5cc7e6;color:#fff;box-shadow:0 5px 0 #27809d;font-size:16px;font-weight:1000}.result-actions #dialogNext{background:#59cb82;box-shadow:0 5px 0 #239451}.result-actions b{font-size:26px}
@media(max-height:660px){:root{--board-size:min(86vw,58vh,360px)}.game-shell{gap:4px;padding-top:5px;padding-bottom:5px}.topbar{height:50px}.icon-button{width:40px;height:40px}.level-display,.timer{height:43px}.level-display strong{font-size:22px}.mission{height:31px}.bottombar{height:48px}.bottombar button{height:42px}.message-bar{min-height:30px;padding:5px 14px}.board{border-width:9px}}
@media(min-width:700px){:root{--board-size:min(70vh,520px)}.game-shell{max-width:620px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}