* {
  box-sizing: border-box;
}

/* Tamanho único da pré-visualização ao hover (mão, chão, Tricker, descarte). */
:root {
  /* +50 % face ao tamanho anterior (300×420); vw/vh escalados para caber no ecrã. */
  --card-hover-max-w: min(450px, min(calc((94vw - 20px) * 1.5), calc(72vw * 1.5)));
  --card-hover-max-h: min(630px, calc(50vh * 1.5));
  --z-playmat-zones: 8;
  --z-playmat-floor: 12;
  --z-hand-strip: 8000;
  --z-hand-card-hover: 9200;
  --z-hand-reorder-float: 9600;
  --z-modal-hand-attribute: 9800;
  /* Superfície das zonas: cinza neutro (R≈G≈B) — evita azul do antigo rgb(13,27,42) em floor/deck/pile/meta. */
  --playmat-zone-bg: rgba(38, 40, 44, 0.78);
  --playmat-zone-border: rgba(210, 214, 224, 0.4);
  /* Superfícies “pesadas” (chão, deck, pile, meta Tricker): mesma cor que Judge/Arena com leitura igual via color-mix. */
  --playmat-surface-soft-bg: color-mix(in srgb, var(--playmat-zone-bg) 64%, transparent);
  /* Tema roxo escuro (lobby / botões globais) */
  --theme-ink: #181755;
  --theme-ink-hover: #222063;
  --theme-lobby-bg: #000;
  --theme-lobby-surface: #000;
  --theme-lobby-border: rgba(165, 180, 252, 0.28);
}

/* Animação das mesmas variáveis que o preview move com o rato (--fv / --fs / --pointer). */
@property --fv-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --fv-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --fs-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --fs-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --pointer-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --pointer-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --pointer-from-center {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.35;
}

/* Diagonal = mesmo eixo que o rato no preview (↖ canto → ↘ canto e volta). Amplo, linear = velocidade constante sem ease. */
@keyframes table-holo-pointer-sweep-fv {
  0% {
    --fv-x: 5%;
    --fv-y: 5%;
  }
  50% {
    --fv-x: 95%;
    --fv-y: 95%;
  }
  100% {
    --fv-x: 5%;
    --fv-y: 5%;
  }
}

@keyframes table-holo-pointer-sweep-fs {
  0% {
    --fs-x: 5%;
    --fs-y: 5%;
  }
  50% {
    --fs-x: 95%;
    --fs-y: 95%;
  }
  100% {
    --fs-x: 5%;
    --fs-y: 5%;
  }
}

@keyframes table-rh-pointer-sweep {
  0% {
    --pointer-x: 5%;
    --pointer-y: 5%;
    --fv-x: 5%;
    --fv-y: 5%;
  }
  50% {
    --pointer-x: 95%;
    --pointer-y: 95%;
    --fv-x: 95%;
    --fv-y: 95%;
  }
  100% {
    --pointer-x: 5%;
    --pointer-y: 5%;
    --fv-x: 5%;
    --fv-y: 5%;
  }
}

/* Mão/Tricker: cortinas “aurora boreal” (faixas difusas teal/verde/violeta + pan lento). Preview mantém o holo clássico. */
@keyframes table-fv-aurora-pan {
  0% {
    background-position:
      center,
      0% 28%,
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%;
  }
  100% {
    background-position:
      center,
      100% 72%,
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%;
  }
}

@keyframes table-fv-after-aurora-pan {
  0% {
    background-position:
      6% 12%,
      var(--fv-x) var(--fv-y),
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%;
  }
  100% {
    background-position:
      94% 88%,
      var(--fv-x) var(--fv-y),
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%;
  }
}

@keyframes table-fv-aurora-curtains {
  0%,
  100% {
    filter: brightness(0.82) contrast(1.68) saturate(0.88) hue-rotate(-10deg);
  }
  50% {
    filter: brightness(0.9) contrast(1.52) saturate(0.94) hue-rotate(16deg);
  }
}

@keyframes table-fv-after-aurora-curtains {
  0%,
  100% {
    filter: brightness(0.84) contrast(1.55) saturate(0.9) hue-rotate(6deg);
  }
  50% {
    filter: brightness(0.9) contrast(1.42) saturate(0.95) hue-rotate(-14deg);
  }
}

@keyframes table-rh-aurora-pan {
  0% {
    background-position:
      center,
      0% 28%,
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%,
      center center,
      center center,
      center center;
  }
  100% {
    background-position:
      center,
      100% 72%,
      calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
      var(--fv-x) var(--fv-y),
      var(--fv-x) var(--fv-y),
      50% 50%,
      center center,
      center center,
      center center;
  }
}

@keyframes table-rh-aurora-mist {
  0%,
  100% {
    filter: brightness(0.76) contrast(1.58) saturate(0.8) hue-rotate(-8deg);
  }
  50% {
    filter: brightness(0.9) contrast(1.42) saturate(0.88) hue-rotate(14deg);
  }
}

@keyframes table-fs-aurora-pan {
  0% {
    background-position:
      center,
      0% 28%,
      var(--fs-x) var(--fs-y),
      calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
      var(--fs-x) var(--fs-y),
      50% 50%;
  }
  100% {
    background-position:
      center,
      100% 72%,
      var(--fs-x) var(--fs-y),
      calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
      var(--fs-x) var(--fs-y),
      50% 50%;
  }
}

@keyframes table-fs-aurora-curtains {
  0%,
  100% {
    filter: brightness(0.82) contrast(1.65) saturate(0.86) hue-rotate(-8deg);
  }
  50% {
    filter: brightness(0.9) contrast(1.5) saturate(0.92) hue-rotate(14deg);
  }
}

@keyframes table-fs-after-aurora-pan {
  0% {
    background-position:
      6% 12%,
      var(--fs-x) var(--fs-y),
      calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
      var(--fs-x) var(--fs-y),
      var(--fs-x) var(--fs-y),
      50% 50%;
  }
  100% {
    background-position:
      94% 88%,
      var(--fs-x) var(--fs-y),
      calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
      var(--fs-x) var(--fs-y),
      var(--fs-x) var(--fs-y),
      50% 50%;
  }
}

@keyframes table-fs-after-aurora-curtains {
  0%,
  100% {
    filter: brightness(0.84) contrast(1.52) saturate(0.88) hue-rotate(4deg);
  }
  50% {
    filter: brightness(0.9) contrast(1.38) saturate(0.93) hue-rotate(-12deg);
  }
}

/* Playmat PNG + overlay: legível no ecrã (antes ~impercetível). */
@keyframes playmat-bg-ambient-curtains {
  0%,
  100% {
    filter: brightness(0.94) contrast(1.04) saturate(0.98) hue-rotate(-6deg);
  }
  50% {
    filter: brightness(1.12) contrast(1.12) saturate(1.28) hue-rotate(10deg);
  }
}

@keyframes playmat-bg-subtle-drift {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.028) translate(0.9%, -0.55%);
  }
}

@keyframes playmat-bg-sheen {
  0% {
    background-position: 8% 18%, 92% 82%, -5% 42%;
    opacity: 0.3;
  }
  100% {
    background-position: 42% 48%, 58% 52%, 105% 58%;
    opacity: 0.62;
  }
}

