/* O kit de interface do Age of Legends (Paulo, 2026-10-25: "usar o KIT de design e montar corretamente… vamos usar
   esse padrão em outras partes do jogo"; as peças recortadas do kit-login.png em /game/interface/kit/). Componentes:

     <div class="kit-painel com-leao com-tochas com-viga">        o painel; os enfeites são opcionais
       <div class="kit-painel-corpo"> … </div>                   o miolo escuro com o filete dourado
     </div>
     .kit-campo (com <svg> à esquerda e <input>), .kit-olho        o campo escuro do kit
     .kit-botao[.noite|.esmeralda|.rubi|.ametista|.ambar|.pedra][.pequeno]   o botão do kit (azul, ou na cor), e o escuro (.escuro)
     .kit-setas > .kit-seta.esquerda + (conteúdo) + .kit-seta.direita   as setas para passar opções (<button>)
     .kit-marcar (um <input type="checkbox"> dentro de <label>)    a caixa de marcar
     .kit-quadrado.google|.steam|.discord|.escuro|.azul|.ouro     os botões quadrados
     .kit-ou ("ou continue com"), .kit-divisor, .kit-arabesco, .kit-titulo, .kit-texto, .kit-link

   O tamanho: tudo em em, a partir de --kit (1 = o tamanho do kit; 0,7 ≈ o painel do login). Os enfeites ficam
   fora do corpo: quem usa deixa espaço em volta (o brasão em cima, as colunas dos lados). */

.kit-painel {
  --kit: 0.7;
  --kit-ouro: #b98b45;
  --kit-ouro-claro: #f0c770;
  --kit-creme: #f2e7cf;
  --kit-fraco: #8f8270;
  position: relative;
  font-size: calc(22px * var(--kit));
  color: #e8dcc0;
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.3;
  isolation: isolate;
}

/* ---- o corpo: o miolo escuro, o filete de bronze e o friso de dentro */
.kit-painel-corpo {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 1.6em 1.5em 1.5em;
  border-radius: 0.3em;
  background: radial-gradient(ellipse at 50% 0%, rgb(255 210 140 / 0.07), transparent 60%), linear-gradient(#1f1713, #120d0a);
  box-shadow:
    0 0 0 0.12em #2b1a0d,
    0 0 0 0.26em #a8773a,
    0 0 0 0.34em #3a230f;
}
.com-leao > .kit-painel-corpo {
  /* (abaixo das pontas das cortinas do brasão) */
  padding-top: 8.4em;
}
.com-viga > .kit-painel-corpo {
  padding-bottom: 2.4em;
}

/* ---- o brasão do leão com as cortinas, por cima do topo */
.com-leao::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -7.6em;
  width: min(24.95em, calc(100% + 2.4em));
  aspect-ratio: 549 / 364;
  transform: translateX(-50%);
  background: url("/game/interface/kit/brasao.webp") center top / 100% auto no-repeat;
  pointer-events: none;
}

/* ---- as colunas com a tocha, dos dois lados: o topo, o fuste que estica e a base */
.com-tochas::after,
.com-tochas > .kit-painel-corpo::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -9.3em;
  bottom: -2.7em;
  width: 5.45em;
  box-sizing: border-box;
  padding: 8.2em 0 6.6em;
  background:
    url("/game/interface/kit/coluna-topo.webp") center top / 3.27em auto no-repeat,
    url("/game/interface/kit/coluna-base.webp") center bottom / 5.45em auto no-repeat,
    url("/game/interface/kit/coluna-fuste.webp") center top / 1.95em auto repeat-y;
  background-clip: border-box, border-box, content-box;
  background-origin: border-box, border-box, content-box;
  pointer-events: none;
}
.com-tochas::after {
  left: -4.1em;
}
.com-tochas > .kit-painel-corpo::before {
  /* (a coluna da direita: o mesmo desenho, espelhado) */
  right: -4.1em;
  transform: scaleX(-1);
}

