/* ==========================================================================
   STILI DI LETTURA E-READER: AGGANCIO FLUIDO A SCHERMO INTERO (SCROLL SNAP)
   ========================================================================== */

/* Protezione globale anti-selezione testo */
* {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.tategaki-page-body {
    background-color: #050508; /* Sfondo quasi nero, molto scuro e profondo */
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Evita doppi scorrimenti anomali della pagina intera */
}

/* Navigazione superiore fluttuante fissa in alto */
.reading-top-nav.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    background-gradient: linear-gradient(to bottom, rgba(2,2,5,0.95), rgba(2,2,5,0));
    background-color: rgba(2, 2, 5, 0.85);
    border-bottom: 1px solid rgba(31, 40, 51, 0.4);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.nav-back-link {
    color: #c5a059;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-back-link:hover { color: #ff0033; }
.read-chapter-indicator { color: #666; font-size: 0.9rem; letter-spacing: 1px; }

/* ==========================================================================
   IL CONTENITORE MAGNETICO (SCROLL SNAP TRACK)
   ========================================================================== */
.snap-reading-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll; /* Abilita lo scorrimento verticale */
    scroll-snap-type: y mandatory; /* Forza l'aggancio magnetico sull'asse verticale (Y) */
    scroll-behavior: smooth; /* Rende il passaggio tra le pagine fluidissimo */
}

/* LA SINGOLA SCHERMATA DA 100% DI ALTEZZA */
.snap-page-section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start; /* Dice alla sezione di bloccarsi esattamente all'inizio dello schermo */
    box-sizing: border-box;
    padding-top: 80px; /* Lascia lo spazio vuoto in alto per non finire sotto il menu fisso */
}

/* Scatola di contenimento della pagina del libro */
.page-view-box {
    height: 80vh; /* La pagina occupa al massimo l'80% dell'altezza dello schermo */
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* LE IMMAGINI DELLE PAGINE DEL ROMANZO (40x40) */
.novel-page-img {
    height: 100%; /* Si sviluppa perfettamente in altezza senza mai sgranare */
    width: auto;  /* Mantiene le proporzioni originali esatte del manoscritto */
    border: 1px solid rgba(31, 40, 51, 0.6);
    border-radius: 4px;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.9); /* Ombra drammatica profonda */
    background-color: #ffffff; /* Sfondo bianco della pagina per un contrasto perfetto dei kanji */
    display: block;
    pointer-events: none; /* Impedisce il drag-and-drop o i tocchi anomali */
}




/* ==========================================================================
   SCHERMATA FINALE DI FINE CAPITOLO
   ========================================================================== */
.end-chapter-section {
    background-color: #0b0c10;
}

.end-navigation-box {
    text-align: center;
    background-color: rgba(11, 12, 16, 0.6);
    border: 1px solid #1f2833;
    padding: 50px 8px;
    border-radius: 8px;
    min-width: 320px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
}

.end-navigation-box h2 {
    font-size: 2rem;
    letter-spacing: 4px;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.end-buttons-flex {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.read-btn {
    color: #c5a059;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 10px 22px;
    border: 1px solid #c5a059;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.read-btn:hover {
    background-color: transparent;
    color: #ff0033;
    border-color: #ff0033;
    box-shadow: 0px 0px 15px rgba(255, 0, 51, 0.3);
}

.next-chap-btn {
    background-color: #ff0033;
    color: #ffffff;
    border-color: #ff0033;
}

.next-chap-btn:hover {
    background-color: #dc143c;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgba(220, 20, 60, 0.4);
}
/* ==========================================================================
   SISTEMA DI INTERAZIONE CUORE & SEZIONE COMMENTI
   ========================================================================== */

/* Permette all'ultima schermata di scorrere leggermente se i commenti occupano spazio */
.end-chapter-section {
    background-color: #0b0c10;
    overflow-y: auto !important; /* Consente la lettura dei commenti verso il basso */
}

.end-chapter-scrollable-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 650px;
    padding: 40px 20px;
    gap: 40px;
}

/* --- LOGICA GRAFICA DEL CUORE (LIKE) --- */
.like-interaction-wrapper {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.heart-checkbox {
    display: none; /* Nascondiamo la casella di controllo */
}

.heart-label-button {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.heart-svg {
    width: 50px;
    height: 50px;
    fill: transparent; /* Di base è vuoto dentro */
    stroke: #ff0033;   /* Bordo rosso thriller */
    stroke-width: 2;
    transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
}

/* Effetto passaggio mouse (battito del cuore leggero) */
.heart-label-button:hover {
    transform: scale(1.15);
}

/* QUANDO IL CUORE VIENE CLICCATO (ATTIVATO) */
.heart-checkbox:checked + .heart-label-button .heart-svg {
    fill: #ff0033; /* Si riempie di rosso cremisi */
    stroke: #ff0033;
    filter: drop-shadow(0px 0px 10px rgba(255, 0, 51, 0.7)); /* Bagliore al neon */
    animation: heartBeat 0.4s alternate ease-in-out;
}

.like-counter {
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 0.5px;
}

/* Animazione pulsazione del cuore al clic */
@keyframes heartBeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* --- SEZIONE COMMENTI --- */
.comments-section-box {
    width: 100%;
    background-color: rgba(19, 26, 34, 0.3);
    border: 1px solid rgba(31, 40, 51, 0.6);
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
    box-sizing: border-box;
}

.comments-section-box h3 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.local-comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.comment-textarea {
    width: 100%;
    background-color: #020205;
    border: 1px solid #1f2833;
    border-radius: 4px;
    padding: 15px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    resize: none; /* Disattiva la modifica manuale delle dimensioni della casella */
    box-sizing: border-box;
    -webkit-user-select: text !important; /* Consente la digitazione */
    user-select: text !important;
}

.comment-textarea:focus {
    outline: none;
    border-color: #ff0033; /* La casella si illumina di rosso quando scrivi */
    box-shadow: 0px 0px 8px rgba(255, 0, 51, 0.2);
}

.btn-submit-comment {
    align-self: flex-end; /* Spinge il pulsante a destra */
    background-color: transparent;
    color: #c5a059;
    border: 1px solid #c5a059;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit-comment:hover {
    background-color: #c5a059;
    color: #0b0c10;
}
/* ==========================================================================
   CONFIGURAZIONE MOBILE DEFINITIVA: ANTI-SALTO DURANTE LO ZOOM
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        position: relative;
    }

    .snap-reading-container {
        display: flex !important;
        flex-direction: row !important;
        width: 100vw;
        height: 100vh;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory; /* Gestito dinamicamente dallo script durante lo zoom */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        direction: rtl !important; /* Sfogliamento giapponese da sinistra a destra */
    }

    .snap-page-section {
        direction: ltr !important; 
        width: 100vw !important;
        height: 100vh !important;
        flex-shrink: 0;
        scroll-snap-align: start !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 80px 10px 40px 10px; /* Ripristinato un piccolo spazio di sicurezza */
        box-sizing: border-box;
    }

    .page-view-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .novel-page-img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 72vh !important;
        object-fit: contain !important;
        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.7);
        
        /* Permette al browser di gestire lo zoom in modo nativo e fluido */
        touch-action: manipulation !important; 
        pointer-events: auto !important;
    }

    /* SEZIONE FINALE DEI COMMENTI */
    .end-chapter-section {
        overflow-y: auto !important;
        scroll-snap-align: start !important;
    }

    .end-chapter-scrollable-container {
        width: 100vw;
        padding: 90px 20px 40px 20px;
        box-sizing: border-box;
    }

    .end-navigation-box {
        width: 100%;
        min-width: 100%;
        padding: 25px 15px;
    }

    .end-buttons-flex {
        flex-direction: column;
        width: 100%;
    }

    .read-btn {
        text-align: center;
        width: 100%;
    }
}