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

html, body {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-color: #0b0b0b !important;
    background-image: url("../journalBG.png") !important; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-family: "Jacquard 12", serif;
}

/* Cursor customizado gótico para elementos interativos */
html, body, button, a, .journal-btn, .arrow-btn, #journalCoverBlock img, .page-area, .btn-voltar-journal {
    cursor: url("../cursor.png") 16 0, auto !important;
}

/* 📦 CONTAINER PALCO RECALIBRADO PARA CENTRALIZAÇÃO REAL */
.journal-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* 📓 CAPA FECHADA PADRÃO */
.journal-cover-wrapper {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: transform 0.3s ease;
}

.journal-cover-wrapper img {
    width: auto;
    height: 75vh; 
    object-fit: contain;
}

/* 📖 DIÁRIO ABERTO PERFEITAMENTE CENTRALIZADO COM SUAS MARGENS NEGATIVAS */
.journal-open-wrapper {
    position: absolute !important;
    top: 56% !important;  
    left: 50% !important; 
    transform: translate(-47%, -62%) !important;
    width: auto;
    height: 88vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
}

.journal-open-bg {
    width: auto;
    height: 100%; 
    object-fit: contain;
    display: block;
    filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.9));
}

/* 📐 MOLDURAS INTERNAS DAS PÁGINAS */
.page-area {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 37% !important;  
    height: 78% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 120 !important;
    background: transparent !important;
}

.page-left { left: 12.5% !important; }
.page-right { right: 12.5% !important; }

.page-area img.page-text-asset {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    display: block !important;
    pointer-events: none !important; 
}

/* 🔒 CADEADO REALINHADO */
.close-journal-lock {
    position: absolute !important;
    right: -130px !important; 
    top: auto !important; 
    bottom: 22% !important; 
    width: 155px !important;  
    height: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    z-index: 500 !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.close-journal-lock:hover {
    transform: scale(1.08) rotate(5deg);
    filter: brightness(1.2) drop-shadow(0px 0px 8px rgba(255,255,255,0.5));
}

.close-journal-lock img { width: 100% !important; display: block !important; }

/* 📍 SETAS DE NAVEGAÇÃO */
.arrow-btn {
    position: absolute !important;
    bottom: -25px !important; 
    width: 75px !important;  
    height: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    z-index: 600 !important; 
    transition: transform 0.2s ease, filter 0.2s ease;
    pointer-events: auto !important; 
    display: block !important;
}

.arrow-btn:hover {
    transform: scale(1.15) !important;
    filter: brightness(1.2) drop-shadow(0px 0px 6px rgba(255,255,255,0.4));
}

.arrow-btn img { width: 100% !important; display: block !important; }

.left-page-arrow { left: -15px !important; }
.right-page-arrow { right: -15px !important; }

/* ✝️ DECORAÇÃO DE CRUZ GRANDE NO LADO ESQUERDO EXTERNO E MAIS PARA BAIXO */
.journal-cross-deco {
    position: absolute !important;
    top: 15% !important;     
    left: -130px !important;  
    right: auto !important;
    width: 180px !important;  
    height: auto !important;
    z-index: 140 !important; 
    pointer-events: auto !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

.journal-cross-deco:hover {
    transform: scale(1.08) rotate(-4deg) !important;
    filter: brightness(1.2) drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6)) !important;
}

.journal-cross-deco img {
    width: 100% !important;
    display: block !important;
    filter: drop-shadow(3px 5px 8px rgba(0, 0, 0, 0.8));
}


/* ================================================================= */
/* 🐇 LEGENDA SUAVE QUE DISPARADA POR CLIQUE E TRANSICIONA          */
/* ================================================================= */
.journal-bunny-angels {
    position: absolute !important;
    display: inline-block;
    outline: none !important;
}

/* Estrutura da legendinha curta com opacidade de fundo bem menor */
.bunny-click-label {
    position: absolute;
    top: 105%; /* Posiciona logo abaixo dos coelhos */
    left: 50%;
    transform: translateX(-50%);
    
    /* ⚡ ALTERADO: Deixado o fundo preto bem translúcido e suave */
    background: rgba(10, 10, 10, 0.45) !important; 
    
    color: #FAF4ED !important;
    font-family: "Jacquard 12", serif;
    font-size: 1.3rem;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap; 
    pointer-events: none; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transição de fade suave */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* 📍 LOCALIZAÇÃO: Substitua apenas a regra .bunny-click-label.show no seu CSS */
.bunny-click-label.show {
    opacity: 1 !important;
    visibility: visible !important;
}





/* 💾 BOTÃO VOLTAR PERSONALIZADO COM PANIM4.PNG */
.btn-voltar-journal {
    position: absolute !important;
    top: 4% !important; 
    left: 2% !important; 
    width: 180px !important;
    height: 70px !important;
    background: url('../panim4.png') no-repeat center center !important;
    background-size: contain !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
    font-family: 'Jacquard 12', system-ui, serif !important;
    font-size: 1.6rem !important;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000 !important;
    z-index: 99999 !important; 
    transition: transform 0.2s ease !important;
}

.btn-voltar-journal:hover {
    transform: scale(1.05) !important;
}

/* 🖼️ MODAL DE ZOOM DE LEITURA */
.journal-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 200000;
}

.journal-zoom-overlay.show {
    opacity: 1;
    visibility: visible;
}

.journal-zoom-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.journal-zoom-img {
    display: block;
    max-width: 80vw;
    max-height: 85vh;
    object-fit: contain;
    filter: drop-shadow(0px 0px 25px rgba(0, 0, 0, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.close-zoom-btn {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: #a62424;
    font-size: 2.5rem;
}

/* 🗃️ GAVETA INVENTÁRIO */
#game-inventory-drawer {
    position: fixed !important;
    top: -125px !important; 
    right: 30px !important; 
    left: auto !important;
    width: 320px !important;
    height: 160px !important;
    transform: none !important;
    z-index: 100000 !important;
}
#game-inventory-drawer:hover { top: 0px !important; }

/* ================================================================= */
/* ⚡ BLINDAGEM MÁXIMA DA UKAGAKA (IMPECE CONFLITOS DE RENDERING)    */
/* ================================================================= */
#lamb-container, .ukagaka-box, #ukagaka-companion, #ukagaka-anchor, .ukagaka-character, div[class*="ukagaka"] {
    position: fixed !important;
    bottom: 25px !important; 
    left: 25px !important;   
    width: 220px !important; 
    height: auto !important;
    z-index: 999999 !important; 
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: drop-shadow(3px 5px 10px rgba(0,0,0,0.65)) !important;
}

#lamb-container img, .ukagaka-box img, #ukagaka-companion img, #ukagaka-anchor img, .ukagaka-character img, div[class*="ukagaka"] img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    pointer-events: auto !important;
    cursor: url("../cursor.png") 16 0, pointer !important;
}


/* Força as tags de imagens criadas pelo script a herdarem o tamanho e o ponteiro */
#lamb-container img, .ukagaka-box img, #ukagaka-companion img, #ukagaka-anchor img, .ukagaka-character img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    pointer-events: auto !important;
    cursor: url("../cursor.png") 16 0, pointer !important;
}