:root{--color-bg:#e6e4f0;--color-text:#1c1b24;--color-muted:#55536a;--color-ok:#1f6f43;--color-problem:#a12c2c;--space-2:.5rem;--space-4:1rem;--space-8:2rem;--radius:.5rem;--font-body:system-ui, -apple-system, "Segoe UI", sans-serif;--shell:#f4f4f8;--shell-edge:#c4c4d4;--shell-shadow:#28203040;--bezel:#2a2a34;--pill:#4a5070;--pill-edge:#2a3048;--focus:#f8b800;--ui-ink:#282030;--ui-paper:#f8f8f8;--ui-frame:#6890b8;--ui-panel:#30406c;--ui-panel-dot:#38497a;--ui-gold:#f8d030;--hp-ok:#48d048;--hp-low:#f8b820;--hp-danger:#f04030;--exp:#40a8f8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--color-bg:#121218;--color-text:#f2f0ea;--color-muted:#b4b1c4;--color-ok:#6fd39b;--color-problem:#ff8a80;--shell:#2e2e38;--shell-edge:#1a1a22;--shell-shadow:#00000080;--bezel:#0e0e14;--pill:#4a4e64;--pill-edge:#16161e}}:root[data-theme=dark]{--color-bg:#121218;--color-text:#f2f0ea;--color-muted:#b4b1c4;--color-ok:#6fd39b;--color-problem:#ff8a80;--shell:#2e2e38;--shell-edge:#1a1a22;--shell-shadow:#00000080;--bezel:#0e0e14;--pill:#4a4e64;--pill-edge:#16161e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);margin:0;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page{padding-block:16px var(--space-4);padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));flex-direction:column;align-items:center;display:flex}.health{padding:var(--space-2) var(--space-4);border-radius:var(--radius);color:var(--color-muted);border:1px solid}.health--ok{color:var(--color-ok)}.health--problem{color:var(--color-problem)}.footer{max-width:40rem;margin-top:var(--space-4);color:var(--color-muted);text-align:center;font-size:.875rem}.footer p{margin:0 0 var(--space-2)}.console{--u:calc(var(--px,2) * 1px)}.pixel-text{vertical-align:middle;line-height:0;display:inline-block}.pixel-text canvas,.food-icon,.screen__canvas,.status__portrait,.minimap canvas{image-rendering:pixelated;image-rendering:crisp-edges}.pixel-text canvas{width:calc(var(--u) * var(--w) * var(--s));height:calc(var(--u) * var(--h) * var(--s))}.food-icon{width:calc(var(--u) * 8);height:calc(var(--u) * 8)}.console{padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 12);background:var(--shell);box-shadow:inset 0 calc(var(--u) * -3) 0 var(--shell-edge), 0 calc(var(--u) * 4) calc(var(--u) * 12) var(--shell-shadow);grid-template-areas:"brand""top""hinge""bottom";justify-items:center;display:grid}.console[data-layout=side]{column-gap:calc(var(--u) * 8);grid-template-areas:"brand brand""top bottom""hinge hinge"}.console__brand{margin:0 0 calc(var(--u) * 7);grid-area:brand;line-height:0}.screen{width:calc(var(--u) * 256);height:calc(var(--u) * 192);outline:calc(var(--u) * 3) solid var(--bezel);background:#101018;position:relative;overflow:hidden}.screen--top{grid-area:top}.screen--bottom{background-color:var(--ui-panel);background-image:repeating-conic-gradient(var(--ui-panel-dot) 0 25%, transparent 0 50%);background-size:calc(var(--u) * 4) calc(var(--u) * 4);grid-area:bottom}.screen__canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.screen__overlay{justify-content:center;align-items:center;gap:calc(var(--u) * 8);pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.screen__overlay--title{padding-top:calc(var(--u) * 40);background:linear-gradient(#1010288c,#1010281a 60%,#0000);justify-content:flex-start}.screen__overlay--paused{background:#10102099}.hinge{gap:calc(var(--u) * 4);height:calc(var(--u) * 26);grid-area:hinge;justify-content:center;align-items:center;display:flex}.pill{min-width:calc(var(--u) * 52);min-height:calc(var(--u) * 15);padding:0 calc(var(--u) * 5);border:calc(var(--u) * 1) solid var(--pill-edge);border-radius:calc(var(--u) * 8);background:var(--pill);box-shadow:inset 0 calc(var(--u) * -2) 0 #00000040;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.pill:active{box-shadow:inset 0 calc(var(--u) * 2) 0 #00000040}.pill:disabled{opacity:.45;cursor:not-allowed}button:focus-visible{outline:calc(var(--u) * 2) solid var(--focus);outline-offset:calc(var(--u) * 1)}.panel{height:100%;padding:calc(var(--u) * 8);align-items:center;gap:calc(var(--u) * 8);flex-direction:column;display:flex}.panel--title,.panel--fainted{justify-content:center}.panel--play{padding:calc(var(--u) * 4);gap:calc(var(--u) * 3)}.panel__heading{margin:0;line-height:0}.panel__fineprint{text-align:center}.hatch-button{padding:calc(var(--u) * 7) calc(var(--u) * 14);border:calc(var(--u) * 2) solid var(--ui-ink);border-radius:calc(var(--u) * 6);box-shadow:inset 0 calc(var(--u) * -3) 0 #a83020, inset 0 calc(var(--u) * 2) 0 #f88870;cursor:pointer;background:#e84838}.hatch-button:active{box-shadow:inset 0 calc(var(--u) * 3) 0 #a83020}.howto,.run-stats{gap:calc(var(--u) * 3);margin:0;display:grid}.howto div,.run-stats div{grid-template-columns:calc(var(--u) * 52) auto;align-items:center;display:grid}.run-stats div{grid-template-columns:calc(var(--u) * 70) auto}.howto dd,.run-stats dd{margin:0}.status{gap:calc(var(--u) * 3);flex-direction:column;width:100%;display:flex}.status__card{gap:calc(var(--u) * 5);padding:calc(var(--u) * 3) calc(var(--u) * 5);border:calc(var(--u) * 1) solid var(--ui-ink);border-radius:calc(var(--u) * 3);background:var(--ui-paper);box-shadow:inset 0 0 0 calc(var(--u) * 2) var(--ui-frame), inset 0 0 0 calc(var(--u) * 3) var(--ui-paper);align-items:center;display:flex}.status__portrait{width:calc(var(--u) * 32);height:calc(var(--u) * 32);background:radial-gradient(50% 18% at 50% 88%,#a8d888 95%,#0000 100%);flex:none}.status__lines{gap:calc(var(--u) * 2);flex-direction:column;flex:1;display:flex}.status__name{justify-content:space-between;display:flex}.meter{align-items:center;gap:calc(var(--u) * 2);display:flex}.meter__label{min-width:calc(var(--u) * 20);padding:calc(var(--u) * 1) calc(var(--u) * 2);border-radius:calc(var(--u) * 2);background:#484858;justify-content:center;display:inline-flex}.meter__track{width:calc(var(--u) * var(--bar));height:calc(var(--u) * 5);border:calc(var(--u) * 1) solid var(--ui-ink);background:#506070;position:relative}.meter__fill{width:calc(var(--fill) * 100%);background:var(--hp-ok);box-shadow:inset 0 calc(var(--u) * 1) 0 #ffffff73;transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.meter--low .meter__fill{background:var(--hp-low)}.meter--danger .meter__fill{background:var(--hp-danger)}.meter--exp .meter__fill{background:var(--exp)}.diet{align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 2) calc(var(--u) * 5);border-radius:calc(var(--u) * 3);background:#1014288c;display:flex}.diet__list{gap:calc(var(--u) * 6);margin:0;padding:0;list-style:none;display:flex}.diet__item{align-items:center;gap:calc(var(--u) * 2);display:flex}.diet__bar{width:calc(var(--u) * 22);height:calc(var(--u) * 4);border:calc(var(--u) * 1) solid var(--ui-ink);background:#202838;position:relative}.diet__bar span{width:calc(var(--share) * 100%);background:currentColor;position:absolute;inset:0 auto 0 0}.diet__bar--leaf{color:#58c048}.diet__bar--spike{color:#e8a040}.diet__bar--shine{color:#70d8f8}.diet__bar--splash{color:#4888f0}.diet__bar--spook{color:#b070f0}.pad-row{width:100%;padding:0 calc(var(--u) * 6);flex:1;justify-content:space-between;align-items:center;display:flex}.joystick{width:calc(var(--u) * 66);height:calc(var(--u) * 66);border:calc(var(--u) * 2) solid var(--ui-ink);touch-action:none;background:radial-gradient(circle,#50608c 0 55%,#3c4a74 56%);border-radius:50%;place-items:center;display:grid;position:relative}.joystick__knob{width:calc(var(--u) * 30);height:calc(var(--u) * 30);border:calc(var(--u) * 2) solid var(--ui-ink);box-shadow:inset 0 calc(var(--u) * -3) 0 #a0a0b8;background:#d8d8e8;border-radius:50%}.minimap{line-height:0}.minimap canvas{width:calc(var(--u) * 56);height:calc(var(--u) * 56);outline:calc(var(--u) * 1) solid var(--ui-paper)}.actions{gap:calc(var(--u) * 2);grid-template-columns:auto auto;align-items:end;display:grid}.action{width:calc(var(--u) * 38);height:calc(var(--u) * 38);border:calc(var(--u) * 2) solid var(--ui-ink);cursor:pointer;touch-action:none;border-radius:50%;place-items:center;display:grid}.action:active{transform:translateY(calc(var(--u) * 1))}.action--bite{margin-bottom:calc(var(--u) * 14);box-shadow:inset 0 calc(var(--u) * -3) 0 #a83020;background:#e84838}.action--skill{background:radial-gradient(circle, #5868d8 0 58%, transparent 60%), conic-gradient(#f8d030 calc(var(--ready) * 360deg), #283058 0)}.action--skill[aria-disabled=true]{cursor:not-allowed;background:#5a5a70}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}