/* ============================================================
   1. TOKENS DE DESIGN (variáveis globais)
============================================================ */
:root{
    --neon:        #00f3ff;
    --neon-dim:    rgba(0,243,255,.25);
    --neon-faint:  rgba(0,243,255,.08);
    --green:       #39ff14;
    --red:         #ff3333;
    --amber:       #ffb547;
    --bg:          #050810;
    --bg-2:        #0a1020;
    --glass:       rgba(8,13,26,.55);
    --glass-deep:  rgba(5,8,16,.78);
    --line:        rgba(0,243,255,.22);
    --txt:         #dfe8f2;
    --txt-dim:     #7d93b4;
    --txt-mono:    #9fc3d8;
    /* Acento dinâmico do corpo celeste em foco (trocado via JS) */
    --body-accent: #00f3ff;

    --f-display: 'Orbitron', sans-serif;
    --f-body:    'Rajdhani', sans-serif;
    --f-mono:    'Share Tech Mono', monospace;
}

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

html{ height:100%; }

body{
    min-height:100%;
    background:var(--bg);
    color:var(--txt);
    font-family:var(--f-body);
    font-size:16px;
    /* Rolagem liberada para revelar a faixa de anúncio abaixo da dobra.
       O painel em si continua travado dentro de #app-screen. */
}

/* Tela de comando: reproduz exatamente o layout anterior (100vh, sem rolagem interna) */
#app-screen{
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    z-index:1;
}

/* Textura ambiente: ruído de estrelas + vinheta sutil */
body::before{
    content:"";
    position:fixed; inset:0;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(0,80,140,.18), transparent 60%),
        radial-gradient(ellipse at 50% 120%, rgba(0,30,60,.25), transparent 60%);
    pointer-events:none;
    z-index:0;
}

/* --- Customização da Barra de Rolagem Ampliada --- */
::-webkit-scrollbar { 
    width: 12px; /* Aumentado de 8px para 12px para dar mais espaço e facilidade de clique */
}
::-webkit-scrollbar-track { 
    background: rgba(0, 0, 0, .4); 
    border-radius: 6px;
}
::-webkit-scrollbar-thumb { 
    background: var(--neon-dim); 
    border-radius: 6px;
    border: 2px solid rgba(5, 8, 16, 1); /* Cria uma borda interna invisível para suavizar o visual */
}
::-webkit-scrollbar-thumb:hover { 
    background: var(--neon); 
    box-shadow: 0 0 10px var(--neon); /* Efeito neon brilhante ao passar o mouse */
}

/* ============================================================
   2. CABEÇALHO + NAVEGAÇÃO DE ABAS
============================================================ */
header{
    position:relative;
    z-index:10;
    text-align:center;
    padding:14px 20px 0;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(0,243,255,.06) 0%, transparent 100%);
}

.hud-topline{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:2px;
    color:var(--txt-dim); text-transform:uppercase;
}
.hud-topline .live-dot{
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:var(--green); margin-right:6px;
    box-shadow:0 0 8px var(--green);
    animation:blink 1.6s infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

header h1{
    font-family:var(--f-display);
    font-weight:900;
    font-size:clamp(1.05rem, 2.2vw, 1.55rem);
    letter-spacing:6px;
    color:var(--txt);
    text-transform:uppercase;
    margin:6px 0 2px;
    text-shadow:0 0 22px rgba(0,243,255,.35);
}
header h1 .accent{ color:var(--neon); }

header .subtitle{
    font-family:var(--f-mono);
    font-size:.7rem; letter-spacing:4px;
    color:var(--txt-dim); text-transform:uppercase;
}

/* Abas com micro-interações: linha que se expande + sweep luminoso */
.nav-tabs{
    display:flex; justify-content:center; gap:18px;
    margin-top:12px;
}
.tab-btn{
    position:relative;
    background:transparent;
    border:none;
    border-top:1px solid transparent;
    color:var(--txt-dim);
    padding:10px 26px 12px;
    cursor:pointer;
    font-family:var(--f-display);
    font-weight:500;
    font-size:.78rem;
    letter-spacing:3px;
    text-transform:uppercase;
    transition:color .3s;
    overflow:hidden;
}
.tab-btn::after{ /* linha inferior que se expande */
    content:"";
    position:absolute; left:50%; bottom:0;
    width:0; height:2px;
    background:var(--neon);
    box-shadow:0 0 12px var(--neon);
    transform:translateX(-50%);
    transition:width .35s cubic-bezier(.4,0,.2,1);
}
.tab-btn::before{ /* sweep luminoso ao passar o mouse */
    content:"";
    position:absolute; top:0; left:-80%;
    width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(0,243,255,.10), transparent);
    transition:left .5s ease;
    pointer-events:none;
}
.tab-btn:hover{ color:var(--txt); }
.tab-btn:hover::before{ left:120%; }
.tab-btn:hover::after{ width:40%; }
.tab-btn.active{ color:var(--neon); }
.tab-btn.active::after{ width:100%; }
.tab-btn:focus-visible{ outline:1px solid var(--neon); outline-offset:2px; }

