/* ==========================================================
   BLOOD XII - ÁREA PÚBLICA
   ========================================================== */


/* ==========================================================
   VARIÁVEIS GERAIS
   ========================================================== */

:root {
    --bg: #040608;
    --panel: #0d1117;
    --line: rgba(255,255,255,.09);
    --text: #f3f5f7;
    --muted: #8994a3;
    --red: #d63d48;
    --gold: #e6b85c;
}


/* ==========================================================
   RESET / BASE
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    background: #030508;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -20%,
            #3a1118 0,
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 40%,
            #152135 0,
            transparent 30%
        ),
        #030508;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}


/* ==========================================================
   TOPO PÚBLICO
   ========================================================== */

.public-top {
    height: 82px;

    border-bottom: 1px solid var(--line);

    background: #05070ad9;

    backdrop-filter: blur(18px);

    display: flex;
    align-items: center;

    padding: 0 28px;

    position: sticky;
    top: 0;
    z-index: 20;
}


/* ==========================================================
   LOGO BLOOD XII - TOPO PÚBLICO
   ==========================================================

   >>> AJUSTE FINO DA LOGO DO TOPO <<<

   height    = altura da logo
   max-width = largura máxima permitida

   ATUAL:
       height: 52px;
       max-width: 168px;

   Para AUMENTAR um pouco, por exemplo:
       height: 58px;
       max-width: 190px;

   Como o seu SVG é horizontal, eu mexeria primeiro
   no max-width e depois na altura.
   ========================================================== */

.brand {
    width: auto;

    /* >>> ALTURA DA LOGO DO TOPO <<< */
    height: 72px;

    /* >>> LARGURA MÁXIMA DA LOGO DO TOPO <<< */
    max-width: 188px;

    object-fit: contain;
    display: block;

    /* Efeito vermelho atrás da logo */
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.18))
        drop-shadow(0 0 12px rgba(214,61,72,.55))
        drop-shadow(0 0 28px rgba(214,61,72,.30));
}


.public-top nav {
    margin-left: auto;

    display: flex;
    gap: 9px;
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.btn {
    height: 42px;

    padding: 0 18px;

    border-radius: 12px;
    border: 1px solid var(--line);

    background: #ffffff08;
    color: #fff;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1;

    white-space: nowrap;
}


.btn.primary {
    background:
        linear-gradient(
            135deg,
            #d63d48,
            #8d1823
        );

    border-color: #e7586366;

    box-shadow:
        0 12px 32px #a91c2744;
}


/* ==========================================================
   HOME / LANDING PAGE
   ========================================================== */

.landing {
    max-width: 1240px;

    margin: auto;

    padding: 76px 24px 80px;

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    align-items: center;

    gap: 58px;
}


/* ==========================================================
   TEXTO PEQUENO ACIMA DO TÍTULO
   ========================================================== */

.kicker {
    display: inline-flex;

    gap: 8px;

    align-items: center;

    font-size: 11px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: #d8a8ad;
}


.kicker i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 14px #e34b58;
}


/* ==========================================================
   TÍTULO PRINCIPAL
   ========================================================== */

.landing h1 {
    font-size: 58px;

    line-height: .98;

    margin: 18px 0;
}


.landing h1 span {
    color: #df4752;
}


.landing p {
    font-size: 16px;

    line-height: 1.7;

    color: #a5afbc;

    max-width: 650px;
}


/* ==========================================================
   BOTÕES DO HERO
   ========================================================== */

.cta {
    display: flex;

    gap: 10px;

    margin-top: 27px;
}


.cta .btn {
    height: 48px;

    padding: 0 21px;
}


/* ==========================================================
   RODA DOS 12 SIGNOS
   ========================================================== */

.zodiac-wheel {
    aspect-ratio: 1;

    border: 1px solid var(--line);

    border-radius: 50%;

    position: relative;

    background:
        radial-gradient(
            circle,
            #171118,
            transparent 62%
        );

    box-shadow:
        0 0 90px #9a1e2833,
        inset 0 0 70px #ffffff08;
}


.zodiac-wheel::before,
.zodiac-wheel::after {
    content: '';

    position: absolute;

    border:
        1px solid #ffffff12;

    border-radius: 50%;

    inset: 12%;
}


.zodiac-wheel::after {
    inset: 29%;
}


/* ==========================================================
   CÍRCULO CENTRAL DA RODA
   ========================================================== */

