/* ============================================================
   CARTAS VISUAIS — estilo Windows Solitaire
   ============================================================ */

/* --- Carta base --- */
.carta {
    width: 80px;
    height: 115px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: 1px 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6);
    display: inline-flex;
    flex-direction: column;
    position: relative;
    user-select: none;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: box-shadow .12s, transform .12s;
    cursor: default;
    overflow: hidden;
}

.carta.clicavel  { cursor: pointer; }
.carta.arrastando { opacity: .55; box-shadow: none; }
.carta.drag-over  { box-shadow: 0 0 0 3px #1e90ff, 2px 4px 12px rgba(0,0,0,.5) !important; }

/* Destaque ao passar o mouse (só cartas jogáveis) */
.carta.clicavel:hover {
    box-shadow: 1px 3px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.6);
    transform: translateY(-3px);
}

/* Carta selecionada (clique) */
.carta.selecionada {
    transform: translateY(-14px) !important;
    box-shadow: 0 0 0 3px #1e90ff, 2px 6px 18px rgba(30,144,255,.5) !important;
    z-index: 50;
}

/* --- Canto (índice) --- */
.ci {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 1px;
}
.ci.tl { top: 5px; left: 6px; }
.ci.br { bottom: 5px; right: 6px; transform: rotate(180deg); }

.ci .rank {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.ci .suit-sm {
    font-size: 11px;
    line-height: 1;
}

/* --- Símbolo central --- */
.carta .suit-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    line-height: 1;
    opacity: .92;
}

/* Cartas de figuras (J, Q, K) — borda interna decorativa */
.carta.figura::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: .18;
}

/* Cartas de figuras — símbolo maior */
.carta.figura .suit-center {
    font-size: 26px;
}
.carta.figura .figura-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
}

/* --- Cores --- */
.carta.preto { color: #111; }
.carta.vermelho { color: #cc1111; }

/* --- Carta virada (costas) --- */
.carta.virada {
    background: linear-gradient(135deg, #1a56b0 0%, #0d3a82 50%, #1a56b0 100%);
    border-color: #0d3a82;
    cursor: default;
    overflow: hidden;
}
.carta.virada::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.07) 0px,
        rgba(255,255,255,.07) 3px,
        transparent 3px,
        transparent 8px
    );
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 4px;
}
.carta.virada:hover { transform: none !important; box-shadow: 1px 2px 6px rgba(0,0,0,.35) !important; }

/* --- Slot vazio (área de depósito) --- */
.slot-vazio {
    width: 80px;
    height: 115px;
    border-radius: 8px;
    border: 2px dashed rgba(255,255,255,.25);
    background: rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.slot-vazio.drag-over {
    border-color: #1e90ff;
    background: rgba(30,144,255,.1);
}
.slot-vazio.clicavel { cursor: pointer; }

/* --- Monte (stock) --- */
.slot-monte {
    width: 80px;
    height: 115px;
    border-radius: 8px;
    border: 2px dashed rgba(255,255,255,.3);
    background: rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2rem;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
}
.slot-monte:hover { border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.2); }

/* --- Pilha de colunas --- */
.pilha {
    position: relative;
    display: flex;
    flex-direction: column;
}
.pilha .carta:not(:first-child) { margin-top: -88px; }
/* Cartas viradas ficam mais sobrepostas */
.pilha .carta.virada:not(:first-child) { margin-top: -102px; }

/* --- Fundação --- */
.fundacao-area {
    display: flex;
    gap: 8px;
}

/* --- Drag ghost (arrasto) --- */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: .88;
    transform-origin: top left;
}

/* --- Animação de vitória --- */
@keyframes cardFall {
    0%   { transform: translateY(-20px) rotate(var(--r)); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(var(--r)); }
}
.carta-vitoria {
    position: fixed;
    animation: cardFall 1.8s ease-in forwards;
    z-index: 8000;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 640px) {
    .carta { width: 58px; height: 84px; }
    .slot-vazio, .slot-monte { width: 58px; height: 84px; }
    .ci .rank { font-size: 11px; }
    .ci .suit-sm { font-size: 9px; }
    .carta .suit-center { font-size: 22px; }
    .pilha .carta:not(:first-child) { margin-top: -64px; }
    .pilha .carta.virada:not(:first-child) { margin-top: -76px; }
}