/* =========================================================================
   FONTS
========================================================================= */
@font-face {
    font-family: 'PeanutFont';
    src: url('../assets/fonts/peanut.ttf') format('truetype');
}

/* =========================================================================
   BASE RESET & IOS TWEAKS
========================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Evitar selección de texto y zoom para una experiencia nativa */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body, html {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    height: -webkit-fill-available; /* Hack crucial para Safari/Chrome móvil */
    overflow: hidden;
    background-color: #000;
    /* Prevenir el overscroll bounce en Safari iOS */
    overscroll-behavior-y: none;
}

/* =========================================================================
   STATE CONTAINERS
========================================================================= */
.app-state {
    display: none;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    height: -webkit-fill-available;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.app-state.active {
    display: flex;
    flex-direction: column;
}