html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}
* {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
body {
  touch-action: none;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

/* Root fills the screen in black; padding keeps the game clear of the status bar and home indicator
   when launched from the Home Screen (viewport-fit=cover + black-translucent status bar). */
#root {
  position: fixed; inset: 0; overflow: hidden; background: #000;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  container-type: size;
}
/* The stage is exactly the 1300:900 shape of its viewBox, as large as fits and centred: on any other screen shape
   the bands around it are #root's black, and the svg clips everything drawn outside the viewBox (also while the
   village zooms). --w/--h: the room inside the safe area (viewport units; container units where supported). */
.stage {
  --w: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --h: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: min(var(--w), var(--h) * 1300 / 900); height: min(var(--h), var(--w) * 900 / 1300);
  display: block; overflow: hidden; touch-action: none;
}
@supports (height: 1dvh) { .stage { --h: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }
@supports (width: 1cqw) { .stage { --w: 100cqw; --h: 100cqh; } }
.noev, .fx, .drag { pointer-events: none; }

/* nails module */
.nails.mode-polish .stickers text { pointer-events: none; }
.nail { transition: fill .25s ease; }

/* polder mills: the sails turn slowly around their hub */
.spin { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* village: badges float, boats rock, birds fly over, chimneys smoke, the glow under a place breathes */
.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bob-s { animation: bob-s 3.2s ease-in-out infinite; }
@keyframes bob-s { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
.halo { animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.glow { animation: halo 2.4s ease-in-out infinite; }
.fly { animation: fly 34s linear infinite; transform: translateX(-40px); }
@keyframes fly { from { transform: translateX(-40px); } to { transform: translateX(1550px); } }
.flap { transform-box: fill-box; transform-origin: center; animation: flap .5s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
.smoke { opacity: 0; transform-box: fill-box; transform-origin: center; animation: smoke 4.2s ease-out infinite; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .7; }
  100% { opacity: 0; transform: translate(14px, -70px) scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .bob, .bob-s, .halo, .glow, .fly, .flap, .smoke { animation: none; } }

/* home module */
.twinkle { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* landscape only */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 20;
  flex-direction: column; align-items: center; justify-content: center; gap: 4vmin;
  background: radial-gradient(ellipse at 50% 40%, #E06CF0, #8E24AA 60%, #5B137A);
}
@media (orientation: portrait) { #rotate { display: flex; } }
#rotate svg { width: 60vmin; height: 60vmin; overflow: visible; }
#rotate p { margin: 0; color: #fff; font-size: 9vmin; font-weight: 800; text-shadow: 0 .6vmin 0 rgba(0,0,0,.18); }
/* the tablet turns a quarter clockwise into landscape, waits, and flips back upright */
#rotate .tablet { transform-box: fill-box; transform-origin: center; animation: turn 3s ease-in-out infinite; }
@keyframes turn { 0%, 20% { transform: rotate(0); } 45%, 80% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
#rotate .arrow { animation: blink 3s ease-in-out infinite; }
@keyframes blink { 0%, 15%, 50%, 100% { opacity: 0; } 25%, 40% { opacity: 1; } }