html, body {
  margin: 0; padding: 0; height: 100%;
  background: #2b1a0e;
  overflow: hidden;
  /* touch-action:none stops scrolling/zooming; overscroll-behavior stops the
     pull-to-refresh bounce that would otherwise reload the game mid-level. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* keep the game clear of notches and home indicators */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#game {
  background: #2b1a0e;
  max-width: 100vw; max-height: 100vh;
  aspect-ratio: 16 / 9;
  width: 100vw; height: auto;
  cursor: pointer;
  touch-action: none;
  display: block;
}
@media (min-aspect-ratio: 16/9) {
  #game { width: auto; height: 100vh; }
}
/* modern units: 100vh on mobile Safari includes the collapsing toolbar */
@supports (height: 100dvh) {
  #game { max-height: 100dvh; }
  @media (min-aspect-ratio: 16/9) { #game { height: 100dvh; } }
}

/* "Turn me sideways" — shown only on narrow touch screens (see core/device.js) */
#rotate-notice {
  position: fixed; inset: 0; z-index: 10;
  display: none;
  align-items: center; justify-content: center;
  background: #2b1a0e;
  color: #ffd23f;
  font-family: "Chalkboard SE", "Comic Sans MS", sans-serif;
  text-align: center;
}
#rotate-notice.show { display: flex; }
#rotate-notice .rn-text {
  margin-top: 22px; font-size: 28px; font-weight: 700; letter-spacing: 0.5px;
}
#rotate-notice svg { animation: rn-tilt 2.4s ease-in-out infinite; }
@keyframes rn-tilt {
  0%, 55%, 100% { transform: rotate(0deg); }
  75%, 95%      { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  #rotate-notice svg { animation: none; }
}