/*
 * Karten: Bild (WebP, 1x/2x) im Wrapper .playing-card, Fallback als SVG-Platzhalter (Farbsymbol + Rang) und die eigene Rückseite.
 * Rot/Schwarz des Platzhalters richtet sich nach der neutralen Farbe. Zustände (angehoben, ausgegraut) gelten für Bild und Platzhalter.
 */

.playing-card {
    display: block;
    width: 4rem;
    height: auto;
    aspect-ratio: 2 / 3;
    filter: drop-shadow(var(--shadow-card));
}

.playing-card--image {
    position: relative;
    border-radius: 7%/4.7%;
    background-color: var(--color-card-face);
    overflow: hidden;
}

.playing-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Angehoben: heller Rahmen in Akzentfarbe; ausgegraut: dunkler und entsättigt, aber deckend (nie opacity, sonst scheinen
   überlappende Karten durch). Gilt für Bild und SVG-Platzhalter. */
.playing-card--raised {
    outline: 3px solid var(--color-accent);
    outline-offset: -1px;
}

svg.playing-card--raised {
    outline: none;
}

svg.playing-card--raised .playing-card__face {
    stroke: var(--color-accent);
    stroke-width: 3;
}

.playing-card--disabled {
    filter: grayscale(0.85) brightness(0.68) drop-shadow(var(--shadow-card));
}

.playing-card__face {
    fill: var(--color-card-face);
    stroke: var(--color-card-border);
    stroke-width: 1;
}

.playing-card--red {
    color: var(--color-card-red);
}

.playing-card--black {
    color: var(--color-card-black);
}

.playing-card__pip {
    fill: currentColor;
}

.playing-card__rank {
    fill: currentColor;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

/* Rückseite: dunkles Tannengrün mit Rautengitter, Messingrahmen und hellem Rand (in Light und Dark gleich gut erkennbar). */
.card-back {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    filter: drop-shadow(var(--shadow-s));
}

.card-back__edge {
    fill: var(--color-card-back-edge);
    stroke: var(--color-card-border);
    stroke-width: 1;
}

.card-back__base {
    fill: var(--color-card-back);
}

.card-back__lattice {
    fill: none;
    stroke: var(--color-card-back-pattern);
    stroke-width: 1.2;
}

.card-back__frame {
    fill: none;
    stroke: var(--color-card-back-frame);
    stroke-width: 1.2;
}

.card-back__emblem circle {
    fill: var(--color-card-back);
    stroke: var(--color-card-back-frame);
    stroke-width: 1.2;
}

.card-back__emblem path {
    fill: var(--color-card-back-frame);
}

/* Fliegende Rückseiten beim Austeilen (Kopien aus table-animations.js, über allem und ohne Eingaben). */
.card-back--flying {
    position: fixed;
    z-index: 40;
    pointer-events: none;
}