/* cards.css – Kartendesign, Unicode-Symbole, Farben und Animationen */

/* ===========================================================================
   Card Base
   =========================================================================== */
.card {
  position:      absolute;
  top:           0;
  left:          0;
  width:         100%;
  aspect-ratio:  5 / 7;
  background:    #ffffff;
  border-radius: var(--radius);
  box-shadow:    var(--card-shadow, 0 2px 6px rgba(0, 0, 0, .3));
  cursor:        pointer;
  overflow:      hidden;
  transition:    transform 0.14s ease, box-shadow 0.14s ease;
}

/* Foto-/Video-Bildkarten: dunkler Grund statt Weiß → kein weißes Aufblitzen,
   solange Bild/Video noch lädt (die Deck-Motive sind vollflächig dunkel). */
.card.card-img-face { background: #0c0c0f; }

/* Karten-Vorderseite als Bild */
.card-face-img,
.card-back-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: fill;
  display:    block;
  border-radius: var(--radius);
  pointer-events: none;
}

/* ===========================================================================
   Animiertes Premium-Set – Zwei-Video-Pool pro Bildkarte.
   Zwei Videos (A/B) liegen übereinander: eines spielt, das andere puffert die
   nächste Variante. Der Wechsel blendet per opacity um (Crossfade → kein
   schwarzes Aufblitzen). Interaktion läuft über den Kartencontainer.
   =========================================================================== */
.card-anim-stack {
  position:       absolute;
  inset:          0;
  border-radius:  var(--radius);
  overflow:       hidden;         /* runde Ecken auch fürs Video */
  pointer-events: none;           /* Interaktion läuft über den Kartencontainer */
  isolation:      isolate;        /* eigener Stacking-Context: der Crossfade-z-index
                                     der Videos bleibt IN der Karte und überlagert
                                     beim Wechsel niemals die Nachbarkarten im Stapel */
}

/* Statische Basis-Ebene (Idle-Standbild) – liegt unter den Videos und ist immer
   sichtbar, damit nie der weiße Kartenhintergrund durchblitzt. */
.card-anim-base {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  z-index:    0;
  pointer-events: none;
}

.card-anim-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  opacity:    0;                  /* nur die aktive Variante ist sichtbar */
  transition: opacity .35s ease;  /* weicher Crossfade beim Variantenwechsel */
}

.card-anim-video.is-active { opacity: 1; }

/* Seltene Variante: dezenter goldener Glow auf dem Kartencontainer */
.card.card-rare-glow {
  animation: card-rare-glow 1.4s ease-in-out infinite;
}
@keyframes card-rare-glow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(245, 197, 66, .35); }
  50%      { box-shadow: 0 0 16px 4px rgba(245, 197, 66, .65); }
}


/* Cards inside a card-slot (stock / waste / foundation) fill the slot */
.card-slot > .card {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  aspect-ratio: unset;
}

/* ===========================================================================
   Card Colors
   =========================================================================== */
