/* build v6 */
:root{
  --breu:#0E0C0A;
  --pedra:#1A1714;
  --pedra2:#262119;
  --linha:#3D3428;
  --pergaminho:#E4D9BD;
  --texto:#A99D85;
  --ouro:#D4A73C;
  --sangue:#9B2C22;
  --celeste:#5FA8A0;

  --display:"Grenze Gotisch",serif;
  --corpo:"Spectral",Georgia,serif;
  --pixel:"Silkscreen",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--breu);
  color:var(--texto);
  font-family:var(--corpo);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* stone texture behind everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(212,167,60,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
main,header,footer{position:relative;z-index:1}
a{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}

.limite{max-width:1180px;margin:0 auto;padding:0 24px}
.olho{
  font-family:var(--pixel);font-size:10px;letter-spacing:.14em;
  color:var(--ouro);text-transform:uppercase;
}

/* ── header ──────────────────────────────────── */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(14,12,10,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo .limite{display:flex;align-items:center;gap:28px;height:62px}
.marca{
  font-family:var(--display);font-weight:800;font-size:23px;
  color:var(--pergaminho);letter-spacing:.04em;text-decoration:none;white-space:nowrap;
}
.marca span{color:var(--ouro)}
.menu{display:flex;gap:22px;margin-left:auto;align-items:center}
.menu a{
  font-family:var(--pixel);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--texto);padding:6px 0;border-bottom:1px solid transparent;
}
.menu a:hover,.menu a:focus-visible{color:var(--ouro);border-bottom-color:var(--ouro)}
.menu a[aria-disabled="true"]{opacity:.38;pointer-events:none}
.pulso{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--celeste);box-shadow:0 0 8px var(--celeste);margin-right:7px;
  animation:bater 2.4s ease-in-out infinite;
}
@keyframes bater{50%{opacity:.25}}
.online{font-family:var(--pixel);font-size:10px;color:var(--celeste);letter-spacing:.08em}

/* ── hero ────────────────────────────────────── */
.heroi{
  position:relative;min-height:min(88vh,720px);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--linha);
  overflow:hidden;
}
.heroi .fundo{position:absolute;inset:0}
.heroi .fundo img{filter:saturate(.75) contrast(1.05)}
.heroi .fundo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--breu) 4%, rgba(14,12,10,.72) 45%, rgba(14,12,10,.35));
}
.heroi .limite{
  position:relative;width:100%;
  display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:end;
  padding-top:110px;padding-bottom:64px;
}
.titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(46px,8vw,92px);line-height:.92;letter-spacing:-.01em;
  color:var(--pergaminho);margin:14px 0 18px;
  text-shadow:0 2px 30px rgba(0,0,0,.8);
}
.titulo em{font-style:normal;color:var(--ouro)}
.chamada{max-width:46ch;font-size:19px;color:#C6BAA0}
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  font-family:var(--pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;border:1px solid var(--ouro);
  color:var(--breu);background:var(--ouro);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,167,60,.28)}
.btn.vazado{background:transparent;color:var(--ouro)}
.btn.vazado[aria-disabled="true"]{opacity:.4;border-color:var(--linha);color:var(--texto);pointer-events:none}
.btn.discord{
  background:transparent;border-color:#5865F2;color:#7983F5;
  display:inline-flex;align-items:center;gap:9px;
}
.btn.discord:hover{background:#5865F2;color:#fff;box-shadow:0 6px 20px rgba(88,101,242,.4)}
.btn.discord svg{width:16px;height:16px}
.menu .discord-link{
  display:inline-flex;align-items:center;gap:7px;
  color:#7983F5;border-bottom-color:transparent;
}
.menu .discord-link:hover,.menu .discord-link:focus-visible{color:#98A1F8;border-bottom-color:#7983F5}
.menu .discord-link svg{width:14px;height:14px}

/* ── status card = item tooltip ──────────────── */
.item{
  background:rgba(10,9,7,.9);
  border:1px solid var(--linha);
  box-shadow:inset 0 0 0 1px rgba(212,167,60,.12), 0 20px 50px rgba(0,0,0,.6);
  padding:18px 20px 20px;
}
.item h2{
  font-family:var(--display);font-weight:600;font-size:22px;
  color:var(--ouro);letter-spacing:.02em;line-height:1.2;
}
.item .rank{color:var(--sangue);font-family:var(--pixel);font-size:10px;letter-spacing:.1em}
.item hr{border:0;border-top:1px solid var(--linha);margin:12px 0}
.item dl{display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:14px}
.item dt{color:var(--texto)}
.item dd{font-family:var(--pixel);font-size:11px;color:var(--pergaminho);text-align:right}
.item dd.bom{color:var(--celeste)}

/* ── sections ────────────────────────────────── */
.secao{padding:96px 0;border-bottom:1px solid var(--linha)}
.cabeca{margin-bottom:38px;max-width:60ch}
.cabeca h2{
  font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,44px);
  color:var(--pergaminho);line-height:1.05;margin:10px 0 12px;
}

/* ── inventory (gallery) ─────────────────────── */
.inventario{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding:10px;
  background:var(--pedra);border:1px solid var(--linha);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);
}
.slot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--pedra2);
  border:1px solid #342D22;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.05), inset -1px -1px 0 rgba(0,0,0,.55);
  transition:border-color .15s ease;
}
.slot:hover,.slot:focus-within{border-color:var(--ouro)}
.slot img{transition:transform .5s ease, filter .3s ease;filter:saturate(.8)}
.slot:hover img{transform:scale(1.06);filter:saturate(1)}
/* L-shaped corners, like WYD cell borders */
.slot::before,.slot::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;z-index:2;
  border-color:var(--ouro);opacity:.55;
}
.slot::before{top:4px;left:4px;border-top:1px solid;border-left:1px solid}
.slot::after{bottom:4px;right:4px;border-bottom:1px solid;border-right:1px solid}
.legenda{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:22px 12px 9px;
  background:linear-gradient(to top,rgba(8,7,5,.95),transparent);
  font-family:var(--pixel);font-size:9px;letter-spacing:.06em;
  color:var(--pergaminho);text-transform:uppercase;
}
.legenda b{color:var(--ouro);font-weight:400}

