/* Fire Heart - mesmo layout do site original, acabamento moderno. */

:root {
    --fundo: #101418;
    --vidro: rgba(16, 20, 24, 0.82);
    --borda: rgba(255, 255, 255, 0.1);
    --texto: #ffffff;
    --texto-2: #aeb6c4;
    --azul: rgb(90, 100, 194);
    --azul-claro: rgb(140, 150, 235);
    --ok: #4cc38a;
    --erro: #ff5c5c;
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--fundo) url(img/bg-spark-4.jpg) center top / cover no-repeat fixed;
    color: var(--texto);
    font-family: "Open Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--azul-claro);
}

/* ------------------------------------------------------------------ menu (no mesmo lugar) */

header {
    display: flex;
    margin: 60px 0 70px;
    padding: 0;
    transition: background 0.4s;
}

header:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

nav {
    margin: 6px 0 8px 30px;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    display: inline;
}

.menus {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--texto);
    font-size: 19px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s, background 0.3s;
}

/* linha azul que cresce por baixo no hover */
.menus::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--azul-claro);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.menus:hover {
    color: var(--azul-claro);
    background: rgba(255, 255, 255, 0.06);
}

.menus:hover::after,
.menus.atual::after {
    transform: scaleX(1);
}

.menus.atual {
    color: var(--azul-claro);
}

span.menus {
    cursor: default;
}

/* ------------------------------------------------------------------ conteudo */

main {
    flex: 1;
    padding: 0 16px;
}

/* a caixa do centro, no mesmo lugar da original */
#infoBox {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto 120px;
    padding: 36px 44px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--vidro);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    color: var(--texto);
    text-align: center;
    animation: surge 0.5s ease-out;
}

@keyframes surge {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

#infoBox h1 {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 600;
}

#infoBox h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: var(--azul);
}

#infoBox > ul,
.painelDownload > ul,
.painelDownload > .soLogado > ul {
    margin: 22px 0 0;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--azul-claro);
    list-style: none;
}

#infoBox ul li {
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
    font-size: 15px;
    font-weight: 400;
}

#infoBox ul li:first-child {
    margin-top: 10px;
    border-top: 1px solid var(--borda);
}

.walkers {
    color: var(--erro) !important;
    font-size: 15px !important;
}

/* ------------------------------------------------------------------ registro */

#infoBox label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: left;
}

#infoBox input,
#infoBox textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    transition: border 0.2s, background 0.2s, box-shadow 0.2s;
}

#infoBox input::placeholder,
#infoBox textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#infoBox input:focus,
#infoBox textarea:focus {
    outline: none;
    border-color: var(--azul-claro);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(90, 100, 194, 0.3);
}

/* ------------------------------------------------------------------ botoes */

.botao,
.botaoRegistro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 220px;
    margin-top: 28px;
    padding: 14px 30px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgb(110, 120, 220), var(--azul));
    box-shadow: 0 8px 24px rgba(90, 100, 194, 0.35);
    color: var(--texto);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.botao:hover,
.botaoRegistro:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(90, 100, 194, 0.55);
    filter: brightness(1.1);
}

.botao:active,
.botaoRegistro:active {
    transform: translateY(0);
}

.botaoRegistro:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

#aviso {
    min-height: 22px;
    margin: 16px 0 0;
    font-size: 15px;
}

#aviso.ok {
    color: var(--ok);
}

#aviso.erro {
    color: var(--erro);
}

/* ------------------------------------------------------------------ download */

#patches li a,
#infoBox li a {
    color: var(--azul-claro);
    font-weight: 600;
    text-decoration: none;
}

#patches li a:hover {
    text-decoration: underline;
}

/* 21/10: um quadrado por projeto (Fire Heart / Infinity), cada um com o seu painel */
.abasDownload {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 22px 0 6px;
}

.abaDownload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 16px;
    background: rgba(16, 20, 24, 0.6);
    border: 1px solid var(--borda);
    border-radius: 10px;
    color: var(--texto-2);
    font: inherit;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.abaDownload.fogo {
    --cor: var(--brasa);
}

.abaDownload.gelo {
    --cor: var(--gelo);
}

.abaDownload img,
.abaDownload svg {
    height: 28px;
    width: auto;
}

.abaDownload svg {
    color: var(--cor);
}

.abaDownload b {
    color: var(--texto);
    font-family: "Cinzel", serif;
    font-size: 19px;
}

.abaDownload small {
    color: var(--cor);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.abaDownload:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.abaDownload[aria-selected="true"] {
    opacity: 1;
    border-color: var(--cor);
    box-shadow: 0 0 0 1px var(--cor), 0 12px 40px rgba(0, 0, 0, 0.45);
}

.abaDownload:focus-visible {
    outline: 2px solid var(--cor);
    outline-offset: 2px;
}

.painelDownload[hidden] {
    display: none;
}

#painel-infinity {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
    text-align: center;
}

#painel-infinity[hidden] {
    display: none;
}

#painel-infinity .selo {
    --cor: var(--gelo);
    margin-bottom: 4px;
}

@media (max-width: 500px) {
    .abasDownload {
        gap: 10px;
    }

    .abaDownload b {
        font-size: 16px;
    }

    .abaDownload small {
        font-size: 10px;
        letter-spacing: 0.6px;
    }
}

/* ------------------------------------------------------------------ rodape (no mesmo lugar) */

footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    padding: 26px 30px;
    border-top: 1px solid var(--borda);
    background: rgba(16, 20, 24, 0.95);
    font-size: 15px;
}

.paraFoot {
    margin: 0 25px;
    color: var(--texto-2);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

.paraFoot:hover {
    color: var(--azul-claro);
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 700px) {
    header {
        margin: 24px 0 30px;
        justify-content: center;
    }

    nav {
        margin: 0;
    }

    nav ul {
        justify-content: center;
        gap: 2px;
    }

    .menus {
        padding: 6px 10px;
        font-size: 15px;
    }

    #infoBox {
        padding: 28px 20px;
        margin-bottom: 60px;
    }

    #infoBox h1 {
        font-size: 26px;
    }

    footer {
        justify-content: center;
        text-align: center;
    }

    .paraFoot {
        margin: 0 12px;
    }
}

#infoBox li a.botao {
    color: var(--texto);
    font-weight: 600;
}

#infoBox > ul#patches,
#infoBox ul#patches {
    margin-top: 0;
}

#infoBox > ul#patches li:first-child,
#infoBox ul#patches li:first-child {
    margin-top: 0;
    border-top: 0;
}

/* ================================================================== projetos: brasa (Fire Heart) e gelo (Infinity)
   Brasa (Fire Heart) sai da arma em chamas da arte dele; arcano (Infinity), da magia roxa da arte do Unity.
   A classe .gelo ficou com o nome antigo. */

:root {
    --brasa: #ff6a3d;
    --brasa-escura: #c2361f;
    --gelo: #c9a2ff;
    --gelo-escuro: #7b3fe4;
}

/* item de menu com legenda embaixo (Fire Heart / Infinity) */
.menus.projeto {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.menus.projeto small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.menus.fogo small {
    color: var(--brasa);
}

.menus.gelo small {
    color: var(--gelo);
}

.menus.fogo:hover,
.menus.fogo.atual {
    color: #ffd2c2;
}

.menus.fogo::after {
    background: var(--brasa);
}

.menus.gelo:hover,
.menus.gelo.atual {
    color: #eadcff;
}

.menus.gelo::after {
    background: var(--gelo);
}

/* ------------------------------------------------------------------ home */

.home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1240px;
    margin: -20px auto 90px;
}

.projetoCard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    color: var(--texto);
    text-decoration: none;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    animation: surge 0.6s ease-out backwards;
}

/* a arte do projeto no topo do card, com o pe dela sumindo no vidro */
.capa {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    /* o pe da arte some no vidro do card por mascara na PROPRIA imagem (antes era um degrade por cima, que
       ficava 1px mais curto que a imagem durante o zoom e deixava uma linha clara no fim da capa) */
    -webkit-mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, 0.05));
    mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, 0.05));
    transition: transform 0.6s ease;
}



.projetoCard:hover .capa img {
    transform: scale(1.04);
}

.corpoCard {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    margin-top: -46px;
    padding: 0 34px 28px;
}

.projetoCard + .projetoCard {
    animation-delay: 0.12s;
}

/* o brilho que sobe do canto: brasa de um lado, gelo do outro */
.projetoCard::before {
    content: "";
    position: absolute;
    inset: auto -30% -60% -30%;
    height: 90%;
    background: radial-gradient(closest-side, var(--cor-brilho), transparent);
    opacity: 0.22;
    transition: opacity 0.4s;
    pointer-events: none;
}

.projetoCard.fogo {
    --cor: var(--brasa);
    --cor-brilho: var(--brasa-escura);
}

.projetoCard.gelo {
    --cor: var(--gelo);
    --cor-brilho: var(--gelo-escuro);
}

.projetoCard:hover {
    transform: translateY(-4px);
    border-color: var(--cor);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--cor);
}

.projetoCard:hover::before {
    opacity: 0.45;
}

.projetoCard:focus-visible {
    outline: 2px solid var(--cor);
    outline-offset: 4px;
}