html, body {
  height: 100%;
}
html:has(#gameSection:not([hidden])) {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}
/* Same shell as :has() above — toggled from JS so layout works even if :has() is flaky */
html.game-shell--playing {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: none;
  margin: 0;
  padding: 8px 12px;
  /* Fundo preto (mesa / lobby) */
  background: #000;
  color: #e8eaef;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
body:has(#lobby:not([hidden])) {
  background: var(--theme-lobby-bg);
  color: #f4f4f5;
}

/* Partida ativa: viewport fixa sem scroll na página; o tabuleiro encolhe com zoom em JS */
body:has(#gameSection:not([hidden])) {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 4px 8px;
}
body:has(#gameSection:not([hidden])) main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.game-shell--playing {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 4px 8px;
}
body.game-shell--playing main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.game-shell--playing > header {
  display: none;
}

/* Durante o jogo o título fica no painel direito (como no mockup Photoshop) */
body:has(#gameSection:not([hidden])) > header {
  display: none;
}

header {
  margin-bottom: 6px;
}

/* Background music: fixed, in-game only. No panel frame — controls sit directly on the playfield. */
.ambient-music {
  position: fixed;
  z-index: 10000;
  top: 22px;
  left: 12px;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 3.75px;
  max-width: calc(100vw - 24px);
  padding: 0;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
  color: #f4f4f5;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body:has(#gameSection:not([hidden])) .ambient-music {
  display: flex;
}

.ambient-music-toggle {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  line-height: 0;
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.ambient-music-toggle__icons {
  position: relative;
  width: 17.5px;
  height: 17.5px;
  display: inline-block;
}

.ambient-music-toggle__img {
  display: block;
  width: 17.5px;
  height: 17.5px;
  object-fit: contain;
  pointer-events: none;
}

.ambient-music-toggle[aria-pressed="false"] .ambient-music-toggle__img--pause {
  display: none;
}

.ambient-music-toggle[aria-pressed="true"] .ambient-music-toggle__img--play {
  display: none;
}

.ambient-music-toggle:hover .ambient-music-toggle__img {
  opacity: 0.88;
  filter: brightness(1.06);
}

.ambient-music-toggle:focus-visible {
  outline: 2px solid rgba(199, 210, 254, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

.ambient-music-skip {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #e2e8f0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.ambient-music-skip__icon {
  display: block;
  width: 17.5px;
  height: 17.5px;
  pointer-events: none;
}

.ambient-music-skip:hover .ambient-music-skip__icon {
  opacity: 0.88;
  filter: brightness(1.06);
}

.ambient-music-skip:focus-visible {
  outline: 2px solid rgba(199, 210, 254, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

.ambient-music-vol {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  margin: 0;
  cursor: pointer;
}

.ambient-music-vol__text {
  font-size: clamp(7.5px, calc(0.5625rem * 0.625), 10px);
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ambient-music-vol input[type="range"] {
  width: min(37.5px, 8.75vw);
  height: 0.625rem;
  margin: 0;
  accent-color: #6069e5;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.ambient-music-vol input[type="range"]::-webkit-slider-runnable-track {
  height: 3.75px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.ambient-music-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8.75px;
  height: 8.75px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #6069e5;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.ambient-music-vol input[type="range"]::-moz-range-track {
  height: 3.75px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.ambient-music-vol input[type="range"]::-moz-range-thumb {
  width: 8.75px;
  height: 8.75px;
  border-radius: 50%;
  background: #6069e5;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

main {
  flex: 1 1 auto;
  min-height: 0; /* permite filhos com overflow interno */
  background: #000;
}

header h1 {
  margin: 0;
  font-size: 1.35rem;
  color: #f8fafc;
}

body:has(#lobby:not([hidden])) header h1 {
  color: #fff;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: #aaa;
}

body:has(#lobby:not([hidden])) .subtitle {
  color: #a1a1aa;
}

.deck-row {
  margin-top: 0.5rem;
}
.deck-row label {
  font-size: 0.9rem;
  color: #e5e7eb;
}
.deck-row select {
  margin-left: 0.5rem;
  padding: 6px 10px;
  background: var(--theme-ink);
  color: #f5f5ff;
  border-radius: 6px;
  border: 1px solid var(--theme-lobby-border);
}

.panel {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 1.15rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: none;
}

.panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: #fafafa;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.panel p,
.panel label {
  color: #e4e4e7;
}

.panel code {
  font-size: 0.88em;
  background: rgba(24, 23, 85, 0.65);
  color: #d4d4f8;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(165, 180, 252, 0.2);
}

#lobby input[type="text"] {
  margin-top: 0.35rem;
  width: 100%;
  max-width: 22rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  background: #1e1c48;
  color: #f5f5ff;
  border: 1px solid var(--theme-lobby-border);
  border-radius: 6px;
  box-sizing: border-box;
}

#lobby input[type="text"]::placeholder {
  color: #71717a;
}

#lobby input[type="text"]:focus {
  outline: none;
  border-color: rgba(199, 210, 254, 0.55);
  box-shadow: 0 0 0 2px rgba(24, 23, 85, 0.5);
}

.panel h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

button {
  background: var(--theme-ink);
  color: #f5f5ff;
  border: 1px solid rgba(165, 180, 252, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(24, 23, 85, 0.35);
}

button:hover {
  background: var(--theme-ink-hover);
  border-color: rgba(199, 210, 254, 0.55);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.card-action {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.error {
  color: #fca5a5;
  margin-top: 0.5rem;
}

.message {
  color: #2ecc71;
  margin-top: 0.5rem;
}

/* Mensagem antiga (fora da top-bar) não deve tapar a mão */
#gameMessage {
  display: none;
}

#gameSummary {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  background: #0d1b2a;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.card {
  background: #0f3460;
  border: 1px solid #533483;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  max-width: 200px;
}

.card-kind-badge {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a5b4fc;
  margin-bottom: 3px;
}

.card-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.card-points-big {
  font-size: 0.98rem;
  font-weight: 700;
  color: #7dd3fc;
  white-space: nowrap;
}

.card-meta-line {
  font-size: 0.7rem;
  color: #cbd5e1;
  line-height: 1.35;
  margin-top: 4px;
}

.card-name {
  font-weight: 600;
}

.card-type {
  color: #aaa;
  font-size: 0.8rem;
}
.card-points {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #7dd3fc;
  margin: 2px 0;
}

.card-effect {
  display: block;
  font-size: 0.65rem;
  line-height: 1.2;
  color: #9ca3af;
  margin-top: 3px;
  word-break: break-word;
}
.hand-cards .card-effect {
  font-size: 0.65rem;
}

.card-effect-block {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  line-height: 1.25;
  color: #9ca3af;
  word-break: break-word;
}
.card-effect-line {
  margin-top: 3px;
}

.card-actions {
  margin-top: 0.35rem;
}

.card-actions button {
  margin: 0.15rem 0.15rem 0 0;
}

#phaseActions {
  margin-bottom: 0.5rem;
}

#phaseActions button {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* RPS / Pass reaction: destaque no centro do ecrã */
.game-center-prompt {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, 2.5vmin);
  box-sizing: border-box;
  pointer-events: none;
}
/* Garantir que [hidden] fecha o overlay: um display:flex na classe pode vencer o estilo por defeito do atributo nalguns browsers. */
.game-center-prompt[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.game-center-prompt:not([hidden]) {
  pointer-events: auto;
}
.game-center-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
.game-center-prompt__panel {
  position: relative;
  z-index: 1;
  max-width: min(420px, 100%);
  max-height: min(85vh, 100%);
  overflow: auto;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #0f172a 0%, #020617 100%);
  border: 1px solid rgba(147, 197, 253, 0.35);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.8),
    0 20px 50px rgba(0, 0, 0, 0.65);
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.game-center-prompt__panel .rps-duel-intro {
  margin: 0 0 0.75rem;
  text-align: center;
}
.game-center-prompt__panel .modal-rps-row {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.game-center-prompt__panel .btn-rps {
  min-width: 5.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
}
.game-center-prompt__panel button {
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}
.game-center-prompt__panel .modal-sub {
  color: #94a3b8;
  font-size: 0.82rem;
}

/* Quem começa após RPS: texto em cima, os dois botões na parte de baixo (painel central + barra de fase). */
.first-player-choice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.first-player-choice__text {
  margin: 0;
  line-height: 1.4;
}
.game-center-prompt__panel .first-player-choice__text {
  text-align: center;
}
.first-player-choice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.first-player-choice__actions button {
  flex: 1 1 auto;
  min-width: min(140px, 100%);
  margin-right: 0;
  margin-bottom: 0;
}
.game-center-prompt__panel .first-player-choice__actions button {
  min-width: min(160px, calc(50% - 0.25rem));
}

/* --- Layout: mesa à esquerda; à direita Recent Log e por baixo a barra de turno/ações --- */
/* Tamanho real: o encaixe fino (meta + tabuleiro + meta) faz-se em JS (.playmat-view-stack zoom). */
.game-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  zoom: 1;
  overflow: hidden;
  background: #000;
}
/* Fallback para browsers sem zoom (ex.: Firefox) */
@supports not (zoom: 1) {
  .game-section { font-size: 1rem; }
}

@media (max-width: 1180px) {
  .game-section {
    zoom: 0.9;
  }
  @supports not (zoom: 1) {
    .game-section {
      font-size: 0.9rem;
    }
  }
}
@media (max-width: 900px) {
  /* Coluna + largura total do tabuleiro: zoom global 1 mantém texto legível */
  .game-section {
    zoom: 1;
  }
  @supports not (zoom: 1) {
    .game-section {
      font-size: 1rem;
    }
  }
  body:has(#gameSection:not([hidden])),
  body.game-shell--playing {
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1920px) and (min-height: 1000px) {
  .game-section {
    zoom: 1;
  }
  @supports not (zoom: 1) {
    .game-section {
      font-size: 1rem;
    }
  }
}
@media (min-width: 2560px) and (min-height: 1440px) {
  .game-section {
    zoom: 1.02;
  }
  @supports not (zoom: 1) {
    .game-section {
      font-size: 1.02rem;
    }
  }
  .zone--playmat-overlay {
    font-size: 0.85rem;
  }
  .zone--playmat-overlay .zone-label {
    font-size: 0.72rem;
  }
  .playmat-meta {
    font-size: 0.69rem;
  }
  .playmat-meta-row--sub {
    font-size: 0.63rem;
  }
  .playmat-meta-title {
    font-size: 0.57rem;
  }
  .top-bar-turn {
    font-size: 1.08rem;
  }
  .top-bar-stats,
  .top-bar-message {
    font-size: 0.98rem;
  }
}

.game-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  flex: 1 1 0%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 2px;
  background: #000;
}

/* Telemóveis / tablets em retrato: tabuleiro a largura útil; painel por baixo dentro do mesmo .game-playfield. */
@media (max-width: 900px) {
  .game-layout {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
  }
  .board-area {
    flex: 1 1 auto;
    min-height: min(52dvh, 560px);
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .game-playfield {
    flex-direction: column;
    overflow: visible;
    min-height: min(48dvh, 520px);
  }
  .playmat-view-fit {
    min-height: min(48dvh, 520px);
  }
  /* Larguras da sidebar: ver bloco “.right-panel — larguras responsivas” mais abaixo no ficheiro */
  .right-panel {
    height: auto;
    max-height: none;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 8px;
  }
  .right-panel--sidebar-ref {
    box-shadow: none;
    padding: 5px 5px 6px;
  }
  .game-playfield .right-panel--sidebar-ref {
    border-left: none;
  }
  .right-panel .top-bar {
    margin-top: 0;
  }
  /* Stats sobre a arte: fundo mais fechado + blur para ler em ecrã pequeno */
  .playmat-ui-layer .playmat-meta.playmat-meta--in-stage.playmat-meta--zone-skin {
    background: rgba(22, 24, 28, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(210, 214, 224, 0.35);
  }
  .playmat-ui-layer {
    --playmat-board-scale: 1;
  }
  /* Folga em baixo: a mão P1 deixa de ser cortada pelo clip do stage */
  .playmat-stage {
    padding-bottom: min(14dvh, 128px);
    box-sizing: border-box;
  }
  .right-panel > .panel-block--log {
    max-height: min(22dvh, 120px);
  }
}

/* Larguras da .right-panel ficam definidas mais abaixo (após o bloco base) para não serem sobrescritas. */

@media (max-width: 1199px) {
  .right-panel--sidebar-ref {
    padding: 6px 6px 7px;
    gap: 6px;
  }
  .right-panel--sidebar-ref .game-chrome-title {
    padding-bottom: 6px;
  }
  .right-panel--sidebar-ref .game-chrome-title__main {
    font-size: 0.68rem;
    letter-spacing: 0.01em;
  }
  .right-panel--sidebar-ref .game-chrome-title__sub {
    margin-top: 3px;
    font-size: 0.58rem;
  }
  .right-panel--sidebar-ref .game-chrome-title__id {
    margin-top: 3px;
    font-size: 0.55rem;
  }
  .right-panel--sidebar-ref .sidebar-back-row {
    margin: 5px 0 0;
  }
  .right-panel--sidebar-ref .btn-back-to-lobby {
    padding: 0.26rem 0.38rem;
    font-size: 0.62rem;
    border-radius: 4px;
  }
  .right-panel--sidebar-ref .panel-block {
    padding: 5px 5px 6px;
    border-radius: 2px;
  }
  .right-panel--sidebar-ref .sidebar-section-title {
    margin: 0 0 4px;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }
  .right-panel--sidebar-ref .log-content {
    font-size: 0.61rem;
    line-height: 1.42;
  }
  .right-panel--sidebar-ref .top-bar--sidebar-ref {
    padding: 6px 5px;
    border-radius: 2px;
  }
  .right-panel--sidebar-ref .message-content {
    font-size: 0.61rem;
    line-height: 1.38;
  }
  .right-panel .top-bar {
    margin-top: 6px;
    padding: 6px 6px;
    border-radius: 4px;
  }
  .right-panel .top-bar-row {
    gap: 5px;
    margin-bottom: 3px;
  }
  .right-panel .top-bar-turn {
    font-size: 0.68rem;
  }
  .right-panel .top-bar-stats {
    font-size: 0.6rem;
    margin-bottom: 2px;
  }
  .right-panel .top-bar-message {
    font-size: 0.6rem;
    margin-bottom: 3px;
  }
  .right-panel .top-bar-actions {
    gap: 4px;
  }
  .right-panel .top-bar-actions button:not(.btn-play-primary):not(.btn-play-secondary) {
    padding: 0.28rem 0.45rem;
    font-size: 0.62rem;
    border-radius: 4px;
  }
  .btn-play-primary {
    padding: 0.32rem 0.55rem !important;
    font-size: 0.65em !important;
    border-radius: 4px !important;
  }
  .btn-play-secondary {
    padding: 0.28rem 0.45rem !important;
    font-size: 0.62em !important;
    border-radius: 4px !important;
  }
  .playmat-ui-layer .zone--playmat-overlay {
    font-size: 0.62rem;
    padding: 4px 4px;
  }
  .playmat-ui-layer .zone--playmat-overlay .zone-label {
    font-size: 0.52rem;
    margin-bottom: 2px;
    letter-spacing: 0.03em;
  }
}

/* Stats no trilho direito (JS em viewports ≤1199px): escala ancorada à direita */
html.playmat-meta-narrow .playmat-ui-layer .playmat-meta.playmat-meta--opponent.playmat-meta--in-stage {
  /* Acima da faixa da mão P2 (z-hand-strip 8000): a altura em CSS da mão pode ultrapassar o HAND_H do blueprint e tapar o painel */
  z-index: 8500;
  transform-origin: right top;
  text-align: right;
}
html.playmat-meta-narrow .playmat-ui-layer .playmat-meta.playmat-meta--player.playmat-meta--in-stage {
  transform-origin: right bottom;
  text-align: right;
}
html.playmat-meta-narrow .playmat-meta--in-stage .playmat-meta-line--identity {
  justify-content: flex-end;
  flex-wrap: wrap;
}
html.playmat-meta-narrow .playmat-meta--in-stage .playmat-meta-head {
  align-items: flex-end;
}
html.playmat-meta-narrow .playmat-meta--in-stage.playmat-meta--zone-skin .tricker-abilities {
  max-height: 4.125rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * Três shells (data-layout-shell no <html>, definido em app.js: desktop | tablet | mobile):
 *   desktop — ≥1200px largura (tabuleiro 16:9 existente + sidebar à direita).
 *   tablet  — iPad / ~4:3 ou janelas médias: mais área vertical para o stage, folga à mão.
 *   mobile  — telemóvel / landscape compacto: sidebar à esquerda com scroll; tabuleiro à direita em tamanho útil.
 */
@media (max-width: 1199px) {
  .playmat-view-fit {
    position: relative;
    z-index: 14;
    isolation: isolate;
  }
  /* .right-panel é filho directo de .game-layout (não de .game-playfield) */
  .game-layout > .right-panel {
    position: relative;
    z-index: 2;
  }
}

html[data-layout-shell="mobile"] .playmat-view-fit {
  /* Sidebar já não fica por baixo do tabuleiro — menos margem para maximizar blocos 1–2 visíveis */
  margin-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}
html[data-layout-shell="mobile"] .playmat-stage {
  padding-bottom: min(18dvh, 160px);
}
html[data-layout-shell="mobile"] .playmat-view-stack {
  margin-bottom: min(8px, 2vw);
}

/*
 * Telemóvel (shell mobile): sidebar à esquerda com scroll próprio; a área do tabuleiro usa
 * toda a largura e altura úteis à direita — não partilha scroll vertical com o painel.
 */
html[data-layout-shell="mobile"] .game-layout {
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
}
html[data-layout-shell="mobile"] .board-area {
  order: 1;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
html[data-layout-shell="mobile"] .board-area .game-playfield {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
html[data-layout-shell="mobile"] .game-layout > .right-panel {
  order: -1;
  flex: 0 0 auto;
  width: min(104px, 27vw);
  min-width: 76px;
  max-width: 118px;
  height: auto;
  align-self: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
  border-left: none;
  border-top: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 6px;
  /* Sombra para o interior do jogo (painel à esquerda) */
  box-shadow: 8px 0 22px rgba(0, 0, 0, 0.42);
}
html[data-layout-shell="mobile"] .game-layout > .right-panel.right-panel--sidebar-ref {
  border-left: none;
  box-shadow: 8px 0 22px rgba(0, 0, 0, 0.42);
}
html[data-layout-shell="mobile"] .game-layout > .right-panel .top-bar {
  margin-top: 0;
}
/* Um único scroll no painel: blocos com altura natural */
html[data-layout-shell="mobile"] .game-layout > .right-panel .panel-block {
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
}
html[data-layout-shell="mobile"] .game-layout > .right-panel > .panel-block--log {
  flex: 0 0 auto;
  max-height: none;
}
html[data-layout-shell="mobile"] .game-layout > .right-panel > .message-panel.panel-block {
  flex: 0 0 auto;
}
html[data-layout-shell="mobile"] .game-layout > .right-panel .log-content,
html[data-layout-shell="mobile"] .game-layout > .right-panel .message-content {
  flex: 0 1 auto;
  overflow: visible;
  max-height: none;
}

html[data-layout-shell="tablet"] .playmat-stage {
  padding-bottom: min(13dvh, 120px);
}
@media (max-width: 900px) {
  html[data-layout-shell="tablet"] .game-playfield {
    min-height: min(46dvh, 500px);
  }
  html[data-layout-shell="tablet"] .playmat-view-fit {
    min-height: min(44dvh, 460px);
  }
  html[data-layout-shell="tablet"] .board-area {
    min-height: min(50dvh, 540px);
  }
}

/* Barra de turno — destaque amarelo (mockup) */
.right-panel .top-bar {
  margin-top: 9px;
  background: var(--playmat-zone-bg);
  border: 2px solid rgba(241, 196, 15, 0.72);
  border-radius: 5px;
  padding: 9px 11px;
  width: 100%;
  box-shadow:
    inset 0 0 18px rgba(241, 196, 15, 0.06),
    0 3px 11px rgba(0, 0, 0, 0.35);
}
.top-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}
.top-bar-turn {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fde047;
  letter-spacing: 0.02em;
}
.top-bar-stats {
  font-size: 0.74rem;
  color: #b8c3d4;
  margin-bottom: 3px;
}
.top-bar-message {
  font-size: 0.74rem;
  color: #5eead4;
  margin-bottom: 5px;
  min-height: 1.35em;
}
.top-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.top-bar-actions button {
  margin: 0;
}

/* Botões na caixa de turno (sidebar): cor única #181755 */
.right-panel .top-bar-actions button:not(.btn-play-primary):not(.btn-play-secondary) {
  background: #181755;
  border: 1px solid rgba(165, 180, 252, 0.35);
  color: #f5f5ff;
  font-weight: 600;
  padding: 0.38rem 0.75rem;
  border-radius: 6px;
  font-size: 0.88em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(24, 23, 85, 0.45);
}
.right-panel .top-bar-actions button:not(.btn-play-primary):not(.btn-play-secondary):hover {
  background: #222063;
  border-color: rgba(199, 210, 254, 0.5);
}

.btn-play-primary {
  background: #181755 !important;
  border: 1px solid rgba(165, 180, 252, 0.4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.42rem 0.83rem !important;
  border-radius: 6px !important;
  font-size: 0.92em !important;
  box-shadow: 0 2px 8px rgba(24, 23, 85, 0.5);
}
.btn-play-primary:hover {
  background: #222063 !important;
  border-color: rgba(199, 210, 254, 0.55) !important;
}
.btn-play-secondary {
  background: #181755 !important;
  border: 1px solid rgba(165, 180, 252, 0.35) !important;
  color: #f5f5ff !important;
  font-weight: 600 !important;
  padding: 0.38rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 0.88em !important;
  box-shadow: 0 2px 6px rgba(24, 23, 85, 0.4);
}
.btn-play-secondary:hover {
  background: #222063 !important;
  border-color: rgba(199, 210, 254, 0.5) !important;
}

/* Área do tabuleiro: o clipping das mãos é sempre o .playmat-stage (área preta), não aqui */
.board-area {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-right: 0;
  justify-content: center;
  align-items: stretch;
  position: relative;
  z-index: 0;
  background: #000;
}

/* Uma única “janela” de jogo: playmat à esquerda + barra lateral à direita (ou em coluna no mobile). */
.game-playfield {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(59, 130, 246, 0.42);
  border-radius: 3px;
  background: #000;
  overflow: hidden;
}
.game-playfield .playmat-view-fit {
  flex: 1 1 auto;
  min-width: 0;
}
.game-playfield .playmat-stage {
  border: none;
}
.game-playfield .right-panel--sidebar-ref {
  box-shadow: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Centra vertical e horizontalmente o bloco meta + tabuleiro + meta dentro da coluna da mesa */
.playmat-view-fit {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.playmat-view-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  /* Largura da coluna do tabuleiro; o zoom em JS encaixa na altura. Um teto por dvh criava faixas mortas em ecrãs largos. */
  width: 100%;
  max-width: 100%;
  transform-origin: center center;
}

.playmat-meta {
  flex-shrink: 0;
  background: var(--playmat-zone-bg);
  border: 1px solid var(--playmat-zone-border);
  border-radius: 3px;
  padding: 4px 8px 5px;
  font-size: 0.57rem;
  color: #e2e8f0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.playmat-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  line-height: 1.35;
}
.playmat-meta-row--sub {
  margin-top: 3px;
  font-size: 0.54rem;
  color: #b8d4e6;
}
.playmat-meta-title {
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-size: 0.51rem;
}
.playmat-meta-name {
  font-weight: 600;
  color: #f1f5f9;
}
.playmat-meta-sep {
  color: #64748b;
  user-select: none;
}
.playmat-meta-states {
  flex: 1 1 auto;
  min-width: 0;
}
.tricker-abilities--inline {
  flex: 1 1 165px;
  min-width: 105px;
  max-height: 3.2em;
  overflow: hidden;
  margin: 0 !important;
  padding: 3px 5px !important;
  font-size: 0.51rem !important;
}

/* Barras Oponente/Tu dentro do tabuleiro — alinhadas ao bloco 2/4; pele = .zone--playmat-overlay */
.playmat-ui-layer .playmat-meta.playmat-meta--in-stage {
  z-index: 40;
  pointer-events: auto;
  margin: 0;
  max-width: none;
  transform: translateY(var(--board-cluster-nudge-y, 0px)) scale(var(--playmat-board-scale));
  transform-origin: top left;
  /* Não misturar overflow-x:hidden com visible no eixo Y — o spec força o Y a auto e devolve scrollbars */
  overflow: visible;
}
.playmat-ui-layer .playmat-meta.playmat-meta--in-stage.playmat-meta--zone-skin {
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border: 1px solid var(--playmat-zone-border);
  border-radius: 0;
  padding: 4px 5px;
  font-size: 0.54rem;
  color: #e2e8f0;
  box-shadow: none;
}
.playmat-meta--in-stage.playmat-meta--zone-skin .playmat-meta-title {
  color: #9ca3af;
}
.playmat-meta--in-stage .playmat-meta-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin-bottom: 2px;
}
.playmat-meta--in-stage .playmat-meta-title--block {
  display: block;
  margin: 0;
  line-height: 1.2;
}
.playmat-meta--in-stage .playmat-meta-line--identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 5px;
  line-height: 1.35;
}
.playmat-meta--in-stage .playmat-meta-line--identity .playmat-meta-name {
  font-weight: 600;
  color: #f1f5f9;
}
.playmat-meta--in-stage .playmat-meta-line--resources {
  font-size: 0.53rem;
  line-height: 1.35;
  color: #e2e8f0;
}
.playmat-meta--in-stage .playmat-meta-line--states {
  font-size: 0.51rem;
  line-height: 1.35;
  color: #9ca3af;
}
.playmat-meta--in-stage .playmat-meta-states-label {
  color: #9ca3af;
}
.playmat-meta--in-stage .playmat-meta-states-value {
  color: #cbd5e1;
}
.playmat-meta--in-stage.playmat-meta--zone-skin .playmat-meta-row--sub {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin-top: 2px;
  font-size: 0.51rem;
  color: #9ca3af;
}
.playmat-meta--in-stage .tricker-abilities--inline {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  overflow-y: visible;
}
.playmat-meta--in-stage.playmat-meta--zone-skin .tricker-abilities-compact {
  max-height: none;
  overflow: visible;
  text-overflow: unset;
}
.playmat-meta--in-stage.playmat-meta--zone-skin .tricker-abilities {
  margin-bottom: 0;
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border: 1px solid rgba(210, 214, 224, 0.28);
  border-radius: 3px;
  color: #cbd5e1;
  max-height: none;
  overflow: visible;
}

.playmat-meta--in-stage .playmat-meta-row--sub.playmat-meta-row--abilities-only {
  margin-top: 5px;
}
.zone--playmat-overlay.cell-power.cell-power--merged-into-meta {
  visibility: hidden;
  pointer-events: none;
}

.playmat-stage {
  position: relative;
  width: 100%;
  /* Largura base 16:9; empilhamento + zoom em .playmat-view-stack ajustam ao espaço real. */
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1920 / 1080;
  background: #000;
  border: 1px solid rgba(59, 130, 246, 0.42);
  flex-shrink: 0;
  /* Área preta = limite duro do jogo (mãos e cartas só “respiram” dentro disto) */
  overflow: clip;
  overflow: hidden; /* fallback Safari antigo */
  isolation: isolate;
  contain: paint;
  z-index: 0;
}

/* Brilho / cor a mover-se sobre a arte (entre PNG e UI). */
.playmat-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(ellipse 110% 85% at 28% 22%, rgba(150, 205, 255, 0.55), transparent 52%),
    radial-gradient(ellipse 95% 75% at 72% 78%, rgba(255, 215, 165, 0.45), transparent 48%),
    linear-gradient(
      102deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 44%,
      rgba(190, 225, 255, 0.28) 51%,
      rgba(255, 255, 255, 0.12) 57%,
      transparent 100%
    );
  background-size: 145% 145%, 135% 135%, 260% 260%;
  background-repeat: no-repeat;
  animation: playmat-bg-sheen 18s ease-in-out infinite alternate;
}

.playmat-bg {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  animation:
    playmat-bg-ambient-curtains 22s ease-in-out infinite alternate,
    playmat-bg-subtle-drift 30s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .playmat-bg {
    animation: none;
    filter: none;
    transform: none;
  }
  .playmat-stage::after {
    animation: none;
    opacity: 0;
  }
}
.playmat-ui-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  contain: layout;
  /* Escala só do tabuleiro (zonas + floor); mãos excluídas */
  --playmat-board-scale: 1.07;
  /* Deslocamento Y (px) calculado em app.js: centra o “bloco” jogável entre as mãos */
  --board-cluster-nudge-y: 0px;
}
.playmat-ui-layer .zone {
  pointer-events: auto;
}
.playmat-ui-layer .zone--playmat-overlay:not(.cell-hand):not(.cell-floor):not(.cell-power) {
  position: absolute;
  z-index: var(--z-playmat-zones);
  transform: translateY(var(--board-cluster-nudge-y, 0px)) scale(var(--playmat-board-scale));
  transform-origin: 50% 50%;
}
/* Floor sem scale global — evita “inchar” para cima/baixo e sobrepor Prep/Tricker (caixa = bbox JS) */
.playmat-ui-layer #floorUnified.floor-unified {
  z-index: var(--z-playmat-floor);
  transform: translateY(var(--board-cluster-nudge-y, 0px));
  /* Opacidade / leitura alinhadas a Judge & Arena (evita “mancha” mais opaca só por área grande) */
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border: 1px solid var(--playmat-zone-border);
  border-radius: 3px;
  box-sizing: border-box;
}

/*
 * Fundo relva no floor (teste): desactivado por defeito.
 * Para activar: em index.html usa <html lang="en" data-floor-grass-test="on">
 * ou em consola: document.documentElement.dataset.floorGrassTest = "on"
 */
html[data-floor-grass-test="on"] .playmat-ui-layer #floorUnified.floor-unified {
  background-color: var(--playmat-zone-bg);
  background-image: linear-gradient(
      180deg,
      rgba(18, 20, 24, 0.12),
      rgba(18, 20, 24, 0.18)
    ),
    url("/assets/playmat/floor-test-grass.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.playmat-ui-layer .zone--playmat-overlay.cell-hand {
  z-index: var(--z-hand-strip);
}

/* Componentes de tabuleiro: regiões semânticas não criam caixa (filhos posicionam vs playmat) */
.board-region {
  display: contents;
}

/* Floor: só a área definida em boardLayout.js — overflow visible para peek das Transitions */
.floor-unified {
  position: absolute;
  padding: 0 !important;
  overflow: visible;
  border-radius: 3px;
  box-sizing: border-box;
}
.floor-unified .floor-half {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 6px;
}
.floor-unified .floor-half--opponent {
  border-bottom: none !important;
}
.floor-unified .floor-half {
  /* Visível: peek das Transitions (translateY negativo); clip só no #floorUnified */
  overflow: visible;
}
.floor-unified .floor-half .zone-cards {
  min-height: 0;
  overflow: visible;
  padding: 6px 1.25% 8px;
  box-sizing: border-box;
}
.floor-unified .floor-half .zone-cards.floor-row {
  padding: 10px 4px 10px;
  overflow: visible;
}

/* Preparation: 3 ranhuras; labels fora da área jogável */
.zone--playmat-overlay.cell-prep {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 1fr;
  align-items: stretch;
  padding-top: 6px;
}
.zone--playmat-overlay.cell-prep > .zone-slot-grid {
  grid-row: 1;
  grid-column: 1;
}
.zone--playmat-overlay.cell-prep > .zone-cards {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* Alinha ao blueprint SLOT_GAP=6px; mínimo maior para não “colar” com scale(1.07) no .zone--playmat-overlay */
  gap: clamp(8px, 1.1vw, 16px);
  column-gap: clamp(8px, 1.1vw, 16px);
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  overflow: hidden;
  /* Igual .pile-zone-cards: teto 160px + inset 1px para cartas com .webp (mesma lógica que o descarte). */
  --pile-zone-card-max-h: min(160px, 100%);
  padding: 1px;
  box-sizing: border-box;
}
.zone-slot-grid.zone-slot-grid--prep {
  display: flex;
  flex-direction: row;
  gap: clamp(8px, 1.1vw, 16px);
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  z-index: 0;
  pointer-events: none;
  padding: 0;
  box-sizing: border-box;
}
.zone-slot-grid {
  display: flex;
  flex-direction: row;
  gap: clamp(2px, 0.35vw, 6px);
  align-items: stretch;
  min-height: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* Rótulos informativos centrados dentro da caixa da zona; conteúdo por cima (z-index). */
.playmat-ui-layer .zone--playmat-overlay.zone--label-outside {
  overflow: visible;
}
.playmat-ui-layer .zone--playmat-overlay.zone--label-outside > .zone-label {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #94a3b8;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.playmat-ui-layer .zone--playmat-overlay.zone--label-outside > .zone-cards {
  position: relative;
  z-index: 2;
}
.playmat-ui-layer .zone--playmat-overlay.zone--label-outside > .deck-zone-clip {
  z-index: 2;
}
/* Deck: rótulo usa o estilo global (centrado); fica z-index 1, maço em .deck-zone-clip z-index 2. */

/* Judge / Arena: zona paisagem; carta em 7/5 (horizontal) dentro da caixa */
.playmat-ui-layer .zone--judge-arena-landscape .zone-cards {
  align-items: center;
  justify-content: center;
}
.playmat-ui-layer .zone--judge-arena-landscape .mini-card.zone-slot-card--shared {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  gap: 0;
}
.playmat-ui-layer .zone--judge-arena-landscape .mini-card.zone-slot-card--shared .zone-slot-card-art {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 7 / 5;
  object-fit: contain;
}

.zone-slot {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* —— Bloco 1: mão do oponente — rotação 180°, ~40% da carta visível (janela tipo mão P1), sem scroll. */
#zoneP2Hand.zone--playmat-overlay {
  background: transparent;
  border: none;
  box-shadow: none;
  align-items: stretch;
  overflow: hidden !important;
  min-height: 0;
  padding: 0 !important;
  /* Topo colado ao bordo superior do tabuleiro (.playmat-stage), em vez do Y_O_HAND=6 do blueprint. */
  top: 0 !important;
}
#zoneP2Hand.opponent-hand-zone {
  --hand-opp-w: clamp(72px, 7.8vw, 108px);
  --hand-opp-card-h: calc(var(--hand-opp-w) * 7 / 5);
  /* Sobreposição fixa (não se ajusta à largura — overflow lateral é cortado). */
  --hand-opp-overlap: calc(var(--hand-opp-w) * 0.38);
  /* Espaço no topo da faixa para o hover não cortar; ~40% da altura da carta visível (peek). */
  --hand-opp-hover-lift: 10px;
  --hand-opp-strip-h: calc(var(--hand-opp-card-h) * 0.4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  height: calc(var(--hand-opp-strip-h) + var(--hand-opp-hover-lift)) !important;
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
#zoneP2Hand .opponent-hand-strip {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: var(--hand-opp-hover-lift);
  box-sizing: border-box;
}
/* Contador de cartas na mão — caixa estilo verso (rounded rect escuro, bordo claro, algarismo branco). */
#zoneP2Hand .opponent-hand-hex-count,
#zoneP1Hand .opponent-hand-hex-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(270deg);
  transform-origin: center center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  padding: 0.22rem 0.48rem;
  min-height: 1.28rem;
  height: auto;
  background: #141418;
  color: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 0.32rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 9500;
  pointer-events: none;
}
#zoneP2Hand .opponent-hand-hex-count {
  bottom: 36px;
  top: auto;
}
#zoneP1Hand .opponent-hand-hex-count {
  top: 4px;
  bottom: auto;
  transform: translateX(-50%) rotate(90deg);
  /* Acima de #hand.hand-cards (z-index 2) para o número não ficar tapado pelas cartas. */
  z-index: 10;
}
#zoneP2Hand .opponent-hand-hex-fill,
#zoneP1Hand .opponent-hand-hex-fill {
  display: none;
}
#zoneP2Hand .opponent-hand-hex-count__value,
#zoneP1Hand .opponent-hand-hex-count__value {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
  letter-spacing: 0.02em;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#zoneP2Hand.zone--playmat-overlay .zone-label {
  color: #cbd5e1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-align: center;
}

/* Moldura unificada estilo mockup (contorno claro sobre o preto) */
.zone--playmat-overlay {
  background: var(--playmat-zone-bg);
  border: 1px solid var(--playmat-zone-border);
  overflow: hidden;
  padding: 5px 6px;
  font-size: 0.72rem;
}
.zone--playmat-overlay .zone-label {
  font-size: 0.6rem;
  color: #9ca3af;
  margin-bottom: 3px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Texto das mini-cartas / resumos centrados na largura da zona */
.playmat-ui-layer .zone--playmat-overlay .mini-card-detail,
.playmat-ui-layer .zone--playmat-overlay .zone-slot-card-name,
.playmat-ui-layer .zone--playmat-overlay .floor-mini-card-name,
.playmat-ui-layer .zone--playmat-overlay .floor-mini-card-detail,
.playmat-ui-layer .zone--playmat-overlay .floor-mini-card-points,
.playmat-ui-layer .zone--playmat-overlay .power-control-summary,
.playmat-ui-layer .zone--playmat-overlay .deck-zone-count {
  text-align: center;
}

.zone--playmat-overlay.cell-floor {
  min-height: 0;
  justify-content: flex-start;
}
.zone--playmat-overlay.cell-hand {
  min-height: 0;
}
/* Mão P1: sem caixa/borda; só a fila de cartas */
#zoneP1Hand.zone--playmat-overlay {
  background: transparent;
  border: none;
  box-shadow: none;
  align-items: stretch;
  overflow: visible;
  min-height: 0;
  /* Sem padding inferior: a base da zona coincide com o fundo do .playmat-stage (HAND_H termina em y=1080 ref.). */
  padding: 5px 6px 0;
  /* Métricas da carta na zona (herdam em #hand e filhos). +20 % sobre a escala anterior. */
  --hand-card-w: calc(1.7424 * clamp(72px, 7.8vw, 108px));
  --hand-p1-art-h: calc(var(--hand-card-w) * 7 / 5);
  --hand-p1-chrome-h: min(3.85rem, calc(var(--hand-card-w) * 0.44));
  --hand-p1-face-h: calc(var(--hand-p1-art-h) + var(--hand-p1-chrome-h));
  /* +10 % de área visível relativo ao fator 0,92 (0,92×1,1); continua limitado à caixa HAND_H via min(…,100%) no #hand. */
  --hand-p1-strip-h: calc(var(--hand-p1-face-h) * 1.012);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
#zoneP1Hand.player-hand-zone .player-hand-strip {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  box-sizing: border-box;
}
/* Pilha acima do hex no topo quando as caixas se cruzam (badges em .hand-card-peek--main). */
#zoneP1Hand.player-hand-zone #hand.hand-cards {
  position: relative;
  z-index: 2;
}
.zone--playmat-overlay.cell-hand .hand-cards {
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Mão do jogador = Pokémon TCG Live: UMA janela (overflow hidden) mostra ~metade superior
 * da CARTA INTEIRA (arte 5:7 + tipo/nome). Sem “peek de arte” separado do texto.
 */
#zoneP1Hand .hand-cards {
  /* Só eixo Y: cartas por trás alinhadas à da frente, apenas mais “subidas”. */
  --hand-stack-shift: min(10px, calc(var(--hand-card-w) * 0.09));
  /* Afastamento base 10px; JS reduz (--hand-slot-spacing) com muitas cartas. */
  --hand-slot-spacing: 10px;
  /* Espaço extra no topo para o hover (translateY) não cortar a arte. */
  --hand-hover-lift: 10px;
  /* Pilhas: no máx. 1 carta por baixo (igual visual para 2+ cópias); folga = 1× shift + 2px. */
  --hand-stack-headroom: calc(var(--hand-stack-shift) + 2px);
  flex: 0 1 auto;
  min-height: 0;
  /*
   * Reserva sempre a folga de pilha (padding + altura), mesmo sem .card--hand-stack.
   * Assim a altura da faixa não “pula” ao agrupar/desagrupar — o zoom do .playmat-view-stack
   * deixa de recalcular scrollHeight e as cartas mantêm o mesmo tamanho visual.
   */
  height: min(
    calc(var(--hand-p1-strip-h) + var(--hand-hover-lift) + var(--hand-stack-headroom)),
    100%
  ) !important;
  max-height: 100% !important;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--hand-hover-lift) + var(--hand-stack-headroom)) 0 0;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  gap: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}
#zoneP1Hand .hand-cards::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/*
 * Sem isto, o browser trata drag como seleção de texto nas cartas modo texto (até passar o threshold JS).
 */
#zoneP1Hand .hand-cards .card,
#zoneP1Hand .hand-cards .card * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#zoneP1Hand .hand-cards .card :where(input, textarea) {
  user-select: text;
  -webkit-user-select: text;
}
#zoneP1Hand .hand-cards .card + .card {
  margin-left: var(--hand-slot-spacing);
}
#zoneP1Hand .hand-cards .hand-reorder-slot + .card,
#zoneP1Hand .hand-cards .card + .hand-reorder-slot {
  margin-left: var(--hand-slot-spacing);
}
#zoneP1Hand .hand-cards .hand-reorder-slot {
  flex: 0 0 var(--hand-card-w);
  min-width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  align-self: flex-start;
  min-height: calc(var(--hand-p1-face-h) * 0.35);
  pointer-events: none;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  background: transparent;
  border: none;
  outline: none;
  flex-shrink: 0;
}
#zoneP1Hand .hand-cards .hand-reorder-slot:first-child {
  margin-left: 0;
}
#zoneP1Hand .hand-cards.hand-cards--reordering {
  cursor: grabbing;
  user-select: none;
}
#zoneP1Hand .hand-cards.hand-cards--reordering .card:hover:not(.card--hand-reorder-float) {
  transform: none;
  filter: none;
}
.card.card--hand-reorder-float {
  position: fixed;
  z-index: var(--z-hand-reorder-float);
  pointer-events: none;
  margin: 0 !important;
  /* Fallback se JS não injetar: mesma fórmula que #zoneP1Hand (carta em body sem ancestral da zona). */
  --hand-card-w: calc(1.7424 * clamp(72px, 7.8vw, 108px));
  --hand-p1-art-h: calc(var(--hand-card-w) * 7 / 5);
  --hand-p1-chrome-h: min(3.85rem, calc(var(--hand-card-w) * 0.44));
  --hand-p1-face-h: calc(var(--hand-p1-art-h) + var(--hand-p1-chrome-h));
  --hand-stack-shift: min(10px, calc(var(--hand-card-w) * 0.09));
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
  /* Mesmo tamanho visual que na fila; só pequeno deslocamento (sem scale). */
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  transition: none;
  filter: brightness(1.06);
}
.card.card--hand-reorder-float * {
  user-select: none;
  -webkit-user-select: none;
}
/*
 * Carta em reorder está em document.body: os seletores #zoneP1Hand .hand-cards … não pegam.
 * Espelho das métricas da mão para a arte (webp) não ultrapassar o slot.
 */
