/* Page shell. The game itself sizes to its container: 280-480 px wide, height = width x 1.32 (430-620 px), plus the button row. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #12081f; overflow-x: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
#app { width: 100%; max-width: 480px; margin: 0 auto; }
noscript { display: block; color: #fff; font: 16px system-ui, sans-serif; text-align: center; padding: 40px 16px; }
button:focus-visible { outline: 3px solid #ffd23d; outline-offset: 2px; }

/* Animations used by the game (start screen, fail scenes, Chef, insulin button). */
@keyframes sgFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sgChefInl { 0% { transform: translateX(-125%) } 62% { transform: translateX(7%) } 80% { transform: translateX(-3%) } 100% { transform: translateX(0) } }
@keyframes sgChefInr { 0% { transform: translateX(125%) } 62% { transform: translateX(-7%) } 80% { transform: translateX(3%) } 100% { transform: translateX(0) } }
@keyframes sgChefOutl { from { transform: translateX(0) } to { transform: translateX(-125%) } }
@keyframes sgChefOutr { from { transform: translateX(0) } to { transform: translateX(125%) } }
@keyframes sgBlack { from { opacity: 0 } to { opacity: 0.94 } }
@keyframes sgSlide { 0% { transform: translateX(120%) rotate(10deg) } 65% { transform: translateX(-7%) rotate(-4deg) } 82% { transform: translateX(2%) rotate(1deg) } 100% { transform: translateX(0) rotate(0) } }
@keyframes sgRise { 0% { transform: translate(-50%, 80%); opacity: 0 } 25% { opacity: 1 } 68% { transform: translate(-50%, -5%) } 84% { transform: translate(-50%, 2%) } 100% { transform: translate(-50%, 0); opacity: 1 } }
@keyframes sgSmoke { 0% { transform: translateY(30px) scale(0.6); opacity: 0 } 30% { opacity: 0.85 } 100% { transform: translateY(-150px) scale(1.7); opacity: 0 } }
@keyframes sgPop { from { transform: scale(0.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes sgBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes sgPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes sgWobble { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }