/* ========= /wiki/assets/wiki.css ========= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;700&family=Teko:wght@600;700&display=swap');

:root{
  --red1:#ff1f1f; --red2:#c40000; --white:#fff; --black:#000;
  --bg:#0a0a0a; --card:#121212; --card-border:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06); --glass-stroke:rgba(255,255,255,.18);
  --mx:50vw; --my:40vh;
}

/* Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',sans-serif; color:var(--white); background:var(--bg);
  min-height:100dvh; overflow-x:hidden; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background-image:
    url("https://www.transparenttextures.com/patterns/concrete-wall.png"),
    radial-gradient(circle 52vmax at var(--mx) var(--my), rgba(255,31,31,.14), transparent 60%),
    radial-gradient(80vmax circle at 80% -10%, rgba(138,43,226,.12), transparent 70%);
  background-blend-mode:normal,screen,screen; opacity:.95;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--card-border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--white)}
.brand h1{
  font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:2px;
  background:linear-gradient(45deg,var(--red1),var(--red2)); -webkit-background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,45,45,.35);
}
.top-actions{display:flex; gap:.5rem; align-items:center;}
.lang-chip{
  background:rgba(255,255,255,.07); color:#ddd; border:1px solid var(--card-border);
  padding:.35rem .6rem; border-radius:999px; font-size:.8rem; cursor:pointer; transition:.2s;
}
.lang-chip.active, .lang-chip:hover{background:var(--red2); color:#fff; border-color:transparent}

/* Hero */
.hero{max-width:1100px; margin:48px auto 24px; padding:0 18px}
.hero-card{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--glass-stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px); padding:28px;
}
.hero-decor{ position:absolute; inset:-20%; z-index:-1; pointer-events:none; }
.hero-decor::before, .hero-decor::after{
  content:""; position:absolute; border-radius:50%; filter: blur(40px); opacity:.22;
}
.hero-decor::before{
  width:46vmax; height:46vmax; left:-10%; top:-14%;
  background: radial-gradient(closest-side, rgba(255,31,31,.55), transparent 65%);
  transform: translate(calc((var(--mx) - 50vw)/35), calc((var(--my) - 50vh)/35));
}
.hero-decor::after{
  width:38vmax; height:38vmax; right:-8%; bottom:-12%;
  background: radial-gradient(closest-side, rgba(138,43,226,.45), transparent 65%);
  transform: translate(calc((var(--mx) - 50vw)/45), calc((var(--my) - 50vh)/45));
}
.hero-title h2{
  font-family:'Bebas Neue',sans-serif; letter-spacing:2px;
  font-size:clamp(2.2rem, 7vw, 4.2rem); line-height:1; margin-bottom:.6rem;
  background:linear-gradient(45deg,var(--red1),var(--red2)); -webkit-background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(255,45,45,.35);
}
.hero-title p{color:#d6d6d6; font-size:1.05rem}

/* Badges & Buttons */
.hero-badges{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.8rem}
.badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .7rem; border-radius:999px;
  border:1px solid var(--card-border); background:rgba(0,0,0,.35); color:#eee; font-weight:700; font-size:.82rem;
}
.badge.soon{border-color:rgba(255,45,45,.35); background:linear-gradient(180deg, rgba(255,45,45,.22), rgba(0,0,0,.35))}
.badge ion-icon{font-size:1rem}

.hero-actions{display:flex; gap:.7rem; margin-top:1rem; flex-wrap:wrap}
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  color:#fff; border:1px solid var(--card-border); border-radius:10px; padding:.8rem 1rem;
  font-weight:800; text-transform:uppercase; font-size:.86rem; letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.5); border-color:#fff1}
