/* Portal do Fenrath: landing, wiki, novidades e ranking dividem este layout.
   Menu a esquerda, conteudo no centro, Top 5 a direita, sobre a pintura da
   fortaleza ao luar (DESIGN.md: Veiled Painting, Moonlight Text, Gold Is Light). */
@font-face{font-family:"Grenze Gotisch";src:url("/fontes/grenze-gotisch.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --noite:#070910;--vidro:#0b0f19d9;--vidro-forte:#0b0f19f2;--borda:#ffffff1f;--borda-ouro:#d9ae3c55;
  --tinta:#eef1f8;--fraco:#c3cadb;--apagado:#97a1b6;
  --ouro:#d9ae3c;--ouro-claro:#f0cd73;
  --display:"Grenze Gotisch","Iowan Old Style",Georgia,serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100svh;color:var(--tinta);font:16px/1.6 var(--texto);background:var(--noite)}
::selection{background:#d9ae3c66;color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:6px}

.fundo{position:fixed;inset:0;z-index:-1;background:var(--noite) url("/arte/cenarios/fortaleza-luar-v1.webp") 62% 35%/cover no-repeat}
.fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#070910e6 0%,#070910b3 30%,#07091040 62%,#07091000 82%),
             linear-gradient(0deg,#070910 0%,#070910b3 16%,#07091000 45%)}
.pagina-conteudo .fundo::after{background:linear-gradient(0deg,#070910f0,#070910cc 50%,#07091099)}

/* topo */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 24px;
  background:linear-gradient(180deg,#070910e6,#07091000)}
.marca{font:700 32px/1 var(--display);color:var(--ouro);text-decoration:none;letter-spacing:.02em;text-shadow:0 2px 12px #000}
.topo .contas{margin-left:auto;display:flex;align-items:center;gap:8px}
.link{padding:8px 15px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--fraco)}
.link:hover{color:var(--tinta)}
.link.borda{border:1px solid var(--borda-ouro);color:var(--ouro-claro);background:#07091080}
.link.borda:hover{border-color:var(--ouro)}
.abrir-menu{display:none;width:42px;height:42px;padding:0;border:1px solid var(--borda-ouro);border-radius:10px;background:#07091099;color:var(--ouro-claro);cursor:pointer}
.abrir-menu svg{width:22px;height:22px}

/* tres colunas */
.portal{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:28px;align-items:start;
  width:min(1360px,100% - 48px);margin:6px auto 0;min-height:calc(100svh - 150px)}

/* menu lateral */
.menu{position:sticky;top:84px;display:grid;gap:10px}
.menu a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border:1px solid var(--borda-ouro);
  border-radius:12px;background:var(--vidro);color:var(--fraco);text-decoration:none;font:700 20px/1 var(--display);letter-spacing:.03em;
  transition:border-color .2s,color .2s,background .2s}
.menu a:hover{color:var(--tinta);border-color:var(--ouro)}
.menu a[aria-current="page"]{color:var(--ouro-claro);border-color:var(--ouro);background:linear-gradient(180deg,#d9ae3c26,var(--vidro))}
.menu a.jogar{min-height:58px;background:var(--ouro);color:#1a1205;border-color:var(--ouro);font-size:24px;
  box-shadow:0 14px 30px -12px #000,0 0 0 1px #ffffff33 inset}
.menu a.jogar:hover{background:var(--ouro-claro);color:#1a1205}
.menu .comunidade[hidden]{display:none}

/* centro */
.centro{min-width:0}
h1{margin:4vh 0 14px;font:700 clamp(50px,6vw,96px)/.95 var(--display);text-shadow:0 4px 30px #000;text-wrap:balance}
h1 em{font-style:normal;color:var(--ouro)}
.sub{margin:0 0 28px;max-width:44ch;font-size:clamp(17px,1.45vw,20px);color:var(--fraco);text-shadow:0 2px 12px #000}
.acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:12px;padding:18px 34px;border-radius:14px;background:var(--ouro);color:#1a1205;
  font:800 19px/1 var(--texto);text-decoration:none;letter-spacing:.02em;box-shadow:0 14px 30px -12px #000,0 0 0 1px #ffffff33 inset;
  transition:background .2s,transform .2s}
.cta:hover{background:var(--ouro-claro)}.cta:active{transform:translateY(1px)}
.cta svg{width:20px;height:20px}
.ja{color:var(--fraco);font-weight:600;text-underline-offset:4px;text-decoration-color:#ffffff55}
.ja:hover{color:var(--tinta)}
.nota{margin:14px 0 0;color:var(--apagado);font-size:14px}

.marcos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:5vh 0 0;padding:0;list-style:none}
.marcos li{padding:14px 16px;border:1px solid var(--borda);border-radius:14px;background:var(--vidro)}
.marcos b{display:block;font:700 22px/1.1 var(--display);color:var(--ouro-claro);margin-bottom:4px}
.marcos span{color:var(--fraco);font-size:14.5px}

/* paineis de conteudo (wiki, novidades, ranking) */
.painel{padding:clamp(18px,2.6vw,30px);border:1px solid var(--borda-ouro);border-radius:16px;background:var(--vidro-forte)}
.painel+.painel{margin-top:18px}
.painel h1{margin:0 0 8px;font-size:clamp(42px,4.4vw,64px)}
.painel h2{margin:0 0 10px;font:700 clamp(28px,2.6vw,36px)/1.05 var(--display);color:var(--ouro-claro)}
.painel h3{margin:18px 0 6px;font:700 22px/1.1 var(--display);color:var(--tinta)}
.painel p,.painel li{color:var(--fraco)}
.painel p{max-width:70ch}
.painel b,.painel strong{color:var(--tinta)}
.painel .lead{font-size:17px;margin:0 0 6px}

/* noticias */
.noticias{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.noticia{border:1px solid var(--borda);border-radius:12px;background:#0b0f19b3}
.noticia summary{display:flex;align-items:baseline;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.noticia summary::-webkit-details-marker{display:none}
.noticia summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--apagado);border-bottom:2px solid var(--apagado);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.noticia[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.noticia time{color:var(--ouro-claro);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.noticia .titulo{color:var(--tinta);font-weight:650}
.noticia .corpo{padding:0 16px 14px;color:var(--fraco)}
.noticia .corpo p{margin:6px 0}

/* top 5 */
.lateral{position:sticky;top:84px}
.top{padding:16px 16px 8px;border:1px solid var(--borda-ouro);border-radius:16px;background:var(--vidro);backdrop-filter:blur(6px)}
.top h2{margin:0 0 6px;font:700 26px/1 var(--display);color:var(--ouro);text-align:center}
.top ol{margin:0;padding:0;list-style:none}
.top li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid #ffffff12}
.top li:first-child{border-top:0}
.top .vazio{display:block;padding:12px 4px;color:var(--fraco);font-size:14px;text-align:center}
.top .mais{display:block;margin:4px 0 6px;text-align:center;color:var(--ouro-claro);font-size:14px;font-weight:600;text-decoration:none}
.pos{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--borda-ouro);
  color:var(--ouro-claro);font:700 15px/1 var(--display)}
.nome{display:block;font-weight:650;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top small,.det{color:var(--apagado);font-size:12.5px;font-variant-numeric:tabular-nums}
.fund{margin-left:6px;padding:0 6px;border:1px solid var(--ouro);border-radius:999px;color:var(--ouro);font-size:10.5px;font-weight:700}

/* tabela (ranking completo, loja da wiki) */
.tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabela th{padding:8px 10px;text-align:left;color:var(--apagado);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #d9ae3c44}
.tabela td{padding:10px;border-bottom:1px solid #ffffff10;color:var(--fraco)}
.tabela td:first-child{color:var(--ouro-claro);font-family:var(--display);font-size:18px;width:52px}
.tabela td.n{color:var(--tinta);font-weight:650}

footer{width:min(1360px,100% - 48px);margin:28px auto 0;padding:16px 0 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid #d9ae3c33;color:var(--apagado);font-size:13px}
footer nav{display:flex;gap:16px}
footer a{color:var(--apagado);text-decoration:none}footer a:hover{color:var(--tinta)}

@media (max-width:1180px){
  .portal{grid-template-columns:210px minmax(0,1fr)}
  .lateral{grid-column:2;position:static}
}
@media (max-width:820px){
  .abrir-menu{display:inline-grid;place-items:center}
  .portal{grid-template-columns:1fr;gap:20px;width:min(100% - 32px,1360px)}
  .lateral{grid-column:auto}
  .menu{position:fixed;inset:68px 12px auto 12px;z-index:30;padding:12px;border:1px solid var(--borda-ouro);border-radius:16px;
    background:#070910f7;box-shadow:0 30px 60px -20px #000}
  .menu[hidden]{display:none}
  .fundo{background-position:58% 20%}
  .fundo::after{background:linear-gradient(0deg,#070910 0%,#070910e6 40%,#07091066 72%,#07091040 100%)}
  h1{margin-top:2vh}
  .marcos{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topo{padding:12px 16px}.marca{font-size:27px}
  .topo .contas .link:not(.borda){display:none}
  h1{font-size:clamp(46px,14vw,62px)}
  .sub{font-size:16.5px;margin-bottom:22px}
  .acoes{flex-direction:column;align-items:stretch;gap:12px}
  .cta{justify-content:center;padding:18px}
  .ja,.nota{text-align:center}
  .tabela .esconde{display:none}
  footer{justify-content:center;text-align:center;width:min(100% - 32px,1360px)}
}
@media (min-width:821px){.menu[hidden]{display:grid}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}