/* Site de Elunes — paleta de docs/identidade-visual.md (azul royal claro, gelo, prata, dourado, marinho).
   Layout clássico dos sites de Tibia: arte grande no topo com o logo, três colunas (menu à esquerda, conteúdo no
   centro, caixas à direita no início) e rodapé. Fontes servidas pelo próprio site (site/fonts, OFL) e quase nada de
   JavaScript: a política de segurança (CSP) só deixa script no início (o movimento); abas do menu com details/summary,
   botão Menu do celular com checkbox e galeria com rádio. */
@font-face{font-family:"Cinzel";src:url(/fonts/cinzel.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-italic.woff) format("woff");font-style:italic;
 font-weight:300 700;font-display:swap}
:root{--royal:#1769D2;--royal-claro:#2479e6;--gelo:#EAF3FF;--prata:#BFCBDD;--ouro:#D6A33D;--ouro-claro:#F1D08A;
 --marinho:#071A35;--fundo:#050f20;--painel:rgba(8,25,50,.92);--linha:rgba(191,203,221,.22);--linha-ouro:rgba(214,163,61,.45);
 --caixa:#0b2142;--caixa-in:#102a52;--erro:#E07A6B;--verde:#6FC28B;
 --titulo:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --texto:"Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
 --suave:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html{background:var(--fundo)}
/* a arte acompanha a página toda: no topo nítida, e atrás do resto fixa e escurecida */
html::before{content:"";position:fixed;inset:-12px;z-index:-1;background:url(/img/capa.webp) center/cover;filter:blur(3px)}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:433px;z-index:-1;
 background:url(/img/capa.webp) top center/max(1600px,100%) auto no-repeat;
 -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
body{margin:0;min-height:100vh;position:relative;
 background:linear-gradient(180deg,rgba(5,15,32,.1) 0,rgba(5,15,32,.1) 240px,rgba(5,15,32,.72) 470px);
 color:var(--gelo);font:15px/1.55 var(--texto)}
a{color:#8fbcf5}
a:hover{color:var(--gelo)}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titulo);font-weight:normal;letter-spacing:.06em;margin:0 0 10px}
h1{font-size:26px}
h2{font-size:19px;color:var(--ouro)}
.plataforma{color:inherit}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabeçalho: arte grande com o logo */
.cab{max-width:1180px;margin:0 auto;height:330px;position:relative;padding:0 16px}
.logo{position:absolute;left:50%;top:58px;transform:translateX(-50%);font:64px var(--titulo);letter-spacing:.22em;
 text-decoration:none;background:linear-gradient(180deg,#fff4cf 0%,var(--ouro-claro) 40%,var(--ouro) 70%,#9c6c1c 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 2px #000)}
.lema{position:absolute;left:0;right:0;top:142px;margin:0;text-align:center;font:15px var(--titulo);letter-spacing:.14em;
 color:var(--prata);text-shadow:0 1px 3px #000}
.jogar{position:absolute;left:0;right:0;top:184px;text-align:center}
.jogar small{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:3px;background:rgba(5,15,32,.8);color:var(--gelo)}
/* abertura no cabeçalho (até a abertura; depois fica só o botão) */
.cab .abertura{display:table;margin:0 auto 10px;padding:4px 10px;border:1px solid var(--linha-ouro);border-radius:3px;
 background:rgba(5,15,32,.85);font:13px var(--titulo);letter-spacing:.08em;color:var(--ouro-claro);text-decoration:none}
/* aba centralizada que leva direto ao cliente do navegador */
.aba-jogar{display:flex;justify-content:center;padding:0 16px;margin:0 0 18px}
.aba-jogar a{display:inline-flex;align-items:center;gap:10px;padding:11px 34px;border:1px solid var(--linha-ouro);border-top:3px solid var(--ouro);
 border-radius:0 0 8px 8px;background:var(--painel);font:16px var(--titulo);letter-spacing:.1em;color:var(--ouro-claro);text-decoration:none;
 box-shadow:0 6px 16px rgba(0,0,0,.45)}
.aba-jogar a:hover{color:#fff;box-shadow:0 6px 20px rgba(241,208,138,.35)}
.aba-jogar svg{width:16px;height:16px;fill:currentColor}

/* três colunas; nas páginas internas, duas */
.corpo{max-width:1180px;margin:0 auto;padding:0 16px 30px;display:grid;grid-template-columns:200px minmax(0,1fr) 250px;
 gap:16px;align-items:start}
.corpo.interna{grid-template-columns:200px minmax(0,1fr)}
/* sem menu (Criar conta): uma coluna, a página centralizada sob o logo */
.corpo.sozinha{grid-template-columns:minmax(0,1fr)}
.corpo.sozinha section.estreito{max-width:520px;margin:0 auto;width:100%}
.corpo>*{min-width:0}
.esq .caixa,.dir .caixa,.inicio .caixa{padding:0;background:var(--caixa);border:1px solid var(--linha-ouro);margin-bottom:14px;
 box-shadow:0 3px 12px rgba(0,0,0,.5);overflow:hidden}
.esq .caixa>h2,.esq .caixa>h3,.dir .caixa>h3,.inicio .caixa>h2{margin:0;padding:7px 12px;font-size:13px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ouro-claro);background:linear-gradient(180deg,#173a70,#0d2550);
 border-bottom:1px solid var(--linha-ouro)}
.esq .caixa>.in,.dir .caixa>.in,.inicio .caixa>.in{padding:10px 12px}

/* menu da esquerda: abas abrem e fecham (details/summary); a da seção atual já vem aberta */
.menu ul{list-style:none;margin:0;padding:4px 0}
.menu li a{display:block;padding:5px 14px 5px 22px;color:var(--prata);position:relative;text-decoration:none;
 transition:background .25s var(--suave),color .25s,padding-left .25s var(--suave)}
.menu li a:hover{padding-left:26px}
.menu li a::before{content:"";position:absolute;left:10px;top:12px;width:5px;height:5px;background:var(--ouro);
 transform:rotate(45deg)}
.menu li a:hover,.menu li a.atual{background:var(--caixa-in);color:var(--gelo)}
.menu li a.atual{color:var(--ouro-claro)}
.menu .sair button{display:block;width:100%;margin:0;padding:5px 14px 5px 22px;text-align:left;background:none;border:0;
 color:var(--prata);font:inherit;cursor:pointer}
.menu .sair button:hover{background:var(--caixa-in);color:var(--gelo)}
.menu>summary{list-style:none;cursor:pointer;padding:7px 12px;font:13px var(--titulo);letter-spacing:.14em;
 text-transform:uppercase;color:var(--ouro-claro);background:linear-gradient(180deg,#173a70,#0d2550);
 display:flex;justify-content:space-between;align-items:center}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"+";font:18px/1 var(--texto);color:var(--ouro)}
.menu[open]>summary{border-bottom:1px solid var(--linha-ouro)}
.menu[open]>summary::after{content:"−"}
.menu>summary:hover{filter:brightness(1.2)}
/* ícone de cada aba (SVG no HTML, traço na cor do título) */
.aba{display:flex;align-items:center;gap:8px}
.aba .ico{flex:none;width:17px;height:17px;fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linecap:round;
 stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000);transition:transform .3s var(--suave),stroke .3s}
.menu>summary:hover .ico,.menu[open]>summary .ico{stroke:var(--ouro-claro)}
.esq .caixa>h3.aba{white-space:nowrap;letter-spacing:.07em;font-size:12px;gap:7px}
.menu>summary:hover .ico{transform:scale(1.12)}
.menu>summary::after{transition:transform .3s var(--suave)}
.menu[open]>summary::after{transform:rotate(180deg)}
.busca input{width:100%;padding:7px 9px}
/* botão Menu do celular: checkbox + label, sem JavaScript */
.abre{position:absolute;opacity:0;pointer-events:none}
.botao-menu{display:none}

/* início: novidades, destaque e notícias */
.ticker{list-style:none;margin:0;padding:0}
.ticker li{padding:6px 12px;border-bottom:1px solid var(--linha);display:flex;gap:10px}
.ticker li:last-child{border:0}
.ticker time{color:var(--ouro);white-space:nowrap;font-size:12px;padding-top:1px}
.destaque{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;padding:12px}
.destaque img{width:100%;border:1px solid var(--linha-ouro);border-radius:3px;display:block}
.destaque h3{font-size:19px;color:var(--ouro-claro);margin:0 0 6px}
.destaque p{margin:0 0 8px}
.inicio .noticia .meta{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;
 background:linear-gradient(180deg,#173a70,#0d2550);border-bottom:1px solid var(--linha-ouro)}
.inicio .noticia .meta h3{margin:0;font-size:15px;color:var(--ouro-claro)}
.inicio .noticia .meta time{color:var(--prata);font-size:12px;white-space:nowrap}
.inicio .noticia .in{padding:12px 12px 0}
.inicio .noticia p{margin:0 0 8px}
.inicio .mais{display:block;text-align:right;padding:0 12px 10px}
.inicio .mais.arquivo{margin:-6px 0 14px;padding:0}
.tag{display:inline-block;font:10px/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;
 border-radius:2px;margin-right:8px;vertical-align:2px;color:var(--marinho);white-space:nowrap}
.tag.at{background:#8fbcf5}.tag.ev{background:var(--ouro-claro)}.tag.re{background:var(--verde)}
.ticker .tag{margin:1px 0 0;align-self:flex-start}

/* coluna da direita */
.status dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 8px}
.status dt{color:var(--prata)}.status dd{margin:0;text-align:right;font-weight:600}
.status .on{color:var(--verde)}
.status .on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);
 margin-right:6px;box-shadow:0 0 6px var(--verde)}
.top ol{margin:0;padding:0 0 0 22px}.top li{padding:2px 0}.top small{color:var(--prata)}
.criatura{text-align:center}
.criatura b{display:block;font:17px var(--titulo);color:var(--ouro-claro)}
.criatura small{color:var(--prata)}
/* a criatura anda no lugar sobre uma sombra; passar o mouse a aproxima */
.criatura .vulto{position:relative;display:flex;align-items:flex-end;justify-content:center;height:136px;margin:-4px 0 6px}
.criatura .vulto::after{content:"";position:absolute;bottom:4px;left:50%;width:84px;height:14px;margin-left:-42px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.55),transparent 70%)}
.criatura .vulto img{position:relative;z-index:1;image-rendering:pixelated;max-height:128px;width:auto;transition:transform .25s}
.criatura:hover .vulto img{transform:scale(1.12) translateY(-3px)}
.duplo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duplo a,.duplo .sair button{display:block;width:100%;margin:0;text-align:center;padding:7px;border:1px solid var(--linha);
 border-radius:3px;background:var(--caixa-in);color:#8fbcf5;font:inherit;text-decoration:none;cursor:pointer}
.dir .mortes ul{list-style:none;margin:0;padding:0}
.dir .mortes li{padding:5px 0;border-bottom:1px solid var(--linha);font-size:13px}
.dir .mortes li:last-child{border:0}.dir .mortes small{display:block;color:var(--prata);font-size:11px}
.rei .coroa h3{font-size:14px}
.rei .trono{font-size:14px}
.proximo{margin:8px 0;padding-top:8px;border-top:1px solid var(--linha);color:var(--prata);font-size:12px}
.proximo b{color:var(--ouro-claro)}

/* botões */
.botao{display:inline-block;text-align:center;padding:9px 18px;border-radius:3px;text-decoration:none;color:#fff;
 background:var(--royal);font:15px var(--titulo);letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent}
.botao:hover{background:var(--royal-claro);color:#fff}
.botao.ouro{background:linear-gradient(180deg,#f0c76b,#c48f2c 55%,#9c6c1c);color:#1d1304;border-color:#f6d98f;
 box-shadow:0 0 18px rgba(214,163,61,.35)}
.botao.ouro:hover{color:#000;filter:brightness(1.08)}
.botao.vazado{background:rgba(4,13,28,.55);border-color:var(--prata);color:var(--gelo)}
.botao.vazado:hover{border-color:var(--ouro);color:var(--ouro-claro)}
.botao.grande{padding:13px 30px;font-size:16px}

.cartas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.chamada{text-align:center;margin:14px 0 2px}
.promessa{margin:4px 0 18px;text-align:center}
.promessa strong{display:flex;align-items:center;justify-content:center;gap:16px;font:600 22px/1.2 var(--titulo);
 letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:var(--ouro-claro);
 background:linear-gradient(180deg,#fff4cf 0%,var(--ouro-claro) 45%,var(--ouro) 75%,#a8761f 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.promessa strong::before,.promessa strong::after{content:"";flex:1;max-width:70px;min-width:18px;height:1px;
 background:linear-gradient(90deg,transparent,var(--ouro))}
.promessa strong::after{background:linear-gradient(90deg,var(--ouro),transparent)}
.promessa span{display:block;margin-top:6px;font:italic 500 21px/1.3 "Cormorant Garamond",Georgia,serif;
 color:var(--prata);letter-spacing:.01em;font-variant-numeric:lining-nums}
@media (max-width:640px){.promessa strong{font-size:16px;gap:8px;white-space:normal}.promessa strong::before,.promessa strong::after{max-width:30px}
 .promessa span{font-size:18px}}
.ofertas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.oferta{display:block;padding:12px 14px;border:1px solid var(--linha-ouro);border-radius:4px;text-decoration:none;
 color:var(--prata);background:linear-gradient(180deg,rgba(214,163,61,.12),rgba(214,163,61,.03))}
.oferta:hover{border-color:var(--ouro);color:var(--gelo)}
.oferta .selo{display:inline-block;margin-bottom:4px;padding:1px 7px;border-radius:2px;font-size:11px;font-weight:bold;
 text-transform:uppercase;letter-spacing:.05em;color:#1d1304;background:var(--ouro)}
.oferta strong{display:block;font:18px var(--titulo);color:#f3d58a}
.oferta span:last-child{display:block;font-size:13px;line-height:1.4}
@media (max-width:640px){.ofertas{grid-template-columns:1fr}}
.chamada .botao{font-size:17px;padding:11px 34px}
.carta{position:relative;display:block;border:1px solid var(--linha-ouro);border-radius:3px;overflow:hidden;
 text-decoration:none;background:#000}
.carta img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .2s}
.carta:hover img{transform:scale(1.05)}
.carta:hover{border-color:var(--ouro)}
.carta>span{position:absolute;inset:auto 0 0;padding:18px 4px 6px;text-align:center;font:12px/1.2 var(--titulo);
 letter-spacing:.04em;color:var(--ouro-claro);background:linear-gradient(180deg,transparent,rgba(3,9,20,.94) 45%)}
.carta small{display:block;font:11px var(--texto);color:var(--prata);letter-spacing:.02em}
.palco figure{display:none;margin:0;position:relative}
.palco img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--linha-ouro);border-radius:3px}
.palco figcaption{position:absolute;left:1px;right:1px;bottom:1px;padding:16px 12px 8px;font:14px var(--titulo);
 letter-spacing:.06em;background:linear-gradient(180deg,transparent,rgba(3,9,20,.9))}
#foto1:checked~.palco .f1,#foto2:checked~.palco .f2,#foto3:checked~.palco .f3,#foto4:checked~.palco .f4{display:block}
.miniaturas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.miniaturas label{margin:0;cursor:pointer;border:1px solid var(--linha);border-radius:2px;opacity:.6;overflow:hidden}
.miniaturas label:hover{opacity:1}
.miniaturas img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
#foto1:checked~.miniaturas [for=foto1],#foto2:checked~.miniaturas [for=foto2],#foto3:checked~.miniaturas [for=foto3],
#foto4:checked~.miniaturas [for=foto4]{opacity:1;border-color:var(--ouro)}
.galeria input:focus-visible~.miniaturas{outline:2px solid var(--royal);outline-offset:2px}

/* coroas (início e Reino) */
.coroa{padding:8px 0 10px;border-bottom:1px solid var(--linha)}
.coroa:first-of-type{padding-top:0}
.coroa:last-child{border-bottom:0;padding-bottom:0}
.coroa h3{font-size:16px;color:var(--gelo);margin:0 0 4px}
.coroa h3 small{display:block;font:12px var(--texto);letter-spacing:.02em;color:var(--prata)}
.coroa.aguas h3{color:#8fbcf5}
.coroa.pedra h3{color:#cfd6e2}
.coroa.areias h3{color:#e9c27a}
.trono{margin:0;font-size:15px}
.trono span{display:block;font-size:12px;color:var(--ouro);letter-spacing:.06em;text-transform:uppercase}
.trono.vazio{color:var(--prata);font-style:italic}
.coroa .dica{margin:2px 0 0}
.eleicao{margin:6px 0 0;padding:4px 8px;font-size:13px;border-left:3px solid var(--royal);background:rgba(23,105,210,.14)}
/* rodapé */
.rodape{text-align:center;color:var(--prata);font-size:12px;padding:16px;border-top:1px solid var(--linha);line-height:1.9;
 background:rgba(3,10,23,.9)}
.rodape .legal{display:block;font-size:11px;opacity:.75}

/* páginas internas */
.pagina{max-width:1100px;margin:0 auto;padding:26px 16px 30px}
.caixa{background:var(--painel);border:1px solid var(--linha);border-radius:4px;padding:14px 16px;margin-bottom:18px}
.pergaminho{background:linear-gradient(180deg,#f4ead2,#e9dbb8);color:#2a1f0e;border-color:#b98523}
.pergaminho>h1{margin:-14px -16px 14px;padding:10px 16px;color:var(--gelo);font-size:17px;letter-spacing:.12em;
 text-transform:uppercase;background:linear-gradient(180deg,#123f7d,#0a2448);border-bottom:2px solid var(--ouro);
 border-radius:4px 4px 0 0}
.pergaminho>h1~h1{margin-top:22px;border-radius:0}
.pergaminho a{color:#0f4fa3}
.noticia{padding:4px 2px 14px;border-bottom:1px solid rgba(120,90,30,.25);margin-bottom:12px;scroll-margin-top:80px}
.noticia:last-child{border-bottom:0;margin-bottom:0}
.noticia h2{color:#123f7d;font-size:20px;margin-bottom:2px}
.pergaminho .noticia .data{color:#7a6233}
.capa-noticia{display:block;width:100%;height:auto;margin:6px 0 10px;border:1px solid var(--linha-ouro);border-radius:4px}
.pergaminho .vazio{color:#7a6233}
.regras h2{color:#123f7d;font-size:18px;margin:18px 0 6px}
.regras h2:first-of-type{margin-top:4px}
.regras ul{margin:0;padding-left:20px}
.regras li{margin-bottom:6px;line-height:1.5}
.card{background:var(--painel);border:1px solid var(--linha);border-top:3px solid var(--ouro);border-radius:4px;
 padding:20px 22px;margin-bottom:18px}
.card>.botao{display:block;margin-bottom:8px}
.estreito{max-width:460px;margin-left:auto;margin-right:auto}
.estreito>h1{text-align:center}
/* dentro do site, o cartão ocupa a coluna toda e o formulário fica no meio */
.corpo .estreito{max-width:none}
.corpo .estreito>*{max-width:460px;margin-left:auto;margin-right:auto}
/* Criar conta: título e cartão vêm separados; os dois ocupam a coluna, como no Entrar, e só o formulário fica no meio */
.corpo section.estreito:not(.card)>*{max-width:none}
.corpo section.estreito:not(.card)>h1{background:var(--painel);border:1px solid var(--linha);border-top:3px solid var(--ouro);
 border-radius:4px;padding:14px 22px;margin-bottom:18px}
.corpo section.estreito:not(.card)>.card>*{max-width:460px;margin-left:auto;margin-right:auto}
.estreito footer{margin-top:14px;text-align:center;font-size:13px;color:var(--prata)}
.data{color:var(--prata);font-size:13px}
.selo{display:inline-block;font-size:12px;padding:1px 8px;border-radius:10px;border:1px solid var(--ouro);color:var(--ouro);
 margin-left:6px;vertical-align:middle}
.selo.verde{border-color:var(--verde);color:var(--verde)}
.vazio{color:var(--prata);font-style:italic}
.dica{margin:4px 0 0;font-size:13px;color:var(--prata)}
.aviso{border-left:3px solid var(--ouro);padding:6px 12px;background:rgba(214,163,61,.08)}
.erro{background:rgba(224,122,107,.12);border:1px solid var(--erro);color:#ffd9d2;padding:10px 12px;border-radius:4px}
p.ok{background:rgba(111,194,139,.1);border:1px solid var(--verde);color:#d8f5e1;padding:10px 12px;border-radius:4px}
.card.ok{text-align:center}
.card.ok strong{color:var(--ouro)}

/* abas e tabelas */
.abas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.abas a{padding:4px 12px;border:1px solid var(--linha);border-radius:14px;text-decoration:none;color:var(--prata);font-size:14px}
.abas a[aria-current=page]{background:var(--royal);border-color:var(--royal);color:#fff}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela>table{width:100%;border-collapse:collapse}
.tabela th{text-align:left;color:var(--prata);font-weight:normal;font-size:13px;letter-spacing:.04em;border-bottom:1px solid var(--linha);padding:6px 8px}
.tabela td{padding:7px 8px;border-bottom:1px solid rgba(191,203,221,.12)}
.tabela tr:hover td{background:rgba(23,105,210,.08)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.card:has(.tabela){overflow-x:auto}

/* o reino */
.intro-reino{max-width:760px;color:var(--prata);margin:0;line-height:1.55}
.reinos>.card{margin-bottom:0}
/* título solto de página interna ganha a mesma faixa dos cartões, para não flutuar sobre a arte */
.centro>h1:first-child{background:var(--painel);border:1px solid var(--linha);border-top:3px solid var(--ouro);border-radius:4px;padding:14px 22px;margin-bottom:18px}
.abertura>h1{margin-bottom:8px}
.reinos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px;align-items:stretch}
.titulo-coroa{margin:-6px 0 12px;font-size:13px;color:var(--prata)}
.coroa-grande.aguas>h2{color:#8fbcf5}
.coroa-grande.pedra>h2{color:#cfd6e2}
.coroa-grande.areias>h2{color:#e9c27a}
.coroa-grande .ficha{margin-top:12px;font-size:14px}
.aprovacao{display:block;width:100%;height:8px;margin:12px 0 4px;border-radius:4px;background:rgba(191,203,221,.15)}
.aprovacao .nivel{fill:var(--royal)}
.aprovacao.baixa .nivel{fill:var(--erro)}
.aprovacao .corte{fill:var(--ouro)}
.caminho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.caminho h3{font-size:15px;color:var(--ouro-claro);margin-bottom:6px}
.caminho ul{margin:0;padding-left:18px}
.caminho li{margin-bottom:5px;line-height:1.45}
.cronica{list-style:none;padding:0;margin:0}
.cronica li{padding:6px 0;border-bottom:1px solid rgba(191,203,221,.12)}
.cronica .data{display:inline-block;min-width:88px}

/* ficha do personagem */
.ficha{display:grid;grid-template-columns:max-content 1fr;gap:4px 18px;margin:0}
.ficha dt{color:var(--prata)}
.ficha dd{margin:0}
.mortes{list-style:none;padding:0;margin:0}
.mortes li{padding:5px 0;border-bottom:1px solid rgba(191,203,221,.12)}

/* Char Bazaar */
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.filtros label{margin:0;display:flex;flex-direction:column;gap:4px}
.filtros input{width:120px}
.filtros select{width:auto;min-width:150px}
.filtros button{width:auto;margin:0;padding:9px 18px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.leilao h2{margin-bottom:4px}
.leilao h2 a{color:var(--gelo);text-decoration:none}
.preco{font-size:18px}
.preco strong{font-size:26px;color:var(--ouro);font-weight:normal}
.paginas{display:flex;gap:10px;justify-content:center;align-items:center;margin:8px 0 18px}
.lance{max-width:460px;margin-top:14px}
.novo-personagem{max-width:460px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.novo-personagem h3{margin:0}
.novo-personagem .sexo{display:flex;gap:20px;margin-top:12px}
.novo-personagem .sexo label{margin:0;color:var(--gelo);font-size:16px}
.confirma{display:flex;gap:8px;align-items:flex-start;color:var(--gelo);font-size:14px}
.confirma input{margin-top:4px}

/* formulários */
label{display:block;margin:14px 0 4px;color:var(--prata);font-size:14px;letter-spacing:.03em}
input[type=email],input[type=tel],input[type=password],input[type=text],input[type=search],input[type=number],select{width:100%;
 padding:9px 11px;border-radius:4px;border:1px solid rgba(191,203,221,.45);background:#0b2347;color:var(--gelo);font:inherit}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--royal);outline-offset:1px}
.sexo{display:flex;gap:20px;margin-top:6px}
.sexo label{margin:0;color:var(--gelo);font-size:16px}
button{margin-top:20px;width:100%;padding:11px;border:0;border-radius:4px;background:var(--royal);color:#fff;
 font:16px var(--titulo);letter-spacing:.05em;cursor:pointer}
button:hover{background:var(--royal-claro)}

.corpo .pagina{max-width:none;margin:0;padding:0}
@media (max-width:980px){
 .corpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .corpo.interna{grid-template-columns:minmax(0,1fr)}
 .centro{grid-column:1/-1;order:-1}
}
@media (max-width:640px){
 .corpo{grid-template-columns:minmax(0,1fr)}
 .destaque{grid-template-columns:minmax(0,1fr)}
 .ticker{overflow-wrap:anywhere}
 .logo{font-size:40px}
 .lema{top:118px;padding:0 16px;font-size:13px;letter-spacing:.08em;line-height:1.4}
 .jogar{position:static;padding-top:172px}
 .cab{height:auto;padding-bottom:16px}
 .esq{order:-2}
 .botao-menu{display:flex;justify-content:space-between;align-items:center;cursor:pointer;margin-bottom:14px;padding:9px 14px;
  font:14px var(--titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro);
  background:linear-gradient(180deg,#173a70,#0d2550);border:1px solid var(--linha-ouro);border-radius:4px}
 .botao-menu::after{content:"\2630";font:18px/1 var(--texto);color:var(--ouro)}
 .abre:checked+.botao-menu::after{content:"\2715"}
 .abre:not(:checked)~.menus{display:none}
 .botao.grande{padding:12px 22px;font-size:15px}
 .cartas{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tabela{font-size:14px}
 .card{padding:16px}
 .reinos,.caminho{grid-template-columns:minmax(0,1fr)}
 .largo{display:none}
}

/* Eventos, Biblioteca e Loja */
.sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.sub a{padding:6px 14px;border:1px solid var(--linha-ouro);border-radius:20px;text-decoration:none;font:13px var(--titulo);letter-spacing:.06em}
.sub a:hover{background:rgba(224,181,90,.12)}
.wiki{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
.wiki-indice{border:1px solid var(--linha-ouro);border-radius:6px;padding:10px 14px;position:sticky;top:12px}
.wiki-indice h3{font:13px var(--titulo);letter-spacing:.08em;color:var(--ouro);margin:10px 0 4px}
.wiki-indice h3:first-child{margin-top:0}
.wiki-indice ul{list-style:none;margin:0;padding:0}
.wiki-indice li{margin:3px 0}
.wiki-indice a{text-decoration:none}
.wiki-indice a.atual{color:var(--ouro-claro);font-weight:bold}
.wiki-indice .vazio{margin:0;font-size:13px;opacity:.7}
.wiki-busca{display:flex;gap:8px;margin:0 0 14px}
.wiki-busca input{flex:1;min-width:0;padding:7px 9px;border:1px solid #b9a77a;border-radius:4px;background:#fffdf6;color:#1d2433}
.wiki-busca .botao{flex:none;width:auto;padding:7px 16px}
.wiki-texto h3{color:#123f7d;font-size:18px;margin:18px 0 6px}
.wiki-texto p{line-height:1.55}
.voltar-wiki{display:none}
/* no celular a lista de páginas sai: ela empurrava o texto; o índice da wiki já tem os cartões */
@media (max-width:760px){.wiki{grid-template-columns:1fr}.wiki-indice{display:none}.voltar-wiki{display:inline-block;margin:0 0 10px;font-size:14px}}
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;counter-reset:p}
.passos li{position:relative;padding:14px 14px 12px 52px;border:1px solid var(--linha);border-radius:6px;background:rgba(255,255,255,.02)}
.passos li::before{counter-increment:p;content:counter(p);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;
 background:linear-gradient(180deg,#f3d58a,#b8862e);color:#1a1205;font:bold 15px/28px var(--titulo);text-align:center}
.passos b{display:block;margin-bottom:4px}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
details.bloco{border:1px solid var(--linha);border-radius:6px;margin:0 0 10px;background:rgba(255,255,255,.02)}
details.bloco>summary{cursor:pointer;padding:10px 14px;font:15px var(--titulo);letter-spacing:.04em}
details.bloco[open]>summary{border-bottom:1px solid var(--linha)}
details.bloco .tabela{margin:0;padding:6px 8px 10px}
.premio{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.premio div{padding:14px;border:1px solid var(--linha-ouro);border-radius:6px;text-align:center;background:rgba(224,181,90,.05)}
.premio strong{display:block;font:22px var(--titulo);color:#f3d58a}
.vagas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.vagas section{border:1px solid var(--linha);border-radius:6px;padding:10px 12px}
.vagas h3{margin:0 0 6px;font-size:15px}
.vagas ol{margin:0;padding-left:20px;font-size:14px}
.vagas .livre{opacity:.55;font-style:italic}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dsem{text-align:center;font:12px var(--titulo);letter-spacing:.08em;opacity:.7;padding:4px 0}
.cal .dia{min-height:78px;padding:4px;border:1px solid var(--linha);border-radius:4px;background:rgba(255,255,255,.02);font-size:12px}
.cal .dia.fora{opacity:.25}
.cal .dia.hoje{border-color:#e0b55a}
.cal .num{display:block;font-weight:bold;margin-bottom:3px}
.cal .ev{display:block;margin:2px 0;padding:1px 4px;border-radius:3px;font-size:11px;line-height:1.35;color:#08111f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev{color:#08111f;padding:1px 4px;border-radius:3px}.ev.golpe{background:#d9534f;color:#fff}.ev.festa{background:#f3d58a}.ev.abertura{background:#1769D2;color:#fff}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:13px}
.legenda .ev{display:inline-block}
.pacotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pacote{padding:14px 10px;border:1px solid var(--linha-ouro);border-radius:6px;text-align:center;background:rgba(224,181,90,.04)}
.pacote strong{display:block;font:24px var(--titulo);color:#f3d58a}
.pacote .bonus{display:block;font-size:13px;color:#8fd18f;min-height:18px}
.pacote .preco{display:block;margin-top:6px;font:18px var(--titulo)}
.pacote small{display:block;opacity:.7;font-size:12px}
.pacote .lancamento{display:block;margin:8px 0 2px;padding:6px 8px;border:1px solid #6aa6f0;border-radius:4px;background:rgba(23,105,210,.18);font-size:12px;line-height:1.35;color:#e6f0ff}
.pacote .lancamento b{display:block;color:#9cc6ff;font-size:13px}
.pacote .lancamento small{opacity:.85;margin-top:2px}
.sim{color:#8fd18f;font-weight:bold}.nao{color:#e07a72}
.abas-loja{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.abas-loja div{padding:10px 12px;border:1px solid var(--linha);border-radius:6px}
.abas-loja b{display:block;font-family:var(--titulo);color:#f3d58a}
.termos h3{font-size:16px;margin:16px 0 6px}
@media (max-width:640px){.cal .dia{min-height:54px;padding:2px}.cal .ev{font-size:0;height:6px;padding:0}.cal .dsem{font-size:10px}}
.termos-texto{padding:4px 14px 12px}
.pacotes+.passos{margin-top:18px}
/* pilha de coins do pacote: as mesmas folhas da Loja do jogo (40 quadros de 80x50, a moeda gira e brilha).
   Parada gira de vez em quando (cada pacote em outro tempo); com o mouse em cima ou o botão em foco, gira sem parar. */
.pacote{transition:transform .15s,border-color .15s,box-shadow .15s}
.pacote:hover,.pacote:focus-within{transform:translateY(-3px);border-color:var(--ouro);box-shadow:0 6px 18px rgba(214,163,61,.18)}
.moeda{display:block;width:80px;height:50px;margin:0 auto 6px;background:0 0/80px 2000px repeat-y;
 animation:moeda-vez 6s steps(40) infinite}
.moeda.m1{background-image:url(/img/moedas-1.webp)}.moeda.m2{background-image:url(/img/moedas-2.webp)}
.moeda.m3{background-image:url(/img/moedas-3.webp)}.moeda.m4{background-image:url(/img/moedas-4.webp)}
.moeda.m5{background-image:url(/img/moedas-5.webp)}
.pacote:nth-child(2) .moeda{animation-delay:-.8s}.pacote:nth-child(3) .moeda{animation-delay:-1.6s}
.pacote:nth-child(4) .moeda{animation-delay:-2.4s}.pacote:nth-child(5) .moeda{animation-delay:-3.2s}
.pacote:nth-child(6) .moeda{animation-delay:-4s}.pacote:nth-child(7) .moeda{animation-delay:-4.8s}
.pacote:nth-child(8) .moeda{animation-delay:-5.6s}
.pacote:hover .moeda,.pacote:focus-within .moeda{animation:moeda-giro 1.6s steps(40) infinite}
@keyframes moeda-vez{0%{background-position:0 0}35%,100%{background-position:0 -2000px}}
@keyframes moeda-giro{to{background-position:0 -2000px}}
@media (prefers-reduced-motion:reduce){.moeda,.pacote:hover .moeda{animation:none}.pacote{transition:none}}
/* compra de coins pelo site: botão no pacote e página do pedido (QR Code + copia e cola) */
.pacote .comprar{margin:10px 0 0}.pacote .comprar .botao,.pacote a.comprar{display:block;width:100%;padding:8px 6px;font-size:12px}
.resumo-pedido{font-size:16px}.resumo-pedido strong{color:#f3d58a}
.pix{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin:14px 0}
.pix .qr{flex:0 0 auto;width:220px;max-width:100%;padding:8px;background:#fff;border-radius:6px;border:2px solid var(--linha-ouro)}
.pix .qr svg{display:block;width:100%;height:auto}
.pix .copia{flex:1 1 260px;min-width:0}
.pix .copia label{display:block;margin-bottom:6px;font-family:var(--titulo);color:var(--ouro-claro)}
.pix textarea{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:4px;border:1px solid rgba(191,203,221,.45);
 background:#0b2347;color:var(--gelo);font:12px/1.4 monospace;word-break:break-all;resize:vertical}
/* janela de cada Dom (só CSS: abre com :target, fecha voltando para #doms) */
.janela{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:20px}
.janela:target{display:flex}
.fundo-janela{position:absolute;inset:0;background:rgba(2,8,18,.82);cursor:default}
.quadro{position:relative;font-family:var(--texto);width:min(900px,100%);max-height:calc(100vh - 40px);overflow-y:auto;text-align:left;
 background:linear-gradient(180deg,#0d2448,#071a35);border:1px solid var(--linha-ouro);border-top:3px solid var(--ouro);
 border-radius:4px;padding:22px 24px;color:var(--gelo);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.quadro .fechar{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;color:var(--prata);text-decoration:none}
.quadro .fechar:hover{color:var(--ouro-claro)}
.quadro header{display:flex;gap:18px;align-items:center;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--linha)}
.quadro header img{width:92px;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--linha-ouro);border-radius:3px}
.quadro h3{margin:0;font:24px/1.15 var(--titulo);color:var(--ouro-claro);letter-spacing:.06em}
.quadro .voc{margin:4px 0 8px;color:var(--prata);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.quadro .mote{margin:0;font-style:italic;color:var(--gelo)}
.quadro .colunas{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.quadro h4{margin:0 0 8px;font:15px var(--titulo);color:var(--ouro);letter-spacing:.08em}
.quadro section>h4:not(:first-child){margin-top:16px}
.quadro p,.quadro li,.quadro dd{font-size:14px;line-height:1.55}
.quadro dl{margin:10px 0}
.quadro dt{color:var(--ouro-claro);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.quadro dd{margin:2px 0 0}
.quadro ul,.quadro ol{margin:0;padding-left:20px}
.quadro li{margin-bottom:6px}
.quadro b{color:var(--ouro-claro)}
.quadro .custo{color:var(--prata)}
.quadro .voto{border-left:2px solid var(--ouro);padding-left:10px}
.quadro .nota{color:var(--prata);font-size:13px}
.quadro .acoes{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
@media (max-width:640px){.janela{padding:0}.quadro{max-height:100vh;border-radius:0;padding:18px 16px}
 .quadro .colunas{grid-template-columns:1fr;gap:6px}.quadro header img{width:64px}.quadro h3{font-size:20px}}
/* página História */
.historia .era{margin:22px 0 4px;color:#123f7d;font-size:19px}
.historia .era small{display:block;font:13px var(--texto);color:#7a6233;letter-spacing:.04em}
.historia p{line-height:1.6;margin:8px 0}
.historia blockquote{margin:10px 0;padding:6px 14px;border-left:3px solid #b98523;font-style:italic;color:#4a3815}
.historia .coroas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.historia .coroas div{border:1px solid #c9a35a;border-radius:3px;padding:10px 12px;background:rgba(255,255,255,.35)}
.historia .coroas b{display:block;color:#123f7d;font-family:var(--titulo)}
@media (max-width:640px){.historia .coroas{grid-template-columns:1fr}}

/* ===== movimento do início (elunes.js é só enfeite; sem script tudo aparece parado) ===== */
/* neve de gelo e prata caindo sobre a arte do topo */
.cab::before,.cab::after{content:"";position:absolute;inset:-330px 0 0;pointer-events:none;z-index:0;will-change:transform;
 background-image:radial-gradient(2px 2px at 12% 20%,rgba(234,243,255,.9),transparent),
  radial-gradient(1.5px 1.5px at 28% 65%,rgba(191,203,221,.8),transparent),
  radial-gradient(2.5px 2.5px at 46% 35%,rgba(234,243,255,.7),transparent),
  radial-gradient(1.5px 1.5px at 63% 80%,rgba(241,208,138,.7),transparent),
  radial-gradient(2px 2px at 78% 15%,rgba(234,243,255,.85),transparent),
  radial-gradient(1.5px 1.5px at 91% 55%,rgba(191,203,221,.8),transparent);
 background-size:100% 330px;animation:neve 14s linear infinite;opacity:.75}
.cab::after{top:-260px;background-size:70% 260px;animation:neve-longe 22s linear infinite;opacity:.45}
/* a neve desce com transform (vai para a placa de vídeo, sem repintar): o bloco é uma altura de tela mais alto e o laço
   anda exatamente uma altura do desenho, então a volta ao início não pula */
@keyframes neve{to{transform:translateY(330px)}}
@keyframes neve-longe{to{transform:translateY(260px)}}
/* brilho que passa pelo logo */
.logo{background:linear-gradient(110deg,#fff4cf 0%,var(--ouro-claro) 30%,var(--ouro) 42%,#fffbe8 50%,var(--ouro) 58%,
 #9c6c1c 75%,var(--ouro-claro) 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;
 animation:entra .9s var(--suave) both,logo-brilho 7s ease-in-out 1s infinite}
@keyframes logo-brilho{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
/* entrada do topo: logo, lema e botão aparecem em sequência (translate, para não brigar com o transform do logo) */
@keyframes entra{from{opacity:0;translate:0 10px}}
.lema{animation:entra .9s var(--suave) .15s both}
.jogar{animation:entra .9s var(--suave) .3s both}
/* a arte do topo anda mais devagar que a página, pela própria rolagem (sem script) */
@supports (animation-timeline:scroll()){
 @media (min-width:981px) and (prefers-reduced-motion:no-preference){
  body::before{animation:parallax linear both;animation-timeline:scroll(root);animation-range:0 600px}
 }
}
@keyframes parallax{to{transform:translateY(210px)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* caixas surgem ao entrar na tela (só navegador que conhece animation-timeline) */
@supports (animation-timeline:view()){
 .inicio .caixa{animation:surge both linear;animation-timeline:view();animation-range:entry 0% entry 40%}
}
/* sem animation-timeline (Firefox, Safari antigo) o elunes.js marca .visto quando a caixa entra na tela */
.surge-js .inicio .caixa:not(.visto){opacity:0;translate:0 24px}
.surge-js .inicio .caixa{transition:opacity .6s var(--suave),translate .6s var(--suave),border-color .25s,box-shadow .25s}
@keyframes surge{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.botao{transition:transform .25s var(--suave),box-shadow .25s var(--suave),background .25s,filter .25s}
.botao:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.botao.ouro:hover{box-shadow:0 0 18px rgba(241,208,138,.45)}
.inicio .caixa{transition:border-color .25s var(--suave),box-shadow .25s var(--suave)}
.inicio .caixa:hover{border-color:var(--ouro);box-shadow:0 0 0 1px rgba(214,163,61,.25),0 8px 24px rgba(0,0,0,.35)}

/* seletor dos Dons: abas com rádio, um palco por Dom */
.seletor{margin:0 0 14px}
.seletor .abas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.seletor .abas label{position:relative;display:block;cursor:pointer;border:1px solid var(--linha-ouro);border-radius:3px;
 overflow:hidden;background:#000;transition:transform .25s var(--suave),border-color .25s,box-shadow .25s var(--suave)}
.seletor .abas img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;opacity:.6;transition:opacity .3s var(--suave)}
.seletor .abas span{position:absolute;inset:auto 0 0;padding:14px 4px 5px;text-align:center;font:12px/1.2 var(--titulo);
 letter-spacing:.06em;color:var(--gelo);background:linear-gradient(transparent,rgba(0,0,0,.85))}
.seletor .abas small{display:block;font:11px var(--texto);color:var(--prata)}
.seletor .abas label:hover{transform:translateY(-2px)}
.seletor .abas label:hover img{opacity:.9}
.palcos{margin-top:8px}
.dom-palco{display:none;grid-template-columns:200px 1fr;gap:16px;align-items:start;padding:14px;border:1px solid var(--linha-ouro);
 border-radius:3px;background:linear-gradient(135deg,rgba(11,33,66,.95),rgba(5,15,32,.95))}
.dom-palco .arte{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;border:1px solid var(--linha-ouro)}
.dom-palco h3{font-size:22px;margin:0 0 2px}
.dom-palco .voc{margin:0 0 8px;color:var(--prata);font-size:13px;letter-spacing:.06em}
.dom-palco .mote{font:italic 19px/1.35 "Cormorant Garamond",Georgia,serif;color:var(--ouro-claro);margin:0 0 8px}
.dom-palco .acoes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
#dom-sel-morte:checked~.palcos .morte,#dom-sel-vida:checked~.palcos .vida,#dom-sel-luz:checked~.palcos .luz,
#dom-sel-pedra:checked~.palcos .pedra,#dom-sel-vento:checked~.palcos .vento{display:grid;animation:palco .45s var(--suave)}
@keyframes palco{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.seletor .morte{--cor:#8a5cd6}.seletor .vida{--cor:#6FC28B}.seletor .luz{--cor:#F1D08A}.seletor .pedra{--cor:#b08a5a}
.seletor .vento{--cor:#7fd6e6}
.dom-palco{border-top:3px solid var(--cor,var(--ouro))}.dom-palco h3{color:var(--cor,var(--ouro))}
#dom-sel-morte:checked~.abas .morte,#dom-sel-vida:checked~.abas .vida,#dom-sel-luz:checked~.abas .luz,
#dom-sel-pedra:checked~.abas .pedra,#dom-sel-vento:checked~.abas .vento{border-color:var(--cor);
 box-shadow:0 0 14px var(--cor),inset 0 -3px 0 var(--cor)}
#dom-sel-morte:checked~.abas .morte img,#dom-sel-vida:checked~.abas .vida img,#dom-sel-luz:checked~.abas .luz img,
#dom-sel-pedra:checked~.abas .pedra img,#dom-sel-vento:checked~.abas .vento img{opacity:1}
#dom-sel-morte:focus-visible~.abas .morte,#dom-sel-vida:focus-visible~.abas .vida,#dom-sel-luz:focus-visible~.abas .luz,
#dom-sel-pedra:focus-visible~.abas .pedra,#dom-sel-vento:focus-visible~.abas .vento{outline:2px solid var(--ouro)}

/* contagem até a abertura */
.contagem{margin:0 0 14px;padding:14px;text-align:center;border:1px solid var(--linha-ouro);border-radius:3px;
 background:radial-gradient(ellipse at top,rgba(23,105,210,.35),rgba(5,15,32,.95) 70%)}
.contagem p{margin:0 0 8px;font-family:var(--titulo);letter-spacing:.08em;color:var(--prata)}
.contagem .partes{display:flex;justify-content:center;gap:10px}
.contagem .partes span{min-width:70px;padding:8px 6px;border:1px solid var(--linha-ouro);border-radius:3px;background:rgba(0,0,0,.35)}
.contagem b{display:block;font:34px/1 var(--titulo);color:var(--ouro-claro);text-shadow:0 0 12px rgba(214,163,61,.45);
 font-variant-numeric:tabular-nums}
.contagem small{display:block;margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--prata)}
.contagem.chegou b{animation:pulso-ouro 1.2s ease-in-out infinite}
@keyframes pulso-ouro{50%{text-shadow:0 0 22px rgba(241,208,138,.95)}}

/* carrossel das notícias: rolagem com encaixe; setas e pontos vêm do elunes.js */
.carrossel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}
.carrossel>*{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.carrossel:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.carrossel-setas{display:flex;justify-content:center;align-items:center;gap:6px;margin:4px 0 14px}
.carrossel-setas button{cursor:pointer;border:1px solid var(--linha-ouro);background:var(--caixa);color:var(--ouro-claro)}
.carrossel-setas .seta{width:30px;height:30px;border-radius:50%;font:20px/1 var(--titulo);padding:0 0 3px;display:grid;place-items:center}
.carrossel-setas .ponto{width:10px;height:10px;padding:0;border-radius:50%;background:rgba(191,203,221,.25)}
.carrossel-setas .ponto.ativo{background:var(--ouro);border-color:var(--ouro-claro)}
.carrossel-setas button:hover{border-color:var(--ouro)}

/* mapa de Elunes: SVG desenhado + pinos em HTML com a frase de cada cidade */
.mapa{position:relative;aspect-ratio:1543/1482;border-radius:3px;
 background:radial-gradient(ellipse at 40% 45%,#123f7d,#071a35 75%);border:1px solid var(--linha-ouro)}
.mapa>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mapa .reinos text{font-family:var(--titulo);letter-spacing:.2em}
.cidade{position:absolute;transform:translate(-50%,-50%);z-index:2;outline:none}
.cidade .pino{display:block;width:12px;height:12px;margin:0 auto;border-radius:50%;background:var(--gelo);
 border:2px solid var(--royal);position:relative}
/* pulso do pino: anel que cresce e some (transform e opacity, sem repintar a sombra) */
.cidade .pino::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(234,243,255,.6);
 animation:pino 2.6s ease-out infinite}
.cidade.capital .pino{width:16px;height:16px;background:var(--ouro-claro);border-color:#9c6c1c}
@keyframes pino{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(2.6);opacity:0}}
.cidade>b{display:block;margin-top:2px;font:11px var(--titulo);letter-spacing:.06em;white-space:nowrap;color:var(--gelo);
 text-shadow:0 1px 2px #000,0 0 4px #000;text-align:center;font-weight:normal}
.cidade.capital>b{color:var(--ouro-claro);font-size:12px}
.cidade .dica{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:min(230px,60vw);margin:0;
 padding:8px 10px;font-size:13px;line-height:1.4;background:rgba(5,15,32,.96);border:1px solid var(--ouro);border-radius:3px;
 color:var(--gelo);opacity:0;visibility:hidden;translate:0 4px;pointer-events:none;
 transition:opacity .25s var(--suave),translate .25s var(--suave),visibility 0s linear .25s}
.cidade .dica strong{display:block;font-family:var(--titulo);color:var(--ouro-claro);font-weight:normal}
.cidade:hover,.cidade:focus{z-index:4}
.cidade:hover .dica,.cidade:focus .dica{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.cidade:focus .pino{outline:2px solid var(--ouro);outline-offset:2px}
.c-wisland{left:18.7%;top:8.1%}.c-andorhal{left:26.5%;top:22.5%}.c-moonglade{left:41.4%;top:30.9%}
.c-zanknore{left:28.6%;top:44%}.c-iceforge{left:40.8%;top:58.3%}.c-tanaris{left:11.9%;top:62.7%}
.c-windywaste{left:7.8%;top:46.3%}.c-nighthaven{left:66.2%;top:91.9%}.c-paradise{left:35.3%;top:72.7%}
.c-southshire{left:92.2%;top:42.9%}
/* perto da borda a dica abre para dentro do mapa */
.c-southshire .dica,.c-nighthaven .dica{left:auto;right:-6px;transform:none}
.c-windywaste .dica,.c-tanaris .dica,.c-wisland .dica{left:-6px;transform:none}
.c-nighthaven .dica,.c-paradise .dica,.c-tanaris .dica{top:auto;bottom:calc(100% + 4px)}
.lista-cidades{margin-top:10px}
.lista-cidades summary{cursor:pointer;font-family:var(--titulo);color:var(--ouro-claro);letter-spacing:.06em}
.lista-cidades ul{margin:8px 0 0;padding-left:18px;font-size:14px}
.lista-cidades li{margin-bottom:4px}

@media (max-width:640px){
 .seletor .abas span{font-size:10px}.seletor .abas small{display:none}
 .dom-palco{grid-template-columns:1fr}.dom-palco .arte{max-width:180px;margin:0 auto}
 .contagem .partes{gap:6px}.contagem .partes span{min-width:56px}.contagem b{font-size:26px}
 .cidade>b{font-size:9px}.cidade.capital>b{font-size:10px}.cidade .pino{width:9px;height:9px}
 .cidade.capital .pino{width:12px;height:12px}
}
@media (prefers-reduced-motion:reduce){
 .cab::before,.cab::after,.logo,.lema,.jogar,.cidade .pino::after,.contagem.chegou b{animation:none}
 .cidade .pino::after{display:none}
 .cidade .dica,.surge-js .inicio .caixa{transition:none;translate:none}
 .inicio .caixa,.dom-palco{animation:none!important}
 .botao,.botao:hover,.seletor .abas label,.seletor .abas label:hover{transition:none;transform:none}
 .carrossel{scroll-behavior:auto}
}
/* /parceiros: cartão de cada streamer; quem está ao vivo ganha a borda verde */
.lista-parceiros{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:14px 0 6px}
.parceiro{border:1px solid #c9b07a;border-left:3px solid #c9b07a;border-radius:4px;padding:10px 14px;background:rgba(255,255,255,.35)}
.parceiro.no-ar{border-left-color:var(--verde)}
.parceiro h3{margin:0 0 4px;font-size:17px;color:#123f7d}
.parceiro p{margin:6px 0 0}
.parceiro .data{color:#6b5a38;font-size:12px}
.parceiro .botao{display:inline-block;margin-right:8px;padding:6px 14px;font-size:13px;color:#fff}
.parceiro .ref{display:block;margin-top:6px;font-size:13px}
.ao-vivo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verde);margin-right:5px;
 box-shadow:0 0 6px var(--verde)}
.selo.offline{border-color:#9a8a6a;color:#7a6233}
.titulo-live{font-size:13px;color:#5b4a2a;font-style:italic}
/* Criar conta: presente com contagem regressiva no topo e aviso de cadastro (site/cadastro.js) */
.cadastro .presente{display:block;padding:14px 18px;margin-bottom:14px;border:1px solid var(--ouro);border-radius:4px;text-align:center;
 color:var(--prata);background:linear-gradient(180deg,rgba(214,163,61,.18),rgba(214,163,61,.04))}
.cadastro .presente strong{display:block;font:22px/1.25 var(--titulo);color:var(--ouro-claro);margin-bottom:8px}
.cadastro .presente>span{display:block;font-size:14px;line-height:1.45}
.cadastro .presente .contagem{margin:2px 0 4px;font-size:26px;font-weight:bold;color:#fff;font-variant-numeric:tabular-nums;
 letter-spacing:.02em}
.cadastro button[type=submit]{width:100%;margin-top:20px;padding:13px;font-size:17px}
.cadastro .garantia{margin:8px 0 0;text-align:center;font-size:13px;color:var(--prata)}
.recentes{display:none}
.aviso-cadastro{position:fixed;left:16px;bottom:16px;z-index:50;max-width:min(320px,calc(100vw - 32px));padding:10px 14px;
 border:1px solid var(--ouro);border-left-width:4px;border-radius:4px;background:rgba(8,18,40,.96);color:var(--gelo);font-size:14px;
 line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s;
 pointer-events:none}
.aviso-cadastro.visivel{opacity:1;transform:none}
.aviso-cadastro strong{color:var(--ouro-claro)}
.aviso-cadastro span{display:block;font-size:12px;color:var(--prata)}
@media (max-width:640px){.cadastro .presente strong{font-size:19px}.cadastro .presente .contagem{font-size:18px;white-space:nowrap}}
/* cadastro enxuto (25/10): data da abertura no presente, olhinho da senha, aviso na hora embaixo do campo */
.presente .abertura{margin:2px 0 8px;color:var(--gelo)}
.senha-caixa{position:relative}
.senha-caixa input{padding-right:44px}
.ver-senha{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:auto;margin:0;padding:6px 8px;background:transparent;font-size:18px;line-height:1}
.ver-senha:hover{background:rgba(255,255,255,.08)}
.na-hora{margin:4px 0 0;font-size:13px;min-height:0}
.na-hora.ok{color:#8fd9a8}.na-hora.ruim{color:#ffb4a6}
.na-hora a{color:inherit;text-decoration:underline}

/* Páginas internas (body.int, 30/10): cabeçalho baixo para o conteúdo aparecer logo, faixa de título com a arte do mundo,
   ícones e movimento só com CSS. Script continua só no início e no cadastro, como manda a CSP. */
body.int::before{height:260px}
body.int{background:linear-gradient(180deg,rgba(5,15,32,.1) 0,rgba(5,15,32,.1) 100px,rgba(5,15,32,.72) 250px)}
.int .cab{height:148px}
.int .logo{top:24px;font-size:44px}
.int .lema{top:88px;font-size:12px}
.int .jogar{left:auto;right:16px;top:24px;text-align:right}
@media (max-width:1040px){.int .lema{display:none}}
.int .jogar small{display:none}
.int .jogar br{display:none}
.int .cab .abertura{margin:0 0 8px auto;font-size:12px}
.sec-noticias{--foco:100% 35%}.sec-conta{--foco:100% 75%}.sec-comunidade{--foco:70% 30%}.sec-biblioteca{--foco:88% 55%}.sec-loja{--foco:100% 15%}
.int .pergaminho>h1:first-child,.int .centro>h1:first-child,.int .centro>section>h1:first-child{
 background:linear-gradient(90deg,rgba(7,26,53,.97) 40%,rgba(7,26,53,.25)),url(/img/capa.webp) var(--foco,100% 40%)/cover no-repeat,var(--marinho);
 color:var(--gelo);text-shadow:0 2px 3px #000}
.int .pergaminho>h1:first-child{padding:24px 18px;font-size:20px}
.int .centro>h1:first-child,.int .centro>section:not(.pergaminho)>h1:first-child{padding:24px 22px;border-radius:4px;border-top:2px solid var(--ouro);border-bottom:1px solid var(--linha-ouro)}
.ico-t{width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.2em;fill:none;stroke:var(--ouro);stroke-width:1.6;
 stroke-linecap:round;stroke-linejoin:round;flex:none}
.pergaminho h2 .ico-t,.pergaminho h3 .ico-t,.wiki-cartao .ico-t{stroke:#a9771d}
.pergaminho>h1 .ico-t{stroke:var(--ouro-claro)}
/* wiki: cartões no índice e sumário da página */
.wiki-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 16px}
.wiki-cartao{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid rgba(185,133,35,.5);border-radius:6px;
 background:rgba(255,255,255,.45);color:#2a1f0e;text-decoration:none;transition:translate .2s var(--suave),box-shadow .2s,border-color .2s}
.wiki-cartao .ico-t{width:30px;height:30px;margin:2px 0 0}
.wiki-cartao b{display:block;font:15px var(--titulo);color:#123f7d;letter-spacing:.03em}
.wiki-cartao small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#54452a}
.wiki-cartao:hover,.wiki-cartao:focus-visible{translate:0 -3px;border-color:#b98523;box-shadow:0 6px 14px rgba(70,45,5,.28);color:#2a1f0e}
.nesta-pagina{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px;padding:10px 12px;border:1px solid rgba(185,133,35,.45);
 border-radius:6px;background:rgba(255,255,255,.4)}
.nesta-pagina b{width:100%;font:13px var(--titulo);letter-spacing:.08em;color:#7a5a18}
.nesta-pagina a{padding:2px 10px;border:1px solid rgba(15,79,163,.3);border-radius:12px;font-size:13px;text-decoration:none;
 transition:background .2s,color .2s}
.nesta-pagina a:hover{background:#123f7d;color:var(--gelo)}
.wiki-texto h3{scroll-margin-top:14px;padding-bottom:4px;border-bottom:1px solid rgba(185,133,35,.35)}
.wiki-texto h3:target{color:#0f4fa3;border-bottom-color:#b98523}
.regras h2{padding-bottom:4px;border-bottom:1px solid rgba(185,133,35,.35)}
/* ranking e online */
.medalha{display:inline-block;width:26px;height:26px;border-radius:50%;text-align:center;font:bold 13px/26px var(--titulo);color:#1a1205;
 box-shadow:0 1px 3px rgba(0,0,0,.6)}
.medalha.m1{background:linear-gradient(160deg,#fff0bd,#d6a33d 60%,#9c6c1c)}
.medalha.m2{background:linear-gradient(160deg,#fff,#bfcbdd 60%,#7e8ba0)}
.medalha.m3{background:linear-gradient(160deg,#f3c79a,#b9783f 60%,#7c4a20)}
.dom-chip{display:inline-flex;align-items:center;gap:7px}
.dom-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--linha-ouro)}
.tabela tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
.tabela tr:hover td{background:rgba(23,105,210,.14)}
/* detalhes de interação */
.abas a,.sub a{transition:background .2s,border-color .2s,color .2s,transform .2s var(--suave)}
.abas a:hover,.sub a:hover{border-color:var(--ouro);color:var(--gelo);transform:translateY(-1px)}
.oferta,.passos li,.vagas section,.abas-loja div,.coroa-grande{transition:translate .2s var(--suave),border-color .2s,box-shadow .2s}
.oferta:hover,.passos li:hover,.vagas section:hover,.abas-loja div:hover{translate:0 -3px;border-color:var(--linha-ouro);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.pacote{transition:translate .15s,border-color .15s,box-shadow .15s}
.pacote:hover{translate:0 -3px;border-color:var(--ouro);box-shadow:0 6px 16px rgba(214,163,61,.2)}
details.bloco>summary{transition:background .2s,color .2s}
details.bloco>summary:hover{background:rgba(23,105,210,.12);color:var(--ouro-claro)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:2px}
.ao-topo{position:fixed;right:16px;bottom:16px;z-index:20;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--linha-ouro);
 border-radius:50%;background:rgba(8,25,50,.92);box-shadow:0 3px 10px rgba(0,0,0,.6);transition:background .2s,transform .2s var(--suave)}
.ao-topo svg{width:20px;height:20px;fill:none;stroke:var(--ouro-claro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ao-topo:hover{background:var(--royal);transform:translateY(-3px)}
.leitura{display:none}
@supports (animation-timeline:scroll()){
 .leitura{display:block;position:fixed;left:0;top:0;z-index:30;width:100%;height:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--royal),var(--ouro));animation:leitura linear both;animation-timeline:scroll(root)}
 .ao-topo{animation:ao-topo linear both;animation-timeline:scroll(root);animation-range:150px 300px}
 @media (prefers-reduced-motion:no-preference){
  .wiki-cartao,.pacote,.oferta,.passos li,.vagas section,.abas-loja div,.coroa-grande{animation:surge both linear;animation-timeline:view();animation-range:entry 0% entry 35%}
 }
}
@keyframes leitura{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ao-topo{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media (prefers-reduced-motion:reduce){.wiki-cartao,.abas a,.sub a,.oferta,.passos li,.vagas section,.abas-loja div{transition:none}.wiki-cartao:hover,.oferta:hover,.passos li:hover,.vagas section:hover,.abas-loja div:hover,.pacote:hover{translate:none}.abas a:hover,.sub a:hover,.ao-topo:hover{transform:none}}
@media (max-width:640px){
 .int .cab{height:auto;padding-bottom:12px}
 .int .logo{top:16px;font-size:32px}
 .int .lema{display:none}
 .int .jogar{position:static;padding-top:70px;text-align:center}
 .int .cab .abertura{margin:0 auto 8px}
 .int .pergaminho>h1:first-child{padding:18px 14px;font-size:17px}
 .ao-topo{right:12px;bottom:12px}
}