.card.card--hand-reorder-float {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  padding: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
}
.card.card--hand-reorder-float .hand-card-peek-stack {
  position: relative;
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  margin: 0;
  flex-shrink: 0;
  line-height: 0;
}
.card.card--hand-reorder-float .hand-card-peek-stack .hand-card-peek {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 10px 10px 0 0;
  line-height: 0;
  box-sizing: border-box;
}
.card.card--hand-reorder-float .hand-card-peek--stack-under {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.card.card--hand-reorder-float .hand-card-peek--stack-under-1 {
  transform: translate(0, calc(-1 * var(--hand-stack-shift) - 2px));
}
.card.card--hand-reorder-float .hand-card-peek--stack-under-2 {
  z-index: -1;
  opacity: 0.82;
  transform: translate(0, calc(-2 * var(--hand-stack-shift) - 2px));
}
.card.card--hand-reorder-float .hand-card-peek--main {
  position: relative;
  z-index: 1;
  max-height: var(--hand-p1-art-h);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48);
}
.card.card--hand-reorder-float .hand-card-peek-stack .hand-card-art-wrap {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  max-height: var(--hand-p1-art-h);
  margin: 0;
  border-radius: 10px 10px 0 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
.card.card--hand-reorder-float .hand-card-peek-stack .hand-card-art-wrap--foil {
  border-radius: 10px 10px 0 0;
  border: none;
  max-width: var(--hand-card-w);
  width: 100%;
  max-height: var(--hand-p1-art-h);
  height: auto;
  overflow: hidden;
}
.card.card--hand-reorder-float .hand-card-peek-stack .hand-card-art {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  min-width: 0;
  display: block;
  aspect-ratio: 5 / 7;
  height: auto;
  max-height: var(--hand-p1-art-h);
  min-height: 0;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px 10px 0 0;
  border: none;
  box-sizing: border-box;
}
.card.card--hand-reorder-float .card-kind-badge {
  font-size: 0.48rem;
  margin: 1px 0 0;
  padding: 1px 4px;
  align-self: stretch;
  text-align: center;
  letter-spacing: 0.04em;
}
.card.card--hand-reorder-float .card-headline {
  margin: 0;
  padding: 0 3px 2px;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}
.card.card--hand-reorder-float .card-name {
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
}
.card.card--hand-reorder-float .card-points-big {
  font-size: 0.55rem;
}
/* Modo texto (sem webp): mesmo bloco cinza e tipografia que na mão — selectores #zoneP1Hand não pegam em body. */
.card.card--hand-reorder-float.card--hand-text-mode .card-kind-badge,
.card.card--hand-reorder-float.card--hand-text-mode .card-headline,
.card.card--hand-reorder-float.card--hand-text-mode .card-meta-line,
.card.card--hand-reorder-float.card--hand-text-mode .card-effect-block {
  display: none;
}
.card.card--hand-reorder-float .hand-card-peek-stack .hand-card-peek.hand-card-peek--placeholder {
  min-height: var(--hand-p1-art-h);
  height: var(--hand-p1-art-h);
  background: #212121;
  line-height: normal;
}
.card.card--hand-reorder-float .player-hand-card-textmode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-height: var(--hand-p1-art-h);
  height: 100%;
  padding: 4px 4px 6px;
  box-sizing: border-box;
  background: #212121;
  border-radius: 10px 10px 0 0;
}
.card.card--hand-reorder-float .player-hand-card-textmode-kind {
  font-size: clamp(0.45rem, 0.4rem + 0.32vw, 0.65rem);
  font-weight: 700;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.card.card--hand-reorder-float .player-hand-card-textmode-name {
  font-size: clamp(0.5rem, 0.44rem + 0.36vw, 0.76rem);
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
.card.card--hand-reorder-float .player-hand-card-textmode-pts {
  font-size: clamp(0.44rem, 0.38rem + 0.3vw, 0.66rem);
  font-weight: 700;
  color: #7dd3fc;
}
.card.card--hand-reorder-float .player-hand-card-textmode-meta {
  font-size: clamp(0.36rem, 0.32rem + 0.26vw, 0.56rem);
  line-height: 1.25;
  color: #cbd5e1;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-word;
}
.card.card--hand-reorder-float .player-hand-card-textmode-effects {
  font-size: clamp(0.34rem, 0.3rem + 0.24vw, 0.52rem);
  line-height: 1.25;
  color: #e2e8f0;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  word-break: break-word;
}
#zoneP1Hand .hand-cards .card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--hand-card-w);
  width: var(--hand-card-w);
  min-width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  align-self: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: transform 0.15s ease, filter 0.15s ease, z-index 0s;
}
#zoneP1Hand .hand-cards .card:hover {
  transform: translateY(-5px);
  z-index: var(--z-hand-card-hover);
  filter: brightness(1.06);
}
/* Pilhas agrupadas: +2px para cima face às cartas soltas. */
#zoneP1Hand .hand-cards .card.card--hand-stack {
  transform: translateY(-2px);
}
#zoneP1Hand .hand-cards .card.card--hand-stack:hover {
  transform: translateY(-7px);
}

/*
 * Pressionar o rato (Pokémon TCG): escala desce de forma suave, mantém enquanto o botão está premido,
 * volta à escala / hover ao soltar (:active deixa de aplicar).
 */
#zoneP1Hand .hand-cards .card:not(.card--hand-reorder-float):active {
  transform: translateY(2px) scale(0.91);
  transition:
    transform 0.16s cubic-bezier(0.32, 0, 0.23, 1),
    filter 0.16s ease;
  filter: brightness(0.97);
}
#zoneP1Hand .hand-cards .card.card--hand-stack:not(.card--hand-reorder-float):active {
  transform: translateY(0px) scale(0.91);
}
#zoneP1Hand .hand-cards .card:hover:not(.card--hand-reorder-float):active {
  transform: translateY(-3px) scale(0.91);
  filter: brightness(1.02);
}
#zoneP1Hand .hand-cards .card.card--hand-stack:hover:not(.card--hand-reorder-float):active {
  transform: translateY(-5px) scale(0.91);
}
#zoneP1Hand .hand-cards.hand-cards--reordering .card:active:not(.card--hand-reorder-float) {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  #zoneP1Hand .hand-cards .card:not(.card--hand-reorder-float):active,
  #zoneP1Hand .hand-cards .card.card--hand-stack:not(.card--hand-reorder-float):active,
  #zoneP1Hand .hand-cards .card:hover:not(.card--hand-reorder-float):active,
  #zoneP1Hand .hand-cards .card.card--hand-stack:hover:not(.card--hand-reorder-float):active {
    transform: scale(0.96);
    transition-duration: 0.05s;
  }
}

/* Clique numa carta que não pode ser jogada (estilo Pokémon TCG). */
@keyframes hand-card-shake-no-play-kf {
  0%,
  100% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(0);
  }
  12% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(-7px);
  }
  28% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(6px);
  }
  44% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(-5px);
  }
  60% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(4px);
  }
  76% {
    transform: translateY(var(--hand-shake-y, 0px)) translateX(-2px);
  }
}

#zoneP1Hand .hand-cards .card.hand-card--shake-no-play {
  --hand-shake-y: 0px;
  animation: hand-card-shake-no-play-kf 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transition: none;
}
#zoneP1Hand .hand-cards .card.card--hand-stack.hand-card--shake-no-play {
  --hand-shake-y: -2px;
}
#zoneP1Hand .hand-cards .card:hover.hand-card--shake-no-play {
  --hand-shake-y: -5px;
}
#zoneP1Hand .hand-cards .card.card--hand-stack:hover.hand-card--shake-no-play {
  --hand-shake-y: -7px;
}

@media (prefers-reduced-motion: reduce) {
  @keyframes hand-card-shake-no-play-kfReduced {
    0%,
    100% {
      transform: translateY(var(--hand-shake-y, 0px)) translateX(0);
    }
    33% {
      transform: translateY(var(--hand-shake-y, 0px)) translateX(-4px);
    }
    66% {
      transform: translateY(var(--hand-shake-y, 0px)) translateX(4px);
    }
  }
  #zoneP1Hand .hand-cards .card.hand-card--shake-no-play {
    animation: hand-card-shake-no-play-kfReduced 0.22s ease both;
  }
}

#zoneP1Hand .hand-cards .card.card--hand-full-art {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#zoneP1Hand .hand-cards .hand-card-peek-stack {
  position: relative;
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  margin: 0;
  flex-shrink: 0;
  line-height: 0;
}
@keyframes hand-card-draw-fly {
  from {
    transform: translate3d(var(--hand-draw-dx, 0px), var(--hand-draw-dy, 0px), 0) scale(0.9);
    opacity: 0.82;
    filter: brightness(1.1);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: none;
  }
}
#zoneP1Hand .hand-cards .hand-card-peek-stack.hand-card-peek--draw-in {
  animation: hand-card-draw-fly var(--hand-draw-duration, 480ms) cubic-bezier(0.25, 0.82, 0.35, 1) both;
  animation-delay: var(--hand-draw-delay, 0ms);
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  #zoneP1Hand .hand-cards .hand-card-peek-stack.hand-card-peek--draw-in {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Preview de compra só na tua mão (cliente); escondido até acabar o centro. */
#zoneP1Hand .hand-cards .card.card--draw-preview-pending {
  opacity: 0;
  pointer-events: none;
}

.draw-card-center-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

/* Clone completo da carta (arte ou modo texto) voando deck → centro → mão */
.draw-card-center-flyer {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}

.draw-card-center-flyer .card {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.draw-card-center-flyer .hand-card-peek-stack {
  width: 100% !important;
  max-width: 100% !important;
}

.draw-card-center-flyer .hand-card-peek-stack .hand-card-peek,
.draw-card-center-flyer .hand-card-peek-stack .hand-card-peek--main {
  width: 100% !important;
  max-width: 100% !important;
}

.draw-card-center-flyer .player-hand-card-peek-effects {
  font-size: clamp(0.55rem, 2.6vw, 0.72rem);
}

@media (prefers-reduced-motion: reduce) {
  #zoneP1Hand .hand-cards .card.card--draw-preview-pending {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Arte em altura real de carta; o clip é só o contentor #hand. */
#zoneP1Hand .hand-cards .hand-card-peek-stack .hand-card-peek {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 10px 10px 0 0;
  line-height: 0;
  box-sizing: border-box;
}
#zoneP1Hand .hand-cards .hand-card-peek--stack-under {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
#zoneP1Hand .hand-cards .hand-card-peek--stack-under-1 {
  transform: translate(0, calc(-1 * var(--hand-stack-shift) - 2px));
}
#zoneP1Hand .hand-cards .hand-card-peek--stack-under-2 {
  z-index: -1;
  opacity: 0.82;
  transform: translate(0, calc(-2 * var(--hand-stack-shift) - 2px));
}
#zoneP1Hand .hand-cards .hand-card-peek--main {
  position: relative;
  z-index: 1;
  max-height: var(--hand-p1-art-h);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48);
}
/* Action (e similares com efeito na mão): texto do efeito sobre a arte, visível no álbum. */
#zoneP1Hand .hand-cards .hand-card-peek--main .player-hand-card-peek-effects {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 4px 4px 3px;
  font-size: clamp(0.34rem, 0.3rem + 0.24vw, 0.52rem);
  line-height: 1.2;
  font-weight: 600;
  color: #f1f5f9;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.55) 28%, rgba(15, 23, 42, 0.94));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-word;
  border-radius: 0 0 9px 9px;
}
/* Placeholder: vencer min-height:0 do .hand-card-peek (senão fica só uma faixa). */
#zoneP1Hand .hand-cards .hand-card-peek-stack .hand-card-peek.hand-card-peek--placeholder {
  min-height: var(--hand-p1-art-h);
  height: var(--hand-p1-art-h);
  background: #212121;
  border: none;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  line-height: normal;
}
/* Sem webp / falha: texto no rect da carta (floor-mini-card--text-mode). */
#zoneP1Hand .hand-cards .card.card--hand-text-mode .card-kind-badge,
#zoneP1Hand .hand-cards .card.card--hand-text-mode .card-headline,
#zoneP1Hand .hand-cards .card.card--hand-text-mode .card-meta-line,
#zoneP1Hand .hand-cards .card.card--hand-text-mode .card-effect-block {
  display: none;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-height: var(--hand-p1-art-h);
  height: 100%;
  padding: 4px 4px 6px;
  box-sizing: border-box;
  background: #212121;
  border-radius: 10px 10px 0 0;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode-kind {
  font-size: clamp(0.45rem, 0.4rem + 0.32vw, 0.65rem);
  font-weight: 700;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode-name {
  font-size: clamp(0.5rem, 0.44rem + 0.36vw, 0.76rem);
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode-pts {
  font-size: clamp(0.44rem, 0.38rem + 0.3vw, 0.66rem);
  font-weight: 700;
  color: #7dd3fc;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode-meta {
  font-size: clamp(0.36rem, 0.32rem + 0.26vw, 0.56rem);
  line-height: 1.25;
  color: #cbd5e1;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-word;
}
#zoneP1Hand .hand-cards .player-hand-card-textmode-effects {
  font-size: clamp(0.34rem, 0.3rem + 0.24vw, 0.52rem);
  line-height: 1.25;
  color: #e2e8f0;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  word-break: break-word;
}
#zoneP1Hand .hand-cards .hand-card-peek-stack .hand-card-art-wrap {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  max-height: var(--hand-p1-art-h);
  margin: 0;
  border-radius: 10px 10px 0 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
#zoneP1Hand .hand-cards .hand-card-peek-stack .hand-card-art-wrap--foil {
  border-radius: 10px 10px 0 0;
  border: none;
  max-width: var(--hand-card-w);
  width: 100%;
  max-height: var(--hand-p1-art-h);
  height: auto;
  overflow: hidden;
}
#zoneP1Hand
  .hand-cards
  .hand-card-peek-stack
  .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo {
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.24);
}
/* Contador no canto superior direito da arte (.hand-card-peek--main); acima do holo foil / Universal Duo. */
#hand.hand-cards .hand-card-stack-badge,
#zoneP1Hand .hand-cards .hand-card-stack-badge {
  left: auto;
  top: 4px;
  right: 4px;
  bottom: auto;
  transform: none;
  z-index: 24;
  border: 2px solid #959595;
  box-sizing: border-box;
}
#zoneP1Hand .hand-cards .hand-card-peek-stack .hand-card-art {
  width: var(--hand-card-w);
  max-width: var(--hand-card-w);
  min-width: 0;
  display: block;
  aspect-ratio: 5 / 7;
  height: auto;
  max-height: var(--hand-p1-art-h);
  min-height: 0;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px 10px 0 0;
  border: none;
  box-sizing: border-box;
  vertical-align: top;
}
/* Faixa tipo/nome sob a arte, dentro da mesma “face” cortada. */
#zoneP1Hand .hand-cards .card-kind-badge {
  font-size: 0.48rem;
  margin: 1px 0 0;
  padding: 1px 4px;
  align-self: stretch;
  text-align: center;
  letter-spacing: 0.04em;
}
#zoneP1Hand .hand-cards .card-headline {
  margin: 0;
  padding: 0 3px 2px;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}
#zoneP1Hand .hand-cards .card-name {
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
}
#zoneP1Hand .hand-cards .card-points-big {
  font-size: 0.55rem;
}
#zoneP1Hand .hand-cards .card-meta-line,
#zoneP1Hand .hand-cards .card-effect-block {
  display: none;
}

/*
 * Brilho jogável: mesmo azul de antes (rgb 91,130,255), com pulso estilo Pokémon (opacidade + spill).
 */
@keyframes hand-playable-pkmn-glow-card {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.88),
      0 0 12px rgba(91, 130, 255, 0.44),
      0 0 26px rgba(91, 130, 255, 0.18),
      0 8px 18px rgba(0, 0, 0, 0.44);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.98),
      0 0 22px rgba(91, 130, 255, 0.62),
      0 0 42px rgba(91, 130, 255, 0.34),
      0 8px 20px rgba(0, 0, 0, 0.48);
  }
}
@keyframes hand-playable-pkmn-glow-card-foil {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.88),
      0 0 12px rgba(91, 130, 255, 0.44),
      0 0 26px rgba(91, 130, 255, 0.18),
      0 0 18px rgba(167, 139, 250, 0.14),
      0 8px 18px rgba(0, 0, 0, 0.44);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.98),
      0 0 22px rgba(91, 130, 255, 0.62),
      0 0 42px rgba(91, 130, 255, 0.34),
      0 0 22px rgba(167, 139, 250, 0.26),
      0 8px 20px rgba(0, 0, 0, 0.48);
  }
}
@keyframes hand-playable-pkmn-glow-stack-under {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.85),
      0 0 10px rgba(91, 130, 255, 0.38),
      0 0 22px rgba(91, 130, 255, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.96),
      0 0 18px rgba(91, 130, 255, 0.58),
      0 0 32px rgba(91, 130, 255, 0.3),
      0 4px 10px rgba(0, 0, 0, 0.42);
  }
}
@keyframes hand-playable-pkmn-glow-stack-main {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.88),
      0 0 12px rgba(91, 130, 255, 0.44),
      0 0 26px rgba(91, 130, 255, 0.18),
      0 6px 16px rgba(0, 0, 0, 0.48);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.98),
      0 0 22px rgba(91, 130, 255, 0.62),
      0 0 40px rgba(91, 130, 255, 0.34),
      0 6px 18px rgba(0, 0, 0, 0.52);
  }
}
@keyframes hand-playable-pkmn-glow-stack-main-foil {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.88),
      0 0 12px rgba(91, 130, 255, 0.44),
      0 0 26px rgba(91, 130, 255, 0.18),
      0 0 16px rgba(167, 139, 250, 0.16),
      0 6px 16px rgba(0, 0, 0, 0.48);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.98),
      0 0 22px rgba(91, 130, 255, 0.62),
      0 0 40px rgba(91, 130, 255, 0.34),
      0 0 22px rgba(167, 139, 250, 0.26),
      0 6px 18px rgba(0, 0, 0, 0.52);
  }
}

