/* Celulares (deitado = m-land, em pé = m-port): o pano da mesa usa toda a altura que sobra.
   Importado por último; as classes do body vêm de Hud.place() e as medidas de regions.ts (computeCompact). */

/* ---- barra de cima: tudo numa linha, som e tela cheia ao lado dos botões do jogo ---- */
body.m-land .hud-top,
body.m-port .hud-top {
  left: calc(8px + var(--safe-l));
  right: calc(100px + var(--safe-r));
  top: calc(6px + var(--safe-t));
  height: 48px;
  gap: 6px;
  align-items: center;
}
body.m-land .hud-top > .icon-btn,
body.m-port .hud-top > .icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
}
body.m-land:has(#hud:not([hidden])) .quick-tools,
body.m-port:has(#hud:not([hidden])) .quick-tools {
  top: calc(10px + var(--safe-t));
  right: calc(8px + var(--safe-r));
  gap: 6px;
}
body.m-land:has(#hud:not([hidden])) .quick-tools > .icon-btn,
body.m-port:has(#hud:not([hidden])) .quick-tools > .icon-btn {
  width: 40px;
  height: 40px;
}

/* ---- cartão do adversário compacto ---- */
body.m-land .opp-card,
body.m-port .opp-card,
body.m-land .opp-card.turn,
body.m-port .opp-card.turn {
  min-height: 48px;
  padding: 3px 10px 3px 3px;
  gap: 6px;
  border-radius: 16px;
}
body.m-land .opp-portrait,
body.m-port .opp-portrait {
  width: 40px;
  height: 40px;
}
body.m-land .opp-name,
body.m-port .opp-name {
  font-size: 18px;
}
body.m-land .opp-name::after,
body.m-port .opp-name::after {
  font-size: 12px;
}
body.m-land .opp-count,
body.m-port .opp-count {
  font-size: 12px;
}
body.m-land .diff-chip,
body.m-port .diff-chip {
  font-size: 10px;
  padding-inline: 5px;
}
body.m-land .hud-brand {
  width: 54px;
  height: 44px;
}
body.m-port .hud-brand {
  display: none;
}
body.m-land .hud-spacer {
  display: none;
}
@media (max-width: 799px) {
  body.m-land .hud-brand {
    display: none;
  }
}

/* ---- pílula de status (mora na barra de cima ou na faixa, não mais na fileira de ações) ---- */
body.m-land .status-pill,
body.m-port .status-pill {
  position: static;
  transform: none;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 4px 14px;
  justify-content: center;
  text-align: center;
  border: 2px solid #7e668e;
  border-image: none;
  background: #24152f;
  color: #f6f1e7;
  border-radius: 999px;
  box-shadow: none;
  font: 800 15px/1.1 var(--font-head);
  text-transform: uppercase;
}
body.m-land .status-pill.you,
body.m-port .status-pill.you {
  background: #e4ff35;
  color: #24152f;
  border-color: #e4ff35;
}
body.m-land .status-pill.warn,
body.m-port .status-pill.warn {
  background: #ff825f;
  color: #24152f;
  border-color: #ff825f;
}
body.m-port .hud-strip .status-pill {
  flex: none;
  align-self: flex-start;
}
body.m-port .hud-strip:not(.with-seat) .status-pill {
  align-self: center;
}
body.m-land .status-pill .st-text,
body.m-port .status-pill .st-text {
  display: block;
  overflow: visible;
  text-wrap: balance;
}
body.m-land .hud-top .status-pill {
  flex: 0 1 auto;
  margin: 0 auto;
}

/* ---- placar em linha ---- */
body.m-land .hud-top .score-card,
body.m-port .hud-strip .score-card {
  position: static;
  transform: none;
  min-width: 0;
  flex: none;
  flex-direction: row;
  align-items: center;
  padding: 3px 10px;
  gap: 8px;
  border-radius: 14px;
  background: #24152ff2;
  border: 2px solid #7e668e;
  border-image: none;
  box-shadow: none;
}
body.m-land .score-card[hidden],
body.m-port .score-card[hidden] {
  display: none;
}
body.m-land .score-sub,
body.m-port .score-sub {
  display: none;
}
body.m-land .score-row,
body.m-port .score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.m-land .score-team,
body.m-port .score-team {
  flex-direction: row;
  gap: 5px;
}
body.m-land .score-team b,
body.m-port .score-team b {
  font-size: 22px;
}
body.m-land .score-team > span,
body.m-port .score-team > span {
  font-size: 10px;
}
body.m-land .score-row .sep,
body.m-port .score-row .sep {
  font-size: 18px;
  margin: 0;
}

/* ---- faixa sob a barra (em pé): placar e status; com o personagem sentado, empilhados à esquerda dele ---- */
.hud-strip[hidden] {
  display: none;
}
body.m-port .hud-strip {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
body.m-port .hud-strip > * {
  pointer-events: auto;
}
body.m-port .hud-strip.with-seat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* ---- fileira de ações: ordenar/ver mesa à esquerda, monte e comprar à direita ---- */
body.m-land .hud-action,
body.m-port .hud-action {
  left: calc(8px + var(--safe-l));
  right: calc(8px + var(--safe-r));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
body.m-land .hud-action {
  padding-bottom: 6px;
}
/* "ordenar" e "ver mesa inteira" saem no celular: o pano é grande, a câmera segue sozinha e a tela cheia já está em cima */
body.m-land .hud-action > .icon-btn,
body.m-port .hud-action > .icon-btn {
  display: none;
}
body.m-land .hud-action .pile-slot,
body.m-port .hud-action .pile-slot {
  grid-column: auto;
  grid-row: auto;
  flex: none;
  margin-left: auto;
  justify-self: auto;
}
body.m-land .hud-action .pile-slot {
  width: 64px;
  height: 44px;
}
body.m-port .hud-action .pile-slot {
  width: 84px;
  height: 52px;
}
body.m-land .hud-action .action-main,
body.m-port .hud-action .action-main {
  grid-column: auto;
  grid-row: auto;
  flex: none;
  min-width: 0;
}
body.m-land .hud-action .action-main {
  width: 96px;
  min-height: 44px;
  font-size: 18px;
  padding: 0 8px;
}
body.m-port .hud-action .action-main {
  width: 108px;
  min-height: 48px;
  font-size: 21px;
  order: 2;
  margin-left: auto;
}
/* em pé o monte fica sempre na borda; o botão Comprar aparece à esquerda dele só quando é preciso */
body.m-port .hud-action .pile-slot {
  order: 3;
  margin-left: 0;
}

/* End of game/assets/mobile-layout-FPjpwVbl.css */