/*
Theme Name: VORTEX OS COMPLETE
Theme URI: https://vortexgame.online
Author: Vortex Engine Team
Description: Versão unificada definitiva. Estética Game_OLD, Village Settlement e Character Profile integrados em um tema WordPress purista e estável.
Version: 7.0.0
License: GNU General Public License v2 or later
Text Domain: vortex-armoured
*/

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Cinzel:wght@700&family=MedievalSharp&display=swap');

/* Unified Design System */
:root {
  --color-bg: #0a0a0a;
  --color-bg-panel: #1a1a2e; /* Deep blue from Village/Profile */
  --color-gold: #f7d44a; /* Classic Gold */
  --color-gold-light: #f1c40f;
  --color-text: #e0c097; /* Antique Text */
  --color-border: #4a3728; /* Medieval Brown */
  --pixel-border: 4px solid #000;
  --pixel-shadow: 6px 6px 0px #000;
  --font-primary: 'MedievalSharp', cursive;
  --font-secondary: 'Cinzel', serif;
  --font-pixel: 'Press Start 2P', monospace;
  --bg-texture: url('assets/old_theme/stone_texture.png');
  
  /* Alturas do header e footer para cálculo do conteúdo */
  --header-height: 65px;
  --footer-height: 35px;
}

/* Global Reset & Body */
* {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  box-sizing: border-box;
}

body {
  background: var(--bg-texture) no-repeat center center fixed;
  background-size: cover;
  color: var(--color-text);
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  font-size: 18px;
  
  /* Layout Flexível para Footer Fixo */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 50% Dark Overlay Layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* UI Layer Base - AGORA ROLÁVEL */
.ui-layer {
  position: relative;
  z-index: 10;
  flex: 1; /* Ocupa todo espaço disponível */
  margin-top: calc(var(--header-height) + 15px); /* Espaço para o header fixo */
  margin-bottom: calc(var(--footer-height) + 15px); /* Espaço para o footer fixo */
  padding-bottom: 20px;
}

/* Components: Panels & Containers */
.ox-panel, .v-panel, .vx-card, .vx-ledger {
  background: var(--color-bg-panel) !important;
  border: var(--pixel-border) !important;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: var(--pixel-shadow) !important;
  position: relative;
  z-index: 2;
}

.panel-title, .v-title, .vx-ledger h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--color-gold) !important;
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

/* Glassmorphism Utility */
.ox-glass {
  background: rgba(26, 26, 46, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* ============================================ */
/* HEADER FIXO - SEMPRE NO TOPO                 */
/* ============================================ */
.ox-header, .vx-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #000 !important;
  border-bottom: var(--pixel-border) !important;
  padding: 10px 0;
  z-index: 10000 !important;
  box-shadow: 0 5px 15px #000;
}

/* ============================================ */
/* FOOTER FIXO - SEMPRE NO FUNDO               */
/* ============================================ */
.vx-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 35px;
  background: #000;
  border-top: var(--pixel-border);
  z-index: 10000 !important;
  text-align: center;
  color: #888;
  font-family: "VT323";
  line-height: 35px;
}

/* ============================================ */
/* AJUSTE PARA ADMIN BAR DO WORDPRESS          */
/* ============================================ */
.admin-bar .ox-header,
.admin-bar .vx-header {
  top: 32px !important;
}

.admin-bar .ui-layer {
  margin-top: calc(var(--header-height) + 15px + 32px);
}

/* ============================================ */
/* AJUSTE PARA MOBILE                          */
/* ============================================ */
@media (max-width: 768px) {
  :root {
    --header-height: 55px;
  }
  
  .ox-header, .vx-header {
    padding: 8px 0;
  }
  
  .ui-layer {
    margin-top: calc(var(--header-height) + 10px);
    margin-bottom: calc(var(--footer-height) + 10px);
    padding-bottom: 15px;
  }
  
  .admin-bar .ui-layer {
    margin-top: calc(var(--header-height) + 10px + 46px);
  }
}

/* ============================================ */
/* AJUSTE PARA ADMIN BAR MOBILE                */
/* ============================================ */
@media (max-width: 782px) {
  .admin-bar .ox-header,
  .admin-bar .vx-header {
    top: 46px !important;
  }
}

