*,*::before,*::after{box-sizing:border-box}

/* FIX DEFINITIVO DE LA FRANJA: html y body ocupan EXACTAMENTE la pantalla,
   sin redondeos, y NO permiten scroll global. Cada pantalla maneja su propio
   scroll interno (.screen { overflow-y:auto }). Así la barra de 5 y las
   franjas fantasmas desaparecen para siempre, en cualquier móvil. */
html,body{
  height:100dvh;     /* altura exacta de la pantalla visible */
  overflow:hidden;   /* sin scroll global bajo ningún concepto */
  overscroll-behavior:none; /* sin "rebote" en los bordes */
}

body{
  margin:0; background:var(--night-800); color:var(--text);
  font-family:var(--font-ui); font-weight:400; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
.script{font-family:var(--font-script); font-weight:600; letter-spacing:.2px}

/* #view ya no lleva altura ni padding propio: cada pantalla se apodera del
   espacio que le corresponde. */
#view{height:100%; width:100%}

/* transición de vista (suave, premium) */
.view-enter{animation:viewIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .view-enter{animation:none}
  *{scroll-behavior:auto !important}
}