/* Menu de caçadas: cartão colecionável de rota (frente e verso em ficha). HTML gerado por js/hunt-card.js.
   Tokens vêm de identidade.css: laranja-brasa na ação, ciano em sistema, cores das bolas na raridade,
   dourado metálico só no Shiny e no Lendário. */

.hunt-level {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font: 700 12px var(--au-fonte-titulo);
  letter-spacing: 0.14em;
  color: var(--texto);
}
.hunt-level small {
  margin-left: 8px;
  font: 600 11px var(--au-fonte-texto);
  letter-spacing: 0.04em;
  color: var(--au-texto-suave);
}

.hcard {
  --rar: var(--au-r-comum);
  position: relative;
  height: 252px; /* o verso (cabeçalho, 4 linhas, loot, botão e rodapé) precisa de cerca de 230 px */
  perspective: 900px;
  outline: none;
  color: var(--texto);
  font-family: var(--au-fonte-texto);
}
.hcard:hover,
.hcard:focus-within {
  z-index: 5;
}
.hcard[data-rar='bom'] {
  --rar: var(--au-r-bom);
}
.hcard[data-rar='raro'] {
  --rar: var(--au-r-raro);
}
.hcard[data-rar='perfeito'] {
  --rar: var(--au-r-perfeito);
}
.hcard[data-rar='shiny'] {
  --rar: var(--au-shiny-2);
}

.hc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hcard:hover .hc-inner,
.hcard:focus-within .hc-inner {
  transform: rotateY(180deg);
}
.hcard:focus-visible {
  outline: 3px solid var(--au-sistema);
  outline-offset: 3px;
  border-radius: 14px;
}

.hc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 3px solid var(--rar);
  background: var(--painel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 2px 8px #0008;
}
.hcard:hover .hc-face,
.hcard:focus-within .hc-face {
  box-shadow: 0 0 16px color-mix(in srgb, var(--rar) 60%, transparent);
}
.hc-back {
  transform: rotateY(180deg);
  overflow: hidden; /* nada do verso pode vazar do cartão */
  padding: 8px 9px 6px;
  gap: 5px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 38%, var(--au-superficie-2)), var(--painel) 70%);
}

