:root{font-family:'Nunito',system-ui,'Noto Sans',sans-serif;color:#533a29;background:#f4e2c0;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#fff2d7,#e7bf85);min-height:100dvh}button,select{font:inherit;font-weight:800;min-height:44px;border:1px solid #bf8b50;border-radius:14px;background:#fff7e6;color:#553820;padding:10px 16px;cursor:pointer;box-shadow:0 3px 0 #ba8b5940}button:active{transform:translateY(2px);box-shadow:none}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #258eb1;outline-offset:2px}button.primary{background:#2a8eac;color:white;border-color:#176079;box-shadow:0 4px 0 #176079}button[aria-pressed=false]{opacity:.5}[hidden]{display:none!important}#app{width:min(100%,460px);margin:auto;padding:10px 12px max(12px,env(safe-area-inset-bottom));}header{display:flex;align-items:center;gap:12px;margin-bottom:12px}header a{color:#d96039;text-decoration:none;font-size:30px}header div{flex:1}header span{font-size:10px;font-weight:900;letter-spacing:2px}header strong{display:block;font-size:24px;line-height:1.05;letter-spacing:2px}header button{font-size:22px;min-width:48px}.hud{display:grid;grid-template-columns:1.2fr 1fr .9fr 1fr;gap:6px;padding:10px;background:#fff8e6;border:1px solid #cc9b62;border-radius:14px}.hud small{display:block;font-size:11px;font-weight:800}.hud strong{display:block;font-size:20px;line-height:1.3}.hud div:nth-child(3){color:#b8392b}.stagebar{display:flex;justify-content:space-between;align-items:center;margin:8px 0;gap:8px}.stagebar strong{font-size:13px}.stagebar button{min-width:44px;padding:4px}.arena{display:grid;gap:8px}canvas{display:block;width:100%;height:auto;border-radius:18px;border:3px solid #96623d;box-shadow:0 5px 0 #9e6a3d38;touch-action:none;background:#e8be83}.controls{display:flex;gap:12px;align-items:center;justify-content:space-between}.controls p{font-size:12px;line-height:1.4;flex:1;margin:0}.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,42px);gap:3px;flex-shrink:0}.dpad button{font-size:22px;min-height:42px;padding:0;touch-action:none}.dpad [data-dir="0"]{grid-area:1/2}.dpad [data-dir="3"]{grid-area:2/1}.dpad [data-dir="1"]{grid-area:2/3}.dpad [data-dir="2"]{grid-area:3/2}.paw{grid-area:2/2;background:url('assets/atlas.webp') no-repeat 100% 100%;background-size:400% 400%;opacity:.6}.danger .hud{border-color:#c74331}.powered canvas{border-color:#d74536}dialog{width:min(94vw,470px);padding:22px;max-height:94dvh;border:1px solid #c79966;border-radius:24px;background:#fff5de;color:#553820;box-shadow:0 18px 60px #54332155;overflow:auto}dialog::backdrop{background:#3b2a1ed9;backdrop-filter:blur(5px)}dialog h1,dialog h2{font-family:'Baloo 2',system-ui,sans-serif;margin:0 0 8px;line-height:1.12}dialog h1{font-size:34px}dialog h1 em{font-style:normal;color:#2888a3}dialog>button,.menu-content>button{display:block;width:100%;margin-top:10px}dialog p{font-size:14px;line-height:1.5}#menu{padding:0}.cover{height:180px;background:url('cover.webp') center/cover}.menu-content{padding:20px}.records{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;margin:12px 0}.settings{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.settings button{padding:8px 12px;min-width:44px}.settings select{flex:1;min-width:125px;width:140px}.cat-card{display:flex;gap:12px;margin:12px 0;align-items:center}.cat-card .portrait{width:60px;height:60px;flex-shrink:0;background-image:url('assets/atlas.webp');background-size:400% 400%;background-repeat:no-repeat}.cat-card strong{font-size:14px}.cat-card p{margin:2px 0;font-size:12px}#resultpose{width:130px;height:130px;margin:0 auto 12px;background:url('assets/atlas.webp') no-repeat;background-size:400% 400%;background-position:66.6667% 100%}#result{text-align:center}#levelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}#levelgrid button{padding:9px 4px;font-size:12px;min-height:62px}#levelgrid small{display:block;margin-top:4px;color:#ac671c}.settings .langclone{flex-basis:100%;width:100%}@media(max-width:350px){#app{padding:8px}.controls{gap:8px}.controls p{font-size:11px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.dpad button{min-height:44px}.hud strong{font-size:18px}.cover{height:135px}.menu-content{padding:16px}.menu-content h1{font-size:29px}}@media(min-width:351px){.dpad{grid-template-rows:repeat(3,44px)}.dpad button{min-height:44px}}@media(orientation:landscape) and (max-height:540px){#app{width:min(100%,800px);padding:8px 16px}.arena{grid-template-columns:minmax(0,1fr) 160px;justify-content:center;align-items:center;max-width:470px;margin:auto}.arena canvas{width:auto;height:calc(100dvh - 146px);max-width:100%}.controls{flex-direction:column;align-self:stretch;justify-content:center}.controls p{flex:0}header{margin-bottom:4px}.hud{padding:5px 10px}.hud strong{font-size:17px}.stagebar{margin:4px 0}header strong{font-size:18px}.cover{height:100px}.menu-content{padding:16px}}@media(prefers-reduced-motion:reduce){button:active{transform:none}dialog::backdrop{backdrop-filter:none}}
@media(orientation:portrait) and (max-height:700px){.arena{justify-items:center}.arena canvas{height:calc(100dvh - 242px);max-height:100%;width:auto;max-width:100%}.controls{flex-direction:column;gap:6px;width:100%}.controls p{font-size:11px;min-height:32px}.dpad{grid-template-columns:repeat(4,52px);grid-template-rows:44px;justify-content:center}.dpad [data-dir="0"]{grid-area:1/3}.dpad [data-dir="3"]{grid-area:1/1}.dpad [data-dir="1"]{grid-area:1/4}.dpad [data-dir="2"]{grid-area:1/2}.paw{display:none}}
@media(orientation:portrait) and (max-height:700px){.arena canvas{height:calc(100dvh - 282px)}}
@media(orientation:landscape) and (max-height:540px){#app{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-rows:58px 102px minmax(0,1fr);gap:8px;width:100%;height:100dvh;padding:8px 12px}header{grid-area:1/1;gap:6px;align-self:start;margin:0}header a{font-size:22px}header span{font-size:8px;letter-spacing:.5px}header strong{font-size:18px;letter-spacing:1px}header button{padding:5px;min-width:36px}.hud{grid-area:2/1;grid-template-columns:1fr 1fr;padding:8px;align-self:start}.hud small{font-size:10px}.hud strong{font-size:17px}.stagebar{grid-area:3/1;flex-direction:column;align-items:start;justify-content:start;margin:0}.arena{grid-area:1/2/4/3;grid-template-columns:minmax(0,1fr) 140px;gap:8px;max-width:none;margin:0;height:calc(100dvh - 16px)}.arena canvas{height:calc(100dvh - 24px);width:auto;max-width:100%;justify-self:center}.controls{align-self:center}.controls p{font-size:11px}.dpad{grid-template-columns:repeat(3,44px)}}