/* A MOLDURA DO RETRATO (18/08) — arte por cima, botão embaixo. */

/*
 * 🚨 O CORTE DOS PAIS (18/08). *"não importa se sair do quadrado do lado de fora
 * as asas, pode deixar sair"* — mas quem cortava não era o retrato: eram
 * `.game__profile` e `.game`, os dois com `overflow: hidden`.
 *
 * Abro os dois SÓ na vertical (`overflow-y: visible` continuaria criando barra
 * lateral; `clip` não). Uso `overflow: visible` mesmo, e limito o estrago com o
 * `margin-left` do retrato logo abaixo: a asa esquerda ganha espaço DENTRO do
 * cartão em vez de tentar sair pela borda da tela, onde não há para onde ir.
 */
.game__profile:has(.mold-arte),
.game:has(.mold-arte) {
  overflow: visible;
}

/* O quadrado do retrato precisa ser o berço da moldura. */
.profile__avatar {
  position: relative;
  /* 🚨 `overflow: visible`: as asas e as estrelas da moldura passam da borda do
     retrato de propósito. Com o corte padrão, ela viraria um quadrado. */
  overflow: visible;
}

/*
 * 🚨 O RETRATO ENCOLHE quando a moldura está ligada (18/08, pedido do Zerg:
 * *"preciso que o rosto do personagem fique totalmente livre dentro da
 * moldura"*).
 *
 * 🚨 A marca vem do JS (`data-moldura`), NÃO de `:has(> .mold-arte)`. O `:has`
 * faria o mesmo em navegador novo e seria IGNORADO EM SILÊNCIO num antigo — e a
 * maioria dos jogadores está no celular. Ignorado, o retrato voltaria ao tamanho
 * cheio e as asas cairiam no rosto: exatamente o defeito que isto conserta.
 *
 * Medi a arte: o vão entre as asas tem ~49% da largura dela. Com o retrato em
 * tamanho cheio, as asas caíam por cima do rosto. Encolher o DESENHO — e não a
 * caixa — mantém o cartão do mesmo tamanho e o alinhamento de tudo o que está
 * ao lado.
 */
.profile__avatar[data-moldura='1'] > .profile__retrato {
  /*
   * 🚨 0,86 E NÃO 0,72 (28/08/2026): *"no perfil poderiamos abrir mais para ver
   * mais a foto do personagem"*.
   *
   * O 0,72 veio do conserto de 18/08 — as asas caíam no rosto — e ficou
   * conservador demais: sobrava um anel de fundo em volta do boneco. Comparei as
   * escalas lado a lado com a arte de verdade (`scratchpad/moldura-escalas.png`):
   * a 0,86 o personagem cresce bem e as asas continuam emoldurando sem tocar o
   * rosto; a 0,92 a cabeça já encosta na borda de cima. Por isso 0,86 e não mais.
   */
  transform: scale(0.86);
  transform-origin: center;
}

/*
 * 🚨 RECORTE REDONDO com a moldura ligada (18/08, ideia do Zerg: *"se
 * colocarmos esse corte da imagem sendo redondo ficará muito melhor para
 * encaixar"*). Ele tem razão: a moldura é um anel, e canto quadrado dentro de
 * anel deixa quatro pontas sobrando.
 *
 * Só com a moldura: sem ela, o retrato continua quadrado como sempre foi — não
 * é hora de mudar o visual de quem não pediu nada.
 */
.profile__avatar[data-moldura='1'],
.profile__avatar[data-moldura='1'] > .profile__retrato {
  border-radius: 50%;
}

/* 🚨 Empurra o retrato para dentro do cartão: sem isto, a asa esquerda tentaria
   sair pela borda ESQUERDA DA TELA — não existe espaço lá, e "deixar sair" não
   faz a tela crescer. */
.profile__avatar[data-moldura='1'] {
  margin-left: 12px;
  margin-top: 6px;
}

.mold-arte {
  position: absolute;
  /*
   * Maior que o retrato — é o que faz parecer moldura e não adesivo. Mas só um
   * pouco: 🚨 o retrato encosta na borda esquerda do cartão, e com 152% a asa
   * esquerda saía da caixa e era CORTADA. 122% transborda o suficiente para ler
   * como moldura e ainda cabe.
   */
  /* A moldura envolve o círculo: a borda dourada dela encosta na borda do
     retrato, e as asas partem dali para fora. */
  inset: -32%;
  width: 164%;
  height: 164%;
  max-width: none;
  object-fit: contain;
  /* 🚨 Não recebe clique: por cima do retrato inteiro, ela roubaria o toque de
     quem quisesse abrir o personagem. */
  pointer-events: none;
  z-index: 3;
}

.mold-botao {
  display: block;
  /* Dentro da Ficha: acompanha a largura das caixas dela. */
  width: calc(100% - 44px);
  margin: 10px auto 18px;
  padding: 5px 8px;
  border: 1px solid rgba(150, 180, 255, 0.35);
  border-radius: 8px;
  background: rgba(8, 20, 40, 0.55);
  color: rgba(210, 226, 255, 0.75);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.mold-botao[data-on='1'] {
  border-color: rgba(190, 170, 255, 0.7);
  background: rgba(40, 30, 70, 0.6);
  color: #ded0ff;
}

.mold-botao:hover:not(:disabled) {
  border-color: rgba(200, 220, 255, 0.8);
  color: #eaf2ff;
}

.mold-botao:disabled { opacity: 0.6; cursor: progress; }