.selo {
    align-self: flex-start;
    padding: 5px 12px;
    background: rgba(16, 20, 24, 0.85);
    border: 1px solid var(--cor);
    border-radius: 30px;
    color: var(--cor);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.projetoCard h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
}

.projetoCard h2 span {
    display: block;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.projetoCard p {
    margin: 0;
    color: var(--texto-2);
    font-size: 15px;
    line-height: 1.6;
}

.rodapeCard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-2);
    font-size: 13px;
}

.bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--texto-2);
}

.bolinha.on {
    background: var(--ok);
    box-shadow: 0 0 10px var(--ok);
}

.bolinha.off {
    background: var(--erro);
}

.bolinha.dev {
    background: var(--gelo);
    box-shadow: 0 0 10px var(--gelo);
    animation: pulsa 2s ease-in-out infinite;
}

@keyframes pulsa {
    50% {
        opacity: 0.35;
    }
}

.leiaMais {
    color: var(--cor);
    font-size: 14px;
    font-weight: 600;
}

.leiaMais::after {
    content: " \2192";
    display: inline-block;
    transition: transform 0.3s;
}

.projetoCard:hover .leiaMais::after {
    transform: translateX(4px);
}

/* ------------------------------------------------------------------ paginas dos projetos */

#infoBox.fogo {
    --cor: var(--brasa);
}

#infoBox.gelo {
    --cor: var(--gelo);
}

#infoBox.fogo h1::after,
#infoBox.gelo h1::after {
    background: var(--cor);
}

#infoBox .selo {
    align-self: center;
    margin-bottom: 14px;
}

#infoBox .intro {
    max-width: 580px;
    margin: 18px auto 4px;
    color: var(--texto-2);
    font-size: 16px;
    line-height: 1.7;
}

#infoBox.fogo > ul,
#infoBox.gelo > ul {
    color: var(--cor);
}

@media (max-width: 800px) {
    .home {
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .menus.projeto {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================================================== menu suspenso (Fire Heart / Infinity) */

.suspenso {
    position: relative;
}

.submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    min-width: 270px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--borda);
    border-top: 2px solid var(--cor);
    border-radius: 12px;
    background: rgba(16, 20, 24, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* ponte invisivel: o mouse passa do item para o submenu sem ele fechar */
.submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.submenu.fogo {
    --cor: var(--brasa);
}

.submenu.gelo {
    --cor: var(--gelo);
}

.suspenso:hover .submenu,
.suspenso:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li {
    display: block;
}

.submenu a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--texto);
    text-decoration: none;
    transition: background 0.2s;
}

.submenu a:hover,
.submenu a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.submenu b {
    font-size: 15px;
    font-weight: 600;
}

.submenu a:hover b {
    color: var(--cor);
}

.submenu small {
    color: var(--texto-2);
    font-size: 12px;
}

/* ================================================================== home: sobre o projeto e o autor */

.olho {
    display: block;
    margin-bottom: 10px;
    color: var(--azul-claro);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.corFogo {
    color: var(--brasa);
}

.corGelo {
    color: var(--gelo);
}

.sobre {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto 30px;
    padding: 44px 48px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.sobre h2,
.autor h2 {
    margin: 0 0 18px;
    font-size: 32px;
    font-weight: 600;
}

.sobre p,
.autor p {
    margin: 0 0 14px;
    color: var(--texto-2);
    font-size: 16px;
    line-height: 1.75;
}

.sobre p b,
.autor p b {
    font-weight: 600;
}

.numeros {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.numeros div {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.numeros b {
    min-width: 70px;
    background: linear-gradient(135deg, var(--brasa), var(--gelo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 34px;
    font-weight: 600;
}

.numeros span {
    color: var(--texto-2);
    font-size: 15px;
}

.autor {
    position: relative;
    max-width: 1240px;
    margin: 0 auto 100px;
    padding: 44px 48px;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* faixa de brasa a gelo na borda esquerda: os dois projetos, a mesma mao */
.autor::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(var(--brasa), var(--gelo));
}

.autor p {
    max-width: 860px;
}

.assinatura {
    display: block;
    margin-top: 8px;
    color: var(--texto);
    font-size: 18px;
    font-style: italic;
}

/* ================================================================== changelog e dev log */

.registroLista {
    text-align: left !important;
}

.registroLista .selo,
.registroLista h1,
.registroLista .intro {
    text-align: center;
}

.entrada {
    position: relative;
    margin-top: 26px;
    padding: 22px 24px 18px 28px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.entrada::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: var(--cor);
}

.entrada header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    background: none;
}

.entrada time {
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.etiqueta {
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--cor);
    color: #101418;
    font-size: 11px;
    font-weight: 600;
}

.entrada h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
}

#infoBox .entrada ul {
    margin: 0;
    padding-left: 18px;
    color: var(--texto);
    font-size: 15px;
    font-weight: 400;
    list-style: disc;
}

#infoBox .entrada ul li,
#infoBox .entrada ul li:first-child {
    margin: 0;
    padding: 4px 0;
    border: 0;
    color: var(--texto-2);
    line-height: 1.6;
}

@media (max-width: 800px) {
    .sobre {
        grid-template-columns: 1fr;
        padding: 30px 22px;
    }

    .autor {
        padding: 30px 22px;
    }

    .submenu {
        left: 50%;
        transform: translate(-50%, -6px);
    }

    .suspenso:hover .submenu,
    .suspenso:focus-within .submenu {
        transform: translate(-50%, 0);
    }
}

.entrada header:hover {
    background: none;
}

/* ================================================================== idioma (ingles / portugues)
   Todo texto vem nos dois idiomas com lang="en" e lang="pt"; aparece so o de <html data-lang>. */

html[data-lang="en"] body [lang="pt"],
html[data-lang="pt"] body [lang="en"] {
    display: none !important;
}

header {
    position: relative;
}

/* a bolinha de bandeira, no canto direito do menu como no brdevstudio: mostra o idioma para onde troca */
.idioma {
    /* acima da linha do menu, alinhada com a borda direita do card da direita (a .home tem 1240px no centro) */
    position: absolute;
    top: -52px;
    right: max(16px, calc((100vw - 1240px) / 2));
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: var(--fundo);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.idioma img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idioma:hover {
    border-color: var(--azul-claro);
    box-shadow: 0 6px 22px rgba(90, 100, 194, 0.5);
    transform: scale(1.08);
}

.idioma:active {
    transform: scale(0.94);
}

.idioma:focus-visible {
    outline: 2px solid var(--azul-claro);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    header {
        margin-top: 60px;
    }

    .idioma {
        top: -48px;
        right: 16px;
        width: 34px;
        height: 34px;
    }
}

/* ================================================================== midia */

.video {
    margin: 28px 0 0;
}

.quadro {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: #000;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.quadro iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 4px 0;
    color: var(--texto-2);
    font-size: 15px;
    line-height: 1.6;
}

.video figcaption b {
    color: var(--texto);
    font-size: 17px;
    font-weight: 600;
}

.vazio {
    margin-top: 28px;
    padding: 40px 24px;
    border: 1px dashed var(--borda);
    border-radius: 14px;
    color: var(--texto-2);
    text-align: center;
}

.vazio strong {
    display: block;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--gelo), var(--azul-claro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* o patch mais novo em destaque, com o mesmo botao do cliente completo */
#infoBox ul#patches li.patchNovo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0 18px;
}

#infoBox li.patchNovo a.botao {
    margin-top: 6px;
    color: var(--texto);
}

#infoBox li.patchNovo small {
    color: var(--texto-2);
    font-size: 13px;
}

/* ================================================================== topo: idioma + login (acima do menu, alinhado
   com a borda direita dos cards) */

.topo {
    position: absolute;
    top: -54px;
    right: max(16px, calc((100vw - 1240px) / 2));
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.topo .idioma {
    position: static;
    flex: none;
    order: 2;
    transform: none;
}

.topo .idioma:hover {
    transform: scale(1.08);
}

.entrar,
.logado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.entrar[hidden],
.logado[hidden],
.logado a[hidden] {
    display: none;
}

.entrar input {
    width: 150px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: rgba(16, 20, 24, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.entrar input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.entrar input:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(90, 100, 194, 0.3);
}

.botaoTopo {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: rgba(16, 20, 24, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.botaoTopo:hover {
    border-color: var(--azul-claro);
    transform: translateY(-1px);
}

.botaoTopo.destaque {
    border: 0;
    background: linear-gradient(135deg, rgb(110, 120, 220), var(--azul));
    box-shadow: 0 6px 18px rgba(90, 100, 194, 0.4);
}

.botaoTopo.destaque:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(90, 100, 194, 0.6);
}

.botaoTopo:disabled {
    opacity: 0.6;
    cursor: wait;
}

.avisoTopo {
    flex-basis: 100%;
    color: var(--erro);
    font-size: 13px;
    text-align: right;
}

.avisoTopo:empty {
    display: none;
}

.saldo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 106, 61, 0.45);
    border-radius: 9px;
    background: rgba(16, 20, 24, 0.75);
    color: var(--texto);
    font-size: 14px;
    text-decoration: none;
}

.saldo b {
    color: var(--brasa);
}

/* o captcha do login so aparece se o Cloudflare pedir interacao */
.captchaTopo {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 30;
}

/* ================================================================== formularios do site */

.formSite {
    text-align: left;
}

.selo.neutro {
    --cor: var(--azul-claro);
    align-self: center;
    margin-bottom: 14px;
}

.comOlho {
    position: relative;
    display: block;
}

.comOlho input {
    padding-right: 48px !important;
}

.olhoSenha {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-2);
    font-size: 17px;
    cursor: pointer;
    transform: translateY(-50%);
}

.olhoSenha:hover {
    background: rgba(255, 255, 255, 0.08);
}

.forca {
    height: 26px;
    margin-top: 8px;
}

.forca span {
    display: block;
    width: 0;
    height: 4px;
    border-radius: 4px;
    background: var(--erro);
    color: var(--texto-2);
    font-size: 12px;
    line-height: 30px;
    white-space: nowrap;
    transition: width 0.3s, background 0.3s;
}

.forca span[data-nivel="1"] {
    background: #f0a33a;
}

.forca span[data-nivel="2"] {
    background: var(--azul-claro);
}

.forca span[data-nivel="3"] {
    background: var(--ok);
}

#infoBox label.aceite {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    font-weight: 400;
}

#infoBox label.aceite input {
    width: 18px;
    height: 18px;
    accent-color: var(--azul);
}

