/* ============================================================
   Paciência (Klondike) — tema sunset + mesa verde escura.
   ============================================================ */

.sj-game-host:has(.slt) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;

  /* Variáveis do jogo */
  --slt-table:         rgba(20, 60, 38, 0.78);
  --slt-table-edge:    rgba(0, 0, 0, 0.28);
  --slt-card-bg:       #ffffff;
  --slt-card-back:     linear-gradient(135deg, #5347d6 0%, #6b5bff 45%, #8377ff 100%);
  --slt-card-border:   #1d1730;
  --slt-red:           #d62a3a;
  --slt-black:         #16131f;
  --slt-slot-bg:       rgba(255, 255, 255, 0.06);
  --slt-slot-edge:     rgba(255, 255, 255, 0.22);
  --slt-ok:            rgba(107, 220, 145, 0.55);
  --slt-bad:           rgba(255, 80, 100, 0.55);

  /* Sizing — JS atualiza --slt-card-w em runtime conforme o stage. */
  --slt-card-w:    74px;
  --slt-card-h:    calc(var(--slt-card-w) * 1.42);
  --slt-stack-up:  calc(var(--slt-card-h) * 0.28);  /* offset entre cartas viradas */
  --slt-stack-dn:  calc(var(--slt-card-h) * 0.11);  /* offset entre cartas viradas pra baixo */
  --slt-gap:       10px;
}
.sj-game-host:has(.slt),
body:has(.sj-game-stage) .sj-game-host:has(.slt) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.slt) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.slt {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--slt-gap);
  background: var(--slt-table);
  border: 1px solid var(--slt-table-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.22);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ============ Topo: stock/waste à esquerda, fundações à direita ============ */
.slt-top {
  display: flex;
  justify-content: space-between;
  gap: var(--slt-gap);
  align-items: flex-start;
}
.slt-top-left, .slt-top-right {
  display: flex;
  gap: var(--slt-gap);
}

/* ============ Tableau (7 colunas) ============ */
.slt-tableau {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, var(--slt-card-w));
  gap: var(--slt-gap);
  justify-content: center;
  align-content: flex-start;
}

/* ============ Slot (placeholder de pilha vazia) ============ */
.slt-slot {
  width:  var(--slt-card-w);
  height: var(--slt-card-h);
  border-radius: 8px;
  border: 1.5px dashed var(--slt-slot-edge);
  background: var(--slt-slot-bg);
  position: relative;
  box-sizing: border-box;
}
.slt-foundation::after {
  content: attr(data-suit-glyph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--slt-card-w) * 0.6);
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* Colunas do tableau: a primeira carta ancora; demais são posicionadas via top. */
.slt-col {
  width: var(--slt-card-w);
  min-height: var(--slt-card-h);
  position: relative;
  border-radius: 8px;
  border: 1.5px dashed var(--slt-slot-edge);
  background: var(--slt-slot-bg);
  box-sizing: border-box;
}
/* Quando tem cartas, esconde a borda tracejada (a 1ª carta cobre). */
.slt-col:not(:empty) {
  border-color: transparent;
  background: transparent;
}

/* Highlight de destino válido/inválido durante o drag */
.slt-slot.is-drop-ok, .slt-col.is-drop-ok {
  border-style: solid;
  border-color: var(--slt-ok);
  background: rgba(107, 220, 145, 0.10);
}
.slt-slot.is-drop-bad, .slt-col.is-drop-bad {
  border-style: solid;
  border-color: var(--slt-bad);
}

/* ============ Carta ============ */
.slt-card {
  position: absolute;
  width:  var(--slt-card-w);
  height: var(--slt-card-h);
  border-radius: 7px;
  background: var(--slt-card-bg);
  color: var(--slt-black);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.28);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  cursor: grab;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.18);
  transition: box-shadow .12s;
  z-index: 1;
}
.slt-card.is-red { color: var(--slt-red); }
.slt-card.is-down {
  background: var(--slt-card-back);
  border-color: #2a1f5a;
  cursor: pointer;
  color: transparent;
}
.slt-card.is-down::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 8px);
}
.slt-card:not(.is-down):hover {
  box-shadow:
    0 1px 0 rgba(0,0,0,0.22),
    0 5px 14px rgba(0,0,0,0.4);
}
.slt-card .slt-corner {
  position: absolute;
  left:  4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: calc(var(--slt-card-w) * 0.22);
}
.slt-card .slt-corner.slt-top    { top: 4px; }
.slt-card .slt-corner.slt-bottom {
  bottom: 4px;
  left: auto;
  right: 4px;
  transform: rotate(180deg);
}
.slt-card .slt-rank  { font-size: calc(var(--slt-card-w) * 0.32); }
.slt-card .slt-pip   { font-size: calc(var(--slt-card-w) * 0.32); }
.slt-card .slt-suit-big {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--slt-card-w) * 0.62);
  pointer-events: none;
  opacity: 0.85;
}

/* Estado: arrastando — z-index alto, sem transição de sombra */
.slt-card.is-dragging {
  cursor: grabbing;
  z-index: 1000;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.22);
  transition: none;
}

/* ============ HUD-friendly: mensagem overlay sobre mesa ============ */

/* ============ Responsivo — celular ============ */
@media (max-width: 720px) {
  .slt { padding: 10px; gap: 6px; }
  .sj-game-host:has(.slt) { --slt-gap: 6px; }
}
@media (max-width: 480px) {
  .slt { padding: 6px; }
}