/* Última Carta: estilos só deste jogo (prefixo .cartas-) */

/* ---------------------------------------------------------------- carta (frente, costas, virar) */
.cartas-card {
  --bh: calc(var(--bw, 80px) * 1.4);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bw, 80px);
  height: var(--bh);
  font-size: calc(var(--bw, 80px) / 10);
  line-height: 1;
  transform-origin: 50% 50%;
  perspective: 900px;
  transition:
    transform var(--dur, 520ms) var(--ease-out),
    opacity 0.35s ease;
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.cartas-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.cartas-down {
  --ry: 180deg;
}
.cartas-snap,
.cartas-snap .cartas-flip,
.cartas-drag,
.cartas-drag .cartas-flip {
  transition: none !important;
}
.cartas-face {
  position: absolute;
  inset: 0;
  border-radius: 0.95em;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 0.3em 0.7em rgba(0, 0, 0, 0.5),
    0 0 0 0.07em rgba(0, 0, 0, 0.55);
}
.cartas-back {
  transform: rotateY(180deg);
}

/* frente: cor cheia com brilho e listras finas; número grande em Anton, sem moldura oval */
.cartas-front {
  --cc: #e3192f;
  --cd: #7a0a17;
  --hi: #ff5d6e;
  --ink: #f6f0e6;
  background: radial-gradient(140% 95% at 22% 10%, var(--hi), var(--cc) 46%, var(--cd));
}
.cartas-front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 0.22em, transparent 0.22em 1.05em),
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 38%);
}
.cartas-c0 {
  --cc: #e3192f;
  --cd: #7a0a17;
  --hi: #ff5d6e;
}
.cartas-c1 {
  --cc: #f5c22b;
  --cd: #8a5c00;
  --hi: #fff0a8;
  --ink: #2a1a00;
}
.cartas-c2 {
  --cc: #1e9e5a;
  --cd: #0a4f2b;
  --hi: #5fe09b;
}
.cartas-c3 {
  --cc: #1f5bd8;
  --cd: #0b2a72;
  --hi: #6f9bff;
}
.cartas-wild {
  --cc: #15110e;
  --cd: #000;
  --hi: #3a3027;
  --ink: #f6f0e6;
  background: radial-gradient(120% 90% at 50% 38%, #3a3027, #15110e 55%, #070605);
}
.cartas-frame {
  position: absolute;
  inset: 0.42em;
  border-radius: 0.6em;
  border: 0.11em solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 0.07em rgba(0, 0, 0, 0.18);
}
.cartas-c1 .cartas-frame {
  border-color: rgba(42, 26, 0, 0.45);
}
.cartas-wild .cartas-frame {
  border-color: #f5c22b;
  box-shadow: inset 0 0 0.6em rgba(245, 194, 43, 0.25);
}
.cartas-big {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--display);
  font-size: 6.6em;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow:
    0.05em 0.06em 0 var(--cd),
    0 0.1em 0.2em rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cartas-c1 .cartas-big {
  text-shadow:
    0.05em 0.06em 0 rgba(255, 255, 255, 0.55),
    0 0.08em 0.16em rgba(120, 70, 0, 0.4);
}
.cartas-big svg {
  display: block;
  width: 0.86em;
  height: 0.86em;
  filter: drop-shadow(0.05em 0.06em 0 var(--cd));
}
.cartas-c1 .cartas-big svg {
  filter: drop-shadow(0.05em 0.06em 0 rgba(255, 255, 255, 0.55));
}
.cartas-ul::after {
  content: '';
  display: block;
  width: 0.44em;
  height: 0.07em;
  margin-top: -0.02em;
  border-radius: 0.04em;
  background: currentColor;
  box-shadow: 0.05em 0.06em 0 var(--cd);
}
.cartas-k-draw2 .cartas-big {
  font-size: 5.4em;
}
/* coringa: coroa com as 4 pedras e um aro com as 4 cores atrás */
.cartas-wild .cartas-big {
  font-size: 6em;
}
.cartas-wild .cartas-big svg {
  width: 0.95em;
  height: 0.78em;
  filter: drop-shadow(0 0.05em 0.12em rgba(0, 0, 0, 0.7));
}
.cartas-wild .cartas-big::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.3em;
  height: 1.3em;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 45deg, #e3192f 0 25%, #f5c22b 0 50%, #1e9e5a 0 75%, #1f5bd8 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57.5%);
  mask: radial-gradient(circle, transparent 56%, #000 57.5%);
  opacity: 0.9;
  filter: saturate(1.15);
}
.cartas-k-wild4 .cartas-big svg {
  width: 0.62em;
  height: 0.5em;
  margin-bottom: 0.02em;
}
.cartas-k-wild4 .cartas-big b {
  font-weight: 400;
  font-size: 0.62em;
  line-height: 0.9;
  color: var(--gold-hi, #ffe27a);
  text-shadow:
    0.05em 0.06em 0 #7d5200,
    0 0 0.25em rgba(245, 194, 43, 0.5);
}
.cartas-idx {
  position: absolute;
  z-index: 1;
  font-family: var(--display);
  font-size: 1.85em;
  color: var(--ink);
  text-shadow: 0.05em 0.06em 0 var(--cd);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.8em;
}
.cartas-c1 .cartas-idx {
  text-shadow: 0.05em 0.06em 0 rgba(255, 255, 255, 0.5);
}
.cartas-idx svg {
  width: 0.82em;
  height: 0.82em;
}
.cartas-wild .cartas-idx svg {
  width: 1em;
  height: 0.8em;
}
.cartas-tl {
  left: 0.62em;
  top: 0.6em;
}
.cartas-br {
  right: 0.62em;
  bottom: 0.6em;
  transform: rotate(180deg);
}
.cartas-k-wild4 .cartas-idx {
  color: var(--gold-hi, #ffe27a);
}

/* costas: preto com treliça dourada e o selo X1 */
.cartas-backart {
  background: radial-gradient(circle at 50% 42%, #2e2416, #0e0b08 72%);
}
.cartas-backart::before {
  content: '';
  position: absolute;
  inset: 0.42em;
  border-radius: 0.6em;
  border: 0.12em solid #f5c22b;
  background:
    repeating-linear-gradient(45deg, rgba(245, 194, 43, 0.16) 0 0.09em, transparent 0.09em 0.85em),
    repeating-linear-gradient(-45deg, rgba(245, 194, 43, 0.16) 0 0.09em, transparent 0.09em 0.85em);
  box-shadow: inset 0 0 1.2em rgba(0, 0, 0, 0.75);
}
.cartas-emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: var(--display);
  font-size: 3.4em;
  letter-spacing: -0.02em;
  color: #f5c22b;
  padding: 0.06em 0.2em 0.02em;
  border-radius: 0.14em;
  background: #0e0c0b;
  box-shadow:
    0 0 0 0.045em #f5c22b,
    0 0 0 0.1em #0e0c0b,
    0 0 0.5em rgba(245, 194, 43, 0.35);
  text-shadow: 0.04em 0.05em 0 #7d5200;
}

/* estados da carta na mão */
.cartas-card.cartas-hand {
  pointer-events: auto;
  cursor: default;
  touch-action: none;
}
.cartas-card.cartas-ok {
  cursor: pointer;
}
.cartas-ok .cartas-front {
  box-shadow:
    0 0 0 0.13em #ffe27a,
    0 0 1.2em 0.2em rgba(245, 194, 43, 0.6),
    0 0.4em 0.8em rgba(0, 0, 0, 0.5);
}
.cartas-dim .cartas-front {
  filter: brightness(0.68) saturate(0.8);
}
.cartas-sel {
  --lift: -0.4em;
}
.cartas-sel .cartas-front {
  box-shadow:
    0 0 0 0.16em #fff,
    0 0 1.6em 0.35em rgba(255, 226, 122, 0.85),
    0 0.6em 1.2em rgba(0, 0, 0, 0.6);
}
@media (hover: hover) {
  .cartas-myturn .cartas-ok:hover {
    --lift: -0.9em;
  }
}
.cartas-drag {
  z-index: 900 !important;
}
.cartas-drag .cartas-front {
  box-shadow:
    0 0 0 0.14em #fff,
    0 1.4em 2em rgba(0, 0, 0, 0.6);
}
.cartas-shake .cartas-flip {
  animation: cartas-shake 0.38s ease;
}
@keyframes cartas-shake {
  20%,
  60% {
    transform: translateX(-0.35em);
  }
  40%,
  80% {
    transform: translateX(0.35em);
  }
}
.cartas-tagnew::before {
  content: 'comprada';
  position: absolute;
  left: 50%;
  top: -1.9em;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  font: 800 1.15em/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #241600;
  padding: 0.3em 0.55em;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe27a, #f5c22b);
  box-shadow: 0 0.15em 0 #7d5200;
}
.cartas-chosen .cartas-front {
  box-shadow:
    0 0 0 0.16em var(--pick),
    0 0 1.6em 0.3em var(--pick);
}
.cartas-leaving {
  opacity: 0;
}

/* ---------------------------------------------------------------- mesa */
.cartas-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 22px;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  font-family: var(--font);
  color: var(--paper);
}
.cartas-felt {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  /* sem mesa oval desenhada (pedido do dono, 17/10/2026): só um brilho redondo e suave atrás do monte do meio */
  background:
    radial-gradient(circle at 50% 41%, rgba(245, 194, 43, 0.16), rgba(245, 194, 43, 0.04) 22%, transparent 40%),
    radial-gradient(ellipse 90% 40% at 50% 104%, rgba(227, 25, 47, 0.14), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #19130d, #0c0a08 55%, #130e0a);
  box-shadow:
    inset 0 0 0 1px rgba(245, 194, 43, 0.28),
    inset 0 0 70px rgba(0, 0, 0, 0.85);
}
/* de quem é a vez: brilho do lado de quem joga */
.cartas-zone {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 26%;
  z-index: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.cartas-zone-opp {
  top: -9%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 220, 0.16), transparent 70%);
}
.cartas-zone-me {
  bottom: -8%;
  background: radial-gradient(ellipse at 50% 50%, rgba(245, 194, 43, 0.34), transparent 70%);
}
.cartas-oppturn .cartas-zone-opp,
.cartas-myturn .cartas-zone-me {
  opacity: 1;
}
.cartas-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* aro com a cor que vale na mesa */
.cartas-aro {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  --aro: #e3192f;
  border: max(5px, 1.3cqi) solid var(--aro);
  box-shadow:
    0 0 26px 4px color-mix(in srgb, var(--aro), transparent 35%),
    inset 0 0 24px color-mix(in srgb, var(--aro), transparent 40%);
  transition:
    border-color 0.45s,
    box-shadow 0.45s;
}
.cartas-aro i {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--aro), transparent 45%);
  animation: cartas-spin 22s linear infinite;
  transition: border-color 0.45s;
}
.cartas-aro.cartas-bump {
  animation: cartas-aro 0.55s var(--ease-back);
}
@keyframes cartas-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cartas-aro {
  40% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
.cartas-colorname {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(14px, 3.6cqi, 22px);
  letter-spacing: 0.08em;
  color: var(--aro, #e3192f);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 0 12px rgba(0, 0, 0, 0.8);
  transition: color 0.45s;
}

/* cantinho de compra: monte + Comprar/Passar numa bandeja na lateral direita (o JS escolhe coluna ou linha e o tamanho do monte).
   z-index baixo: as cartas passam por cima dele (a comprada sai de cima do monte) */
.cartas-buy {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1.6cqi, 10px);
  padding: clamp(6px, 1.8cqi, 11px) clamp(5px, 1.6cqi, 10px);
  border-radius: 16px;
  border: 1px solid rgba(245, 194, 43, 0.22);
  background: linear-gradient(180deg, rgba(30, 24, 17, 0.72), rgba(10, 8, 6, 0.66));
  box-shadow:
    0 10px 22px -10px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 240, 220, 0.06);
}
.cartas-buy.cartas-row {
  flex-direction: row;
  padding: clamp(5px, 1.6cqi, 10px);
}
.cartas-deckonly .cartas-btns {
  display: none;
}
/* monte: o tamanho (--ds, fração da carta) vem do JS */
.cartas-deck {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  width: calc(var(--bw, 80px) * var(--ds, 0.62));
  height: calc(var(--bw, 80px) * var(--ds, 0.62) * 1.4);
  font-size: calc(var(--bw, 80px) * var(--ds, 0.62) * 0.1);
}
.cartas-deck i {
  position: absolute;
  inset: 0;
  border-radius: 0.95em;
  overflow: hidden;
  box-shadow:
    0 0.25em 0.5em rgba(0, 0, 0, 0.6),
    0 0 0 0.07em rgba(0, 0, 0, 0.6);
}
.cartas-deck i:nth-child(1) {
  transform: translate(0.5em, 0.55em) rotate(3deg);
  filter: brightness(0.6);
}
.cartas-deck i:nth-child(2) {
  transform: translate(0.25em, 0.28em) rotate(-2deg);
  filter: brightness(0.8);
}
.cartas-deck .cartas-emblem {
  font-size: 3.4em;
}
.cartas-deck.cartas-can {
  cursor: pointer;
}
.cartas-deck.cartas-can i:nth-child(3) {
  box-shadow:
    0 0 0 0.14em #ffe27a,
    0 0 1.4em rgba(245, 194, 43, 0.65),
    0 0.25em 0.5em rgba(0, 0, 0, 0.6);
  animation: cartas-breathe 1.6s ease-in-out infinite;
}
.cartas-deck.cartas-empty i {
  opacity: 0.25;
}
.cartas-deck:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 10px;
}
@keyframes cartas-breathe {
  50% {
    transform: translateY(-0.35em);
  }
}
/* quantas cartas sobram no monte: legível mesmo com o monte pequeno do celular */
.cartas-deckn {
  position: absolute;
  z-index: 1;
  right: -0.55em;
  top: -0.55em;
  min-width: 2.2em;
  padding: 0.3em 0.35em;
  border-radius: 99px;
  font: 700 max(10px, 1.45em)/1 var(--mono);
  color: #241600;
  background: linear-gradient(180deg, #ffe27a, #f5c22b);
  box-shadow:
    0 0.15em 0 #7d5200,
    0 0.3em 0.6em rgba(0, 0, 0, 0.5);
}
/* em linha o botão fica à direita do monte: o contador passa para o canto esquerdo */
.cartas-row .cartas-deckn {
  right: auto;
  left: -0.55em;
}
.cartas-deck.cartas-shuffle i:nth-child(3) {
  animation: cartas-riffle 0.5s ease 2;
}
@keyframes cartas-riffle {
  30% {
    transform: translateX(-0.9em) rotate(-8deg);
  }
  65% {
    transform: translateX(0.9em) rotate(8deg);
  }
}
/* Comprar e Passar na mesma casa da grade: um aparece no lugar do outro sem mexer no tamanho do cantinho */
.cartas-btns {
  display: grid;
  flex: none;
}
.cartas-btns > .cartas-btn {
  grid-area: 1 / 1;
}
.cartas-btn {
  min-height: 40px;
  padding: 0 clamp(8px, 2.6cqi, 16px);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  font: 800 clamp(12px, 3cqi, 15px)/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #241600;
  background: linear-gradient(180deg, #ffe27a, #f5c22b 55%, #d99a0b);
  box-shadow:
    0 4px 0 #7d5200,
    0 10px 18px -8px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.12s,
    filter 0.2s,
    opacity 0.2s;
}
.cartas-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7d5200;
}
.cartas-btn:disabled {
  opacity: 0.38;
  filter: grayscale(0.7);
  cursor: default;
  transform: none;
}
/* o que não vale agora some sem sair da grade (visibility: nem clica nem recebe foco) */
.cartas-btn.cartas-off {
  visibility: hidden;
}
.cartas-btn-pass {
  color: var(--paper);
  background: linear-gradient(180deg, #3a322b, #221d19);
  box-shadow:
    0 4px 0 #0a0807,
    0 0 0 1px rgba(245, 194, 43, 0.45),
    0 10px 18px -8px rgba(0, 0, 0, 0.8);
}
.cartas-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* mão do outro: contador e "ÚLTIMA!" */
.cartas-oppn {
  position: absolute;
  z-index: 250;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font: 800 12px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 99px;
  color: var(--paper);
  background: rgba(10, 8, 6, 0.82);
  border: 1px solid rgba(245, 194, 43, 0.45);
}
.cartas-oppn b {
  font: 700 15px/1 var(--mono);
  color: var(--gold-hi);
  margin-right: 4px;
}
.cartas-lastbadge {
  position: absolute;
  z-index: 255;
  transform: translate(-50%, -50%) rotate(-6deg);
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--display);
  font-size: clamp(15px, 4cqi, 24px);
  letter-spacing: 0.04em;
  padding: 4px 10px 3px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #ff4d5f, #e3192f 60%, #8f0d1c);
  box-shadow:
    0 3px 0 #5a0610,
    0 0 18px rgba(227, 25, 47, 0.7);
  animation: cartas-pulse 1s ease-in-out infinite;
}
.cartas-lastbadge[hidden] {
  display: none;
}
@keyframes cartas-pulse {
  50% {
    transform: translate(-50%, -50%) rotate(-6deg) scale(1.1);
  }
}

/* linha de status (vez, o que dá para jogar, o que aconteceu) */
.cartas-hint {
  position: absolute;
  z-index: 400;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 24px);
  width: max-content;
  text-align: center;
  pointer-events: none;
  font-weight: 700;
  font-size: clamp(12px, 3.3cqi, 15px);
  line-height: 1.2;
  padding: 6px 13px;
  border-radius: 99px;
  color: var(--paper);
  background: rgba(10, 8, 6, 0.8);
  border: 1px solid rgba(255, 240, 220, 0.16);
  transition:
    opacity 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.cartas-hint:empty {
  opacity: 0;
}
.cartas-hint.cartas-mine {
  border-color: rgba(245, 194, 43, 0.6);
  color: var(--gold-hi);
}
.cartas-hint.cartas-ev {
  border-color: rgba(255, 240, 220, 0.4);
  color: #fff;
}
.cartas-hint.cartas-bad {
  border-color: rgba(255, 93, 93, 0.7);
  color: #ffb3b3;
}

/* estouro de efeito (+2, BLOQUEIO, cor escolhida) e o carimbo ÚLTIMA! */
.cartas-pop {
  position: absolute;
  z-index: 520;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--display);
  font-size: clamp(26px, 9cqi, 60px);
  letter-spacing: 0.02em;
  color: var(--pc, #f6f0e6);
  text-shadow:
    0 0.06em 0 rgba(0, 0, 0, 0.85),
    0 0 0.4em rgba(0, 0, 0, 0.7),
    0 0 0.8em color-mix(in srgb, var(--pc, #fff), transparent 50%);
  -webkit-text-stroke: 0.02em rgba(0, 0, 0, 0.5);
}
.cartas-pop.cartas-go {
  animation: cartas-pop 1.3s var(--ease-out) forwards;
}
@keyframes cartas-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12) rotate(-4deg);
  }
  30% {
    transform: translate(-50%, -50%) scale(1) rotate(-4deg);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.95) rotate(-4deg);
  }
}
.cartas-stamp {
  position: absolute;
  z-index: 600;
  left: 50%;
  top: 44%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg) scale(2.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cartas-stamp b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(54px, 19cqi, 132px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  padding: 0.08em 0.06em 0;
  background: linear-gradient(180deg, #fff6c8, #ffe27a 30%, #f5c22b 60%, #d99a0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.04em 0.05em 0 #e3192f) drop-shadow(0.08em 0.1em 0 #5a0610)
    drop-shadow(0 0 0.3em rgba(0, 0, 0, 0.8));
}
.cartas-stamp small {
  white-space: nowrap;
  font: 800 clamp(12px, 3.4cqi, 17px)/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: rgba(10, 8, 6, 0.85);
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(245, 194, 43, 0.5);
}
.cartas-stamp.cartas-go {
  animation: cartas-stamp 1.9s var(--ease-out) forwards;
}
@keyframes cartas-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(2.4);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.94);
  }
  22% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.04);
  }
  30% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.9);
  }
}