.captcha {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin-top: 22px;
}

.rodapeForm,
.nota {
    margin: 14px 0 0;
    color: var(--texto-2);
    font-size: 14px;
    text-align: center;
}

#infoBox select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(16, 20, 24, 0.9);
    color: var(--texto);
    font: inherit;
    font-size: 15px;
}

/* ================================================================== dashboard */

.painel {
    max-width: 900px !important;
}

.painelTopo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 26px;
}

.cartaoSaldo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.cartaoSaldo > span {
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cartaoSaldo b {
    background: linear-gradient(135deg, var(--brasa), var(--gelo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 38px;
    font-weight: 600;
}

.cartaoSaldo small {
    color: var(--texto-2);
}

.painel .bloco {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
    text-align: left;
}

.painel .bloco h2 {
    margin: 0 0 6px;
    color: var(--azul-claro);
    font-size: 20px;
    font-weight: 600;
}

.painel .nota {
    text-align: left;
}

.listaContas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

.contaJogo {
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.contaCab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.contaCab .etiqueta {
    --cor: var(--brasa);
}

/* 23/10: servidor e o botao de trocar a senha da conta de jogo */
.contaAcoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.contaAcoes .botaoTopo {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.formSenhaJogo {
    margin: 4px 0 14px;
}

.formSenhaJogo[hidden] {
    display: none;
}

.personagem {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid var(--borda);
    font-size: 14px;
}

.personagem small {
    color: var(--texto-2);
}

a.cartaoSaldo {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s;
}

a.cartaoSaldo:hover {
    border-color: var(--azul-claro);
}

.escolheServidor {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-2);
    font-size: 14px;
}

.escolheServidor select {
    width: auto;
    min-width: 180px;
    margin: 0;
}

.tabelaChars {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabelaChars th {
    padding: 6px 8px;
    color: var(--texto-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
}

.tabelaChars td {
    padding: 7px 8px;
    border-top: 1px solid var(--borda);
}

.tabelaChars th:last-child,
.tabelaChars td:last-child {
    text-align: right;
}

.formLinha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 16px;
}

.formLinha .botaoRegistro,
.formLinha .avisoForm {
    grid-column: 1 / -1;
}

.avisoForm {
    min-height: 20px;
    margin: 12px 0 0;
    text-align: center;
}

.avisoForm.ok {
    color: var(--ok);
}

.avisoForm.erro {
    color: var(--erro);
}

/* ================================================================== admin */

.admin {
    max-width: 1240px !important;
}

.tabelaRolagem {
    margin-top: 20px;
    overflow-x: auto;
}

.tabelaAdmin {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.tabelaAdmin th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--borda);
    color: var(--texto-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabelaAdmin td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.tabelaAdmin tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* grupos por pessoa (mesmo IP / mesmo visitante): linha de resumo que abre a atividade */
.tabelaAdmin tr.grupoTopo {
    cursor: pointer;
}

.tabelaAdmin tr.grupoTopo.aberto td {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: transparent;
}

.tabelaAdmin tr.grupoFilho td {
    background: rgba(0, 0, 0, 0.18);
    color: var(--texto-2);
    font-size: 13px;
}

.tabelaAdmin tr.grupoFilho td:first-child {
    box-shadow: inset 3px 0 0 var(--borda);
}

.grupoConta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.grupoConta b {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    text-align: center;
}

.grupoSeta {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.15s;
}

tr.aberto .grupoSeta {
    transform: rotate(90deg);
}

@media (max-width: 900px) {
    .topo {
        position: static;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 0 14px;
        padding: 0 12px;
    }

    header {
        flex-direction: column;
    }

    .entrar input {
        width: 130px;
    }

    .painelTopo,
    .formLinha {
        grid-template-columns: 1fr;
    }
}

.ticket {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--brasa);
    stroke-width: 1.8;
}

.bandeiraPais {
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 2px;
}

/* ================================================================== v2: login na linha do menu, redes + idioma em cima
   (redes e idioma como no brdevstudio: icones soltos, uma barrinha, e a bandeira numa pilula) */

header {
    align-items: center;
}

.contaTopo {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 max(16px, calc((100vw - 1240px) / 2)) 0 auto;
    padding-left: 16px;
}

.contaTopo .entrar input {
    width: 140px;
}

.redes {
    position: absolute;
    top: -50px;
    right: max(16px, calc((100vw - 1240px) / 2));
    display: flex;
    align-items: center;
    gap: 8px;
}

.redesSociais {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    padding-right: 10px;
    border-right: 1px solid rgba(245, 245, 251, 0.25);
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: rgba(245, 245, 251, 0.82);
    transition: color 0.25s, background 0.25s, transform 0.25s;
}

.social-btn svg {
    width: 17px;
    height: 17px;
}

a.social-btn:hover {
    color: #fdfdff;
    background: rgba(245, 245, 251, 0.12);
    transform: translateY(-2px);
}

.social-btn.semLink {
    cursor: default;
}

/* a bandeira em pilula, como o lang-toggle do brdevstudio */
.redes .idioma {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 5px 10px;
    overflow: visible;
    border: 1px solid rgba(245, 245, 251, 0.35);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.redes .idioma img {
    width: auto;
    height: 16px;
    border-radius: 2px;
    object-fit: contain;
}

.redes .idioma:hover {
    border-color: rgba(245, 245, 251, 0.7);
    background: rgba(245, 245, 251, 0.12);
    box-shadow: none;
    transform: none;
}

.redes .idioma:active {
    transform: scale(0.92);
}

@media (max-width: 1320px) {
    header {
        flex-wrap: wrap;
    }

    .contaTopo {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 10px;
    }
}

@media (max-width: 900px) {
    .contaTopo {
        justify-content: center;
        margin: 12px 0 0;
        padding: 0 12px;
    }

    .redes {
        position: static;
        order: -1;
        justify-content: center;
        width: 100%;
        margin-bottom: 12px;
    }
}

/* o menu inteiro e o login cabem numa linha ate ~1300px */
nav {
    flex: none;
}

nav > ul {
    flex-wrap: nowrap;
    gap: 2px;
}

.menus {
    padding: 8px 12px;
    font-size: 17px;
}

.menus::after {
    left: 12px;
    right: 12px;
}

.contaTopo .entrar input {
    width: 124px;
}

.redes {
    padding: 3px 5px 3px 8px;
    border-radius: 999px;
    background: rgba(16, 20, 24, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 1320px) {
    nav > ul {
        flex-wrap: wrap;
    }
}

/* login e redes encostados na direita da pagina, com a mesma folga do menu na esquerda */
@media (min-width: 901px) {
    .contaTopo {
        margin-right: 30px;
    }

    .redes {
        right: 30px;
    }
}

/* rodape: os mesmos icones do topo no lugar dos nomes */
.redesRodape {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

footer .paraFoot:first-child {
    margin-left: 0;
}

@media (max-width: 700px) {
    .redesRodape {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
}

/* ================================================================== celular: menu hamburguer e tudo em uma coluna */

.hamburguer {
    display: none;
}

@media (max-width: 900px) {
    header {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 16px 0 24px;
        padding: 0 16px;
    }

    header:hover {
        background: none;
    }

    .redes {
        position: static;
        order: 0;
        align-self: center;
        width: auto;
        margin: 0 56px 12px;
    }

    .hamburguer {
        position: absolute;
        top: 2px;
        left: 16px;
        z-index: 40;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0 10px;
        border: 1px solid var(--borda);
        border-radius: 10px;
        background: rgba(16, 20, 24, 0.75);
        cursor: pointer;
    }

    .hamburguer span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--texto);
        transition: transform 0.25s, opacity 0.25s;
    }

    .menuAberto .hamburguer span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menuAberto .hamburguer span:nth-child(2) {
        opacity: 0;
    }

    .menuAberto .hamburguer span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    nav {
        display: none;
        order: 2;
        margin: 0 0 12px;
        padding: 10px;
        border: 1px solid var(--borda);
        border-radius: 14px;
        background: rgba(16, 20, 24, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .menuAberto nav {
        display: block;
    }

    nav > ul {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }

    nav ul li {
        display: block;
    }

    .menus,
    .menus.projeto {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
        padding: 12px 14px;
        font-size: 17px;
    }

    .menus::after {
        display: none;
    }

    .menus.atual {
        background: rgba(255, 255, 255, 0.06);
    }

    /* no toque nao existe "passar o mouse": os submenus aparecem abertos dentro do menu */
    .submenu,
    .suspenso:hover .submenu,
    .suspenso:focus-within .submenu {
        position: static;
        min-width: 0;
        margin: 0 0 6px 14px;
        padding: 4px 0 4px 10px;
        border: 0;
        border-left: 2px solid var(--cor);
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .submenu a {
        padding: 8px 10px;
    }

    .contaTopo {
        order: 1;
        flex-basis: auto;
        justify-content: stretch;
        margin: 0 0 12px;
        padding: 0;
    }

    .entrar,
    .logado {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .entrar[hidden],
    .logado[hidden] {
        display: none;
    }

    .contaTopo .entrar input {
        width: 100%;
        height: 42px;
        font-size: 16px;
    }

    .botaoTopo,
    .saldo {
        justify-content: center;
        height: 42px;
    }

    .avisoTopo {
        grid-column: 1 / -1;
        text-align: center;
    }

    /* 23/10: com a chave real o Cloudflare as vezes pede interacao; o widget desce para uma linha propria em vez de
       espremer os campos do login */
    .contaTopo {
        flex-wrap: wrap;
    }

    .captchaTopo {
        position: static;
        grid-column: 1 / -1;
        flex-basis: 100%;
        margin-top: 8px;
    }

    .captchaTopo:empty {
        margin-top: 0;
    }

    main {
        padding: 0 12px;
    }

    .home {
        margin-top: 0;
        gap: 18px;
    }

    .corpoCard {
        padding: 0 20px 22px;
    }

    .projetoCard h2 {
        font-size: 24px;
    }

    .sobre,
    .autor {
        margin-bottom: 18px;
    }

    .sobre h2,
    .autor h2 {
        font-size: 24px;
    }

    #infoBox {
        margin-bottom: 40px;
        padding: 26px 18px;
    }

    #infoBox h1 {
        font-size: 26px;
    }

    .entrada {
        padding: 18px 16px 14px 20px;
    }

    .botao,
    .botaoRegistro {
        min-width: 0;
        width: 100%;
    }

    footer {
        flex-direction: column;
        gap: 14px;
        padding: 22px 16px;
    }

    footer .paraFoot {
        margin: 0;
        text-align: center;
    }

    .redesRodape {
        margin: 0;
        justify-content: center;
    }
}

/* telas muito estreitas: login em uma coluna so */
@media (max-width: 380px) {
    .entrar,
    .logado {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    /* os campos tinham largura minima propria e empurravam a linha 9px para fora da tela */
    .contaTopo {
        width: 100%;
        min-width: 0;
    }

    .entrar > *,
    .logado > * {
        min-width: 0;
    }
}


/* ================================================================== fumaca no hover da linha do menu
   Uma textura de fumaca (feTurbulence em SVG, gerada no navegador, sem arquivo) em duas camadas que deslizam em
   sentidos opostos, presa dentro da faixa do menu (bordas retas, como a faixa branca que ela substituiu). Desligada no celular e para quem pede menos movimento. */

header {
    /* isola a fumaca atras do texto; o z-index poe o cabecalho (e os submenus) na frente dos cards */
    position: relative;
    z-index: 50;
    isolation: isolate;
}

header:hover {
    background: none;
}

header::before,
header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.022%22 numOctaves=%224%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.55%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E");
    background-size: 800px 240px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease;
    animation: fumacaVai 38s linear infinite;
}

header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22240%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.004 0.016%22 numOctaves=%224%22 seed=%2223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.55%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23f)%22/%3E%3C/svg%3E");
    background-size: 1100px 240px;
    animation: fumacaVem 52s linear infinite;
}

header:hover::before {
    opacity: 0.32;
}

header:hover::after {
    opacity: 0.22;
}

@keyframes fumacaVai {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 800px -40px;
    }
}

@keyframes fumacaVem {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1100px 30px;
    }
}

@media (max-width: 900px) {
    header::before,
    header::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    header::before,
    header::after {
        animation: none;
    }
}

/* ================================================================== icones no menu (a esquerda de cada item) */

.menus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.menus.projeto {
    flex-direction: row;
    align-items: center;
}

.rotulo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.iconeMenu {
    flex: none;
    width: 17px;
    height: 17px;
    opacity: 0.85;
    transition: opacity 0.25s, transform 0.25s;
}

/* o coracao do Fire Heart e mais largo que alto */
.iconeFH {
    width: auto;
    height: 21px;
}

.menus:hover .iconeMenu,
.menus.atual .iconeMenu {
    opacity: 1;
    transform: scale(1.08);
}

/* a linha do hover comeca depois do icone */
.menus::after {
    left: 37px;
}

.menus.projeto.fogo::after {
    left: 54px;
}

@media (max-width: 900px) {
    .menus,
    .menus.projeto {
        justify-content: flex-start;
    }

    .menus .rotulo {
        flex: 1;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }
}

/* nos itens de projeto o icone acompanha a primeira linha (o nome), nao o meio entre nome e legenda */
.menus.projeto {
    align-items: flex-start;
}

.menus.projeto .iconeMenu {
    margin-top: 1px;
}

.menus.projeto .iconeFH {
    margin-top: -1px;
}

@media (max-width: 900px) {
    .menus.projeto {
        align-items: center;
    }

    .menus.projeto .iconeMenu,
    .menus.projeto .iconeFH {
        margin-top: 0;
    }
}

/* ================================================================== painel do jogador: menu lateral + conteudo */

.painelSite {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto 100px;
}

.painelSite > #infoBox {
    max-width: none !important;
    margin: 0;
    text-align: left;
}

.painelSite > #infoBox h1 {
    text-align: left;
}

.painelSite > #infoBox h1::after {
    margin-left: 0;
}

.painelSite > #infoBox .intro {
    margin-left: 0;
    text-align: left;
}

.menuPainel {
    position: sticky;
    top: 20px;
    padding: 18px 12px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.quemSou {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--borda);
}

.quemSou div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.quemSou b {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quemSou small {
    overflow: hidden;
    color: var(--texto-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brasa), var(--gelo));
    color: #101418;
    font-size: 18px;
    font-weight: 600;
}

/* o menu lateral e um nav: nao herda o layout do menu do topo */
.menuPainel nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.menuPainel hr {
    width: 100%;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--borda);
}