#zoneP1Hand .hand-cards .card.card--hand-playable {
  overflow: visible;
  z-index: 2;
  border-radius: 10px 10px 9px 9px;
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-full-art {
  border-radius: 10px;
}
/* Carta solta jogável: animação no envelope .card */
#zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating):not(.card--foil) {
  animation: hand-playable-pkmn-glow-card 2.65s ease-in-out infinite;
  will-change: box-shadow;
}
#zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating).card--foil {
  animation: hand-playable-pkmn-glow-card-foil 2.65s ease-in-out infinite;
  will-change: box-shadow;
}

/* Pilha jogável: sem envelope no .card; glow animado em cada face. */
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-stack {
  box-shadow: none;
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-stack::before {
  display: none;
}
#zoneP1Hand
  .hand-cards
  .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating)
  .hand-card-peek--stack-under {
  animation: hand-playable-pkmn-glow-stack-under 2.65s ease-in-out infinite;
  will-change: box-shadow;
}
#zoneP1Hand
  .hand-cards
  .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating):not(.card--foil)
  .hand-card-peek--main {
  animation: hand-playable-pkmn-glow-stack-main 2.65s ease-in-out infinite;
  will-change: box-shadow;
}
#zoneP1Hand
  .hand-cards
  .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating).card--foil
  .hand-card-peek--main {
  animation: hand-playable-pkmn-glow-stack-main-foil 2.65s ease-in-out infinite;
  will-change: box-shadow;
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-stack.card--hand-full-art .hand-card-peek--stack-under,
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-stack.card--hand-full-art .hand-card-peek--main {
  border-radius: 10px;
}

/* Brilho jogável só depois do voo deck→mão: durante `hand-card-peek--draw-in` usa sombras neutras. */
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-draw-animating {
  border-radius: 0;
  box-shadow: none;
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-draw-animating.card--hand-full-art {
  border-radius: 0;
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-draw-animating.card--hand-stack .hand-card-peek--stack-under {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-draw-animating.card--hand-stack .hand-card-peek--main {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48);
}
#zoneP1Hand .hand-cards .card.card--hand-playable.card--hand-draw-animating.card--hand-stack.card--foil .hand-card-peek--main {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  #zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating):not(.card--foil),
  #zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating).card--foil,
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating)
    .hand-card-peek--stack-under,
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating):not(.card--foil)
    .hand-card-peek--main,
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating).card--foil
    .hand-card-peek--main {
    animation: none !important;
    will-change: auto;
  }
  #zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating):not(.card--foil) {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.92),
      0 0 12px rgba(91, 130, 255, 0.5),
      0 0 28px rgba(91, 130, 255, 0.2),
      0 8px 18px rgba(0, 0, 0, 0.45);
  }
  #zoneP1Hand .hand-cards .card.card--hand-playable:not(.card--hand-stack):not(.card--hand-draw-animating).card--foil {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.92),
      0 0 12px rgba(91, 130, 255, 0.5),
      0 0 28px rgba(91, 130, 255, 0.2),
      0 0 18px rgba(167, 139, 250, 0.175),
      0 8px 18px rgba(0, 0, 0, 0.45);
  }
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating)
    .hand-card-peek--stack-under {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.92),
      0 0 12px rgba(91, 130, 255, 0.5),
      0 0 28px rgba(91, 130, 255, 0.2),
      0 4px 10px rgba(0, 0, 0, 0.4);
  }
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating):not(.card--foil)
    .hand-card-peek--main {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.92),
      0 0 12px rgba(91, 130, 255, 0.5),
      0 0 28px rgba(91, 130, 255, 0.2),
      0 6px 16px rgba(0, 0, 0, 0.48);
  }
  #zoneP1Hand
    .hand-cards
    .card.card--hand-playable.card--hand-stack:not(.card--hand-draw-animating).card--foil
    .hand-card-peek--main {
    box-shadow:
      0 0 0 1px rgba(91, 130, 255, 0.92),
      0 0 12px rgba(91, 130, 255, 0.5),
      0 0 28px rgba(91, 130, 255, 0.2),
      0 0 18px rgba(167, 139, 250, 0.175),
      0 6px 16px rgba(0, 0, 0, 0.48);
  }
}