/* Shiny: borda dourada metálica em movimento (a mesma da identidade) */
.hcard[data-rar='shiny'] .hc-face {
  border-color: transparent;
  background-image: linear-gradient(var(--painel), var(--painel)),
    linear-gradient(120deg, var(--au-shiny-1), var(--au-shiny-2) 35%, var(--au-shiny-3) 50%, var(--au-shiny-4) 70%, var(--au-shiny-1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 100%;
  animation: hc-shiny 3.5s linear infinite;
}
.hcard[data-rar='shiny'] .hc-back {
  background-image: linear-gradient(color-mix(in srgb, var(--tc) 30%, var(--painel)), var(--painel)),
    linear-gradient(120deg, var(--au-shiny-1), var(--au-shiny-2) 35%, var(--au-shiny-3) 50%, var(--au-shiny-4) 70%, var(--au-shiny-1));
}
@keyframes hc-shiny {
  to {
    background-position: 0 0, 250% 0;
  }
}

/* Frente */
.hc-top {
  display: flex;
  justify-content: space-between;
  padding: 5px 9px;
  font: 700 11px var(--au-fonte-titulo);
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--rar) 22%, var(--au-superficie-2));
  border-radius: 8px 8px 0 0;
}
.hc-art {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tc) 70%, #fff 0%), #141829 82%);
}
.hc-art > img {
  max-width: 78%;
  max-height: 88%;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 4px #0009);
}
.hc-badges {
  position: absolute;
  inset: 5px 5px auto 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.hc-badge {
  padding: 2px 6px;
  border-radius: 8px;
  font: 700 9px var(--au-fonte-texto);
  letter-spacing: 0.08em;
  background: #0b0d18d0;
}
.hc-caught {
  color: #72edac;
}
.hc-shiny {
  color: var(--au-shiny-3);
}
.hc-here {
  align-self: flex-start;
  margin-right: auto;
  color: #fff;
  background: linear-gradient(135deg, var(--au-acao-a), var(--au-acao-b));
}
.hcard-here .hc-face {
  box-shadow: 0 0 0 2px var(--au-acao-b), 0 2px 8px #0008;
}
.hc-name {
  padding: 6px 9px 8px;
  font: 700 13px var(--au-fonte-texto);
  background: var(--au-superficie-2);
  border-radius: 0 0 8px 8px;
}
.hc-name small {
  display: block;
  margin-top: 1px;
  font-weight: 500;
  font-size: 10px;
  color: var(--au-texto-suave);
}

/* Verso em ficha */
.hc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hc-title {
  font: 700 11px var(--au-fonte-titulo);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-types {
  display: flex;
  gap: 3px;
  flex: none;
}
.hc-type img {
  display: block;
}
.hc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 7px;
  border-radius: 8px;
  background: #0b0d1890;
  border: 1px solid var(--borda);
  font-size: 12px;
  line-height: 1.25;
  flex: none;
}
.hc-lab {
  font: 700 9px var(--au-fonte-texto);
  letter-spacing: 0.12em;
  color: var(--au-texto-suave);
  cursor: help;
}
.hc-row b {
  font: 700 12px var(--au-fonte-texto);
}
.hc-cap {
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #10131f;
}
.hc-cap-baixa {
  background: #e0485a;
  color: #fff;
}
.hc-cap-media {
  background: #c9e23a;
}
.hc-cap-alta {
  background: #5fe08a;
}
.hc-lootrow {
  justify-content: flex-start;
  gap: 8px;
}
.hc-lootlist {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  min-width: 0;
}
.hc-loot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #0b0d18;
  font: 700 11px var(--au-fonte-texto);
  cursor: help;
}
.hc-loot i {
  position: absolute;
  font-style: normal;
  opacity: 0.35;
}
.hc-loot img {
  position: relative;
  max-width: 26px;
  max-height: 26px;
  image-rendering: pixelated;
}
.hc-more {
  color: var(--au-texto-suave);
}
.hc-go {
  margin-top: auto;
  flex: none;
  line-height: 1.2;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--au-acao-a), var(--au-acao-b));
  color: #fff;
  font: 700 12px var(--au-fonte-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hc-go:hover {
  filter: brightness(1.12);
}
.hc-go:focus-visible {
  outline: 3px solid var(--au-sistema);
  outline-offset: 2px;
}
.hc-go:disabled {
  background: var(--au-superficie-2);
  color: var(--au-texto-suave);
  cursor: not-allowed;
}
.hc-reason {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--au-texto-suave);
  text-align: center;
}
.hc-foot {
  flex: none;
  line-height: 1.2;
  text-align: center;
  font: 700 9px var(--au-fonte-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.hcard-locked .hc-front {
  filter: saturate(0.4) brightness(0.8);
}

/* Dica acessível: aparece ao pousar o mouse ou focar com teclado, em qualquer ícone */
.hc-ico[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  width: auto;
  padding: 5px 9px;
  border: 1px solid var(--au-sistema);
  border-radius: 8px;
  background: #0b0d18;
  color: var(--texto);
  font: 600 11px/1.25 var(--au-fonte-texto);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  z-index: 10;
}
.hc-ico[data-tip] {
  position: static; /* a dica se ancora na face do cartão, não no ícone, para nunca vazar */
}
.hc-ico[data-tip]:hover::after,
.hc-ico[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.hc-ico:focus-visible {
  outline: 2px solid var(--au-sistema);
  outline-offset: 1px;
}
/* Dica dos ícones do cabeçalho (tipos) aparece embaixo, para não cobrir o próprio ícone */
.hc-types .hc-ico[data-tip]::after {
  top: auto;
  bottom: 8px;
}

/* Movimento reduzido: sem giro 3D; o verso aparece por fade sobre a frente */
@media (prefers-reduced-motion: reduce) {
  .hcard {
    perspective: none;
  }
  .hc-inner,
  .hcard:hover .hc-inner,
  .hcard:focus-within .hc-inner {
    transform: none;
    transition: none;
  }
  .hc-face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .hc-back {
    transform: none;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .hcard:hover .hc-back,
  .hcard:focus-within .hc-back {
    opacity: 1;
  }
  .hc-ico[data-tip]::after {
    transition: none;
  }
  .hcard[data-rar='shiny'] .hc-face {
    animation: none;
  }
}