.itemPainel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--texto-2);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.itemPainel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto);
}

.itemPainel.ativo {
    background: rgba(90, 100, 194, 0.16);
    color: var(--azul-claro);
}

.itemPainel.ativo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--azul-claro);
}

.itemPainel[hidden] {
    display: none;
}

.icoPainel {
    flex: none;
    width: 20px;
    height: 20px;
}

.contador {
    margin-left: auto;
    color: var(--brasa);
    font-size: 14px;
}

.itemAdmin {
    margin-top: 8px;
    border: 1px dashed rgba(140, 150, 235, 0.35);
    color: var(--azul-claro);
}

.painelTopo.um {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.painel .bloco.semLinha {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.painel .bloco.semLinha form {
    max-width: 460px;
}

/* historico */
.tabelaAdmin td.positivo {
    color: var(--ok);
    font-weight: 600;
}

.tabelaAdmin td.negativo {
    color: var(--brasa);
    font-weight: 600;
}

/* rankings */
.abasRank {
    display: flex;
    gap: 6px;
    margin-top: 20px;
}

.abaRank {
    padding: 8px 18px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: transparent;
    color: var(--texto-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.abaRank:hover {
    color: var(--texto);
}

.abaRank.ativa {
    border-color: transparent;
    background: linear-gradient(135deg, rgb(110, 120, 220), var(--azul));
    color: var(--texto);
}

.tabelaRank td:first-child {
    width: 40px;
    color: var(--texto-2);
    font-weight: 600;
}

.tabelaRank tr.topo1 td:first-child {
    color: #f5c451;
}

.tabelaRank tr.topo2 td:first-child {
    color: #cfd6e0;
}

.tabelaRank tr.topo3 td:first-child {
    color: #d49a6a;
}

.tabelaRank td:last-child {
    color: var(--azul-claro);
    font-weight: 600;
}

@media (max-width: 900px) {
    .painelSite {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }

    .menuPainel {
        position: static;
        padding: 12px;
    }

    /* no celular os itens viram uma faixa que rola para o lado */
    .menuPainel nav {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .menuPainel hr {
        display: none;
    }

    .itemPainel {
        flex: none;
        padding: 9px 12px;
        font-size: 14px;
    }

    .itemPainel.ativo::before {
        display: none;
    }

    .itemAdmin {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    /* a faixa de itens que rola para o lado nao pode esticar a coluna (min-content) */
    .painelSite {
        grid-template-columns: minmax(0, 1fr);
    }

    .painelSite > * {
        min-width: 0;
    }
}

/* ================================================================== news: cards dos changelogs */

.noticias {
    max-width: 1240px;
    margin: 0 auto 90px;
}

.noticias h1 {
    margin: 0 0 18px;
    font-size: 36px;
    font-weight: 600;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--vidro);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--texto);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.filtro:hover {
    border-color: var(--azul-claro);
    transform: translateY(-1px);
}

.filtro img {
    height: 16px;
    width: auto;
}

.filtro svg {
    width: 16px;
    height: 16px;
}

.filtro.ativo {
    border-color: transparent;
    background: linear-gradient(135deg, rgb(110, 120, 220), var(--azul));
}

.filtro.fogo.ativo {
    background: linear-gradient(135deg, #ff8a5c, var(--brasa-escura));
}

.filtro.gelo.ativo {
    background: linear-gradient(135deg, #b98cff, var(--gelo-escuro));
}

.gradeNoticias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.cartaoNoticia {
    --cor: var(--azul-claro);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--vidro);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--texto);
    text-decoration: none;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    animation: surge 0.45s ease-out backwards;
}

.cartaoNoticia.fogo {
    --cor: var(--brasa);
}

.cartaoNoticia.gelo {
    --cor: var(--gelo);
}

.cartaoNoticia:hover {
    transform: translateY(-4px);
    border-color: var(--cor);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cartaoNoticia:focus-visible {
    outline: 2px solid var(--cor);
    outline-offset: 3px;
}

.capaNoticia {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}

.capaNoticia img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 0.5s ease;
}

.cartaoNoticia:hover .capaNoticia img {
    transform: scale(1.05);
}

.seloServidor {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(16, 20, 24, 0.85);
    color: var(--texto);
    font-size: 12px;
    font-weight: 600;
}

.seloServidor.fogo {
    color: var(--brasa);
}

.seloServidor.gelo {
    color: var(--gelo);
}

.etiquetaNoticia {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--azul);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.etiquetaNoticia.fogo {
    background: linear-gradient(135deg, #ff8a5c, var(--brasa-escura));
}

.etiquetaNoticia.gelo {
    background: linear-gradient(135deg, #b98cff, var(--gelo-escuro));
}

.corpoNoticia {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 6px 6px;
}

.dataNoticia {
    color: var(--texto-2);
    font-size: 12px;
}

.corpoNoticia h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.corpoNoticia p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--texto-2);
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#maisNoticias {
    margin-top: 30px;
}

/* ------------------------------------------------------------------ noticia aberta */

.modalNoticia {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modalNoticia[hidden] {
    display: none;
}

.fundoModal {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.caixaModal {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(16, 20, 24, 0.97);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    animation: surge 0.3s ease-out;
}

.fechaModal {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: rgba(16, 20, 24, 0.85);
    color: var(--texto);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.fechaModal:hover {
    border-color: var(--azul-claro);
}

.capaModal {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

.capaModal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.capaModal .seloServidor {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 14px;
}

.corpoModal {
    padding: 22px 28px 28px;
}

.corpoModal .dataNoticia {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.corpoModal .etiquetaNoticia {
    position: static;
}

.corpoModal h2 {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 600;
}

.resumoModal {
    margin: 0 0 16px;
    color: var(--texto-2);
    font-size: 16px;
    line-height: 1.6;
}

.corpoModal ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.75;
}

.semRolagem {
    overflow: hidden;
}

/* rodape: credito da BR Dev Studio */
.credito a {
    color: var(--azul-claro);
    text-decoration: none;
}

.credito a:hover {
    text-decoration: underline;
}

@media (max-width: 1000px) {
    .gradeNoticias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gradeNoticias {
        grid-template-columns: minmax(0, 1fr);
    }

    .noticias h1 {
        font-size: 28px;
    }

    .filtro {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    .corpoModal {
        padding: 18px;
    }
}

/* ================================================================== admin: jogo e visitas */

/* 05/10: com a aba Seguranca as abas passam da largura do celular: quebram linha */
.abasAdmin {
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.painelTopo.quatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.colunasAdmin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 26px;
}

.painel.admin h2 {
    margin: 22px 0 10px;
    color: var(--azul-claro);
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.colunasAdmin h2 {
    margin-top: 0 !important;
}

.pilulasPais {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}

.pilula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

.pilula b {
    color: var(--azul-claro);
}

.onlineAgora {
    color: var(--ok);
    font-weight: 600;
}

@media (max-width: 900px) {
    .painelTopo.quatro,
    .colunasAdmin {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================================================================== galeria de imagens (midia) */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.fotoGaleria {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto-2);
    text-decoration: none;
    transition: transform 0.25s, border-color 0.25s;
}

.fotoGaleria:hover {
    transform: translateY(-3px);
    border-color: var(--cor, var(--azul-claro));
}

.fotoGaleria img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fotoGaleria span {
    padding: 10px 12px;
    font-size: 13px;
    text-align: left;
}

.caixaFoto {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: rgba(5, 7, 10, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.caixaFoto[hidden] {
    display: none;
}

.caixaFoto figure {
    margin: 0;
    max-width: min(1400px, 100%);
}

.caixaFoto img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 110px);
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.caixaFoto figcaption {
    margin-top: 12px;
    color: var(--texto-2);
    text-align: center;
}

.setaFoto {
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: rgba(16, 20, 24, 0.85);
    color: var(--texto);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.setaFoto:hover,
.caixaFoto .fechaModal:hover {
    border-color: var(--azul-claro);
}

.caixaFoto .fechaModal {
    position: fixed;
    top: 16px;
    right: 16px;
}

@media (max-width: 640px) {
    .setaFoto {
        position: fixed;
        bottom: 20px;
    }

    .setaFoto.anterior {
        left: 20px;
    }

    .setaFoto.proxima {
        right: 20px;
    }
}

.galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .galeria {
        grid-template-columns: 1fr;
    }
}

/* ================================================================== midia: videos e fotos numa grade de 4 */

#infoBox.midia {
    max-width: 1240px;
}

.midia .galeria {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 26px;
}

.miniatura {
    position: relative;
    display: block;
    padding: 0 !important;
}

.fotoGaleria .miniatura img {
    aspect-ratio: 16 / 9;
}

.fotoGaleria > span:last-child b {
    display: block;
    margin-bottom: 2px;
    color: var(--texto);
    font-size: 14px;
}

.play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 38px;
    padding: 0 !important;
    border-radius: 10px;
    background: rgba(220, 30, 30, 0.9);
    transform: translate(-50%, -50%);
    transition: transform 0.2s, background 0.2s;
}

.play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid #fff;
    transform: translate(-50%, -50%);
}

.fotoGaleria:hover .play {
    background: #f00;
    transform: translate(-50%, -50%) scale(1.08);
}

.quadroVideo {
    width: min(1200px, 90vw);
    aspect-ratio: 16 / 9;
}

/* Short do YouTube: em pe, cabendo na altura da tela */
.quadroVideo.vertical {
    width: min(420px, 90vw, calc(78vh * 9 / 16));
    aspect-ratio: 9 / 16;
}

.quadroVideo iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
}

@media (max-width: 1000px) {
    .midia .galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .midia .galeria {
        grid-template-columns: 1fr;
    }
}

.fotoGaleria > span:last-child {
    display: block;
    padding: 10px 12px !important;
    text-indent: 0;
    line-height: 1.45;
}

.fotoGaleria > span:last-child [lang] {
    display: inline;
}

.fotoGaleria span[lang] {
    padding: 0 !important;
}

/* ------------------------------------------------------------------ suporte (chamados) */

#infoBox textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.formLinha .largo {
    grid-column: 1 / -1;
}

.linhaChamado {
    cursor: pointer;
}

.linhaChamado:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.estadoChamado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.estadoChamado.open {
    background: rgba(255, 179, 71, 0.16);
    color: #ffb347;
}

.estadoChamado.answered {
    background: rgba(76, 195, 138, 0.16);
    color: var(--ok);
}

.estadoChamado.closed {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-2);
}

.voltarChamado {
    margin-bottom: 16px;
}

.cabChamado h2 {
    margin: 0 0 8px;
    text-align: left;
}

.metaChamado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--texto-2);
    font-size: 14px;
}

.metaChamado .etiqueta {
    --cor: var(--azul-claro);
}

.msgChamado {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
}

.msgChamado.equipe {
    border-color: rgba(140, 150, 235, 0.45);
    background: rgba(90, 100, 194, 0.12);
}

.topoMsg {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 14px;
}

.msgChamado.equipe .topoMsg b {
    color: var(--azul-claro);
}

.topoMsg small {
    color: var(--texto-2);
}

.msgChamado p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.respostaChamado {
    margin-top: 18px;
}

.botoesChamado {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.botoesChamado .botaoRegistro {
    flex: 1;
}

.filtrosChamado {
    margin-bottom: 14px;
}

.abasAdmin .contador {
    margin-left: 6px;
}

/* ================================================================== quem somos (about.html) */

.iconeSpark {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.quemSomos {
    max-width: 1240px;
    margin: 30px auto 30px;
    padding: 48px 48px 44px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.quemSomos .simbolo {
    display: block;
    width: 110px;
    height: auto;
    margin: 0 auto 18px;
    filter: drop-shadow(0 0 18px rgba(150, 190, 255, 0.45));
}

.quemSomos h1 {
    margin: 0 0 14px;
    font-family: "Cinzel", serif;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.quemSomos p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--texto-2);
    font-size: 17px;
    line-height: 1.7;
}

.projetosDetalhe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto 30px;
}

.projetoInfo {
    display: flex;
    flex-direction: column;
    padding: 36px 40px;
    border: 1px solid var(--borda);
    border-top: 3px solid var(--cor);
    border-radius: 20px;
    background: var(--vidro);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.projetoInfo.fogo {
    --cor: var(--brasa);
}

.projetoInfo.gelo {
    --cor: var(--gelo);
}

.projetoInfo h2 {
    margin: 14px 0 12px;
    color: var(--cor);
    font-size: 28px;
    font-weight: 600;
}

.projetoInfo p {
    margin: 0 0 16px;
    color: var(--texto-2);
    line-height: 1.7;
}

.projetoInfo ul {
    flex: 1;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.projetoInfo li {
    position: relative;
    padding: 7px 0 7px 22px;
    color: var(--texto);
    line-height: 1.5;
}

.projetoInfo li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cor);
    transform: rotate(45deg);
}

.linksProjeto {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.linksProjeto .botao {
    min-width: 0;
    margin-top: 12px;
    padding: 11px 20px;
    font-size: 14px;
}

@media (max-width: 800px) {
    .quemSomos {
        margin-top: 10px;
        padding: 34px 22px;
    }

    .quemSomos h1 {
        font-size: 30px;
        letter-spacing: 2px;
    }

    .projetosDetalhe {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .projetoInfo {
        padding: 28px 22px;
    }
}

/* ================================================================== fundo vivo: sol e magia da mao
   O fundo (bg-spark-4.jpg, 1984x1116) fica em cover, preso no topo (a 40% o "Lineage" subia para baixo do menu em telas baixas); no celular, 190vw de largura a 150px do
   topo. O site.js (fundoVivo) faz a mesma conta e publica onde a imagem esta: --bgS (escala), --bgX/--bgY
   (canto da imagem na tela). O sol e o canvas dos efeitos usam isso para ficar presos no desenho.
   Sol: imagem de 1200px da imagem de fundo com centro em (254, 506), mais da metade visivel na esquerda.
   mix-blend-mode lighten/screen: so clareiam o fundo; por cima do logo branco nao mancham. */

:root {
    --bgS: 0.9677;
    --bgX: 0px;
    --bgY: 0px;
}

.solFundo {
    position: fixed;
    z-index: -1;
    left: calc(var(--bgX) + var(--bgS) * -345.6px);
    top: calc(var(--bgY) + var(--bgS) * -93.6px);
    width: calc(var(--bgS) * 1200px);
    height: auto;
    mix-blend-mode: lighten;
    pointer-events: none;
    animation: solGira 240s linear infinite;
}

#efeitosFundo {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    mix-blend-mode: screen;
    pointer-events: none;
}

@media (max-width: 800px) {
    body {
        background-size: 190vw auto;
        background-position: 50% 150px;
    }
}

@keyframes solGira {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solFundo {
        animation: none;
    }

    #efeitosFundo {
        display: none;
    }
}

/* ================================================================== ficha do servidor (Fire Heart / Infinity)
   04/10: as paginas de informacao viraram uma "ficha": topo com a arte, barra de capitulos fixa e paineis.
   A assinatura sao as rates como slots do inventario do jogo (icones reais do cliente), a escada de EXP por nivel e
   o seletor Normal / VIP, que troca os numeros e a altura dos degraus. */

.ficha {
    --cor: var(--brasa);
    --cor-funda: var(--brasa-escura);
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1180px;
    margin: -10px auto 110px;
    text-align: left;
    animation: surge 0.5s ease-out;
}

.ficha.gelo {
    --cor: var(--gelo);
    --cor-funda: var(--gelo-escuro);
}

.ficha h1,
.ficha h2 {
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
}

.fichaTopo,
.capitulos,
.fichaPainel {
    border: 1px solid var(--borda);
    background: var(--vidro);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------ topo */

.fichaTopo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    overflow: hidden;
    border-radius: 18px;
}

.fichaTopo::before {
    content: "";
    position: absolute;
    inset: auto auto -40% -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(closest-side, var(--cor-funda), transparent);
    opacity: 0.25;
    pointer-events: none;
}

.fichaTexto {
    position: relative;
    z-index: 1;
    padding: 38px 40px 34px;
}

.fichaTexto h1 {
    margin: 16px 0 6px;
    font-size: clamp(34px, 4.4vw, 52px);
    letter-spacing: 1.5px;
    line-height: 1.05;
}

/* Project Info: botao de Download ao lado do titulo (leva a aba do projeto em download.html, que pede login) */
.tituloFicha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tituloFicha .botaoFicha {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.botaoFicha svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 560px) {
    .tituloFicha {
        flex-direction: column;
        gap: 4px;
    }

    .tituloFicha .botaoFicha {
        margin-top: 0;
        margin-bottom: 8px;
    }
}

.fichaTexto h1 small {
    display: block;
    margin-top: 10px;
    color: var(--cor);
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.fichaTexto > p {
    max-width: 560px;
    margin: 18px 0 0;
    color: var(--texto-2);
    font-size: 16px;
    line-height: 1.7;
}

.fatos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 26px 0 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--borda);
}

.fatos div {
    padding: 12px 14px;
    background: rgba(12, 15, 18, 0.92);
}

.fatos dt {
    color: var(--texto-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.fatos dd {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.fichaArte {
    position: relative;
    min-height: 100%;
}

.fichaArte img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
    mask-image: linear-gradient(90deg, transparent, #000 38%);
}

/* no Infinity o lugar da arte e o video */
.fichaArte.comVideo {
    display: flex;
    align-items: center;
    padding: 28px 28px 28px 0;
}

.fichaArte.comVideo .video {
    width: 100%;
    margin: 0;
}

/* ------------------------------------------------------------------ capitulos (barra fixa) */

.capitulos {
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    gap: 4px;
    padding: 6px;
    overflow-x: auto;
    border-radius: 40px;
    scrollbar-width: none;
}

.capitulos::-webkit-scrollbar {
    display: none;
}

.capitulos a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 16px 6px 8px;
    border: 1px solid transparent;
    border-radius: 30px;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.capitulos a img {
    width: 26px;
    height: 26px;
    border-radius: 5px;
}

.capitulos a:hover,
.capitulos a:focus-visible,
.capitulos a.ativo {
    border-color: color-mix(in srgb, var(--cor) 55%, transparent);
    background: color-mix(in srgb, var(--cor) 14%, transparent);
    color: #fff;
    outline: none;
}

/* ------------------------------------------------------------------ paineis */

.fichaPainel {
    scroll-margin-top: 80px;
    padding: 28px 32px 30px;
    border-radius: 16px;
}

.cabecaPainel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 20px;
}

.fichaPainel h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 22px;
    letter-spacing: 1px;
}

.fichaPainel h2 img {
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
    border-radius: 6px;
    background: #0b0d10;
}

.fichaPainel p.nota {
    margin: 18px 0 0;
    text-align: left;
    color: var(--texto-2);
    font-size: 14px;
    line-height: 1.6;
}

.paineis {
    columns: 2 380px;
    column-gap: 22px;
}

.paineis .fichaPainel {
    display: inline-block;
    width: 100%;
    margin: 0 0 22px;
    break-inside: avoid;
}

.subtitulo {
    margin: 26px 0 12px;
    color: var(--texto-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cabecaPainel + .subtitulo {
    margin-top: 0;
}

/* ------------------------------------------------------------------ seletor Normal / VIP */

.alternaVip {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--borda);
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.35);
}

.alternaVip button {
    min-height: 36px;
    padding: 6px 18px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--texto-2);
    font: 600 13px "Open Sans", system-ui, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.alternaVip button[aria-pressed="true"] {
    background: var(--cor);
    color: #16090a;
}

.alternaVip button:focus-visible {
    outline: 2px solid var(--cor);
    outline-offset: 2px;
}

.ficha .soVip,
.ficha.vip .soNormal {
    display: none;
}

.ficha.vip .soVip {
    display: inline;
}

/* ------------------------------------------------------------------ rates como slots do inventario */

.inventario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 12px;
}

.slot {
    position: relative;
    margin: 0;
    padding: 14px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.25));
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.slot:hover,
.slot:focus-visible {
    border-color: color-mix(in srgb, var(--cor) 60%, transparent);
    outline: none;
    transform: translateY(-2px);
}

.moldura {
    display: grid;
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    place-items: center;
    border: 1px solid rgba(214, 178, 128, 0.4);
    border-radius: 4px;
    background: #090b0d;
    box-shadow: inset 0 0 0 2px #050607, inset 0 0 14px rgba(0, 0, 0, 0.9);
}

.moldura img {
    width: 40px;
    height: 40px;
}

.slot > b {
    display: block;
    color: var(--cor);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.1;
}

.slot figcaption {
    margin-top: 4px;
    color: var(--texto-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* slots de item: nome e uma linha curta; a ficha completa fica no tooltip */
.inventario.itens {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.slot.item > b {
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3;
}

.slot.item > small {
    display: block;
    margin-top: 4px;
    color: var(--cor);
    font-size: 12px;
    font-weight: 600;
}

.dica b {
    display: block;
    margin-bottom: 4px;
    color: #f4d9a6;
    font-size: 13px;
}

.dica i {
    color: #9fb2c8;
    font-style: normal;
}

/* a dica no jeito do tooltip do jogo */
.dica {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: 230px;
    padding: 9px 11px;
    border: 1px solid rgba(214, 178, 128, 0.45);
    border-radius: 4px;
    background: rgba(6, 8, 10, 0.97);
    color: #e9e2d4;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s, transform 0.15s;
}

.slot:hover .dica,
.slot:focus-visible .dica {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ escada de EXP por nivel */

.escada {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 210px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--borda);
}

.degrau {
    display: flex;
    flex-basis: 0;
    flex-direction: column;
    justify-content: space-between;
    min-width: 70px;
    height: max(58px, var(--h));
    padding: 9px 10px 8px;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 92%, #fff 8%), color-mix(in srgb, var(--cor-funda) 55%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: height 0.35s ease;
}

.ficha.vip .degrau {
    height: max(58px, var(--hv));
}

.degrau b {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.degrau small {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ chances (enchant) */

.chances {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chances li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    align-items: baseline;
    font-size: 15px;
}

.chances li strong {
    color: var(--cor);
    font-variant-numeric: tabular-nums;
}

.barra {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
}

.barra i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--cor-funda), var(--cor));
}

/* ------------------------------------------------------------------ pares (rotulo / valor) e listas */

.pares {
    display: grid;
    margin: 0;
}

.pares div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 15px;
}

.pares div:last-child {
    border-bottom: 0;
}

.pares dt {
    color: var(--texto-2);
}

.pares dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.marcas {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marcas li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.55;
}

.marcas li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 3px;
    width: 7px;
    height: 7px;
    background: var(--cor);
    box-shadow: 0 0 8px var(--cor);
    transform: rotate(45deg);
}

.marcas li small {
    display: block;
    color: var(--texto-2);
    font-size: 13.5px;
}

/* estado de cada item no Infinity */
.estado {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: 2px;
    white-space: nowrap;
}

.estado.feito {
    color: var(--ok);
}

.estado.teste {
    color: #f2c14e;
}

.estado.breve {
    color: var(--gelo);
}

.legendaEstado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(12, 15, 18, 0.8);
    color: var(--texto-2);
    font-size: 13px;
}

.legendaEstado .estado {
    margin: 0 6px 0 0;
}

/* ------------------------------------------------------------------ regras e "em breve" */

.fichaPainel.regras {
    border-left: 3px solid var(--erro);
}

.fichaPainel.regras .marcas li::before {
    background: var(--erro);
    box-shadow: 0 0 8px var(--erro);
}

.emBreve,
.linhaDownload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.emBreve p,
.linhaDownload > p {
    max-width: 640px;
    margin: 0;
    color: var(--texto-2);
    font-size: 15px;
    line-height: 1.6;
}

.botaoInativo {
    padding: 12px 22px;
    border: 1px dashed color-mix(in srgb, var(--cor) 60%, transparent);
    border-radius: 10px;
    color: var(--cor);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ Infinity: aviso de alpha e download do launcher (23/10) */

:root {
    --alpha: #ffc14d;
}

.avisoAlpha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--alpha) 55%, transparent);
    border-left: 4px solid var(--alpha);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 193, 77, 0.14), rgba(16, 20, 24, 0.88) 60%);
    box-shadow: 0 0 24px rgba(255, 193, 77, 0.12);
    text-align: left;
}

