@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: CONFIGURAÇÕES E VARIÁVEIS GLOBAIS
   ========================================================================== */
:root {
    --blog-white: #ffffff;
    --menu-font: "AugustaGothic", sans-serif;
    --glow-effect: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

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

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    user-select: none;
    cursor: url('../decor/cursor.png'), auto !important;
}

/* --- ADAPTAÇÃO FIEL DO BACKGROUND EM CAMADAS --- */
.absolute-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../about/aboutbg.png') center center / cover no-repeat;
    z-index: 1;
}


.top-lace {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Força o bloco a ocupar toda a largura da tela */
    height: 300px !important; /* Preserva a altura original do seu design */
    z-index: 2 !important;
    pointer-events: none !important;

    /* 🎯 SOLUÇÃO: Puxa a imagem, proíbe o repeat e obriga ela a cobrir a largura inteira horizontalmente */
    background: url('../dividers/fishnetlace.png') no-repeat top center !important;
    background-size: 100% 100% !important; /* Estica a renda exatamente na horizontal e vertical da caixa */
}


/* CONTAINER MÃE QUE RASTREIA O INTEGRAL DA TELA */
.graveyard-scene {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
}

/* ==========================================================================
   🏷️ CONJUNTO DO BOTÃO VOLTAR (ISOLADO DO FLEXBOX)
   ========================================================================== */
.btn-voltar-wrapper {
    position: absolute !important;
    float: left !important;
    display: inline-block !important;
    margin-top: -85px !important; 
    left: 0px !important;
    width: 100% !important;
    height: auto !important;
    z-index: 250 !important;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out !important;
}

.btn-voltar-wrapper:hover {
    transform: scale(1.08) !important; 
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8)) !important; 
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

.btn-voltar-bg {
    display: block !important;
    width: 100% !important; 
    height: auto !important;
    position: relative !important; 
    z-index: 1 !important;
}

.btn-voltar-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    font-family: "AugustaGothic", serif !important;
    color: #949C9D !important;
    font-size: 1.7rem !important;
    text-decoration: none !important;
    z-index: 2 !important; 
    white-space: nowrap !important;
    /* 🎯 SOLUÇÃO: Cria um contorno branco rígido de 1px cobrindo as 8 direções das letras */
    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;
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

.btn-voltar-wrapper:hover .btn-voltar-text {
    color: #CC777A !important; /* Insira aqui a cor do acendimento do hover! */
}


/* ==========================================================================
   🏰 MENU LATERAL ESQUERDO ESTILO DIÁRIO DE BORDO
   ========================================================================== */

.menu-container {
    position: absolute;
    top: 26vh;
    left: 2vw;
    display: flex;
    flex-direction: column;
    
    /* 📐 1. ESPAÇAMENTO VERTICAL: 
       Aumente o gap de 10px para 14px ou 16px se notar que os botões maiores estão se esbarrando! */
    gap: 12px;
    z-index: 10;
}

