/* RESET E CONFIGURAÇÕES DE CURSOR */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* VIEWPORT CONTAINER FIXO */
#viewport-container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Alinhamento inicial */
    overflow: hidden;
    background: #000;
}

/* FUNDO ABSOLUTO DA PÁGINA (Preenche a viewport rígida) */
.absolute-bg {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 0;
    left: 0;
    background: url('../operating-table/operationtablebg.png') no-repeat center center;
    background-size: 100% 100%;
    z-index: 1;
}


/* CONTAINER DA MOLDURA DOURADA (Tamanho físico exato da sua imagem) */
.table-frame-container {
    position: absolute;
    width: 851px;  
    height: 988px; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.golden-frame {
    position: absolute;
    width: 851px;
    height: 988px;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none; 
}

/* TELA INTERNA (Calibrada para as dimensões exatas de 748x872 da sua imagem) */
#inner-display-screen {
    position: absolute;
    top: 58px;    /* Alinhamento milimétrico dentro do aro dourado */
    left: 61.5px; 
    width: 748px;
    height: 872px;
    z-index: 6;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow-y: auto;
    scrollbar-width: none; 
}

#inner-display-screen::-webkit-scrollbar {
    display: none; 
}

/* COMPORTAMENTO DOS ENCARDES DE FUNDO */
.bg-bunny {
    background-image: url('../operating-table/dissectedbun.png?v=1.0');
}

.bg-text {
    background-image: url('../operating-table/textbackground.png');
    padding: 50px;
}

/* CAMADA FLUTUANTE DE KANJIS (Alinhada na mesma área de 748x872 do coelho) */
#kanji-hotspots-layer {
    position: absolute;
    top: 58px;
    left: 61.5px;
    width: 748px;
    height: 872px;
    z-index: 20;
    display: none;
}

#kanji-hotspots-layer.visible {
    display: block;
}

/* ESTILO SHINY RED (VERMELHO PULSANTE ACETINADO) */
.kanji-node {
    position: absolute;
    font-size: 34px;
    font-family: "MS Mincho", "Kozuka Mincho Pro", serif;
    font-weight: bold;
    color: #ff1a1a;
    text-shadow: 0 0 12px #ff0000, 0 0 24px #990000, 0 0 36px #4d0000;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, color 0.2s ease;
    animation: shinyRedPulse 2s infinite ease-in-out;
}

.kanji-node:hover {
    color: #ffffff;
    text-shadow: 0 0 15px #ff3333, 0 0 30px #ff0000, 0 0 45px #b30000;
    transform: translate(-50%, -50%) scale(1.15);
}

@keyframes shinyRedPulse {
    0%, 100% {
        opacity: 0.85;
        text-shadow: 0 0 12px #ff0000, 0 0 20px #990000;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 24px #ff3333, 0 0 45px #ff0000, 0 0 65px #990000;
    }
}

/* ESTILIZAÇÃO DO TEXTO INTERNO */
.organ-story-title {
    font-family: "MS Mincho", serif;
    font-size: 30px;
    color: #ff3333;
    text-align: center;
    margin-bottom: 35px;
    line-height: 1.4;
    text-shadow: 0 0 8px #000;
}

.organ-story-body {
    font-family: monospace;
    font-size: 14px;
    color: #dddddd;
    line-height: 1.8;
    white-space: pre-wrap;
    margin-bottom: 40px;
    text-shadow: 1px 1px 3px #000;
}

.highlight-red {
    color: #ff3333;
    font-weight: bold;
}

/* ==========================================================================
   🖋️ IMPORTAÇÃO DA FONTE CALIGRÁFICA JAPONESA
   ========================================================================== */
