/* Depósito: só o layout específico. Casca, cartões, barras, botões, campos, selos e vazios vêm de ui-casca.css e ui-pecas.css.
   A ficha (.ficha) e o menu de ações (.menu-monstro) são emitidos por pokemon-sheet.js e pokemon-action-menu.js: mantêm as classes e usam só tokens. */
.depot-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: min(650px, calc(100dvh - 130px));
  min-height: 300px;
  color: var(--au-texto);
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-2);
}
.depot-team {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--au-esp-4);
  background: var(--au-poco);
  border-right: 1px solid var(--au-borda);
}
.depot-section-title,
.depot-storage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--au-esp-3);
  margin-bottom: var(--au-esp-4);
}
.depot-section-title small,
.depot-storage-heading small {
  font-size: var(--au-t-1);
  letter-spacing: 0.12em;
  color: var(--au-texto-suave);
}
.depot-section-title h2,
.depot-storage-heading h2 {
  margin: var(--au-esp-1) 0 0;
  font-family: var(--au-fonte-titulo);
  font-size: var(--au-t-4);
  font-weight: 600;
  color: var(--au-texto);
}
.depot-storage-heading h2 .au-selo {
  margin-left: var(--au-esp-2);
  vertical-align: middle;
}
.depot-team-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--au-esp-2);
  min-height: 0;
  overflow: auto;
  border-radius: var(--au-raio-3);
  scrollbar-width: thin;
}
.depot-team-card,
.depot-mon-card {
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.depot-team-card {
  flex-shrink: 0;
}
.depot-team-card:hover,
.depot-mon-card:hover {
  transform: translateY(-1px);
}
.depot-team-top {
  display: flex;
  gap: var(--au-esp-2);
  align-items: center;
}
.depot-team-top > img {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  image-rendering: pixelated;
  object-fit: contain;
}
.depot-team-top > div {
  flex: 1;
  min-width: 0;
}
.depot-name {
  overflow: hidden;
  font-size: var(--au-t-2);
  font-weight: 600;
  color: var(--au-texto);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--au-esp-1);
  margin-top: var(--au-esp-1);
}
.depot-tip {
  flex-shrink: 0;
  margin: var(--au-esp-3) 0 0;
  font-size: var(--au-t-1);
  line-height: 1.6;
  color: var(--au-texto-fraco);
}
.depot-storage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--au-esp-5);
}
.depot-tools {
  display: flex;
  gap: var(--au-esp-3);
  align-items: center;
  min-width: 0;
  margin-bottom: var(--au-esp-3);
}
.depot-search {
  position: relative;
  flex: 1;
  min-width: 0;
}
.depot-search > span {
  position: absolute;
  top: 50%;
  left: var(--au-esp-3);
  transform: translateY(-50%);
  font-size: var(--au-t-3);
  color: var(--au-texto-suave);
  pointer-events: none;
}
.depot-search input {
  width: 100%;
}
.depot-tools select {
  max-width: 150px;
}
.depot-filtros[aria-expanded="true"] {
  border-color: var(--au-sistema);
  color: var(--au-sistema);
}
.depot-filtros .au-selo {
  margin-left: var(--au-esp-1);
}
.depot-filter-row {
  margin-bottom: var(--au-esp-3);
}
.depot-filter-row > small {
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.depot-use-tip {
  flex-shrink: 0;
  margin: 0 0 var(--au-esp-3);
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.depot-use-tip.is-warn {
  color: var(--au-perigo);
}
.depot-storage-grid {
  display: grid;
  flex: 1;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--au-esp-3);
  align-content: start;
  min-height: 0;
  padding: 1px var(--au-esp-1) var(--au-esp-1) 1px;
  overflow: auto;
  border-radius: var(--au-raio-3);
  scrollbar-width: thin;
}
.depot-vazio {
  grid-column: 1 / -1;
}
.depot-card-label {
  display: flex;
  justify-content: space-between;
  gap: var(--au-esp-1);
  padding-right: var(--au-esp-5);
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.depot-card-label span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.depot-art {
  position: relative;
  height: 106px;
}
.depot-art img {
  width: 90px;
  height: 90px;
  image-rendering: pixelated;
  object-fit: contain;
}
.depot-level {
  position: absolute;
  right: 0;
  bottom: 0;
}
.depot-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--au-esp-2);
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.depot-card-stats b {
  color: var(--au-texto);
}
.depot-card-stats > span:last-child {
  width: 100%;
  text-transform: capitalize;
}
.depot-mon-card .au-cartao__acoes > *,
.depot-team-card .au-cartao__acoes > * {
  flex: 1 1 auto;
}
.depot-pick {
  position: absolute;
  top: var(--au-esp-2);
  right: var(--au-esp-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  line-height: 1;
  color: var(--au-sistema);
  background: var(--au-poco);
  border: 1px solid var(--au-borda-forte);
}
.depot-mon-card .depot-card-label {
  padding-right: 34px;
}
.depot-pick[aria-pressed="true"] {
  border-color: var(--au-sistema);
}
.depot-bar {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: var(--au-esp-2);
  align-items: center;
  margin-top: var(--au-esp-3);
  padding: var(--au-esp-3);
  background: var(--au-poco);
  border: 1px solid var(--au-borda);
  border-radius: var(--au-raio-3);
}
.depot-bar-info {
  flex: 1;
  min-width: 140px;
  font-size: var(--au-t-2);
  color: var(--au-texto-suave);
}

/* Arrastar e soltar (classes de estado ligadas por depot-drag.js) */
.depot-shell [draggable="true"] {
  cursor: grab;
}
.depot-team-card.is-dragging,
.depot-mon-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.depot-team-list.is-drop-ok,
.depot-storage-grid.is-drop-ok {
  cursor: copy;
  background: color-mix(in srgb, var(--au-sistema) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--au-sistema);
}
.depot-team-list.is-drop-no,
.depot-storage-grid.is-drop-no {
  cursor: not-allowed;
  background: color-mix(in srgb, var(--au-perigo) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--au-perigo);
}
.is-drop-ok .au-slot[data-vazio] {
  border-color: var(--au-sistema);
  color: var(--au-sistema);
}
.depot-team-list .au-slot {
  width: auto;
  flex-shrink: 0;
}

/* Filtros */
.depot-filter-pop {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--au-esp-3);
  margin: 0 0 var(--au-esp-3);
  padding: var(--au-esp-3);
  background: var(--au-superficie);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-3);
  box-shadow: var(--au-sombra-cartao);
}
.depot-filter-pop fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--au-esp-1);
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.depot-filter-pop legend {
  float: left;
  width: 80px;
  padding: 0;
  font-size: var(--au-t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.depot-filter-pop .au-abas {
  border-bottom: 0;
}
.depot-filter-foot {
  display: flex;
  gap: var(--au-esp-2);
  justify-content: flex-end;
}

/* Detalhes de IV (emitidos por iv-profile.js) */
.depot-iv-details {
  border-top: 1px solid var(--au-borda);
  font-size: var(--au-t-1);
}
.depot-iv-details summary {
  display: flex;
  gap: var(--au-esp-2);
  align-items: center;
  justify-content: space-between;
  min-height: var(--au-toque);
  color: var(--au-sistema);
  cursor: pointer;
  list-style: none;
}
.depot-iv-details summary::before {
  content: "+";
  color: var(--au-texto-suave);
}
.depot-iv-details[open] summary::before {
  content: "−";
}
.depot-iv-details summary > span {
  flex: 1;
}
.depot-iv-details summary > b {
  white-space: nowrap;
}
.depot-iv-details summary:focus-visible {
  outline: 2px solid var(--au-sistema);
  outline-offset: 2px;
}
.iv-attributes {
  display: grid;
  gap: var(--au-esp-2);
  margin: var(--au-esp-2) 0;
}
.iv-attributes > div {
  display: grid;
  grid-template-columns: 72px minmax(16px, 1fr) 36px;
  gap: var(--au-esp-2);
  align-items: center;
  color: var(--au-texto-suave);
}
.iv-attributes b {
  text-align: right;
  color: var(--au-texto);
}
.iv-attributes b small {
  color: var(--au-texto-fraco);
}
.iv-attributes meter {
  width: 100%;
  height: 6px;
  appearance: none;
  background: var(--au-poco);
  border: 0;
  border-radius: var(--au-raio-1);
}
.iv-attributes meter::-webkit-meter-bar {
  background: var(--au-poco);
  border: 0;
  border-radius: var(--au-raio-1);
}
.iv-attributes meter::-webkit-meter-optimum-value {
  background: var(--au-sistema);
  border-radius: var(--au-raio-1);
}
.iv-attributes meter::-moz-meter-bar {
  background: var(--au-sistema);
}
.iv-legacy-note {
  color: var(--au-texto-fraco);
}

/* Confirmação de venda (no verso do cartão ou na barra de lote) */
.depot-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-2);
  padding: var(--au-esp-3);
  color: var(--au-texto);
  background: color-mix(in srgb, var(--au-perigo) 12%, var(--au-superficie));
  border: 1px solid var(--au-perigo);
  border-radius: var(--au-raio-3);
}
.depot-confirm small {
  color: var(--au-texto-suave);
}
.depot-confirm > div {
  display: flex;
  gap: var(--au-esp-2);
}

