/* Spielkarten mit 3D-Flip. Größe steuerbar über --cw. */
:root { --cw: 62px; }
@media (min-width: 700px) { :root { --cw: 76px; } }
@media (min-width: 1100px) { :root { --cw: 88px; } }

.card {
  width: var(--cw);
  aspect-ratio: 5 / 7;
  perspective: 700px;
  flex: 0 0 auto;
  user-select: none;
}
.card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .55s cubic-bezier(.2,.8,.3,1.2);
  transform-style: preserve-3d;
}
.card.down .card-inner { transform: rotateY(180deg); }

.card-face, .card-back {
  position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.12);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}

/* Vorderseite */
.card-front {
  background: linear-gradient(160deg, #ffffff, #f2f0ea);
  color: #1b1b1b; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  border: 1px solid rgba(0,0,0,.15);
}
.card.red .card-front { color: #c8102e; }
.card-corner {
  display: flex; flex-direction: column; align-items: center; line-height: .95;
  font-weight: 800; padding: calc(var(--cw)*.06) calc(var(--cw)*.08);
  font-size: calc(var(--cw) * 0.24);
}
.card-corner.bottom { transform: rotate(180deg); justify-self: end; }
.card-corner .pip { font-size: calc(var(--cw) * 0.2); }
.card-center {
  display: grid; place-items: center; font-size: calc(var(--cw) * 0.5);
  margin-top: calc(var(--cw) * -0.2); margin-bottom: calc(var(--cw) * -0.2);
}

/* Rückseite */
.card-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(231,194,90,.25) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(231,194,90,.18) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #15493a, #0a2d22);
  border: 2px solid rgba(231,194,90,.5);
  display: grid; place-items: center;
}
.card-back::after { content: "♠"; color: rgba(231,194,90,.55); font-size: calc(var(--cw)*.4); }

/* Mystery-Karte (verdeckte Flax-Mitte): klar als unbekannt erkennbar */
.card.mystery .card-back {
  background: linear-gradient(160deg, #4a2d6b, #271338);
  border-color: #b98cff;
}
.card.mystery .card-back::after { content: "?"; color: #d9c2ff; font-weight: 900; }

/* Deal-Startzustand (für Animation per JS überschrieben) */
.card.dealing { opacity: 0; }

/* Auswahl beim Abwerfen */
.card.selectable { cursor: pointer; transition: transform .15s; }
.card.selectable:hover { transform: translateY(-10px); }
.card.selected { transform: translateY(-16px); }
.card.selected .card-face,
.card.selected .card-back { box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0,0,0,.5); }
.card.selected::after {
  content: "✕ Abwerfen"; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: var(--gold); font-weight: 800; white-space: nowrap;
}

/* Abgeworfene Karte */
.card.discarded { filter: grayscale(.5) brightness(.8); }
.card.discarded .card-face { box-shadow: inset 0 0 0 2px var(--danger), 0 4px 10px rgba(0,0,0,.4); }
.card.discarded::after {
  content: "abgeworfen"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-18deg);
  font-size: .6rem; font-weight: 800; color: var(--danger);
  background: rgba(255,255,255,.85); padding: 1px 4px; border-radius: 3px;
}

/* kleinere Karte für die Auslosung-Anzeige nutzt dieselbe Klasse */
.draw-row .card { --cw: 70px; }