:root{--ink:#264264;--blue:#4c94ef;--mint:#40c8ae;--coral:#ff826a;--paper:#eef8ff}
body{color:var(--ink);background:radial-gradient(ellipse at 18% 10%,#d8efff,transparent 55%),radial-gradient(ellipse at 90% 85%,#e0f7eb,transparent 60%),#f0f8ff;font-family:ui-rounded,'Hiragino Maru Gothic ProN','Yu Gothic',system-ui,sans-serif;min-height:100svh}
main{max-width:490px;padding:14px 12px 30px}button{border:2px solid #fff9;background:white;border-radius:19px;color:#385378;font-weight:850;box-shadow:0 4px 0 #c9deef,0 7px 12px #426c9e14;transition:transform .13s,box-shadow .13s,filter .13s;min-height:48px}button:hover{filter:brightness(1.045)}button:active{transform:translateY(4px);box-shadow:0 0 0 transparent}button:focus-visible{outline:3px solid #ffaf59;outline-offset:4px}button.primary{border:2px solid #fff8;background:linear-gradient(#ffad77,#ff836a);color:white;box-shadow:inset 0 2px #ffdeae,0 6px 0 #d46554,0 10px 18px #bd5b3626;text-shadow:0 2px #c9584633}
section:not([hidden]){animation:screen-in .2s ease-out}.scene{border:5px solid white;border-radius:32px;box-shadow:0 10px 0 #b7d7e9,0 18px 32px #426d9930}.title-scene{background:#e9f7ff}.title-scene .scene-art{mask-image:linear-gradient(#000 80%,transparent 99%)}.scene-actions{left:10%;right:10%;bottom:5%;gap:17px}.scene-actions .big{border-radius:27px;font-size:34px;min-height:72px;box-shadow:inset 0 3px #ffdab7,0 6px 0 #d76c54,0 10px 18px #bd5b3633}.scene-actions .big:after{content:'▶';display:inline-grid;place-content:center;width:33px;height:33px;border-radius:50%;background:#fff3;font-size:16px;margin-left:20px;vertical-align:middle}.scene-actions button:not(.big){background:#fffef9;font-size:16px;border-color:#fff;box-shadow:0 4px 0 #b7d3e6}.title-bubble,.clear-bubble{border:2px solid white;background:#fffffff2;color:#3a5165;box-shadow:0 5px 0 #bad7e044,0 9px 20px #274d5914;border-radius:24px;transform:rotate(1deg)}.title-bubble:after{content:'';position:absolute;bottom:-10px;left:29px;border-top:12px solid white;border-right:12px solid transparent}.title-logo{filter:drop-shadow(0 3px 0 #fff9)}
.game-screen{position:relative;padding:0 12px 16px;border:0;border-radius:30px;background:linear-gradient(155deg,#f8fcff,#e8f6ff 55%,#e2f4ed);box-shadow:inset 0 0 0 3px #fff,0 8px 0 #b9d8ea,0 17px 30px #486d9530;overflow:hidden}.game-screen:before{content:'';position:absolute;pointer-events:none;top:-120px;right:-120px;width:310px;height:310px;border-radius:50%;background:#bae7ff44}.game-nav{position:relative;margin:0;padding:13px 0 5px;align-items:center}.game-nav button{border:2px solid #fff;box-shadow:0 3px 0 #c6ddeb;background:#f7fbff;min-height:36px;padding:6px 14px;color:#52719a;font-size:11px}.game-nav button:first-child{font-size:23px;width:39px;padding:0}.game-nav button:last-child{border:2px solid #fff;background:#ffffffd9;border-radius:15px;box-shadow:0 3px 0 #c6ddeb;padding:7px 12px}.play-header{position:relative;display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;border:0;min-height:96px;padding:4px 0 11px}.play-header h1{transform:rotate(-4deg);padding-right:3px}.play-header h1>img{max-height:94px;filter:drop-shadow(0 2px #fff)}.mascot-chat{display:flex;align-items:center;position:relative;min-width:0}.mascot-chat>img{width:65px;height:79px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 0 #aacbd33b)}.play-header #say{margin:0 1px 0 -2px;min-height:58px;flex:1;background:white;border:0;box-shadow:0 4px 0 #cbe5ed;display:grid;align-items:center;border-radius:18px;padding:9px 7px;color:#536984;font-size:11px;line-height:1.6;position:relative}.play-header #say:before{content:'';position:absolute;left:-7px;top:24px;border-right:9px solid white;border-top:7px solid transparent;border-bottom:7px solid transparent}
.stats{display:grid;grid-template-columns:1fr 115px;gap:12px;margin:0 0 14px;text-align:left}.stage-chip,.moves-chip{display:flex;flex-direction:column;justify-content:center;min-height:67px;padding:9px 15px;border-radius:19px;border:2px solid #fff9;box-shadow:inset 0 2px #fff5,0 4px 0 #3676c8,0 6px 9px #4a8ee624;background:linear-gradient(145deg,#63b0fc,#4189e4);color:white}.stage-chip small,.moves-chip small{font-size:10px;color:#ecf8ff;letter-spacing:1px;line-height:1.5}.stage-chip strong{font-size:22px;font-weight:950;letter-spacing:.7px;line-height:1.25;text-shadow:0 2px #2262b433}.moves-chip{background:linear-gradient(145deg,#fff,#fff6ef);box-shadow:0 4px 0 #edccb5,0 6px 9px #d78d4820;border-color:white;text-align:center;padding:7px;color:#e17c52}.moves-chip small{color:#aa8a76}.moves-chip strong{font-size:25px;line-height:1.25;font-weight:950;font-variant-numeric:tabular-nums}.mission-bar{display:flex;align-items:center;gap:9px;border-radius:17px;background:#ffffffce;padding:9px 10px;box-shadow:0 2px #dcecf4;margin-bottom:13px;text-align:left;font-size:13px;font-weight:850;color:#406379}.mission-bar>span:nth-child(2){flex:1}.mission-bar small{display:block;font-weight:500;color:#8da1b2;font-size:9px;line-height:1.65}.mission-icon{background:linear-gradient(145deg,#7cd9b7,#31b99b);box-shadow:0 3px #228e7b;border:2px solid #ffffff99;border-radius:12px;width:31px;height:31px;display:grid;place-items:center;color:white;font-size:21px}.stars{display:flex;gap:1px;white-space:nowrap;font-size:21px;line-height:1.1;letter-spacing:0}.stars .earned{color:#ffc443;text-shadow:0 2px 0 #e79a2d;filter:drop-shadow(0 1px 0 #fff7)}.stars .dim{color:#d1e1e9;text-shadow:0 1px 0 #bacfdc}
.parking-wrap{position:relative;border:4px solid #fff;border-radius:23px;margin:0 0 24px;padding:7px 32px 12px 10px;background:linear-gradient(150deg,#92b8ce,#bad5df 40%,#d1e5e2);box-shadow:inset 0 2px #e3f6ff,0 7px 0 #7daac3,0 12px 18px #527f9c33}.board-meta{height:26px;display:flex;align-items:center;justify-content:space-between;color:#4c738a;font-size:8px;font-weight:800;letter-spacing:.5px;padding:0 0 7px}.board-meta b{display:inline-grid;place-items:center;border:1px solid #d2ecfa;background:#669ab5;color:#edfaff;width:14px;height:14px;border-radius:4px;font-size:10px;margin-right:3px}.board-meta>span:last-child{letter-spacing:0;font-size:9px;color:#54788e}#board{border:3px solid #c4dce1;border-radius:13px;background-color:#55717c;background-image:linear-gradient(#c1dce338 1px,transparent 1px),linear-gradient(90deg,#c1dce338 1px,transparent 1px),linear-gradient(155deg,#6f8e93,#405b70);background-size:16.6667% 16.6667%,16.6667% 16.6667%,100% 100%;box-shadow:inset 0 4px 8px #203e5044,0 0 0 2px #406378,0 3px #e3f7fb;isolation:isolate}.exit{width:31px;background:linear-gradient(90deg,#38c99e,#7fe2af);box-shadow:0 3px 0 #2d9e7e,0 0 15px #5af0be55;border-radius:0 9px 9px 0;border-top:2px dashed #d1ffe9;border-bottom:2px dashed #d1ffe9;color:white;gap:1px}.exit span{font-size:9px;text-shadow:0 1px #249675}.exit b{font-size:24px;line-height:.9;animation:exit-beckon 1.7s ease-in-out infinite;text-shadow:0 2px #27a28055}.piece{padding:1px;filter:drop-shadow(0 4px 2px #142a334c);will-change:left,top}.piece .vehicle-art{filter:saturate(1.1)}.piece.cat{background:linear-gradient(140deg,#ffa28829,#ff816414);border:1.5px solid #ffb9a966;border-radius:13px;box-shadow:inset 0 1px #ffe5d744}.piece.cat:after{content:'›';position:absolute;right:3px;bottom:2px;font-size:22px;line-height:1;color:#ffc2a9;font-weight:bold;pointer-events:none}.piece.cat img{transform:scale(1.2);position:relative;z-index:1}.piece.dragging{z-index:8;filter:drop-shadow(0 9px 4px #15354499);background:#d9f7ff14;outline:2px solid #c8f4ff66;cursor:grabbing}.just-moved{animation:move-pop .22s ease-out}.hint{outline:3px solid #ffe184;outline-offset:-1px;background:#ffdd6933;box-shadow:0 0 13px #ffe89c;animation:hint-glow 1.2s ease-in-out 3}.buttons{gap:10px;margin:0}.buttons button{position:relative;overflow:hidden;flex:1;border:2px solid #fff9;border-radius:21px;min-height:81px;gap:3px;padding:8px 3px;color:#fff;text-shadow:0 1px #274a8133;box-shadow:inset 0 2px #ffffff6e,0 5px 0 #367dc4,0 9px 13px #589bd62b;background:linear-gradient(145deg,#78c7ff,#469cec)}.buttons button:before{content:'';position:absolute;left:8px;right:8px;height:28%;top:4px;border-radius:13px;background:linear-gradient(#fff2,transparent);pointer-events:none}.buttons button:nth-child(2){background:linear-gradient(145deg,#ffc968,#ff9f65);box-shadow:inset 0 2px #ffffff66,0 5px 0 #d47e44,0 9px 13px #eea0542b}.buttons button:nth-child(3){background:linear-gradient(145deg,#baa3ff,#9476e5);box-shadow:inset 0 2px #ffffff66,0 5px 0 #7759c6,0 9px 13px #8c73dc2b}.buttons button:active{transform:translateY(5px);box-shadow:inset 0 2px #ffffff22}.tool-icon{font-size:34px;height:35px;line-height:1;font-weight:800;filter:drop-shadow(0 2px #1d456733)}.instructions{color:#7293a6;font-size:10px;margin:18px 0 0;display:flex;justify-content:center;gap:15px}.instructions span:before{content:'✓';color:#68b5a0;margin-right:4px}.game-screen .instructions{line-height:1.5}
.clear-scene{background:#f2faff}.clear-actions{gap:11px}.clear-logo{color:#314565;text-shadow:0 3px white}.clear-stars{position:absolute;top:15%;left:0;right:0;display:flex;justify-content:center;gap:10px;font-size:43px;line-height:1;color:#ffc13d;text-shadow:0 3px #d79322,0 0 2px white;transform:rotate(-4deg);filter:drop-shadow(0 4px 5px #5e5d3b18)}.clear-stars>span:nth-child(2){font-size:52px;transform:translateY(-5px)}.clear-stars .dim{color:#d3dfdf;text-shadow:0 2px #acbfcb}.clear-actions .ribbon{background:linear-gradient(#ffb07c,#ff8165);border:2px solid #fff8;color:white;box-shadow:0 4px 0 #d57053,0 6px 10px #b6855033;letter-spacing:5px;transform:rotate(-2deg)}.clear-actions #clear-score{color:#3c6385;text-shadow:0 2px white;font-variant-numeric:tabular-nums}.clear-actions #clear-best{color:#6e8995}.clear-actions>button:not(.primary){background:#ffffffde;border-color:white;box-shadow:0 3px #c0d7e3;color:#63839b}.clear-actions .text-button{background:transparent!important;box-shadow:none!important;font-weight:600}.clear-bubble{top:26%}.stage-screen{background:linear-gradient(150deg,#f9fdff,#e8f6ff);border:4px solid white;border-radius:30px;box-shadow:0 7px 0 #b7d7e9,0 12px 24px #426d991c;color:#375c7f}.stage-screen>p{color:#81a0b4}.stage-screen .back-button{background:#fff;border:0;box-shadow:0 3px #d4e6ef;padding:6px 10px;min-height:33px}.stage-card{border:3px solid white;border-radius:24px;background:linear-gradient(135deg,#fdfefe,#edf6ff);box-shadow:0 5px #b7d5eb,0 8px 12px #4c80a51a;color:#46729a;min-height:165px;gap:4px}.stage-card small{background:#dff0ff;color:#6498c3;font-size:10px;padding:3px 11px;border-radius:10px}.stage-card:nth-child(n+4) small{background:#f4eaff;color:#a688cd}.stage-card strong{font-size:36px;font-weight:950;color:#568bc1;letter-spacing:1px}.stage-card>span{font-size:10px;color:#86a4ba}.stage-card.current{border:3px solid #8fcaef;background:linear-gradient(140deg,#e2f2ff,#fafcff);box-shadow:0 5px #78b0d7,0 0 0 2px #fff,0 9px 18px #4d8fbd33}.stage-card em{color:#7699b3;font-size:10px}.stage-card .stars{font-size:23px;margin:2px 0}.stage-screen .instructions{display:block}
#celebration{position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden}#celebration i{position:absolute;left:var(--x);top:-25px;width:10px;height:17px;border-radius:3px;background:var(--c);opacity:0;animation:confetti-fall 2.7s var(--delay) cubic-bezier(.13,.65,.32,1) forwards}
@keyframes confetti-fall{0%{opacity:0;transform:translate(0,-15px) rotate(var(--r))}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--drift),95svh) rotate(calc(var(--r) + 570deg))}}
@keyframes screen-in{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes exit-beckon{0%,100%{transform:translateX(-1px)}50%{transform:translateX(3px)}}
@keyframes move-pop{0%{scale:1}50%{scale:1.035}100%{scale:1}}
@keyframes hint-glow{0%,100%{outline-color:#ffe184;box-shadow:0 0 6px #ffe89c66}50%{outline-color:#fff4b5;box-shadow:0 0 16px #ffe89cbb}}
@media(max-width:380px){main{padding:8px 8px 20px}.game-screen{padding:0 10px 15px}.play-header{min-height:84px}.mascot-chat>img{width:49px;height:68px}.play-header #say{font-size:10px;min-height:53px}.stats{grid-template-columns:1fr 100px;gap:10px;margin-bottom:12px}.stage-chip,.moves-chip{min-height:61px;padding:7px 12px}.stage-chip strong{font-size:20px}.mission-bar{font-size:11px;padding:8px;gap:7px}.mission-bar small{font-size:8px}.mission-bar .stars{font-size:18px}.parking-wrap{padding:6px 29px 10px 8px;margin-bottom:20px;border-radius:20px}.board-meta{font-size:7px}.board-meta>span:last-child{font-size:8px}.buttons{gap:8px}.buttons button{min-height:74px;font-size:11px}.tool-icon{font-size:30px;height:32px}.scene-actions{left:9%;right:9%}.scene-actions .big{font-size:30px}.instructions{font-size:9px;gap:10px}.clear-stars{font-size:36px}.clear-stars>span:nth-child(2){font-size:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#celebration{display:none}}