@font-face {
    font-family: 'Arisawa-Kaisho';
    src: url('../fonts/Arisawa-Kaisho.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* ==========================================================================
   📌 RODAPÉ FIXO COMPACTO FORA DA MOLDURA (ESPAÇO NEGATIVO DIREITO)
   ========================================================================== */
.theater-return-footer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;             /* 🔍 Reduzido para aproximar os textos do botão menor */
    
    /* 🔒 TRAVA CENTRAL: Alinha os eixos a partir do meio exato da página */
    top: 50%;
    left: 50%;
    
    /* 📐 LOGÍSTICA DE DESLOCAMENTO: Expulsa o elemento de dentro do quadro dourado */
    transform: translate(0, 0); 
    margin-top: -125px;   /* Mantém a altura no quadrante superior direito */
    margin-left: 560px;   /* Mantém o bloco na zona escura à direita da moldura */
    
    width: 270px;
    text-align: center;
    
    /* 🖋️ TIPOGRAFIA CALIGRÁFICA JAPONESA (ARISAWA-KAISHO) */
    font-family: "Arisawa-Kaisho", "MS Mincho", serif;
    
    color: #888;
    z-index: 999;        /* Garante prioridade máxima de sobreposição */
    text-shadow: 1px 1px 4px #000;
}

.return-text {
    font-size: 14px;     /* 🔍 Reduzido de 16px para 13px para ficar mais delicado */
    letter-spacing: 1px;
    line-height: 1.4;
}

#ope-return-img {
    width: 85px;         /* 🔒 CORREÇÃO JÁ APLICADA: Reduzido drasticamente para encolher o botão */
    height: auto;        /* Preserva a proporção original do GIF */
    border: 1px solid #222;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

#ope-return-img:hover {
    border-color: #ff3333;
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 51, 51, 0.4);
}






.back-to-table-trigger {
    color: #ff3333;
    cursor: pointer;
    font-family: monospace;
    font-size: 15px;
    text-align: center;
    margin-top: 30px;
    text-decoration: underline;
    transition: color 0.2s ease;
    display: block;
}

.back-to-table-trigger:hover {
    color: #ffffff;
}

/* ==========================================================================
   📺 CAMADA DE TEXTURA E ANIMAÇÃO VCR/VHS (SCANLINES EFFECT)
   ========================================================================== */
.vcr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 9999; /* Fica acima de tudo, inclusive do rodapé e dos kanjis */
    pointer-events: none; /* RÍGIDO: Impede que o efeito bloqueie os cliques na mesa */
    
    /* Cria as linhas horizontais clássicas de monitores de tubo/fitas antigas */
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    ), 
    linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.03), 
        rgba(0, 255, 0, 0.01), 
        rgba(0, 0, 255, 0.03)
    );
    background-size: 100% 4px, 6px 100%;
    
    /* Ativa o flicker e a oscilação analógica crônica no ambiente */
    animation: vcrFlicker 0.15s infinite;
    opacity: 0.85;
}

/* Pseudo-elemento para criar a linha de interferência que cruza a tela de cima a baixo */
.vcr-overlay::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 10000;
    pointer-events: none;
    animation: vcrNoise 10s infinite linear;
}

/* ANIMAÇÕES DE RUÍDO ESTÁTICO (LO-FI DIGITAL) */
@keyframes vcrFlicker {
    0% { opacity: 0.78; }
    50% { opacity: 0.83; }
    100% { opacity: 0.80; }
}

@keyframes vcrNoise {
    0% {
        background-position: 0 0;
        opacity: 0.1;
    }
    10% {
        background-position: 0 100px;
    }
    20% {
        background-position: 0 -50px;
    }
    30% {
        background-position: 100px 0;
    }
    40% {
        background-position: 0 -100px;
    }
    50% {
        background-position: 0 0;
        opacity: 0.15;
    }
    60% {
        background-position: -50px 100px;
    }
    70% {
        background-position: 100px -50px;
    }
    80% {
        background-position: 0 50px;
    }
    90% {
        background-position: -100px 0;
    }
    100% {
        background-position: 0 0;
        opacity: 0.1;
    }
}