/* Ficha do Pokémon (pokemon-sheet.js): vive no VERSO do cartão, em 6 páginas curtas (resumo, IVs,
   genética, evolução, ações e mais ações). O cartão nunca cresce: o verso cobre só o corpo do cartão (a barra de ações
   fica de fora, sempre clicável) e a navegação fica fixa no rodapé do verso. */
.depot-team-card,
.depot-mon-card {
  perspective: 900px;
}
.depot-corpo {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--au-esp-2);
  min-height: 172px; /* o bastante para o verso da party (resumo e ações cabem sem rolar) */
}
.depot-mon-card .depot-corpo {
  min-height: 256px;
}
.depot-team-card:hover,
.depot-mon-card:hover,
.depot-team-card:focus-within,
.depot-mon-card:focus-within,
.depot-team-card[data-ficha="fixada"],
.depot-mon-card[data-ficha="fixada"] {
  z-index: 4;
}
.depot-verso {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(160deg, var(--au-superficie-2), var(--au-superficie) 70%);
  border-radius: var(--au-raio-2);
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.2s;
}
.depot-team-card[data-ficha="fixada"] .depot-verso,
.depot-mon-card[data-ficha="fixada"] .depot-verso {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .depot-team-card:hover .depot-verso,
  .depot-mon-card:hover .depot-verso {
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
}
/* O verso aparece fixado (clique/Enter/toque: visível e lido pelo leitor de tela) ou como prévia no
   hover do mouse. O foco do teclado sozinho não vira o cartão: assim o que se vê é o que se lê. */
/* cartão recolhido por um 2º clique: sem verso por hover até o mouse sair do cartão */
.depot-team-card[data-recolhido] .depot-verso,
.depot-mon-card[data-recolhido] .depot-verso {
  pointer-events: none;
  opacity: 0;
  transform: none;
}
/* arrastando, ou no primeiro quadro de um redesenho: o verso some sem animar */
.is-dragging .depot-verso {
  pointer-events: none;
  opacity: 0;
  transform: none;
  transition: none;
}
.sem-anim .depot-verso {
  transition: none;
}
.depot-pick {
  z-index: 3;
}
/* páginas compactas: tudo cabe no corpo do cartão sem rolar */
.depot-verso .ficha-topo > div {
  display: block;
  min-width: 0;
}
.depot-verso .ficha h3 {
  overflow: hidden;
  font-size: var(--au-t-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-verso .ficha-tipos {
  gap: 2px;
}
.depot-verso .ficha-tipo {
  padding: 0 6px;
  font-size: 10px;
}
.depot-verso .ficha-natureza {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--au-esp-2);
  justify-content: flex-start;
}
.depot-verso .ficha-resumo {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.depot-verso .ficha-resumo > div {
  display: flex;
  gap: var(--au-esp-2);
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  padding: 1px var(--au-esp-2);
}
.depot-verso .ficha-resumo dd {
  margin: 0;
  font-size: var(--au-t-1);
  min-width: 0;
}
/* a classe .ficha também existe em orig/app.css (janela antiga): aqui ela é neutralizada */
.depot-verso .ficha {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  width: auto;
  max-height: none;
  min-height: 0;
  padding: 0;
  overflow: visible;
  color: var(--au-texto);
  font-family: var(--au-fonte-texto);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* conteúdo rola numa área própria (rede de segurança); a navegação não rola junto */
.ficha-corpo {
  flex: 1;
  min-height: 0;
  padding: var(--au-esp-2) var(--au-esp-2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.depot-mon-card .ficha-topo {
  padding-right: 30px; /* o quadrado de seleção fica no canto */
}
.depot-mon-card .ficha-topo img {
  display: none; /* o cartão da caixa é estreito e a arte já está na frente */
}
.depot-verso .ficha-sub {
  white-space: nowrap;
}
.depot-verso .ficha-linha .ficha-sub {
  white-space: normal;
}
.depot-verso .ficha-resumo dt {
  font-size: 10px;
  letter-spacing: 0;
}
/* todas as páginas ficam no DOM; só a ativa aparece */
.ficha-pagina {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.ficha-pagina.is-ativa {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-2);
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  clip-path: none;
  min-width: 0;
}
.depot-verso .ficha-topo {
  display: flex;
  gap: var(--au-esp-2);
  align-items: center;
}
.depot-verso .ficha-topo img {
  width: 48px;
  height: 48px;
}
.ficha-hp {
  margin: 0;
  color: var(--au-texto-suave);
  font-size: var(--au-t-1);
}
.ficha-nav {
  display: flex;
  flex-shrink: 0;
  gap: var(--au-esp-2);
  align-items: center;
  justify-content: center;
  padding: var(--au-esp-1) var(--au-esp-2);
  border-top: 1px solid var(--au-borda);
}
.ficha-nav .au-botao[data-tamanho="icone"] {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
}
.ficha-nav .ficha-soltar {
  margin-left: auto;
}
.ficha-pontos {
  min-width: 3ch;
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
  text-align: center;
}
.ficha-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ficha-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--au-esp-1);
}
.ficha-tipo {
  padding: 2px var(--au-esp-2);
  font-size: var(--au-t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--au-sistema);
  background: color-mix(in srgb, var(--au-sistema) 12%, transparent);
  border-radius: var(--au-raio-pilula);
}
.ficha-sprite {
  align-self: center;
  image-rendering: pixelated;
  object-fit: contain;
}
.ficha h3 {
  margin: 0;
  font-family: var(--au-fonte-titulo);
  font-size: var(--au-t-4);
  color: var(--au-texto);
}
.ficha-shiny {
  color: var(--au-r-raro);
}
.ficha-sub {
  margin: 0;
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.ficha-barra {
  height: 6px;
  overflow: hidden;
  background: var(--au-poco);
  border-radius: var(--au-raio-1);
}
.ficha-vida span {
  display: block;
  height: 100%;
  background: var(--au-vida);
}
.ficha-resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--au-esp-2);
  margin: 0;
}
.ficha-resumo > div {
  padding: var(--au-esp-2);
  background: var(--au-poco);
  border-radius: var(--au-raio-2);
}
.ficha-resumo dt {
  font-size: var(--au-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.ficha-resumo dd {
  margin: var(--au-esp-1) 0 0;
  font-family: var(--au-fonte-num);
  font-size: var(--au-t-3);
  font-weight: 700;
  color: var(--au-texto);
}
.ficha-estrelas {
  letter-spacing: 0;
}
.ficha-iv {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  gap: var(--au-esp-2);
  align-items: center;
  margin: var(--au-esp-1) 0;
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.ficha-iv abbr {
  text-decoration: none;
}
.ficha-iv i {
  height: 6px;
  overflow: hidden;
  background: var(--au-poco);
  border-radius: var(--au-raio-1);
}
.ficha-iv u {
  display: block;
  height: 100%;
  background: currentcolor;
}
.ficha-iv b {
  text-align: right;
  color: var(--au-texto);
}
.ficha .pot-comum {
  color: var(--au-r-comum);
}
.ficha .pot-great {
  color: var(--au-r-bom);
}
.ficha .pot-ultra {
  color: var(--au-r-raro);
}
.ficha .pot-master {
  color: var(--au-r-perfeito);
}
.ficha-natureza {
  display: flex;
  justify-content: space-between;
  font-size: var(--au-t-1);
  text-transform: capitalize;
}
.ficha-mais {
  font-style: normal;
  color: var(--au-ok);
}
.ficha-menos {
  font-style: normal;
  color: var(--au-perigo);
}
.ficha-vazio {
  font-size: var(--au-t-1);
  color: var(--au-texto-fraco);
}

/* Ações do Pokémon (pokemon-action-menu.js): lista do menu do catálogo e página "Ações" do verso */
.menu-monstro {
  min-width: 250px;
  overflow: hidden;
  color: var(--au-texto);
  font-family: var(--au-fonte-texto);
  background: var(--au-superficie-2);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-3);
  box-shadow: var(--au-sombra-cartao);
}
.menu-monstro header {
  display: flex;
  gap: var(--au-esp-3);
  align-items: center;
  padding: var(--au-esp-3);
  border-bottom: 1px solid var(--au-borda);
}
.menu-monstro header img {
  image-rendering: pixelated;
}
.menu-monstro header small {
  display: block;
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
.menu-monstro ul {
  margin: 0;
  padding: var(--au-esp-2);
  list-style: none;
}
.acao {
  display: flex;
  gap: var(--au-esp-3);
  align-items: center;
  width: 100%;
  min-height: var(--au-toque);
  padding: var(--au-esp-2);
  font: var(--au-t-2) var(--au-fonte-texto);
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--au-raio-2);
  box-shadow: none;
}
.acao:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--au-sistema) 14%, transparent);
}
.acao:focus-visible {
  outline: 2px solid var(--au-sistema);
  outline-offset: 1px;
}
.acao-icone {
  width: 20px;
  text-align: center;
  color: var(--au-sistema);
}
.acao-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.acao-motivo {
  margin-top: 2px;
  font-size: var(--au-t-1);
  color: var(--au-aviso);
}
.acao kbd {
  padding: 2px var(--au-esp-2);
  font: 600 var(--au-t-1) var(--au-fonte-texto);
  color: var(--au-texto-suave);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-1);
}
.acao[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.acao-perigo .acao-icone {
  color: var(--au-perigo);
}
.acao-perigo:first-of-type {
  margin-top: var(--au-esp-1);
}

@media (max-width: 720px) {
  .depot-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .depot-team {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--au-borda);
  }
  .depot-team-list {
    flex: none;
    flex-direction: row;
    width: 100%;
    padding-bottom: var(--au-esp-1);
  }
  .depot-team-card {
    flex: 0 0 210px;
    min-width: 0;
  }
  .depot-team-list .au-slot {
    flex: 0 0 96px;
  }
  .depot-team .depot-tip {
    display: none;
  }
  .depot-storage {
    padding: var(--au-esp-4);
  }
  .depot-storage-heading {
    flex-wrap: wrap;
  }
  .depot-tools select {
    max-width: 120px;
  }
  .depot-storage-grid {
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--au-esp-2);
    max-height: none;
    overflow: visible;
  }
  .depot-card-label {
    flex-wrap: wrap;
  }
  .depot-art img {
    width: 75px;
    height: 75px;
  }
  .iv-attributes > div {
    grid-template-columns: minmax(40px, 1fr) 36px 36px;
    gap: var(--au-esp-1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .depot-team-card,
  .depot-mon-card {
    transition: none;
  }
  .depot-team-card:hover,
  .depot-mon-card:hover {
    transform: none;
  }
  .depot-verso {
    transform: none;
    transition: none;
  }
}

/* Depósito: "menu aberto" (contorno do sistema) e "marcado para lote" (traço da ação) são estados distintos */
.depot-shell .au-cartao[data-estado~="marcado"] {
  border-color: var(--au-acao-b);
  box-shadow: inset 0 0 0 1px var(--au-acao-b);
}
.depot-shell .au-cartao[data-estado~="aberto"][data-estado~="marcado"] {
  box-shadow:
    var(--au-brilho-sel),
    inset 0 0 0 1px var(--au-acao-b);
}

/* Raridade é o eixo do jogo: borda de 2px na cor do nível nos cartões da Party e do depósito */
.depot-team-card[data-raridade],
.depot-mon-card[data-raridade] {
  border-width: 2px;
}

/* Páginas "Ações" e "Mais" do verso: grade de ícones com rótulo curto que cabe sem rolar mesmo no
   cartão estreito do celular (129 px). Entre os botões e no título há área livre: clicar ali volta
   o cartão à frente. O motivo de uma ação indisponível vai para a linha de status do rodapé. */
.acoes-titulo {
  margin: 0;
  overflow: hidden;
  color: var(--au-texto-suave);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.acoes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--au-esp-1);
}
.acao-ic {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 4px 1px 3px;
  color: var(--au-texto);
  font: 600 10px/1.1 var(--au-fonte-texto);
  letter-spacing: -0.01em;
  background: color-mix(in srgb, var(--au-sistema) 8%, transparent);
  border: 1px solid var(--au-borda);
  border-radius: var(--au-raio-2);
  box-shadow: none;
  cursor: pointer;
}
.acao-ic .acao-svg {
  flex-shrink: 0;
  color: var(--au-sistema);
}
.acao-ic.acao-perigo .acao-svg {
  color: var(--au-perigo);
}
.acao-ic:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--au-sistema) 20%, transparent);
  border-color: var(--au-sistema);
}
.acao-ic.acao-perigo:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--au-perigo) 18%, transparent);
  border-color: var(--au-perigo);
}
.acao-ic:focus-visible {
  outline: 2px solid var(--au-sistema);
  outline-offset: 1px;
}
.acao-ic[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}
.acao-curto {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acao-status:empty {
  display: none;
}
.acao-status {
  flex-shrink: 0;
  min-height: 1.3em;
  margin: 0;
  padding: 2px var(--au-esp-2) 0;
  color: var(--au-aviso);
  font-size: 10px;
  line-height: 1.3;
}
.depot-protegido,
.ficha-cadeado {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.depot-verso .depot-confirm {
  gap: var(--au-esp-1);
  padding: var(--au-esp-2);
  font-size: var(--au-t-1);
}
.depot-verso .depot-confirm small {
  font-size: 10px;
  line-height: 1.25;
}
.depot-barra-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-2);
  margin-top: var(--au-esp-3);
}
.depot-verso .depot-confirm > div {
  flex-wrap: wrap;
  gap: var(--au-esp-1);
}
.depot-verso .depot-confirm .au-botao {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--au-esp-2);
}
@media (max-width: 720px) {
  .ficha-nav {
    gap: var(--au-esp-1);
  }
  /* cartão da caixa estreito (2 por linha): o verso usa também o respiro lateral do cartão, para a
     grade de ações caber em 2 colunas sem rolar */
  .depot-mon-card .depot-verso {
    right: calc(4px - var(--au-esp-3));
    left: calc(4px - var(--au-esp-3));
  }
  .depot-mon-card .ficha-corpo {
    padding-inline: var(--au-esp-1);
  }
}