.avisoAlpha p {
    margin: 0;
    color: var(--texto);
    font-size: 15px;
    line-height: 1.55;
}

.avisoAlpha b {
    color: var(--alpha);
}

/* link para o Dev Log na ficha do Infinity: mesmo molde do aviso, na cor do projeto */
.avisoAlpha.devlogInfinity {
    --alpha: #c9a2ff;
    background: linear-gradient(90deg, rgba(201, 162, 255, 0.14), rgba(16, 20, 24, 0.88) 60%);
    box-shadow: 0 0 24px rgba(201, 162, 255, 0.12);
}

.avisoAlpha.devlogInfinity .seloAlpha {
    background: rgba(201, 162, 255, 0.12);
}

.avisoAlpha.devlogInfinity a {
    color: var(--alpha);
    font-weight: 600;
}

.seloAlpha {
    flex: none;
    padding: 5px 12px;
    border: 1px solid var(--alpha);
    border-radius: 30px;
    background: rgba(255, 193, 77, 0.12);
    color: var(--alpha);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

#painel-infinity .avisoAlpha {
    width: 100%;
    margin: 0 0 6px;
}

.baixaLauncher {
    display: flex;
    justify-content: center;
}

.baixaLauncher .botao {
    margin-top: 0;
}

/* o .botao (e o resto) tem display proprio: sem isto o hidden nao esconde */
.soLogado[hidden],
.soDeslogado[hidden] {
    display: none !important;
}

