/* ==========================================================================
   cards.css — Kart görünümü.
   Kart boyutu tek değişkenle belirlenir: --cw (kart genişliği). Her şey em ile ölçeklenir.
   Renkler / kenarlıklar / arka yüz, şablon değişkenlerinden gelir (bkz. config.json -> cardTemplates).
   ========================================================================== */

.pcard {
    position: relative;
    flex: 0 0 auto;
    width: var(--cw, 64px);
    height: calc(var(--cw, 64px) * 1.42);
    font-size: calc(var(--cw, 64px) * 0.2);
    border-radius: var(--radius, 0.5em);
    background: var(--face-bg, #fdfdfb);
    border: 1px solid var(--face-border, rgba(0, 0, 0, 0.18));
    box-shadow: 0 0.15em 0.45em rgba(0, 0, 0, 0.38);
    color: var(--ink, #1a1a1a);
    font-family: var(--face-font, Georgia, serif);
    touch-action: none;
}

.pcard.s-S { --ink: var(--suit-S, #1a1a1a); }
.pcard.s-C { --ink: var(--suit-C, #1a1a1a); }
.pcard.s-H { --ink: var(--suit-H, #d92727); }
.pcard.s-D { --ink: var(--suit-D, #d92727); }

/* ---------- Yüz ---------- */
.pcard .face {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.pcard .face::before {
    content: "";
    position: absolute;
    inset: 0.28em;
    border: 1px solid var(--frame-color, rgba(0, 0, 0, 0.12));
    border-radius: calc(var(--radius, 0.5em) * 0.7);
}

.pcard .corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.pcard .corner.tl { left: 0.4em; top: 0.32em; }
.pcard .corner.br { right: 0.4em; bottom: 0.32em; transform: rotate(180deg); }
.pcard .corner b { font-size: 1.15em; font-weight: 800; letter-spacing: -0.05em; }
.pcard .corner .suit { width: 0.8em; height: 0.8em; margin-top: 0.1em; fill: currentColor; }

.pcard .pips {
    position: absolute;
    left: 33%;
    right: 33%;
    top: 22%;
    bottom: 22%;
}
.pcard .pip {
    position: absolute;
    width: 1.05em;
    height: 1.05em;
    margin: -0.525em 0 0 -0.525em;
    fill: currentColor;
}
.pcard .pip.flip { transform: rotate(180deg); }
.pcard .pip-ace {
    left: 50%;
    top: 50%;
    width: 2.8em;
    height: 2.8em;
    margin: -1.4em 0 0 -1.4em;
}

.pcard .figure {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17%;
    bottom: 17%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border: 0.1em solid currentColor;
    border-radius: 0.4em;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.06));
}
.pcard .fig-icon { width: 1.4em; height: 1.4em; fill: currentColor; opacity: 0.85; }
.pcard .fig-letter { font-size: 1.9em; line-height: 0.9; font-weight: 800; }
.pcard .fig-suit { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Arka yüz ---------- */
.pcard.facedown {
    background: var(--back-bg, linear-gradient(145deg, #234a85, #12284f));
    border: 0.2em solid var(--back-border, #f1f5f9);
    box-shadow: 0 0.15em 0.45em rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.pcard.facedown::after {
    content: "";
    position: absolute;
    inset: 0.18em;
    border-radius: calc(var(--radius, 0.5em) * 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ---------- Görsel (image) şablon ---------- */
.pcard.img-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
}
.pcard.img-card .face { display: none; }

/* ---------- Durumlar ---------- */
.pcard.is-match {
    box-shadow: 0 0 0 0.16em #fbbf24, 0 0 1em rgba(251, 191, 36, 0.7), 0 0.2em 0.5em rgba(0, 0, 0, 0.4);
}
.pcard.is-hint {
    animation: hintPulse 0.9s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { box-shadow: 0 0 0 0.14em #38bdf8, 0 0 0.6em rgba(56, 189, 248, 0.6); }
    50% { box-shadow: 0 0 0 0.26em #38bdf8, 0 0 1.4em rgba(56, 189, 248, 0.95); }
}