.menu-button {
    /* 🎯 2. LARGURA HORIZONTAL: Mude de 100% para um valor fixo em pixels para fazê-los esticar */
    width: 145px !important;  /* 📐 Mude para 200px, 220px... Vá testando até a proporção ideal! */
    
    /* 🎯 3. ALTURA VERTICAL: Aumente este valor para deixar as placas mais gordinhas */
    height: 54px !important;  /* 📐 Mude para 58px, 62px se quiser eles ainda mais altos */
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    outline: none !important;
    
    color: #464B54 !important; 
    font-family: "Jacquard 12", serif !important;
    
    /* 📐 4. TAMANHO DA LETRA GÓTICA: 
       Se a placa cresceu, você pode subir o tamanho da fonte para acompanhar a moldura! */
    font-size: 1.5rem !important; 
    letter-spacing: 1px !important;
    
    border: 12px solid transparent !important;
    border-image: url("../decor/laceframe.png") 30 round !important;
    
    background-image: url("../dividers/fishnetlace.png"), linear-gradient(#FAF4ED, #FAF4ED) !important;
    background-repeat: repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: auto, cover !important;
    background-clip: padding-box !important; 
    
    transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease !important;
}


.menu-button:hover {
    transform: scale(1.04) !important;
    filter: brightness(1.1) drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.15)) !important;
    color: #AA5E62 !important; 
}

        /* ==========================================================================
           🛸 NESTED DROPDOWN LAYOUT STRUCTURES (PURE CSS INTERFACE)
           ========================================================================== */
        /* Keeps the button and portal panels locked relative to each other */
        .menu-dropdown-container {
            position: relative !important;
            display: inline-block !important;
        }

        /* 📁 SUB-PORTAL DRAWER SHEET: Sits hidden on page load directly under the button */
        .dropdown-portal-links {
            position: absolute !important;
            top: 100% !important;        /* Snaps flush right against the bottom edge of the button */
            left: 0 !important;
            width: 100% !important;      /* Automatically matches the exact width of your menu-button */
            min-width: 120px !important; /* Safety constraint so long names don't crop wrap */
            
            /* Visual palette styled to respect your dark acinhado ciber theme choices */
            background: rgba(193, 201, 186, 0.98) !important; /* Cool dark pale tone matching #595B8D variations */
            border: 1px dashed #FFFFFF !important;
            border-radius: 4px !important;
            padding: 4px 0 !important;
            box-shadow: 0px 6px 16px rgba(0,0,0,0.4) !important;
            margin-top: 4px !important;
            
            /* Visual states parameters */
            display: block !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transform: translateY(-5px) !important;
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
            z-index: 9999999 !important;
        }

        /* 🚀 TRIGGER HOVER ACTION: The second the mouse pointer enters the button zone, reveal the links! */
        .menu-dropdown-container:hover .dropdown-portal-links {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0px) !important;
        }

        /* 📑 INDIVIDUAL PORTAL PORT LINKS: Designing the item layers inside the panel box */
        .dropdown-portal-item {
            display: block !important;
            padding: 8px 12px !important;
            color: #7A86B3 !important;   /* Hand-picked matching pale ice blue accent color */
            font-family: "MS Gothic", "MS PGothic", monospace !important;
            font-size: 12px !important;
            font-weight: bold !important;
            text-decoration: none !important;
            text-align: center !important;
            text-transform: lowercase !important;
            letter-spacing: 0.5px !important;
            transition: background 0.2s ease, color 0.2s ease !important;
            cursor: url("../decor/cursor.png") 16 12, auto !important;
        }

        /* ✨ MICRO HOVER INDIVIDUAL SUB-ITEM ELEMENT RESPONSE */
        .dropdown-portal-item:hover {
            background: rgba(177,183,171, 0.4) !important; /* Injects a soft tint of #595B8D on highlight */
            color: #CD898B !important;                      /* Brightens text spectrum */
        }


/* ==========================================================================
   ⚓ ANCORAGEM DAS ENTIDADES E GUARDIÕES LATERAIS
   ========================================================================== */

.trash-angel-wrapper {
    position: absolute !important;
    bottom: 2vh !important;
    left: 1vw !important;
    /* 🎯 SOLUÇÃO: Salta por cima do escudo invisível de 225% do papel central */
    z-index: 99999 !important; 
    pointer-events: auto !important;
}
.trash-angel { 
    width: 250% !important; 
    max-width: 250px !important; 
}

.crying-angel-wrapper {
    position: absolute !important;
    top: 36vh !important;
    left: 12.5vw !important;
    /* 🎯 SOLUÇÃO: Salta por cima do escudo invisível de 225% do papel central */
    z-index: 99999 !important; 
    pointer-events: auto !important;
}
.crying-angel { 
    width: 100% !important; 
    max-width: 150px !important; 
}