/* Link da Loja (página externa) — destacado em relação às abas internas */
.loja-tab{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--f-display); font-weight:600; font-size:.74rem;
    letter-spacing:3px; text-transform:uppercase; text-decoration:none;
    color:var(--neon);
    border:1px solid var(--line); border-radius:4px;
    padding:9px 20px; line-height:1;
    background:rgba(0,243,255,.05);
    transition:all .3s;
}
.loja-tab:hover{ background:var(--neon); color:#000; box-shadow:0 0 14px var(--neon); }
.loja-tab:focus-visible{ outline:1px solid var(--neon); outline-offset:2px; }

/* ============================================================
   3. LAYOUT DAS VERTENTES (3 colunas)
============================================================ */
.view-section{
    display:none;
    flex:1;
    grid-template-columns:330px 1fr 380px;
    gap:18px;
    padding:18px;
    min-height:0;
    position:relative;
    z-index:1;
}
.view-section.active{ display:grid; }

/* Painel de vidro (Glassmorphism avançado) */
.panel{
    position:relative;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    display:flex;
    flex-direction:column;
    min-height:0;
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    box-shadow:
        0 8px 30px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(0,243,255,.03);
}
/* Cantoneiras táticas (corner brackets) */
.panel::before, .panel::after{
    content:"";
    position:absolute;
    width:14px; height:14px;
    border:1px solid var(--neon);
    opacity:.5;
    pointer-events:none;
}
.panel::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.panel::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 6px 0; }

.panel-title{
    font-family:var(--f-display);
    font-weight:700;
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--neon);
    margin-bottom:14px;
    padding-left:10px;
    border-left:3px solid var(--neon);
    display:flex; align-items:center; gap:8px;
}
.panel-title .tag{
    font-family:var(--f-mono);
    font-size:.6rem;
    color:var(--txt-dim);
    border:1px solid var(--line);
    padding:1px 6px;
    border-radius:3px;
    letter-spacing:1px;
}

/* ============================================================
   4. VERTENTE 1 — GLOBO INTERATIVO
============================================================ */
#canvas-container{
    position:relative;
    width:100%; height:100%;
    background:radial-gradient(circle at 50% 45%, #0b1426 0%, #050810 70%);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}
#canvas-container canvas{ display:block; }

.globo-instrucao{
    position:absolute; bottom:14px; left:50%;
    transform:translateX(-50%);
    background:var(--glass-deep);
    backdrop-filter:blur(8px);
    padding:6px 16px;
    border-radius:20px;
    font-family:var(--f-mono);
    font-size:.68rem; letter-spacing:1px;
    color:var(--txt-dim);
    pointer-events:none;
    border:1px solid var(--line);
}

/* Overlay de inicialização do motor 3D */
#boot-overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center; gap:12px;
    background:rgba(5,8,16,.85);
    z-index:6;
    transition:opacity .8s ease;
    font-family:var(--f-mono);
    letter-spacing:3px; font-size:.75rem; color:var(--neon);
}
#boot-overlay.done{ opacity:0; pointer-events:none; }
.boot-bar{ width:180px; height:2px; background:rgba(0,243,255,.15); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:40%; background:var(--neon); box-shadow:0 0 10px var(--neon); animation:bootslide 1.1s infinite linear; }
@keyframes bootslide{ from{transform:translateX(-100%)} to{transform:translateX(450%)} }

/* HUD de status de textura (informa fallback procedural) */
#texture-status{
    position:absolute; top:14px; right:14px;
    font-family:var(--f-mono); font-size:.62rem; letter-spacing:1px;
    color:var(--txt-dim);
    background:var(--glass-deep);
    border:1px solid var(--line);
    border-radius:4px;
    padding:5px 10px;
    z-index:5;
    backdrop-filter:blur(8px);
}
#texture-status .ok{ color:var(--green); }
#texture-status .warn{ color:var(--amber); }