/* fim: quem venceu brilha, o resto apaga */
.cartas-ended .cartas-zone-me,
.cartas-ended .cartas-zone-opp {
  opacity: 0;
}
.cartas-winme .cartas-zone-me,
.cartas-winopp .cartas-zone-opp {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(245, 194, 43, 0.5), transparent 70%);
}

/* ---------------------------------------------------------------- mesa de 3 e 4 (todos contra todos) */
/* sentido da vez: dois arcos com ponta em volta do aro, girando devagar; anti-horário = o mesmo desenho espelhado */
.cartas-dir {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cartas-dir[hidden] {
  display: none;
}
.cartas-dir.cartas-ccw {
  transform: translate(-50%, -50%) scaleX(-1);
}
.cartas-dir svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: cartas-spin 14s linear infinite;
}
.cartas-dir path {
  fill: none;
  stroke: rgba(246, 240, 230, 0.5);
  stroke-width: 3;
  stroke-linecap: round;
}
.cartas-dir .cartas-dir-tip {
  fill: rgba(246, 240, 230, 0.85);
  stroke: none;
}
.cartas-dir.cartas-flipdir {
  animation: cartas-dirpop 0.8s var(--ease-back);
}
@keyframes cartas-dirpop {
  35% {
    filter: drop-shadow(0 0 6px #ffe27a) brightness(1.8);
  }
}
/* etiqueta de cada um dos outros: nome, quantas cartas, ÚLTIMA!, vez, fora */
.cartas-seat {
  position: absolute;
  z-index: 260;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 46%;
  white-space: nowrap;
  pointer-events: none;
  padding: 4px 9px;
  border-radius: 99px;
  font: 800 11px/1 var(--font);
  color: var(--paper);
  background: rgba(10, 8, 6, 0.86);
  border: 1px solid rgba(245, 194, 43, 0.35);
  transition:
    box-shadow 0.25s,
    border-color 0.25s,
    opacity 0.25s;
}
.cartas-seat b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartas-seat span {
  flex: none;
  font: 700 11px/1 var(--mono);
  color: var(--gold-hi);
}
.cartas-seat-last {
  display: none;
  flex: none;
  font-style: normal;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 2px 5px 1px;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(180deg, #ff4d5f, #e3192f 60%, #8f0d1c);
  box-shadow: 0 0 10px rgba(227, 25, 47, 0.7);
}
.cartas-seat.cartas-one .cartas-seat-last {
  display: inline-block;
}
.cartas-seat.cartas-turn {
  border-color: #ffe27a;
  box-shadow:
    0 0 0 1px #ffe27a,
    0 0 16px rgba(245, 194, 43, 0.7);
}
.cartas-seat.cartas-out {
  opacity: 0.6;
}
.cartas-seat.cartas-out span {
  color: #ff8a8a;
  text-transform: uppercase;
}
.cartas-seat.cartas-won {
  border-color: #ffe27a;
  box-shadow:
    0 0 0 1px #ffe27a,
    0 0 22px rgba(245, 194, 43, 0.85);
  background: linear-gradient(180deg, rgba(70, 50, 10, 0.94), rgba(22, 15, 6, 0.94));
}
/* brilho da vez nas laterais */
.cartas-zone-l,
.cartas-zone-r {
  top: 6%;
  height: 42%;
  width: 30%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 220, 0.16), transparent 70%);
}
.cartas-zone-l {
  left: -10%;
  right: auto;
}
.cartas-zone-r {
  right: -10%;
  left: auto;
}
.cartas-lturn .cartas-zone-l,
.cartas-rturn .cartas-zone-r {
  opacity: 1;
}
.cartas-ended .cartas-zone-l,
.cartas-ended .cartas-zone-r {
  opacity: 0;
}
@media (max-width: 480px) {
  .cartas-seat {
    padding: 3px 7px;
    font-size: 10px;
    gap: 4px;
  }
  .cartas-seat span {
    font-size: 10px;
  }
}

