/* poker.css — Styles für "Horse Poker" (vereinfachtes Texas Hold'em).
   Bar/Cartoon-Look: Tisch = sattes Cartoon-Grün (Mat-Palette) mit Holz-Bande,
   Pot/Dealer/Marker = GOLD-Chips mit Tinte, Karten mit Tinte-Rand. */

  .poker-stage { width: 100%; }

  /* Tisch: ovale Filz-Fläche mit Holz-Bande; Avatare als Stühle ringsum. */
  .poker-table {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 0.94;
    margin: 8px auto 6px;
  }
  .poker-felt {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--bar-green), #1d4733 78%);
    border: 6px solid var(--bar-panel-edge);
    box-shadow:
      inset 0 0 30px rgba(0, 0, 0, 0.45),
      0 0 0 2px var(--bar-ink),
      0 8px 0 rgba(0, 0, 0, 0.35);
  }

  /* Tischmitte: Pot + 5 Community-Karten. */
  .poker-center {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .poker-pot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Bangers', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--bar-ink);
    background: var(--accent);
    border: 2px solid var(--bar-ink);
    padding: 2px 12px;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  }
  .poker-community {
    display: flex;
    gap: 4px;
    justify-content: center;
  }

  /* Spielkarte (mehrere Größen: xs Sitz, sm Community, lg eigene Hand). */
  .poker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fdf7ea;
    color: var(--bar-ink);
    border: 1.5px solid var(--bar-ink);
    border-radius: 6px;
    font-family: 'Bangers', sans-serif;
    line-height: 1;
    overflow: hidden;
  }
  .poker-card .poker-card-v { letter-spacing: .5px; }
  /* Rote Karten (Herz/Karo): Rang + Symbol rot (suitRedClass in core.js). */
  .poker-card.red { color: var(--card-red); }
  /* Rückseite = das fertige Bild cards_back.webp (eigener Rahmen + Ecken). Voll
     zeigen (contain), keine eigenen runden Ecken/Schatten drum. */
  .poker-card.back { background: transparent; border: none; border-radius: 0; box-shadow: none; }
  .poker-card.back img { width: 100%; height: 100%; object-fit: contain; }
  .poker-card.empty { background: rgba(255, 255, 255, 0.06); border-style: dashed; border-color: rgba(246, 231, 200, 0.4); }

  .poker-card.xs { width: 17px; height: 23px; font-size: 10px; border-width: 1.5px; border-radius: 4px; }
  .poker-card.sm { width: 27px; height: 37px; font-size: 14px; gap: 1px; }
  .poker-card.lg { width: 60px; height: 84px; font-size: 30px; gap: 4px; border-width: 2.5px; border-radius: 10px; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4); }

  /* Sitz (Avatar als Stuhl). Position kommt inline aus poker.js (Ellipse). */
  .poker-seat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }
  .poker-seat-av {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2.5px solid var(--bar-ink);
    background: var(--bar-cream);
    overflow: visible;
  }
  .poker-seat-av img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  /* Dealer-Button = kleiner GOLD-Chip. */
  .poker-dealer {
    position: absolute;
    bottom: -4px; right: -6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bar-ink);
    font-family: 'Bangers', sans-serif;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bar-ink);
  }
  .poker-seat-name {
    font-family: 'Bangers', sans-serif;
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--ink);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .poker-you {
    background: var(--accent);
    color: var(--bar-ink);
    border: 1px solid var(--bar-ink);
    border-radius: 4px;
    padding: 0 3px;
    font-size: 9px;
  }
  .poker-seat-cards { display: flex; gap: 2px; }
  .poker-seat-bet {
    font-family: 'Bangers', sans-serif;
    font-size: 10px;
    color: var(--bar-ink);
    background: var(--bar-badge);
    border: 1.5px solid var(--bar-ink);
    border-radius: 999px;
    padding: 0 6px;
    display: inline-flex; align-items: center; gap: 3px;
  }
  /* Spieler am Zug: pulsierender GOLD-Ring. */
  .poker-seat.act .poker-seat-av {
    box-shadow: 0 0 0 3px var(--bar-cream), 0 0 0 6px var(--accent);
    animation: pokerPulse 1s ease-in-out infinite;
  }
  @keyframes pokerPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--bar-cream), 0 0 0 6px var(--accent); }
    50%      { box-shadow: 0 0 0 3px var(--bar-cream), 0 0 0 10px rgba(255, 207, 63, 0.75); }
  }
  .poker-seat.folded { opacity: 0.4; filter: grayscale(100%); }
  .poker-seat.winner .poker-seat-av { box-shadow: 0 0 0 3px var(--bar-cream), 0 0 0 6px var(--accent), 0 0 18px rgba(255, 207, 63, 0.7); }
  .poker-crown {
    color: var(--accent);
    filter: drop-shadow(1px 1px 0 var(--bar-ink-deep));
    margin-bottom: -2px;
  }

  /* Eigene Hand groß unter dem Tisch. */
  .poker-myhand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 10px 0 6px;
  }
  .poker-myhand.folded { opacity: 0.45; filter: grayscale(100%); }
  .poker-myhand-label {
    font-family: 'Bangers', sans-serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: var(--ink);
  }
  .poker-myhand-cards { display: flex; gap: 8px; }

  /* Aktions-Buttons (Aufgeben / Mitgehen / Erhöhen). */
  .poker-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .poker-actions .btn {
    flex: 1 1 0;
    padding: 12px 6px;
    font-size: 15px;
  }