/**
 * MÓVEIS 3D - MAIN STYLES (v2.0)
 * Implementação do estilo "Gamified HUD".
 * Depende de: core/theme.css e core/reset.css
 */

/* =========================================
   CORREÇÃO CRÍTICA DE LAYOUT (FULLSCREEN)
   ========================================= */

/* 1. Garante que a página tenha altura */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Impede rolagem */
    cursor: var(--cursor-default-icon) 0 0, auto;
}

/* 2. O Container Principal deve ser fixo e ocupar tudo */
#main-container {
    position: fixed; /* Fixa na tela */
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Fica atrás da UI */
    display: block; /* Garante que não está hidden */
}

/* 3. O Workspace (onde o Three.js injeta o canvas) */
#workspace {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #1a1a1a; /* Cor de fundo de segurança */
}

/* 4. FORÇA O CANVAS A OCUPAR O ESPAÇO */
#workspace canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    outline: none;
    cursor: var(--cursor-default-icon) 0 0, auto !important;

}

#main-container, #ui-layer, #workspace {
    cursor: var(--cursor-default-icon) 0 0, auto;
}
/* Cursor de "Mãozinha" (Pointer) vira nossa seta vermelha */
button, a, .tool-button, .perfil-usuario, .g-btn, .game-toast {
    cursor: var(--cursor-pointer-icon) 0 0, pointer !important;
}

/* Quando estiver segurando o clique (arrastando no 3D) */
#workspace canvas:active {
    cursor: move; /* Ou podemos criar um ícone de "mão fechada" depois */
}






/* =========================================
   4. SIDEBAR TOGGLE & FLUTUANTES
   ========================================= */
#toggle-sidebar-btn {
    position: fixed;
    top: 80px; /* Abaixo do top-bar */
    left: var(--spacing-md);
    z-index: var(--z-ui-base);
    
    width: 40px; 
    height: 40px;
    border-radius: var(--radius-btn);
    background: var(--surface-glass-dark);
    color: var(--text-high-emphasis);
    border: 1px solid var(--surface-border);
    backdrop-filter: var(--backdrop-blur);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* =========================================
   5. MODAIS E NOTIFICAÇÕES
   ========================================= */

/* Barra de Progresso de Salvamento (Toast Notification) */
#save-progress-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    
    background: var(--surface-glass-dark);
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid var(--color-primary);
    
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-high-emphasis);
    font-size: 14px;
    font-weight: 500;
}
/* Esconder visualmente mas manter funcionalidade */
#save-progress-container.hidden {
    display: none;
}

/* Modal de Instalação iOS */
.ios-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Sheet estilo iOS */
    padding-bottom: 20px;
}

.ios-modal.hidden { display: none; }

.ios-modal-content {
    background: #1c1c1e; /* Cor nativa iOS Dark */
    width: 90%;
    max-width: 400px;
    padding: 24px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    position: relative;
    animation: slideUpModal 0.3s ease-out;
}

@keyframes slideUpModal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* =========================================
   6. UTILITÁRIOS
   ========================================= */
.hidden {
    display: none !important;
}

/* Classes para serem usadas via JS nos painéis gerados dinamicamente */
.hud-panel {
    background: var(--surface-glass-dark);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-floating);
    border-radius: var(--radius-hud);
    color: var(--text-high-emphasis);
}

/* =========================================
   SISTEMA DE ALERTAS GLOBAIS (Modal Centralizado)
   ========================================= */

/* O Container agora ocupa a tela toda para bloquear cliques fora */
#alert-stack-layer {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    z-index: var(--z-modal); /* 900 - Fica acima de tudo */
    
    /* Centralização Perfeita */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    
    /* Efeito "Foco": Escurece o fundo e bloqueia o app */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(5px); /* Desfoca o 3D atrás */
    
    /* O container só aparece se tiver filhos (alertas) dentro */
    /* Isso é controlado automaticamente: se estiver vazio, 
       o JS remove ou o CSS :empty pode ocultar (opcional) */
}

/* Esconde o overlay se não tiver nenhum alerta (Truque CSS) */
#alert-stack-layer:empty {
    display: none;
}

/* O Alerta Individual (Mais robusto) */
.gamified-alert {
    background: var(--surface-glass-dark);
    /* Borda brilhante para chamar atenção */
    border: 1px solid var(--color-primary); 
    box-shadow: 0 0 30px rgba(0,0,0,0.8), 0 0 15px var(--color-primary-glow);
    
    border-radius: 20px;
    padding: 20px 25px; /* Mais espaçamento interno */
    min-width: 300px;   /* Tamanho mínimo para leitura */
    max-width: 90%;
    
    display: flex;
    flex-direction: column; /* Ícone em cima, botões embaixo */
    align-items: center;
    text-align: center;
    gap: 15px;
    
    color: var(--text-high-emphasis);
    pointer-events: auto;
    
    /* Animação "Pop-in" elástica */
    animation: modalPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Ícone do Alerta (Maior e no topo) */
.g-alert-icon {
    width: 48px; height: 48px;
    background: var(--surface-glass-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 5px;
}

/* Texto da Mensagem */
.gamified-alert span {
    font-size: 16px;
    line-height: 1.5;
}

/* Área dos Botões (Largura total) */
.g-alert-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1); /* Linha divisória */
    border-left: none; /* Remove a borda lateral antiga */
}

