:root{
  --bg:#0b0b10; --panel:#101116; --ink:#e9edf3; --muted:#9aa3b2;
  --grad-red: linear-gradient(135deg, #d10000ff, #eb0023ff 60%, #f73029ff);
  --gold:#fbbf24;
  --shadow:0 20px 40px rgba(0,0,0,.45);
  --radius:22px;
  --header-h:64px;
  --announcement-h:70px; /* Nova variável para altura da barra de anúncio */
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(70% 50% at 10% -10%, rgba(239,68,68,.16), transparent 60%),
    radial-gradient(70% 50% at 90% -20%, rgba(168,85,247,.12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  /* Ajuste no padding-top para acomodar o header E a barra de anúncio */
  padding-top: var(--header-h);
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}

/* ===== HEADER ===== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  backdrop-filter:blur(10px) saturate(140%);
  background:linear-gradient(180deg,rgba(10,10,14,.9),rgba(10,10,14,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:transform .28s ease, opacity .28s ease, box-shadow .28s ease;
  will-change:transform;
    box-shadow: 0 0 10px rgba(239,68,68,.65), inset 0 1px 0 rgba(255,255,255,.05); /* Brilho na parte superior */

}
.header.hide{ transform:translateY(-100%); opacity:.98; pointer-events:none; }
.header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
.nav{display:flex;align-items:center;gap:14px;padding:12px 0}

.hamburger{
  width:52px;height:52px;border-radius:14px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12); background:#12131a; color:#fff;
  font-size:26px; display:grid; place-items:center; cursor:pointer;
}
.hamburger:hover{background:#181a22}
.logo{display:flex;align-items:center;gap:.9rem;font-weight:800;letter-spacing:.4px;cursor:pointer}
.logo-badge{width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff8,#fff0 42%),var(--gold);
  box-shadow:0 6px 18px #0007}
.logo-text{font-size:1.18rem}

/* BUSCA */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.search{
  display:flex;gap:10px;align-items:center;background:#12131a;
  border:1px solid rgba(255,255,255,.08);border-radius:999px;
  padding:8px 12px;flex:1 1 auto;min-width:0
}
.search input{
  background:transparent;border:none;color:var(--ink);outline:none;width:100%;min-width:0
}
.search button{
  border:none;background:var(--grad-red);color:#0c0d12;border-radius:12px;
  padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-weight:800;flex:0 0 auto
}
.search button svg{width:18px;height:18px;display:block;fill:#0a0a0a}
.search .btn-label{display:inline}

/* BARRA DE ANÚNCIO (NOVO ESTILO) */
.announcement-bar{
  .announcement-bar {
  position:relative;
  top:0;
  margin-top:10px;
} /* altura exata do header */
  left:0;
  right:0;
  z-index:39;
  padding:8px 10px;
}
  /* height:var(--announcement-h); */
  background:rgba(10,10,14,.8);
  backdrop-filter:blur(5px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:grid; place-items:center;
  text-align:center;
  padding:8px 10px;
  line-height:1.4;
  font-weight:700;
  font-size:clamp(0.9rem, 2vw, 1rem);
  /* box-shadow: 0 0 10px rgba(239,68,68,.65), inset 0 1px 0 rgba(255,255,255,.05); Brilho na parte superior */
}
.announcement-bar p{margin:0}
.announcement-bar span{display:block}
.announcement-bar .highlight{
  background:linear-gradient(90deg, #ef4444, #fb7185, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.7));
}
.announcement-bar .emoji-svg{
  width:1em; height:1em; display:inline-block; vertical-align:-0.125em; margin-right:4px;
  fill: #ff9a9a; /* Cor para o fogo */
}
.announcement-bar .emoji-svg.rocket{
  fill: #8096ff; /* Cor para o foguete */
}


/* SIDEBAR */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:39}
.sidebar{
  position:fixed;z-index:41;top:0;left:0;width:min(310px,86vw);height:100%;
  background:#0e0f14;border-right:1px solid rgba(255,255,255,.06);
  transform:translateX(-102%);transition:transform .25s ease;
  display:flex;flex-direction:column;max-width:100vw
}
.sidebar.open{transform:translateX(0)}
.sidebar-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.logo-mini{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8,#fff0 42%),#fbbf24}
.close-side{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#15161d;color:#fff;cursor:pointer}
.side-nav{padding:10px 6px 20px;overflow:auto}
.side-nav a, .side-nav summary{
  display:flex; align-items:center;
  padding:12px 14px;border-radius:12px;margin:4px 8px;color:#e7eaf0;font-weight:700
}
.side-nav a:hover{background:rgba(255,255,255,.06)}
.side-nav hr{border:none;height:1px;margin:10px 8px;background:rgba(255,255,255,.08)}
.side-nav details{margin:4px 8px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.side-nav summary{list-style:none;cursor:pointer;font-weight:800}
.side-nav summary::-webkit-details-marker{display:none}
.side-nav .sub{padding:6px 8px 12px;display:grid}
.side-nav .sub a{margin:2px 8px; padding-left: 20px;} /* Ajuste para sub-itens */

.side-nav svg{
  width:20px;height:20px;fill:currentColor;opacity:.75;margin-right:10px;flex-shrink:0
}
/* Altera a cor dos SVGs para um gradiente ou destaque */
.side-nav details svg, .side-nav > a:not(:last-of-type) svg {
    color: #ef4444; /* Cor para destaque, similar ao gradiente */
}
.side-nav a:last-of-type svg {
    color: #fbbf24; /* Cor amarela para "Contato" e "Direitos" */
}
.side-nav a:nth-last-child(2) svg{
    color: #a855f7; /* Cor roxa para "Admin" */
}


/* SECTION / GRID / CARDS */
section{
  padding:4px 0 28px 0 !important;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px !important;
  margin-top:0 !important;
}
.section-title{font-size:clamp(1.3rem,2.8vw,1.8rem);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{
  position:relative;width:100%;aspect-ratio:2/3;border-radius:var(--radius);
  background:#0f1016;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);isolation:isolate
}
.card::before{
  content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);
  background:conic-gradient(from 0deg,#0000 0 40deg,rgba(239,68,68,.95) 140deg,rgba(251,113,133,.95) 200deg,rgba(168,85,247,.95) 260deg,#0000 320deg 360deg);
  animation:spin 8s linear infinite;z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px
}
@keyframes spin{to{transform:rotate(1turn)}}
.card img,.card video{width:100%;height:100%;object-fit:cover;filter:brightness(.88);transition:transform .35s ease,filter .35s ease;display:block}
.card:hover img,.card:hover video{transform:scale(1.03);filter:brightness(.98)}
.card .fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 15%,rgba(0,0,0,0) 55%)}
.info{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:6px}
.name{font-weight:800;font-size:1.2rem;text-shadow:0 2px 12px #000a}
.handle{color:var(--muted);font-size:.92rem}
.stats{display:flex;gap:14px;align-items:center;color:#ff9aa7;font-weight:700;font-size:.9rem;text-shadow:0 2px 12px #000a}
.stat{display:inline-flex;align-items:center;gap:6px}
.stat i{font-style:normal;opacity:.9}
.badge-ver{position:absolute;left:12px;top:12px;padding:7px 12px;border-radius:999px;background:var(--grad-red);color:#0c0d12;font-weight:900;letter-spacing:.2px;box-shadow:0 10px 24px rgba(239,68,68,.35); cursor:pointer;}
.card:hover .badge-ver{transform:translateY(-1px)}
.no-results{display:none;color:var(--muted);margin-top:10px}
.no-results.show{display:block}

/* Paginação */
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:28px;flex-wrap:wrap}
.pager button{border:1px solid rgba(255,255,255,.12);background:#12131a;color:#e9edf3;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:800;min-width:46px}
.pager button[disabled]{opacity:.5;cursor:not-allowed}
.pager .active{background:var(--grad-red);color:#0c0d12;border-color:transparent}

/* MOBILE */
@media (max-width:640px){
  /* Reduz a altura da barra de anúncio no mobile */
  :root{ --announcement-h:60px; }
  body{ padding-top: calc(var(--header-h) + 10px); }
  .nav{flex-wrap:wrap;gap:10px;padding:10px 0}
  .header-actions{order:2;width:100%}
  .logo-badge{width:40px;height:40px}
  .logo-text{font-size:1.08rem}
  .search{width:100%;border-radius:12px;background:#1a1b22;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 15px rgba(239,68,68,.25);padding:8px 10px}
  .search input{font-size:16px;color:#fff;padding:12px 8px}
  .search button{width:44px;height:40px;padding:0;border-radius:10px;justify-content:center;box-shadow:0 0 12px rgba(239,68,68,.35)}
  .search .btn-label{display:none}
}
.announcement-bar {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
}

.search-wrapper {
  position: relative;
  margin-top: 20px;
  margin-bottom: 16px;
}

/* ===== AJUSTES DA ANNOUNCEMENT BAR E BARRA DE BUSCA ===== */

.announcement-bar {
  text-align: center;
  padding-top: 16px;
  padding-bottom: 20px;
}

.announce-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
}

.announce-sub {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  color: #c9ced6;
}

.search-wrapper {
  margin-top: 18px;
}

.search-wrapper .container {
  display: flex;
  justify-content: center;
}

.search-wrapper .search {
  width: 100%;
  max-width: 480px;
}