.center-mark {
    position: absolute;

    inset: 33%;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid #d63d4860;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(214,61,72,.16),
            rgba(9,11,16,.96) 58%
        );

    box-shadow:
        0 0 48px rgba(214,61,72,.35),
        inset 0 0 32px rgba(214,61,72,.12);
}


/* ==========================================================
   XII NO CENTRO DA RODA
   ==========================================================

   >>> AJUSTE FINO DO XII CENTRAL <<<

   ATUAL:
       width: 72px;
       height: 72px;

   Para DIMINUIR, por exemplo:
       width: 60px;
       height: 60px;

   Ou:
       width: 56px;
       height: 56px;

   max-width / max-height impedem que ele fique
   maior que 48% do círculo central.
   ========================================================== */

.center-mark img {

    /* >>> TAMANHO DO XII CENTRAL <<< */
    width: 52px;
    height: 52px;

    max-width: 48%;
    max-height: 48%;

    object-fit: contain;

    /* Glow vermelho por trás do XII */
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.16))
        drop-shadow(0 0 14px rgba(214,61,72,.62))
        drop-shadow(0 0 28px rgba(214,61,72,.38));
}


/* ==========================================================
   SIGNOS DA RODA
   ========================================================== */

.sign {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 52px;

    margin: -26px;

    border-radius: 15px;

    border:
        1px solid #ffffff12;

    background: #0a0e14;

    display: grid;
    place-items: center;

    font-family:
        'Segoe UI Symbol',
        sans-serif;

    font-size: 25px;

    color: #cbd2dc;
}


/* ÁRIES */
.sign:nth-child(2) {
    transform:
        rotate(0deg)
        translateY(-205px)
        rotate(0deg);
}


/* TOURO */
.sign:nth-child(3) {
    transform:
        rotate(30deg)
        translateY(-205px)
        rotate(-30deg);
}


/* GÊMEOS */
.sign:nth-child(4) {
    transform:
        rotate(60deg)
        translateY(-205px)
        rotate(-60deg);
}


/* CÂNCER */
.sign:nth-child(5) {
    transform:
        rotate(90deg)
        translateY(-205px)
        rotate(-90deg);
}


/* LEÃO */
.sign:nth-child(6) {
    transform:
        rotate(120deg)
        translateY(-205px)
        rotate(-120deg);
}


/* VIRGEM */
.sign:nth-child(7) {
    transform:
        rotate(150deg)
        translateY(-205px)
        rotate(-150deg);
}


/* LIBRA */
.sign:nth-child(8) {
    transform:
        rotate(180deg)
        translateY(-205px)
        rotate(-180deg);
}


/* ESCORPIÃO */
.sign:nth-child(9) {
    transform:
        rotate(210deg)
        translateY(-205px)
        rotate(-210deg);
}


/* SAGITÁRIO */
.sign:nth-child(10) {
    transform:
        rotate(240deg)
        translateY(-205px)
        rotate(-240deg);
}


/* CAPRICÓRNIO */
.sign:nth-child(11) {
    transform:
        rotate(270deg)
        translateY(-205px)
        rotate(-270deg);
}


/* AQUÁRIO */
.sign:nth-child(12) {
    transform:
        rotate(300deg)
        translateY(-205px)
        rotate(-300deg);
}


/* PEIXES */
.sign:nth-child(13) {
    transform:
        rotate(330deg)
        translateY(-205px)
        rotate(-330deg);
}


/* ==========================================================
   LOGIN / CADASTRO / RECUPERAÇÃO DE SENHA
   ========================================================== */

.auth-wrap {
    min-height:
        calc(100vh - 82px);

    display: grid;

    place-items: center;

    padding: 30px;
}


.auth-card {
    width:
        min(440px,100%);

    padding: 28px;

    border:
        1px solid var(--line);

    border-radius: 22px;

    background:
        #0b0f15e8;

    box-shadow:
        0 30px 80px #0008;
}


/* ==========================================================
   LOGO DAS TELAS LOGIN / CADASTRO
   ==========================================================

   >>> TAMANHO DA LOGO NAS TELAS DE LOGIN <<<

   height atual: 58px
   max-width atual: 180px
   ========================================================== */

.auth-card .auth-logo {display:none!important;}


.auth-card h1 {
    font-size: 25px;

    margin:
        0 0 6px;

    text-align: center;
}