/* ---- a viga de baixo, com o losango no meio */
.com-viga > .kit-painel-corpo::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -1.4em;
  right: -1.4em;
  bottom: -1.3em;
  height: 1.9em;
  background: url("/game/interface/kit/viga.webp") left center / auto 100% repeat-x;
  pointer-events: none;
}
.kit-viga-enfeite::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 4.4em;
  width: 2.4em;
  aspect-ratio: 102 / 111;
  transform: translateX(-50%) rotate(180deg);
  background: url("/game/interface/kit/flor-de-lis.webp") center / 100% 100% no-repeat;
}
.com-viga > .kit-viga-enfeite,
.kit-viga-enfeite {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -5em;
  width: 10em;
  aspect-ratio: 220 / 111;
  transform: translateX(-50%);
  background: url("/game/interface/kit/viga-enfeite.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---- os campos: escuros com o filete dourado, o ícone à esquerda */
.kit-campo {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.9em;
  box-sizing: border-box;
  border: 0.07em solid var(--kit-ouro);
  border-radius: 0.38em;
  background: linear-gradient(#0d0a09, #17110e);
  box-shadow: 0 0 0 0.05em rgb(0 0 0 / 0.6);
}
.kit-campo:focus-within {
  border-color: var(--kit-ouro-claro);
  box-shadow: 0 0 0 0.1em rgb(240 199 112 / 0.25);
}
.kit-campo > svg {
  flex: 0 0 auto;
  width: 1.45em;
  height: 1.45em;
  margin: 0 0.7em 0 0.9em;
  color: #d9b067;
}
.kit-campo input,
.kit-campo select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--kit-creme);
  font: inherit;
  font-size: max(13px, 0.95em);
  padding: 0 0.7em 0 0;
}
.kit-campo select {
  appearance: none;
  cursor: pointer;
}
.kit-campo select option {
  background: #17110e;
  color: var(--kit-creme);
}
.kit-campo input::placeholder {
  color: var(--kit-fraco);
}
.kit-olho {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 100%;
  border: 0;
  background: transparent;
  color: #d9b067;
  cursor: pointer;
  padding: 0;
}
.kit-olho svg {
  width: 1.45em;
  height: 1.45em;
}
.kit-olho[aria-pressed="true"] {
  color: #f6dd9c;
}

/* ---- a caixa de marcar */
.kit-marcar {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  user-select: none;
}
.kit-marcar input {
  appearance: none;
  width: 1.35em;
  height: 1.35em;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  background: url("/game/interface/kit/desmarcado.webp") center / contain no-repeat;
  cursor: pointer;
}
.kit-marcar input:checked {
  background-image: url("/game/interface/kit/marcado.webp");
}
.kit-marcar input:focus-visible {
  outline: 2px solid var(--kit-ouro-claro);
  outline-offset: 2px;
}

/* ---- os botões: o azul (principal) e o escuro */
.kit-botao {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: calc(100% + 1.2em);
  margin: 0 -0.6em;
  height: 3.4em;
  border: 0;
  padding: 0 3em;
  background: url("/game/interface/kit/botao-azul.webp") center / 100% 100% no-repeat;
  color: #f6e2a8;
  font: 400 max(15px, 1.25em) Marcellus, Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.kit-botao {
  --kit-luz: 150 205 255;
  position: relative;
  isolation: isolate;
}
/* (o mesmo botão em outras cores — scripts/arte/kit-pecas.py botoes: só o vidro muda; cada um acende na sua cor) */
.kit-botao.noite { background-image: url("/game/interface/kit/botao-noite.webp"); --kit-luz: 120 170 255; }
.kit-botao.esmeralda { background-image: url("/game/interface/kit/botao-esmeralda.webp"); --kit-luz: 140 255 180; }
.kit-botao.rubi { background-image: url("/game/interface/kit/botao-rubi.webp"); --kit-luz: 255 140 150; }
.kit-botao.ametista { background-image: url("/game/interface/kit/botao-ametista.webp"); --kit-luz: 215 160 255; }
.kit-botao.ambar { background-image: url("/game/interface/kit/botao-ambar.webp"); --kit-luz: 255 200 120; }
.kit-botao.pedra { background-image: url("/game/interface/kit/botao-pedra.webp"); --kit-luz: 220 220 220; }
.kit-botao.pequeno {
  height: 2.6em;
  padding: 0 2.2em;
  font-size: max(12px, 0.95em);
}
.kit-botao::after {
  /* (a luz de dentro: só no vidro do meio, sem passar pela moldura dourada) */
  content: "";
  position: absolute;
  inset: 16% 9%;
  z-index: -1;
  opacity: 0;
  border-radius: 0.2em;
  background: radial-gradient(ellipse 55% 90% at 50% 50%, rgb(var(--kit-luz) / 0.55), rgb(var(--kit-luz) / 0.2) 60%, transparent 100%);
  mix-blend-mode: screen;
  transition: opacity 0.18s;
  pointer-events: none;
}
.kit-botao:hover:not(:disabled),
.kit-botao:focus-visible {
  filter: brightness(1.12) saturate(1.1);
  color: #fff3cf;
}
.kit-botao:hover:not(:disabled)::after,
.kit-botao:focus-visible::after {
  opacity: 1;
}
.kit-botao:active:not(:disabled) {
  transform: translateY(1px);
}
.kit-botao:focus-visible {
  outline: 2px solid var(--kit-ouro-claro);
  outline-offset: 2px;
}
.kit-botao:disabled {
  filter: grayscale(0.6) brightness(0.75);
  cursor: wait;
}
.kit-botao.escuro::after {
  background: radial-gradient(ellipse 55% 90% at 50% 50%, rgb(255 215 140 / 0.7), rgb(255 175 70 / 0.3) 60%, transparent 100%);
}
.kit-botao.escuro:hover:not(:disabled),
.kit-botao.escuro:focus-visible {
  filter: brightness(1.3) saturate(1.15);
  color: #ffe9b0;
}
.kit-botao.escuro {
  height: 2.3em;
  padding: 0 2.2em;
  background-image: url("/game/interface/kit/botao-escuro.webp");
  color: #e8d3a0;
  font-size: max(12px, 0.85em);
  letter-spacing: 0.12em;
}
.kit-dupla {
  display: flex;
  gap: 0.7em;
}
.kit-dupla .kit-botao {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 0 1.6em;
}

/* ---- os botões quadrados (as contas de fora e os ícones) */
.kit-quadrados {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.kit-quadrado {
  width: 4.6em;
  height: 4em;
  border: 0;
  padding: 0;
  background: center / 100% 100% no-repeat;
  cursor: pointer;
  transition: filter 0.15s;
}
.kit-quadrado:hover,
.kit-quadrado:focus-visible {
  filter: brightness(1.2);
  transform: translateY(-1px);
}
.kit-quadrado {
  transition: filter 0.15s, transform 0.15s;
}
.kit-quadrado.google { background-image: url("/game/interface/kit/google.webp"); }
.kit-quadrado.steam { background-image: url("/game/interface/kit/steam.webp"); }
.kit-quadrado.discord { background-image: url("/game/interface/kit/discord.webp"); }
.kit-quadrado.escuro { background-image: url("/game/interface/kit/quadrado-escuro.webp"); width: 3em; height: 2.85em; }
.kit-quadrado.azul { background-image: url("/game/interface/kit/quadrado-azul.webp"); width: 3em; height: 2.85em; }
.kit-quadrado.ouro { background-image: url("/game/interface/kit/quadrado-ouro.webp"); width: 3em; height: 2.85em; }

/* ---- os divisores e os textos */
.kit-ou {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: #c9b48a;
  font: 400 max(10px, 0.68em) Marcellus, Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kit-ou::before,
.kit-ou::after {
  content: "";
  flex: 1;
  height: 1.3em;
  /* (as duas metades do divisor do kit: a linha dourada que termina na ponta) */
  background: url("/game/interface/kit/divisor.webp") left center / auto 100% no-repeat;
}
.kit-ou::after {
  transform: scaleX(-1);
}
.kit-divisor {
  height: 1.8em;
  background: url("/game/interface/kit/divisor.webp") center / auto 100% no-repeat;
}
.kit-arabesco {
  height: 4.4em;
  background: url("/game/interface/kit/arabesco.webp") center / contain no-repeat;
}
.kit-arabesco.curto {
  background-image: url("/game/interface/kit/arabesco-curto.webp");
}
.kit-titulo {
  margin: 0;
  text-align: center;
  color: #f2d68e;
  font: 400 max(16px, 1.35em) Marcellus, Georgia, serif;
  letter-spacing: 0.04em;
}
.kit-texto {
  margin: 0;
  text-align: center;
  color: #c9b893;
  font-size: max(11px, 0.78em);
  line-height: 1.4;
}
.kit-link {
  border: 0;
  background: none;
  padding: 0;
  color: #e3b863;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.kit-link:hover {
  color: #ffd98a;
}

/* ---- o preenchimento automático do navegador: o campo continua escuro, a letra creme */
.kit-campo input:-webkit-autofill,
.kit-campo input:-webkit-autofill:hover,
.kit-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--kit-creme);
  caret-color: var(--kit-creme);
  box-shadow: 0 0 0 100em #120d0b inset;
  transition: background-color 9999s ease-out;
}

/* ---- as setas: para passar opções (o povo, o mapa, a página) — a da esquerda é a mesma, espelhada
   <div class="kit-setas"><button class="kit-seta esquerda"></button> … <button class="kit-seta direita"></button></div> */
.kit-setas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
.kit-seta {
  /* (Paulo, 2026-10-25: "uma seta mais simples e visível": o medalhão escuro com o aro de ouro e a ponta dourada,
     desenhada — nítida em qualquer tamanho; a peça ornamentada continua em /game/interface/kit/seta.webp) */
  flex: none;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 0.14em solid #d9ac5c;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23f6d88c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 55% 50% / 58% no-repeat,
    radial-gradient(circle at 50% 35%, #3a2a1c, #140e0a 70%);
  box-shadow: inset 0 0 0 0.12em #4a3319;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s, border-color 0.15s;
}
.kit-seta.esquerda {
  transform: scaleX(-1);
}
.kit-seta:hover:not(:disabled),
.kit-seta:focus-visible {
  filter: brightness(1.3) saturate(1.15);
  border-color: #ffe3a0;
}
.kit-seta.direita:active:not(:disabled) {
  transform: translateX(1px);
}
.kit-seta.esquerda:active:not(:disabled) {
  transform: scaleX(-1) translateX(1px);
}
.kit-seta:disabled {
  filter: grayscale(0.8) brightness(0.6);
  cursor: default;
}