.angel-tomb-wrapper {
    position: absolute !important;
    top: 18.5vh !important;
    right: 3.5vw !important;
    /* 🎯 SOLUÇÃO: Salta por cima do escudo invisível de 225% do papel central */
    z-index: 99999 !important; 
    pointer-events: auto !important;
}
.angel-tomb { 
    width: 350% !important; 
    max-width: 350px !important; 
    animation: floatGravestoneAbout 3s ease-in-out infinite alternate !important; 
}



/* ==========================================================================
   🏛️ PALCO CENTRAL (PAPEL DE TEXTO DO PHOTOSHOP)
   ========================================================================== */
.center-stage {
    position: absolute;
    top: 5vh;
    left: 48%;
    transform: translateX(-50%);
    width: 440px;
    height: 84vh;
    z-index: 5;
}


/* --- PROCURE POR ESTA CLASSE NO SEU CSS E COLE ESTA VERSÃO CORRIGIDA: --- */
/* ==========================================================================
   📌 RECONFIGURAÇÃO DA CAIXA MÃE DO PALCO CENTRAL (SEM DUPLICADOS)
   ========================================================================== */
.paper-bg {
    top: 3vh !important;
    left: -50% !important;
    width: 225% !important;
    height: 100% !important;
    position: relative !important;
    
    /* 🎯 SOLUÇÃO: Removemos a imagem de fundo do CSS! 
       Agora, o único papel que vai existir no site será o da tag <img> do seu HTML. */
    background: transparent !important; 
}

/* Mantém o comportamento correto e protegido da tag física do HTML */
.about-papertext-png {
    display: block !important;
    width: 100% !important;   /* Faz o papel do HTML preencher os 225% da caixa de forma nítida */
    height: auto !important;
    pointer-events: none !important; 
    z-index: 1 !important;
}



.lil-tag {
    position: absolute;
    top: 2%; right: 2%;
    width: 240px;
    z-index: 4;
}

.pfp-wrapper {
    position: absolute !important;
    top: -7%; left: 45%;
    transform: translateX(-50%);
    width: 200px;
    z-index: 9999 !important; 
    pointer-events: auto !important;
    margin-left: -6px !important; /* Microajuste preciso para a esquerda */
}
.pfp-avatar { 
    width: 100%; 
    border-radius: 50%; 
    display: block !important;
}

.milk-bottle { 
    position: absolute; 
    top: 14%; left: 5%; 
    width: 40px; 
    z-index: 4; 
    transition: transform 0.2s ease, filter 0.2s ease !important;
}
.milk-bottle:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.85)) !important;
    animation: bottleWobbleAbout 0.25s ease-in-out infinite alternate !important;
}

/* REPRODUTOR IPOD SCREEN */
.ipod-container {
    position: absolute;
    top: 20.8%;
    left: 44%;
    transform: translateX(-50%);
    width: 315px;
    height: 180px;
    z-index: 3;
}
.youtube-underlayer {
    position: absolute;
    top: 36px; left: 26px;
    width: 140px; height: 107px;
    z-index: 1;
    border-radius: 2px;
    overflow: hidden;
}
.youtube-underlayer iframe { width: 100%; height: 100%; border: none; }
.ipod-screen-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    z-index: 2;
    pointer-events: none;
}

.grass-layer {
    position: absolute;
    bottom: 4%; left: 45%;
    transform: translateX(-50%);
    width: 40%;
    z-index: 4;
    pointer-events: none;
}

/* ==========================================================================
   📌 BASE DO PALCO E BICHINHOS DE APOIO
   ========================================================================== */
.lamby-sleep {
    position: absolute;
    bottom: 2vh;
    left: 15%;
    width: 170px;
    z-index: 6;
}