#zoneP2Hand.zone--playmat-overlay.cell-hand .hand-cards--opponent-back {
  flex: 0 1 auto;
  flex-shrink: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  gap: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  max-height: var(--hand-opp-strip-h);
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#zoneP2Hand .hand-cards--opponent-back::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#zoneP2Hand .hand-cards--opponent-back .hand-card--opponent-back {
  flex: 0 0 auto;
  flex-shrink: 0;
  position: relative;
  width: auto;
  min-width: 0;
  margin-left: calc(-1 * var(--hand-opp-overlap));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  padding: 0;
  background: transparent;
  border: none;
  transition: transform 0.15s ease, filter 0.15s ease, z-index 0s;
}
#zoneP2Hand .hand-cards--opponent-back .hand-card--opponent-back:hover {
  /* Movimento invertido face ao anterior; bloco já está a 180°. */
  transform: translateY(-5px);
  z-index: var(--z-hand-card-hover);
  filter: brightness(1.06);
}
#zoneP2Hand .hand-cards--opponent-back .hand-card--opponent-back:first-child {
  margin-left: 0;
}
#zoneP2Hand .hand-cards--opponent-back .hand-card-peek--opponent {
  width: var(--hand-opp-w);
  height: auto;
  overflow: visible;
  border-radius: 8px 8px 0 0;
  line-height: 0;
  display: block;
}
#zoneP2Hand .hand-cards--opponent-back .hand-card-inner-opponent {
  /* Rotação do verso já vem do bloco (#zoneP2Hand); evita 360° com o pai. */
  transform: none;
  width: var(--hand-opp-w);
  flex-shrink: 0;
  display: block;
}
#zoneP2Hand .hand-cards--opponent-back .hand-card-art--opponent-back {
  display: block;
  width: var(--hand-opp-w);
  aspect-ratio: 5 / 7;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  border: 1px solid rgba(35, 45, 65, 0.95);
  background: #0f172a;
}
.hand-card-stack-badge {
  position: absolute;
  right: 5px;
  top: 5px;
  left: auto;
  transform: none;
  opacity: 1;
  min-width: 1.2rem;
  min-height: 1.2rem;
  height: 1.2rem;
  padding: 0 5px;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  z-index: 9;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.playmat-ui-layer .zone-judge-shared,
.playmat-ui-layer .zone-arena-shared {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.playmat-ui-layer .zone-judge-shared .zone-cards,
.playmat-ui-layer .zone-arena-shared .zone-cards {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.playmat-ui-layer .zone-judge-shared .mini-card,
.playmat-ui-layer .zone-arena-shared .mini-card {
  max-width: 100%;
  width: 100%;
  font-size: 0.68rem;
  padding: 4px 6px;
  line-height: 1.2;
}
.playmat-ui-layer .zone-judge-shared .mini-card-detail,
.playmat-ui-layer .zone-arena-shared .mini-card-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Caixa exterior = bbox (JS); moldura igual às outras zonas (mockup) */
.zone--playmat-overlay.cell-deck {
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border: 1px solid var(--playmat-zone-border);
  box-shadow: none;
  padding: 4px 5px 6px;
  overflow: hidden;
  box-sizing: border-box;
}
/* Contagem no .zone-label (como a pile); sem .deck-zone-count que cobria o título. */
.playmat-ui-layer .zone--playmat-overlay.cell-deck.zone--label-outside {
  overflow: visible;
}
/* Trapézio: clip em .deck-zone-bg e .deck-zone-visual (JS); wrapper sem clip para o contorno não ser truncado. */
.zone--playmat-overlay.cell-deck .deck-zone-clip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  box-sizing: border-box;
  pointer-events: auto;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}
.zone--playmat-overlay.cell-deck .deck-zone-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* Filtro no pai: filho tem clip-path — a sombra contorna o trapézio sem ser cortada. */
  filter: drop-shadow(0 0 0.55px rgba(72, 74, 82, 0.95))
    drop-shadow(0 0 0.55px rgba(72, 74, 82, 0.95))
    drop-shadow(0 0 1.25px rgba(100, 102, 110, 0.4));
}
.zone--playmat-overlay.cell-deck .deck-zone-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* Mesma leitura que Style/Prep: uma só camada 0,78 vem da .cell-deck; evita “dobrar” opacidade. */
  background: transparent;
}
/* Deck jogador: moldura neutra (sem glow azul). */
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-zone-bg-wrap {
  filter: drop-shadow(0 0 0.65px rgba(72, 74, 82, 1))
    drop-shadow(0 0 0.65px rgba(72, 74, 82, 1))
    drop-shadow(0 0 1.4px rgba(100, 102, 110, 0.45));
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-zone-bg {
  /* Opacidade mínima para o filtro contornar o trapézio; imperceptível como “fundo”. */
  background: rgba(255, 255, 255, 0.02);
}
.zone--playmat-overlay.cell-deck .deck-zone-visual {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 6px;
  box-sizing: border-box;
  overflow: visible;
}
.zone--playmat-overlay.cell-deck .deck-single-card {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
/* Maço 2D: espessura --deck-stack-scale (0…1) vem do JS conforme deckSize; folhas para ← e ↓ (estilo “mesa”). */
.zone--playmat-overlay.cell-deck .deck-stack-3d {
  --deck-stack-scale: 0;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Baralhar deck — referência Pokémon TCG Live (disparado pelo log: mulligan, shuffle_deck, etc.). */
@keyframes deck-zone-shuffle-wiggle {
  0%,
  100% {
    transform: rotate(0deg) translateY(0) translateX(0) scale(1);
  }
  8% {
    transform: rotate(-7deg) translateY(3px) translateX(-2px) scale(0.96);
  }
  17% {
    transform: rotate(6deg) translateY(-4px) translateX(3px) scale(0.98);
  }
  26% {
    transform: rotate(-5deg) translateY(2px) translateX(-3px);
  }
  35% {
    transform: rotate(4deg) translateY(-3px) translateX(2px);
  }
  44% {
    transform: rotate(-4deg) translateY(2px);
  }
  53% {
    transform: rotate(3deg) translateY(-2px);
  }
  62% {
    transform: rotate(-2deg) translateY(1px);
  }
  71% {
    transform: rotate(1deg);
  }
  80%,
  88% {
    transform: rotate(0deg);
  }
}
.zone--playmat-overlay.cell-deck .deck-zone-visual.deck-zone-visual--shuffling .deck-stack-3d {
  animation: deck-zone-shuffle-wiggle 0.88s cubic-bezier(0.33, 0.06, 0.22, 1) both;
  transform-origin: 50% 88%;
  will-change: transform;
}
.zone--playmat-overlay.cell-deck .deck-zone-visual.deck-zone-visual--shuffling .deck-stack-sheet {
  transition: opacity 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .zone--playmat-overlay.cell-deck .deck-zone-visual.deck-zone-visual--shuffling .deck-stack-3d {
    animation: deck-zone-shuffle-wiggle 0.38s ease both;
  }
}

.zone--playmat-overlay.cell-deck .deck-stack-sheet {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
  background: linear-gradient(
    145deg,
    rgba(52, 54, 60, 0.98) 0%,
    rgba(34, 36, 42, 0.99) 45%,
    rgba(18, 18, 22, 1) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}
.zone--playmat-overlay.cell-deck .deck-stack-sheet:nth-child(1) {
  transform: translate(
    calc(-1px * var(--deck-stack-scale, 0)),
    calc(1.5px * var(--deck-stack-scale, 0))
  );
  z-index: -4;
  opacity: calc(0.2 + 0.73 * var(--deck-stack-scale, 0));
}
.zone--playmat-overlay.cell-deck .deck-stack-sheet:nth-child(2) {
  transform: translate(
    calc(-2.6px * var(--deck-stack-scale, 0)),
    calc(3.6px * var(--deck-stack-scale, 0))
  );
  z-index: -3;
  opacity: calc(0.18 + 0.7 * var(--deck-stack-scale, 0));
}
.zone--playmat-overlay.cell-deck .deck-stack-sheet:nth-child(3) {
  transform: translate(
    calc(-4.2px * var(--deck-stack-scale, 0)),
    calc(5.8px * var(--deck-stack-scale, 0))
  );
  z-index: -2;
  opacity: calc(0.16 + 0.66 * var(--deck-stack-scale, 0));
}
.zone--playmat-overlay.cell-deck .deck-stack-sheet:nth-child(4) {
  transform: translate(
    calc(-5.8px * var(--deck-stack-scale, 0)),
    calc(8px * var(--deck-stack-scale, 0))
  );
  z-index: -1;
  opacity: calc(0.14 + 0.62 * var(--deck-stack-scale, 0));
}
.zone--playmat-overlay.cell-deck .deck-stack-edge {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  opacity: calc(0.25 + 0.75 * min(1, var(--deck-stack-scale, 0) * 1.2));
}
.zone--playmat-overlay.cell-deck .deck-stack-edge--right {
  top: 2px;
  right: calc(-1px - 3px * var(--deck-stack-scale, 0));
  width: calc(1px + 4.5px * var(--deck-stack-scale, 0));
  height: calc(100% - 4px - 2px * var(--deck-stack-scale, 0));
  z-index: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #141418 0%, #2e3238 38%, #656b75 100%);
  box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.45);
}
.zone--playmat-overlay.cell-deck .deck-stack-edge--bottom {
  left: calc(2px - 1px * var(--deck-stack-scale, 0));
  bottom: calc(-1px - 3px * var(--deck-stack-scale, 0));
  width: calc(100% - 6px - 3px * var(--deck-stack-scale, 0));
  height: calc(1px + 3.5px * var(--deck-stack-scale, 0));
  z-index: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #8a9099 0%, #3a3d44 42%, #121214 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.zone--playmat-overlay.cell-deck .deck-stack-top {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.zone--playmat-overlay.cell-deck .deck-stack-count-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 1.45rem;
  padding: 2px 6px;
  font-size: clamp(0.52rem, 0.42rem + 0.35vw, 0.72rem);
  font-weight: 800;
  line-height: 1.1;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-align: center;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(248, 250, 252, 0.88);
  border-radius: 5px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 4;
  pointer-events: none;
}
.zone--playmat-overlay.cell-deck .deck-zone--empty .deck-stack-count-badge {
  opacity: 0.5;
}
.zone--playmat-overlay.cell-deck .deck-zone--empty .deck-stack-sheet,
.zone--playmat-overlay.cell-deck .deck-zone--empty .deck-stack-edge {
  opacity: 0.38;
}
.zone--playmat-overlay.cell-deck .deck-card-back-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  border: 1px solid rgba(62, 64, 70, 0.95);
  background: #2e3036;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.zone--playmat-overlay.cell-deck .deck-zone--empty .deck-card-back-img {
  opacity: 0.42;
}
.zone--playmat-overlay.cell-deck .deck-zone-count {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  margin: 0;
  padding: 2px 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #f8fafc;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
}

#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-zone-visual {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-single-card {
  flex: none;
  /* 5:7 = largura×altura; largura guia o tamanho para ficar mais “larga” na zona. */
  width: 95%;
  max-width: 100%;
  aspect-ratio: 5 / 7;
  height: auto;
  max-height: 95%;
  margin: 0;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  min-width: 0;
  min-height: 0;
  border-radius: 2px;
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-stack-sheet,
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-stack-top {
  border-radius: 2px;
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-stack-edge--right {
  border-radius: 0 2px 2px 0;
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-stack-edge--bottom {
  border-radius: 0 0 2px 2px;
}
#zoneP1Deck.zone--playmat-overlay.cell-deck .deck-card-back-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
}
.zone--playmat-overlay.cell-prep .zone-cards {
  max-height: 100%;
  overflow: hidden;
}
.zone--playmat-overlay.cell-prep .zone-cards .mini-card.zone-slot-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.zone--playmat-overlay.cell-prep .zone-cards .mini-card.zone-slot-card .zone-slot-card-art {
  width: auto;
  max-width: 100%;
  max-height: min(100%, 118px);
  aspect-ratio: 5 / 7;
  object-fit: contain;
}
.zone--playmat-overlay.cell-prep .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded .zone-slot-card-text {
  display: none;
}
.zone--playmat-overlay.cell-style .zone-cards,
.zone--playmat-overlay.cell-item .zone-cards,
.zone--playmat-overlay.cell-tricker .zone-cards {
  max-height: 100%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.playmat-ui-layer .zone.cell-style.zone--playmat-overlay .zone-cards {
  flex: 1 1 auto;
  min-height: 0;
  --style-zone-card-max-h: min(160px, 100%);
}
.playmat-ui-layer .zone.cell-item.zone--playmat-overlay .zone-cards {
  --item-zone-card-max-h: min(160px, 100%);
}

/*
 * Preparation (player + opponent): tricks com .webp — igual a .zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded
 * (área útil da célula menos 2px; arte com object-fit como na pile).
 */
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded {
  min-height: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  flex: 1 1 auto;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded .zone-slot-card-art,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded .zone-slot-card-art {
  width: 100%;
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: unset;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
}
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded.clickable-prep,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded.clickable-prep {
  box-shadow: none;
}
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded.clickable-prep:hover,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card.zone-slot-card.zone-slot-card--art-loaded.clickable-prep:hover {
  background: transparent;
  filter: brightness(1.08);
}
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card .board-zone-card-art-wrap.hand-card-art-wrap--foil,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card .board-zone-card-art-wrap.hand-card-art-wrap--foil {
  border: none;
  box-shadow: none;
}
#zoneP1Prep.zone--playmat-overlay .zone-cards .mini-card .hand-card-art-wrap--foil-universal-duo,
#zoneP2Prep.zone--playmat-overlay .zone-cards .mini-card .hand-card-art-wrap--foil-universal-duo {
  box-shadow: none;
}
.playmat-ui-layer .zone.cell-style.zone--playmat-overlay {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.zone--playmat-overlay.cell-tricker {
  padding: 2px 3px;
  /* Escada de atributos (translateY negativo) sai da caixa; .zone--playmat-overlay tem overflow:hidden por defeito. */
  overflow: visible;
}
.zone--playmat-overlay.cell-tricker .zone-cards {
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: visible;
}
.zone--playmat-overlay.cell-pile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 4px 5px;
  overflow: hidden;
  background: var(--playmat-zone-bg);
  background: var(--playmat-surface-soft-bg);
  border: 1px solid var(--playmat-zone-border);
}
.zone--playmat-overlay.cell-pile .pile-zone-cards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  /* Inset 1px: carta com .webp usa calc(100% - 2px) face à área útil */
  padding: 1px;
  box-sizing: border-box;
  /* Igual ao floor-row: altura máx. da cara da carta, limitada à caixa da zona */
  --pile-zone-card-max-h: min(160px, 100%);
}
/* Só a carta do topo do descarte (fillPileZone); corpo = floor-mini-card */
.pile-card-layer--top-only {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.zone--playmat-overlay .power-control-summary {
  font-size: 0.68rem;
}

/* Hover comum em cartas do tabuleiro (sem animações pesadas) */
.playmat-ui-layer .mini-card.zone-slot-card {
  transition: transform 0.15s ease, filter 0.15s ease, z-index 0s;
}
.playmat-ui-layer .mini-card.zone-slot-card:hover {
  transform: translateY(-4px) scale(1.05);
  z-index: 26;
  filter: brightness(1.06);
}
.playmat-ui-layer .cell-floor .floor-mini-card,
.playmat-ui-layer .cell-pile .pile-zone-cards .floor-mini-card {
  transition: transform 0.15s ease, filter 0.15s ease, z-index 0s;
}
.playmat-ui-layer .cell-floor .floor-mini-card:hover,
.playmat-ui-layer .cell-pile .pile-zone-cards .floor-mini-card:hover {
  /* Sem translate/scale — mantém a carta dentro da bbox da pile */
  transform: none;
  z-index: 26;
  filter: brightness(1.08);
}
.playmat-ui-layer .cell-floor .floor-mini-card--floor-transition:hover {
  filter: brightness(1.1) saturate(1.04);
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(96, 165, 250, 0.22);
  z-index: 28;
}
.playmat-ui-layer .zone.cell-style.zone--playmat-overlay .mini-card.zone-slot-card:hover {
  transform: none;
  filter: brightness(1.08);
}
.playmat-ui-layer .cell-tricker .tricker-zone-stack {
  transition: transform 0.15s ease, filter 0.15s ease, z-index 0s;
}
.playmat-ui-layer .cell-tricker .tricker-zone-stack:hover {
  /* Escala: +5% × 0,75² ≈ +2,81% (duas reduções de 25% sobre o incremento). translateY mantém-se. */
  transform: translateY(-3px) scale(1.028125);
  z-index: 24;
  filter: brightness(1.06);
}

/* Bloco de jogador (mesa com dimensões maiores) */
.player-block {
  border-radius: 10px;
  padding: 10px 12px;
  border: 2px solid;
  flex-shrink: 0;
}
.player-opponent {
  background: #16213e;
  border-color: #6c3483;
  margin-bottom: 0;
}
.player-self {
  background: #16213e;
  border-color: #1e5f74;
  margin-top: 0;
}
.player-header {
  font-size: 1rem;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #333;
}

.player-resources {
  font-size: 0.9rem;
  color: #b8d4e6;
  margin-bottom: 6px;
}

.player-states {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.state-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  margin-right: 6px;
  margin-bottom: 4px;
  font-weight: 600;
  color: #fde68a;
  cursor: help;
}

.tricker-abilities {
  font-size: 0.56rem;
  line-height: 1.3;
  color: #b8d4e6;
  margin-bottom: 5px;
  padding: 4px 5px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
  word-break: break-word;
}
.tricker-abilities-compact {
  font-size: 0.53rem;
  max-height: 2.7em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tricker-ability-label {
  font-weight: 600;
  color: #7dd3fc;
}

.player-zones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.zone-row-top .zone { flex: 1; min-width: 0; }
.zone-row-bottom .zone { flex: 1; min-width: 0; }

.zone-row-mid {
  display: grid;
  grid-template-columns: 140px 1fr 100px;
  gap: 10px;
  min-height: 150px;
}
.zone-col-left, .zone-col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.zone-col-left .zone, .zone-col-right .zone {
  flex: 1;
  min-height: 64px;
}
/* PILE compacto; DECK precisa de altura para verso + contador sem transbordar */
.zone-col-right .zone.cell-pile {
  flex: 0 0 auto;
  min-height: 52px;
}
.zone-col-right .zone.cell-deck {
  flex: 1 1 auto;
  min-height: 118px;
}

/* Dar mais altura à STYLE quando houver espaço */
.zone.cell-style {
  flex: 2;
  min-height: 96px;
}

.zone.cell-floor {
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

/* Pontos à esquerda da linha + cartas à direita (mockup) */
.floor-unified .floor-zone.cell-floor {
  display: grid;
  grid-template-columns: minmax(2.5rem, 3.4rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  justify-items: start;
  gap: 4px 10px;
  min-height: 0;
  padding-left: 4px;
  padding-right: 2px;
  /* Altura real da metade do floor → limitar cartas quando há muitas tricks/transitions */
  container-type: size;
  container-name: floor-half;
}
.floor-unified .floor-zone.cell-floor > .zone-cards {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  justify-self: start;
  align-self: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.floor-unified .floor-zone.cell-floor > .zone-score {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  justify-self: center;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 700;
  color: #3ddc84;
  text-shadow: 0 0 10px rgba(46, 204, 113, 0.35);
}

/*
 * Floor: filas horizontais (wrap). Ordem DOM = ordem de jogada: enche 1.ª fila → continua em baixo.
 * align-content: flex-end mantém as filas encostadas à “base” da zona.
 */
.zone.cell-floor .zone-cards.floor-row {
  flex: 0 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: flex-start;
  gap: clamp(5px, 1vh, 12px) calc(30px + 10px);
  width: 100%;
  max-width: 100%;
  padding-top: 30px;
  padding-right: 8px;
  box-sizing: border-box;
  --floor-card-max-h: 160px;
  --floor-card-max-w: calc(160px * 5 / 7);
  --floor-t-shift-x: min(22%, 32px);
  --floor-t-shift-y: -28px;
  --floor-t-stack-step: 3px;
}

/* Metade do #floorUnified: orçamento vertical para até 2 filas (evita cortar na altura da meia-zona). */
.floor-unified .floor-zone.cell-floor > .zone-cards.floor-row {
  --floor-card-max-h: min(160px, max(46px, calc((100cqh - 58px) / 2)));
  --floor-card-max-w: calc(var(--floor-card-max-h) * 5 / 7);
  --floor-t-shift-y: clamp(-28px, calc(var(--floor-card-max-h) * -0.175), -8px);
  --floor-t-shift-x: min(32px, max(12px, calc(var(--floor-card-max-w) * 0.28)));
  padding-top: min(30px, max(6px, calc(100cqh * 0.09)));
  gap: clamp(5px, 1.2cqh, 12px) calc(10px + clamp(6px, 2.6cqw, 30px));
}

.zone.cell-floor .zone-cards:not(.floor-row) {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* Stack: largura fixa máx. 5:7 @ 160px; encosta à esquerda na fila (gap horizontal +10px vs base). */
.floor-play-stack {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-end;
  width: min(100%, var(--floor-card-max-w, calc(160px * 5 / 7)));
  max-width: min(100%, var(--floor-card-max-w, calc(160px * 5 / 7)));
  min-width: 0;
  padding-right: 0;
  margin-right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.floor-unified .floor-zone.cell-floor .floor-play-stack {
  flex: 0 1 auto;
  width: var(--floor-card-max-w, calc(160px * 5 / 7));
  max-width: var(--floor-card-max-w, calc(160px * 5 / 7));
  min-width: 0;
}

.floor-play-stack__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.floor-play-stack__transition-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: calc(2 + var(--floor-trans-layer-i, 0));
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  transform: translate(
    calc(var(--floor-t-shift-x) + var(--floor-t-stack-step) * var(--floor-trans-layer-i, 0)),
    calc(var(--floor-t-shift-y) - var(--floor-t-stack-step) * var(--floor-trans-layer-i, 0))
  );
}

/* auto: permite hover/brilho; área fora da carta continua a penetrar (__back tem pointer-events: none). */
.floor-play-stack__transition-layer .floor-mini-card {
  pointer-events: auto;
}

.floor-play-stack__front {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  aspect-ratio: 5 / 7;
  max-height: var(--floor-card-max-h, 160px);
}

/* Reserva altura quando só há Transition(s) (sem Trick) — largura explícita (evita colapso com fit-content) */
.floor-play-stack__front-spacer {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  flex-shrink: 1;
  pointer-events: none;
  visibility: hidden;
}

/*
 * Floor: mesma silhueta 5:7 com ou sem .webp (mockup Gainer Flash / Tak Full).
 */
.zone.cell-floor .floor-mini-card,
.zone.cell-pile .pile-zone-cards .floor-mini-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(4px, 0.35vw + 3px, 8px) clamp(5px, 0.45vw + 4px, 9px);
  justify-content: flex-start;
  vertical-align: top;
  background: linear-gradient(165deg, #172554 0%, #0f172a 48%, #0c1220 100%);
  border: 1px solid rgba(147, 197, 253, 0.5);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(30, 58, 138, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(59, 130, 246, 0.12);
  overflow: hidden;
}
/*
 * Pile: mesma lógica de tamanho que o floor (floor-play-stack / floor-mini-card):
 * 5:7 até 160px de altura, encolhe com min(..., 100%) à área útil — com ou sem .webp.
 */
.zone.cell-pile .pile-zone-cards .floor-mini-card {
  --pcmh: var(--pile-zone-card-max-h, min(160px, 100%));
  width: min(100%, calc(160px * 5 / 7), calc(var(--pcmh) * 5 / 7));
  max-width: 100%;
  height: var(--pcmh);
  max-height: min(160px, 100%);
  flex: 0 0 auto;
  min-height: 0;
  align-self: center;
  overflow: hidden;
}
.zone.cell-floor .floor-mini-card--floor-transition,
.zone.cell-pile .pile-zone-cards .floor-mini-card--floor-transition {
  filter: brightness(0.92) saturate(0.94);
  border-color: rgba(186, 230, 253, 0.4);
  box-shadow:
    0 0 0 1px rgba(30, 58, 138, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.42),
    0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Arte da Transition no peek: priorizar topo + bordo direito da carta física (mockup Punch) */
.zone.cell-floor .floor-mini-card--floor-transition.floor-mini-card--art-loaded .floor-card-art,
.zone.cell-pile .pile-zone-cards .floor-mini-card--floor-transition.floor-mini-card--art-loaded .floor-card-art {
  object-fit: cover;
  object-position: 78% 16%;
}

.zone.cell-floor .floor-card-art,
.zone.cell-pile .pile-zone-cards .floor-card-art {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 5px;
  border: 1px solid rgba(248, 250, 252, 0.55);
  background: #111827;
  margin: 0;
}
.zone.cell-floor .floor-mini-card-name,
.zone.cell-pile .pile-zone-cards .floor-mini-card-name {
  display: block;
  width: 100%;
  font-size: clamp(0.48rem, 0.42rem + 0.35vw, 0.72rem);
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
  line-height: 1.15;
  flex-shrink: 0;
}
.zone.cell-floor .floor-mini-card-points,
.zone.cell-pile .pile-zone-cards .floor-mini-card-points {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 5px;
  font-size: clamp(0.44rem, 0.38rem + 0.3vw, 0.66rem);
  font-weight: 700;
  color: #7dd3fc;
  flex-shrink: 0;
}
.zone.cell-floor .floor-mini-card-detail,
.zone.cell-pile .pile-zone-cards .floor-mini-card-detail {
  width: 100%;
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
  font-size: clamp(0.38rem, 0.34rem + 0.28vw, 0.58rem);
  line-height: 1.28;
  color: #cbd5e1;
  text-align: left;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
}
.zone.cell-floor .floor-mini-card--art-loaded,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded {
  position: relative;
  padding: 0;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.38);
}

/* Token estilo contador Pokémon: bónus (points − basePoints) no canto superior direito quando há arte .webp */
.floor-mini-card-bonus-token {
  position: absolute;
  top: clamp(4px, 0.45vw + 2px, 9px);
  right: clamp(4px, 0.45vw + 2px, 9px);
  z-index: 8;
  min-width: 1.75em;
  min-height: 1.75em;
  padding: 0 0.3em;
  box-sizing: border-box;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(0.46rem, 0.4rem + 0.48vw, 0.78rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.zone.cell-floor .floor-mini-card--art-loaded .floor-mini-card-bonus-token,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-mini-card-bonus-token {
  display: flex;
}

.floor-mini-card-bonus-token--positive {
  background: linear-gradient(165deg, #4ade80 0%, #22c55e 40%, #16a34a 100%);
}

.floor-mini-card-bonus-token--negative {
  background: linear-gradient(165deg, #fca5a5 0%, #ef4444 45%, #b91c1c 100%);
}

/* Modo só texto: a linha de pontos já mostra base + bónus (tricks). Transitions: manter token (bónus de slot / extras). */
.floor-mini-card--text-mode:not(.floor-mini-card--floor-transition) .floor-mini-card-bonus-token {
  display: none !important;
}

.zone.cell-floor .floor-mini-card--floor-transition.floor-mini-card--text-mode,
.zone.cell-pile .pile-zone-cards .floor-mini-card--floor-transition.floor-mini-card--text-mode {
  position: relative;
}

.zone.cell-floor .floor-mini-card--floor-transition.floor-mini-card--text-mode .floor-mini-card-bonus-token,
.zone.cell-pile .pile-zone-cards .floor-mini-card--floor-transition.floor-mini-card--text-mode .floor-mini-card-bonus-token {
  display: flex !important;
}
.zone.cell-floor .floor-mini-card--floor-transition.floor-mini-card--art-loaded,
.zone.cell-pile .pile-zone-cards .floor-mini-card--floor-transition.floor-mini-card--art-loaded {
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.48),
    0 2px 8px rgba(0, 0, 0, 0.32);
}
.zone.cell-floor .floor-mini-card--art-loaded .floor-card-art,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-card-art {
  border: none;
  border-radius: 8px;
  background: transparent;
}
.zone.cell-floor .floor-mini-card--art-loaded .floor-mini-card-name,
.zone.cell-floor .floor-mini-card--art-loaded .floor-mini-card-detail,
.zone.cell-floor .floor-mini-card--art-loaded .floor-mini-card-points,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-mini-card-name,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-mini-card-detail,
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-mini-card-points {
  display: none;
}

/* Pile + imagem: preencher a área útil da zona menos 2px (1px de padding em cada lado). */
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded {
  min-height: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  flex: 1 1 auto;
  align-self: center;
}
.zone.cell-pile .pile-zone-cards .floor-mini-card--art-loaded .floor-card-art {
  width: 100%;
  height: 100%;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
}

/* Popover: lista completa do descarte — mesmo tema que .right-panel--sidebar-ref (logs) */
.pile-list-menu {
  position: fixed;
  z-index: 12000;
  min-width: 150px;
  max-width: min(240px, calc(100vw - 24px));
  max-height: min(60vh, 315px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 0 6px;
  margin: 0;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
  box-shadow:
    -8px 0 24px rgba(0, 0, 0, 0.5),
    0 14px 30px rgba(0, 0, 0, 0.55);
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
  font-size: 0.75rem;
  color: #f4f4f5;
}
.pile-list-menu[hidden] {
  display: none !important;
}
.pile-list-menu__title {
  padding: 0 12px 8px;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 6px;
}
.pile-list-menu__hint {
  padding: 0 12px 8px;
  font-size: 0.78rem;
  color: #a1a1aa;
  line-height: 1.45;
  font-weight: 500;
}
.pile-list-menu__list {
  list-style: none;
  margin: 0 8px;
  padding: 4px 4px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.pile-list-menu__list::-webkit-scrollbar {
  width: 6px;
}
.pile-list-menu__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}
.pile-list-menu__item {
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 4px;
  line-height: 1.55;
  word-break: break-word;
  color: #fafafa;
}
.pile-list-menu__item--top {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pile-list-menu__item--rest:hover {
  background: rgba(255, 255, 255, 0.06);
}
.pile-list-menu__item-meta {
  display: block;
  font-size: 0.72rem;
  color: #71717a;
  margin-top: 4px;
}

/* Texto no rect 5:7 até 160px (igual floor + carta com imagem na pile) */
.zone.cell-pile .pile-zone-cards .floor-mini-card-detail {
  -webkit-line-clamp: 8;
  flex: 1 1 auto;
  min-height: 0;
}

.zone {
  border: 1px solid #444;
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
  font-size: 0.95rem;
}

.power-control-summary {
  font-size: 0.95rem;
  font-weight: 600;
  color: #b8d4e6;
  letter-spacing: 0.02em;
}

.zone-label {
  color: #888;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.zone-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  overflow: visible;
  min-height: 0;
}

/* Zona TRICKER: arte da carta de rank (ou retrato legacy). Cabe na célula sem scroll. */
.tricker-zone-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Tricker: pilha tipo mão; faces attribute só visíveis com .tricker-attr-peek-stack--expanded (clique no Tricker). */
.tricker-zone-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}
.tricker-zone-stack-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.tricker-zone-stack-root--has-attributes {
  cursor: pointer;
}
.tricker-zone-stack-root--has-attributes:focus-visible {
  outline: 2px solid rgba(129, 169, 255, 0.85);
  outline-offset: 2px;
}

.tricker-attr-peek-stack {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  line-height: 0;
  overflow: visible;
  /* 25px: Tricker→1.ª peek = entre cada par de peeks. Sem padding-top expandido — só as peeks sobem (o Tricker não desce). */
  --tricker-attr-peek-gap: 25px;
}
.tricker-attr-peek-stack--has-attached:not(.tricker-attr-peek-stack--expanded) .hand-card-peek--stack-under {
  opacity: 0 !important;
  visibility: hidden;
  transform: translate(0, 10px) !important;
  box-shadow: none;
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease,
    transform 0.12s ease;
}
.tricker-attr-peek-stack--expanded .hand-card-peek--stack-under {
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    transform 0.15s ease;
}

.zone--playmat-overlay.cell-tricker .tricker-attr-peek-stack .hand-card-peek.hand-card-peek--stack-under {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 10px 10px 0 0;
  line-height: 0;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.zone--playmat-overlay.cell-tricker
  .tricker-attr-peek-stack--expanded
  .hand-card-peek.hand-card-peek--stack-under {
  z-index: calc(0 - var(--tricker-under-layer, 1));
  /* Alinhado à largura do Tricker. Y: camada u sobe u×gap (mesmo intervalo entre todas). */
  left: 0;
  right: 0;
  transform: translate(
    0,
    calc(-1 * var(--tricker-under-layer, 1) * var(--tricker-attr-peek-gap))
  );
  opacity: clamp(0.8, calc(0.96 - (var(--tricker-under-layer, 1) - 1) * 0.02), 0.96);
}
.zone--playmat-overlay.cell-tricker .tricker-attr-peek-stack .hand-card-peek--stack-under .hand-card-art {
  width: 100%;
  max-width: 100%;
  display: block;
  aspect-ratio: 5 / 7;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(55, 65, 90, 0.95);
  box-sizing: border-box;
  vertical-align: top;
}
.zone--playmat-overlay.cell-tricker .tricker-attr-peek-stack .hand-card-peek.hand-card-peek--placeholder {
  width: 100%;
  aspect-ratio: 5 / 7;
  max-height: 55%;
  min-height: 48px;
  background: #1e293b;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(55, 65, 90, 0.8);
  box-sizing: border-box;
}

/* Contador de pilha (mesma família P/C/U/UD): canto superior direito como na mão */
.zone--playmat-overlay.cell-tricker .tricker-attr-peek-stack .hand-card-stack-badge {
  top: 4px;
  right: 4px;
  left: auto;
  z-index: 24;
  border: 2px solid #959595;
  box-sizing: border-box;
}

.tricker-attr-peek-main {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.48);
}
.tricker-attr-peek-main .tricker-zone-stack {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-shadow: none;
}
.tricker-attr-peek-main--text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  background: rgba(15, 23, 42, 0.5);
}

.tricker-zone-front--text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}

/* Animação: atributo da mão até ao Tricker (overlay). */
.attribute-card-fly {
  position: fixed;
  z-index: 12400;
  pointer-events: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.52);
  transform: translate(0, 0) scale(1);
  opacity: 1;
  box-sizing: border-box;
  background: linear-gradient(145deg, #374151, #1f2937);
}
.attribute-card-fly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.tricker-portrait {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-position: center;
  border-radius: 8px;
  border: 1px solid #533483;
  background: #111827;
}
/* Arte da carta de rank: preenche altura da zona para máxima legibilidade. */
.tricker-portrait--rank {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 5 / 7;
  object-fit: contain;
}
/* Retrato / profile (assets/trickers): preencher a moldura sem barras pretas. */
.tricker-portrait--legacy {
  width: 96px;
  height: 96px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}
.tricker-rank-label {
  font-size: 0.8rem;
  line-height: 1.25;
  max-width: 100%;
  text-align: center;
}

/* Zona TRICKER: mesmo foil que na mão (gradiente animado / Universal Duo) */
.tricker-zone-stack .hand-card-art-wrap--foil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow: clip;
  border-radius: 8px;
  isolation: isolate;
  /* sem contain:paint — em alguns browsers cortava o border-radius do wrapper */
  contain: none;
  border: 1px solid rgba(210, 230, 255, 0.55);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.24);
  box-sizing: border-box;
  line-height: 0;
  font-size: 0;
}
.tricker-zone-stack .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo {
  border: none;
  box-shadow:
    0 0 0 1px rgba(210, 230, 255, 0.55),
    0 0 20px rgba(167, 139, 250, 0.24);
}
.tricker-zone-stack .hand-card-art-wrap--foil .tricker-portrait {
  position: relative;
  z-index: 1;
  display: block;
  border: none;
  border-radius: 8px;
  vertical-align: top;
  height: 100%;
  width: auto;
  max-height: 100%;
}
.tricker-zone-stack .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover::after {
  opacity: 0.395;
  animation-duration: 2.6s;
}
.tricker-zone-stack
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover::after {
  opacity: 0.295;
  animation-duration: 2.4s;
}
.tricker-zone-stack .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(220, 235, 255, 0.85),
    0 0 22px rgba(167, 139, 250, 0.25);
}
.tricker-zone-stack
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover {
  border-color: rgba(210, 225, 255, 0.75);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.21);
}

.zone-score {
  margin-top: auto;
  font-weight: 600;
  color: #3ddc84;
  font-size: 1rem;
}
.floor-unified .floor-zone.cell-floor > .zone-score {
  margin-top: 0;
}

/* Faixa partilhada JUDGE | ARENA */
.shared-strip {
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  background: #0d1b2a;
  border: 1px solid #533483;
  border-radius: 8px;
  margin: 8px 0;
}
.shared-strip .zone {
  flex: 1;
  min-height: 72px;
  max-height: 140px; /* Judge/Arena com mini-arte + texto */
  overflow: hidden;
}
.shared-strip .zone-judge-shared { flex: 1; }
.shared-strip .zone-arena-shared { flex: 1; }

/* Judge/Arena: compactar mini-cards para não aumentar a altura da faixa */
.shared-strip .zone-cards {
  overflow: hidden;
}
.shared-strip .mini-card {
  max-width: 100%;
  width: 100%;
  font-size: 0.8rem;
  padding: 5px 8px;
  line-height: 1.2;
}
.shared-strip .mini-card-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Mão integrada no bloco P1 */
.hand-strip {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #333;
}
.hand-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #aaa;
  display: block;
  margin-bottom: 8px;
}
.hand-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px; /* espaço para scrollbar horizontal */
}
/* Foil: .card--foil quando finish é "foil", foil: true, ou holo dinâmico "foil_v" (app.js). */
.hand-cards .card.card--foil {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(200, 220, 255, 0.65);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.2);
}

/* Não aplicar position:relative às camadas reverse holo — precisam de position:absolute (inset 0). */
.hand-cards .card.card--foil
  > *:not(.card-reverse-holo-shine):not(.card-reverse-holo-glare):not(.card-reverse-holo-lamp) {
  position: relative;
  z-index: 1;
}

/* Brilho na carta inteira (sem imagem carregada ou sem URLs de arte) */
.hand-cards .card.card--foil:not(.card--foil-on-art)::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.235;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 255, 255, 0.53) 42%,
    rgba(200, 235, 255, 0.71) 50%,
    rgba(255, 215, 255, 0.5) 58%,
    transparent 70%
  );
  background-size: 210% 210%;
  animation: card-foil-shimmer 3.8s ease-in-out infinite;
}

/* Com imagem: o foil vai só para a zona da arte (wrapper em app.js) */
.hand-cards .card.card--foil-on-art::after {
  display: none;
}

/*
 * Reverse holo (finish: reverse_holo) — holo estilo Foil V (grão, arco-íris, feixes, perspetiva)
 * Preview: tilt + ponteiro (JS). Mão/Tricker: mesmo holo sem inclinação — animação diagonal (table-rh-pointer-sweep).
 * Clip “buraco” (mão/preview detalhe) pode ser neutralizado com clip-path: none onde faz sentido.
 * --rh-foil-fit: escala do verso no shine (cover = igual à camada antiga; contain se quiseres logo inteiro sem crop).
 */
.card-art-hover-preview.card-art-hover-preview--reverse-holo .card-art-hover-preview__inner {
  --rh-foil: url("/assets/cards/card_back.webp");
  --rh-foil-fit: cover;
  --rh-hole-left: 8%;
  --rh-hole-top: 7%;
  --rh-hole-w: 84%;
  --rh-hole-h: 52%;
  --fv-x: 50%;
  --fv-y: 50%;
  --fv-xn: 0.5;
  --fv-yn: 0.5;
  --fv-rx: 0deg;
  --fv-ry: 0deg;
  --fv-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --fv-beam-wavy: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'a'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'256'%20y1%3D'256'%20x2%3D'364'%20y2%3D'256'%20gradientTransform%3D'rotate(20%20256%20256)'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'0.271'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.375'%20stop-color%3D'hsl(180%2C23%25%2C63%25)'%2F%3E%3Cstop%20offset%3D'0.479'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.879'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23131b3a'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'w'%20x%3D'-35%25'%20y%3D'-35%25'%20width%3D'170%25'%20height%3D'170%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.011%200.03'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'8.2'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23a)'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  transform: perspective(680px) rotateX(var(--fv-rx)) rotateY(var(--fv-ry));
  transform-style: preserve-3d;
}

:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil .hand-card-art-wrap--reverse-holo-art {
  --rh-foil: url("/assets/cards/card_back.webp");
  --rh-foil-fit: cover;
  --rh-hole-left: 8%;
  --rh-hole-top: 7%;
  --rh-hole-w: 84%;
  --rh-hole-h: 52%;
  --fv-x: 50%;
  --fv-y: 50%;
  --fv-xn: 0.5;
  --fv-yn: 0.5;
  --fv-rx: 0deg;
  --fv-ry: 0deg;
  --fv-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --fv-beam-wavy: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'a'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'256'%20y1%3D'256'%20x2%3D'364'%20y2%3D'256'%20gradientTransform%3D'rotate(20%20256%20256)'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'0.271'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.375'%20stop-color%3D'hsl(180%2C23%25%2C63%25)'%2F%3E%3Cstop%20offset%3D'0.479'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.879'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23131b3a'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'w'%20x%3D'-35%25'%20y%3D'-35%25'%20width%3D'170%25'%20height%3D'170%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.011%200.03'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'8.2'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23a)'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  z-index: 1;
  transform: perspective(680px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  animation: table-rh-pointer-sweep 24s linear infinite;
}

/* Zona Tricker: holo no rect da carta (wrapper da arte), não na stack — evita brilho só na “frame” à volta. */
.tricker-zone-stack.tricker-zone-stack--reverse-holo {
  position: relative;
  isolation: isolate;
}

.tricker-zone-stack.tricker-zone-stack--reverse-holo > .hand-card-art-wrap--tricker-reverse-holo-art {
  --rh-foil: url("/assets/cards/card_back.webp");
  --rh-foil-fit: cover;
  --rh-hole-left: 8%;
  --rh-hole-top: 7%;
  --rh-hole-w: 84%;
  --rh-hole-h: 52%;
  --fv-x: 50%;
  --fv-y: 50%;
  --fv-xn: 0.5;
  --fv-yn: 0.5;
  --fv-rx: 0deg;
  --fv-ry: 0deg;
  --fv-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --fv-beam-wavy: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'a'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'256'%20y1%3D'256'%20x2%3D'364'%20y2%3D'256'%20gradientTransform%3D'rotate(20%20256%20256)'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'0.271'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.375'%20stop-color%3D'hsl(180%2C23%25%2C63%25)'%2F%3E%3Cstop%20offset%3D'0.479'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.879'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23131b3a'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'w'%20x%3D'-35%25'%20y%3D'-35%25'%20width%3D'170%25'%20height%3D'170%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.011%200.03'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'8.2'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23a)'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  position: relative;
  z-index: 1;
  transform: perspective(680px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  animation: table-rh-pointer-sweep 24s linear infinite;
}

:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil .hand-card-art-wrap--reverse-holo-art > .hand-card-art {
  position: relative;
  z-index: 1;
}
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil .hand-card-art-wrap--reverse-holo-art > .card-reverse-holo-shine {
  z-index: 2;
}
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil .hand-card-art-wrap--reverse-holo-art > .card-reverse-holo-glare {
  z-index: 3;
}
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil .hand-card-art-wrap--reverse-holo-art > .card-reverse-holo-lamp {
  z-index: 4;
}

/* Mão / zonas: holo só no rect da arte (evita “anel” na área de texto e halo no contentor da carta). */
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil
  .hand-card-art-wrap--reverse-holo-art
  .card-reverse-holo-shine,
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil
  .hand-card-art-wrap--reverse-holo-art
  .card-reverse-holo-glare,
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil
  .hand-card-art-wrap--reverse-holo-art
  .card-reverse-holo-glare::after,
:is(.hand-cards .card, .playmat-ui-layer .mini-card).card--reverse-holo.card--foil
  .hand-card-art-wrap--reverse-holo-art
  .card-reverse-holo-lamp {
  clip-path: none;
}
.hand-cards .card.card--reverse-holo.card--foil
  > *:not(.hand-card-art-wrap--reverse-holo-art):not(.card-reverse-holo-shine):not(.card-reverse-holo-glare):not(
    .card-reverse-holo-lamp
  ) {
  z-index: 5;
}
.playmat-ui-layer .mini-card.card--reverse-holo.card--foil
  > *:not(.hand-card-art-wrap--reverse-holo-art):not(.card-reverse-holo-shine):not(.card-reverse-holo-glare):not(
    .card-reverse-holo-lamp
  ) {
  z-index: 5;
}

.tricker-zone-stack.tricker-zone-stack--reverse-holo > .tricker-rank-label {
  position: relative;
  z-index: 5;
}

.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art > .tricker-portrait {
  position: relative;
  z-index: 1;
}
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art > .card-reverse-holo-shine {
  z-index: 2;
}
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art > .card-reverse-holo-glare {
  z-index: 3;
}
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art > .card-reverse-holo-lamp {
  z-index: 4;
}

/* Tricker: holo em toda a face da carta (sem buraco “moldura” que desviava o brilho para a frame da zona). */
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art .card-reverse-holo-shine,
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art .card-reverse-holo-glare,
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art .card-reverse-holo-glare::after,
.tricker-zone-stack.tricker-zone-stack--reverse-holo .hand-card-art-wrap--tricker-reverse-holo-art .card-reverse-holo-lamp {
  clip-path: none;
}

/* Recorte: moldura visível, ilustração transparente (evenodd). */
.card-reverse-holo-shine,
.card-reverse-holo-glare,
.card-reverse-holo-glare::after,
.card-reverse-holo-lamp {
  clip-path: polygon(
    evenodd,
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 0%,
    var(--rh-hole-left) var(--rh-hole-top),
    calc(var(--rh-hole-left) + var(--rh-hole-w)) var(--rh-hole-top),
    calc(var(--rh-hole-left) + var(--rh-hole-w)) calc(var(--rh-hole-top) + var(--rh-hole-h)),
    var(--rh-hole-left) calc(var(--rh-hole-top) + var(--rh-hole-h)),
    var(--rh-hole-left) var(--rh-hole-top)
  );
}

/* Preview ao pairar: arte em full-bleed — sem clip (senão o shine ficava invisível). Holo sobre a carta inteira. */
.card-art-hover-preview__inner.card-art-hover-preview__inner--rh-fullbleed {
  isolation: auto;
}
.card-art-hover-preview__inner.card-art-hover-preview__inner--rh-fullbleed .card-reverse-holo-shine,
.card-art-hover-preview__inner.card-art-hover-preview__inner--rh-fullbleed .card-reverse-holo-glare,
.card-art-hover-preview__inner.card-art-hover-preview__inner--rh-fullbleed .card-reverse-holo-glare::after,
.card-art-hover-preview__inner.card-art-hover-preview__inner--rh-fullbleed .card-reverse-holo-lamp {
  clip-path: none;
}

/* Camada principal: Foil V + textura card_back por baixo (pilha única — o símbolo precisa dos blend-modes com o verso). */
.card-reverse-holo-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: clamp(0.52, calc(1.02 - 0.48 * var(--pointer-from-center, 0.35)), 0.92);
  animation: rh-shine-ambient 18s ease-in-out infinite alternate;
  background-image: var(--fv-grain),
    repeating-linear-gradient(
      0deg,
      hsl(2, 70%, 73%) 5%,
      hsl(53, 70%, 69%) 10%,
      hsl(93, 70%, 69%) 15%,
      hsl(176, 70%, 76%) 20%,
      hsl(228, 70%, 74%) 25%,
      hsl(283, 70%, 73%) 30%,
      hsl(2, 70%, 73%) 35%
    ),
    var(--fv-beam-wavy),
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.057) 12%,
      hsla(0, 0%, 0%, 0.085) 20%,
      hsla(0, 0%, 0%, 0.142) 120%
    ),
    radial-gradient(
      ellipse 78% 72% at var(--fv-x) var(--fv-y),
      hsla(48, 100%, 100%, 0.45) 0%,
      hsla(210, 90%, 98%, 0.18) 22%,
      hsla(220, 70%, 96%, 0.06) 42%,
      hsla(0, 0%, 100%, 0) 65%
    ),
    radial-gradient(
      circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(0, 0%, 100%, 0.35) 0%,
      hsla(0, 0%, 0%, 0.4) 45%,
      hsla(0, 0%, 100%, 0.2) 75%
    ),
    linear-gradient(
      -45deg,
      hsla(0, 0%, 0%, 0.55) 12%,
      hsla(0, 0%, 100%, 0.45) 50%,
      hsla(0, 0%, 0%, 0.55) 88%
    ),
    var(--rh-foil);
  background-blend-mode: screen, hue, hard-light, hard-light, screen, soft-light, soft-light, difference, normal;
  background-size: 1100px 100%, 200% 700%, 300% 100%, 300% 100%, 200% 100%, 200% 200%, 120% 120%, 200% 200%,
    var(--rh-foil-fit, cover);
  background-position: center, 0% var(--fv-y), calc(100% - var(--fv-x)) calc(100% - var(--fv-y)), var(--fv-x) var(--fv-y),
    var(--fv-x) var(--fv-y), 50% 50%, center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  filter: brightness(0.84) contrast(2.15) saturate(0.62);
}

@keyframes rh-shine-ambient {
  0%,
  100% {
    filter: brightness(0.82) contrast(2.05) saturate(0.58);
  }
  50% {
    filter: brightness(0.9) contrast(2.28) saturate(0.68);
  }
}

.playmat-ui-layer .hand-card-art-wrap--reverse-holo-art .card-reverse-holo-shine,
.playmat-ui-layer .hand-card-art-wrap--tricker-reverse-holo-art .card-reverse-holo-shine {
  background-image: var(--fv-grain),
    repeating-linear-gradient(
      106deg,
      transparent 0%,
      hsla(168, 38%, 52%, 0.1) 11%,
      hsla(182, 46%, 58%, 0.22) 26%,
      hsla(200, 36%, 56%, 0.09) 38%,
      hsla(272, 30%, 56%, 0.15) 50%,
      hsla(174, 44%, 56%, 0.13) 64%,
      transparent 82%
    ),
    var(--fv-beam-wavy),
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.045) 12%,
      hsla(0, 0%, 0%, 0.07) 20%,
      hsla(0, 0%, 0%, 0.11) 120%
    ),
    radial-gradient(
      ellipse 80% 74% at var(--fv-x) var(--fv-y),
      hsla(165, 90%, 92%, 0.38) 0%,
      hsla(200, 65%, 88%, 0.12) 28%,
      hsla(270, 40%, 82%, 0.07) 46%,
      hsla(0, 0%, 100%, 0) 66%
    ),
    radial-gradient(
      circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(170, 70%, 96%, 0.28) 0%,
      hsla(0, 0%, 0%, 0.35) 45%,
      hsla(200, 60%, 98%, 0.16) 75%
    ),
    linear-gradient(
      -52deg,
      hsla(0, 0%, 0%, 0.42) 12%,
      hsla(175, 45%, 92%, 0.35) 50%,
      hsla(0, 0%, 0%, 0.42) 88%
    ),
    var(--rh-foil);
  background-blend-mode: screen, screen, hard-light, hard-light, screen, soft-light, soft-light, difference, normal;
  background-size: 1100px 100%, 300% 300%, 300% 100%, 300% 100%, 200% 100%, 200% 200%, 120% 120%, 200% 200%,
    var(--rh-foil-fit, cover);
  background-position: center, 0% 28%, calc(100% - var(--fv-x)) calc(100% - var(--fv-y)), var(--fv-x) var(--fv-y),
    var(--fv-x) var(--fv-y), 50% 50%, center center, center center, center center;
  filter: brightness(0.76) contrast(1.58) saturate(0.8) hue-rotate(-8deg);
  animation:
    table-rh-aurora-pan 54s linear infinite,
    table-rh-aurora-mist 42s ease-in-out infinite alternate;
}