/* --- Menu flutuante do Sistema Solar --- */
#solar-menu{
    position:absolute; top:14px; left:14px;
    display:flex; flex-direction:column; gap:8px;
    z-index:5;
}
.solar-btn{
    display:flex; align-items:center; gap:10px;
    min-width:128px;
    background:var(--glass-deep);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--txt-dim);
    font-family:var(--f-display);
    font-size:.66rem; font-weight:700;
    letter-spacing:2px; text-transform:uppercase;
    padding:8px 12px;
    cursor:pointer;
    transition:all .3s;
    position:relative;
    overflow:hidden;
}
.solar-btn .orb{
    width:12px; height:12px; border-radius:50%;
    background:var(--orb, var(--neon));
    box-shadow:0 0 8px var(--orb, var(--neon));
    flex-shrink:0;
    transition:transform .3s;
}
.solar-btn::after{ /* linha expansível inferior */
    content:""; position:absolute; left:0; bottom:0;
    height:1px; width:0; background:var(--orb, var(--neon));
    transition:width .35s;
}
.solar-btn:hover{ color:var(--txt); border-color:var(--orb, var(--neon)); }
.solar-btn:hover .orb{ transform:scale(1.25); }
.solar-btn:hover::after{ width:100%; }
.solar-btn.active{
    color:var(--orb, var(--neon));
    border-color:var(--orb, var(--neon));
    box-shadow:0 0 16px -4px var(--orb, var(--neon)), inset 0 0 12px -8px var(--orb, var(--neon));
}
.solar-btn.active::after{ width:100%; }

/* --- Lista de pontos de monitoramento (coluna esquerda) --- */
/* --- Lista de pontos de monitoramento (coluna esquerda) --- */
.loc-list { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 16px !important;            /* Dá um espaçamento nítido e confortável entre um caso e outro */
    overflow-y: auto !important;     /* Garante que a barra de rolagem fique 100% ativa e funcional */
    padding-right: 8px !important;   /* Evita que a barra de rolagem passe por cima das bordas do card */
    
    /* Preenche dinamicamente a altura do painel e rola por dentro */
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.loc-hint { 
    font-size: .82rem; 
    color: var(--txt-dim); 
    margin-bottom: 12px; 
    line-height: 1.45; 
}

/* --- Alvo triplo ultra-específico para quebrar o achatamento do zoom e da animação --- */
.loc-btn, 
.loc-btn.reveal-slide,
#loc-list .loc-btn {
    position: relative !important;
    text-align: left !important;
    background: var(--neon-faint) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    color: var(--txt) !important;
    font-family: var(--f-body) !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    letter-spacing: .5px !important;
    padding: 14px 16px !important;   /* Espaçamento interno generoso para as informações respirarem */
    cursor: pointer !important;
    transition: background .3s, border .3s, box-shadow .3s, text-shadow .3s, transform .3s !important;
    overflow: hidden !important;
    
    /* BLOQUEIO ABSOLUTO DE DEFORMAÇÃO: */
    /* Trava e força a altura ideal para expandir o texto e exibir o Emoji, Título e Coordenadas */
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 90px !important;         /* Aumentado para 90px para dar folga completa às informações */
    min-height: 90px !important;
    max-height: 90px !important;
}

.loc-btn .coords {
    display: block !important;
    font-family: var(--f-mono) !important;
    font-size: .66rem !important;    /* Ajustado sutilmente para facilitar a leitura no HUD */
    color: var(--txt-dim) !important;
    margin-top: 6px !important;     /* Afasta as coordenadas de forma elegante da linha do título */
    letter-spacing: 1px !important;
}

/* --- Estados e Interações Visuais (Preservados e Otimizados) --- */
.loc-btn:hover { border-color: var(--body-accent) !important; background: rgba(0,243,255,.06) !important; transform: translateX(3px) !important; }
.loc-btn:hover::before { transform: scaleY(1) !important; }
.loc-btn.selected {
    border-color: var(--body-accent) !important;
    box-shadow: 0 0 14px -6px var(--body-accent) !important;
}
.loc-btn.selected::before { transform: scaleY(1) !important; }

.loc-empty {
    border: 1px dashed var(--line) !important;
    border-radius: 6px !important;
    padding: 22px 16px !important;
    text-align: center !important;
    font-family: var(--f-mono) !important;
    font-size: .72rem !important;
    letter-spacing: 1px !important;
    line-height: 1.7 !important;
    color: var(--txt-dim) !important;
}
.loc-empty b { color: var(--amber) !important; display: block !important; margin-bottom: 4px !important; letter-spacing: 2px !important; }

.loc-btn:hover{ border-color:var(--body-accent); background:rgba(0,243,255,.06); transform:translateX(3px); }
.loc-btn:hover::before{ transform:scaleY(1); }
.loc-btn.selected{
    border-color:var(--body-accent);
    box-shadow:0 0 14px -6px var(--body-accent);
}
.loc-btn.selected::before{ transform:scaleY(1); }