.purity-buttons-stack {
    position: absolute;
    bottom: -6vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
   cursor: url("../decor/cursor.png") 16 0, auto !important;
    flex-direction: column;
    gap: 4px;
    z-index: 7;
}
.purity-btn { 
    width: 300px; 
    display: block; 
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

.about-text {
    display: block !important;
    position: relative !important;
    width: 90% !important;     
    height: auto !important;    
    pointer-events: none !important; 
    top: -620px !important;        
    left: 8px !important;       
}

/* ==========================================================================
   ✨ SISTEMA DE INTERATIVIDADE NATIVA: BALÕES DE FALA (PALETA VITORIANA)
   ========================================================================== */

/* 🔲 1. Estilização unificada com a fonte AugustaGothic 0.95rem e fundo creme */
.trash-angel-wrapper .speech-bubble,
.angel-tomb-wrapper .speech-bubble,
.crying-angel-wrapper .speech-bubble,
.pfp-wrapper .speech-bubble {
    position: absolute !important;
    bottom: 115% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    z-index: 9999999 !important;
    
    /* 🎨 Paleta Customizada Vitoriana */
    background: rgba(248, 243, 236, 0.92) !important; /* Fundo Creme F8F3EC semi-transparente */
    border: 1px solid #A9B2A3 !important; /* Contorno oliva finíssimo */
    color: #464B54 !important; /* Texto cinza medieval */
    
    /* ✒️ Tipografia Gótica Centralizada */
    font-family: "AugustaGothic", "Ardenwood", serif !important;
    font-size: 0.95rem !important; 
    font-weight: normal !important;
    text-align: center !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none !important;
    
    display: none !important;
}

/* 🔥 Classes de ativação gerenciadas dinamicamente via about.js */
.trash-angel-wrapper .speech-bubble.active,
.angel-tomb-wrapper .speech-bubble.active,
.crying-angel-wrapper .speech-bubble.active,
.pfp-wrapper .speech-bubble.active,
.pfp-wrapper .speech-bubble.show-tip {
    display: block !important;
}

/* ==========================================================================
   🖼️ HOVERS, OUTEGLOWS E ENGINE DE ANIMAÇÕES
   ========================================================================== */
.hoverable-item {
    transition: transform 0.2s ease, filter 0.2s ease !important;
}
.hoverable-item:hover {
    transform: scale(1.05) !important; 
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.85)) !important; 
}

/* 🕊️ Flutuação da anjinha do túmulo */
@keyframes floatGravestoneAbout {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1) translateY(-5px); }
}

.angel-tomb:hover {
    animation: tombFloatAbout 1.5s ease-in-out infinite alternate !important;
}
@keyframes tombFloatAbout {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1) translateY(-4px); }
}


/* ==========================================================================
   🐰 3 ANJOS COELHOS VOANDO: FLUTUAÇÃO ETÉREA E CONTÍNUA (CENTRO DA TELA)
   ========================================================================== */
.bunnies-fly {
    position: absolute !important;
    top: 44.5% !important; 
    left: 44% !important;
    width: 160px !important;
    z-index: 4 !important;
    display: inline-block !important;
    
    /* 🎯 SOLUÇÃO DA TRAVA: Removemos o transform fixo daqui e deixamos o loop da animação cuidar dele! 
       A animação softFloatArc agora roda de forma fluida, livre e contínua. */
    animation: softFloatArcAbout 3.5s ease-in-out infinite alternate !important;
    
    /* Suavização para o efeito hover atuar sem trancos visuais */
    transition: transform 0.4s ease-in-out, filter 0.4s ease !important;
}

/* ⚡ INTERATIVIDADE HOVER: Adiciona uma pulsação física e um outerglow branco místico ao passar o mouse */
.bunnies-fly:hover {
    /* Pausa a animação de flutuação de fundo para o balanço do hover atuar com precisão */
    transform: translateX(-50%) scale(1.05) !important;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.85)) !important; 
}

/* 🌌 LOOP DE FLUTUAÇÃO: Faz os coelhinhos subirem 6px e rotacionarem 2 graus de forma lenta e mística,
   mantendo a centralização morta do translateX(-50%) em cada etapa do cálculo. */
