/* =====================================================
   Retro Pulse Games — Home + Header/Footer (Design)
   Importado da página de design "Retro Pulse Games Homepage".
   Paleta fixa: classic / atmosfera void / intensidade blazing.

   Carregado site-wide via main.ejs porque o header e o footer
   deste arquivo são usados em todas as páginas. Os estilos
   específicos da home têm escopo em `.rp-home`.
   ===================================================== */

:root{
  /* paleta classic (fixa) */
  --rp-cyan: 42,212,255;
  --rp-magenta: 255,43,176;
  --rp-purple: 168,85,247;
  --rp-blue: 59,109,255;
  --rp-rose: 255,59,107;
  /* atmosfera: void */
  --rp-atm-bg: radial-gradient(125% 85% at 80% 0%, #0c0c16 0%, #060610 46%, #020206 100%);
  --rp-border: rgba(120,90,220,.22);
  --rp-border-soft: rgba(120,90,220,.14);
  --rp-fontd: 'Teko','Sora','Inter',sans-serif;
  --rp-fontb: 'Sora','Inter',sans-serif;
}

/* fontes do design */
@font-face{font-family:'_rp_preload';src:local('Sora')}

@keyframes rpgFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* A home gerencia sua própria largura/padding via .rp-shell, então
   removemos o container padrão do theme.css (.site-main) só na home. */
.site-main--home{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
}

/* intensidade blazing aplicada ao casco da home */
.rp-home{
  filter:saturate(1.18) brightness(1.05);
}

/* ===== SHELL / CASCO ===== */
.rp-shell{
  max-width:1180px; margin:0 auto;
  border:1px solid var(--rp-border); border-radius:18px;
  background:linear-gradient(180deg, rgba(20,14,46,.55), rgba(8,6,22,.65));
  box-shadow:0 0 80px rgba(80,40,160,.18), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

/* ============================================================
   HEADER (site-wide) — substitui o header global antigo
   ============================================================ */
/* ═══════════════════════════════════════════════════════════
   HEADER (v12.2.0 — padrão 9GAG)
   [burger] [logo + nome*]  ...........  [tema] [avatar]
   * nome só no desktop. A navegação vive no menu do burger.
   ═══════════════════════════════════════════════════════════ */
.rp-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px;
  border-bottom:1px solid var(--rp-border-soft);
  background:var(--rp-atm-bg);
  background-color:#070611;
  backdrop-filter:blur(8px);
}
/* bloco da esquerda: burger + marca, colados */
.rp-hl{ display:flex; align-items:center; gap:14px; min-width:0; }
.rp-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.rp-brand img{ height:46px; width:auto; display:block; filter:drop-shadow(0 0 10px rgba(155,107,255,.45)); }
.rp-brand-txt{ line-height:1.15; letter-spacing:.04em; white-space:nowrap; }
.rp-brand-txt .l1{ font-family:var(--rp-fontb); font-size:20px; font-weight:800; color:#f4f5ff; display:block; }
.rp-brand-txt .l1 .w1, .rp-brand-txt .l1 .w2{ display:inline; }
.rp-brand-txt .l2{ font-size:12px; font-weight:700; letter-spacing:.32em; color:#9b6bff; text-shadow:0 0 10px rgba(155,107,255,.5); }


.rp-header-actions{ display:flex; align-items:center; gap:12px; }
.rp-btn-entrar{
  text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; font-family:var(--rp-fontb);
  color:rgb(var(--rp-cyan)); padding:10px 20px; border-radius:9px;
  border:1px solid rgba(var(--rp-cyan),.5);
  box-shadow:0 0 14px rgba(var(--rp-cyan),.18) inset, 0 0 12px rgba(var(--rp-cyan),.12);
  transition:box-shadow .18s;
}
.rp-btn-entrar:hover{ box-shadow:0 0 18px rgba(var(--rp-cyan),.35) inset, 0 0 18px rgba(var(--rp-cyan),.3); text-decoration:none; }
.rp-btn-cad{
  text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; font-family:var(--rp-fontb);
  color:#fff; padding:11px 22px; border-radius:9px;
  background:linear-gradient(90deg,#c41bd6,rgb(var(--rp-magenta)));
  box-shadow:0 0 22px rgba(var(--rp-magenta),.45); transition:box-shadow .18s;
}
.rp-btn-cad:hover{ box-shadow:0 0 34px rgba(var(--rp-magenta),.7); text-decoration:none; }

/* toggle de tema reaproveitado dentro do header novo */
.rp-header .theme-toggle{
  background:rgba(20,14,46,.5);
  border:1px solid rgba(var(--rp-cyan),.4);
  color:rgb(var(--rp-cyan));
}
.rp-header .theme-toggle:hover{ border-color:rgb(var(--rp-cyan)); }

/* user-menu (logado) — reaproveita lógica do site.js, repaginado */
.rp-header .user-menu{ position:relative; }
/* v12.2.0: o botão do perfil é APENAS o avatar (sem nome, sem caret) */
.rp-header .user-menu-btn{
  background:none; border:none; padding:0;
  display:block; line-height:0; cursor:pointer;
  border-radius:50%;
}
.rp-header .user-avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,rgb(var(--rp-cyan)),rgb(var(--rp-magenta)));
  color:#04040c; font-weight:800;
}
.rp-header .user-menu-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#0d0a22; border:1px solid var(--rp-border);
  border-radius:11px; min-width:200px; padding:6px;
  display:flex; flex-direction:column;
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  z-index:70;
}
.rp-header .user-menu-dropdown[hidden]{ display:none !important; }
.rp-header .user-menu-dropdown a, .rp-header .user-menu-dropdown button{
  display:block; padding:9px 12px; border-radius:7px; color:#cfd0e6;
  background:none; border:none; text-align:left; font:inherit; cursor:pointer; width:100%;
  text-decoration:none;
}
.rp-header .user-menu-dropdown a:hover, .rp-header .user-menu-dropdown button:hover{
  background:rgba(120,90,220,.16); color:#fff; text-decoration:none;
}
.rp-header .menu-divider{ height:1px; background:var(--rp-border-soft); margin:4px 0; }

/* burger (mobile) */
/* burger: visível em TODAS as larguras (padrão 9GAG) */
.rp-burger{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9px; flex-shrink:0;
  border:1px solid rgba(var(--rp-cyan),.45); background:rgba(20,14,46,.5);
  cursor:pointer; color:rgb(var(--rp-cyan)); padding:0;
  transition:border-color .18s, box-shadow .18s;
}
.rp-burger:hover{
  border-color:rgb(var(--rp-cyan));
  box-shadow:0 0 14px rgba(var(--rp-cyan),.28);
}
.rp-burger[aria-expanded="true"]{
  background:rgba(var(--rp-cyan),.14);
  box-shadow:0 0 14px rgba(var(--rp-cyan),.3);
}

/* ── avatar do perfil (só a imagem, sem nome) ── */
.rp-avatar{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; display:block;
  border:2px solid rgba(var(--rp-cyan),.5);
  background:#0d0a22;
  transition:border-color .18s, box-shadow .18s;
}
.rp-avatar.sm{ width:30px; height:30px; border-width:1.5px; }
.rp-avatar-link{ display:block; line-height:0; border-radius:50%; }
.rp-avatar-link:hover .rp-avatar,
.user-menu-btn:hover .rp-avatar{
  border-color:rgb(var(--rp-cyan));
  box-shadow:0 0 14px rgba(var(--rp-cyan),.45);
}
/* cabeçalho do dropdown: avatar + nickname */
.rp-menu-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 8px;
}
.rp-menu-nick{
  font-family:var(--rp-fontb); font-size:14px; font-weight:700;
  color:#f4f5ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* mobile nav (dropdown do burger) */
.rp-mobnav{ display:none; flex-direction:column; gap:4px; padding:14px 20px 18px;
  border-bottom:1px solid var(--rp-border-soft); background:rgba(10,8,26,.92); }
.rp-mobnav.open{ display:flex; }
.rp-mobnav a{ color:#cfd0e6; text-decoration:none; padding:11px 6px; font-size:14px;
  font-weight:600; letter-spacing:.06em; border-bottom:1px solid rgba(120,90,220,.1); font-family:var(--rp-fontb); }
.rp-mobnav a:first-child{ color:#fff; }
.rp-mobnav a:last-child{ border-bottom:none; }

/* ============================================================
   HOME (escopo .rp-home)
   ============================================================ */
.rp-home{
  font-family:var(--rp-fontb);
  background:var(--rp-atm-bg);
  color:#e8e9f3;
  padding:26px 22px 26px;
  min-height:60vh;
}

/* ===== HERO ===== */
.rp-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:center;
  padding:60px 44px 70px; position:relative;
}
.rp-hero-copy{ position:relative; z-index:2; }
.rp-h1{
  font-family:var(--rp-fontd); font-size:64px; line-height:.98; font-weight:600;
  letter-spacing:.005em; margin-bottom:24px;
}
.rp-h1 span{ display:block; }
.rp-h1 .t-white{ color:#f6f7ff; text-shadow:0 0 18px rgba(160,170,255,.18); }
.rp-h1 .t-magenta{ color:rgb(var(--rp-magenta)); text-shadow:0 0 22px rgba(var(--rp-magenta),.55); }
.rp-h1 .t-purple{ color:rgb(var(--rp-purple)); text-shadow:0 0 22px rgba(var(--rp-purple),.55); }
.rp-h1 .t-cyan{ color:rgb(var(--rp-cyan)); text-shadow:0 0 22px rgba(var(--rp-cyan),.55); }
.rp-h1 .inline{ display:inline; }
.rp-lead{ font-size:16.5px; line-height:1.65; color:#a7a8c6; max-width:430px; margin-bottom:34px; }

.rp-actions{ display:flex; gap:16px; }
.rp-cta-primary{
  text-decoration:none; display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:700; letter-spacing:.05em; color:#fff;
  padding:15px 28px; border-radius:11px;
  background:linear-gradient(90deg,#c41bd6,rgb(var(--rp-magenta)));
  box-shadow:0 0 30px rgba(var(--rp-magenta),.5); transition:box-shadow .18s;
}
.rp-cta-primary:hover{ box-shadow:0 0 44px rgba(var(--rp-magenta),.75); text-decoration:none; }
.rp-cta-ghost{
  text-decoration:none; display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:700; letter-spacing:.05em; color:rgb(var(--rp-cyan));
  padding:15px 28px; border-radius:11px;
  border:1px solid rgba(var(--rp-cyan),.5);
  box-shadow:0 0 16px rgba(var(--rp-cyan),.12) inset; transition:box-shadow .18s;
}
.rp-cta-ghost:hover{ box-shadow:0 0 22px rgba(var(--rp-cyan),.32) inset; text-decoration:none; }

/* arte do controle */
.rp-hero-art{
  position:relative; height:420px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; width:100%; max-width:578px;
  justify-self:center;
}
.rp-hero-art .rp-hero-bg{
  position:absolute; inset:0;
  background:url('/img/home/hero_fundo.png') center/cover no-repeat;
  -webkit-mask:linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to left, transparent 0%, #000 12%), linear-gradient(to bottom, transparent 0%, #000 10%), linear-gradient(to top, transparent 0%, #000 10%);
  -webkit-mask-composite:source-in, source-in, source-in;
  mask:linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to left, transparent 0%, #000 12%), linear-gradient(to bottom, transparent 0%, #000 10%), linear-gradient(to top, transparent 0%, #000 10%);
  mask-composite:intersect;
}
.rp-hero-art img{
  position:relative; z-index:2; width:74%; max-width:340px; height:auto;
  margin-top:-26px; animation:rpgFloat 5s ease-in-out infinite;
}

/* ===== SECTION TITLES (com traços laterais) ===== */
.rp-sec-head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:34px; }
.rp-sec-head h2{ font-family:var(--rp-fontb); font-size:24px; font-weight:800; letter-spacing:.14em; color:#f4f5ff; text-align:center; }
.rp-dash{ height:2px; width:90px; border-radius:2px; }
.rp-dash.l{ background:linear-gradient(90deg,transparent,rgb(var(--rp-cyan))); }
.rp-dash.r{ background:linear-gradient(90deg,rgb(var(--rp-magenta)),transparent); }
.rp-dash.lp{ background:linear-gradient(90deg,transparent,rgb(var(--rp-purple))); }

/* ===== JOGOS ===== */
.rp-gsec{ padding:6px 44px 56px; }
.rp-games{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
/* Vitrine com poucos jogos: centraliza os cards com largura confortável. */
.rp-games--featured{
  grid-template-columns:repeat(2, minmax(0, 260px));
  justify-content:center;
  gap:24px;
}
.rp-card{
  border:1px solid var(--rp-border); border-radius:14px;
  background:linear-gradient(180deg, rgba(28,20,60,.45), rgba(10,8,26,.55));
  padding:22px 18px 20px; transition:all .2s; text-decoration:none; color:inherit;
  display:block;
}
a.rp-card:hover{
  border-color:rgba(var(--rp-cyan),.55);
  box-shadow:0 0 28px rgba(var(--rp-cyan),.18); transform:translateY(-4px); text-decoration:none;
}
a.rp-card.accent-purple:hover{ border-color:rgba(var(--rp-purple),.55); box-shadow:0 0 28px rgba(var(--rp-purple),.2); }
.rp-card-img{ height:120px; display:flex; align-items:center; justify-content:center; }
.rp-card-img img{ max-width:100%; max-height:120px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(var(--rp-magenta),.35)); }
.rp-card.accent-purple .rp-card-img img{ filter:drop-shadow(0 0 12px rgba(var(--rp-purple),.4)); }
.rp-card.accent-cyan .rp-card-img img{ filter:drop-shadow(0 0 12px rgba(var(--rp-cyan),.4)); }
.rp-card-title{ font-size:15px; font-weight:700; letter-spacing:.04em; color:#f4f5ff; margin-top:10px; }
.rp-card-desc{ font-size:12px; line-height:1.45; color:#9092b6; margin-top:6px; }

/* card "em breve" (placeholder pontilhado) */
.rp-card-soon{
  border:1px dashed rgba(120,90,220,.3); border-radius:14px;
  background:linear-gradient(180deg, rgba(20,14,44,.35), rgba(8,6,22,.45));
  padding:22px 18px 20px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; min-height:188px;
}
.rp-soon-circle{
  width:54px; height:54px; border-radius:50%;
  border:1.5px dashed rgba(var(--rp-purple),.5);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  box-shadow:0 0 18px rgba(var(--rp-purple),.15) inset; color:rgb(var(--rp-purple));
}
.rp-card-soon.cyan .rp-soon-circle{ border-color:rgba(var(--rp-cyan),.5); box-shadow:0 0 18px rgba(var(--rp-cyan),.15) inset; color:rgb(var(--rp-cyan)); }
.rp-soon-label{ font-size:13px; font-weight:600; letter-spacing:.04em; color:#a3a4c4; text-align:center; line-height:1.4; }

.rp-allgames{ display:flex; justify-content:center; margin-top:30px; }
.rp-allgames a{
  text-decoration:none; display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; color:rgb(var(--rp-cyan));
  padding:13px 26px; border-radius:10px; border:1px solid rgba(var(--rp-cyan),.45);
  box-shadow:0 0 16px rgba(var(--rp-cyan),.12) inset; transition:box-shadow .18s; font-family:var(--rp-fontb);
}
.rp-allgames a:hover{ box-shadow:0 0 22px rgba(var(--rp-cyan),.3) inset; text-decoration:none; }

/* ===== FEATURES ===== */
.rp-fsec{ padding:48px 44px 60px; border-top:1px solid var(--rp-border-soft);
  background:linear-gradient(180deg, rgba(10,8,26,0), rgba(14,9,34,.5)); }
.rp-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.rp-feat img{ width:80px; height:80px; margin:0 auto 18px; display:block; }
.rp-feat-title{ font-size:15px; font-weight:700; letter-spacing:.06em; color:#f4f5ff; }
.rp-feat p{ font-size:13px; line-height:1.55; color:#9092b2; margin-top:9px; }

/* ============================================================
   FOOTER (site-wide) — substitui o footer global antigo
   ============================================================ */
.rp-footer{
  padding:44px 44px 30px; border-top:1px solid var(--rp-border-soft);
  background:#06051a;
}
.rp-footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; }
.rp-foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; text-decoration:none; }
.rp-foot-brand img{ height:40px; width:auto; display:block; filter:drop-shadow(0 0 8px rgba(155,107,255,.4)); }
.rp-foot-brand .l1{ font-family:var(--rp-fontb); font-size:17px; font-weight:800; color:#f4f5ff; }
.rp-foot-brand .l2{ font-size:11px; font-weight:700; letter-spacing:.3em; color:#9b6bff; }
.rp-foot-tag{ font-size:13px; line-height:1.6; color:#8284a4; max-width:230px; }
.rp-foot-col-h{ font-size:12px; font-weight:700; letter-spacing:.16em; color:#7d7ea0; margin-bottom:16px; }
.rp-foot-links{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.rp-foot-links a{ color:#a9aac6; text-decoration:none; transition:color .15s; }
.rp-foot-links a:hover{ color:rgb(var(--rp-cyan)); text-decoration:none; }
.rp-foot-links.magenta a:hover{ color:rgb(var(--rp-magenta)); }
.rp-foot-social{ display:flex; gap:12px; flex-wrap:wrap; }
.rp-foot-social a{
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(120,90,220,.3);
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .18s;
}
.rp-foot-social a:hover{ border-color:#7c3aed; box-shadow:0 0 14px rgba(124,58,237,.4); }
.rp-foot-copy{ max-width:1180px; margin:34px auto 0; padding-top:20px;
  border-top:1px solid rgba(120,90,220,.12); text-align:right; }
.rp-foot-copy span{ font-size:12px; color:#6b6c88; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  /* v12.2.0: nav horizontal nao existe mais; burger ja e' sempre visivel. */
  .rp-hero{ grid-template-columns:1fr !important; gap:24px !important; padding:40px 30px 46px !important; }
  .rp-hero-art{ height:300px !important; order:-1; max-width:100%; }
  .rp-games--featured{ grid-template-columns:repeat(2, minmax(0, 240px)) !important; }
}
@media (max-width:760px){
  .rp-shell{ border-radius:14px !important; }
  .rp-header{ padding:16px 16px !important; gap:10px !important; }
  .rp-gsec, .rp-fsec{ padding-left:20px !important; padding-right:20px !important; }
  .rp-games, .rp-games--featured{ grid-template-columns:repeat(2,1fr) !important; justify-content:stretch !important; }
  .rp-features{ grid-template-columns:repeat(2,1fr) !important; gap:26px 14px !important; }
  .rp-footer-grid{ grid-template-columns:1fr 1fr !important; gap:26px !important; }
  .rp-h1{ font-size:42px !important; }
  .rp-actions{ flex-wrap:wrap !important; }
  .rp-actions a{ flex:1 1 auto; justify-content:center; }
  .rp-foot-copy{ text-align:left !important; }

  /* (1) No mobile, a arte do hero (controle + fundo) não é exibida. */
  .rp-hero-art{ display:none !important; }
  .rp-hero{ padding-top:30px !important; }

  /* (3) Só o botão ENTRAR (pink) permanece no header; sem CADASTRE-SE. */
  .rp-btn-entrar{ display:none !important; }
  .rp-btn-cad{ display:inline-flex !important; padding:9px 16px !important; font-size:12.5px !important; }

  /* v12.2.0 (padrao 9GAG): no mobile fica so' o logo do controle —
     o nome do site aparece apenas no desktop. */
  .rp-brand-txt{ display:none !important; }
  .rp-brand{ gap:0; }
  .rp-brand img{ height:36px; }
  .rp-header{ padding:10px 14px !important; gap:10px !important; }
  .rp-hl{ gap:10px; }
}
@media (max-width:440px){
  .rp-home{ padding-left:12px !important; padding-right:12px !important; }
  .rp-hero{ padding:28px 20px 34px !important; }
  .rp-games, .rp-games--featured{ grid-template-columns:1fr !important; }
  .rp-footer-grid{ grid-template-columns:1fr !important; }
  .rp-h1{ font-size:38px !important; }
  .rp-brand img{ height:34px; }
  .rp-avatar{ width:34px; height:34px; }
  .rp-burger{ width:38px; height:38px; }
}