/* empty slot = invitation to upload the file */
.slot.vazio{
  display:grid;place-content:center;text-align:center;gap:6px;padding:14px;
  background:
    repeating-linear-gradient(45deg, rgba(212,167,60,.05) 0 6px, transparent 6px 12px),
    var(--pedra2);
}
.slot.vazio img,.slot.vazio .legenda{display:none}
.slot.vazio .arquivo{font-family:var(--pixel);font-size:10px;color:var(--ouro)}
.slot.vazio .dica{font-size:12px;color:#6E6555;line-height:1.4}

/* mark generated art so it doesn't get mistaken for a real screenshot */
.marca-ph{
  position:absolute;top:8px;right:10px;z-index:3;
  font-family:var(--pixel);font-size:8px;letter-spacing:.08em;
  color:var(--ouro);opacity:.5;text-transform:uppercase;pointer-events:none;
}

/* ── classes ─────────────────────────────────── */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.classe{
  border:1px solid var(--linha);background:var(--pedra);
  padding:22px 20px 24px;transition:background .18s ease, border-color .18s ease;
}
.classe:hover{background:var(--pedra2);border-color:var(--ouro)}
.classe h3{
  font-family:var(--display);font-weight:600;font-size:24px;
  color:var(--pergaminho);margin:8px 0 8px;
}
.classe p{font-size:15px}
.classe .arma{font-family:var(--pixel);font-size:9px;color:var(--celeste);letter-spacing:.08em}

/* ── footer ──────────────────────────────────── */
.rodape{padding:52px 0 64px}
.rodape .limite{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.rodape p{font-size:13px;color:#6E6555;max-width:52ch}
.rodape .marca{font-size:19px}

/* ── responsive ──────────────────────────────── */
@media (max-width:900px){
  .menu{display:none}
  .heroi .limite{grid-template-columns:1fr;gap:34px;padding-top:80px}
  .item{max-width:360px}
  .inventario{grid-template-columns:repeat(2,1fr)}
  .classes{grid-template-columns:repeat(2,1fr)}
  .secao{padding:70px 0}
}
@media (max-width:520px){
  .classes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}


/* ── video embed (signup page) ────────────────── */
.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--pedra2);
  border:1px solid var(--linha);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.05), inset -1px -1px 0 rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.5);
  transition:border-color .15s ease;
}
.video:hover,.video:focus-within{border-color:var(--ouro)}
.video video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.video::before,.video::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;z-index:2;
  border-color:var(--ouro);opacity:.55;
}
.video::before{top:5px;left:5px;border-top:1px solid;border-left:1px solid}
.video::after{bottom:5px;right:5px;border-bottom:1px solid;border-right:1px solid}
.video.vazio{
  display:grid;place-content:center;text-align:center;gap:8px;padding:24px;cursor:default;
  background:
    repeating-linear-gradient(45deg, rgba(212,167,60,.05) 0 6px, transparent 6px 12px),
    var(--pedra2);
}

/* ── numbered steps ──────────────────────────── */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.passo{border-top:1px solid var(--linha);padding-top:18px}
.passo .num{font-family:var(--pixel);font-size:10px;color:var(--ouro);letter-spacing:.1em}
.passo h3{
  font-family:var(--display);font-weight:600;font-size:21px;
  color:var(--pergaminho);margin:10px 0 8px;line-height:1.15;
}
.passo p{font-size:15px}
.passo a{color:var(--ouro)}

/* ── callout ─────────────────────────────────── */
.aviso{
  border:1px solid var(--linha);border-left:2px solid var(--ouro);
  background:var(--pedra);padding:20px 24px;margin-top:44px;max-width:70ch;
}
.aviso p{font-size:15px}
.aviso a{color:var(--ouro)}

@media (max-width:900px){
  .passos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .passos{grid-template-columns:1fr}
}