/* 🌌 NOVO LOOP DE FLUTUAÇÃO: Adicionado o zigue-zague lateral sutil de vento */
@keyframes softFloatArcAbout { 
    0% { 
        /* Começa um pouquinho mais para a esquerda (-52%) na altura normal */
        transform: translateX(-52%) translateY(0px) rotate(-1deg); 
    } 
    50% {
        /* No meio do caminho, passa pelo centro exato (-50%) subindo metade da altura */
        transform: translateX(-50%) translateY(-3px) rotate(1deg);
    }
    100% { 
        /* Termina subindo os 6px e deslizando um tico para a direita (-48%) */
        transform: translateX(-48%) translateY(-6px) rotate(2deg); 
    } 
}

/* ==========================================================================
   🕹️ UNIFIED CUSTOM CURSOR LOCKS: MENUS & IPOD SHIELD (ABOUT.CSS)
   ========================================================================== */

/* 🎯 1. FORCE ON ALL MENU AND CLICKABLE ASSETS
   Ensures the angel-wing stays anchored over sidebar buttons and wrapper zones */
.menu-container, 
.menu-button, 
.menu-button span, 
.btn-voltar-wrapper, 
.btn-voltar-bg,      /* ⚔️ Injected right here to bind the cross image physical layout! */
.btn-voltar-text, 
.purity-btn, 
#triggerSavedBtn, 
.interact-el {
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}


/* 🛡️ 2. THE IPOD OVERLAY CANVAS SHIELD: Draws a transparent layer on top of the iframe */
.ipod-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    
    /* Slides right between your ipod screen mask graphic and the active player stream */
    z-index: 100000 !important;
    
    /* Hardlocks your custom angel-wing follower pointer over the moving video glass area */
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* ⚡ CLICK INTERACTION BYPASS: Lets clicks bypass the shield matrix to handle video playback */
.ipod-container:active::after {
    pointer-events: none !important;
}

/* ==========================================================================
   🌸 PLACA DE STATUS: CURRENTLY COM TEXTO EDITÁVEL DE MÍDIAS (ABOUT.CSS)
   ========================================================================== */
.about-currently-box {
    position: absolute !important;
    
    /* 📐 SUAS COORDENADAS AJUSTADAS:
       Puxamos um pouco mais para o topo (1.5vh) e abrimos espaço na esquerda (-21.5vw)
       para o bloco rotacionado se encaixar perfeitamente no vão do seu papel central! */
    top: -0.3vh !important;     
    left: -24vw !important;    
    
    right: auto !important;
    bottom: auto !important;
    
    /* 📐 CONTROLE RÍGIDO DE LARGURA BASE */
    width: 450px !important; 
    z-index: 99999 !important; 
    display: block !important;
    cursor: url("../decor/cursor.png") 16 0, auto !important;

    /* 🎯 SOLUÇÃO SUPREMA DE ESCALA E ROTAÇÃO:
       • scale(0.82): Diminui o tamanho do conjunto inteiro (imagem + texto) para 82% do original.
       • rotate(-3deg): Rotaciona todo o bloco levemente para a ESQUERDA (em 3 graus negativos).
       Altere estes números abaixo na mão para calibrar do seu jeito! */
    transform: scale(0.90) rotate(-11.5deg)   !important;
}


/* A imagem serve apenas como parede de fundo estática e nítida */
.about-currently-img {
    display: block !important;
    width: 97% !important; 
    height: auto !important;
    image-rendering: pixelated !important; 
}

/* 🎯 CAIXA DE TEXTO POR CIMA DA PLACA:
   Flutua em cima do papel de costura e empilha os status de forma compacta */
