:root{--paper:#f4efe6;--ink:#2b2a27;--muted:#6b675f;--wall:#4a4640;--floor:#e6dfd2;--goal:#c9a86a;--box:#a8613a;--box-on:#4f7a3a;--player:#2f5f8f;--btn:#fff;--line:#d9d1c2;--cell:min(11vw, 56px)}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);margin:0;font-family:-apple-system,Hiragino Sans,Noto Sans JP,system-ui,sans-serif}body{padding:env(safe-area-inset-top,0) 16px env(safe-area-inset-bottom,0)}#app{max-width:640px;margin:0 auto;padding-block:24px}h1{margin:0 0 8px;font-size:1.6rem}.lede{color:var(--muted);margin:0 0 20px}.levels{gap:8px;margin:0 0 24px;padding:0;list-style:none;display:grid}button{font:inherit;border:1px solid var(--line);background:var(--btn);color:var(--ink);cursor:pointer;border-radius:6px;min-height:44px;padding:12px 16px}button:focus-visible{outline:3px solid var(--player);outline-offset:2px}.levels button{text-align:left;width:100%}.help{color:var(--muted);font-size:.9rem}.bar{justify-content:space-between;margin-bottom:12px;display:flex}.count{font-variant-numeric:tabular-nums}.board{gap:2px;width:fit-content;max-width:100%;margin:0 auto 16px;display:grid}.cell{width:var(--cell);height:var(--cell);background:var(--floor);border-radius:3px;position:relative}.cell.wall{background:var(--wall)}.cell.goal{background:var(--floor)}.cell.goal:before{content:"";background:var(--goal);border-radius:50%;position:absolute;inset:35%}.cell.box:after,.cell.box-on-goal:after{content:"";background:var(--box);border-radius:4px;position:absolute;inset:12%}.cell.box-on-goal:after{background:var(--box-on)}.cell.player:after{content:"";background:var(--player);border-radius:50%;position:absolute;inset:18%}.dpad{grid-template-rows:repeat(3,56px);grid-template-columns:repeat(3,56px);justify-content:center;gap:6px;margin-bottom:12px;display:grid}.dir{padding:0;font-size:1.3rem}.dir.up{grid-area:1/2}.dir.left{grid-area:2/1}.dir.right{grid-area:2/3}.dir.down{grid-area:3/2}.actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}@media (width>=700px){.dpad{display:none}}