.card.red   { color: var(--red,   #c0392b); }
.card.black { color: var(--black, #111111); }

/* ===========================================================================
   Corner Labels – rank + suit top-left and bottom-right (rotated)
   =========================================================================== */
.card-corner {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  line-height:     1.05;
  padding:         clamp(2px, 0.4vw, 4px);
}

.card-corner--top {
  top:  0;
  left: 0;
}

.card-corner--bot {
  bottom:    0;
  right:     0;
  transform: rotate(180deg);
}

.card-rank {
  font-size:      clamp(9px, 1.35vw, 16px);
  font-weight:    700;
  letter-spacing: -.02em;
}

.card-suit {
  font-size:   clamp(6px, 1.0vw, 12px);
  line-height: 1;
}

/* ===========================================================================
   Pip Layout – Symbole auf der Kartenfläche
   =========================================================================== */
.card-pips {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

.pip {
  position:    absolute;
  transform:   translate(-50%, -50%);
  font-size:   clamp(12px, 3.2vw, 44px);
  line-height: 1;
}

.pip--down {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* Ass: ein großes zentriertes Symbol */
.pip--ace {
  font-size: clamp(20px, 5.8vw, 72px);
}

/* ===========================================================================
   Face Card – J / Q / K
   =========================================================================== */
.card-face-inner {
  position:        absolute;
  inset:           16% 10%;
  border:          1px solid currentColor;
  border-radius:   3px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  pointer-events:  none;
}

.card-face-inner::before {
  content:       '';
  position:      absolute;
  inset:         3px;
  border:        1px solid currentColor;
  border-radius: 2px;
  opacity:       .35;
}

.card-face-rank {
  font-size:   clamp(16px, 4.8vw, 58px);
  font-weight: 900;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
}

.card-face-suit {
  font-size:   clamp(10px, 3.0vw, 36px);
  line-height: 1;
}

/* ===========================================================================
   Face-Down – Kartenrückseite (CSS-only, kein Bild)
   =========================================================================== */
.card.face-down {
  background-color: #1d4ed8;
  background-image:
    repeating-linear-gradient(
       45deg,
       rgba(255, 255, 255, .07)  0px,
       rgba(255, 255, 255, .07)  3px,
       transparent               3px,
       transparent               9px
    ),
    repeating-linear-gradient(
      -45deg,
       rgba(255, 255, 255, .07)  0px,
       rgba(255, 255, 255, .07)  3px,
       transparent               3px,
       transparent               9px
    );
  cursor: default;
  color:  transparent;
}

/* Bild-Rückseite überdeckt das CSS-Muster vollständig */
.card.face-down.has-back-img {
  background-image: none;
  background-color: transparent;
}

.card.face-down:hover {
  transform:  none;
  box-shadow: var(--card-shadow, 0 2px 6px rgba(0, 0, 0, .3));
}

/* Depth shadow on the stock pile – implies a stack of cards */
#stock > .card.face-down {
  box-shadow:
    -2px -2px 0 0 rgba(255, 255, 255, .15),
    -4px -4px 0 0 rgba(255, 255, 255, .08),
     0    3px 8px rgba(0, 0, 0, .4);
}

/* ===========================================================================
   Hover – face-up cards only
   =========================================================================== */
.card:not(.face-down):hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

/* ===========================================================================
   Tableau Stacking (static HTML demo via nth-child)
   JS rendering will override top with inline style.
   =========================================================================== */
.tableau-col .card:nth-child(1)  { top: 0; }
.tableau-col .card:nth-child(2)  { top: calc(var(--stack-offset-down) * 1); }
.tableau-col .card:nth-child(3)  { top: calc(var(--stack-offset-down) * 2); }
.tableau-col .card:nth-child(4)  { top: calc(var(--stack-offset-down) * 3); }
.tableau-col .card:nth-child(5)  { top: calc(var(--stack-offset-down) * 4); }
.tableau-col .card:nth-child(6)  { top: calc(var(--stack-offset-down) * 5); }
.tableau-col .card:nth-child(7)  { top: calc(var(--stack-offset-down) * 6); }
.tableau-col .card:nth-child(8)  { top: calc(var(--stack-offset-down) * 7); }
.tableau-col .card:nth-child(9)  { top: calc(var(--stack-offset-down) * 8); }
.tableau-col .card:nth-child(10) { top: calc(var(--stack-offset-down) * 9); }

/* ===========================================================================
   Selection (click-to-move)
   =========================================================================== */
.card.selected {
  outline:        3px solid var(--focus-ring, #fbbf24);
  outline-offset: 2px;
  z-index:        50;
  filter:         brightness(1.06);
}

/* ===========================================================================
   Drag: source dimming
   =========================================================================== */
.card.drag-source {
  opacity: 0.28;
}

/* ===========================================================================
   Drag: ghost container
   =========================================================================== */
#drag-ghost > .card {
  position:      absolute;
  left:          0;
  width:         100%;
  pointer-events: none;
  box-shadow:    0 8px 24px rgba(0, 0, 0, .45);
}

/* ===========================================================================
   Drag State (legacy .dragging, kept for safety)
   =========================================================================== */
.card.dragging {
  opacity:        .78;
  transform:      rotate(2deg) scale(1.05);
  box-shadow:     0 14px 36px rgba(0, 0, 0, .5);
  z-index:        1000;
  cursor:         grabbing;
  pointer-events: none;
}

/* touch-action: none on cards lets pointer events fire without tap delay */
.card {
  touch-action: none;
}

/* ===========================================================================
   Card Land – kurze Bounce-Animation beim Ablegen
   =========================================================================== */
@keyframes card-land {
  0%   { transform: translateY(-14px) scale(0.96); opacity: .7; }
  65%  { transform: translateY(3px)   scale(1.02); }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

.card-land {
  animation: card-land 230ms ease-out forwards;
}

/* ===========================================================================
   Flip Reveal – verdeckte Karte wird aufgedeckt
   =========================================================================== */
@keyframes flip-reveal {
  0%   { transform: perspective(700px) rotateY(-90deg); opacity: .4; }
  60%  { transform: perspective(700px) rotateY(8deg); }
  100% { transform: perspective(700px) rotateY(0deg);  opacity: 1; }
}

.flip-reveal {
  animation: flip-reveal 380ms ease-out forwards;
}

/* ===========================================================================
   Foundation Pulse – GPU-accelerated via pseudo-element (transform + opacity)
   The host element runs a no-op animation so animationend fires on the
   element itself; the visual ring lives in ::after using only transform+opacity.
   =========================================================================== */
@keyframes slot-pulse-tick {
  from { opacity: 1; }
  to   { opacity: 1; }
}

@keyframes slot-pulse-ring {
  0%   { opacity: .9; transform: scale(1);    }
  100% { opacity: 0;  transform: scale(1.35); }
}

.card-slot.pulse {
  animation: slot-pulse-tick 420ms ease-out forwards;
}

.card-slot.pulse::after {
  content:        '';
  position:       absolute;
  inset:          -4px;
  border-radius:  calc(var(--radius) + 4px);
  border:         3px solid var(--focus-ring, #fbbf24);
  pointer-events: none;
  animation:      slot-pulse-ring 420ms ease-out forwards;
}

/* ===========================================================================
   Win Animation – Karten fliegen weg
   =========================================================================== */
@keyframes win-fly {
  0%   { transform: translateY(0)       rotate(0deg);                        opacity: 1; }
  100% { transform: translateY(-200vh)  rotate(var(--fly-rotate, 360deg));   opacity: 0; }
}

.card.win-fly {
  animation:      win-fly 0.9s ease-in forwards;
  z-index:        500;
  pointer-events: none;
}

/* ===========================================================================
   Reduced Motion – kein Flackern für vestibular-sensible Nutzer
   =========================================================================== */
/* (Karten-Animationen laufen bewusst immer – kein 'prefers-reduced-motion'-Gate.) */