.conviteFH {
    margin: 26px 0 6px;
}

#painel-infinity .baixaLauncher {
    margin: 22px 0 8px;
}

.precisaConta {
    margin: 0;
    padding: 12px 22px;
    border: 1px dashed color-mix(in srgb, var(--cor, var(--gelo)) 60%, transparent);
    border-radius: 10px;
    color: var(--texto);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 900px) {
    .fichaTopo {
        grid-template-columns: 1fr;
    }

    .fichaArte {
        order: -1;
        height: 210px;
    }

    .fichaArte img {
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
        mask-image: linear-gradient(180deg, #000 55%, transparent);
    }

    .fichaArte.comVideo {
        height: auto;
        padding: 18px 18px 0;
    }

    .fichaTexto {
        padding: 22px 22px 26px;
    }

    .fatos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fichaPainel {
        padding: 22px 18px 24px;
    }

    /* a dica invisivel dos slots da direita empurrava a pagina 5px para o lado */
    .dica {
        max-width: 150px;
    }

    /* no celular os degraus ficam com a mesma largura, para caber os cinco */
    .degrau {
        flex-grow: 1 !important;
        min-width: 0;
        padding: 8px 6px 7px;
    }

    .degrau b {
        font-size: 17px;
    }

    .degrau small {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slot,
    .dica,
    .degrau {
        transition: none;
    }
}

/* ================================================================== admin: seguranca (monitor de trapaca)
   05/10: a aba Seguranca do admin.html fala a lingua da ficha do servidor (fichaPainel, slot/moldura, alternaVip,
   pares, Cinzel nos titulos), no tom arcano do Infinity. Gravidade sempre escrita, com cor de estado: baixa cinza,
   media ambar, alta vermelho. Quem repete muito ganha brilho vermelho na lista de suspeitos. */

.seguranca {
    --cor: var(--gelo);
    --cor-funda: var(--gelo-escuro);
    --g1: var(--texto-2);
    --g2: #f2c14e;
    --g3: var(--erro);
    text-align: left;
}

.seguranca:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}

.seguranca [hidden] {
    display: none !important;
}

#infoBox .seguranca .segIntro {
    max-width: 680px;
    margin: 0 auto;
    font-size: 15px;
    text-align: center;
}