.btn.primary{background:linear-gradient(135deg, var(--red2), var(--red1))}
.btn.discord{background:linear-gradient(135deg, #5865F2, #4854c7)}
.btn.rules{background:linear-gradient(135deg, #2196F3, #186fc1)}
.btn::after{
  content:""; position:absolute; inset:-35% -15%; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  animation:shine 3.6s linear infinite;
}
@keyframes shine{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(120%) rotate(18deg)}}

/* Busca */
.search-wrap{margin-top:18px}
.search{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; border-radius:12px;
  background:rgba(0,0,0,.45); border:1px solid var(--card-border);
}
.search input{flex:1; background:transparent; border:0; outline:none; color:#eee; font-size:.98rem}
.search .hint{font-size:.8rem; color:#aaa}

/* Grid de tópicos */
.grid{
  max-width:1100px; margin:18px auto 60px; padding:0 18px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;
}
.grid a.topic{ text-decoration:none; color:inherit; display:block; }
.topic{
  position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--card-border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:16px; display:flex; flex-direction:column; gap:.4rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  will-change:transform;
}
.topic:hover{transform:translateY(-4px); border-color:#fff2; box-shadow:0 12px 28px rgba(0,0,0,.5)}
.topic::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(500px 120px at 10% 10%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode:screen;
}
.topic .icon{font-size:1.6rem; color:var(--red1)}
.topic h3{
  font-family:'Teko','Bebas Neue',sans-serif; font-weight:700; letter-spacing:.5px;
  font-size:1.6rem; line-height:1.05; text-transform:uppercase;
}
.topic p{color:#cfcfcf; font-size:.95rem}
.tag{
  align-self:flex-start; margin-top:auto; font-size:.78rem;
  background:rgba(0,0,0,.55); border:1px solid var(--card-border); color:#ddd;
  padding:.28rem .55rem; border-radius:999px; display:inline-flex; gap:.4rem; align-items:center;
}
.tag.locked{border-color:rgba(255,45,45,.45); color:#ffcdcd; background:linear-gradient(180deg, rgba(255,45,45,.14), rgba(0,0,0,.4))}
.tag ion-icon{font-size:.95rem}

/* Footer */
.footer{
  border-top:1px solid var(--card-border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
  color:#bdbdbd; text-align:center; padding:28px 18px 40px; font-size:.92rem;
}

/* ====== Logo / Parallax (usado em páginas internas) ====== */
.hero-visual{ position:relative; aspect-ratio:1/1; max-width:420px; margin-inline:auto; display:grid; place-items:center; isolation:isolate; }
.logo-wrap{
  position:relative; width:88%; aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; display:grid; place-items:center;
  filter: drop-shadow(0 8px 22px rgba(255,31,31,.25));
  transform: translate(calc((var(--mx) - 50vw)/40), calc((var(--my) - 50vh)/40));
  transition: filter .25s ease;
}
.logo-wrap:hover{ filter: drop-shadow(0 10px 28px rgba(255,31,31,.35)); }
.logo-wrap::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,31,31,.0) 0%,
      rgba(255,31,31,.65) 20%,
      rgba(138,43,226,.6) 35%,
      rgba(255,255,255,.0) 55%,
      rgba(255,31,31,.0) 100%);
  filter: blur(6px);
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.logo-wrap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,.08), transparent 70%);
  border:1px solid rgba(255,255,255,.18);
}
/* FIX do PNG quadrado */
.logo-img{
  width:100%; height:100%; object-fit:cover; display:block;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
@supports (-webkit-mask-image: radial-gradient(#000,#000)) or (mask-image: radial-gradient(#000,#000)){
  .logo-img{
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
            mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
  }
}
/* Ícones orbitando */
.orbit{ position:absolute; inset:0; pointer-events:none; }
.orbit .orb{
  position:absolute; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; backdrop-filter: blur(4px);
  background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14);
  color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.35);
  animation: float 3.8s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.orbit .orb ion-icon{ font-size:1.4rem; }
.orb.o1{ top:5%; left:10%; transform: translate(calc((var(--mx) - 50vw)/60), calc((var(--my) - 50vh)/60)); }
.orb.o2{ bottom:8%; right:8%; transform: translate(calc((var(--mx) - 50vw)/50), calc((var(--my) - 50vh)/55)); }
.orb.o3{ top:12%; right:14%; transform: translate(calc((var(--mx) - 50vw)/70), calc((var(--my) - 50vh)/65)); }

/* Seções internas (tópicos) */
.wrap{max-width:1000px; margin:18px auto 60px; padding:0 18px}
.section{
  border:1px solid var(--card-border); border-radius:14px; padding:16px 18px; margin-bottom:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.section h3{
  font-family:'Teko','Bebas Neue',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; font-size:1.7rem; line-height:1.05; margin-bottom:.35rem;
}
.section p{color:#dcdcdc; line-height:1.65}

/* Partículas do hero */
.fx-dot{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0));
  opacity:.35; pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(255,31,31,.65));
  transition: transform .12s linear;
}
.fx-dot:nth-child(3n){ width:4px; height:4px; opacity:.28; filter: drop-shadow(0 0 8px rgba(138,43,226,.7)); }
.fx-dot:nth-child(4n){ width:8px; height:8px; opacity:.22; }
/* ===== Suporte global aos efeitos ===== */

/* Hero com camadas que seguem o mouse (usa --mx/--my do JS) */
.hero .hero-card { position: relative; overflow: hidden; }
.hero-decor { position: absolute; inset: -20%; z-index: -1; pointer-events: none; }
.hero-decor::before,
.hero-decor::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .22;
}
.hero-decor::before {
  width: 46vmax; height: 46vmax; left: -10%; top: -14%;
  background: radial-gradient(closest-side, rgba(255,31,31,.55), transparent 65%);
  transform: translate(calc((var(--mx) - 50vw)/35), calc((var(--my) - 50vh)/35));
}
.hero-decor::after {
  width: 38vmax; height: 38vmax; right: -8%; bottom: -12%;
  background: radial-gradient(closest-side, rgba(138,43,226,.45), transparent 65%);
  transform: translate(calc((var(--mx) - 50vw)/45), calc((var(--my) - 50vh)/45));
}

/* Performance para tilt */
.topic, .btn { will-change: transform; transform-style: preserve-3d; }

/* Partículas do hero */
.fx-dot{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0));
  opacity:.35; pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(255,31,31,.65));
  transition: transform .12s linear;
}
.fx-dot:nth-child(3n){ width:4px; height:4px; opacity:.28; filter: drop-shadow(0 0 8px rgba(138,43,226,.7)); }
.fx-dot:nth-child(4n){ width:8px; height:8px; opacity:.22; }

/* (garantia) corpo com glow que segue o mouse */
body::before{
  background-image:
    url("https://www.transparenttextures.com/patterns/concrete-wall.png"),
    radial-gradient(circle 50vmax at var(--mx) var(--my), rgba(255,31,31,.15), transparent 60%);
}