.loc-empty{
    border:1px dashed var(--line);
    border-radius:6px;
    padding:22px 16px;
    text-align:center;
    font-family:var(--f-mono);
    font-size:.72rem;
    letter-spacing:1px;
    line-height:1.7;
    color:var(--txt-dim);
}
.loc-empty b{ color:var(--amber); display:block; margin-bottom:4px; letter-spacing:2px; }
/* --- Player de vídeo + dossiê (coluna direita) --- */
.video-shell{
    position:relative;
    flex:0 0 auto;
    background:#000;
    border:1px solid rgba(0,243,255,.18);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:14px;
    min-height:200px;
    aspect-ratio:16/9;
    box-shadow:0 0 24px -8px rgba(0,243,255,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.video-shell video{ width:100%; height:100%; object-fit:cover; }
.no-video-msg{
    position:absolute; inset:0;
    display:flex; justify-content:center; align-items:center;
    color:var(--txt-dim);
    font-family:var(--f-mono);
    font-size:.74rem; letter-spacing:1px;
    text-align:center; padding:20px;
    line-height:1.8;
}
/* Scanlines de CRT sutis sobre o vídeo */
.video-shell::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
    pointer-events:none;
    mix-blend-mode:overlay;
}
.rec-badge{
    position:absolute; top:8px; left:10px;
    font-family:var(--f-mono); font-size:.62rem; letter-spacing:2px;
    color:var(--red);
    display:none; align-items:center; gap:6px;
    z-index:2;
    text-shadow:0 0 8px rgba(255,51,51,.8);
}
.rec-badge i{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.2s infinite; }

.event-info-box{
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.05);
    border-radius:6px;
    padding:14px;
    font-size:.92rem;
    line-height:1.55;
    color:var(--txt-mono);
    flex:1;
    overflow-y:auto;
    min-height:0;
}
.event-info-box strong{
    font-family:var(--f-display);
    font-weight:700;
    font-size:.82rem;
    letter-spacing:1.5px;
    color:var(--txt);
    display:block;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
}
.event-info-box .meta{
    font-family:var(--f-mono);
    font-size:.66rem;
    color:var(--body-accent);
    letter-spacing:1px;
    display:block;
    margin-bottom:10px;
}

/* Animações de revelação (re-disparadas via JS a cada seleção) */
.reveal-fade{ animation:revealFade .55s cubic-bezier(.4,0,.2,1) both; }
.reveal-slide{ animation:revealSlide .55s cubic-bezier(.4,0,.2,1) both; }
@keyframes revealFade{ from{opacity:0} to{opacity:1} }
@keyframes revealSlide{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* ============================================================
   5. VERTENTE 2 — CATÁLOGO DE ESPÉCIES (MANEQUINS)
============================================================ */
.scale-area{
    flex:1;
    display:flex;
    justify-content:space-around;
    align-items:flex-end;
    background:
        linear-gradient(rgba(0,243,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,243,255,.03) 1px, transparent 1px),
        rgba(0,0,0,.45);
    background-size:20px 20px, 20px 20px, auto;
    border:1px solid rgba(0,243,255,.12);
    border-radius:8px;
    padding:20px 10px 14px;
    position:relative;
    overflow:hidden;
    min-height:0;
}
/* Varredura holográfica global da área de escala */
.scale-area::after{
    content:""; position:absolute; left:0; right:0; height:70px; top:-80px;
    background:linear-gradient(180deg, transparent, rgba(0,243,255,.07), transparent);
    animation:areaScan 5.5s linear infinite;
    pointer-events:none;
}
@keyframes areaScan{ from{top:-80px} to{top:110%} }

.scale-grid{
    position:absolute; left:0; top:0; width:100%; height:100%;
    display:flex; flex-direction:column-reverse;
    justify-content:space-between;
    pointer-events:none; padding:20px 0 14px;
}
.grid-line{
    border-top:1px solid rgba(0,243,255,.07);
    width:100%;
    font-family:var(--f-mono);
    font-size:.62rem; letter-spacing:1px;
    color:rgba(0,243,255,.35);
    text-align:right; padding-right:6px;
}

.mannequin-container{
    display:flex; flex-direction:column; align-items:center;
    z-index:1;
    position:relative;
}
.mannequin-svg{
    width:92px;
    transition:height .6s cubic-bezier(.4,0,.2,1);
    filter:drop-shadow(0 0 6px rgba(0,243,255,.25));
}
.sil-label{
    font-family:var(--f-mono);
    font-size:.68rem; letter-spacing:1px;
    text-align:center; margin-top:6px; line-height:1.5;
}

/* --- Carrossel central do avatar --- */
.carousel-area{
    display:flex; justify-content:center; align-items:center;
    position:relative;
    min-height:0;
}
.display-avatar-box{
    position:relative;
    width:300px; height:300px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex; justify-content:center; align-items:center;
    background:radial-gradient(circle, rgba(0,243,255,.05) 0%, transparent 65%);
    box-shadow:inset 0 0 60px -20px rgba(0,243,255,.18);
}
/* Anéis orbitais decorativos girando */
.display-avatar-box::before, .display-avatar-box::after{
    content:""; position:absolute; inset:-14px;
    border-radius:50%;
    border:1px dashed rgba(0,243,255,.18);
    animation:spin 26s linear infinite;
}
.display-avatar-box::after{
    inset:-30px;
    border:1px solid rgba(0,243,255,.07);
    border-top-color:rgba(0,243,255,.4);
    animation:spin 14s linear infinite reverse;
}
@keyframes spin{ to{transform:rotate(360deg)} }

/* Avatar duplo: emoji + imagem, com crossfade controlado por JS */
.avatar-layer{
    position:absolute;
    transition:opacity .4s ease;
    user-select:none;
}
.big-avatar{
    font-size:6.4rem;
    animation:float 4.5s infinite ease-in-out;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));
}
#alien-avatar-img{
    width:230px; height:230px;
    object-fit:contain;
    opacity:0;
    pointer-events:none;
    animation:float 4.5s infinite ease-in-out;
}
@keyframes float{
    0%,100%{ transform:translateY(0) }
    50%{ transform:translateY(-14px) }
}