/* ------------------------------------------------------------------ filtros */

.segFiltros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.28);
}

.segFiltros .alternaVip button {
    min-height: 32px;
    padding: 5px 13px;
    font-size: 12px;
    white-space: nowrap;
}

.segFiltros .alternaVip button[aria-pressed="true"] {
    color: #160a24;
}

#infoBox .segFiltros select,
#infoBox .segFiltros input {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
    padding: 9px 16px;
    border-radius: 30px;
    font-size: 14px;
}

#infoBox .segFiltros input:focus {
    border-color: var(--cor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent);
}

.segAviso {
    margin: 0;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--cor) 50%, transparent);
    border-radius: 12px;
    color: var(--texto-2);
    text-align: center;
}

/* ------------------------------------------------------------------ resumo (slots) */

.inventario.segResumo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segResumo .slot > small {
    display: block;
    margin-top: 3px;
    color: var(--texto-2);
    font-size: 12px;
}

.segResumo .slot.item > b {
    font-size: 15px;
}

.segResumo .slot.alerta {
    border-color: color-mix(in srgb, var(--g3) 50%, transparent);
    box-shadow: inset 0 0 26px rgba(255, 92, 92, 0.12);
}

.segResumo .slot.alerta > b {
    color: var(--g3);
}

/* ------------------------------------------------------------------ paineis */

