:root{color-scheme:dark;--ink:#fff0d0;--muted:#c1b79d;--gold:#ffcf7b;--teal:#9bd9c4}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;font-family:system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 50% 40%,#31555b,#122d32 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #b3ead5;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.shell{container-type:inline-size;width:min(620px,calc(100vw - 12px),calc(100dvh - 308px));min-width:0;padding:6px;margin:auto}.console{background:#203f44;border:1px solid #64817d;border-radius:16px 16px 0 0;padding:7px 12px 11px;box-shadow:0 12px 45px #0003}header{height:46px;display:flex;align-items:center;gap:5px}.icon-button{display:grid;place-items:center;width:42px;height:44px;flex:none;border:1px solid #7fa09555;border-radius:10px;background:#142e33;padding:3px}.icon{display:inline-block;width:31px;height:31px;flex:none;background:url('assets/ui-icons-v1.webp') no-repeat;background-size:400% 300%;vertical-align:middle;pointer-events:none}.home{background-position:0 0}.map{background-position:33.333333% 0}.sound{background-position:66.666667% 0}.muted{background-position:100% 0}.pause{background-position:0 50%}.play{background-position:33.333333% 50%}.restart{background-position:66.666667% 50%}.close{background-position:100% 50%}.star{background-position:0 100%}.lock{background-position:66.666667% 100%}.undo-icon{transform:scaleX(-1)}.identity{flex:1;min-width:0;text-align:center}h1{font:700 21px/1 Georgia,serif;color:var(--gold);margin:0 0 5px;white-space:nowrap}.identity small{display:block;font-size:7px;letter-spacing:1px;color:#bdc9b9;white-space:nowrap}.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:9px;margin-top:6px;border-top:1px solid #a6d1bd23}.hud>div{min-width:0;text-align:center}.hud small{display:block;color:#c0c7b3;font-size:8px;letter-spacing:1px;margin-bottom:4px;white-space:nowrap}.hud b{font-size:22px;font-variant-numeric:tabular-nums}.hud em{font-style:normal;font-size:12px;color:#b5c3ae}
.board-wrap{padding:9px 9px 0;background:#17353a;border-left:1px solid #64817d;border-right:1px solid #64817d}.board{position:relative;display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));aspect-ratio:1;background:#294349;border-radius:8px;overflow:hidden;touch-action:manipulation}.cell{position:relative;aspect-ratio:1;background:url('assets/floor-v1.webp') center/100% 100%;pointer-events:none}.cell.wall{background-image:url('assets/wall-v1.webp')}.cell.goal:after{content:'';position:absolute;inset:0;background:url('assets/goal-v1.webp') center/100% 100%}.entity{position:absolute;width:calc(100% / var(--cols));height:calc(100% / var(--cols));pointer-events:none;transition:left .1s ease,top .1s ease}.entity img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}.entity.crate{z-index:2}.entity.robot{z-index:3}.entity.robot img{transition:rotate .1s ease}.entity.crate.placed:after{content:'';position:absolute;top:6%;right:6%;width:22%;height:22%;background:url('assets/ui-icons-v1.webp') 0 100%/400% 300%;pointer-events:none}#status{min-height:34px;margin:0;padding:9px 4px 7px;text-align:center;font-size:11px;line-height:1.5;color:#e1ddbc}#status.warning{color:#ffcc8d}
.controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px 13px;border:1px solid #64817d;border-top:0;border-radius:0 0 16px 16px;background:#203f44}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.tools button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:46px;padding:7px;border:1px solid #819b855e;border-radius:10px;background:#15343a;font-size:11px}.tools .icon{width:25px;height:25px}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px}.dpad button{display:grid;place-items:center;padding:4px;background:linear-gradient(#ffe4a2,#dcac5d);border:1px solid #e8c786;border-radius:9px;box-shadow:0 3px #775c30}.dpad .icon{width:28px;height:28px}.dpad .up{grid-row:1;grid-column:2}.dpad .left{grid-row:2;grid-column:1}.dpad .right{grid-row:2;grid-column:3}.dpad .down{grid-row:3;grid-column:2}.dpad-center{grid-row:2;grid-column:2;object-fit:contain;width:44px;height:44px;opacity:.75}.up .icon{transform:rotate(-90deg)}.left .icon{transform:rotate(180deg)}.down .icon{transform:rotate(90deg)}.help{font-size:8px;color:#a8bbae;text-align:center;margin:9px 0 0}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:safe center;padding:16px;overflow:auto;background:#102c31ed;backdrop-filter:blur(6px)}.panel{width:min(430px,100%);padding:20px 24px;text-align:center;background:linear-gradient(#27494b,#18373b);border:1px solid #86a68f;border-radius:20px;box-shadow:0 20px 80px #0005;overflow:hidden}.menu-art{display:block;width:calc(100% + 48px);height:auto;margin:-20px -24px 18px}.panel.result .menu-art{display:none}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--gold);margin:0 0 10px}h2{font:700 29px/1.1 Georgia,serif;margin:10px 0 12px;letter-spacing:-.5px}.panel p:not(.eyebrow){font-size:12px;line-height:1.7;color:#cdd4bb}.primary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:11px 20px;background:linear-gradient(#ffe7ab,#e5b560);color:#3d3620;border:1px solid #ffe0a0;border-radius:11px;font-size:12px;font-weight:800;letter-spacing:.7px;box-shadow:0 4px #775a2b}.panel>.primary{width:100%;margin:17px 0 8px}.quiet{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;color:#c9c9ad;font-size:11px;padding:7px;min-height:40px}.quiet .icon{width:24px;height:24px}.record{font-size:10px!important;margin:9px 0 0}#resultStars .icon{width:47px;height:47px}.star-row{display:inline-flex;align-items:center;justify-content:center;gap:3px}.unearned{filter:grayscale(1);opacity:.25}.save-notice{font-size:11px!important;padding:8px;border:1px solid #839c7e66;border-radius:8px;background:#17392f;color:#ffe3ac!important}
dialog{width:min(620px,calc(100% - 24px));max-height:88dvh;overflow:auto;padding:23px;border:1px solid #86a68f;border-radius:18px;background:linear-gradient(#27494b,#18373b);color:var(--ink);box-shadow:0 20px 80px #0006}dialog::backdrop{background:#102c31e8;backdrop-filter:blur(6px)}dialog p{font-size:12px;color:var(--muted);line-height:1.6}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}#levels h3{font-size:11px;color:var(--gold);margin:22px 0 10px}.level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.level-grid button{min-height:72px;padding:9px 2px 5px;border:1px solid #748b7566;border-radius:11px;background:#15343a}.level-grid button>b{font-size:20px}.level-grid small{display:block;margin-top:4px}.level-grid .icon{width:16px;height:16px}.level-grid .star-row{gap:0}.level-grid .lock{width:23px;height:23px}.level-grid button.current{border-color:#e0c284}#pauseDialog{max-width:380px;text-align:center}#pauseDialog>.primary{width:100%;margin:18px 0 7px}.credit{font-size:8px;letter-spacing:1px;opacity:.65}
@media(max-width:600px){.tools{grid-template-columns:1fr;gap:6px}.tools button{min-height:44px;font-size:10px}.controls{gap:10px;padding:9px 10px 12px}.console{padding:5px 9px 9px}.hud{gap:5px}.hud small{font-size:7px;letter-spacing:.6px}.hud b{font-size:19px}.hud em{font-size:10px}.identity h1{font-size:18px}.identity small{font-size:6px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.panel{padding:18px 22px}.menu-art{width:calc(100% + 44px);margin:-18px -22px 16px}.panel p:not(.eyebrow){font-size:11px}h2{font-size:27px}}
@container(max-width:320px){.identity{display:none}header{justify-content:space-between}.controls{grid-template-columns:1fr;gap:8px}.tools{grid-template-columns:repeat(3,minmax(0,1fr))}.tools button{flex-direction:column;gap:1px;padding:4px;font-size:9px}.tools .icon{width:21px;height:21px}.dpad{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:44px;width:100%}.dpad .left{grid-row:1;grid-column:1}.dpad .up{grid-row:1;grid-column:2}.dpad .down{grid-row:1;grid-column:3}.dpad .right{grid-row:1;grid-column:4}.dpad-center{display:none}.help{font-size:7px}}
@media(max-height:500px) and (min-width:481px){.shell{width:min(850px,100%);height:calc(100dvh - 8px);padding:4px;display:grid;grid-template-columns:minmax(105px,1fr) auto minmax(140px,1fr);grid-template-rows:92px 1fr;gap:0 8px}.console{grid-column:1/-1;padding:2px 10px 7px;border-radius:12px}header{height:43px}.hud{padding-top:5px;margin-top:2px}.hud small{font-size:7px}.hud b{font-size:17px}.hud em{font-size:10px}.board-wrap{grid-column:2;grid-row:2;width:calc(100dvh - 140px);max-width:42vw;align-self:center;justify-self:center;padding:3px;border:1px solid #64817d;border-radius:8px}#status{font-size:8px;min-height:26px;line-height:1.2;padding:4px 0}.controls{display:contents}.tools{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;align-self:center;width:100%;max-width:130px;justify-self:center}.tools button{min-height:44px;font-size:10px}.dpad{grid-column:3;grid-row:2;align-self:center;justify-self:center}.help{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}