.auth-card > p {
    text-align: center;

    color: var(--muted);

    font-size: 12px;

    margin:
        0 0 22px;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

.field {
    margin-bottom: 13px;
}


.field label {
    display: block;

    font-size: 10px;

    text-transform: uppercase;

    color: #9aa4b1;

    letter-spacing: .08em;

    margin:
        0 0 6px;
}


.field input {
    width: 100%;

    height: 46px;

    border:
        1px solid var(--line);

    border-radius: 12px;

    background: #06090d;

    color: #fff;

    padding:
        0 13px;

    outline: none;
}


.field input:focus {
    border-color:
        #d63d4866;

    box-shadow:
        0 0 0 3px #d63d4815;
}


/* ==========================================================
   BOTÃO LOGIN / CADASTRO
   ========================================================== */

.auth-card .btn {
    width: 100%;

    height: 47px;

    margin-top: 5px;
}


/* ==========================================================
   LINKS LOGIN / CADASTRO
   ========================================================== */

.auth-links {
    text-align: center;

    font-size: 11px;

    color: var(--muted);

    margin-top: 16px;
}


.auth-links a {
    color: #e4b4b8;
}


/* ==========================================================
   NOTA INFERIOR DA PÁGINA
   ========================================================== */

.public-note {
    max-width: 1240px;

    margin:
        0 auto 40px;

    padding:
        0 24px;

    color: #697484;

    font-size: 10px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .landing {
        grid-template-columns: 1fr;

        padding-top: 45px;
    }


    .zodiac-wheel {
        max-width: 520px;

        width: 100%;

        margin: auto;
    }


    .landing h1 {
        font-size: 45px;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 600px) {

    .public-top {
        height: 68px;

        padding:
            0 14px;
    }


    /* ======================================================
       LOGO DO TOPO NO CELULAR

       >>> AJUSTE MOBILE SEPARADO <<<

       Se alterar a logo desktop, o celular continua
       usando estes valores.
       ====================================================== */

    .brand {
        width: auto;

        /* >>> ALTURA MOBILE <<< */
        height: 44px;

        /* >>> LARGURA MÁXIMA MOBILE <<< */
        max-width: 138px;
    }


    .public-top nav .btn:first-child {
        display: none;
    }


    .landing {
        padding:
            44px 17px 70px;
    }


    .landing h1 {
        font-size: 37px;
    }


    .landing p {
        font-size: 14px;
    }


    /* A roda dos signos fica escondida no celular */
    .zodiac-wheel {
        display: none;
    }


    .cta {
        flex-direction: column;
    }


    .cta .btn {
        width: 100%;
    }


    .auth-wrap {
        padding: 18px;
    }


    .auth-card {
        padding:
            22px 18px;
    }

}

/* ==========================================================
   RODA INTERATIVA / PERSONAGENS DAS CASAS
   ========================================================== */

:root {
    --hover-house: #d63d48;
    --auth-house: #9b4dff;
}

.landing-interactive {
    position: relative;
    overflow: visible;
}

.landing-copy {
    position: relative;
    z-index: 8;
}

.wheel-stage {
    position: relative;
    min-height: 565px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.wheel-stage .zodiac-wheel {
    position: relative;
    width: min(100%, 470px);
    z-index: 5;
    transition: border-color .22s ease, box-shadow .22s ease;
}

.wheel-stage.has-preview .zodiac-wheel {
    border-color: color-mix(in srgb, var(--hover-house) 38%, rgba(255,255,255,.09));
    box-shadow:
        0 0 100px color-mix(in srgb, var(--hover-house) 20%, transparent),
        inset 0 0 70px #ffffff08;
}

/* ==========================================================
   PERSONAGEM DA CASA COMO BACKGROUND DA TELA

   IMPORTANTE:
   O personagem NÃO fica preso à roda.
   Ele encosta no canto direito da viewport e permanece atrás
   da roda dos signos, funcionando como ambientação da página.

   CORREÇÃO DO "CORTE" / LINHA VERTICAL:
   Antes o fade horizontal era feito com uma camada preta
   (#030508) começando exatamente na borda esquerda deste bloco.
   Como o fundo da página possui gradientes vermelho/azul, isso
   criava uma emenda visível.

   Agora o próprio bloco é mascarado até ficar transparente na
   esquerda. Assim o fundo original da página continua aparecendo
   por baixo e a transição fica contínua, sem linha.
   ========================================================== */

.house-backdrop {
    position: fixed;
    z-index: 1;

    /* começa logo abaixo do header público */
    top: 82px;
    right: 0;
    bottom: 0;

    /* Um pouco mais largo para o fade acontecer com suavidade */
    width: min(58vw, 940px);

    opacity: 0;
    transform: translateX(42px);

    transition:
        opacity .28s ease,
        transform .34s ease;

    pointer-events: none;
    overflow: hidden;

    /*
       Faz o BACKDROP inteiro desaparecer gradualmente à esquerda,
       em vez de colocar uma faixa preta sobre o fundo da página.
       Chrome / Edge / Safari usam também o prefixo -webkit-.
    */
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.08) 8%,
            rgba(0,0,0,.38) 20%,
            #000 42%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.08) 8%,
            rgba(0,0,0,.38) 20%,
            #000 42%,
            #000 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*
   Mantemos apenas um sombreado vertical muito suave.
   Não existe mais o gradiente horizontal preto que causava
   a divisão entre a parte vermelha e a parte azul da página.
*/
.house-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(3,5,8,.70) 0%,
            transparent 20%,
            transparent 86%,
            rgba(3,5,8,.16) 100%
        );
}

.house-backdrop img {
    position: absolute;
    inset: 0 0 0 auto;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: right bottom;

    filter:
        drop-shadow(
            0 0 34px
            color-mix(in srgb, var(--hover-house) 28%, transparent)
        )
        saturate(1.04);
}

.wheel-stage.has-preview .house-backdrop {
    opacity: .82;
    transform: translateX(0);
}

.house-hover-copy {
    position: absolute;
    z-index: 7;
    left: 4%;
    right: 4%;
    bottom: -18px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 12px #000;
}

.house-hover-copy strong {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--hover-house);
}

