/* Tema escuro compartilhado (login e chat), nas cores da WorldSE: azul-céu e verde-limão. */
:root{
  --bg:#03070C; --surface:#09111A; --surface-2:#0F1923; --glass:rgba(255,255,255,.035);
  --ink:#EEF3F8; --muted:#8B9AAB; --faint:#58687B; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --azul:#1E90DC; --azul-claro:#5BC0F5; --verde:#B5D334; --amarelo:#E6EC8A;
  --alerta:#FFC24D; --alerta-soft:rgba(255,194,77,.07); --erro:#FF6B7A;
  --grad:linear-gradient(90deg,var(--azul),var(--verde));
  --brilho-azul:rgba(30,144,220,.35); --brilho-verde:rgba(181,211,52,.3);
  --display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:rgba(30,144,220,.4)}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}

/* Marca: quadrado branco com a inicial, como um selo. */
.selo{display:inline-grid;place-items:center;width:22px;height:22px;background:#fff;color:#000;font:700 13px/1 var(--display);border-radius:2px}

/* Palco do cubo com a letra flutuando no centro. */
.palco{position:relative;display:grid;place-items:center}
.palco canvas{position:absolute;inset:0;width:100%;height:100%}
.letra{position:relative;font:700 var(--letra,120px)/1 var(--display);letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--verde) 0%,var(--amarelo) 40%,#fff 55%,var(--azul-claro) 75%,var(--azul) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(30,144,220,.35)) drop-shadow(0 0 40px rgba(181,211,52,.15));
  animation:flutuar 6s ease-in-out infinite;user-select:none}
@keyframes flutuar{50%{transform:translateY(-6px)}}

.rotulo{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 14px/1 var(--font);
  background:#fff;color:#000;border:0;border-radius:2px;height:48px;padding:0 24px;cursor:pointer;
  transition:transform .15s, box-shadow .2s}
.botao:hover{box-shadow:0 0 0 1px #fff,0 0 28px var(--brilho-azul)}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.5;cursor:default;box-shadow:none}
.botao svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){.letra{animation:none}*{transition:none!important}}