/* meier.css — Styles für "Meier / Mäxchen" (Würfel-Bluffspiel).
   Bar/Cartoon-Look: Würfel = Creme mit Tinte-Augen und hartem Schatten (wie echte
   Kneipen-Würfel), Ansage-Pille = GOLD-Chip; "Lüge" bleibt semantisch rot. */

  .meier-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
  }

  /* Würfel */
  .meier-dice {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .meier-die {
    width: 52px; height: 52px;
    background: var(--bar-cream);
    border: 3px solid var(--bar-ink);
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 7px;
    gap: 2px;
  }
  .meier-pip { width: 100%; height: 100%; border-radius: 50%; background: transparent; }
  .meier-pip.on { background: var(--bar-ink); }
  .meier-die.hidden {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bangers', sans-serif; font-size: 30px; color: rgba(27, 53, 86, 0.5);
  }

  /* Wert-Anzeigen */
  .meier-myval, .meier-reveal-val {
    font-family: 'Bangers', sans-serif;
    font-size: 40px;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--accent);
    text-shadow: 2px 2px 0 var(--bar-ink-deep);
  }
  .meier-reveal { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
  .meier-reveal-claim {
    font-size: 15px;
    padding: 4px 14px;
    border-radius: 999px;
    border: 2.5px solid var(--bar-ink);
    background: var(--bar-cream);
    color: var(--bar-ink);
  }
  /* Aufgeflogene Lüge: semantisches Cartoon-Rot mit Creme-Schrift. */
  .meier-reveal-claim.lie { background: var(--bar-red); color: var(--bar-cream); border-color: var(--bar-ink); }

  /* "Zu überbieten" / aktuelle Ansage = GOLD-Chip mit Tinte. */
  .meier-bid {
    display: inline-block;
    font-family: 'Bangers', sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    color: var(--bar-ink);
    background: var(--accent);
    border: 2.5px solid var(--bar-ink);
    padding: 4px 16px;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  }

  /* Ansage-Auswahl (Würfler): kompaktes Raster, scrollt bei vielen Optionen. */
  .meier-claims {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-height: 168px;
    overflow-y: auto;
    width: 100%;
    padding: 4px;
  }
  .meier-claim-btn {
    min-width: 60px;
    padding: 8px 10px;
    background: var(--bar-cream);
    color: var(--bar-ink);
    border: 2.5px solid var(--bar-ink);
    border-radius: 12px;
    font-family: 'Bangers', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    transition: transform .1s, box-shadow .1s;
  }
  .meier-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
  /* Der wahre eigene Wurf wird dem Würfler hervorgehoben (sieht nur er). */
  .meier-claim-btn.meier-truth {
    background: var(--accent);
    color: var(--bar-ink);
    border-color: var(--bar-ink);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 0 14px 2px rgba(255, 207, 63, 0.5);
  }

  /* Entscheider-Sicht */
  .meier-claim-big {
    text-align: center;
    font-size: 17px;
  }
  .meier-claim-val {
    display: block;
    font-family: 'Bangers', sans-serif;
    font-size: 44px;
    letter-spacing: 2px;
    margin-top: 4px;
    color: var(--accent);
    text-shadow: 3px 3px 0 var(--bar-ink-deep);
  }
  .meier-decide {
    display: flex;
    gap: 10px;
    margin-top: 6px;
  }
  .meier-decide .btn { flex: 1 1 0; }