/* --- RECON ÓPTICO: drawer de satélite dentro da aba do globo --- */
#recon-toggle{
    position:absolute; bottom:14px; right:14px;
    z-index:5;
    display:flex; align-items:center; gap:8px;
    background:var(--glass-deep);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--txt-dim);
    font-family:var(--f-display);
    font-size:.64rem; font-weight:700;
    letter-spacing:2px; text-transform:uppercase;
    padding:9px 14px;
    cursor:pointer;
    transition:all .3s;
    overflow:hidden;
}
#recon-toggle::after{
    content:""; position:absolute; left:0; bottom:0;
    height:1px; width:0; background:var(--amber);
    transition:width .35s;
}
#recon-toggle:hover{ color:var(--amber); border-color:var(--amber); }
#recon-toggle:hover::after{ width:100%; }
#recon-toggle.open{
    color:var(--amber); border-color:var(--amber);
    box-shadow:0 0 16px -4px var(--amber);
}

#recon-drawer{
    position:absolute; top:0; right:0; bottom:0;
    width:min(430px, 92%);
    z-index:6;
    display:flex; flex-direction:column;
    background:var(--glass-deep);
    backdrop-filter:blur(18px) saturate(140%);
    border-left:1px solid var(--amber);
    box-shadow:-12px 0 40px rgba(0,0,0,.6);
    padding:16px;
    transform:translateX(105%);
    transition:transform .45s cubic-bezier(.4,0,.2,1);
}
#recon-drawer.open{ transform:translateX(0); }

.recon-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:12px;
}
.recon-title{
    font-family:var(--f-display); font-weight:700;
    font-size:.72rem; letter-spacing:3px;
    color:var(--amber); text-transform:uppercase;
    border-left:3px solid var(--amber); padding-left:10px;
}
.recon-close{
    background:transparent; border:1px solid var(--line);
    border-radius:4px; color:var(--txt-dim);
    width:26px; height:26px; cursor:pointer;
    font-family:var(--f-mono); font-size:.8rem;
    transition:all .3s;
}
.recon-close:hover{ color:var(--red); border-color:var(--red); }

.recon-grid{
    display:grid; grid-template-columns:1fr 1fr 84px;
    gap:8px; margin-bottom:8px;
}
.recon-field label{
    display:block;
    font-family:var(--f-mono); font-size:.56rem;
    letter-spacing:1.5px; color:var(--txt-dim);
    text-transform:uppercase; margin-bottom:4px;
}
.recon-field input{
    width:100%;
    background:rgba(0,0,0,.45);
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--txt);
    font-family:var(--f-mono); font-size:.8rem;
    padding:7px 8px;
    outline:none;
    transition:border-color .3s, box-shadow .3s;
}
.recon-field input:focus{
    border-color:var(--amber);
    box-shadow:0 0 10px -3px var(--amber);
}
.recon-field input.invalid{
    border-color:var(--red);
    box-shadow:0 0 10px -3px var(--red);
}
.recon-actions{ display:flex; gap:8px; margin-bottom:10px; }
.recon-btn{
    flex:1;
    background:rgba(255,181,71,.07);
    border:1px solid rgba(255,181,71,.4);
    border-radius:5px;
    color:var(--amber);
    font-family:var(--f-display); font-weight:700;
    font-size:.62rem; letter-spacing:2px; text-transform:uppercase;
    padding:9px 6px;
    cursor:pointer;
    transition:all .3s;
}
.recon-btn:hover{ background:var(--amber); color:#1a1206; box-shadow:0 0 16px rgba(255,181,71,.45); }
.recon-btn.ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--txt-dim);
}
.recon-btn.ghost:hover{ color:var(--neon); border-color:var(--neon); background:transparent; box-shadow:0 0 14px -4px var(--neon); }