.house-hover-copy span {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #7f8a98;
}

.house-hover-copy p {
    margin: 7px auto 0;
    max-width: 430px;
    font-size: 12px;
    line-height: 1.4;
    color: #d5dbe3;
    font-weight: 700;
}

.sign {
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sign:hover,
.sign:focus-visible,
.sign.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--hover-house) 66%, #fff 10%);
    background: color-mix(in srgb, var(--hover-house) 18%, #0a0e14);
    box-shadow: 0 0 24px color-mix(in srgb, var(--hover-house) 32%, transparent);
}

/* ==========================================================
   LOGIN / CADASTRO / RECUPERAÇÃO COM PERSONAGEM
   ========================================================== */

.auth-page {
    overflow-x: hidden;
}

.auth-layout {
    width: min(1240px, 100%);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 42px;
    align-items: center;
}

.auth-showcase {
    align-self: stretch;
    min-height: 610px;
    position: relative;
    overflow: visible;
}

.auth-showcase::before {
    content: '';
    position: absolute;
    width: 430px;
    height: 430px;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--auth-house) 28%, transparent), transparent 66%);
    filter: blur(10px);
}

.auth-showcase img {
    position: absolute;
    inset: -20px 0 -25px 0;
    width: 100%;
    height: calc(100% + 45px);
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
    filter: drop-shadow(0 0 34px color-mix(in srgb, var(--auth-house) 30%, transparent));
}

.auth-showcase img.is-visible {
    opacity: .92;
    transform: translateY(0);
}

.auth-showcase-copy {
    position: absolute;
    z-index: 2;
    left: 30px;
    bottom: 22px;
    max-width: 510px;
    padding: 16px 18px;
    border-left: 2px solid var(--auth-house);
    background: linear-gradient(90deg, rgba(3,5,8,.86), rgba(3,5,8,.12));
    text-shadow: 0 2px 14px #000;
}

.auth-showcase-copy > span {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--auth-house);
}

.auth-showcase-copy strong {
    display: block;
    margin-top: 5px;
    font-size: 22px;
}

.auth-showcase-copy p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #c7cfda;
}

.auth-page .auth-card {
    position: relative;
    z-index: 4;
}

@media (max-width: 900px) {
    .wheel-stage {
        min-height: 575px;
        width: min(560px, 100%);
        margin: 0 auto;
    }

    .house-backdrop {
        right: -100px;
        left: -100px;
    }

    .auth-layout {
        grid-template-columns: 1fr;
        width: min(560px, 100%);
    }

    .auth-showcase {
        display: none;
    }
}

@media (max-width: 600px) {
    .wheel-stage {
        display: none;
    }

    .auth-page {
        position: relative;
    }

    .auth-page::before {
        content: '';
        position: fixed;
        inset: 68px 0 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--auth-house) 18%, transparent), transparent 45%);
        z-index: -1;
    }
}


/* ==========================================================
   RESPONSIVIDADE DO BACKGROUND INTERATIVO
   ========================================================== */

