:root{
--ouro:#F0C000; --ouro-claro:#F0D800; --laranja:#F07818;
--ciano:#00A8F0; --ciano-claro:#3BC4FF;
--vermelho:#D81830; --ardosia:#484860;
--tinta:#181818;
--fundo:#151515; --painel:#1D1D1D; --alto:#272727;
--borda:#ffffff14; --borda-forte:#ffffff26;
--texto:#F2F2F2; --texto-2:#A8A8A8; --texto-3:#767676;
--serif:'Baloo 2',system-ui,sans-serif;
--sans:'Outfit',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--topo:60px;
--raio:12px;
--contorno:2.5px;
}
:root[data-tema="claro"]{
--fundo:#F4F6F8; --painel:#FFFFFF; --alto:#EBEFF3;
--borda:#00000014; --borda-forte:#00000026;
--texto:#181818; --texto-2:#55606C; --texto-3:#8A94A0;
--ciano:#0077C8; --ouro:#B98600;
}
*{box-sizing:border-box}
html{background:var(--fundo); scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none!important; transition:none!important}
}
body{
margin:0; background:var(--fundo); color:var(--texto);
font-family:var(--sans); font-size:16px; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
a{color:var(--ciano); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); letter-spacing:-.01em; margin:0}
.contorno{-webkit-text-stroke:var(--contorno) var(--tinta); paint-order:stroke fill}
.topo{
position:sticky; top:0; z-index:50; height:var(--topo);
display:flex; align-items:center; gap:18px; padding:0 20px;
background:color-mix(in srgb,var(--fundo) 88%,transparent);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--borda);
}
.marca{display:flex; align-items:center; gap:10px; flex:none}
.marca img{width:36px; height:36px; display:block}
.marca .nome{
font-family:var(--serif); font-weight:800; font-size:19px; line-height:1;
letter-spacing:-.02em;
}
.marca .nome i{font-style:normal; color:var(--ouro)}
.marca .nome b{font-weight:800; color:var(--ciano)}
@media (max-width:680px){ .marca .nome{display:none} }
.busca{position:relative; flex:1; max-width:460px}
.busca-campo{
display:flex; align-items:center; gap:9px; height:38px; padding:0 12px;
background:var(--painel); border:1px solid var(--borda-forte); border-radius:10px;
transition:border-color .15s, box-shadow .15s;
}
.busca-campo:focus-within{
border-color:var(--ciano); box-shadow:0 0 0 3px color-mix(in srgb,var(--ciano) 22%,transparent);
}
.busca input{
flex:1; border:0; background:none; outline:none; color:var(--texto);
font-family:var(--sans); font-size:14.5px; min-width:0;
}
.busca input::placeholder{color:var(--texto-3)}
.busca .lupa{color:var(--texto-3); flex:none; display:grid; place-items:center}
.busca kbd{
font-family:var(--mono); font-size:11px; color:var(--texto-3); flex:none;
border:1px solid var(--borda-forte); border-radius:5px; padding:1px 6px;
}
.resultados{
position:absolute; top:46px; left:0; right:0; z-index:60;
background:var(--painel); border:1px solid var(--borda-forte); border-radius:10px;
box-shadow:0 18px 44px -16px rgba(0,0,0,.7); overflow:hidden; padding:5px;
}
.resultados[hidden]{display:none!important}
.res{
display:flex; align-items:center; gap:11px; padding:9px 11px;
border-radius:8px; cursor:pointer; color:var(--texto);
}
.res:hover,.res.sel{background:var(--alto)}
.res .ic{
width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
background:color-mix(in srgb,var(--ciano) 16%,transparent); font-size:14px;
}
.res b{font-weight:600; font-size:14.5px; display:block; line-height:1.3}
.res span{font-size:12.5px; color:var(--texto-3); display:block}
.res mark{background:color-mix(in srgb,var(--ouro) 32%,transparent); color:inherit; border-radius:3px}
.vazio{padding:16px; text-align:center; color:var(--texto-3); font-size:14px}
.acoes{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none}
.bt{
display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
border:1px solid transparent; border-radius:10px; cursor:pointer;
font-family:var(--sans); font-size:14px; font-weight:600;
background:none; color:var(--texto-2); transition:color .15s, background .15s;
}
.bt:hover{color:var(--texto); background:var(--alto)}
.bt:focus-visible{outline:2px solid var(--ciano); outline-offset:2px}
.bt-jogar{
background:var(--ouro); color:#241A00; border-color:var(--tinta); border-width:2px;
box-shadow:0 3px 0 var(--tinta);
}
.bt-jogar:hover{background:var(--ouro-claro); color:#241A00; transform:translateY(-1px);
box-shadow:0 4px 0 var(--tinta)}
.bt-jogar:active{transform:translateY(2px); box-shadow:0 1px 0 var(--tinta)}
@media (max-width:560px){ .bt-jogar span{display:none} }
.heroi{
position:relative; overflow:hidden;
padding:56px 20px 46px; text-align:center;
border-bottom:1px solid var(--borda);
}
.heroi::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(700px 320px at 50% -12%, color-mix(in srgb,var(--ciano) 20%,transparent), transparent 68%),
radial-gradient(520px 260px at 82% 108%, color-mix(in srgb,var(--ouro) 13%,transparent), transparent 70%);
}
.heroi > *{position:relative; z-index:1}
.heroi img.logo{
width:112px; height:112px; display:block; margin:0 auto 16px;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.heroi h1{
font-size:clamp(31px,5.6vw,52px); font-weight:800; line-height:1.05;
margin:0 0 12px; text-wrap:balance;
}
.heroi h1 i{font-style:normal; color:var(--ouro)}
.heroi p{
max-width:56ch; margin:0 auto; color:var(--texto-2); font-size:17px;
}
.heroi p b{color:var(--texto); font-weight:600}
.secao{max-width:1120px; margin:0 auto; padding:42px 20px}
.secao-topo{display:flex; align-items:baseline; gap:14px; margin-bottom:6px; flex-wrap:wrap}
.secao-topo h2{font-size:25px; font-weight:800}
.secao-topo .mais{margin-left:auto; font-size:14px; font-weight:600}
.secao-nota{color:var(--texto-3); font-size:14.5px; margin:0 0 22px; max-width:70ch}
.grade{
display:grid; gap:14px;
grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
}
.atalho{
position:relative; display:flex; flex-direction:column; gap:9px;
padding:18px 16px 16px; border-radius:var(--raio);
background:var(--painel); border:1px solid var(--borda);
color:var(--texto); overflow:hidden; isolation:isolate;
transition:transform .16s ease, border-color .16s, box-shadow .16s;
}
.atalho::after{
content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:-1;
background:var(--cor,var(--ciano)); transform:scaleX(0); transform-origin:left;
transition:transform .22s ease;
}
.atalho:hover{
transform:translateY(-3px); text-decoration:none;
border-color:color-mix(in srgb,var(--cor,var(--ciano)) 55%,transparent);
box-shadow:0 14px 30px -16px rgba(0,0,0,.75);
}
.atalho:hover::after{transform:scaleX(1)}
.atalho:focus-visible{outline:2px solid var(--cor,var(--ciano)); outline-offset:2px}
.atalho .emoji{
width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
font-size:24px; line-height:1; flex:none;
background:color-mix(in srgb,var(--cor,var(--ciano)) 17%,transparent);
transition:transform .2s ease;
}
.atalho:hover .emoji{transform:scale(1.09) rotate(-5deg)}
.atalho b{font-family:var(--serif); font-size:17px; font-weight:700; line-height:1.2}
.atalho span{font-size:13px; color:var(--texto-3); line-height:1.45}
.novidades{display:flex; flex-direction:column}
.nova{
display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:15px;
align-items:start; padding:15px 4px; border-bottom:1px solid var(--borda);
color:var(--texto);
}
.nova:last-child{border-bottom:0}
.nova:hover{text-decoration:none}
.nova:hover b{color:var(--ciano)}
.selo{
font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em;
text-transform:uppercase; padding:3px 8px; border-radius:5px; white-space:nowrap; margin-top:3px;
}
.selo.novo{color:#0C2A12; background:var(--ouro)}
.selo.att{color:var(--ciano); background:color-mix(in srgb,var(--ciano) 15%,transparent)}
.nova b{display:block; font-weight:600; font-size:15.5px; margin-bottom:1px}
.nova p{margin:0; color:var(--texto-3); font-size:13.5px}
.nova time{font-family:var(--mono); font-size:12px; color:var(--texto-3); white-space:nowrap; margin-top:4px}
.rodape{border-top:1px solid var(--borda); margin-top:26px}
.rodape .secao{padding-top:32px; padding-bottom:32px}
.rodape-grade{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.rodape h4{
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; color:var(--texto-3); margin:0 0 11px;
}
.rodape ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.rodape a{color:var(--texto-2); font-size:14px}
.rodape a:hover{color:var(--ciano)}
.rodape-fim{
border-top:1px solid var(--borda); margin-top:26px; padding-top:18px;
color:var(--texto-3); font-size:13px; display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}
@media (max-width:620px){
.grade{grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:11px}
.atalho{padding:14px 13px}
.nova{grid-template-columns:auto minmax(0,1fr)}
.nova time{grid-column:2}
.heroi{padding:38px 18px 32px}
.secao{padding:32px 18px}
}
.busca{min-width:0}
@media (max-width:560px){
.topo{gap:10px; padding:0 12px}
.busca kbd{display:none}
.busca-campo{padding:0 10px}
.acoes{gap:4px}
.acoes .bt{padding:0 10px}
}