/* A ENTRADA (21/10/2026 — "nossa página de entrada nesse estilo, uma imagem
   legal, chamativa, se der com movimento"): duas colunas — o selo vivo da
   marca à esquerda, o formulário num cartão à direita. Celular: um embaixo
   do outro, o selo menor. Escolher o inicial (tela larga) esconde o selo. */
#gate {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(90, 60, 180, .28), transparent 60%),
    radial-gradient(ellipse at 75% 60%, rgba(30, 140, 220, .18), transparent 55%),
    linear-gradient(rgba(6, 7, 16, .86), rgba(6, 7, 16, .95)),
    url('/packages/client/assets/login-bg.jpg') center / cover no-repeat;
}
#gate .gate-fx { position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.5px); background-size: 46px 46px; opacity: .06; animation: gate-deriva 60s linear infinite; }
@keyframes gate-deriva { to { background-position: 460px 230px; } }

#gate .sheet { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 36px; align-items: center; position: relative; }
#gate .gate-arte { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#gate .gate-form { display: flex; flex-direction: column; }
#gate .brand { width: min(320px, 82%); }
#gate:has(#step-starter:not([hidden])) .sheet { grid-template-columns: 1fr; width: min(820px, 100%); }
#gate:has(#step-starter:not([hidden])) .gate-arte { display: none; }

/* ── o selo ── */
.emblema { position: relative; width: min(380px, 80vw); aspect-ratio: 1; display: grid; place-items: center; }
.emblema > * { grid-area: 1 / 1; }
.em-orbita { position: relative; }
.em-aura { width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 70, .35), rgba(70, 130, 255, .22) 45%, transparent 70%); filter: blur(10px); animation: em-pulso 3.2s ease-in-out infinite; }
@keyframes em-pulso { 50% { transform: scale(1.12); opacity: .7; } }
.em-moldura { width: 100%; height: 100%; fill: rgba(12, 14, 30, .55); stroke: #c9a45a; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 190, 80, .35)); }
.em-moldura .m2 { fill: none; stroke: rgba(201, 164, 90, .45); stroke-width: 1; stroke-dasharray: 4 6; animation: em-gira 40s linear infinite reverse; transform-origin: 50% 50%; }
.em-anel { width: 88%; height: 88%; animation: em-gira 26s linear infinite; }
.em-anel circle { fill: none; stroke: rgba(201, 164, 90, .55); stroke-width: 1; }
.em-anel text { fill: rgba(255, 220, 150, .7); font: 9px serif; letter-spacing: 2.2px; }
@keyframes em-gira { to { transform: rotate(360deg); } }
.em-escudo { width: 44%; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(255, 200, 80, .55)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); animation: em-flutua 4s ease-in-out infinite; z-index: 2; }
@keyframes em-flutua { 50% { transform: translateY(-8px) scale(1.03); } }

