/* Mäxchen-Tisch: Mehrspieler-Runde (Spieler + 1–3 Figuren), Becher-Zone,
   Ansage-Chips, Bierdeckel-Leben. Baut auf tokens.css + scene.css auf. */

.kn-mx { display: flex; flex-direction: column; gap: 14px; }

/* --- NPC-Reihe oben ------------------------------------------------------ */
.kn-mx-npcs { display: flex; justify-content: center; gap: clamp(14px, 4vw, 44px); min-height: 128px; }
.kn-mx-npc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 66px; transition: opacity 0.3s ease, filter 0.3s ease; }
.kn-mx-npc-fig { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) scale(0.62); transform-origin: top center; pointer-events: none; }
.kn-mx-npc-fig .kn-fig { position: relative; top: 0; left: 0; transform: none; }
.kn-mx-npc-name { font-family: var(--kn-font-head); font-size: 0.95rem; color: #3a2c1c; }
.kn-mx-npc.kn-mx-active::after { content: ''; position: absolute; inset: -8px -12px; border: 2px dashed var(--kn-gold, #d9a23b); border-radius: 14px; pointer-events: none; }
.kn-mx-out { opacity: 0.35; filter: grayscale(0.8); }
.kn-mx-bubble {
  position: absolute; top: -46px; left: 50%; transform: translate(-50%, 6px);
  width: max-content; max-width: 210px; padding: 6px 11px; border-radius: 10px 10px 10px 3px;
  background: #f6efdf; color: #3a2c1c; font-size: 0.78rem; font-style: italic; line-height: 1.3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 7;
}
.kn-mx-bubble-show { opacity: 1; transform: translate(-50%, 0); }

/* --- Tisch-Mitte ---------------------------------------------------------- */
.kn-mx-table {
  position: relative; border-radius: 16px; padding: 22px 18px 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,244,214,0.16), transparent 55%),
    linear-gradient(160deg, var(--kn-felt, #0d5d54), var(--kn-felt-dark, #08443d));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.25), inset 0 0 60px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 180px;
}
.kn-mx-callout { color: #f0e8d6; font-size: 0.95rem; text-align: center; min-height: 1.4em; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.kn-mx-cuparea { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.kn-mx-cup { color: #d8b06a; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.45)); }
.kn-mx-shake { animation: kn-mx-shake 0.55s ease-in-out; }
@keyframes kn-mx-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg) translateY(-4px); }
  40% { transform: rotate(14deg) translateY(-7px); }
  60% { transform: rotate(-11deg) translateY(-3px); }
  80% { transform: rotate(7deg); }
}
.kn-mx-dice { display: flex; gap: 12px; }
.kn-mx-die {
  width: 44px; height: 44px; border-radius: 9px;
  background: linear-gradient(150deg, #fdfcf8, #ded7c8);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kn-font-head); font-size: 1.5rem; color: #2d2d2d;
}
.kn-mx-announced small { display: block; color: #cfe4de; font-size: 0.75rem; text-align: center; }
.kn-mx-announced strong { display: block; font-family: 'Caveat', var(--kn-font-head), cursive; font-size: 2rem; color: #ffe9b0; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* --- Spieler-Zone --------------------------------------------------------- */
.kn-mx-me { display: flex; flex-direction: column; gap: 10px; padding: 4px 6px; border-radius: 12px; }
.kn-mx-me.kn-mx-active { outline: 2px dashed var(--kn-gold, #d9a23b); outline-offset: 6px; }
.kn-mx-me-info { display: flex; align-items: center; gap: 12px; }
.kn-mx-me-name { font-family: var(--kn-font-head); font-size: 1.05rem; }
.kn-mx-secret { margin-left: auto; background: #fff8e6; border: 1px dashed #d9a23b; border-radius: 8px; padding: 4px 12px; font-size: 0.88rem; }
.kn-mx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 44px; }

/* Bierdeckel-Leben */
.kn-mx-lives { display: inline-flex; gap: 4px; }
.kn-mx-deckel {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8d9bd, #c9b48c);
  box-shadow: inset 0 0 0 2px rgba(122, 90, 50, 0.45), 0 1px 2px rgba(0,0,0,0.3);
}

/* Ansage-Picker */
.kn-mx-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kn-mx-picker-hint { font-size: 0.85rem; color: var(--kn-muted); margin-right: 4px; }
.kn-mx-chip {
  border: 1px solid var(--kn-border); background: var(--kn-panel);
  border-radius: 20px; padding: 5px 12px; font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.kn-mx-chip:hover { background: #eef7f6; transform: translateY(-1px); }
.kn-mx-chip-max { border-color: var(--kn-gold, #d9a23b); background: #fff6df; font-weight: 700; }

/* Auswahl-Zusatz im Tisch-Select */
.kn-char-picked { outline: 3px solid var(--kn-gold, #d9a23b); outline-offset: 2px; }
.kn-mx-start { text-align: center; margin-top: 16px; }

@media (max-width: 640px) {
  .kn-mx-npcs { gap: 8px; }
  .kn-mx-npc-fig { transform: translateX(-50%) scale(0.5); }
  .kn-mx-npc { padding-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-mx-shake { animation: none; }
  .kn-mx-chip:hover { transform: none; }
}