.card-reverse-holo-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: clamp(0.4, calc(0.92 - 0.35 * var(--pointer-from-center, 0.35)), 0.85);
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    hsla(0, 0%, 100%, 0.75) 10%,
    hsla(0, 0%, 100%, 0.4) 22%,
    hsla(0, 0%, 0%, 0.65) 90%
  );
  filter: brightness(0.85) contrast(1.45);
}

.card-reverse-holo-glare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.88;
  background-image: radial-gradient(
    farthest-corner circle at var(--fv-x) var(--fv-y),
    hsl(0, 0%, 100%) 8%,
    hsla(0, 0%, 100%, 0.45) 20%,
    hsla(0, 0%, 0%, 0.45) 120%
  );
  filter: brightness(1) contrast(1.45);
}

.card-reverse-holo-lamp {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.88;
  background: radial-gradient(
    circle 50% at var(--fv-x) var(--fv-y),
    hsla(0, 0%, 100%, 1) 0%,
    hsla(210, 50%, 99%, 0.65) 14%,
    hsla(230, 40%, 98%, 0.12) 38%,
    hsla(0, 0%, 100%, 0) 58%
  );
}

.tricker-zone-stack .hand-card-art-wrap--tricker-reverse-holo-art .tricker-portrait {
  pointer-events: none;
  filter: brightness(0.92) contrast(1.12) saturate(1.02);
}

/* Sem camada ::after “foil clássico” no wrapper da arte (reverse holo usa spans). */
.hand-card-art-wrap--reverse-holo-art::after,
.hand-card-art-wrap--tricker-reverse-holo-art::after {
  content: none !important;
  display: none !important;
}

.card-art-hover-preview .card-art-hover-preview__inner--reverse-holo > .hand-card-art {
  z-index: 1;
}
.card-art-hover-preview .card-art-hover-preview__inner--reverse-holo > .card-reverse-holo-shine {
  z-index: 2;
}
.card-art-hover-preview .card-art-hover-preview__inner--reverse-holo > .card-reverse-holo-glare {
  z-index: 3;
}
.card-art-hover-preview .card-art-hover-preview__inner--reverse-holo > .card-reverse-holo-lamp {
  z-index: 4;
}
.card-art-hover-preview.card-art-hover-preview--reverse-holo .card-reverse-holo-shine {
  animation: rh-preview-shine-drift 14s ease-in-out infinite alternate;
}

@keyframes rh-preview-shine-drift {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 0.72;
  }
}

.hand-cards .hand-card-art-wrap {
  display: block;
  width: 100%;
  max-width: 180px;
  margin-bottom: 6px;
  flex-shrink: 0;
  /* Evita “gap” por baixo de <img> inline que fazia o ::after (foil) parecer uma faixa fora da arte */
  line-height: 0;
  font-size: 0;
}

/* Wrapper do foil: mesmos limites que a arte (180px); altura = só a arte (sem “caixa” extra sob a imagem). */
.hand-cards .hand-card-art-wrap--foil {
  display: block;
  width: 100%;
  max-width: 180px;
  height: fit-content;
  min-height: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  overflow: clip;
  border-radius: 6px;
  isolation: isolate;
  /* sem contain:paint — competia com border-radius; foil V já usava contain:none */
  contain: none;
  border: 1px solid rgba(210, 230, 255, 0.55);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.24);
  box-sizing: border-box;
}

/* Universal Duo: sem border “real” (só anel em sombra) para a arte ocupar o mesmo rectângulo que outras cartas foil */
.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo {
  border: none;
  box-shadow:
    0 0 0 1px rgba(210, 230, 255, 0.55),
    0 0 20px rgba(167, 139, 250, 0.24);
}

.hand-cards .hand-card-art-wrap--foil .hand-card-art {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 5 / 7;
  margin: 0;
  vertical-align: top;
  border: none;
  border-radius: 6px;
  object-fit: cover;
}

/* Mini-cartas nas zonas: wrapper foil encaixa na coluna da arte (igual .zone-slot-card-art / .floor-card-art). */
.playmat-ui-layer .mini-card .board-zone-card-art-wrap.hand-card-art-wrap--foil {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  margin: 0;
}
.playmat-ui-layer .mini-card.zone-slot-card .board-zone-card-art-wrap.hand-card-art-wrap--foil .hand-card-art {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  aspect-ratio: unset;
}
.playmat-ui-layer .mini-card.zone-slot-card.zone-slot-card--art-loaded .board-zone-card-art-wrap.hand-card-art-wrap--foil .hand-card-art {
  height: 100%;
  object-fit: contain;
}
.playmat-ui-layer .floor-mini-card .board-zone-card-art-wrap.hand-card-art-wrap--foil,
.playmat-ui-layer .pile-zone-cards .floor-mini-card .board-zone-card-art-wrap.hand-card-art-wrap--foil {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.playmat-ui-layer .floor-mini-card.floor-mini-card--art-loaded .board-zone-card-art-wrap.hand-card-art-wrap--foil .hand-card-art.floor-card-art,
.playmat-ui-layer
  .pile-zone-cards
  .floor-mini-card--art-loaded
  .board-zone-card-art-wrap.hand-card-art-wrap--foil
  .hand-card-art.floor-card-art {
  height: 100%;
  object-fit: contain;
}

/*
 * Foil "V" (finish: foil_v): modelo próximo a simeydotme/pokemon-cards-css (v-regular.css) —
 * grão + sunpillar + duas camadas do feixe diagonal (20° no SVG; −25° anti-horário vs. 45°); posições espelhadas; holo radial + foco no ponteiro.
 * Referência: https://poke-holo.simey.me/ · código: https://github.com/simeydotme/pokemon-cards-css
 * Preview: inclinação + ponteiro (JS). Mão/Tricker: holo animado na diagonal (table-holo-pointer-sweep-fv), sem tilt.
 */
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v {
  --fv-x: 50%;
  --fv-y: 50%;
  --fv-xn: 0.5;
  --fv-yn: 0.5;
  --fv-rx: 0deg;
  --fv-ry: 0deg;
  /* Grão leve: baixa frequência + poucas octaves + opacidade baixa para não competir com o texto */
  --fv-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  /* Feixe: período maior / banda larga; eixo do gradiente 20° (+10° anti-horário face a 30°) + displacement */
  --fv-beam-wavy: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'a'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'256'%20y1%3D'256'%20x2%3D'364'%20y2%3D'256'%20gradientTransform%3D'rotate(20%20256%20256)'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'0.271'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.375'%20stop-color%3D'hsl(180%2C23%25%2C63%25)'%2F%3E%3Cstop%20offset%3D'0.479'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.879'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23131b3a'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'w'%20x%3D'-35%25'%20y%3D'-35%25'%20width%3D'170%25'%20height%3D'170%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.011%200.03'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'8.2'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23a)'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  contain: none;
  transform: perspective(520px) rotateX(var(--fv-rx)) rotateY(var(--fv-ry));
  transform-style: preserve-3d;
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v {
  --fv-x: 50%;
  --fv-y: 50%;
  --fv-xn: 0.5;
  --fv-yn: 0.5;
  --fv-rx: 0deg;
  --fv-ry: 0deg;
  --fv-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --fv-beam-wavy: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'a'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'256'%20y1%3D'256'%20x2%3D'364'%20y2%3D'256'%20gradientTransform%3D'rotate(20%20256%20256)'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'0.271'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.375'%20stop-color%3D'hsl(180%2C23%25%2C63%25)'%2F%3E%3Cstop%20offset%3D'0.479'%20stop-color%3D'hsl(180%2C8%25%2C57.5%25)'%2F%3E%3Cstop%20offset%3D'0.879'%20stop-color%3D'%23131b3a'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23131b3a'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'w'%20x%3D'-35%25'%20y%3D'-35%25'%20width%3D'170%25'%20height%3D'170%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.011%200.03'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20in2%3D'n'%20scale%3D'8.2'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23a)'%20filter%3D'url(%23w)'%2F%3E%3C%2Fsvg%3E");
  contain: none;
  transform: perspective(520px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  animation: table-holo-pointer-sweep-fv 24s linear infinite;
}

@keyframes foil-v-ambient-base {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.27;
  }
}

@keyframes foil-v-preview-holo-drift {
  0%,
  100% {
    opacity: 0.255;
  }
  50% {
    opacity: 0.275;
  }
}

@keyframes foil-v-preview-after-pulse {
  0%,
  100% {
    opacity: 0.235;
  }
  50% {
    opacity: 0.255;
  }
}

.playmat-ui-layer .hand-card-art-wrap--foil-v :is(.hand-card-art, .tricker-portrait),
.card-art-hover-preview .hand-card-art-wrap--foil-v .hand-card-art {
  pointer-events: none;
  /* Cores da arte ~10% mais intensas vs. valor anterior */
  filter: brightness(0.9) contrast(1.19) saturate(1.05);
}

/* Facho circular no ponteiro (referência: holo TCG com “lâmpada” branca nítida sobre a carta). */
.playmat-ui-layer .hand-card-art-wrap--foil-v .hand-card-art-wrap__fv-lamp,
.card-art-hover-preview .hand-card-art-wrap--foil-v .hand-card-art-wrap__fv-lamp {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle 46% at var(--fv-x) var(--fv-y),
    hsla(0, 0%, 100%, 1) 0%,
    hsla(210, 50%, 99%, 0.75) 13%,
    hsla(220, 45%, 98%, 0.4) 26%,
    hsla(230, 40%, 98%, 0.14) 40%,
    hsla(0, 0%, 100%, 0) 56%
  );
  opacity: 0.46;
}

.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-v .hand-card-art-wrap__fv-lamp,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-v .hand-card-art-wrap__fv-lamp {
  opacity: 0.29;
}