.recon-map{
    flex:1;
    min-height:0;
    border:1px solid rgba(255,181,71,.35);
    border-radius:6px;
    overflow:hidden;
    background:#000;
    position:relative;
}
.recon-map iframe{
    width:100%; height:100%;
    border:0;
    filter:saturate(.9) contrast(1.05);
}
.recon-map .recon-empty{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center; gap:10px;
    font-family:var(--f-mono); font-size:.68rem;
    letter-spacing:1px; color:var(--txt-dim);
    text-align:center; padding:24px; line-height:1.8;
}
.recon-chips{
    display:flex; flex-wrap:wrap; gap:6px;
    margin-top:10px;
    max-height:88px; overflow-y:auto;
}
.recon-chip{
    background:rgba(57,255,20,.06);
    border:1px solid rgba(57,255,20,.35);
    border-radius:20px;
    color:var(--green);
    font-family:var(--f-mono); font-size:.6rem;
    letter-spacing:1px;
    padding:4px 10px;
    cursor:pointer;
    transition:all .25s;
    white-space:nowrap;
}
.recon-chip:hover{ background:var(--green); color:#031003; box-shadow:0 0 12px rgba(57,255,20,.5); }
.recon-note{
    margin-top:8px;
    font-family:var(--f-mono); font-size:.56rem;
    letter-spacing:1px; color:var(--txt-dim);
    line-height:1.6;
}

/* --- Rótulos flutuantes dos pins (projeção 3D → 2D) --- */
#pin-labels{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:4;
    overflow:hidden;
}
.pin-label{
    position:absolute; left:0; top:0;
    transform:translate(-50%, calc(-100% - 14px));
    font-family:var(--f-mono);
    font-size:.6rem; letter-spacing:1px;
    color:var(--green);
    background:var(--glass-deep);
    backdrop-filter:blur(6px);
    border:1px solid rgba(57,255,20,.4);
    border-radius:3px;
    padding:3px 8px;
    white-space:nowrap;
    pointer-events:auto;
    cursor:pointer;
    transition:opacity .25s, background .25s, color .25s;
    will-change:left, top;
}
.pin-label::after{ /* linha-guia até o pin */
    content:"";
    position:absolute; left:50%; top:100%;
    width:1px; height:12px;
    background:linear-gradient(rgba(57,255,20,.7), transparent);
}
.pin-label:hover{ color:#031003; background:var(--green); box-shadow:0 0 14px rgba(57,255,20,.5); }
.pin-label.selected{ color:#031003; background:var(--green); box-shadow:0 0 14px rgba(57,255,20,.6); }
.pin-label.hidden{ opacity:0; pointer-events:none; }

#alien-avatar svg{
    width:210px; height:auto;
    overflow:visible;
}

/* --- Visualizador 3D do avatar (GLB) --- */
#avatar3d-container{
    position:absolute; inset:0;
    border-radius:50%;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
    cursor:grab;
}
#avatar3d-container.ativo{
    opacity:1;
    pointer-events:auto;
}
#avatar3d-container:active{ cursor:grabbing; }
#avatar3d-container canvas{ display:block; width:100% !important; height:100% !important; }

#avatar3d-status{
    position:absolute; bottom:-34px; left:50%;
    transform:translateX(-50%);
    font-family:var(--f-mono);
    font-size:.58rem; letter-spacing:2px;
    color:var(--txt-dim);
    background:var(--glass-deep);
    border:1px solid var(--line);
    border-radius:3px;
    padding:3px 10px;
    white-space:nowrap;
}
#avatar3d-status.carregando{ color:var(--amber); border-color:rgba(255,181,71,.4); }
#avatar3d-status.ativo3d{ color:var(--green); border-color:rgba(57,255,20,.4); }

#avatar3d-hint{
    position:absolute; top:-30px; left:50%;
    transform:translateX(-50%);
    font-family:var(--f-mono);
    font-size:.56rem; letter-spacing:1.5px;
    color:var(--txt-dim);
    opacity:0;
    transition:opacity .4s;
    white-space:nowrap;
    pointer-events:none;
}
#avatar3d-container.ativo ~ #avatar3d-hint{ opacity:.8; }

.nav-btn{
    background:var(--glass-deep);
    backdrop-filter:blur(8px);
    border:1px solid var(--line);
    color:var(--neon);
    width:48px; height:48px;
    border-radius:50%;
    cursor:pointer;
    font-size:1.15rem;
    display:flex; justify-content:center; align-items:center;
    transition:all .3s;
    position:absolute; z-index:5;
}
.nav-btn:hover{
    background:var(--neon); color:#000;
    box-shadow:0 0 18px var(--neon);
    transform:scale(1.08);
}
.nav-btn:active{ transform:scale(.95); }
.btn-l{ left:18px; } .btn-r{ right:18px; }

/* Indicador de página do carrossel */
.species-dots{
    position:absolute; bottom:18px; left:50%;
    transform:translateX(-50%);
    display:flex; gap:8px;
}
.species-dots i{
    width:18px; height:3px;
    background:rgba(0,243,255,.18);
    transition:all .3s;
    cursor:pointer;
}
.species-dots i.on{ background:var(--neon); box-shadow:0 0 8px var(--neon); }

