/* Identidade visual da Ravok Games (login e console) */
:root {
    --bg: #07060d;
    --painel: rgba(17, 15, 28, 0.72);
    --borda: rgba(255, 255, 255, 0.09);
    --texto: #f3f1ff;
    --suave: #9d99ba;
    --acento1: #8b5cf6;
    --acento2: #ec4899;
    --erro: #fb7185;
    --ok: #34d399;
    --gradiente: linear-gradient(135deg, var(--acento1), var(--acento2));
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
[hidden] { display: none !important; }

/* ---- fundo ---- */
.fundo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fundo::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
/* Brilhos que percorrem o fundo, alternando entre violeta e magenta */
.brilho { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
    filter: blur(90px); opacity: .34; will-change: transform; }
.brilho.a { background: var(--acento1); top: -16vmax; left: -12vmax;
    animation: passeio-a 16s ease-in-out infinite alternate, matiz 11s ease-in-out infinite alternate; }
.brilho.b { background: var(--acento2); bottom: -18vmax; right: -14vmax;
    animation: passeio-b 19s ease-in-out infinite alternate, matiz 13s ease-in-out infinite alternate-reverse; }
.brilho.c { width: 32vmax; height: 32vmax; background: #6366f1; opacity: .22; top: 30%; left: 35%;
    animation: passeio-c 23s ease-in-out infinite alternate, matiz 9s ease-in-out infinite alternate; }
@keyframes passeio-a {
    33% { transform: translate(18vmax, 10vmax) scale(1.15); }
    66% { transform: translate(6vmax, 26vmax) scale(.9); }
    100% { transform: translate(28vmax, 4vmax) scale(1.1); }
}
@keyframes passeio-b {
    33% { transform: translate(-20vmax, -8vmax) scale(1.1); }
    66% { transform: translate(-8vmax, -24vmax) scale(.92); }
    100% { transform: translate(-30vmax, -2vmax) scale(1.18); }
}
@keyframes passeio-c {
    50% { transform: translate(-22vmax, 14vmax) scale(1.25); }
    100% { transform: translate(16vmax, -12vmax) scale(.85); }
}
@keyframes matiz { to { filter: blur(90px) hue-rotate(-40deg); } }

/* Robô em contornos neon, à direita, sumindo para baixo */
.robo { position: absolute; bottom: -4vh; right: max(-6vw, calc(50% - 760px)); height: min(90vh, 1100px);
    width: auto; opacity: .34; user-select: none;
    mask-image: linear-gradient(to top, transparent 0, #000 30%);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%);
    animation: respirar 7s ease-in-out infinite alternate, neon-robo 10s ease-in-out infinite alternate; }
@keyframes respirar { to { opacity: .44; transform: translateY(-8px); } }
@keyframes neon-robo { to { filter: hue-rotate(-35deg) brightness(1.15); } }

@media (max-width: 900px) {
    .robo { right: 50%; transform: translateX(50%); height: 92vh; opacity: .16; animation: none; }
}

/* ---- marca ---- */
.logo { height: 64px; width: auto; flex: none; animation: neon 7s linear infinite; }
@keyframes neon {
    0%, 90%, 92.5%, 96%, 100% { opacity: 1; }
    91%, 95% { opacity: .55; }
}
.nome { font-size: 30px; font-weight: 800; letter-spacing: .28em; margin-right: -.28em; line-height: 1; }
.nome span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .6em;
    margin-right: -.6em; color: var(--suave); }

/* ---- botões ---- */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--gradiente); color: #fff;
    font: inherit; font-size: 15px; font-weight: 650; letter-spacing: .02em; cursor: pointer; text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(236,72,153,.6); transition: transform .15s, opacity .2s, filter .2s, background .2s; }
.botao:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.botao:active:not(:disabled) { transform: translateY(0); }
.botao:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.botao.secundario { background: rgba(255,255,255,.06); border: 1px solid var(--borda); box-shadow: none; }
.botao.secundario:hover { background: rgba(255,255,255,.1); }
.botao.carregando { color: transparent; }
.botao.carregando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
    animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; }
}