/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent iOS overscroll white */
html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overscroll-behavior: none;
}

/* Lock viewport */
body {
  position: fixed;
  inset: 0;
  overflow: hidden;

  background: radial-gradient(
    1100px 900px at 50% 42%,
    #0b0b0c 0%,
    #050506 42%,
    #000 100%
  );

  -webkit-text-size-adjust: 100%;
}

/* Center + safe-area */
.stage {
  width: 100%;
  height: 100%;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));

  display: grid;
  place-items: center;
}

/* Feather */
.feather {
  width: min(92vw, 560px);
  max-height: min(86vh, 820px);
  height: auto;
  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;

  filter: drop-shadow(0 0 18px rgba(0,0,0,0.85));
  will-change: filter;
}

/* Invisible motion-permission gate (iOS only) */
#motion-gate {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

/* Desktop */
@media (min-width: 900px){
  .feather {
    width: min(40vw, 640px);
    max-height: 82vh;
  }
}