@media (max-width: 1100px) {
    .house-backdrop {
        width: min(62vw, 720px);
    }
}

@media (max-width: 900px) {
    /* Em tablet a arte volta a pertencer à área da roda
       para não invadir a coluna de texto. */
    .house-backdrop {
        position: absolute;
        top: -90px;
        right: -12%;
        bottom: -45px;
        width: 72%;
        height: auto;
    }

    .house-backdrop img {
        object-position: right bottom;
    }
}

@media (max-width: 600px) {
    .house-backdrop {
        display: none;
    }
}


/* ==========================================================
   AJUSTE - TEXTO DAS CASAS SOMENTE DURANTE HOVER/FOCO
   ========================================================== */

.house-hover-copy {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity .20s ease,
        transform .20s ease,
        visibility .20s ease;
}

.wheel-stage.has-preview .house-hover-copy {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ==========================================================
   RODAPÉ PÚBLICO
   Substitui a antiga mensagem de protótipo.
   ========================================================== */

.public-footer {
    max-width: 1240px;
    margin: -2px auto 34px;
    padding: 0 24px 18px;
    color: #697484;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.social-links a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #727d8b;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
    color: #fff;
    border-color: rgba(214,61,72,.48);
    background: rgba(214,61,72,.09);
    box-shadow: 0 0 18px rgba(214,61,72,.18);
    transform: translateY(-1px);
    outline: none;
}

.social-links svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-links .fill-dot,
.social-links .play-fill {
    fill: currentColor;
    stroke: none;
}

.legal-links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.legal-links a {
    color: #697484;
    transition: color .18s ease;
}

.legal-links a:hover,
.legal-links a:focus-visible {
    color: #c8d0da;
    outline: none;
}

.legal-links span {
    opacity: .45;
}

@media (max-width: 600px) {
    .public-footer {
        margin-top: 0;
        padding: 0 17px 24px;
        text-align: center;
    }

    .social-links,
    .legal-links {
        justify-content: center;
    }
}

/* ==========================================================
   CORREÇÃO DEFINITIVA - AUTH CENTRALIZADO
   ==========================================================
   IMPORTANTE:
   Este bloco fica no FINAL do arquivo para sobrescrever as
   regras antigas do layout em 2 colunas.
   ========================================================== */

.auth-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/*
   O main ocupa toda a largura e centraliza SOMENTE o formulário.
   O showcase fica fixed e, portanto, sai do fluxo do layout.
*/
.auth-page .auth-layout {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px);
    min-height: calc(100svh - 82px);
    margin: 0 !important;
    padding: 32px 24px 112px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;

    position: relative;
    isolation: isolate;
}

/* FORMULÁRIO: centro real da viewport */
.auth-page .auth-card {
    position: relative;
    z-index: 5;

    width: min(440px, 100%);
    margin: 0 auto !important;

    justify-self: auto !important;
    align-self: auto !important;
    flex: 0 0 auto;
}

/*
   PERSONAGEM: ambientação fixa à DIREITA.
   Não participa do flex e não desloca o formulário.
   O formulário continua exatamente no centro da viewport.
*/
.auth-page .auth-showcase {
    position: fixed !important;
    z-index: 1;

    top: 82px !important;
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;

    width: min(46vw, 780px) !important;
    height: auto !important;
    min-height: 0 !important;

    display: block;
    overflow: hidden;
    pointer-events: none;

    /*
       Agora o fade acontece do CENTRO para a direita:
       transparente junto ao formulário e sólido no canto direito.
    */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.68) 24%,
        #000 42%,
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.68) 24%,
        #000 42%,
        #000 100%
    );
}

.auth-page .auth-showcase::before {
    width: min(46vw, 680px);
    height: min(46vw, 680px);
    left: 53%;
    top: 45%;
}

.auth-page .auth-showcase img {
    position: absolute !important;
    inset: auto 0 -2% auto !important;

    width: min(600px, 96%) !important;
    height: 104% !important;

    object-fit: contain !important;
    object-position: right bottom !important;
}

.auth-page .auth-showcase img.is-visible {
    opacity: .88 !important;
    transform: translateY(0) !important;
}

/*
   Texto da Casa também acompanha a inversão.
   Fica na área inferior direita da arte, acima do rodapé visual.
*/
.auth-page .auth-showcase-copy {
    position: absolute;
    left: auto !important;
    right: max(28px, calc((100vw - 1240px) / 2 + 24px));
    bottom: 112px;
    max-width: 350px;
    text-align: right;

    border-left: 0;
    border-right: 2px solid var(--auth-house);
    padding: 16px 18px;

    background: linear-gradient(
        270deg,
        rgba(3,5,8,.86),
        rgba(3,5,8,.12)
    );
}