/* raios: piscam em volta, cada um no seu tempo */
.raio { width: 9%; z-index: 3; fill: #ffe14d; filter: drop-shadow(0 0 6px #ffd23a) drop-shadow(0 0 14px rgba(120, 200, 255, .9)); opacity: 0; animation: raio 3.6s steps(1) infinite; }
.raio { position: absolute; }
.raio.r1 { top: 6%; left: 20%; transform: rotate(-25deg); animation-delay: .1s; }
.raio.r2 { top: 9%; right: 17%; transform: rotate(20deg); animation-delay: .9s; }
.raio.r3 { top: 44%; right: 2%; transform: rotate(35deg); animation-delay: 1.7s; fill: #8fd3ff; }
.raio.r4 { top: 47%; left: 2%; transform: rotate(-30deg); animation-delay: 2.4s; fill: #8fd3ff; }
.raio.r5 { bottom: 4%; left: 28%; transform: rotate(10deg); animation-delay: 3s; }
.raio.r6 { bottom: 6%; right: 25%; transform: rotate(-15deg); animation-delay: 1.3s; }
@keyframes raio { 0% { opacity: 0; } 4% { opacity: 1; } 7% { opacity: .2; } 10% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }

/* faíscas subindo */
.faisca { width: 5px; height: 5px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 8px #ffb84d; z-index: 1; opacity: 0; animation: faisca 4.5s linear infinite; }
@keyframes faisca { 0% { transform: translate(var(--x), 120px) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 1.4), -150px) scale(1.1); opacity: 0; } }
.f1 { --x: -90px; animation-delay: 0s; } .f2 { --x: 70px; animation-delay: .4s; } .f3 { --x: -30px; animation-delay: .9s; background: #9fdcff; box-shadow: 0 0 8px #4db8ff; }
.f4 { --x: 110px; animation-delay: 1.3s; } .f5 { --x: -120px; animation-delay: 1.8s; } .f6 { --x: 20px; animation-delay: 2.2s; background: #9fdcff; box-shadow: 0 0 8px #4db8ff; }
.f7 { --x: -60px; animation-delay: 2.7s; } .f8 { --x: 90px; animation-delay: 3.1s; } .f9 { --x: 0px; animation-delay: 3.5s; }
.f10 { --x: -140px; animation-delay: 3.9s; background: #9fdcff; box-shadow: 0 0 8px #4db8ff; } .f11 { --x: 140px; animation-delay: .2s; } .f12 { --x: 40px; animation-delay: 1.1s; }
.f13 { --x: -100px; animation-delay: 2s; } .f14 { --x: 60px; animation-delay: 2.9s; background: #9fdcff; box-shadow: 0 0 8px #4db8ff; }
@media (prefers-reduced-motion: reduce) { .emblema *, #gate .gate-fx { animation: none !important; } .raio, .faisca { display: none; } }

/* idioma e Discord embaixo da arte */
.gate-lado { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#gate #gate-idioma { position: static; }
.gate-discord { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(114, 137, 255, .35); background: rgba(20, 22, 40, .8); color: var(--ink); font: 700 13px var(--ui); text-decoration: none; transition: border-color .15s, transform .15s; }
.gate-discord:hover { border-color: #7289ff; transform: translateY(-1px); }

/* ── o cartão do formulário ── */
#gate .box { background: linear-gradient(180deg, rgba(18, 22, 38, .96), rgba(12, 14, 26, .96)); border: 1px solid rgba(80, 170, 255, .28); border-radius: 16px; padding: 26px 24px; gap: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(60, 150, 255, .08); }
#gate h2 { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #b9c6dd; }
#gate .sub { text-align: center; margin-top: -8px; }
#gate label { font-weight: 700; color: #cfd8ea; font-size: 11.5px; }
#gate input { background: rgba(255, 255, 255, .05); border: 1px solid rgba(120, 160, 220, .22); border-radius: 9px; padding: 11px 12px; transition: border-color .15s, box-shadow .15s; }
#gate input:focus-visible { outline: none; border-color: rgba(80, 170, 255, .8); box-shadow: 0 0 0 3px rgba(80, 170, 255, .15); }
#gate .box .primary { padding: 11px 18px; border-radius: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; box-shadow: 0 6px 22px rgba(255, 70, 80, .35); }
#gate .box .link { font-weight: 700; }

@media (max-width: 820px) {
  #gate .sheet { grid-template-columns: 1fr; gap: 16px; }
  .emblema { width: min(230px, 62vw); }
  #gate .brand { width: min(240px, 70%); }
  #gate .gate-arte { gap: 8px; }
  #gate .box { padding: 20px 16px; }
}
/* duas energias em órbita (laranja da "POKE", azul da "HERO") */
.em-orbita { width: 70%; height: 70%; animation: em-gira 6s linear infinite; z-index: 3; pointer-events: none; }
.em-orbita.o2 { width: 58%; height: 58%; animation-duration: 4.4s; animation-direction: reverse; }
.em-orbita i { position: absolute; top: -6px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #ffb347 45%, transparent 72%); box-shadow: 0 0 16px 4px rgba(255, 160, 50, .65); }
.em-orbita.o2 i { background: radial-gradient(circle, #fff 0 25%, #5ab8ff 45%, transparent 72%); box-shadow: 0 0 16px 4px rgba(70, 170, 255, .65); }

/* O CARREGAMENTO (main.ts › progress): selo com anel dourado que se fecha. */
#boot { background: radial-gradient(ellipse at 50% 40%, rgba(90, 60, 180, .25), transparent 60%), #0b0c12; gap: 14px; justify-items: center; }
.boot-selo { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.boot-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bs-trilho { fill: rgba(12, 14, 30, .6); stroke: rgba(201, 164, 90, .18); stroke-width: 5; }
.bs-cheio { fill: none; stroke: #e2b85c; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .3s ease; filter: drop-shadow(0 0 6px rgba(255, 200, 90, .8)); }
.bs-gira { fill: none; stroke: rgba(226, 184, 92, .55); stroke-width: 1.5; stroke-dasharray: 6 10; transform-origin: 60px 60px; animation: em-gira 6s linear infinite; }
.boot-selo img { width: 58%; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(255, 200, 80, .45)); animation: em-flutua 3s ease-in-out infinite; }
.boot-marca { width: min(260px, 70vw); image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
#boot #boot-msg { color: #cbbf9f; font-size: 12px; letter-spacing: .04em; }
#boot .bar { display: none; }
/* O resto da tela (chat) só aparece quando o carregamento acaba. */
body:has(#boot:not(.done)) #cidade-chat { visibility: hidden; }
/* Acima do HUD e do chat, abaixo da tela de entrar (#gate, 40). */
#boot:not(.done) { z-index: 30; }