/* ht.css — Styles für das Spiel "ht" (System Architektur V1.1) */

  /* CARDS in höher tiefer */
  .playing-card {
    width: 130px;
    height: 190px;
    border-radius: 16px;
    background: var(--paper);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: var(--stroke-thick) solid var(--ink);
    margin: 0 6px;
    font-family: 'Bangers', sans-serif;
    overflow: hidden;
  }
  .pc-value {
    font-size: 56px;
    line-height: 1;
    color: var(--ink);
  }
  .pc-suit-big {
    margin-top: 6px;
  }
  .playing-card.back {
    background: var(--paper);
    position: relative;
  }
  .playing-card.back::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px dashed var(--ink);
    border-radius: 10px;
  }
  .pc-corner-tl, .pc-corner-br {
    position: absolute;
    font-family: 'Bangers', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: var(--ink);
    display: flex; flex-direction: column; align-items: center;
  }
  .pc-corner-tl { top: 6px; left: 8px; }
  .pc-corner-br { bottom: 6px; right: 8px; transform: rotate(180deg); }
  .cards-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
  }
  .hl-btns {
    display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap;
  }
  .arrow-mid svg { display: block; animation: arrowNudge 1.4s ease-in-out infinite; }
  @keyframes arrowNudge {
    0%, 100% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
  }

  /* Höher/Tiefer: 3D-Karten-Flip beim Aufdecken (Animation V1.1).
     Container behält das Karten-Format; das Inner dreht seitlich (rotateY). */
  .pc-flip {
    width: 130px;
    height: 190px;
    margin: 0 6px;
    perspective: 900px;
  }
  .pc-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }
  .pc-flip-inner.flip {
    animation: pcFlip 0.65s ease-out both;
  }
  /* Beide Kartenseiten liegen übereinander; nur die zur Kamera zeigende ist sichtbar. */
  .pc-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .pc-face-back  { transform: rotateY(0deg); }    /* zu Beginn sichtbar */
  .pc-face-front { transform: rotateY(180deg); }  /* nach dem Dreh sichtbar */
  @keyframes pcFlip {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(180deg); }
  }

  /* Idle-"Atmen" des verdeckten Decks — WICHTIG: nur auf der statischen Karte,
     NICHT auf den Flip-Faces (.pc-face nutzt transform fürs 3D-Aufdecken). */
  .playing-card.back:not(.pc-face) { animation: cardBreath 2.6s ease-in-out infinite; }
  @keyframes cardBreath {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-5px) rotate(-1deg); }
  }