/* ==========================================================================
   🏛️ DECLARAÇÃO DE FONTES PERSONALIZADAS DO SANTUÁRIO
   ========================================================================== */
@font-face {
    font-family: "Ardenwood";
    src: url("../fonts/Ardenwood.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "WoodcutInitials";
    src: url("../fonts/typographerwoodcutinitialsone.regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "AugustaGothic";
    src: url("../fonts/Augusta.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GaramondBase";
    src: url("../fonts/eb-garamond.initials.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}



/* ==========================================================================
   🏰 DESIGN DE SISTEMA: GALERIA DE MÍDIAS (MEDIA.CSS) - VERSÃO CALIBRADA
   ========================================================================== */
* {
    margin: 0; padding: 0; box-sizing: border-box;
}

body, html {
    width: 100%; height: 100%; overflow: hidden;
    background-color: #000; user-select: none;
    
    /* 🎯 SEU CURSOR PERSONALIZADO: Travado globalmente em toda a página e elementos */
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* Garante o cursor nas tags clicáveis de mídias */
button, a, .media-tab-btn, .media-card-item, .media-nav-arrow {
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* 🌌 CAMADAS DE BACKGROUND COMPATÍVEIS */
.media-absolute-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('../media/mediabg.png') center center / cover no-repeat;
    z-index: 1;
}

.media-stage-scene {
    position: relative; width: 100%; height: 100%; z-index: 3;
}

/* ==========================================================================
   🖼️ MOLDURA CENTRAL DE RENDAS & GRADE DE EXIBIÇÃO (MUDANÇA CRUCIAL)
   ========================================================================== */
.media-center-lacebox {
    position: absolute !important; 
    
    /* 📐 COORDENADAS DO PHOTOSHOP: Centraliza e desce a placa rendada */
    top: 16vh !important; 
    left: 49.5% !important; 
    transform: translateX(-50%) !important;
    
    /* 📐 DIMENSÕES REALISTAS: Aumentado para expandir o rectangularlacebox como no seu design */
    width: 980px !important; 
    height: 74vh !important; 
    z-index: 5 !important;
}
.media-lacebox-bg { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: fill !important; 
}

/* ==========================================================================
   🔄 GRADE DINÂMICA (COMPRESSÃO HORIZONTAL MÁXIMA PARA COLAR OS FILMES)
   ========================================================================== */
.media-grid-dynamic {
    position: absolute !important; 
    
    /* 📐 CONTROLE VERTICAL DO PAINEL:
       Mudamos o 'top' para 13.5% para o bloco inteiro deitar bem centralizado na renda */
    top: 22.5% !important; 
    height: auto !important; 
    
    /* 🎯 SOLUÇÃO DO ESPAÇO HORIZONTAL:
       Encolhemos a largura de 74% para 54% para esmagar o vácuo lateral e trazer os filmes para o centro.
       O 'left: 23%' compensa a diferença e mantém a grade perfeitamente centralizada no meio da moldura! */
    width: 40% !important; 
    left: 16% !important; 
    
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    grid-template-rows: 122px 122px !important; 
    justify-items: center !important; 
    align-items: center !important;
    z-index: 8 !important;

    /* 🎯 SEU CONTROLE MANUAL DE GAPS (Ajustado com base nas suas setas roxas):
       • 34px: Abre um respiro confortável e elegante entre a fileira de cima e a de baixo.
       • 2px: Cola os posters quase encostando um ombro no outro lateralmente! */
    gap: 130px 15px !important; 
}



/* Reduzimos 2px na largura dos cards para que os 5 se alinhem perfeitamente na horizontal da renda */
.media-card-item {
    position: relative !important; 
    width: 155px !important; /* 📐 Tamanho perfeito para a proporção de 5 colunas */
    height: 230px !important;
    transition: transform 0.25s ease-in-out !important; 
    z-index: 10 !important;
}
.media-poster-img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
    box-shadow: 0px 4px 10px rgba(0,0,0,0.4) !important;
}

/* 🌟 SISTEMA DE CAPA FAVORITA COMPACTO (fav.png) */
.media-card-item.is-favorite::after {
    content: '' !important; 
    position: absolute !important; 
    top: -5px !important; 
    right: -5px !important;
    width: 26px !important; 
    height: 26px !important;
    background: url('../media/fav.png') no-repeat center/contain !important;
    z-index: 15 !important; 
    pointer-events: none !important;
}

/* ==========================================================================
   💬 BALÃO DE LEGENDA ADAPTATIVO (COM QUEBRA DE LINHA E LARGURA COMPACTA)
   ========================================================================== */
.media-card-item .media-tooltip {
    position: absolute !important; 
    bottom: 108% !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    
    /* 🎨 Paleta vitoriana cremosa */
    background: rgba(248, 242, 235, 0.98) !important; 
    border: 1px solid #A9B2A3 !important; 
    color: #464B54 !important;
    font-family: "Courier New", monospace !important; 
    font-weight: bold !important; 
    font-size: 11px !important; 
    padding: 8px 12px !important; 
    border-radius: 4px !important; 
    text-align: center !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3) !important; 
    
    /* 🎯 QUEBRA AUTOMÁTICA DE LINHA:
       Impede o texto de esticar infinitamente para os lados e bater na TV */
    white-space: normal !important; 
    width: max-content !important;
    min-width: 270px !important;
    max-width: 600px !important; /* 📐 Limite horizontal estrito para proteger a TV */
    
    /* Engine de animação suave de hover */
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    z-index: 999999 !important;
    word-wrap: break-word !important;
}

/* ⚡ INTERATIVIDADE HOVER UNIFICADA: Aplica a pulsação e o acendimento do balão juntos */
.media-card-item:hover { 
    transform: scale(1.06) translateY(-2px) !important; 
    z-index: 999999999 !important; 
}

.media-card-item:hover .media-tooltip { 
    opacity: 1 !important; 
    visibility: visible !important; 
}


/* ==========================================================================
   📝 POST-IT WATCHLIST (CALIBRAGEM VERTICAL DA QUINA ESQUERDA)
   ========================================================================== */
.media-watchlist-panel {
    position: absolute !important; 
    
    /* 📐 REPOSICIONADO: Subiu um pouco para desgrudar da barra de tarefas do Windows */
    bottom: 35px !important; 
    left: 1.8vw !important; 
    
    width: 175px !important; 
    z-index: 6 !important;
}
.media-watchlist-text {
    position: absolute !important; 
    top: 84% !important; 
    left: 4% !important; 
    width: 80% !important;
    font-family: "AugustaGothic", monospace !important; 
    font-size: 11px !important; 
    font-weight: bold !important; 
    color: #5a544e !important;
    line-height: 1.4 !important; 
    pointer-events: auto !important;
}

/* ==========================================================================
   🐑 CONTROLE DE MOVIMENTO DA KEEPER (ÚNICO, LIMPO E SEM AUTO-ANULAÇÃO)
   ========================================================================== */
.keeper-ukagaka-master {
    position: absolute !important;
    
    /* 📐 AJUSTE VERTICAL DO CHÃO: */
    bottom: 10px !important;  
    
    /* 🎯 SEU CONTROLE HORIZONTAL DESTRANCADO:
       Como o 'left: auto' foi deletado, agora ela vai te obedecer no milímetro!
       Aumente para 21vw, 23vw... ou use pixels fixos como 280px se quiser empurrar mais para a DIREITA! */
    left: 18vw !important;    
    
    /* Proteções estritas para anular as quinas do CSS do About */
    right: auto !important;
    top: auto !important;
    
    z-index: 9999999 !important; 
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}


/* Garante o cursor de asa por cima da imagem física da anjinha */
.keeper-graphic-asset {
    display: block !important;
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* ==========================================================================
   🧭 MENU LATERAL ESQUERDO REPLICADO
   ========================================================================== */
.media-menu-sidebar {
    position: absolute; top: 26vh; left: 2vw;
    display: flex; flex-direction: column; gap: 12px; z-index: 10;
}

/* ⚔️ BOTÃO BACK DA PÁGINA ABOUT */
.media-back-wrapper {
    display: inline-block !important;
    width: 75% !important; height: auto !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}
.media-back-wrapper:hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8)) !important;
}
.media-back-link { display: block; position: relative; }
.media-back-bg { display: block; width: 100%; height: auto; }
.media-back-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: "AugustaGothic", serif; color: #949C9D; font-size: 1.7rem;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
                 -1px 0px 0 #fff, 1px 0px 0 #fff, 0px -1px 0 #fff, 0px 1px 0 #fff !important;
}
.media-back-wrapper:hover .media-back-text { color: #CC777A !important; }

/* 🏰 ABAS RENDERIZADAS COM A MOLDURA DE RENDA */
.media-tab-btn {
    width: 200px !important; height: 54px !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    outline: none !important; border: 12px solid transparent !important;
    border-image: url("../decor/laceframe.png") 30 round !important;
    
    /* Paleta e Textura solicitadas */
    background-image: url("../dividers/fishnetlace.png"), linear-gradient(#F8F2EB, #F8F2EB) !important;
    background-repeat: repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: auto, cover !important;
    background-clip: padding-box !important;

    color: #464B54 !important; font-family: "Jacquard 12", serif !important;
    font-size: 1.5rem !important; letter-spacing: 1px !important;
    transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease !important;
}
.media-tab-btn:hover, .media-tab-btn.active-tab {
    transform: scale(1.04) !important;
    filter: brightness(1.1) drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.15)) !important;
    color: #AA5E62 !important;
}

/* ==========================================================================
   🖼️ MOLDURA CENTRAL DE RENDAS & GRADE DE MÍDIAS
   ========================================================================== */
.media-center-lacebox {
    position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
    width: 520px; height: 74vh; z-index: 5;
}
.media-lacebox-bg { width: 100%; height: 100%; object-fit: fill; }

/* SETAS DE NAVEGAÇÃO */
.media-nav-arrow {
    position: absolute; top: 310px; background: none; border: none; outline: none;
    transition: transform 0.2s ease; z-index: 12;
}
.media-nav-arrow img { width: 120px; height: auto; }
.media-nav-arrow:hover { transform: scale(1.1); filter: brightness(1.2); }
.arrow-left { left: 0%; }
.arrow-right { right: 0%; }

/* GRADE DE EXIBIÇÃO */
.media-grid-dynamic {
    position: absolute; top: 8%; left: 8%; width: 84%; height: 84%;
    display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
    gap: 15px; justify-items: center; align-items: center;
}

/* CARDS DE CADA FILME/ANIME */
.media-card-item {
    position: relative; width: 85px; height: 120px;
    transition: transform 0.25s ease-in-out; z-index: 10;
}
.media-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 🌟 SISTEMA DE CAPA FAVORITA COMPACTO (fav.png) */
.media-card-item.is-favorite::after {
    content: ''; position: absolute; top: -4px; right: -4px;
    width: 24px; height: 24px;
    background: url('../media/fav.png') no-repeat center/contain !important;
    z-index: 15; pointer-events: none;
}


/* ==========================================================================
   📺 COMPONENTES ESPECIAIS (TV & WATCHLIST & JANELA ARRASTÁVEL)
   ========================================================================== */
.media-tv-box {
    position: absolute; top: 25vh; right: 5vw; width: 280px; height: auto; z-index: 6;
}
.media-tv-img { width: 100%; height: auto; display: block; position: relative; z-index: 2; pointer-events: none; }
.media-tv-screen {
    position: absolute; top: 20%; left: 11%; width: 78%; height: 60%;
    z-index: 1; background: #000; overflow: hidden; border-radius: 4px;
}
.media-tv-screen iframe { width: 100%; height: 100%; border: none; }

.media-watchlist-panel {
    position: absolute; bottom: 4vh; left: 2vw; width: 180px; z-index: 6;
}
.media-watchlist-text {
    position: absolute; top: 25%; left: 10%; width: 80%;
    font-family: "Courier New", monospace; font-size: 12px; font-weight: bold; color: #5a544e;
    line-height: 1.4; pointer-events: auto;
}

/* ==========================================================================
   📹 INVISIBLE POINTER PLAYER SHIELDS (ANTI-CURSOR LOSS LOGIC)
   ========================================================================== */

/* 🛡️ THE OVERLAY CANVAS MESH: Draws a transparent window on top of the iframe */
.media-tv-screen::after,
.media-camcorder-screen::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    
    /* 🏆 LEVEL SUPERIORITY: Slides right between the frame asset and the raw player stream */
    z-index: 100000 !important;
    
    /* 🎯 THE FIX: Hardlocks your custom angel-wing follower pointer over the player area */
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* ⚡ CLICK PROTECTION CLARITY: Ensures clicks penetrate the mesh layer naturally */
.media-tv-screen:active::after,
.media-camcorder-screen:active::after {
    pointer-events: none !important; /* Temporarily lets you toggle play options smoothly */
}


/* 🪟 JANELA RETRÔ ARRASTÁVEL */
.media-draggable-window {
    position: absolute; bottom: 10vh; right: 7vw; width: 190px; height: auto;
    z-index: 9999; cursor: move;
}
.media-window-img { width: 100%; height: auto; display: block; }
.media-drag-handle {
    position: absolute; top: 0; left: 0; width: 100%; height: 26px; z-index: 5;
}

/* ==========================================================================
   📹 DIGITAL GREEN CAMCORDER STAGE POSITION (MEDIA.CSS)
   ========================================================================== */
.media-camcorder-box {
    position: absolute !important;
    
    /* 📐 PHOTOSHOP PLACEMENT COORDINATES:
       Adjust these metrics to shift your camcorder anywhere across the canvas! */
    top: 04vh !important;       /* Shakes it downward vertically */
    right: 83vw !important;     /* Horizontal padding gap from the right frame wall */
    
    /* 📐 BOX WIDTH BOUNDS: Hardlocks dimensions so your pixelart asset layout stays crisp */
    width: 210px !important;
    height: auto !important;
    z-index: 6 !important;
    
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* The frame overlay graphics mask layer */
.media-camcorder-img {
    width: 115% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important; /* Clicks glide straight through the frame border */
}

/* 🔄 THE SCREEN VIEWFINDER CONTAINER: 
   Perfect crop coordinates to align your moving clip pixels inside the camera glass hole */
.media-camcorder-screen {
    position: absolute !important;
    
    /* 📐 HOLE CALIBRATION (Change these if the video breaks boundaries or is misaligned): */
    top: 22% !important;
    left: 4% !important;
    width: 75% !important;
    height: 70% !important;
    
    z-index: 1 !important;
    background: #000 !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    
}

/* Force standard iframe scales to adapt natively inside the viewport bounds */
.media-camcorder-screen iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}


// ==========================================================================
// ⏳ GERENCIADOR DE INATIVIDADE DA KEEPER (MÍDIAS)
// ==========================================================================
let keeperFadeTimeout;

// Adiciona os ganchos de carregamento da Keeper assim que a página Media abrir
document.addEventListener("DOMContentLoaded", function() {
    const keeperBubble = document.getElementById("keeperBubble");
    const keeperImg = document.getElementById("keeperImg");

    if (keeperBubble) {
        keeperBubble.classList.add("visible-bubble");
        resetKeeperInactivityTimer();
    }

    if (keeperImg && keeperBubble) {
        keeperImg.addEventListener("click", (e) => {
            e.stopPropagation();
            const textTarget = document.getElementById("keeper-speech-text");
            if (textTarget) {
                textTarget.innerText = "i'm lamb, the keeper of this graveyard. feel free to wander around...";
            }
            keeperBubble.classList.add("visible-bubble");
            resetKeeperInactivityTimer();
        });
    }

    if (keeperBubble) {
        keeperBubble.addEventListener("click", (e) => {
            e.stopPropagation();
            resetKeeperInactivityTimer(); 
        });
    }
});

function resetKeeperInactivityTimer() {
    clearTimeout(keeperFadeTimeout);
    keeperFadeTimeout = setTimeout(() => {
        const keeperBubble = document.getElementById("keeperBubble");
        if (keeperBubble) {
            keeperBubble.classList.remove("visible-bubble");
        }
    }, 15000); // Some após 15 segundos de tédio
}

function tellKeeperTime(event) {
    if (event) event.stopPropagation();
    resetKeeperInactivityTimer();
    const textTarget = document.getElementById("keeper-speech-text");
    if (!textTarget) return;

    const agora = new Date();
    const timeStr = String(agora.getHours()).padStart(2, '0') + ":" + String(agora.getMinutes()).padStart(2, '0');
    textTarget.innerText = `the living clock reads ${timeStr}. here, there is only eternity.`;
}

function drawKeeperAngelNumber(event) {
    if (event) event.stopPropagation();
    resetKeeperInactivityTimer();
    const textTarget = document.getElementById("keeper-speech-text");
    if (!textTarget) return;

    // Sorteia e injeta as mensagens místicas idênticas às originais
    const oraculo_dados = [
        { title: "111 - alignment", msg: "your thoughts echo too loudly for this sacred silence. the veil is thin; be careful what you manifest from the dark." },
        { title: "444 - protection", msg: "this sacred soil isolates you from the dangers of the waking world. let the weight of the cold earth shield you." }
    ];
    
    const sorteado = oraculo_dados[Math.floor(Math.random() * oraculo_dados.length)];
    textTarget.innerHTML = `
        <span style="font-family: 'Ardenwood', 'AugustaGothic', serif !important; font-size: 2.2rem !important; color: #AA5E62 !important; display: block; margin-bottom: 8px; text-transform: uppercase; line-height: 1.1 !important;">✨ ${sorteado.title} ✨</span>
        <span style="font-size: 1.05rem !important; font-family: 'EB Garamond', serif !important; line-height: 1.4 !important; display: block; color: #464B54 !important;">${sorteado.msg}</span>
    `;
}