html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #000; /* fallback */
  overflow: hidden; /* prevent scrollbars during animation */
}

.landfill {
  position: fixed;
  inset: 0;
  background-color: #000;
  background-image: url('img/landfillbg_med.gif');
  background-position: center;
  background-size: cover; /* full-page background regardless of viewport */
  background-repeat: no-repeat;
  /* keep safe-area padding so the logo doesn't end up under notches */
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

.landfill__sprite {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
}

.landfill__logo {
  /* Desktop feels right; shrink more aggressively on narrow screens */
  width: clamp(240px, 60vw, 760px);
}

.landfill__popup {
  /* Keep mobile size as-is, but make it smaller on desktop */
  width: clamp(220px, 42vw, 520px);
  /* Static, dead-center */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

@media (max-width: 520px) {
  .landfill__logo,
  .landfill__popup {
    width: clamp(200px, 72vw, 520px);
  }
}