/* ---------------------------------------------------------------- seletor de cor do coringa */
.cartas-picker {
  position: absolute;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  background: rgba(6, 5, 4, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: cartas-fade 0.18s both;
}
.cartas-picker[hidden] {
  display: none;
}
@keyframes cartas-fade {
  from {
    opacity: 0;
  }
}
.cartas-picker-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: cartas-rise 0.3s var(--ease-back) both;
}
@keyframes cartas-rise {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}
.cartas-picker-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 6.5cqi, 34px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.7);
}
.cartas-wheel {
  position: relative;
  width: clamp(180px, 58cqi, 280px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}
.cartas-pick {
  position: relative;
  border: 0;
  cursor: pointer;
  padding: 0;
  min-height: 60px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(14px, 4.2cqi, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: radial-gradient(circle at 30% 25%, var(--hi), var(--cc) 55%, var(--cd));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  transition:
    transform 0.15s var(--ease-back),
    filter 0.15s;
}
.cartas-pick span {
  position: absolute;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.cartas-pick:hover,
.cartas-pick:focus-visible {
  transform: scale(1.06);
  filter: brightness(1.12);
  outline: none;
  z-index: 1;
}
.cartas-pick0 {
  --cc: #e3192f;
  --cd: #7a0a17;
  --hi: #ff5d6e;
  border-radius: 100% 8px 8px 8px;
}
.cartas-pick1 {
  --cc: #f5c22b;
  --cd: #8a5c00;
  --hi: #fff0a8;
  border-radius: 8px 100% 8px 8px;
  color: #2a1a00;
}
.cartas-pick1 span {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cartas-pick2 {
  --cc: #1e9e5a;
  --cd: #0a4f2b;
  --hi: #5fe09b;
  border-radius: 8px 8px 8px 100%;
}
.cartas-pick3 {
  --cc: #1f5bd8;
  --cd: #0b2a72;
  --hi: #6f9bff;
  border-radius: 8px 8px 100% 8px;
}
.cartas-pick0 span {
  left: 22%;
  top: 30%;
}
.cartas-pick1 span {
  right: 22%;
  top: 30%;
}
.cartas-pick2 span {
  left: 22%;
  bottom: 30%;
}
.cartas-pick3 span {
  right: 22%;
  bottom: 30%;
}
.cartas-pick.cartas-sug {
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 18px rgba(255, 255, 255, 0.55);
}
.cartas-wheel-mid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #3a3027, #0e0c0b 70%);
  box-shadow:
    0 0 0 3px #f5c22b,
    0 0 0 7px #0e0c0b,
    0 6px 16px rgba(0, 0, 0, 0.7);
}
.cartas-wheel-mid svg {
  width: 66%;
  height: auto;
}
.cartas-picker-x {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid rgba(255, 240, 220, 0.3);
  background: rgba(10, 8, 6, 0.85);
  color: var(--paper);
  font: 700 14px/1 var(--font);
  cursor: pointer;
}

/* ---------------------------------------------------------------- pôster do catálogo */
.cartas-poster {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 0;
  height: 0;
  --bw: 21cqi;
}
.cartas-poster .cartas-card {
  left: calc(var(--bw) / -2);
  top: calc(var(--bw) * -0.7);
  transition: none;
}
.cartas-poster .cartas-p0 {
  transform: translate(-27cqi, 5cqi) rotate(-24deg);
}
.cartas-poster .cartas-p1 {
  transform: translate(-14cqi, -0.5cqi) rotate(-12deg);
}
.cartas-poster .cartas-p2 {
  transform: translate(0, -3cqi) rotate(0deg) scale(1.08);
}
.cartas-poster .cartas-p3 {
  transform: translate(14cqi, -0.5cqi) rotate(12deg);
}
.cartas-poster .cartas-p4 {
  transform: translate(27cqi, 5cqi) rotate(24deg);
}
.cartas-poster::before {
  content: '';
  position: absolute;
  left: -40cqi;
  top: -26cqi;
  width: 80cqi;
  height: 52cqi;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(245, 194, 43, 0.35), transparent 65%);
}
.cartas-poster-tag {
  position: absolute;
  left: 6cqi;
  top: -26cqi;
  z-index: 2;
  white-space: nowrap;
  transform: rotate(-9deg);
  font-family: var(--display);
  font-size: 7.5cqi;
  letter-spacing: 0.02em;
  padding: 0.1em 0.3em 0.05em;
  border-radius: 0.12em;
  color: #fff;
  background: linear-gradient(180deg, #ff4d5f, #e3192f 60%, #8f0d1c);
  box-shadow:
    0 0.08em 0 #5a0610,
    0 0.3em 0.6em rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) {
  .cartas-poster {
    top: 34%;
    --bw: 15cqi;
  }
  .cartas-poster .cartas-p0 {
    transform: translate(-21cqi, 3cqi) rotate(-24deg);
  }
  .cartas-poster .cartas-p1 {
    transform: translate(-10.5cqi, -0.5cqi) rotate(-12deg);
  }
  .cartas-poster .cartas-p2 {
    transform: translate(0, -2cqi) scale(1.08);
  }
  .cartas-poster .cartas-p3 {
    transform: translate(10.5cqi, -0.5cqi) rotate(12deg);
  }
  .cartas-poster .cartas-p4 {
    transform: translate(21cqi, 3cqi) rotate(24deg);
  }
  .cartas-poster-tag {
    left: 5cqi;
    top: -20cqi;
    font-size: 5.6cqi;
  }
}