/* --- Painel técnico (dossiê exobiológico) --- */
.data-row{
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.05);
    padding-bottom:8px;
}
.data-lbl{
    font-family:var(--f-mono);
    font-size:.62rem; letter-spacing:2px;
    color:var(--txt-dim); text-transform:uppercase;
}
.data-val{
    font-family:var(--f-body);
    font-size:1.08rem; font-weight:600;
    color:#fff; margin-top:3px;
    letter-spacing:.5px;
}
.data-val.neon{ color:var(--green); text-shadow:0 0 12px rgba(57,255,20,.35); }
.description-box{
    font-size:.92rem; line-height:1.55;
    color:var(--txt-mono);
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.05);
    border-radius:6px;
    padding:12px;
    flex:1; overflow-y:auto; min-height:0;
}
/* Barra de nível de ameaça */
.threat-meter{ display:flex; gap:4px; margin-top:6px; }
.threat-meter i{
    flex:1; height:6px;
    background:rgba(255,255,255,.07);
    border-radius:2px;
    transition:background .4s, box-shadow .4s;
}

/* ============================================================
   6. CONTROLE DE SOM (SFX) + ACESSIBILIDADE
============================================================ */
#sfx-toggle{
    background:transparent;
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--txt-dim);
    font-family:var(--f-mono);
    font-size:.62rem; letter-spacing:1px;
    padding:3px 9px;
    cursor:pointer;
    transition:all .3s;
}
#sfx-toggle:hover{ color:var(--neon); border-color:var(--neon); }
#sfx-toggle.on{ color:var(--green); border-color:var(--green); }

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* Responsivo básico: colunas empilham em telas estreitas */
/* ============================================================
   RESPONSIVIDADE: CALIBRAÇÃO PARA TELAS DE NOTEBOOKS (<= 1366px)
============================================================ */
@media (max-width: 1366px) {
    body { 
        overflow: hidden !important; /* Trava totalmente a rolagem da página principal */
    }
    
    .view-section { 
        grid-template-columns: 260px 1fr 300px !important; /* Encolhe as colunas laterais */
        gap: 12px !important;
        padding: 12px !important;
        height: calc(100vh - 110px) !important; /* Garante que caiba entre o cabeçalho e o rodapé */
    }
    
    .panel {
        padding: 12px !important; /* Diminui o recuo interno dos cards */
    }

    #canvas-container { 
        height: 100% !important; /* Força o Globo 3D a ocupar toda a altura disponível, sem estourar */
    }
    
    .display-avatar-box { 
        width: 210px !important; /* Encolhe os anéis do carrossel */
        height: 210px !important; 
    }
    
    .big-avatar {
        font-size: 4.5rem !important; /* Reduz o tamanho do emoji de fallback */
    }
    
    /* Garante rolagens internas perfeitas nas caixas de texto longo */
    .event-info-box, .description-box, .loc-list {
        overflow-y: auto !important;
    }
}

/* ====================================================================
   AEROSPACE COMMAND · css/style.css
   Extraído do ufo_v05.html na modularização — tokens, layout,
   glassmorphism, animações e responsividade. (fim do arquivo)
==================================================================== */

/* ====================================================================
   CATÁLOGO DE NAVES (adição modular — espelha o visualizador do
   catálogo de espécies para os elementos da aba de naves)
==================================================================== */
#nave3d-container{
    position:absolute; inset:0;
    border-radius:50%;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
    cursor:grab;
}
#nave3d-container.ativo{ opacity:1; pointer-events:auto; }
#nave3d-container:active{ cursor:grabbing; }
#nave3d-container canvas{ display:block; width:100% !important; height:100% !important; }

#nave-fallback svg{ width:240px; height:auto; overflow:visible; }

#nave3d-status{
    position:absolute; bottom:-34px; left:50%;
    transform:translateX(-50%);
    font-family:var(--f-mono);
    font-size:.58rem; letter-spacing:2px;
    color:var(--txt-dim);
    background:var(--glass-deep);
    border:1px solid var(--line);
    border-radius:3px;
    padding:3px 10px;
    white-space:nowrap;
}
#nave3d-status.carregando{ color:var(--amber); border-color:rgba(255,181,71,.4); }
#nave3d-status.ativo3d{ color:var(--green); border-color:rgba(57,255,20,.4); }

#nave3d-hint{
    position:absolute; top:-30px; left:50%;
    transform:translateX(-50%);
    font-family:var(--f-mono);
    font-size:.56rem; letter-spacing:1.5px;
    color:var(--txt-dim);
    opacity:0;
    transition:opacity .4s;
    white-space:nowrap;
    pointer-events:none;
}
#nave3d-container.ativo ~ #nave3d-hint{ opacity:.8; }