.about-currently-text-overlay {
    position: absolute !important;
    
    /* 📐 REBAIXAMENTO DO TEXTO: 
       Ajuste este 'top' para descer ou subir as linhas, desviando do título do Photoshop! */
    top: 25.8% !important; 
    left: 08.9% !important;
    width: 80% !important;
    
    /* Estilização das Letrinhas Góticas/Monospace */
    font-family: "Courier New", Courier, monospace !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #464B54 !important; /* Mesma cor cinza medieval do seu menu */
    
    /* Espaçamento perfeito entre as 4 linhas de mídias */
    line-height: 1.6 !important;
    text-align: center !important;
    pointer-events: auto !important;
    transform: scale(0.90) 
}

/* 🎨 DESTAQUE DOS MARCADORES (watching:, playing:, etc.) */
.about-currently-text-overlay span {
    color: #949C9D !important; /* Tom cinza suave das fontes secundárias */
    font-weight: bold !important;
    transform: scale(0.90) 
    
}

/* ==========================================================================
   🐫 COMPONENT LAYOUT: SINISTER DIALOGUE CAMEL (ABOUT.CSS)
   ========================================================================== */
.about-camel-wrapper {
    position: absolute !important;
    
    /* 📐 PLACEMENT COORDINATES:
       Sits on the bottom boundary (2vh) and shifts right to clear the garbage angel */
    bottom: -1vh !important;
    left: 12vw !important; /* Adjust this value horizontal to tuck it close or spread it out */
    
    width: 240px !important;
    height: auto !important;
    z-index: 100000 !important; /* Elevates above background terrain lines */
    pointer-events: auto !important;
}

/* 🖼️ PHYSICAL IMAGE ASSET HANDLING */
.camel-pixel-asset {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    image-rendering: pixelated !important;
    cursor: url("../decor/cursor.png") 16 0, auto !important;
}

/* 🔄 HOVER IMAGE SWAP MECHANIC: Toggles state cleanly from closed to open */
.about-camel-wrapper:hover .camel-pixel-asset {
    content: url("../about/camelopen.png") !important;
}

/* ==========================================================================
   💬 TEXTURED DIALOGUE BALLOON PANEL
   ========================================================================== */
.about-camel-bubble {
    position: absolute !important;
    bottom: 110% !important; /* Springs cleanly over the camel's head */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    background: #FAF4ED !important; /* Classic cream matching your santuário themes */
    border: 2px solid #C9D5DA !important; /* Rose boundary wrap line */
    padding: 12px 14px !important;
    border-radius: 4px !important;
    width: 220px !important;
    text-align: center !important;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 100002 !important;
    
    font-family: "AugustaGothic", monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #464B54 !important;
 /* Transição suave de opacidade para aceitar FADE IN e FADE OUT */
    transition: opacity 1.2s ease, visibility 1.2s ease !important;
    opacity: 1;
    visibility: visible;
}

/* Classe de ocultação */
.about-camel-bubble.fade-out-bubble {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ACTIONS STACK WRAPPER */
.camel-actions-box {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

/* 🏰 THE CHOICES BUTTONS: Replicates your core layout frames (laceframe + fishnet lace) */
.camel-choice-btn {
    width: 75px !important;
    height: 34px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    outline: none !important;
    border: 6px solid transparent !important;
    border-image: url("../decor/laceframe.png") 30 round !important;
    
    /* Texturing style layer parameters */
    background-image: url("../dividers/fishnetlace.png"), linear-gradient(#FAF4ED, #FAF4ED) !important;
    background-repeat: repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: auto, cover !important;
    background-clip: padding-box !important;
    
    font-family: "Jacquard 12", serif !important;
    font-size: 1.2rem !important;
    color: #DEAAAA !important;
    cursor: url("../decor/cursor.png") 16 0, auto !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}
.camel-choice-btn:hover {
    transform: scale(1.05) !important;
    color: #B3C8CF !important;
}

/* ==========================================================================
   🚬 MULTIMEDIA CIGARETTE GIF MASK
   ========================================================================== */
.camel-smoke-gif {
    position: absolute !important;
    bottom: 120% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150px !important;
    height: auto !important;
    z-index: 100005 !important;
    pointer-events: none !important;
    image-rendering: pixelated !important;
}