/* ================================
   Cave of the Exiles — Recriação EXATA estilo 2000s
   ================================ */

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

body {
  font-family: Verdana, Arial, sans-serif;
  background:#0d0d0d; /* preto fosco */
  color:#e8e8e8;
  line-height:1.4;
}

/* Container global */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

/* ======================
   HEADER (igual exemplo)
   ====================== */

.portal-header {
  width:100%;
  height:150px;            /* altura estilo exemplo */
  background:url("fogob.jpg") center top no-repeat;
  background-size: cover;
  border-bottom: 3px solid #550000;
  display:flex;
  align-items:center;
  padding: 0 20px;
}

/* Área esquerda (logo) */
.header-left {
  flex:1;
}

.site-title {
  font-family: Impact, sans-serif;
  font-size: 2.2rem;
  color:#ffffff;
  text-shadow: 0 0 5px #000;
}

/* Área direita (links + badge) */
.header-right {
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-link {
  text-decoration:none;
  padding:6px 10px;
  background:#4a0d0d;
  border:1px solid #1d0000;
  color:#ffdede;
  font-weight:bold;
  border-radius:3px;
}

.nav-link:hover {
  background:#5f0f0f;
  color:#fff;
}

/* 88x31 badge */
.nav-badge img {
  width:88px; 
  height:31px;
  image-rendering:pixelated;
  border:2px solid #111;
}

/* ======================
   PAINÉIS E CAIXAS
   ====================== */

/* ==== Caixas com reflexo Y2K ==== */

.panel, .box {
  position: relative;
  background: #4b0000;          /* vermelho escuro fosco */
  color: #ffffff;               /* texto branco */
  padding: 18px;
  border-radius: 6px;
  border: 2px solid #2a0000;    /* borda escura sutil */
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
  overflow: hidden;             /* importante p/ reflexo não vazar */
}

/* Reflexo / Glow Aero-Y2K */
.panel::before,
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;

  /* brilho suave igual o style aero */
  background: linear-gradient(
    145deg,
    rgba(255, 120, 120, 0.25) 0%,
    rgba(255, 0, 0, 0.06) 40%,
    rgba(0, 0, 0, 0) 70%
  );

  mix-blend-mode: screen;  /* efeito real de reflexo */
  pointer-events: none;
}

/* Animação suave estilo reflexo respirando */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.panel::before,
.box::before {
  animation: pulseGlow 5s ease-in-out infinite;
}



h2 {
  margin-bottom:8px;
  color:#ffdddd;
  font-size:1.4rem;
}

.post h3 {
  color:#ffe;
  margin-bottom:6px;
}

.post p {
  color:#ddd;
}

/* FOOTER */
.site-footer {
  padding:15px;
  text-align:center;
  color:#aaa;
  border-top:1px solid #222;
  margin-top:20px;
}