/*
   RODAPÉ AUTH: mesma posição visual usada na home,
   no canto inferior esquerdo.
*/
.auth-page .auth-footer {
    position: fixed;
    z-index: 12;

    left: max(24px, calc((100vw - 1240px) / 2 + 24px));
    bottom: 24px;

    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .auth-page .auth-layout {
        min-height: calc(100vh - 82px);
        min-height: calc(100svh - 82px);
        padding: 28px 20px 112px;
    }

    .auth-page .auth-showcase {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .auth-page .auth-layout {
        min-height: auto;
        padding: 20px 17px 28px;
    }

    .auth-page .auth-card {
        width: min(440px, 100%);
    }

    .auth-page .auth-footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: min(440px, calc(100% - 34px));
        max-width: 440px;
        margin: 0 auto 22px;
        padding: 0 0 10px;
        text-align: center;
    }

    .auth-page .auth-footer .social-links,
    .auth-page .auth-footer .legal-links {
        justify-content: center;
    }
}

/* BLOOD XII — navegação editorial pública */
.public-top .news-link{margin-left:auto}
.public-top .news-link + .btn{margin-left:0}
@media(max-width:640px){.public-top .news-link{display:none}}

/* ==========================================================
   AUTH REAL — cadastro, Google e feedbacks
   ========================================================== */