.seguranca .fichaPainel {
    padding: 22px 24px 24px;
    background: rgba(8, 10, 13, 0.55);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.seguranca .cabecaPainel {
    margin-bottom: 16px;
}

.painel.admin .seguranca .fichaPainel h2 {
    margin: 0;
    color: var(--texto);
    font-family: "Cinzel", Georgia, serif;
    font-size: 20px;
    letter-spacing: 1px;
}

.seguranca .fichaPainel p.nota.segNota {
    margin: -6px 0 14px;
}

.segLegenda {
    color: var(--texto-2);
    font-size: 13px;
}

.segVazio {
    margin: 0;
    padding: 14px 0;
    color: var(--texto-2);
    text-align: center;
}

/* ------------------------------------------------------------------ eventos por dia (barras) */

.segGrafico {
    position: relative;
}

.segBarras {
    display: flex;
    gap: 2px;
    height: 170px;
    padding-top: 22px;
}

.segColuna {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    border-radius: 6px;
    outline: none;
}

.segArea {
    position: relative;
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--borda);
}

.segBarra {
    position: relative;
    display: block;
    width: min(100%, 28px);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--cor), var(--cor-funda));
    transition: filter 0.15s;
}

.segBarra.zero {
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.segColuna:hover .segBarra,
.segColuna:focus-visible .segBarra {
    filter: brightness(1.3);
}

.segColuna:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 60%, transparent);
}

.segValor {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 4px;
    color: var(--texto);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.segDia {
    height: 20px;
    padding-top: 5px;
    overflow: visible;
    color: var(--texto-2);
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}

.segDica {
    position: absolute;
    top: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #0b0d10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 12.5px;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.segDica span {
    color: var(--texto-2);
}

/* ------------------------------------------------------------------ suspeitos */

.segLista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.segJogador {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2));
    transition: border-color 0.2s;
}

.segJogador.g2 {
    border-left-color: var(--g2);
}

.segJogador.g3 {
    border-left-color: var(--g3);
}

.segJogador.repete {
    border-color: color-mix(in srgb, var(--g3) 45%, transparent);
    box-shadow: 0 0 26px rgba(255, 92, 92, 0.14);
}

.segJogadorTopo,
.segEventoTopo {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.segJogadorTopo {
    display: grid;
    grid-template-columns: 26px minmax(150px, 1.1fr) minmax(0, 2fr) 70px 118px 10px;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
}

.segJogadorTopo:hover,
.segEventoTopo:hover {
    background: rgba(255, 255, 255, 0.035);
}

.segJogadorTopo:focus-visible,
.segEventoTopo:focus-visible {
    outline: 2px solid var(--cor);
    outline-offset: -2px;
}

.segRank {
    color: var(--texto-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.segQuem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.segQuem b {
    overflow: hidden;
    font-size: 15.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segQuem b.semNome {
    color: var(--texto-2);
}

.segQuem small {
    overflow: hidden;
    color: var(--texto-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segIp {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.segTipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.segChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 4px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 12.5px;
    white-space: nowrap;
}

.segChip img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
}

.segChip span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.segChip b {
    color: var(--cor);
    font-variant-numeric: tabular-nums;
}

.segRepete {
    align-self: center;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--g3) 55%, transparent);
    border-radius: 999px;
    background: rgba(255, 92, 92, 0.14);
    color: #ffb3b3;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.segNumero {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.segNumero b {
    color: var(--cor);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.segNumero small {
    color: var(--texto-2);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.segFim {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.segFim small {
    color: var(--texto-2);
    font-size: 12px;
    white-space: nowrap;
}

.gravidade {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.gravidade.g1 {
    color: var(--g1);
}

.gravidade.g2 {
    color: var(--g2);
}

.gravidade.g3 {
    background: rgba(255, 92, 92, 0.12);
    color: var(--g3);
}

.seguranca .grupoSeta {
    color: var(--texto-2);
}

.seguranca [aria-expanded="true"] .grupoSeta {
    transform: rotate(90deg);
}

.segJogadorEventos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 14px 56px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    color: var(--texto-2);
    font-size: 14px;
}

/* ------------------------------------------------------------------ eventos */

.segEvento {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--texto);
}

.segEvento.aberto {
    border-color: color-mix(in srgb, var(--cor) 35%, transparent);
}

.segEventoTopo {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto 10px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
}

.moldura.mini {
    width: 36px;
    height: 36px;
    margin: 0;
}

.moldura.mini img {
    width: 30px;
    height: 30px;
}

.segEventoTexto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.segEventoTexto b {
    overflow: hidden;
    font-size: 14.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segEventoTexto small {
    overflow: hidden;
    color: var(--texto-2);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segVezes {
    color: var(--cor);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pares.segDetalhe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    margin: 0 14px 12px 60px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid color-mix(in srgb, var(--cor) 45%, transparent);
}

.pares.segDetalhe div {
    padding: 7px 0;
    font-size: 13.5px;
}

.pares.segDetalhe div:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}

.pares.segDetalhe dd {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pares.segDetalhe .segDetalheTexto {
    flex-direction: column;
    gap: 4px;
    grid-column: 1 / -1;
}

.pares.segDetalhe .segDetalheTexto dd {
    color: var(--texto);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 400;
    text-align: left;
}

.segPaginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    color: var(--texto-2);
    font-size: 14px;
}

.segPaginas:empty {
    display: none;
}

.segPaginas .abaRank:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ------------------------------------------------------------------ legenda dos tipos */

.marcas.segTiposLista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 30px;
}

#infoBox .segTiposLista li {
    margin: 0;
    padding: 0 0 0 22px;
    border: 0;
    color: var(--texto-2);
    font-size: 13.5px;
    line-height: 1.55;
}

.segTiposLista b {
    display: block;
    color: var(--texto);
    font-size: 14.5px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 900px) {
    .inventario.segResumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segJogadorTopo {
        grid-template-columns: 22px minmax(0, 1fr) auto 10px;
        grid-template-areas:
            "rank quem numero seta"
            ". tipos tipos tipos"
            ". fim fim fim";
        gap: 8px 12px;
        padding: 12px;
    }

    .segRank {
        grid-area: rank;
    }

    .segQuem {
        grid-area: quem;
    }

    .segTipos {
        grid-area: tipos;
    }

    .segNumero {
        grid-area: numero;
    }

    .segFim {
        flex-direction: row;
        grid-area: fim;
        align-items: center;
        justify-content: space-between;
    }

    .segJogadorTopo .grupoSeta {
        grid-area: seta;
    }

    .segJogadorEventos {
        padding: 10px 8px 12px;
    }

    .segQuem small,
    .segEventoTexto b {
        white-space: normal;
    }

    .segEventoTopo {
        grid-template-columns: 36px minmax(0, 1fr) auto 10px;
        grid-template-areas:
            "icone texto grav seta"
            "icone texto vezes seta";
        row-gap: 2px;
    }

    .segEventoTopo .moldura {
        grid-area: icone;
    }

    .segEventoTexto {
        grid-area: texto;
    }

    .segEventoTopo .gravidade {
        grid-area: grav;
        justify-self: end;
    }

    .segVezes {
        grid-area: vezes;
        justify-self: end;
        font-size: 13px;
    }

    .segEventoTopo .grupoSeta {
        grid-area: seta;
    }

    .pares.segDetalhe {
        grid-template-columns: minmax(0, 1fr);
        margin: 0 10px 10px;
        padding-left: 12px;
    }

    .pares.segDetalhe div:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .marcas.segTiposLista {
        grid-template-columns: minmax(0, 1fr);
    }

    .seguranca .fichaPainel {
        padding: 18px 14px 18px;
    }

    #infoBox .segFiltros select,
    #infoBox .segFiltros input {
        flex-basis: 100%;
    }

    .segFiltros {
        padding: 10px 8px;
    }

    .segFiltros .alternaVip button {
        padding: 5px 10px;
        letter-spacing: 0.5px;
    }
}

/* 12/10: aba Entradas no jogo do admin - seletor de servidor e contas por dia */
.jogoTopo {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.jogoTopo .intro {
    margin: 0;
    flex: 1 1 280px;
}
.graficoDias {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 6px;
    align-items: end;
    height: 150px;
    margin: 18px 0 22px;
    padding: 12px 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}
.diaColuna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.diaColuna b {
    font-size: 12px;
    color: #dfe7ff;
    min-height: 16px;
}
.diaBarra {
    width: 70%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #8fb4ff, #3d6bd8);
    transition: height 0.4s ease;
}
.diaColuna.hoje .diaBarra {
    background: linear-gradient(180deg, #c9a2ff, #7b4fd8);
}
.diaColuna small {
    margin-top: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .graficoDias { gap: 3px; padding: 10px 6px 6px; }
    .diaColuna small { font-size: 9px; transform: rotate(-45deg); margin-top: 10px; }
}
/* o seletor da aba Entradas no jogo fica fora da ficha (onde --cor e definida): cor de cada servidor */
#jogoServidor button[data-v="infinity"][aria-pressed="true"] { background: #c9a2ff; color: #170b26; }
#jogoServidor button[data-v="fireheart"][aria-pressed="true"] { background: #ff6a3d; color: #1f0904; }