/* Botões maiores para mobile */
.g-btn {
    flex: 1; /* Botões dividem o espaço igualmente */
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-medium);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.g-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.g-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    font-weight: 700;
}

.g-btn.primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-primary-glow);
}

/* =========================================
   RPG FLOATING TEXT SYSTEM (Responsivo v2)
   ========================================= */

#rpg-text-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: var(--z-toast);
    overflow: hidden;
}

.rpg-text {
    position: absolute;
    left: 50%;
    top: 50%;
    
    /* CENTRALIZAÇÃO INTELIGENTE */
    /* Garante que o centro do elemento seja o ponto de origem */
    transform: translate(-50%, -50%);
    
    /* RESPONSIVIDADE (O Segredo) */
    /* O texto ocupa no máximo 90% da tela. Se for maior, quebra linha. */
    max-width: 90vw; 
    text-align: center;
    white-space: normal; /* Permite quebrar linha em textos longos no mobile */
    line-height: 1.2;    /* Linhas próximas para parecer um bloco único */
    
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Borda preta para leitura em qualquer fundo (Stroke CSS moderno) */
    -webkit-text-stroke: 1px black; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);

    /* TIPOGRAFIA FLUIDA (Clamp) */
    /* No celular será 14px, no PC será 20px */
    font-size: clamp(14px, 4vw, 20px);
    
    opacity: 0;
    /* Animação mais lenta (4s) para dar tempo de ler enquanto sobe */
    animation: rpgFloatUp 4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* VARIAÇÕES DE TAMANHO RESPONSIVAS */

.rpg-text.log {
    color: #f0f0f0;
    /* Mantém o padrão base */
}

.rpg-text.success {
    color: var(--color-success);
    /* Min: 18px, Ideal: 6% da tela, Max: 28px */
    font-size: clamp(18px, 6vw, 28px); 
    z-index: 10;
}

.rpg-text.warn {
    color: var(--color-warning);
    font-size: clamp(16px, 5vw, 24px);
}

.rpg-text.error {
    color: var(--color-danger);
    /* Erros são maiores: Min 22px, Max 40px */
    font-size: clamp(22px, 8vw, 40px);
    z-index: 20;
    /* Sombra vermelha extra para dramatismo */
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* ANIMAÇÃO "FUMAÇA" (Sobe alto e diminui) */
@keyframes rpgFloatUp {
    0% {
        /* Começa MINÚSCULO e um pouco abaixo */
        transform: translate(-50%, 0px) scale(0.2); 
        opacity: 0;
    }
    10% {
        /* "Pop" rápido para tamanho normal */
        transform: translate(-50%, -20px) scale(1.1); 
        opacity: 1;
    }
    20% {
        /* Acomoda no tamanho real */
        transform: translate(-50%, -30px) scale(1); 
        opacity: 1;
    }
    80% {
        /* Mantém visível enquanto sobe devagar */
        opacity: 1;
    }
    100% {
        /* SOBE MUITO (400px) e diminui (efeito distância) */
        transform: translate(-50%, -400px) scale(0.8); 
        opacity: 0;
    }
}


/* =========================================
   PAINEL HOLOSCREEN (Full Screen HUD)
   ========================================= */

#universal-panel {
    /* Ocupa a tela toda, mas flutuando */
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    
    /* Layout Flex para centralizar o "Card" interno */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Fundo Escuro que cobre o 3D (Dimmer) */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    
    /* Animação de Entrada (Fade) */
    opacity: 0;
    pointer-events: none; /* Não clica quando fechado */
    transition: opacity 0.3s ease;
}

/* ESTADO ABERTO */
#universal-panel.open {
    opacity: 1;
    pointer-events: auto;
}

/* O "CARD" PRINCIPAL (A Janela em si) */
.holoscreen-window {
        width: 100vw;
    height: 100vh;
    /* max-width: 1600px; */
    display: flex;
    flex-direction: column;
    background: rgb(14 95 57 / 95%);
    border: 1px solid var(--surface-border);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    /* border-radius: 16px; */
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#universal-panel.open .holoscreen-window {
    transform: scale(1);
}

/* CABEÇALHO DO PAINEL */
.u-panel-header {
    height: 70px;
    padding: 0 25px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(0,0,0,0.2);
}

#u-panel-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-high-emphasis);
    text-transform: uppercase;
    display: flex; align-items: center; gap: 15px;
}

/* Ícone grande ao lado do título */
#u-panel-title::before {
    content: '';
    display: block;
    width: 8px; height: 24px;
    background: var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Botão Fechar (X) Grande e Clicável */
#btn-close-panel {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-medium);
    font-size: 20px;
    transition: all 0.2s;
}
#btn-close-panel:hover {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

/* ÁREA DE CONTEÚDO (Gigante) */
#u-panel-content {
    flex: 1;
    overflow-y: auto; /* Scroll vertical */
    padding: 30px;    /* Espaço generoso */
    position: relative;
}

/* AJUSTE PARA MOBILE (Tela cheia total para ganhar pixels) */
@media (max-width: 768px) {
    .holoscreen-window {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    
    #u-panel-content {
        padding: 15px; /* Menos padding no celular */
    }
}

/* EFEITO INICIALIZAÇÃO DA PLATAFORMA */
@keyframes flicker {
  0% { opacity: 1; }
  5% { opacity: 0.8; }
  10% { opacity: 1; }
  15% { opacity: 0.3; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}
#boot-status {
    animation: flicker 2s infinite;
}