/* The approved illustration is the scenery; moving pieces and controls are live. */
main{max-width:550px;padding:10px 8px 24px}
.game-screen{position:relative;isolation:isolate;width:100%;aspect-ratio:2/3;min-height:0;padding:0;border:0;border-radius:24px;background:#e9f1ed;overflow:hidden;box-shadow:0 8px 24px #283c4328}
.game-screen:before{display:none}
.play-world-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none;user-select:none}
.game-screen .game-nav{position:static;display:contents;margin:0;padding:0}
.game-screen .game-nav button:first-child{position:absolute;right:1.7%;top:1.5%;width:10.9%;height:7.4%;min-height:0;border:0;border-radius:50%;background:transparent;box-shadow:none;padding:0;font-size:0;color:transparent;z-index:5}
.game-screen .game-nav button:last-child{display:none}
.game-screen .game-nav button:first-child:hover{background:#ffffff18}
.game-screen .play-header{position:static;display:contents;padding:0;margin:0;border:0}
.game-screen .play-header h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.game-screen .mascot-chat{position:static;display:contents}
.game-screen .mascot-chat>img{display:none}
.game-screen .play-header #say{position:absolute;left:47.3%;top:3.9%;width:20%;height:6.6%;min-height:0;display:grid;place-items:center;border:0;border-radius:0;padding:0 2px;margin:0;background:transparent;box-shadow:none;color:#282521;font-size:clamp(8px,2.7cqw,14px);line-height:1.36;font-weight:900;text-wrap:balance;z-index:3}
.game-screen .play-header #say:before{display:none}
.game-screen .stats{position:static;display:contents;gap:0;margin:0;padding:0}
.game-screen .stage-chip,.game-screen .moves-chip{position:absolute;top:21.1%;height:4.4%;min-height:0;border:0;box-shadow:none;border-radius:0;background:transparent;padding:0;margin:0;display:grid;place-items:center;z-index:3}
.game-screen .stage-chip{left:14.3%;width:28.3%;color:#fff}
.game-screen .moves-chip{left:69.6%;width:15.2%;color:#30251c}
.game-screen .stage-chip small,.game-screen .moves-chip small{display:none}
.game-screen .stage-chip strong{font-size:clamp(16px,5.15cqw,27px);font-weight:950;letter-spacing:.5px;line-height:1.1;color:white;text-shadow:0 2px #1a4d8b33;white-space:nowrap}
.game-screen .moves-chip strong{font-size:clamp(16px,5.4cqw,29px);font-weight:950;line-height:1.1;color:#30251c;white-space:nowrap;letter-spacing:.5px}
.game-screen .mission-bar{position:absolute;left:44.9%;top:22%;width:20.5%;height:3.5%;min-height:0;margin:0;padding:0;border:0;box-shadow:none;background:transparent;display:flex;justify-content:center;z-index:3}
.game-screen .mission-bar>span:not(#live-stars){display:none}
.game-screen #live-stars{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:4%;font-size:clamp(17px,5.5cqw,30px)}
.game-screen #live-stars .earned{color:#ffd239;text-shadow:0 2px #c77a12,0 0 1px #6b4b20;filter:drop-shadow(0 1px #fff5)}
.game-screen #live-stars .dim{color:#b6a17d;text-shadow:0 1px #725a38}
.game-screen .parking-wrap{position:absolute;left:16.7%;top:30.7%;width:66.7%;aspect-ratio:1;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;z-index:2}
.game-screen .board-meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.game-screen #board{width:100%;height:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:6px;background-color:transparent;background-image:linear-gradient(#eaf4f345 1px,transparent 1px),linear-gradient(90deg,#eaf4f345 1px,transparent 1px);background-size:16.6667% 16.6667%;box-shadow:none;overflow:visible}
.game-screen #board:before{display:none}
.game-screen .exit{display:none}
.game-screen .piece{filter:drop-shadow(0 3px 1px #13233066);padding:0}
.game-screen .piece.cat{border:1px solid #ffffff88;border-radius:9px;background:#ffffff26;box-shadow:inset 0 1px #ffffff55;filter:drop-shadow(0 2px 1px #13233033)}
.game-screen .piece.cat:after{display:none}
.game-screen .piece.dragging{z-index:9;filter:drop-shadow(0 6px 3px #13233088);outline:2px solid #d6f6ff77}
.game-screen .illustrated-tools{position:static;display:contents;gap:0;margin:0;padding:0;pointer-events:none}
.game-screen .illustrated-tools button{position:absolute;top:83.333333%;height:10.677083%;min-height:0;padding:0;border:0;border-radius:20px;box-shadow:none;background:transparent;display:block;overflow:hidden;pointer-events:auto;z-index:4;filter:none;transition:transform .12s,filter .12s}
.game-screen .illustrated-tools button:nth-child(1){left:6.25%;width:29.296875%}
.game-screen .illustrated-tools button:nth-child(2){left:35.546875%;width:30.078125%}
.game-screen .illustrated-tools button:nth-child(3){left:65.8203125%;width:29.296875%}
.game-screen .illustrated-tools button:before{display:none}
.game-screen .illustrated-tools button:hover{filter:brightness(1.06)}
.game-screen .illustrated-tools button:active{transform:translateY(3px) scale(.98);box-shadow:none;filter:brightness(.96)}
.illustration-clip{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}
.illustration-clip img{position:absolute;max-width:none;max-height:none;width:calc(100% * 1024 / var(--crop-w));height:calc(100% * 1536 / var(--crop-h));left:calc(-100% * var(--crop-x) / var(--crop-w));top:calc(-100% * var(--crop-y) / var(--crop-h));object-fit:fill;pointer-events:none;user-select:none}
.game-screen>.instructions{position:absolute;left:0;bottom:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.game-screen{container-type:inline-size}
@media(max-width:380px){main{padding:4px 2px 18px}.game-screen{border-radius:18px}.game-screen .illustrated-tools button{border-radius:16px}}

/* Shared illustrated menus: the lettering is part of the painted artwork. */
.scene{container-type:inline-size;min-height:0;max-height:none;border:0;border-radius:24px;box-shadow:0 8px 24px #283c4328;background:#ecf7fc}
.scene .scene-art{mask-image:none;object-fit:fill}
.title-scene{background:#d3d8d6}
.title-scene .scene-art{height:88%;mask-image:linear-gradient(#000 86%,transparent 100%)}
.title-scene .title-logo{top:2%;left:8%;right:8%;height:29%}
.title-scene .title-bubble,.clear-scene .clear-bubble{color:#382719;background:#fffef7;border:2px solid #503421;border-radius:45% 48% 42% 46%;box-shadow:0 3px 0 #66412b22;font-family:"Hiragino Maru Gothic ProN","YuKyokasho","Yu Gothic",cursive;font-weight:900;line-height:1.5;font-size:clamp(11px,3.4cqw,18px);padding:3% 4%;text-shadow:0 1px #fff;transform:rotate(3deg)}
.title-scene .title-bubble{top:31%;right:7%}
.title-bubble:after{border-top-color:#503421;bottom:-11px;left:30%}
.menu-art{--slice-y:0;--slice-h:256;display:block;width:100%;height:100%;background-image:url('assets/menu-ui-atlas.png');background-repeat:no-repeat;background-size:100% calc(100% * 1536 / var(--slice-h));background-position:50% calc(100% * var(--slice-y) / (1536 - var(--slice-h)));pointer-events:none}
.art-play{--slice-y:12;--slice-h:264}.art-levels{--slice-y:276;--slice-h:236}.art-next{--slice-y:514;--slice-h:244}.art-again{--slice-y:764;--slice-h:252}.art-clear{--slice-y:1020;--slice-h:276}.art-score{--slice-y:1296;--slice-h:240}
.scene .painted-control,.scene .painted-control:not(.primary){position:relative;display:block;width:100%;aspect-ratio:4/1;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;flex:none;filter:none;transition:transform .12s,filter .12s}
.scene .painted-control:after,.scene .painted-control:before{display:none}
.scene .painted-control:hover{filter:brightness(1.06)}
.scene .painted-control:active{transform:translateY(3px) scale(.98);filter:brightness(.97)}
.scene .painted-control:focus-visible{outline:3px solid #fff;outline-offset:0;border-radius:28px}
.title-scene .scene-actions{left:8%;right:8%;bottom:1.5%;gap:1.5cqw;display:grid}
.clear-scene .scene-art{height:88%;mask-image:linear-gradient(#000 80%,transparent 100%)}
.clear-scene .clear-logo{top:1.5%;left:8%;right:8%;height:17%;font-size:0;line-height:0;transform:rotate(-2deg);filter:drop-shadow(0 4px 0 #fff8);margin:0}
.clear-scene .clear-stars{top:18.3%;font-size:clamp(26px,7.6cqw,41px);gap:2%;transform:none;text-shadow:0 3px #ad691b,0 0 2px #fff}
.clear-scene .clear-stars>span:nth-child(2){font-size:1.2em}
.clear-scene .clear-bubble{top:27%;left:7%;transform:rotate(-4deg);font-size:clamp(11px,3cqw,16px)}
.clear-scene .clear-actions{top:56%;bottom:1%;left:9%;right:9%;display:flex;flex-direction:column;align-items:center;gap:0}
.result-plaque{position:relative;width:64%;height:17%;flex:none;min-height:0;margin-bottom:1%}
.result-plaque .menu-art{position:absolute;inset:0}
.clear-actions #clear-score{position:absolute;inset:0;display:grid;place-items:center;color:#422a1c;font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",cursive;font-size:clamp(20px,6.3cqw,34px);font-weight:950;line-height:1;text-shadow:0 2px #fff;transform:rotate(-2deg)}
.clear-scene .clear-actions #clear-best{width:100%;flex:none;font-size:clamp(9px,2.5cqw,13px);line-height:1.4;color:#4c3725;font-weight:800;min-height:1.6em;margin:0 0 1%;text-shadow:0 1px 2px #fff,0 0 5px #fff;background:#fff8;border-radius:12px;padding:2px 0}
.clear-scene .clear-actions .painted-control{width:94%;height:23%;aspect-ratio:auto}
@media(max-width:380px){.scene{border-radius:18px}.title-scene .scene-actions{gap:1cqw}}

/* Ten hand-painted stage signs with live records below each illustration. */
.stage-screen{position:relative;container-type:inline-size;min-height:0;padding:12px 18px 20px;border:0;border-radius:24px;background:linear-gradient(#d8f0ff,#f6fbff 35%,#edf7ed);box-shadow:0 8px 24px #283c4328;color:#4b301d;overflow:hidden}
.stage-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.stage-screen .back-button{position:relative;display:block;flex:none;width:48px;height:48px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%;overflow:hidden}
#level-progress{background:#fffcf2;border:2px solid #987857;border-radius:15px;padding:7px 15px;box-shadow:inset 0 -3px #d5c3a533,0 2px #fff8;color:#65472b;font-weight:900;font-size:13px;transform:rotate(1deg)}
.stage-screen h1{position:relative;width:100%;height:auto;aspect-ratio:4/1;margin:8px 0 0;font-size:0;line-height:0}
.stage-atlas{--cell-x:0;--cell-y:330;display:block;width:100%;height:100%;background-image:url('assets/stage-ui-atlas.png');background-repeat:no-repeat;background-size:200% calc(100% * 1536 / 232);background-position:calc(100% * var(--cell-x) / 512) calc(100% * var(--cell-y) / 1304);pointer-events:none}
.stage-atlas.heading-art{background-size:100% 512%;background-position:50% 1.618%}
.stage-screen .stage-intro{font-family:"Hiragino Maru Gothic ProN","YuKyokasho",cursive;color:#63452d;font-size:clamp(10px,2.8cqw,14px);font-weight:800;margin:0 0 10px}
.stage-screen #levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:0}
.stage-screen .stage-card,.stage-screen .stage-card.current{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;min-height:0;padding:0 0 5px;border:0;border-radius:18px;background:transparent;box-shadow:none;color:#50351e;transition:transform .12s,filter .12s}
.stage-screen .stage-card:hover{filter:brightness(1.05)}
.stage-screen .stage-card:active{transform:translateY(3px) scale(.98)}
.stage-screen .stage-card.current:after{content:'';position:absolute;inset:0 0 -2px;border:2px dashed #ad7842;border-radius:20px;pointer-events:none}
.stage-screen .stage-card-art{display:block;position:relative;width:100%;aspect-ratio:2/1;filter:drop-shadow(0 2px 1px #78523925)}
.stage-screen .stage-card-info{font-family:"Hiragino Maru Gothic ProN","YuKyokasho",cursive;font-size:clamp(9px,2.5cqw,12px);font-weight:900;color:#62462b;letter-spacing:0;line-height:1.5}
.stage-screen .stage-card-record{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:2px 4px;border-radius:9px;background:#fff9;width:94%}
.stage-screen .stage-card .stars{font-size:clamp(15px,4cqw,20px);margin:0;gap:1px}
.stage-screen .stage-card .stars .dim{color:#c1c8ca;text-shadow:0 1px #899497}
.stage-screen .stage-card em{font-size:clamp(8px,2.3cqw,11px);color:#70533a;font-weight:800;margin:0;line-height:1.3;font-style:normal}
.stage-screen .instructions{font-size:10px;color:#70533a;margin:18px 0 0;font-weight:700}
@media(max-width:380px){.stage-screen{padding:10px 10px 18px;border-radius:18px}.stage-screen #levels{gap:9px 8px}.stage-screen .back-button{width:42px;height:42px}.stage-top{min-height:42px}#level-progress{font-size:11px;padding:5px 10px}.stage-screen .stage-card-record{gap:4px}}
.sound-controls{display:flex;justify-content:center;gap:12px;margin:17px auto 0;max-width:340px}
.sound-controls button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:44px;padding:5px 12px;border:2px solid #795637;border-radius:24px;background:linear-gradient(#fffef7,#f4ebd7);box-shadow:inset 0 2px #fff,0 3px #8d68453d;color:#67472d;font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif;font-weight:900;font-size:13px;text-shadow:0 1px #fff;transition:transform .12s}
.sound-controls .sound-icon{font-size:25px;line-height:1;color:#328d74;text-shadow:0 1px white}
.sound-controls .sound-state{font-size:10px;background:#358d69;border:1px solid #256948;color:#fff;border-radius:9px;min-width:34px;padding:4px;text-shadow:none;box-shadow:inset 0 1px #ffffff55}
.sound-controls button[aria-pressed="false"] .sound-state{background:#aca597;border-color:#8d877d}
.sound-controls button[aria-pressed="false"] .sound-icon{color:#8d877d}
.sound-controls button:active{transform:translateY(2px);box-shadow:inset 0 2px #fff}
.sound-controls button:focus-visible{outline:3px solid #e9a52f;outline-offset:3px}
.game-screen .illustrated-tools #hint-button{overflow:visible}
.hint-count{position:absolute;right:8%;top:-10%;z-index:2;min-width:62%;padding:3px 6px;border:1.5px solid #9f6625;border-radius:14px;background:#fff9df;color:#70451e;box-shadow:0 2px #8c571d33;font-size:clamp(9px,2.4cqw,13px);font-weight:900;line-height:1.2;text-shadow:none;pointer-events:none}
.game-screen .illustrated-tools #hint-button:disabled{cursor:default;filter:grayscale(.8) brightness(.92);transform:none}
.ending-screen{position:relative;width:100%;aspect-ratio:2/3;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px #283c4328}
.ending-screen>img{display:block;width:100%;height:100%;pointer-events:none}
.ending-screen>button{position:absolute;left:12%;width:76%;height:12%;min-height:0;padding:0;border:0;border-radius:40px;background:transparent;box-shadow:none}
.ending-levels{top:70%}.ending-title{top:83%}
.ending-screen>button:hover{background:#ffffff15}.ending-screen>button:active{background:#ffffff30}
.reward-button{margin-top:16px;padding:12px 20px;background:linear-gradient(#fff5c3,#f2cd73);border:2px solid #96602e;box-shadow:0 3px #ad793f;color:#68411f;font-weight:900}