html, body {
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    background: #000;
    color: #fff;
    font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

#bg, #veil, #news {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* el scroll lo escucha la ventana entera */
}

#veil {
    background: #000;
    transition: opacity 1.2s ease;
}

.noticia {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    margin: 0;
    font-size: clamp(1.3rem, 6.5vw, 2.1rem);
    line-height: 1em;
    letter-spacing: -.025em; /* texto grande: algo más junto se lee mejor */
    text-align: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    will-change: transform;
}
.noticia.visible { opacity: 1; }

/* «haz scroll»: fijo, negro, por encima de las noticias (se lee donde cruza el texto blanco).
   La altura (NEWS_AREA) la pone main.js: así se centra en la zona donde salen las noticias */
#scroll-hint {
    position: fixed;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #000;
    font-size: clamp(3.5rem, 17vw, 7.5rem);
    line-height: normal;
    letter-spacing: -.025em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}

/* Los bocadillos aparecen (con un pequeño rebote) y se van en .6s: main.js espera eso (FADE_SECONDS) antes de mover al neko */

/* Neko + bocadillo. En su sitio: abajo a la izquierda. Con .intro: en el centro de la pantalla
   (64px de caja con 16px de margen -> su centro está a 48px del borde) */
#neko-box {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 64px;
    height: 64px;
    z-index: 2; /* por encima de #start */
    pointer-events: none;
    cursor: pointer;
}
#neko-box.intro {
    transform: translate(calc(50vw - 48px), calc(48px + env(safe-area-inset-bottom) - 40dvh));
}
/* con «sobre MEWS!» abierto: abajo en el centro, debajo del bocadillo grande */
#neko-box.centro { transform: translateX(calc(50vw - 48px)); }
#neko-box:not(.intro) #neko { pointer-events: auto; } /* en su esquina se puede tocar */
#neko {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

#bubble, #thought { text-wrap: balance; } /* sin palabras sueltas en la última línea */

#bubble {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(80vw, 320px);
    padding: .8rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    color: #000;
    font-size: 1.05rem;
    line-height: normal;
    text-align: center;
    transform-origin: 50% 100%; /* crece y se encoge desde el piquito */
    transition: opacity .6s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1); /* al aparecer: sube y rebota un poco */
}
#bubble::after { /* el piquito hacia el neko */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top-color: #fff;
}
#bubble p { margin: 0; }
#bubble strong { font-size: 1.4rem; font-weight: 400; }
#bubble small { font-size: .85rem; opacity: .6; }
#bubble.hidden, #thought.hidden, #about.hidden { opacity: 0; scale: .8; translate: 0 10px; transition: opacity .6s ease, scale .6s ease-in, translate .6s ease-in; } /* al irse: baja y se encoge */
/* en su esquina el bocadillo sale hacia la derecha, con el piquito sobre el neko */
#neko-box:not(.intro) #bubble { left: 0; transform: none; transform-origin: 32px 100%; }
#neko-box:not(.intro) #bubble::after { left: 32px; }

/* Bocadillo de pensar: nube encima del neko en su esquina, con dos burbujitas hacia él */
#thought {
    position: absolute;
    bottom: calc(100% + 26px);
    left: 0;
    width: max-content;
    max-width: min(75vw, 300px);
    margin: 0;
    padding: .8rem 1.1rem;
    border-radius: 24px;
    background: #fff;
    color: #000;
    font-size: .95rem;
    line-height: normal;
    text-align: center;
    transform-origin: 30px 100%; /* las burbujitas apuntan al neko */
    transition: opacity .6s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1);
}
#thought::before, #thought::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #fff;
}
#thought::before { width: 12px; height: 12px; top: calc(100% + 4px); left: 30px; }
#thought::after { width: 7px; height: 7px; top: calc(100% + 18px); left: 24px; }

#about-btn {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 4px 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: .85rem;
    opacity: .6;
    cursor: pointer;
}
#about-btn:hover { opacity: 1; }

/* "sobre MEWS!": el bocadillo del neko en grande, centrado encima de él
   (bottom = margen 16 + neko 64 + hueco 14, igual que #bubble) */
#about {
    position: fixed;
    z-index: 3;
    inset: auto auto calc(94px + env(safe-area-inset-bottom)) 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 32px), 38rem); /* en móvil casi toda la pantalla; en grande, líneas que se leen bien */
    max-width: none; /* el navegador pone uno por defecto */
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: visible; /* deja ver el piquito */
    background: #fff;
    color: #000;
    font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
    line-height: normal;
    text-align: center;
    text-wrap: pretty;
    transform-origin: 50% 100%;
    transition: opacity .6s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1);
}
#about::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top-color: #fff;
}
/* el límite de alto va aquí y no en el dialog: con flex, iOS lo dejaba en una franja */
#about-text {
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding: 1.1rem 1.3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y; /* body lleva touch-action: none; aquí sí se hace scroll normal */
}
#about-text:focus { outline: none; } /* recibe el foco al abrir solo para no saltar al primer enlace */
#about p { margin: 0 0 .8rem; }
#about p:last-child { margin: 0; }
#about strong { font-size: 1.4rem; font-weight: 400; }
#creditos { font-size: 14px; }
#creditos .tipo { opacity: .6; } /* del color de «créditos» */
#about h2 { margin: 2rem 0 .5rem; font-size: 1rem; font-weight: 400; opacity: .6; }
#about small { opacity: .6; }
#about a { color: inherit; }

#start {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    background: #000;
    cursor: pointer;
    transition: opacity 1.5s ease;
}
#start.hidden { opacity: 0; pointer-events: none; }