.nave-schematic{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(0,243,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,243,255,.03) 1px, transparent 1px),
        rgba(0,0,0,.4);
    background-size:20px 20px, 20px 20px, auto;
    border:1px solid rgba(0,243,255,.12);
    border-radius:8px;
    padding:14px;
    margin-bottom:14px;
}
.nave-schematic svg{ width:100%; height:auto; max-height:100%; }

/* ============================================================
   RESPONSIVIDADE MÓVEL: CALIBRAÇÃO PARA SMARTPHONES (<= 768px)
============================================================ */
@media (max-width: 768px) {
    body {
        overflow-y: auto !important; /* Permite a rolagem da página inteira no celular */
        height: auto !important;
    }

    header h1 {
        font-size: 1.2rem !important; /* Encolhe o título para não estourar a linha */
        letter-spacing: 3px;
    }

    .nav-tabs {
        flex-wrap: wrap; /* Faz os botões de abas quebrarem de linha se faltar espaço */
        gap: 8px;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 0.65rem !important;
        letter-spacing: 1px;
    }

    /* Transforma as 3 colunas em uma fila única vertical */
    .view-section {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 10px !important;
        gap: 16px !important;
    }

    /* Redimensiona o contêiner do Globo 3D para caber no visor */
    #canvas-container {
        width: 100% !important;
        height: 380px !important; /* Fixa uma altura excelente para manipular o planeta com o polegar */
        order: 1; /* Força o Globo a ser o primeiro elemento visual importante */
    }

    /* Ajusta as caixas laterais para virarem cards empilhados embaixo do globo */
    .panel {
        width: 100% !important;
        height: auto !important;
        max-height: 450px !important; /* Limita a altura para criar rolagem interna no card */
        order: 2;
    }

    /* Calibra a lista de botões da esquerda no mobile */
    .loc-list {
        height: 250px !important;
        max-height: 250px !important;
    }

    /* Alarga os botões para toque com o dedo (UX de mobile) */
    .loc-btn, 
    .loc-btn.reveal-slide, 
    #loc-list .loc-btn {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }

    /* Reduz a área do player de vídeo na direita para não sumir da tela */
    .video-shell {
        min-height: 160px !important;
    }

    /* Drawer do satélite abre cobrindo a tela inteira do smartphone */
    #recon-drawer {
        width: 100% !important;
        border-left: none;
        border-top: 2px solid var(--amber);
    }
}

/* ============================================================
   FAIXA DE ANÚNCIO (abaixo da dobra) + BANNER DE CONSENTIMENTO LGPD
   Adicionado para monetização via Google AdSense, sem comprimir o painel.
============================================================ */
.ad-strip{
    position:relative;
    z-index:1;
    max-width:1100px;
    margin:0 auto;
    padding:22px 18px 34px;
    text-align:center;
    border-top:1px solid var(--line);
}
.ad-strip__label{
    display:block;
    font-family:var(--f-mono);
    font-size:.6rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--txt-dim);
    margin-bottom:10px;
}
.ad-strip .adsbygoogle{
    display:block;
    min-height:0;           /* colapsa sozinho enquanto não há anúncio aprovado */
}

/* ============================================================
   SUPLEMENTO ULTRA-ESPECÍFICO: ARTIGOS & RELATOS (Responsivo)
============================================================ */

/* 1. Reset e Ocultação Absoluta das abas desativadas */
#artigos-view, #relatos-view {
    display: none !important;
    width: 100%;
    height: 100%;
}

/* 2. Ativação controlada via clique de abas (Somente se possuir a classe .active) */
#artigos-view.active, #relatos-view.active {
    display: block !important; /* Força comportamento de bloco para leitura contínua */
    overflow-y: auto !important; /* Libera rolagem caso haja muitos posts */
}

/* 3. Força rolagem interna nos painéis para manter o layout 100vh no Desktop */
#artigos-view .panel, #relatos-view .panel {
    width: 100% !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    padding-right: 12px;
}

/* ============================================================
   CALIBRAÇÃO DE RESPONSIVIDADE PARA SMARTPHONES (<= 768px)
============================================================ */
@media (max-width: 768px) {
    /* Esconde as abas inativas no mobile de forma implacável */
    .view-section {
        display: none !important;
    }

    /* Exibe APENAS a aba ativa clicada */
    .view-section.active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Garante comportamento fluido nas abas de leitura */
    #artigos-view.active, #relatos-view.active {
        display: block !important;
    }

    /* Ajuste fino dos painéis de texto no celular para não comprimir o layout */
    #artigos-view .panel, #relatos-view .panel {
        max-height: none !important; /* Deixa o texto expandir naturalmente para rolagem do polegar */
        overflow-y: visible !important;
        margin-bottom: 20px;
    }

    /* Otimização da barra de navegação superior para rolar lateralmente se houver muitos botões */
    .nav-tabs {
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn, .loja-tab {
        flex: 0 0 auto !important;
    }
}