/* Camada 1 (equiv. .card__shine): color-dodge + brightness baixo preserva a arte — v-regular.css */
.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::before,
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.24;
  border-radius: inherit;
  mix-blend-mode: color-dodge;
  background-image: var(--fv-grain),
    repeating-linear-gradient(
      0deg,
      hsl(2, 70%, 73%) 5%,
      hsl(53, 70%, 69%) 10%,
      hsl(93, 70%, 69%) 15%,
      hsl(176, 70%, 76%) 20%,
      hsl(228, 70%, 74%) 25%,
      hsl(283, 70%, 73%) 30%,
      hsl(2, 70%, 73%) 35%
    ),
    var(--fv-beam-wavy),
    /* 2.ª camada: posição inversa (espelho XY) relativamente à 1.ª */
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.057) 12%,
      hsla(0, 0%, 0%, 0.085) 20%,
      hsla(0, 0%, 0%, 0.142) 120%
    ),
    /* Holo + “lâmpada” no ponteiro: núcleo claro difuso (--fv-x/y vêm do JS) */
    radial-gradient(
      ellipse 78% 72% at var(--fv-x) var(--fv-y),
      hsla(48, 100%, 100%, 0.5) 0%,
      hsla(210, 90%, 98%, 0.22) 22%,
      hsla(220, 70%, 96%, 0.09) 42%,
      hsla(0, 0%, 100%, 0) 65%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, screen;
  /* Grão esticado = menos “salpicos” visíveis sobre stats / texto */
  background-size: 1100px 100%, 200% 700%, 300% 100%, 300% 100%, 200% 100%, 200% 200%;
  background-position: center, 0% var(--fv-y), calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
    var(--fv-x) var(--fv-y), var(--fv-x) var(--fv-y), 50% 50%;
  background-repeat: no-repeat;
  filter: brightness(0.81) contrast(2.31) saturate(0.55);
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::before {
  background-image: var(--fv-grain),
    repeating-linear-gradient(
      106deg,
      transparent 0%,
      hsla(168, 38%, 52%, 0.1) 11%,
      hsla(182, 46%, 58%, 0.22) 26%,
      hsla(200, 36%, 56%, 0.09) 38%,
      hsla(272, 30%, 56%, 0.15) 50%,
      hsla(174, 44%, 56%, 0.13) 64%,
      transparent 82%
    ),
    var(--fv-beam-wavy),
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.045) 12%,
      hsla(0, 0%, 0%, 0.07) 20%,
      hsla(0, 0%, 0%, 0.11) 120%
    ),
    radial-gradient(
      ellipse 82% 76% at var(--fv-x) var(--fv-y),
      hsla(165, 85%, 92%, 0.35) 0%,
      hsla(195, 70%, 88%, 0.14) 26%,
      hsla(260, 45%, 82%, 0.08) 44%,
      hsla(0, 0%, 100%, 0) 68%
    );
  background-blend-mode: screen, screen, hard-light, hard-light, screen;
  background-size: 1100px 100%, 320% 320%, 300% 100%, 300% 100%, 200% 100%, 200% 200%;
  background-position: center, 0% 28%, calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
    var(--fv-x) var(--fv-y), var(--fv-x) var(--fv-y), 50% 50%;
  filter: brightness(0.82) contrast(1.68) saturate(0.88) hue-rotate(-10deg);
  animation:
    foil-v-ambient-base 20s ease-in-out infinite alternate,
    table-fv-aurora-pan 52s linear infinite,
    table-fv-aurora-curtains 40s ease-in-out infinite alternate;
}

.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::before {
  animation: foil-v-preview-holo-drift 16s ease-in-out infinite alternate;
}

/* Camada 2: sunpillar + feixes (ordem inversa ao ::before: directo → espelho) + radiais — soft-light */
.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::after,
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.225;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  /* Feixes + radiais (o facho branco circular vai no span .hand-card-art-wrap__fv-lamp). */
  background-image:
    repeating-linear-gradient(
      0deg,
      hsl(2, 70%, 73%) 5%,
      hsl(53, 70%, 69%) 10%,
      hsl(93, 70%, 69%) 15%,
      hsl(176, 70%, 76%) 20%,
      hsl(228, 70%, 74%) 25%,
      hsl(283, 70%, 73%) 30%,
      hsl(2, 70%, 73%) 35%
    ),
    var(--fv-beam-wavy),
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.057) 12%,
      hsla(0, 0%, 0%, 0.085) 20%,
      hsla(0, 0%, 0%, 0.142) 120%
    ),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 100%, 0.64) 0%,
      hsla(210, 3%, 54%, 0.19) 45%,
      hsla(0, 0%, 20%, 0.43) 125%
    ),
    radial-gradient(
      ellipse 45% 40% at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 100%, 0.64) 0%,
      hsla(200, 95%, 96%, 0.32) 22%,
      hsla(215, 70%, 92%, 0.08) 45%,
      hsla(0, 0%, 100%, 0) 58%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, soft-light;
  background-size: 200% 400%, 300% 100%, 300% 100%, 200% 100%, 120% 120%, 220% 220%;
  background-position: 0% var(--fv-y), var(--fv-x) var(--fv-y), calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
    var(--fv-x) var(--fv-y), var(--fv-x) var(--fv-y), 50% 50%;
  background-repeat: no-repeat;
  filter: brightness(0.86) contrast(1.9) saturate(0.78);
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-v::after {
  background-image:
    repeating-linear-gradient(
      102deg,
      transparent 0%,
      hsla(172, 40%, 54%, 0.09) 14%,
      hsla(258, 28%, 58%, 0.12) 32%,
      hsla(188, 48%, 60%, 0.16) 58%,
      transparent 80%
    ),
    var(--fv-beam-wavy),
    var(--fv-beam-wavy),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(0, 0%, 0%, 0.04) 12%,
      hsla(0, 0%, 0%, 0.07) 20%,
      hsla(0, 0%, 0%, 0.11) 120%
    ),
    radial-gradient(
      farthest-corner circle at var(--fv-x) var(--fv-y),
      hsla(165, 85%, 96%, 0.42) 0%,
      hsla(230, 40%, 70%, 0.12) 48%,
      hsla(0, 0%, 20%, 0.35) 125%
    ),
    radial-gradient(
      ellipse 48% 44% at var(--fv-x) var(--fv-y),
      hsla(175, 90%, 96%, 0.38) 0%,
      hsla(210, 60%, 90%, 0.12) 38%,
      hsla(0, 0%, 100%, 0) 58%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, soft-light;
  background-size: 260% 340%, 300% 100%, 300% 100%, 200% 100%, 120% 120%, 220% 220%;
  background-position: 6% 12%, var(--fv-x) var(--fv-y), calc(100% - var(--fv-x)) calc(100% - var(--fv-y)),
    var(--fv-x) var(--fv-y), var(--fv-x) var(--fv-y), 50% 50%;
  filter: brightness(0.84) contrast(1.55) saturate(0.9) hue-rotate(6deg);
  animation:
    table-fv-after-aurora-pan 48s linear infinite,
    table-fv-after-aurora-curtains 44s ease-in-out infinite alternate;
}

.card-art-hover-preview.card-art-hover-preview--foil-v .hand-card-art-wrap--foil-v::after {
  animation: foil-v-preview-after-pulse 22s ease-in-out infinite alternate;
}

.hand-cards .card.card--foil:hover .hand-card-art-wrap--foil-v::after,
.hand-cards .hand-card-art-wrap--foil-v:hover::after,
.playmat-ui-layer .mini-card.card--foil:hover .hand-card-art-wrap--foil-v::after,
.playmat-ui-layer .hand-card-art-wrap--foil-v:hover::after {
  opacity: 0.24;
}

/* Cartas assinatura / SgM: holo mais suave para não “lavar” a cor da arte */
.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-v .hand-card-art,
.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-v .tricker-portrait,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-v .hand-card-art {
  filter: brightness(0.93) contrast(1.13) saturate(0.98);
}

.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-v::before,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-v::before {
  opacity: 0.185;
  filter: brightness(0.84) contrast(1.93) saturate(0.44);
}
.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-v::after,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-v::after {
  opacity: 0.175;
  filter: brightness(0.88) contrast(1.66) saturate(0.64);
}

/*
 * Foil "S" (finish: foil_s): igual ao V a nível de pipeline (--fs-*, lâmpada, radiais no ponteiro).
 * Textura principal = dobras verticais iridescentes (SVG em /assets/foil/foil-s-holographic.svg).
 * Podes substituir por um PNG (ex. wallpaper holográfico) com o mesmo nome base .png e trocar o url abaixo.
 * Preview: tilt + ponteiro (JS). Mão/Tricker: table-holo-pointer-sweep-fs, sem tilt.
 */
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s {
  --fs-x: 50%;
  --fs-y: 50%;
  --fs-xn: 0.5;
  --fs-yn: 0.5;
  --fs-rx: 0deg;
  --fs-ry: 0deg;
  --fs-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  /* Ondas verticais + iridescent (gradiente horizontal + displacement vertical dominante) */
  --fs-holo: url("/assets/foil/foil-s-holographic.svg");
  contain: none;
  transform: perspective(520px) rotateX(var(--fs-rx)) rotateY(var(--fs-ry));
  transform-style: preserve-3d;
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s {
  --fs-x: 50%;
  --fs-y: 50%;
  --fs-xn: 0.5;
  --fs-yn: 0.5;
  --fs-rx: 0deg;
  --fs-ry: 0deg;
  --fs-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --fs-holo: url("/assets/foil/foil-s-holographic.svg");
  contain: none;
  transform: perspective(520px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  animation: table-holo-pointer-sweep-fs 24s linear infinite;
}

@keyframes foil-s-ambient-base {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.27;
  }
}

@keyframes foil-s-preview-holo-drift {
  0%,
  100% {
    opacity: 0.255;
  }
  50% {
    opacity: 0.275;
  }
}

@keyframes foil-s-preview-after-pulse {
  0%,
  100% {
    opacity: 0.235;
  }
  50% {
    opacity: 0.255;
  }
}

.playmat-ui-layer .hand-card-art-wrap--foil-s :is(.hand-card-art, .tricker-portrait),
.card-art-hover-preview .hand-card-art-wrap--foil-s .hand-card-art {
  pointer-events: none;
  filter: brightness(0.9) contrast(1.19) saturate(1.05);
}

.playmat-ui-layer .hand-card-art-wrap--foil-s .hand-card-art-wrap__fs-lamp,
.card-art-hover-preview .hand-card-art-wrap--foil-s .hand-card-art-wrap__fs-lamp {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle 46% at var(--fs-x) var(--fs-y),
    hsla(0, 0%, 100%, 1) 0%,
    hsla(210, 50%, 99%, 0.75) 13%,
    hsla(220, 45%, 98%, 0.4) 26%,
    hsla(230, 40%, 98%, 0.14) 40%,
    hsla(0, 0%, 100%, 0) 56%
  );
  opacity: 0.46;
}

.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-s .hand-card-art-wrap__fs-lamp,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-s .hand-card-art-wrap__fs-lamp {
  opacity: 0.29;
}

.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::before,
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.24;
  border-radius: inherit;
  mix-blend-mode: color-dodge;
  background-image: var(--fs-grain),
    var(--fs-holo),
    var(--fs-holo),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 0%, 0.057) 12%,
      hsla(0, 0%, 0%, 0.085) 20%,
      hsla(0, 0%, 0%, 0.142) 120%
    ),
    radial-gradient(
      ellipse 78% 72% at var(--fs-x) var(--fs-y),
      hsla(48, 100%, 100%, 0.5) 0%,
      hsla(210, 90%, 98%, 0.22) 22%,
      hsla(220, 70%, 96%, 0.09) 42%,
      hsla(0, 0%, 100%, 0) 65%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, screen;
  background-size: 1100px 100%, 260% 340%, 260% 340%, 200% 100%, 200% 200%;
  background-position: center, var(--fs-x) var(--fs-y), calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
    var(--fs-x) var(--fs-y), 50% 50%;
  background-repeat: no-repeat;
  filter: brightness(0.81) contrast(2.31) saturate(0.55);
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::before {
  background-image: var(--fs-grain),
    repeating-linear-gradient(
      106deg,
      transparent 0%,
      hsla(168, 38%, 52%, 0.09) 11%,
      hsla(182, 46%, 58%, 0.18) 26%,
      hsla(200, 36%, 56%, 0.08) 38%,
      hsla(272, 30%, 56%, 0.12) 50%,
      hsla(174, 44%, 56%, 0.11) 64%,
      transparent 82%
    ),
    var(--fs-holo),
    var(--fs-holo),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 0%, 0.045) 12%,
      hsla(0, 0%, 0%, 0.07) 20%,
      hsla(0, 0%, 0%, 0.11) 120%
    ),
    radial-gradient(
      ellipse 80% 74% at var(--fs-x) var(--fs-y),
      hsla(165, 85%, 92%, 0.32) 0%,
      hsla(200, 70%, 88%, 0.12) 26%,
      hsla(260, 35%, 86%, 0.08) 44%,
      hsla(0, 0%, 100%, 0) 66%
    );
  background-blend-mode: screen, screen, hue, hard-light, hard-light, screen;
  background-size: 1100px 100%, 300% 300%, 260% 340%, 260% 340%, 200% 100%, 200% 200%;
  background-position: center, 0% 28%, var(--fs-x) var(--fs-y), calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
    var(--fs-x) var(--fs-y), 50% 50%;
  filter: brightness(0.82) contrast(1.65) saturate(0.86) hue-rotate(-8deg);
  animation:
    foil-s-ambient-base 20s ease-in-out infinite alternate,
    table-fs-aurora-pan 52s linear infinite,
    table-fs-aurora-curtains 40s ease-in-out infinite alternate;
}

.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::before {
  animation: foil-s-preview-holo-drift 16s ease-in-out infinite alternate;
}

.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::after,
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.225;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  background-image: var(--fs-holo),
    var(--fs-holo),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 0%, 0.057) 12%,
      hsla(0, 0%, 0%, 0.085) 20%,
      hsla(0, 0%, 0%, 0.142) 120%
    ),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 100%, 0.64) 0%,
      hsla(210, 3%, 54%, 0.19) 45%,
      hsla(0, 0%, 20%, 0.43) 125%
    ),
    radial-gradient(
      ellipse 45% 40% at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 100%, 0.64) 0%,
      hsla(200, 95%, 96%, 0.32) 22%,
      hsla(215, 70%, 92%, 0.08) 45%,
      hsla(0, 0%, 100%, 0) 58%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, soft-light;
  background-size: 240% 380%, 240% 380%, 200% 100%, 120% 120%, 220% 220%;
  background-position: var(--fs-x) var(--fs-y), calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
    var(--fs-x) var(--fs-y), var(--fs-x) var(--fs-y), 50% 50%;
  background-repeat: no-repeat;
  filter: brightness(0.86) contrast(1.9) saturate(0.78);
}

.playmat-ui-layer .hand-card-art-wrap--foil.hand-card-art-wrap--foil-s::after {
  background-image:
    repeating-linear-gradient(
      100deg,
      transparent 0%,
      hsla(175, 36%, 54%, 0.08) 18%,
      hsla(265, 26%, 58%, 0.1) 40%,
      hsla(190, 44%, 58%, 0.14) 62%,
      transparent 82%
    ),
    var(--fs-holo),
    var(--fs-holo),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(0, 0%, 0%, 0.04) 12%,
      hsla(0, 0%, 0%, 0.07) 20%,
      hsla(0, 0%, 0%, 0.1) 120%
    ),
    radial-gradient(
      farthest-corner circle at var(--fs-x) var(--fs-y),
      hsla(170, 75%, 96%, 0.38) 0%,
      hsla(220, 35%, 72%, 0.1) 48%,
      hsla(0, 0%, 20%, 0.32) 125%
    ),
    radial-gradient(
      ellipse 48% 44% at var(--fs-x) var(--fs-y),
      hsla(178, 85%, 96%, 0.34) 0%,
      hsla(210, 55%, 90%, 0.1) 38%,
      hsla(0, 0%, 100%, 0) 58%
    );
  background-blend-mode: screen, hue, hard-light, hard-light, soft-light;
  background-size: 280% 360%, 240% 380%, 240% 380%, 200% 100%, 120% 120%, 220% 220%;
  background-position: 6% 12%, var(--fs-x) var(--fs-y), calc(100% - var(--fs-x)) calc(100% - var(--fs-y)),
    var(--fs-x) var(--fs-y), var(--fs-x) var(--fs-y), 50% 50%;
  filter: brightness(0.84) contrast(1.52) saturate(0.88) hue-rotate(4deg);
  animation:
    table-fs-after-aurora-pan 48s linear infinite,
    table-fs-after-aurora-curtains 44s ease-in-out infinite alternate;
}

.card-art-hover-preview.card-art-hover-preview--foil-s .hand-card-art-wrap--foil-s::after {
  animation: foil-s-preview-after-pulse 22s ease-in-out infinite alternate;
}

.hand-cards .card.card--foil:hover .hand-card-art-wrap--foil-s::after,
.hand-cards .hand-card-art-wrap--foil-s:hover::after,
.playmat-ui-layer .mini-card.card--foil:hover .hand-card-art-wrap--foil-s::after,
.playmat-ui-layer .hand-card-art-wrap--foil-s:hover::after {
  opacity: 0.24;
}

.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-s .hand-card-art,
.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-s .tricker-portrait,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-s .hand-card-art {
  filter: brightness(0.93) contrast(1.13) saturate(0.98);
}

.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-s::before,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-s::before {
  opacity: 0.185;
  filter: brightness(0.84) contrast(1.93) saturate(0.44);
}
.hand-cards .card.card--signature-move .hand-card-art-wrap--foil-s::after,
.playmat-ui-layer .mini-card.card--signature-move .hand-card-art-wrap--foil-s::after {
  opacity: 0.175;
  filter: brightness(0.88) contrast(1.66) saturate(0.64);
}

.card-art-hover-preview.card-art-hover-preview--foil-s .hand-card-art-wrap--foil-s {
  transform: perspective(520px) rotateX(var(--fs-rx)) rotateY(var(--fs-ry));
}

/* Foil só com CSS (gradiente animado) — finish: foil; exclui foil_v e Universal Duo */
.hand-cards .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.card-art-hover-preview .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.playmat-ui-layer .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.225;
  mix-blend-mode: overlay;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    transparent 28%,
    rgba(255, 255, 255, 0.59) 42%,
    rgba(190, 240, 255, 0.77) 50%,
    rgba(255, 220, 255, 0.55) 58%,
    transparent 72%
  );
  background-size: 205% 205%;
  animation: card-foil-shimmer 3.6s ease-in-out infinite;
}

/*
 * Universal Duo: PNG em public/assets/foil/
 * - universal-duo-mask.png  → máscara (alpha ou branco = foil visível)
 * - universal-duo-foil.png  → textura; anima-se com background-position (shimmer)
 */
.hand-cards .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.card-art-hover-preview .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.playmat-ui-layer
  .hand-card-art-wrap--foil.hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  )::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
  opacity: 0.365;
  mix-blend-mode: overlay;
  background-color: transparent;
  background-image: url("/assets/foil/universal-duo-foil.png");
  /* Textura maior que a caixa + animação de position = shimmer visível (recortado ao rectângulo) */
  background-size: 198% 198%;
  background-position: 40% 45%;
  background-repeat: no-repeat;
  -webkit-mask-image: url("/assets/foil/universal-duo-mask.png");
  mask-image: url("/assets/foil/universal-duo-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
  border-radius: inherit;
  animation: universal-duo-foil-shimmer 4.2s ease-in-out infinite;
}

@keyframes universal-duo-foil-shimmer {
  0%,
  100% {
    background-position: 15% 40%;
  }
  50% {
    background-position: 85% 60%;
  }
}

@keyframes card-foil-shimmer {
  0%,
  100% {
    background-position: 0% 40%;
  }
  50% {
    background-position: 100% 60%;
  }
}

/* Foil mais vivo ao pairar (carta inteira ou só a zona da arte) */
.hand-cards .card.card--foil:hover:not(.card--foil-on-art)::after {
  opacity: 0.295;
  animation-duration: 2.4s;
}

.hand-cards .card.card--foil:hover
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.hand-cards .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover::after {
  opacity: 0.295;
  animation-duration: 2.4s;
}

.hand-cards .card.card--foil:hover .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.hand-cards .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover::after {
  opacity: 0.395;
  animation-duration: 2.6s;
}

.hand-cards .card.card--foil:hover .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s),
.hand-cards .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(220, 235, 255, 0.85),
    0 0 22px rgba(167, 139, 250, 0.25);
}

.hand-cards .card.card--foil:hover
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s),
.hand-cards .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover {
  border-color: rgba(210, 225, 255, 0.75);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.21);
}

.hand-cards .card.card--foil:hover {
  border-color: rgba(210, 220, 255, 0.75);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.19);
}

.playmat-ui-layer .mini-card.card--foil:hover
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  )::after,
.playmat-ui-layer
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  ):hover::after {
  opacity: 0.295;
  animation-duration: 2.4s;
}

.playmat-ui-layer .mini-card.card--foil:hover
  .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s)::after,
.playmat-ui-layer
  .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover::after {
  opacity: 0.395;
  animation-duration: 2.6s;
}

.playmat-ui-layer .mini-card.card--foil:hover
  .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s),
.playmat-ui-layer
  .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):hover {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(220, 235, 255, 0.85),
    0 0 22px rgba(167, 139, 250, 0.25);
}

.playmat-ui-layer .mini-card.card--foil:hover
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  ),
.playmat-ui-layer
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  ):hover {
  border-color: rgba(210, 225, 255, 0.75);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.21);
}

.playmat-ui-layer .mini-card.card--foil:hover {
  border-color: rgba(210, 220, 255, 0.75);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.19);
}

.hand-cards .card {
  max-width: 200px;
  min-width: 120px;
  font-size: 0.88rem;
  padding: 7px 10px;
}
.hand-cards .card .hand-card-art {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #533483;
  background: #111827;
  margin-bottom: 6px;
  display: block;
  flex-shrink: 0;
}

/* O margin da arte não pode ficar no <img> dentro do wrap foil (senão a caixa do foil fica mais alta que a imagem). */
.hand-cards .card .hand-card-art-wrap--foil .hand-card-art {
  margin-bottom: 0;
  width: 100%;
  max-width: 180px;
}
/* PNG carregado: layout na imagem — só arte + botões de ação; sem imagem fica o texto completo. */
.hand-cards .card.card--hand-full-art .card-kind-badge,
.hand-cards .card.card--hand-full-art .card-headline,
.hand-cards .card.card--hand-full-art .card-meta-line,
.hand-cards .card.card--hand-full-art .card-effect-block {
  display: none;
}
.hand-cards .card.card--hand-full-art .hand-card-art {
  object-fit: contain;
}

.hand-cards .card.card--hand-full-art .hand-card-art-wrap--foil .hand-card-art {
  object-fit: contain;
}

.hand-cards .card-name {
  word-break: break-word;
  line-height: 1.3;
}
.hand-cards .card-points {
  font-size: 1rem;
  color: #7dd3fc;
}
.hand-cards .card-detail {
  font-size: 0.8rem;
  color: #aaa;
  display: block;
  margin-top: 4px;
  line-height: 1.25;
}

/* Pré-visualização ao pairar: caixa = maior rectângulo 5:7 dentro do teto (--card-hover-max-w × --card-hover-max-h);
 * a imagem ocupa 100% dessa área (sem letterbox grande). Recorte mínimo se a arte não for 5:7. */
.card-art-hover-preview[hidden] {
  display: none !important;
}

/* Animação de draw (início de turno): mesmas regras que o hover, sem interferir com o elemento real. */
.card-art-hover-preview.draw-card-draw-flyer {
  pointer-events: none;
  z-index: 10001;
}

