:root { color-scheme: light; font-family: system-ui, sans-serif; background:#edf8f1; color:#173526; } * { box-sizing:border-box; } body { margin:0; min-width:320px; } .app-shell { min-height:100svh; padding:max(1.25rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); display:grid; align-content:center; gap:1rem; } .app-header,.pet-room,.notice{width:min(100%,32rem);margin:auto}.app-header{text-align:center}.eyebrow{margin:0;color:#0f6d4d;font-weight:700}.pet-room,.notice{padding:1.25rem;border:1px solid #bbdbc9;border-radius:1.25rem;background:#fff}.pet-stage{position:relative;min-height:19rem;overflow:hidden;border-radius:1rem;background:linear-gradient(160deg,#e5f6ec,#c9e9d5)}.pet-sprite{position:absolute;left:calc(50% - 96px);top:calc(50% - 104px);width:192px;height:208px;border:0;background-color:transparent;background-image:url('../assets/pet/spritesheet.webp');background-repeat:no-repeat;background-size:1536px 2288px;background-position:0 0;filter:drop-shadow(0 .55rem .7rem rgb(19 62 38 / .16));touch-action:none;user-select:none;cursor:grab}.pet-sprite:active{cursor:grabbing}.pet-sprite:focus-visible,#reset-position:focus-visible{outline:3px solid #0f6d4d;outline-offset:4px}.help,.status,.notice{color:#456555}.controls{margin-top:.75rem;text-align:center}button{font:inherit}input,select,textarea{font:inherit;font-size:max(1rem,16px)}#reset-position{min-height:44px;padding:.55rem 1rem;border:1px solid #0f6d4d;border-radius:.65rem;background:#fff;color:#174d36}.status{min-height:1.5em;margin:1rem 0 0}@media (max-width:390px){.pet-stage{min-height:16rem}.pet-sprite{transform-origin:center}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
dialog#delete-confirmation-modal{width:min(32rem,calc(100% - 2rem));border:1px solid #bbdbc9;border-radius:1rem;padding:1.25rem;background:#fff;color:#173526;box-shadow:0 1rem 3rem rgb(23 53 38 / .25)}dialog#delete-confirmation-modal::backdrop{background:rgb(23 53 38 / .45)}#delete-confirmation-modal button{min-height:44px;margin:.35rem;padding:.55rem 1rem;border:1px solid #0f6d4d;border-radius:.65rem;background:#fff;color:#174d36}#delete-confirmation-modal #delete-confirmation-submit{background:#a52f2f;border-color:#8b2323;color:#fff}#delete-confirmation-modal button:focus-visible{outline:3px solid #0f6d4d;outline-offset:3px}#delete-confirmation-error{min-height:1.5em;color:#a52f2f}#delete-confirmation-status{min-height:1.5em;color:#456555}@media (max-width:390px){#delete-confirmation-modal{padding:.9rem}#delete-confirmation-modal button{width:calc(100% - .7rem);margin:.35rem}}dialog#settings-dialog,dialog#onboarding-dialog{width:min(32rem,calc(100% - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);margin:auto;padding:1.25rem;border:1px solid #bbdbc9;border-radius:1rem;background:#fff;color:#173526;overflow:auto}dialog#settings-dialog::backdrop,dialog#onboarding-dialog::backdrop{background:rgb(23 53 38 / .45)}@media (orientation:landscape) and (max-height:500px){dialog#settings-dialog,dialog#onboarding-dialog{max-height:calc(100dvh - 1rem);padding:.75rem}}