/* NOIRIS GAMES: camada institucional em preto, champanhe e off-white; a cor forte vem da arte de cada jogo. */
:root{--preto:#050505;--grafite:#111110;--linha:rgba(245,244,242,.14);--areia:#C8B89A;--branco:#F5F4F2;--apagado:#B4B0A8;--tinta:#16140F;--tinta-2:#55504A;
--titulo:'Space Grotesk',system-ui,sans-serif;--corpo:'Inter',system-ui,sans-serif;--raio:14px;--barra:68px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + 28px);-webkit-text-size-adjust:100%}
body{background:var(--preto);color:var(--branco);font:400 17px/1.65 var(--corpo);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.1rem);font-weight:300}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:300;margin-bottom:18px}
h3{font-size:1.2rem;font-weight:500;margin-bottom:6px}
.caixa{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sobre{font:500 .76rem/1.3 var(--titulo);letter-spacing:.24em;text-transform:uppercase;color:var(--areia);margin-bottom:16px}
.titulo-pt{font:300 clamp(1.25rem,2.6vw,1.9rem)/1.3 var(--titulo);margin-top:14px}
.linha-fina{color:var(--apagado);max-width:60ch;margin-top:14px}
.miudo{font-size:.84rem;color:var(--apagado)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:fixed;left:16px;top:-80px;z-index:100;background:var(--branco);color:var(--preto);padding:10px 16px;border-radius:8px;font-weight:500}
.pular:focus{top:12px}
:focus-visible{outline:2px solid var(--areia);outline-offset:3px;border-radius:4px}

/* vidro: só no que flutua */
.vidro{position:relative;background:rgba(24,23,21,.72);border:1px solid rgba(245,244,242,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 34px rgba(0,0,0,.34)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.vidro{background:rgba(24,23,21,.44);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}}
.vidro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(180px circle at var(--x,50%) var(--y,0),rgba(255,255,255,.14),transparent 70%)}
@media (hover:hover) and (pointer:fine){.vidro:hover::after{opacity:1}}
@media (prefers-reduced-transparency:reduce){.vidro{background:#191816;-webkit-backdrop-filter:none;backdrop-filter:none}}
.leve .vidro{background:#191816;-webkit-backdrop-filter:none;backdrop-filter:none}

/* navegação */
.topo{position:fixed;inset:12px 0 auto;z-index:50;padding-inline:clamp(10px,2.4vw,28px)}
.barra{display:flex;align-items:center;gap:20px;width:min(1240px,100%);margin-inline:auto;height:var(--barra);padding-inline:22px;border-radius:20px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;font:300 1.05rem var(--titulo);letter-spacing:.24em;white-space:nowrap}
.marca b,.marca-grande b,.rodape-marca b{font-weight:300;color:var(--areia)}
.marca-grande{font:300 clamp(1.45rem,3.2vw,2.5rem)/1.15 var(--titulo);letter-spacing:.24em;margin-bottom:10px}
.divisao{font-size:.95rem;color:var(--apagado);margin-bottom:36px}
.divisao a{color:var(--areia);text-underline-offset:3px}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu>li>a,.abre-jogos{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--branco);font:400 .9rem var(--titulo);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s}
.menu>li>a:hover,.abre-jogos:hover{background:rgba(245,244,242,.1)}
.menu a[aria-current=page]{color:var(--areia)}
.seta{width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
[aria-expanded=true]>.seta{transform:translateY(1px) rotate(225deg)}
.grupo{position:relative}
.jogos{position:absolute;top:calc(100% + 12px);left:50%;width:300px;margin-left:-150px;padding:8px;border-radius:16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.jogos.aberto{opacity:1;visibility:visible;transform:none}
.jogos a{display:block;position:relative;z-index:1;padding:11px 14px;border-radius:10px;text-decoration:none;transition:background .2s}
.jogos a:hover{background:rgba(245,244,242,.1)}
.jogos b{display:block;font:500 .98rem var(--titulo)}
.jogos small{font-size:.78rem;color:var(--areia)}
.abrir{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;color:var(--branco);cursor:pointer}
.tracos,.tracos::before,.tracos::after{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .2s,opacity .2s}
.tracos{position:relative;margin:auto}.tracos::before,.tracos::after{content:"";position:absolute;left:0}.tracos::before{top:-7px}.tracos::after{top:7px}
[aria-expanded=true] .tracos{background:transparent}[aria-expanded=true] .tracos::before{transform:translateY(7px) rotate(45deg)}[aria-expanded=true] .tracos::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1180px){
.topo{--barra:60px}
.abrir{display:block}
.menu{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px;border-radius:18px;background:rgba(17,17,16,.97);border:1px solid var(--linha);max-height:calc(100dvh - 100px);overflow-y:auto;display:none}
.menu.aberto{display:flex}
.jogos{position:static;width:auto;margin:0;opacity:1;visibility:visible;transform:none;display:none;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 6px 10px}
.jogos.aberto{display:block}
.abre-jogos{width:100%;justify-content:space-between}
}

/* idiomas */
.idiomas{display:flex;align-items:center;gap:0;margin-left:6px;padding-left:6px;border-left:1px solid var(--linha)}
.menu>.idiomas>a{min-width:34px;justify-content:center;padding:0 6px;font-size:.76rem;color:var(--apagado)}
.menu>.idiomas>a[aria-current=true]{color:var(--areia)}
@media (max-width:1180px){.idiomas{margin:6px 0 0;padding:6px 0 0;border-left:0;border-top:1px solid var(--linha)}.menu>.idiomas>a{flex:1;font-size:.86rem}}
:lang(zh){--titulo:'Space Grotesk','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;--corpo:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif}

/* botões */
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font:500 .84rem var(--titulo);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;transition:transform .2s,background .2s}
.botao:hover{transform:translateY(-1px)}
.botao:active{transform:scale(.98)}
.primario{background:var(--branco);color:var(--preto)}
.primario:hover{background:var(--areia)}
.link{color:var(--areia);text-underline-offset:3px}
.clara .link{color:#6B5A36}

/* abertura */
.abertura{position:relative;display:flex;align-items:center;min-height:100svh;padding:calc(var(--barra) + 56px) 0 64px;overflow:hidden}
.emblema{position:absolute;right:max(-150px,calc(50% - 860px));top:50%;width:min(50vw,640px);max-width:none;transform:translateY(-50%);mix-blend-mode:screen;opacity:.9;pointer-events:none}
.abertura-texto{position:relative}
.abertura h1 span{display:block}
@media (max-width:1100px){.emblema{opacity:.5}}
@media (max-width:760px){.abertura{flex-direction:column;align-items:stretch;justify-content:center}.emblema{position:static;transform:none;width:128px;margin:0 16px 22px;opacity:.95}}

/* seções */
.secao{padding-block:clamp(64px,10vw,128px);border-top:1px solid var(--linha)}
.clara{background:var(--branco);color:var(--tinta);border:0}
.clara .sobre{color:#7A6740}
.clara .linha-fina,.clara .miudo{color:var(--tinta-2)}
.duas{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,88px);align-items:start}
.texto p+p{margin-top:16px}
@media (max-width:860px){.duas{grid-template-columns:1fr}}

/* portfólio */
.portfolio{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.card-jogo.card-grande{grid-column:1/-1;display:grid;grid-template-columns:1.55fr 1fr}
.card-grande .card-texto{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(22px,3.4vw,48px)}
.card-jogo{display:flex;flex-direction:column;background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;text-decoration:none;transition:border-color .25s,transform .25s}
.card-jogo:hover{border-color:var(--areia);transform:translateY(-3px)}
.card-arte{position:relative;overflow:hidden;background:#17140f;aspect-ratio:16/9}
.card-arte img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card-jogo:hover img{transform:scale(1.03)}
.selo{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:999px;font:500 .72rem var(--titulo);letter-spacing:.06em}
.card-texto{padding:18px 20px 20px}
.card-texto p{color:var(--apagado);font-size:.95rem}
.card-texto h3{font-size:1.32rem;letter-spacing:.02em}
.card-grande h3{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:400}
.card-detalhe{margin-top:10px}
.ver-jogo{display:inline-block;margin-top:16px;font:500 .78rem var(--titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--areia)}
@media (max-width:860px){.card-jogo.card-grande{grid-template-columns:1fr}}
@media (max-width:640px){.portfolio{grid-template-columns:1fr}}

/* institucional */
.pilares{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(40px,6vw,72px)}
.pilar{padding:22px 22px 4px 0;border-top:1px solid rgba(22,20,15,.2)}
.pilar+.pilar{padding-left:22px;border-left:1px solid rgba(22,20,15,.2)}
.pilar p{font-size:.95rem;color:var(--tinta-2)}
@media (max-width:860px){.pilares{grid-template-columns:1fr 1fr}.pilar:nth-child(odd){padding-left:0;border-left:0}}
@media (max-width:480px){.pilares{grid-template-columns:1fr}.pilar+.pilar{padding-left:0;border-left:0}}
.faixa-marcas .botao{margin-top:28px}
.canais li+li{border-top:1px solid var(--linha)}
.canais a{display:block;padding:16px 4px;text-decoration:none;transition:padding .2s}
.canais a:hover{padding-left:12px}
.canais b{display:block;font:500 1.05rem var(--titulo)}
.canais small{color:var(--apagado)}

/* páginas de jogo */
.capa-jogo{position:relative;display:flex;align-items:flex-end;min-height:min(92svh,860px);overflow:hidden;padding:calc(var(--barra) + 60px) 0 56px;background:#0b0a12}
.capa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.capa-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.42) 0,rgba(5,5,5,.1) 34%,rgba(5,5,5,.9) 88%,#050505)}
.capa-texto{position:relative}
.capa-texto>.botao{margin-top:26px}
.capa-aviso{max-width:58ch;margin-top:18px;color:#D9D5CD}
.t-roma .logo-roma{font:700 clamp(3.4rem,11vw,8rem)/1 Cinzel,Georgia,serif;letter-spacing:.06em;color:#E9C877;text-shadow:0 3px 26px rgba(0,0,0,.65)}
.t-roma .sobre{color:#E9C877}
.t-roma .clara .sobre{color:#7A1E2A}
.t-roma .clara{background:#F3EDE0}
.t-roma .primario{background:#D8B261;color:#1C1208}
.t-roma .primario:hover{background:#F0CE85}
.t-roma .capa-veu{background:linear-gradient(90deg,rgba(18,6,8,.78),rgba(18,6,8,.18) 64%),linear-gradient(180deg,rgba(38,8,12,.28),rgba(20,6,8,.1) 34%,rgba(18,6,8,.92) 88%,#050505)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.etiquetas li{padding:6px 14px;border:1px solid rgba(216,178,97,.45);border-radius:999px;font-size:.88rem}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0 14px}
.galeria img{width:100%;border-radius:10px;background:#17140f}
.galeria figcaption{padding-top:10px;font-size:.92rem;color:var(--apagado)}
.galeria b{color:var(--branco);font:500 .98rem var(--titulo);margin-right:6px}
@media (max-width:760px){.galeria{grid-template-columns:1fr}}
.novidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 34px;margin:32px 0 26px}
.novidades li{padding:18px 0;border-top:1px solid rgba(90,30,30,.26)}
.novidades p{font-size:.96rem;color:var(--tinta-2)}
.faixa-roma{background:#3F0E14;border:0;text-align:center}
.faixa-roma h2{font-family:Cinzel,Georgia,serif;font-weight:700}
.capa-simples{display:flex;align-items:center;min-height:82svh;padding:calc(var(--barra) + 70px) 0 70px}
.capa-simples .botao{margin-top:30px}
.capa-marcas h1{font-size:clamp(2.1rem,5.4vw,4.4rem);max-width:17ch}
.t-orbe .sobre{color:#BFB6F2}
.t-orbe .clara .sobre{color:#5A4BB0}
.t-orbe .clara .link{color:#463A97}
.lista-formatos li,.lista-regras li{padding:13px 0;border-top:1px solid var(--linha)}
.clara .lista-regras li{border-color:rgba(22,20,15,.18)}

/* rodapé */
.rodape{padding-block:56px 30px;border-top:1px solid var(--linha);background:#090908}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px}
.rodape h2{font:500 .74rem var(--titulo);letter-spacing:.2em;text-transform:uppercase;color:var(--areia);margin-bottom:12px}
.rodape li{margin-bottom:4px}
.rodape li a{display:inline-block;padding:4px 0;font-size:.93rem;text-decoration:none;overflow-wrap:anywhere}
.rodape li a:hover{text-decoration:underline}
.rodape-marca{display:flex;align-items:center;gap:12px;font:300 1.05rem var(--titulo);letter-spacing:.24em}
.lema{color:var(--apagado);font-size:.92rem;margin-top:8px}
.aviso-marca{margin-top:34px;padding-top:18px}
@media (max-width:760px){.rodape-grade{grid-template-columns:1fr 1fr}.rodape-grade>:first-child{grid-column:1/-1}}
@media (max-width:480px){.rodape-grade{grid-template-columns:1fr}}

/* institucional */
.largo{max-width:22ch}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(28px,4vw,48px)}
.tres-item{padding:22px 26px 6px 0;border-top:1px solid var(--linha)}
.tres-item+.tres-item{padding-left:26px;border-left:1px solid var(--linha)}
.tres-item p{color:var(--apagado);font-size:.97rem}
@media (max-width:760px){.tres{grid-template-columns:1fr}.tres-item+.tres-item{padding-left:0;border-left:0}}
#tecnologia{border-top:0;padding-top:0}
.faixa-marcas .texto .botao,.clara .texto .botao{margin-top:24px}
.escuro{background:var(--preto);color:var(--branco)}
.escuro:hover{background:#2a2925}
.assinatura-linha{display:flex;align-items:center;gap:10px;font-style:italic}
.encerramento{padding-block:clamp(72px,11vw,140px);border-top:1px solid var(--linha);text-align:center;background:#090908}
.encerramento img{width:clamp(96px,14vw,150px);height:auto;margin:0 auto 24px;mix-blend-mode:screen}
.encerramento h2{margin:14px auto 0;max-width:20ch}
.encerramento .linha-fina{margin-inline:auto}
.encerramento .botoes{justify-content:center}
/* páginas com a imagem oficial inteira, sem corte */
.capa-lado{padding:calc(var(--barra) + 64px) 0 clamp(48px,7vw,84px)}
.capa-lado-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:center}
.capa-lado h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:400;letter-spacing:.01em}
.capa-lado-img img{width:100%;border-radius:var(--raio);box-shadow:0 22px 70px rgba(0,0,0,.55)}
.nome-roblox{margin-top:10px}
@media (max-width:860px){.capa-lado-grade{grid-template-columns:1fr}}
.galeria-sec .galeria~.botao{margin-top:24px}
.galeria-mundos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.galeria-mundos img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:10px;background:#111}
@media (max-width:760px){.galeria-mundos{grid-template-columns:1fr 1fr}}
.t-dino .sobre{color:#F2A65A}
.t-dino .primario{background:#F2A65A;color:#1B0F05}
.t-dino .primario:hover{background:#FFC182}
.t-orbe .primario{background:#BFB6F2;color:#100C2A}
.t-orbe .primario:hover{background:#D9D3FA}

/* entrada discreta: o conteúdo já está visível sem JS */
.js .surge{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .surge.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.js .surge{opacity:1;transform:none}
}