/* Container */
.vx-container { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 0 15px; 
}

.vx-top-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

/* Navegação */
.vx-nav { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
}

/* Botões */
.vx-btn, .ox-button, .v-btn-up, .vx-nav li a {
  background: linear-gradient(180deg, #34495e 0%, #2c3e66 100%) !important;
  color: #f7d44a !important;
  border: 2px solid #000 !important;
  padding: 8px 15px !important;
  font-family: var(--font-pixel);
  font-weight: bold;
  font-size: 10px !important;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 
    inset 2px 2px 0px rgba(255, 255, 255, 0.2), 
    inset -2px -2px 0px rgba(0, 0, 0, 0.4),
    3px 3px 0 #000 !important;
  text-shadow: 1px 1px 0 #000;
}

.vx-btn:active, .ox-button:active, .v-btn-up:active, .vx-nav li a:active {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}

/* Shine Animation */
@keyframes vx-shine { 
  0% { filter: brightness(1); } 
  100% { filter: brightness(1.4); } 
}
.vx-btn:hover, .ox-button:hover, .v-btn-up:hover, .vx-nav li a:hover {
  animation: vx-shine 0.6s infinite alternate;
  background: linear-gradient(180deg, #45627e 0%, #344c7a 100%) !important;
}

/* Menu Icons */
.vx-nav li a::before { 
  content: '◈ '; 
  font-size: 8px; 
  color: var(--color-gold); 
  margin-right: 5px; 
  vertical-align: middle; 
}

/* Dropdown */
.vx-dropdown { 
  position: relative; 
  display: inline-block; 
}

.vx-dropdown-content {
  display: none; 
  position: absolute; 
  background-color: var(--color-bg-panel);
  min-width: 180px; 
  box-shadow: var(--pixel-shadow); 
  border: var(--pixel-border);
  top: 100%; 
  right: 0; 
  z-index: 10001;
}

.vx-dropdown-content a {
  color: #ddd !important; 
  padding: 12px !important; 
  text-decoration: none !important; 
  display: block !important;
  font-family: var(--font-pixel); 
  font-size: 9px !important; 
  border-bottom: 2px solid #000 !important;
  background: transparent !important; 
  box-shadow: none !important;
}

.vx-dropdown-content a:hover { 
  background: #2c3e66 !important; 
}

.vx-dropdown:hover .vx-dropdown-content { 
  display: block; 
}

/* Attribute Cards & Ledger styles */
.vx-attr-card { 
  background: #000; 
  border: 2px solid #333; 
  padding: 12px; 
  margin-bottom: 12px; 
}

.vx-attr-name { 
  font-family: var(--font-pixel); 
  font-size: 10px; 
  color: var(--color-gold); 
  display: inline-block; 
}

.vx-attr-val { 
  font-family: var(--font-pixel); 
  font-size: 14px; 
  color: #fff; 
  float: right; 
}

.vx-attr-bar-bg { 
  background: #222; 
  border: 2px solid #fff; 
  height: 8px; 
  margin-top: 8px; 
  clear: both; 
}

.vx-attr-fill { 
  height: 100%; 
  background: var(--color-gold); 
  width: 0%; 
  transition: width 0.3s; 
}

/* Scrollbar */
::-webkit-scrollbar { 
  width: 10px; 
  height: 10px; 
}

::-webkit-scrollbar-track { 
  background: #000; 
}

::-webkit-scrollbar-thumb { 
  background: var(--color-gold); 
  border: 3px solid #000; 
}

/* Centralization and Responsiveness */
.v-main { 
  margin: 0 auto !important; 
  max-width: 1000px; 
  padding: 20px; 
  display: block; 
}

/* Garantir que o conteúdo não fique atrás do header */
.site-content, #primary, #content, main {
  position: relative;
  z-index: 10;
}

/* Ajuste para telas muito pequenas */
@media (max-width: 480px) {
  :root {
    --header-height: 50px;
  }
  
  .ui-layer {
    margin-top: calc(var(--header-height) + 8px);
    margin-bottom: calc(var(--footer-height) + 8px);
  }
  
  .vx-btn, .ox-button, .v-btn-up, .vx-nav li a {
    font-size: 8px !important;
    padding: 6px 10px !important;
  }
}