.auth-form{display:block}
.auth-check{display:flex;align-items:flex-start;gap:9px;margin:11px 0;color:#c5cad1;font-size:11px;line-height:1.45;text-transform:none;letter-spacing:0}
.auth-check input{width:15px;height:15px;flex:0 0 15px;margin:1px 0 0;accent-color:#b5263a}
.auth-check a{color:#e4b4b8;text-decoration:underline;text-underline-offset:2px}
.auth-check.muted-check{color:#7f8996}
.auth-message{min-height:18px;margin:12px 0 0;text-align:center;font-size:11px;line-height:1.45;color:#8c96a3}
.auth-message:empty{display:none}
.auth-message[data-type="success"]{color:#73c694}
.auth-message[data-type="error"]{color:#ef7c87}
.auth-message[data-type="warning"]{color:#d9ac64}
.auth-message[data-type="info"]{color:#aab6c5}
.auth-divider{display:flex;align-items:center;gap:12px;margin:10px 0 8px;color:#58616d;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:#ffffff10}
.google-button-slot{width:100%;min-height:44px;display:flex;justify-content:center;overflow:hidden}
.google-note{margin:10px 0 0!important;font-size:10px!important;line-height:1.5!important;color:#697483!important}
.google-dev-placeholder{padding:12px 14px;border:1px dashed #343b45;border-radius:12px;background:#06090d;color:#9ca5b0;text-align:center;font-size:10px;line-height:1.45}
.google-dev-placeholder strong{display:block;color:#d9dce1;font-size:11px;margin-bottom:3px}
.google-onboarding{margin-top:18px;padding:17px;border:1px solid #48212a;border-radius:16px;background:linear-gradient(180deg,#120b0f,#080b10)}
.google-onboarding[hidden]{display:none!important}
.google-onboarding-kicker{display:block;margin-bottom:5px;color:#bf394a;font-size:9px;font-weight:800;letter-spacing:.16em}
.google-onboarding h2{margin:0 0 6px;font-size:18px;text-align:left}
.google-onboarding>p{margin:0 0 14px;color:#8993a0;font-size:11px;line-height:1.5;text-align:left}
.auth-card.is-google-onboarding [data-auth-registration],.auth-card.is-google-onboarding [data-google-entry],.auth-card.is-google-onboarding [data-auth-links]{display:none!important}
.google-account-summary{display:flex;align-items:center;gap:11px;margin:12px 0 14px;padding:11px;border:1px solid #252c35;border-radius:12px;background:#0a0e13}
.google-account-summary img{width:42px;height:42px;flex:0 0 42px;border-radius:50%;object-fit:cover;border:1px solid #3a424d;background:#11161d}
.google-account-summary div{min-width:0;display:grid;gap:2px}
.google-account-summary strong{overflow:hidden;text-overflow:ellipsis;color:#edf0f3;font-size:12px;white-space:nowrap}
.google-account-summary span{overflow:hidden;text-overflow:ellipsis;color:#7f8996;font-size:10px;white-space:nowrap}
.field-help{display:block;margin-top:5px;color:#6f7986;font-size:9.5px;line-height:1.4}
.google-birthday-action{background:#11151b!important;border-color:#3b424d!important;color:#f1f3f5!important}
.auth-text-button{display:block;width:100%;margin:10px 0 12px;padding:0;border:0;background:transparent;color:#c88f98;font-size:10px;text-decoration:underline;cursor:pointer}
.house-result{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center;margin:14px 0 8px;padding:12px;border:1px solid color-mix(in srgb,var(--auth-house) 34%,#26303a);border-radius:13px;background:color-mix(in srgb,var(--auth-house) 8%,#070a0f)}
.house-result>span{grid-row:1/3;font-size:28px;color:var(--auth-house);text-align:center}
.house-result strong{font-size:12px;color:#f1f2f4}
.house-result small{font-size:9px;color:#8b95a2;text-transform:uppercase;letter-spacing:.07em}
.debug-activation-link{display:block;margin:9px 0 0;padding:10px;border:1px dashed #8b6426;border-radius:10px;color:#e4bd77;text-align:center;font-size:10px;text-decoration:none}
@media(max-width:600px){.google-onboarding{padding:14px}.auth-check{font-size:10.5px}}


/* BLOOD XII — senha visível/oculta */
.password-control{position:relative;width:100%}
.password-control input{padding-right:48px!important}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#7f8996;display:grid;place-items:center;cursor:pointer;transition:color .18s ease,background .18s ease}
.password-toggle:hover,.password-toggle:focus-visible{color:#eef1f4;background:#ffffff0a;outline:none}
.password-toggle[aria-pressed="true"]{color:var(--auth-house,#d94355);background:color-mix(in srgb,var(--auth-house,#d94355) 10%,transparent)}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* ==========================================================
   AJUSTE PÚBLICO 038 — rodapé e páginas legais
   ========================================================== */
.public-copyright{
    margin-top:8px;
    font-size:10px;
    color:#566170;
}

.legal-page{
    width:min(920px,100%);
    min-height:calc(100vh - 82px);
    margin:0 auto;
    padding:70px 24px 80px;
}
.legal-page h1{
    margin:14px 0 28px;
    font-size:clamp(34px,5vw,54px);
    line-height:1.05;
}
.legal-content{
    padding:30px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(13,17,23,.78);
    box-shadow:0 24px 70px rgba(0,0,0,.24);
    color:#aeb7c4;
    font-size:14px;
    line-height:1.78;
}
.legal-content h2,.legal-content h3,.legal-content h4{
    color:#eef1f5;
    line-height:1.25;
}
.legal-content h2{margin:30px 0 10px;font-size:20px}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{margin:24px 0 8px;font-size:17px}
.legal-content p{margin:0 0 16px;color:#aeb7c4;line-height:1.78}
.legal-content ul,.legal-content ol{padding-left:22px;margin:0 0 18px}
.legal-content li{margin:6px 0}
.legal-content a{color:#e4b4b8;text-decoration:underline;text-underline-offset:2px}
.legal-content blockquote{margin:20px 0;padding:14px 18px;border-left:3px solid var(--red);background:rgba(255,255,255,.025)}

/* No mobile, escondemos apenas o atalho editorial e preservamos Voltar. */
@media (max-width:600px){
    .public-top nav .btn:first-child{display:inline-flex}
    .public-top nav .news-link{display:none}
    .legal-page{min-height:calc(100vh - 68px);padding:46px 17px 60px}
    .legal-content{padding:22px 18px}
}

/* A home pública mantém Notícias como único atalho do cabeçalho também no mobile. */
@media (max-width:640px){
    body:not(.auth-page) .public-top nav .news-link{display:inline-flex}
}

/* Ajuste 083 — Convite pessoal para o BLOOD XII */
.invite-page{min-height:100vh;background:radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--invite-primary,#18bfff) 11%,transparent),transparent 33%),linear-gradient(135deg,#02050a,color-mix(in srgb,var(--invite-deep,#041725) 72%,#070a0f) 58%,#04070b);color:#edf3f8}.invite-top{background:rgba(3,6,10,.82);backdrop-filter:blur(14px)}.invite-wrap{width:min(880px,calc(100% - 34px));min-height:calc(100vh - 180px);margin:0 auto;padding:70px 0 80px;display:grid;place-items:center}.invite-card{position:relative;width:min(720px,100%);padding:36px;border:1px solid color-mix(in srgb,var(--invite-primary,#18bfff) 28%,#2b313b);border-radius:28px;background:linear-gradient(145deg,rgba(14,20,29,.96),rgba(7,10,15,.96));box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 46px color-mix(in srgb,var(--invite-primary,#18bfff) 8%,transparent);text-align:center;overflow:hidden}.invite-card:before{content:"";position:absolute;inset:-160px -190px auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--invite-primary,#18bfff) 14%,transparent),transparent 66%);pointer-events:none}.invite-house-mark{position:relative;width:112px;height:112px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--invite-primary,#18bfff) 34%,#343d49);border-radius:30px;background:rgba(255,255,255,.025);box-shadow:0 0 32px color-mix(in srgb,var(--invite-primary,#18bfff) 18%,transparent)}.invite-house-mark img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--invite-primary,#18bfff) 24%,transparent))}.invite-kicker{display:block;color:color-mix(in srgb,var(--invite-primary,#18bfff) 82%,#fff);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.invite-card h1{position:relative;margin:10px auto 14px;max-width:650px;font-size:clamp(32px,5vw,54px);line-height:1.02;letter-spacing:-.035em}.invite-card h1 strong{color:color-mix(in srgb,var(--invite-primary,#18bfff) 74%,#fff)}.invite-lead{max-width:620px;margin:0 auto;color:#a8b4c2;font-size:15px;line-height:1.7}.invite-oath{display:grid;gap:7px;margin:26px 0;padding:18px;border:1px solid color-mix(in srgb,var(--invite-primary,#18bfff) 22%,#2a323c);border-radius:18px;background:color-mix(in srgb,var(--invite-primary,#18bfff) 5%,rgba(255,255,255,.015))}.invite-oath span{color:#8195aa;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.invite-oath blockquote{margin:0;color:#f5fbff;font-size:20px;font-weight:800;line-height:1.35}.invite-oath small{color:#8294a7;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.invite-transparency,.invite-notice{display:grid;gap:5px;margin:0 0 20px;padding:14px 16px;border:1px solid #293540;border-radius:14px;background:rgba(255,255,255,.018);text-align:left}.invite-transparency strong,.invite-notice strong{font-size:12px}.invite-transparency span,.invite-notice span{color:#91a2b5;font-size:11px;line-height:1.55}.invite-cta{width:100%;min-height:50px;font-size:14px}.invite-secondary{display:inline-block;margin-top:15px;color:#8999aa;font-size:11px;text-decoration:none}.invite-secondary:hover{color:#dce8f4}.invite-missing h1{font-size:40px}.invite-footer{position:static!important;width:min(720px,calc(100% - 34px))!important;margin:0 auto 28px!important;text-align:center}.invite-footer .social-links,.invite-footer .legal-links{justify-content:center}
@media(max-width:640px){.invite-wrap{width:min(100% - 24px,720px);padding:32px 0 44px}.invite-card{padding:24px 18px;border-radius:22px}.invite-house-mark{width:88px;height:88px;border-radius:23px}.invite-house-mark img{width:60px;height:60px}.invite-card h1{font-size:34px}.invite-lead{font-size:13px}.invite-oath blockquote{font-size:17px}.invite-transparency{padding:12px}}
.referral-register-note{display:grid;gap:4px;margin:12px 0 15px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--auth-house,#d94355) 26%,#313844);border-radius:12px;background:color-mix(in srgb,var(--auth-house,#d94355) 6%,#070a0f);text-align:left}.referral-register-note strong{color:#eef3f8;font-size:11px}.referral-register-note span{color:#8795a5;font-size:10px;line-height:1.5}

/* Ajuste 111 — conta com acesso temporariamente restrito */
.restriction-page-card{max-width:620px}.restriction-kicker{display:inline-flex;width:max-content;margin:0 0 8px;padding:5px 9px;border:1px solid rgba(226,75,91,.42);border-radius:999px;background:rgba(112,24,34,.18);color:#ef9ca5;font-size:10px;font-weight:800;letter-spacing:.08em}.restriction-page-card>p{line-height:1.65}.restriction-until{display:grid;gap:5px;margin:18px 0;padding:14px 15px;border:1px solid rgba(226,75,91,.32);border-radius:12px;background:rgba(80,21,28,.14)}.restriction-until span{color:#9eaaba;font-size:11px}.restriction-until strong{font-size:17px}.restriction-page-card .auth-form{margin-top:18px}.restriction-page-card .auth-form .btn{text-align:center;justify-content:center;text-decoration:none}