.card-art-hover-preview {
  position: fixed;
  /* Fallback; em jogo app.js define left/top no centro de #floorUnified e limpa ao fechar */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  box-sizing: border-box;
  width: min(var(--card-hover-max-w), calc(var(--card-hover-max-h) * 5 / 7));
  aspect-ratio: 5 / 7;
  height: auto;
  max-width: var(--card-hover-max-w);
  max-height: var(--card-hover-max-h);
  padding: 0;
  /* Só o contentor passa o rato; o .card-art-hover-preview-spin tem pointer-events: auto para tilt/foil/clique. */
  pointer-events: none;
  cursor: pointer;
  border-radius: 10px;
  /* Só a carta: sem moldura roxa nem rectângulo de fundo */
  border: none;
  background: transparent;
  /* Sombra no container — não usar filter no .spin (quebra preserve-3d e o verso). */
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.52);
  overflow: visible;
  line-height: 0;
  isolation: isolate;
  perspective: 1200px;
}
.card-art-hover-preview .card-art-hover-preview-spin {
  pointer-events: auto;
}
.card-art-hover-preview-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  border-radius: 10px;
}
.card-art-hover-preview-spin.card-art-hover-preview-spin--anim {
  animation: hover-preview-card-flip-360 0.95s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
}
@keyframes hover-preview-card-flip-360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.card-art-hover-preview-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: transparent;
}
/* Frente: sem clip — o tilt 3D do foil V não corta cantos. Verso: clip + cantos alinhados à imagem. */
.card-art-hover-preview-face--front {
  overflow: visible;
  transform: rotateY(0deg) translateZ(0.75px);
}
.card-art-hover-preview-face--back {
  overflow: hidden;
  transform: rotateY(180deg) translateZ(0.75px);
}
.card-art-hover-preview-back-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.card-art-hover-preview .card-art-hover-preview__inner {
  position: absolute;
  inset: 0;
  line-height: 0;
  font-size: 0;
}
.card-art-hover-preview .card-art-hover-preview__inner > .hand-card-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Alinhar às faces do preview (10px); 0 deixava a arte sem cantos quando não há wrap foil */
  border-radius: 10px;
}
/* Foil no preview: mesmo wrapper que na mão (animação visível); sem borda dupla */
.card-art-hover-preview .card-art-hover-preview__inner.hand-card-art-wrap--foil {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  /* Sem clip/contain: senão o rotateX/Y do foil V corta a arte ao mover o rato */
  overflow: visible;
  isolation: isolate;
  contain: none;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  vertical-align: top;
}
.card-art-hover-preview .card-art-hover-preview__inner.hand-card-art-wrap--foil .hand-card-art {
  position: relative;
  z-index: 1;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: unset;
  object-fit: cover;
  border: none;
  border-radius: inherit;
}
.card-art-hover-preview.card-art-hover-preview--hand-full-art .hand-card-art-wrap--foil .hand-card-art {
  object-fit: contain;
}
/* Preview grande: brilho foil sempre “forte” (não depende de :hover na carta) */
.card-art-hover-preview.card-art-hover-preview--foil-universal-duo:not(.card-art-hover-preview--foil-v):not(
    .card-art-hover-preview--foil-s
  ):not(.card-art-hover-preview--reverse-holo)
  .hand-card-art-wrap--foil-universal-duo:not(.hand-card-art-wrap--foil-v):not(.hand-card-art-wrap--foil-s):not(
    .hand-card-art-wrap--reverse-holo-art
  )::after {
  opacity: 0.77;
  animation-duration: 2.8s;
}
.card-art-hover-preview.card-art-hover-preview--foil:not(.card-art-hover-preview--foil-universal-duo):not(
    .card-art-hover-preview--foil-v
  ):not(.card-art-hover-preview--foil-s):not(.card-art-hover-preview--reverse-holo)
  .hand-card-art-wrap--foil:not(.hand-card-art-wrap--foil-universal-duo):not(.hand-card-art-wrap--foil-v):not(
    .hand-card-art-wrap--foil-s
  ):not(.hand-card-art-wrap--reverse-holo-art)::after {
  opacity: 0.55;
  animation-duration: 3s;
}

.card-art-hover-preview.card-art-hover-preview--foil-v .hand-card-art-wrap--foil-v {
  transform: perspective(520px) rotateX(var(--fv-rx)) rotateY(var(--fv-ry));
}

.mini-card-points {
  font-size: 0.8rem;
  font-weight: 600;
  color: #7dd3fc;
  display: block;
  margin-top: 1px;
}
.mini-card-detail {
  font-size: 0.75rem;
  color: #b8d4e6;
  display: block;
  margin-top: 2px;
  line-height: 1.2;
}

/* Painel direito — chrome do mockup (título + log + turno) */
.game-chrome-title {
  flex-shrink: 0;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.game-chrome-title__main {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.03em;
  line-height: 1.15;
}
.game-chrome-title__sub {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}
.game-chrome-title__id {
  margin: 5px 0 0;
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.35;
}

/* Sem width aqui: senão sobrescreve as media queries acima. Larguras finais no bloco seguinte. */
.right-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  position: relative;
  z-index: 6;
  box-sizing: border-box;
}

/* --- .right-panel — larguras responsivas (deve ficar APÓS o bloco base anterior) --- */
@media (min-width: 1200px) {
  .right-panel {
    width: min(240px, 22.5vw);
    min-width: 180px;
  }
}

/* 901–1199: telemóvel/iPad em landscape com sidebar ao lado — estreita (~12vw máx.) */
@media (max-width: 1199px) and (min-width: 901px) {
  .game-playfield .right-panel {
    width: min(108px, 12vw);
    min-width: 72px;
    max-width: 26vw;
    flex: 0 0 auto;
  }
  .right-panel > .panel-block--log {
    min-height: 52px;
    max-height: min(32vh, 160px);
  }
  /* Zones um pouco mais fechadas = menos sobreposição de rótulos no ecrã estreito */
  .playmat-ui-layer {
    --playmat-board-scale: 0.98;
  }
}

/* ≤900: coluna (tabuleiro em cima) */
@media (max-width: 900px) {
  .game-playfield .right-panel {
    width: 100%;
    max-width: min(120px, 88vw);
    min-width: 0;
    flex: 0 0 auto;
    align-self: center;
  }
}

/*
 * Telemóvel em landscape “baixo” (ex. iPhone): força coluna para o tabuleiro usar 100% da largura;
 * a sidebar fica por baixo (scroll). Evita sidebar ~30% + tabuleiro espremido.
 */
/* iPad landscape típico (768px altura útil) incluído para o tabuleiro não ficar espremido ao lado da sidebar */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 780px) {
  .game-playfield {
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    min-height: 0;
  }
  .board-area {
    flex: 1 1 auto;
    width: 100%;
    min-height: min(56dvh, 420px);
    overflow: visible;
  }
  .game-playfield .playmat-view-fit {
    width: 100%;
    min-height: min(52dvh, 380px);
  }
  .game-playfield .right-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 6px;
    flex: 0 0 auto;
  }
  .game-playfield .right-panel > .panel-block--log {
    max-height: min(28dvh, 140px);
  }
  .playmat-ui-layer {
    --playmat-board-scale: 0.97;
  }
}

.right-panel .panel-block {
  flex: 0 0 auto;
}
.right-panel > .message-panel.panel-block {
  flex: 1 1 auto;
  min-height: 0;
}
.right-panel > .panel-block--log {
  /* Don't stretch to fill the whole sidebar — leaves room for turn bar + message log */
  flex: 0 1 auto;
  min-height: 75px;
  max-height: min(40vh, 240px);
}
.right-panel > .panel-block--log .log-content {
  min-height: 0;
}

/* Sidebar referência: coluna preta contínua, RECENT LOG / estado / MESSAGE LOG */
.right-panel--sidebar-ref {
  background: #000;
  color: #f4f4f5;
  padding: 11px 11px 12px;
  gap: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
}
.right-panel--sidebar-ref .game-chrome-title {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.right-panel--sidebar-ref .game-chrome-title__main {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.12;
}
.right-panel--sidebar-ref .game-chrome-title__sub {
  margin-top: 5px;
  font-size: 0.72rem;
  color: #a1a1aa;
  font-weight: 500;
}
.right-panel--sidebar-ref .game-chrome-title__id {
  margin-top: 5px;
  font-size: 0.66rem;
  color: #71717a;
  line-height: 1.4;
}
.right-panel--sidebar-ref .sidebar-back-row {
  flex-shrink: 0;
  margin: 9px 0 0;
}
.right-panel--sidebar-ref .btn-back-to-lobby {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.34rem 0.56rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f5f5ff;
  background: #181755;
  border: 1px solid rgba(165, 180, 252, 0.35);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(24, 23, 85, 0.45);
}
.right-panel--sidebar-ref .btn-back-to-lobby:hover {
  background: #222063;
  border-color: rgba(199, 210, 254, 0.5);
}
.right-panel--sidebar-ref .btn-back-to-lobby:focus-visible {
  outline: 2px solid rgba(199, 210, 254, 0.55);
  outline-offset: 2px;
}
.right-panel--sidebar-ref .panel-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 9px 9px 11px;
}
.right-panel--sidebar-ref .sidebar-section-title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.right-panel--sidebar-ref .log-content {
  color: #fafafa;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.5;
}
.right-panel--sidebar-ref .log-content .log-line.highlight {
  color: #fde047;
}
.right-panel--sidebar-ref .log-content .log-line.log-line--card-mention {
  color: #93c5fd;
}
.right-panel--sidebar-ref .top-bar--sidebar-ref {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #eab308;
  border-radius: 3px;
  padding: 11px 9px;
  box-shadow: inset 0 0 17px rgba(234, 179, 8, 0.07);
}
.right-panel--sidebar-ref .top-bar--sidebar-ref .top-bar-turn {
  color: #facc15;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.12);
}
.right-panel--sidebar-ref .top-bar--sidebar-ref .top-bar-stats {
  color: #fafafa;
  font-weight: 500;
}
.right-panel--sidebar-ref .top-bar--sidebar-ref .top-bar-message {
  color: #e4e4e7;
  line-height: 1.45;
}
.right-panel--sidebar-ref .top-bar--sidebar-ref .top-bar-actions {
  justify-content: center;
  width: 100%;
  margin-top: 5px;
}
.right-panel--sidebar-ref .message-content {
  color: #fafafa;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.42;
}
.right-panel--sidebar-ref .log-content,
.right-panel--sidebar-ref .message-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.right-panel--sidebar-ref .log-content::-webkit-scrollbar,
.right-panel--sidebar-ref .message-content::-webkit-scrollbar {
  width: 5px;
}
.right-panel--sidebar-ref .log-content::-webkit-scrollbar-thumb,
.right-panel--sidebar-ref .message-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

.panel-block {
  background: var(--playmat-zone-bg);
  border: 1px solid var(--playmat-zone-border);
  border-radius: 6px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: hidden;
}
.panel-block h3 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.log-content {
  flex: 1;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.5;
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: #d8dee9;
}
.log-content .log-line {
  margin-bottom: 5px;
}
.log-content .log-line.highlight {
  color: #fde047;
  font-weight: 700;
}
.log-content .log-line.log-line--card-mention {
  color: #7dd3fc;
}

.message-panel {
  max-height: none;
}
.message-content {
  flex: 1;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
}

.message-content .msg-line {
  margin-bottom: 4px;
}
.message-content .msg-error {
  color: #ffb4b4;
}
.message-content .msg-info {
  color: #a7f3d0;
}

/* Nomes das cartas sempre visíveis: sem scroll, sem truncar */
.mini-card {
  background: #0f3460;
  border: 1px solid #533483;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  white-space: normal;
  word-break: break-word;
  max-width: 220px;
  line-height: 1.35;
  display: inline-block;
  overflow: visible;
  visibility: visible;
}

/* Zonas estreitas (Style/Item): manter compacto e alinhado ao playmat */
.mini-card-permanent {
  max-width: 100%;
  width: 100%;
  font-size: 0.75rem;
  padding: 6px 8px;
  line-height: 1.25;
}
.zone.cell-style .zone-cards,
.zone.cell-item .zone-cards {
  width: 100%;
}
/*
 * Style (playmat): carta 5:7 com o mesmo teto que o floor (160px), limitada à zona —
 * com arte ou modo texto ocupa o mesmo rectângulo.
 */
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card {
  --scmh: var(--style-zone-card-max-h, min(160px, 100%));
  width: min(100%, calc(160px * 5 / 7), calc(var(--scmh) * 5 / 7));
  max-width: 100%;
  height: var(--scmh);
  max-height: min(160px, 100%);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  box-sizing: border-box;
  overflow: hidden;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card .zone-slot-card-art {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  max-height: none;
  height: auto;
  aspect-ratio: unset;
  margin-bottom: 0;
  object-fit: contain;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--art-loaded .zone-slot-card-art {
  height: 100%;
}
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card {
  max-width: 100%;
  width: 100%;
}
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card .zone-slot-card-art {
  max-width: 100%;
}
.zone.cell-style .mini-card-permanent {
  overflow: hidden;
}

/* Sem scrollbar: cortar effect com reticências (mostrar completo no tooltip) */
.mini-card-permanent .mini-card-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* STYLE: mostrar texto completo (sem truncagem) */
.zone.cell-style .mini-card-permanent .mini-card-detail {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.mini-card.clickable-prep {
  cursor: pointer;
  box-shadow: 0 0 0 1px #7dd3fc;
}
.mini-card.clickable-prep:hover {
  background: #123a6b;
}

/*
 * Style / Judge / Arena / Preparation / Item: sem webp (ou falha ao carregar) — rect + tipografia iguais ao floor (.floor-mini-card).
 * Pile usa floor-mini-card (fillPileZone).
 */
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode,
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode,
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode,
.playmat-ui-layer .zone.zone-judge-shared .mini-card.zone-slot-card.zone-slot-card--text-mode,
.playmat-ui-layer .zone.zone-arena-shared .mini-card.zone-slot-card.zone-slot-card--text-mode {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(4px, 0.35vw + 3px, 8px) clamp(5px, 0.45vw + 4px, 9px);
  justify-content: flex-start;
  vertical-align: top;
  background: linear-gradient(165deg, #172554 0%, #0f172a 48%, #0c1220 100%);
  border: 1px solid rgba(147, 197, 253, 0.5);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(30, 58, 138, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(59, 130, 246, 0.12);
  overflow: hidden;
  font-size: unset;
  line-height: unset;
  gap: 0;
}
/* Style playmat: texto = mesmo outer size que carta com .webp (herda .mini-card.zone-slot-card acima) */
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode {
  --scmh: var(--style-zone-card-max-h, min(160px, 100%));
  width: min(100%, calc(160px * 5 / 7), calc(var(--scmh) * 5 / 7));
  height: var(--scmh);
  max-height: min(160px, 100%);
  flex: 0 0 auto;
}
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode {
  --pzmh: min(160px, 100%);
  width: min(100%, calc(160px * 5 / 7), calc(var(--pzmh) * 5 / 7));
  height: var(--pzmh);
  max-height: min(160px, 100%);
  flex: 0 0 auto;
  align-self: center;
  justify-self: center;
}
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode {
  --izmh: var(--item-zone-card-max-h, min(160px, 100%));
  width: min(100%, calc(160px * 5 / 7), calc(var(--izmh) * 5 / 7));
  height: var(--izmh);
  max-height: min(160px, 100%);
  flex: 0 0 auto;
  align-self: center;
}
.playmat-ui-layer .zone--judge-arena-landscape .mini-card.zone-slot-card--shared.zone-slot-card--text-mode {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  max-height: none;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-text,
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-text,
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-text,
.playmat-ui-layer .zone.zone-judge-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-text,
.playmat-ui-layer .zone.zone-arena-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-name,
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-name,
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-name,
.playmat-ui-layer .zone.zone-judge-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-name,
.playmat-ui-layer .zone.zone-arena-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .zone-slot-card-name {
  display: block;
  width: 100%;
  font-size: clamp(0.48rem, 0.42rem + 0.35vw, 0.72rem);
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
  line-height: 1.15;
  flex-shrink: 0;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-points,
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-points,
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-points,
.playmat-ui-layer .zone.zone-judge-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-points,
.playmat-ui-layer .zone.zone-arena-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-points {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 5px;
  font-size: clamp(0.44rem, 0.38rem + 0.3vw, 0.66rem);
  font-weight: 700;
  color: #7dd3fc;
  flex-shrink: 0;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail,
.playmat-ui-layer .zone.cell-prep .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail,
.playmat-ui-layer .zone.cell-item .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail,
.playmat-ui-layer .zone.zone-judge-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail,
.playmat-ui-layer .zone.zone-arena-shared .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail {
  width: 100%;
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
  font-size: clamp(0.38rem, 0.34rem + 0.28vw, 0.58rem);
  line-height: 1.28;
  color: #cbd5e1;
  text-align: left;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
}
.playmat-ui-layer .zone.cell-style .mini-card.zone-slot-card.zone-slot-card--text-mode .mini-card-detail {
  -webkit-line-clamp: 8;
}

/* Preparation / Item / Style (+ Judge/Arena na faixa partilhada): mini carta com arte em assets */
.mini-card.zone-slot-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  max-width: 132px;
}
.mini-card.zone-slot-card .zone-slot-card-art {
  display: block;
  width: 100%;
  max-width: 112px;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #533483;
  background: #111827;
  margin-bottom: 4px;
}
.mini-card.zone-slot-card .zone-slot-card-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-card.zone-slot-card .zone-slot-card-name {
  font-weight: 600;
  display: block;
}
/* Prep / Item / Style: com arte, esconder nome e detalhe; manter pontos se existirem. */
.zone-slot-card--art-loaded:not(.zone-slot-card--shared) .zone-slot-card-name,
.zone-slot-card--art-loaded:not(.zone-slot-card--shared) .mini-card-detail {
  display: none;
}
/* Judge / Arena: com arte carregada, só imagem (como as outras zonas); sem arte, texto como antes. */
.mini-card.zone-slot-card--shared.zone-slot-card--art-loaded .zone-slot-card-text {
  display: none;
}
.mini-card.zone-slot-card--shared.zone-slot-card--art-loaded {
  justify-content: center;
}
.mini-card.zone-slot-card--shared {
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
  width: 100%;
  gap: 8px;
}
.mini-card.zone-slot-card--shared .zone-slot-card-art {
  max-width: 56px;
  width: 56px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.mini-card.zone-slot-card--shared .zone-slot-card-text {
  flex: 1;
  min-width: 0;
}
.mini-card.zone-slot-card--shared .mini-card-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.zone.cell-deck {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 2px 6px 8px;
  box-sizing: border-box;
}
.zone.cell-deck.zone--playmat-overlay {
  overflow: hidden;
}
.zone.cell-deck .zone-label {
  margin-bottom: 4px;
}
.deck-zone-visual {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 0;
  padding-top: 2px;
}
.deck-card-back-img {
  display: block;
  width: 48px;
  max-width: calc(100% - 8px);
  height: auto;
  max-height: 64px;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  object-position: center top;
  border-radius: 6px;
  border: 1px solid #533483;
  background: #2e3036;
  flex-shrink: 0;
  margin: 0;
}
.deck-zone--empty .deck-card-back-img {
  opacity: 0.42;
}
.deck-card-back-img--ok {
  cursor: default;
}
.deck-zone-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #b8d4e6;
  text-align: center;
  line-height: 1.2;
  flex-shrink: 0;
  padding: 0 2px;
}

/* Modais (mão: escolhas de atributo, descartes, etc.) — alinhado a .right-panel--sidebar-ref + accent jogável */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
}
.modal-box {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 20px;
  max-width: 90%;
  color: #f4f4f5;
  /* Listas nativas de <select> (ex. Fair Trade) herdam tema claro no Windows/Chrome sem isto. */
  color-scheme: dark;
  box-shadow:
    -10px 0 32px rgba(0, 0, 0, 0.45),
    0 20px 48px rgba(0, 0, 0, 0.55);
}
.modal-box p {
  margin: 0 0 12px;
  color: #e4e4e7;
  line-height: 1.45;
}
.modal-box p strong {
  color: #fff;
}
.modal-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-box select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #fafafa;
  color-scheme: dark;
}
.modal-box select option {
  background-color: #0a0a0a;
  color: #f4f4f5;
}
.modal-box select:focus {
  outline: none;
  border-color: rgba(91, 130, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(91, 130, 255, 0.2);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-rps-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 8px;
}
.modal-rps-row .btn-rps {
  min-width: 7rem;
}
.modal-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid rgba(91, 130, 255, 0.45);
  background: rgba(91, 130, 255, 0.12);
  color: #f4f4f5;
  cursor: pointer;
  font-weight: 600;
}
.modal-actions button:hover {
  background: rgba(91, 130, 255, 0.22);
  border-color: rgba(91, 130, 255, 0.65);
}

/* Mão: popover ancorado à carta (Universal, Fair Trade, descartes de Trick, etc.). */
.modal-overlay--hand-attribute,
.modal-overlay--hand-card-anchor {
  z-index: var(--z-modal-hand-attribute);
  align-items: flex-start;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.52);
}
.modal-box--hand-attribute-popover,
.modal-box--hand-card-popover {
  position: fixed;
  left: 0;
  top: 0;
  max-width: none;
  margin: 0;
  padding: 10px 11px 12px;
  width: auto;
}
.modal-box--hand-card-popover .modal-row.modal-row--hand-card-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.modal-box--hand-card-popover .modal-row.modal-row--hand-card-stacked select {
  width: 100%;
  flex: none;
}
.modal-box--hand-card-popover .modal-actions.modal-actions--hand-stacked {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}
.modal-box--hand-card-popover .modal-actions.modal-actions--hand-stacked button {
  width: 100%;
  text-align: center;
}
.modal-box p.modal-box__attribute-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  line-height: 1.35;
}
.modal-box p.modal-box__attribute-intro strong {
  color: #fff;
  font-size: 0.88rem;
  word-break: break-word;
}
.modal-box__attribute-hint {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: #a1a1aa;
}
.modal-actions--attribute-vertical {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}
.modal-actions--attribute-vertical button {
  width: 100%;
  text-align: center;
}
.modal-box--feeling-good .feeling-good-deck-list {
  max-height: min(52vh, 380px);
}
button.feeling-good-deck-row.feeling-good-deck-pick--a {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
button.feeling-good-deck-row.feeling-good-deck-pick--b {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
button.feeling-good-deck-row.feeling-good-deck-pick--a.feeling-good-deck-pick--b {
  outline-color: #fbbf24;
}

.modal-list {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.modal-list::-webkit-scrollbar {
  width: 6px;
}
.modal-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}
.modal-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #fafafa;
}

.modal-hint {
  font-size: 0.85rem;
  color: #a1a1aa;
  margin: 0 0 10px !important;
}

.modal-aren-trick-list {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.modal-aren-trick-list::-webkit-scrollbar {
  width: 6px;
}
.modal-aren-trick-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.modal-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #e4e4e7;
  cursor: pointer;
}

.modal-checkbox-row input {
  margin-top: 3px;
  flex-shrink: 0;
}