/* CALIGO – Table & Game UI Stylesheet
   Dark Fantasy & Dark Romance Universe von Corbin & Elowen
*/

:root {
  --bg: #07080f;
  --bg2: #0d1020;
  --panel: #121528;
  --felt: #0c1815;
  --felt-edge: #08100e;
  --line: rgba(255, 255, 255, 0.1);
  --text: #e9e6f2;
  --muted: #9a98b0;
  --gold: #e6b655;
  --gold2: #ffdc8a;
  --blau: #4f8cff;
  --gelb: #f0b429;
  --gruen: #3fbf7f;
  --rot: #ff5a47;
  --bunt: #c77dff;
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --card-ratio: 1.45;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
}

#game-app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: radial-gradient(circle at 50% 40%, rgba(20, 35, 30, 0.4) 0%, rgba(7, 8, 15, 0.95) 75%, #05060a 100%);
}

/* =========================================
   HEADER / TOPBAR
   ========================================= */
.game-topbar {
  height: 52px;
  background: rgba(13, 16, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 40;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--gold2);
  text-decoration: none;
  font-weight: 700;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.meta-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  transition: all 0.25s ease;
  user-select: none;
}

.meta-pill b {
  color: var(--gold);
}

.meta-coins-pill {
  background: linear-gradient(135deg, rgba(230, 182, 85, 0.18), rgba(18, 21, 40, 0.95));
  border: 1.5px solid var(--gold);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.meta-coins-pill b {
  color: var(--gold2) !important;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.meta-coins-pill.pulse-gain {
  animation: coinsGainPulse 1.4s ease-out;
}

.meta-coins-pill.pulse-loss {
  animation: coinsLossPulse 1.4s ease-out;
}

@keyframes coinsGainPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(76, 175, 80, 0); }
  35% { transform: scale(1.15); box-shadow: 0 0 25px rgba(76, 175, 80, 0.95), 0 0 10px #ffd700; border-color: #4caf50; }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes coinsLossPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0); }
  35% { transform: scale(0.92); box-shadow: 0 0 25px rgba(244, 67, 54, 0.9); border-color: #f44336; }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0); }
}

.coin-delta-floating {
  position: absolute;
  top: -24px;
  right: 50%;
  transform: translateX(50%);
  font-size: 0.95rem;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--serif);
  z-index: 100;
}

.coin-delta-floating.gain {
  color: #69f0ae;
  text-shadow: 0 0 12px rgba(76, 175, 80, 0.95), 0 2px 4px rgba(0,0,0,0.9);
  animation: coinFloatUp 2.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.coin-delta-floating.loss {
  color: #ff5252;
  text-shadow: 0 0 12px rgba(244, 67, 54, 0.95), 0 2px 4px rgba(0,0,0,0.9);
  animation: coinFloatDown 2.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes coinFloatUp {
  0% { opacity: 0; transform: translate(50%, 8px) scale(0.75); }
  25% { opacity: 1; transform: translate(50%, -10px) scale(1.35); }
  75% { opacity: 1; transform: translate(50%, -24px) scale(1.15); }
  100% { opacity: 0; transform: translate(50%, -38px) scale(0.85); }
}

@keyframes coinFloatDown {
  0% { opacity: 0; transform: translate(50%, -8px) scale(0.75); }
  25% { opacity: 1; transform: translate(50%, 10px) scale(1.3); }
  75% { opacity: 1; transform: translate(50%, 22px) scale(1.1); }
  100% { opacity: 0; transform: translate(50%, 36px) scale(0.85); }
}

.meta-bid-pill {
  background: rgba(18, 21, 40, 0.94);
  border: 1.5px solid rgba(230, 182, 85, 0.65);
  font-weight: 600;
}

.meta-bid-pill b {
  font-size: 1.02rem;
  color: var(--gold2);
}

.meta-pot-pill {
  background: radial-gradient(circle at 50% 30%, rgba(230, 182, 85, 0.25), rgba(14, 17, 34, 0.98));
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px rgba(230, 182, 85, 0.3);
  font-weight: 700;
}

.meta-pot-pill b {
  color: #ffd700 !important;
  font-size: 1.15rem;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.top-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: rgba(230, 182, 85, 0.15);
  border-color: var(--gold);
  color: var(--gold2);
  transform: scale(1.05);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =========================================
   SPIELTISCH (FELT TABLE)
   ========================================= */
.table-viewport {
  flex: 1;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.felt-table {
  width: min(94vw, 1100px);
  height: min(78vh, 680px);
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(17, 40, 34, 0.45) 0%, rgba(10, 24, 20, 0.82) 65%, rgba(5, 13, 10, 0.96) 100%),
    url('../assets/art/table_felt_dark.webp') center/cover no-repeat;
  border: 10px solid #231b12;
  border-radius: 200px;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.85), 0 10px 45px rgba(0,0,0,0.95), 0 0 0 2px rgba(230, 182, 85, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Runenring um die Tischmitte */
.table-ring {
  position: absolute;
  width: min(60vw, 480px);
  height: min(45vh, 320px);
  border: 1px dashed rgba(230, 182, 85, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

/* ZENTRUM: POT & STICHE */
.table-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  z-index: 10;
  position: relative;
}

.pot-badge {
  background: radial-gradient(circle at 50% 30%, rgba(35, 27, 15, 0.96), rgba(12, 15, 30, 0.98));
  border: 2px solid var(--gold);
  box-shadow: 0 8px 30px rgba(0,0,0,0.85), 0 0 30px rgba(230, 182, 85, 0.45);
  padding: 0.55rem 1.6rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  color: #fff;
  font-family: var(--serif);
  animation: potPulse 2.8s infinite ease-in-out;
  cursor: default;
  user-select: none;
}

.pot-badge b {
  font-size: 1.55rem;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.pot-badge .pot-label {
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--gold2);
  font-size: 0.95rem;
}

@keyframes potPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(230, 182, 85, 0.2); }
  50% { box-shadow: 0 4px 28px rgba(230, 182, 85, 0.45); }
}

.req-suit-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line);
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}
.req-suit-badge.active-trump { border-color: var(--gold); color: var(--gold2); }
.req-suit-badge.active-blau { border-color: var(--blau); color: var(--blau); }
.req-suit-badge.active-gelb { border-color: var(--gelb); color: var(--gelb); }
.req-suit-badge.active-gruen { border-color: var(--gruen); color: var(--gruen); }
.req-suit-badge.active-rot { border-color: var(--rot); color: var(--rot); }

/* OFFENER STICH (TRICK ZONE) */
.trick-slots {
  width: 280px;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trick-card {
  position: absolute;
  width: 90px;
  height: 130px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
  background: #111;
}

.trick-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-color-tag {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(7, 8, 15, 0.92);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
  pointer-events: none;
}

.card-color-tag.fac-blau { border-color: var(--blau); color: var(--blau); }
.card-color-tag.fac-gelb { border-color: var(--gelb); color: var(--gelb); }
.card-color-tag.fac-gruen { border-color: var(--gruen); color: var(--gruen); }
.card-color-tag.fac-rot { border-color: var(--rot); color: var(--rot); }
.card-color-tag.tag-beschw { border-color: var(--gold2); color: var(--gold2); background: rgba(30, 20, 10, 0.95); }

/* Positionen der Karten im Stich je nach Spielerplatz */
.trick-card.pos-top { transform: translateY(-30px); }
.trick-card.pos-left { transform: translateX(-40px) rotate(-8deg); }
.trick-card.pos-right { transform: translateX(40px) rotate(8deg); }
.trick-card.pos-bottom { transform: translateY(30px); }

/* =========================================
   GEGNER-PLÄTZE (SEATS)
   ========================================= */
.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
}

.seat.seat-top { top: 15px; left: 50%; transform: translateX(-50%); }
.seat.seat-left { left: 25px; top: 46%; transform: translateY(-50%); }
.seat.seat-right { right: 25px; top: 46%; transform: translateY(-50%); }
.seat.seat-bottom { bottom: 125px; left: 50%; transform: translateX(-50%); z-index: 75; }

.seat-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--panel);
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
}

.seat.active .seat-avatar {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(230, 182, 85, 0.6);
  transform: scale(1.08);
}

.seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seat-name {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--text);
  margin-top: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.seat-stats {
  background: rgba(7, 8, 15, 0.85);
  border: 1px solid var(--line);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  margin-top: 2px;
}

.stat-coins { color: var(--gold); font-weight: 600; }
.stat-tricks { color: #fff; }

/* SPRECHBLASEN */
.speech-bubble {
  position: absolute;
  background: rgba(18, 21, 40, 0.95);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  font-size: 0.82rem;
  max-width: 190px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 35;
}

.speech-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.seat-top .speech-bubble { bottom: -45px; }
.seat-left .speech-bubble { left: 70px; top: 0; }
.seat-right .speech-bubble { right: 70px; top: 0; }

/* =========================================
   PROFESSOR TIPPIN (TEAMLEITER & RATGEBER)
   ========================================= */
.thurum-messenger {
  position: absolute;
  bottom: 24px;
  right: 28px;
  display: flex;
  flex-direction: row-reverse; /* Tippin fest verankert am rechten Rand, Sprechblase expandiert nach links */
  align-items: flex-end;
  gap: 0.8rem;
  z-index: 130;
  cursor: pointer;
  transition: all 0.25s;
}

.thurum-messenger:hover {
  transform: translateY(-2px);
}

.messenger-avatar {
  width: 105px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.92)) drop-shadow(0 0 14px rgba(230, 182, 85, 0.35));
  animation: messengerFloat 3.8s infinite ease-in-out;
  transition: transform 0.25s;
}

.thurum-messenger:hover .messenger-avatar {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.95)) drop-shadow(0 0 20px rgba(255, 220, 138, 0.7));
}

@keyframes messengerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.messenger-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.messenger-video-badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display: none;
}

.messenger-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f6d27a, #c8902f);
  color: #1a1205;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.9);
  border: 1px solid rgba(255,255,255,0.4);
  z-index: 5;
}

/* =========================================
   SIMS-STYLE RADIAL BUBBLE MENU FÜR TIPPIN
   ========================================= */
.tippin-sims-menu {
  position: absolute;
  bottom: 155px;
  right: 28px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.55rem;
  pointer-events: none;
  z-index: 135;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.tippin-sims-menu.active {
  pointer-events: auto;
}

.sims-bubble-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(14, 17, 34, 0.96);
  border: 1.5px solid var(--gold);
  color: #fff;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.85), 0 0 12px rgba(230, 182, 85, 0.35);
  transform: scale(0) translateY(15px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  user-select: none;
}

.sims-bubble-btn * {
  pointer-events: none; /* Klicks auf Icon oder Text gehen 100% verlässlich auf den Button */
}

.tippin-sims-menu.active .sims-bubble-btn {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.tippin-sims-menu.active .sims-bubble-btn:nth-child(1) { transition-delay: 0.03s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(2) { transition-delay: 0.06s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(3) { transition-delay: 0.09s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(4) { transition-delay: 0.12s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(5) { transition-delay: 0.15s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(6) { transition-delay: 0.18s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(7) { transition-delay: 0.21s; }
.tippin-sims-menu.active .sims-bubble-btn:nth-child(8) { transition-delay: 0.24s; }

.sims-bubble-btn:hover {
  background: linear-gradient(135deg, rgba(230, 182, 85, 0.35), rgba(18, 21, 40, 0.98));
  border-color: #fff;
  color: var(--gold2);
  transform: scale(1.08) translateX(-5px) !important;
  box-shadow: 0 6px 25px rgba(230, 182, 85, 0.65);
}

.sims-bubble-btn .bubble-icon {
  font-size: 1.15rem;
  line-height: 1;
}

/* ÄTHERWOLF BUTTON AUF DER KARTE */
.aetherwolf-toggle {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 21, 40, 0.95);
  border: 1px solid var(--gelb);
  color: var(--gelb);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
  z-index: 10;
  cursor: pointer;
  transition: all 0.2s;
}

.aetherwolf-toggle:hover {
  background: var(--gelb);
  color: #1a1205;
  transform: translateX(-50%) scale(1.06);
}

.aetherwolf-toggle.armed {
  background: linear-gradient(135deg, #f0b429, #c8902f);
  color: #1a1205;
  border-color: #fff;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.9);
}

.hand-card.aetherwolf-card.armed {
  border-color: var(--gelb) !important;
  box-shadow: 0 0 22px rgba(240, 180, 41, 0.8) !important;
  animation: wolfPulse 1.8s infinite ease-in-out;
}

@keyframes wolfPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(240, 180, 41, 0.5); }
  50% { box-shadow: 0 0 30px rgba(240, 180, 41, 0.95), 0 0 10px #fff; }
}

.messenger-bubble {
  background: linear-gradient(135deg, #fffdf8 0%, #f7f0df 45%, #e9ddbe 100%);
  border: 2px solid #b8860b;
  outline: 1.5px solid rgba(246, 210, 122, 0.6);
  color: #1a1208;
  padding: 0.75rem 1.05rem;
  border-radius: 14px;
  font-size: 0.86rem;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  max-width: 320px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,0.88), inset 0 0 14px rgba(212, 175, 55, 0.22), 0 0 20px rgba(246, 210, 122, 0.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  position: relative;
  transition: all 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  user-select: none;
}

.messenger-bubble::after {
  content: '';
  position: absolute;
  bottom: 18px;
  right: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #e9ddbe;
  filter: drop-shadow(2px 0 0 #b8860b);
}

.messenger-bubble .bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px dashed rgba(184, 134, 11, 0.35);
  padding-bottom: 0.2rem;
}

.messenger-bubble .bubble-speaker {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a4f0b;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.messenger-bubble .bubble-close-btn {
  background: rgba(184, 134, 11, 0.15);
  border: 1px solid rgba(184, 134, 11, 0.4);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  color: #7a4f0b;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.messenger-bubble .bubble-close-btn:hover {
  background: #b8860b;
  color: #fff;
  transform: scale(1.15);
}

.messenger-bubble .bubble-body {
  font-size: 0.84rem;
  line-height: 1.42;
  word-break: break-word;
}

.messenger-bubble .bubble-click-hint {
  font-size: 0.65rem;
  color: #8c5d15;
  text-align: right;
  margin-top: 0.35rem;
  font-style: italic;
  opacity: 0.85;
}

.messenger-bubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  cursor: pointer;
}

.messenger-bubble.visible:hover {
  border-color: #ffd700;
  box-shadow: 0 12px 36px rgba(0,0,0,0.95), inset 0 0 18px rgba(212, 175, 55, 0.35), 0 0 26px rgba(246, 210, 122, 0.6);
}

.messenger-bubble.highlight-epic {
  border: 2.5px solid #ffd700;
  outline: 2px solid #ffae19;
  background: linear-gradient(135deg, #fffdf7 0%, #faecc5 40%, #e8c97e 100%);
  color: #120b02;
  box-shadow: 0 12px 38px rgba(0,0,0,0.96), 0 0 35px rgba(255, 215, 0, 0.85), inset 0 0 18px rgba(255, 215, 0, 0.45);
  animation: epicBubblePulse 2.2s infinite ease-in-out;
}

@keyframes epicBubblePulse {
  0%, 100% {
    box-shadow: 0 12px 38px rgba(0,0,0,0.96), 0 0 30px rgba(255, 215, 0, 0.75);
    border-color: #ffd700;
  }
  50% {
    box-shadow: 0 15px 44px rgba(0,0,0,0.98), 0 0 50px rgba(255, 220, 100, 1), 0 0 15px #fff;
    border-color: #fff;
  }
}

/* KARTEN-ANIMATIONEN IM STICH */
.trick-card.winner-card {
  transform: translateY(-26px) scale(1.22) !important;
  z-index: 80 !important;
  box-shadow: 0 0 35px #ffdc8a, 0 12px 30px rgba(0,0,0,0.9);
  border: 2.5px solid var(--gold) !important;
  animation: winnerPulse 1.2s infinite ease-in-out;
}

@keyframes winnerPulse {
  0%, 100% { box-shadow: 0 0 25px rgba(230, 182, 85, 0.6); }
  50% { box-shadow: 0 0 45px rgba(255, 220, 138, 0.9), 0 0 15px #fff; }
}

.trick-card.fly-to-bottom {
  transform: translateY(220px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.trick-card.fly-to-top {
  transform: translateY(-220px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.trick-card.fly-to-left {
  transform: translateX(-280px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.trick-card.fly-to-right {
  transform: translateX(280px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =========================================
   FLIEGENDE KARTE BEIM AUSSPEILEN (HAND -> MITTE & BOT -> MITTE)
   ========================================= */
.flying-play-card {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.8), 0 0 15px rgba(230,182,85,0.4);
  border: 1.5px solid rgba(255,255,255,0.3);
  background: #111;
  transform-origin: center center;
  transition: left 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.25),
              top 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.25),
              width 0.32s ease,
              height 0.32s ease,
              transform 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.25);
  will-change: left, top, width, height, transform;
}

/* ABHEBEN DER KARTEN AM STICH-ENDE */
.trick-card.trick-card-lifting {
  transform: translateY(-20px) scale(1.1) !important;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 215, 0, 0.5) !important;
  transition: all 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
  z-index: 90 !important;
}

/* =========================================
   STICH-ENDE SHOWCASE (GROSSE NEBENEINANDER-AUFREIHUNG)
   ========================================= */
.table-center:has(.showcase-active) {
  z-index: 300 !important;
}

.felt-table:has(.showcase-active) .seat.seat-left,
.felt-table:has(.showcase-active) .seat.seat-right,
.felt-table:has(.showcase-active) .pot-badge,
.felt-table:has(.showcase-active) .req-suit-badge {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.trick-slots.showcase-active {
  width: auto;
  max-width: min(96vw, 860px);
  height: auto;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 120;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.trick-slots.showcase-active ~ #btn-review-last-trick {
  display: none !important;
}

.showcase-cards-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2.2vw, 24px);
  width: 100%;
  max-width: 100%;
  padding: 24px 6px 8px 6px;
  animation: showcaseLiftIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.2) both;
}

@keyframes showcaseLiftIn {
  0% {
    opacity: 0.3;
    transform: translateY(22px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.showcase-card-item {
  width: clamp(76px, 12.8vw, 142px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  cursor: default;
}

.showcase-card-frame {
  width: 100%;
  aspect-ratio: 90 / 130;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.75);
  border: 1.5px solid rgba(255,255,255,0.22);
  background: #111;
  position: relative;
  transition: all 0.35s ease;
}

.showcase-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SPIELER-BADGE ÜBER JEDER KARTE MIT AUTHENTISCHEM KARTEN-SYMBOL */
.showcase-player-badge {
  font-size: clamp(0.72rem, 1.35vw, 0.88rem);
  font-weight: 700;
  color: #e6ebfa;
  background: rgba(12, 16, 32, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 3px clamp(8px, 1.1vw, 12px);
  margin-bottom: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-card-sym {
  font-weight: 800;
  font-size: 0.92em;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-card-sym.fac-blau { color: #6ba3ff; text-shadow: 0 0 8px rgba(79, 140, 255, 0.7); }
.badge-card-sym.fac-gelb { color: #ffd257; text-shadow: 0 0 8px rgba(240, 180, 41, 0.7); }
.badge-card-sym.fac-gruen { color: #5ce69e; text-shadow: 0 0 8px rgba(63, 191, 127, 0.7); }
.badge-card-sym.fac-rot { color: #ff6f5e; text-shadow: 0 0 8px rgba(255, 90, 71, 0.7); }
.badge-card-sym.sym-magister { color: #ffd700; font-weight: 900; text-shadow: 0 0 10px rgba(255, 215, 0, 0.85); }
.badge-card-sym.sym-hale { color: #f0f4ff; font-weight: 900; text-shadow: 0 0 10px rgba(220, 235, 255, 0.85); }
.badge-card-sym.sym-beschw { color: #ffdc7a; font-weight: 900; }
.badge-card-sym.sym-leere { color: #9aa4b8; font-weight: 800; }
.badge-card-sym.sym-wuerfel { color: #78e8ff; font-weight: 800; }
.badge-card-sym.sym-tippin { color: #ffb833; font-weight: 800; }
.badge-card-sym.sym-bunt { color: #e2a8ff; text-shadow: 0 0 8px rgba(199, 125, 255, 0.7); }

.badge-separator {
  opacity: 0.45;
  font-size: 0.9em;
  margin: 0 1px;
}

.showcase-player-badge.badge-bottom {
  border-color: rgba(212, 175, 55, 0.7);
  color: #ffd700;
  background: rgba(30, 25, 12, 0.95);
}

.showcase-player-badge.winner-badge {
  border-color: var(--gold);
  color: #fff;
  background: rgba(45, 34, 14, 0.98);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
}

/* SIEGERKARTE HINTERLEUCHTET (BACKLIGHT AURA & CROWN) */
.showcase-card-item.is-winner {
  transform: translateY(-20px) scale(1.14);
  z-index: 10;
  animation: winnerCardLift 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.3) both;
}

@keyframes winnerCardLift {
  0% { transform: translateY(10px) scale(0.95); }
  60% { transform: translateY(-26px) scale(1.16); }
  100% { transform: translateY(-20px) scale(1.14); }
}

.showcase-card-item.is-winner .showcase-card-frame {
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 18px 40px rgba(0,0,0,0.95);
  animation: winnerCardAuraPulse 1.8s infinite ease-in-out;
}

.winner-backlight-aura {
  position: absolute;
  inset: -18px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 220, 90, 0.95) 0%, rgba(212, 175, 55, 0.6) 45%, rgba(212, 175, 55, 0) 75%);
  filter: blur(18px);
  z-index: -1;
  animation: auraRotateGlow 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes auraRotateGlow {
  0% { transform: scale(0.96); opacity: 0.8; }
  100% { transform: scale(1.12); opacity: 1; filter: blur(18px); }
}

@keyframes winnerCardAuraPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 215, 0, 0.7), 0 12px 28px rgba(0,0,0,0.9); }
  50% { box-shadow: 0 0 50px rgba(255, 230, 120, 1), 0 0 18px #fff, 0 16px 38px rgba(0,0,0,0.95); }
}

.showcase-winner-crown {
  position: absolute;
  top: -16px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #0b0d17;
  font-weight: 900;
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 10px rgba(255,215,0,0.8);
  border: 1px solid #fff;
  z-index: 5;
  animation: crownBounce 1.8s infinite ease-in-out;
}

@keyframes crownBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* STICH-ERGEBNIS & WEITER-STEUERUNG */
.showcase-summary-bar {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: min(94vw, 540px);
  animation: summaryFadeIn 0.4s ease-out both;
  z-index: 5;
}

@keyframes summaryFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.showcase-summary-text {
  background: rgba(10, 14, 28, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.showcase-winner-text {
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
  color: #ffd700;
  font-weight: 700;
}

.showcase-reason-text {
  font-size: clamp(0.75rem, 2vw, 0.88rem);
  color: #cfd6e6;
  line-height: 1.35;
}

.btn-caligo-continue {
  background: linear-gradient(135deg, #ffd700 0%, #e6a817 100%);
  color: #0b0d17;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  padding: 0.6rem clamp(1.4rem, 4vw, 2.4rem);
  border: 1.5px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55);   /* nur der Knopf, ohne Leuchten (das Bild ist schon voll genug) */
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.15s ease;
}

.btn-caligo-continue:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.btn-caligo-continue:active {
  transform: scale(0.98);
}

.btn-caligo-continue .arrow {
  font-size: 1.2em;
  transition: transform 0.2s;
}

.btn-caligo-continue:hover .arrow {
  transform: translateX(3px);
}

.btn-caligo-continue .key-hint {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.85;
  color: #1a1a24;
  margin-left: 2px;
}

@keyframes continueBtnPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 6px 16px rgba(0,0,0,0.8); }
  50% { box-shadow: 0 0 35px rgba(255, 230, 120, 0.95), 0 0 14px #fff, 0 8px 22px rgba(0,0,0,0.9); }
}

/* FLUG ZUM SIEGER AM ENDE DES SHOWCASES */
.showcase-card-item.fly-to-bottom {
  transform: translateY(260px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.72s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.showcase-card-item.fly-to-top {
  transform: translateY(-260px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.72s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.showcase-card-item.fly-to-left {
  transform: translateX(-320px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.72s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.showcase-card-item.fly-to-right {
  transform: translateX(320px) scale(0.2) !important;
  opacity: 0 !important;
  transition: all 0.72s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.hand-card.legal-highlight {
  border-color: var(--gold) !important;
  box-shadow: 0 0 25px rgba(230, 182, 85, 0.8) !important;
  transform: translateY(-18px) scale(1.08) !important;
  z-index: 60 !important;
}

/* =========================================
   SPIELER-HAND (MOBILE TOUCH-FIRST & DESKTOP)
   ========================================= */
.hand-area {
  height: 250px;
  width: 100%;
  position: relative;
  margin-top: -125px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 14px;
  z-index: 85;
  background: transparent !important;
  pointer-events: none;
}

.card-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  max-width: 1100px;
  perspective: 1000px;
  padding: 0 16px;
  pointer-events: auto;
}

.hand-card {
  width: 154px;
  height: 222px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.78);
  border: 1.8px solid rgba(255,255,255,0.24);
  margin-left: -44px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 0.22s ease, border-color 0.22s ease;
  transform-origin: bottom center;
  position: relative;
  background: #111;
  overflow: hidden;
  flex-shrink: 0;
}

.hand-card:first-child {
  margin-left: 0;
}

.hand-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hand-card:hover:not(.illegal) {
  transform: translateY(-48px) scale(1.36) !important;
  z-index: 100 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 28px 55px rgba(0,0,0,0.98), 0 0 40px rgba(246, 210, 122, 0.85) !important;
}

.hand-card.illegal {
  opacity: 0.35;
  filter: grayscale(60%) brightness(70%);
  cursor: not-allowed;
}

.hand-card.illegal:hover {
  transform: none !important;
  border-color: var(--rot);
  box-shadow: none;
}

/* =========================================
   MODALE & DIALOGE (ANSAGEN, W12, EFFEKTE)
   ========================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2500;
}

/* WICHTIG: Im Bidding-Modus bleibt die Spielerhand unten zu 100% sichtbar und frei klickbar! */
.modal-overlay.bidding-mode {
  background: rgba(5, 6, 10, 0.35);
  backdrop-filter: none;
  align-items: flex-start;
  padding-top: max(30px, 6vh);
  z-index: 100;
  pointer-events: none; /* Klicks gehen durch auf die Handkarten! */
}

.modal-overlay.bidding-mode .caligo-modal {
  pointer-events: auto; /* Nur die Dialogbox fängt Klicks ab */
  max-width: 420px;
  box-shadow: 0 10px 45px rgba(0,0,0,0.9), 0 0 35px rgba(230, 182, 85, 0.35);
  z-index: 110;
}

.bid-quick-select {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.quick-bid-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-bid-btn:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: translateY(-2px);
}

.quick-bid-btn.active {
  background: var(--gold);
  color: #1a1205;
  border-color: var(--gold2);
  box-shadow: 0 2px 12px rgba(230, 182, 85, 0.45);
}

.caligo-modal {
  background: linear-gradient(180deg, #161a33 0%, #0d1020 100%);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 1.8rem;
  width: min(92vw, 440px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 30px rgba(230, 182, 85, 0.2);
  text-align: center;
  position: relative;
}

.modal-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold2);
  margin-bottom: 0.5rem;
}

.modal-desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

/* WETT-SLIDER & STICHE */
.bid-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.bid-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(230, 182, 85, 0.1);
  color: var(--gold2);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bid-value {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: #fff;
  font-weight: 700;
  min-width: 60px;
}

.modal-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.btn-caligo {
  background: linear-gradient(135deg, #f6d27a, #c8902f);
  color: #1a1205;
  border: none;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(230, 182, 85, 0.3);
}

.btn-caligo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(230, 182, 85, 0.5);
}

.btn-caligo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(40%);
  transform: none !important;
  box-shadow: none !important;
}

.btn-caligo.ready-to-confirm {
  background: linear-gradient(135deg, #ffd700, #ff9f1c) !important;
  color: #111 !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.75), 0 6px 20px rgba(0,0,0,0.8) !important;
  transform: scale(1.04);
  animation: confirmPulse 1.6s infinite ease-in-out;
}

@keyframes confirmPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 215, 0, 0.55); }
  50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.95), 0 0 10px #fff; }
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
}

/* W12 WÜRFEL-ANIMATION */
.dice-container {
  margin: 1.5rem auto;
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d12-die {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #2d3652, #141829);
  border: 2px solid var(--gold);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-family: var(--serif);
  color: var(--gold2);
  box-shadow: 0 0 25px rgba(230, 182, 85, 0.4);
}

.d12-die.rolling {
  animation: diceSpin 0.7s infinite linear;
}

@keyframes diceSpin {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(0.9); }
}

/* FARB-WAHL (TIPPIN) */
.faction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 1rem 0;
}

.fac-btn {
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  transition: all 0.2s;
}

.fac-btn.blau { border-color: var(--blau); }
.fac-btn.gelb { border-color: var(--gelb); }
.fac-btn.gruen { border-color: var(--gruen); }
.fac-btn.rot { border-color: var(--rot); }

.fac-btn:hover {
  transform: scale(1.04);
  background: rgba(255,255,255,0.1);
}

/* =========================================
   VISUELLE KARTENAUSWAHL IN MODALEN (LILLI, WOLF, BESCHWORENE)
   ========================================= */
.picker-section {
  text-align: left;
  background: rgba(18, 21, 40, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
}

.picker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: #fff;
}

.picker-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #111;
  font-weight: 800;
  font-size: 0.75rem;
}

.visual-card-row {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.05);
}

.visual-card-item {
  width: 86px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: rgba(255, 255, 255, 0.03);
}

.visual-card-item:hover:not(.disabled) {
  border-color: rgba(230, 182, 85, 0.5);
  transform: translateY(-4px) scale(1.04);
  background: rgba(230, 182, 85, 0.08);
}

.visual-card-item.selected {
  border-color: var(--gold) !important;
  background: rgba(230, 182, 85, 0.18) !important;
  box-shadow: 0 0 16px rgba(230, 182, 85, 0.85), 0 4px 12px rgba(0,0,0,0.8);
  transform: translateY(-5px) scale(1.06);
}

.visual-card-thumb {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #111;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

.visual-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visual-card-tag {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

.visual-card-name {
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: #ccc;
}

.visual-card-item.selected .visual-card-name {
  color: var(--gold2);
  font-weight: 700;
}

.visual-card-item.disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(80%);
}

.visual-card-lock {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #ff5a47;
  text-align: center;
  padding: 2px;
}

.beschworener-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.beschworener-card-opt {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.beschworener-card-opt:hover {
  border-color: var(--gold);
  transform: translateY(-4px) scale(1.02);
  background: rgba(230, 182, 85, 0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.beschworener-thumb {
  width: 100px;
  height: 145px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.8);
}

.beschworener-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-pfeil-magister {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 17, 34, 0.95);
  color: #fff;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1.5px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.badge-pfeil-hale {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: #eef1f7;
  color: #000;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1.5px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.pfeil-choice-title {
  font-weight: 800;
  margin-top: 0.65rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.pfeil-choice-title.magister-title {
  color: #fff;
}

.pfeil-choice-title.hale-title {
  color: #e6e9f2;
}

.pfeil-symbol {
  font-weight: 900;
  display: inline-block;
  transform: scale(1.15);
}

.pfeil-symbol.pfeil-magister {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.pfeil-symbol.pfeil-hale {
  color: #000;
  background: #eef1f7;
  border-radius: 5px;
  padding: 0 0.3rem;
}

/* =========================================
   TIPPIN EMOTE DYNAMIK & INTRO VIDEO OVERLAY
   ========================================= */
.messenger-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.messenger-avatar img.emote-pop {
  animation: emotePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emotePop {
  0% { transform: scale(0.65) rotate(-6deg); opacity: 0.5; }
  55% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.game-intro-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.game-intro-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.intro-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1100px;
  max-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 0 50px rgba(0,0,0,0.9);
}

.intro-skip-btn {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: rgba(18, 21, 40, 0.9);
  border: 1px solid var(--gold);
  color: var(--gold2);
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-weight: 700;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.intro-skip-btn:hover {
  background: var(--gold);
  color: #111;
  transform: scale(1.05);
}

/* =========================================
   RESPONSIVE OPTIMIERUNG
   ========================================= */
@media (max-width: 768px) {
  .felt-table {
    border-radius: 60px;
    height: 65vh;
  }
  .trick-card {
    width: 65px;
    height: 95px;
  }
  .hand-area {
    height: 155px;
    margin-top: -70px;
  }
  .seat.seat-bottom {
    bottom: 60px;
  }
  .hand-card {
    width: 90px;
    height: 130px;
    margin-left: -30px;
  }
  .hand-card:hover:not(.illegal) {
    transform: translateY(-24px) scale(1.22) !important;
  }
  .seat-avatar {
    width: 46px;
    height: 46px;
  }
  .speech-bubble {
    font-size: 0.75rem;
    max-width: 140px;
  }

  /* Mobil-Showcase Anpassungen: Optimale Breite & nie verdeckt */
  .felt-table:has(.showcase-active) .seat.seat-left,
  .felt-table:has(.showcase-active) .seat.seat-right {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .showcase-cards-row {
    gap: 4px;
    padding: 10px 2px 4px 2px;
  }

  .showcase-card-item {
    width: clamp(60px, 20vw, 75px);
  }

  .showcase-player-badge {
    font-size: 0.6rem;
    padding: 1px 4px;
    margin-bottom: 3px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .showcase-player-badge .badge-player-name {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .showcase-winner-crown {
    font-size: 0.58rem;
    padding: 1px 6px;
    top: -10px;
  }

  .showcase-summary-bar {
    margin-top: 8px;
    gap: 6px;
  }

  .showcase-summary-text {
    padding: 5px 10px;
  }

  .showcase-winner-text {
    font-size: 0.85rem;
  }

  .showcase-reason-text {
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .btn-caligo-continue {
    padding: 0.48rem 1.4rem;
    font-size: 0.92rem;
  }

  .felt-table:has(.showcase-active) .thurum-messenger {
    z-index: 50;
    pointer-events: none;
  }

  .felt-table:has(.showcase-active) .thurum-messenger .messenger-bubble {
    display: none !important;
  }
}

/* =========================================
   TIPPIN STUDIO & ANIMATIONS-GALERIE
   ========================================= */
.tippin-studio-container {
  width: min(96vw, 760px);
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  padding: 1.2rem;
  background: radial-gradient(circle at 50% 15%, #181d33 0%, #0e111f 100%);
  border: 1.5px solid var(--gold);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(230, 182, 85, 0.3);
}

.studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}

.studio-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at center, #1b3528 0%, #0d1a14 70%, #080d0a 100%);
  border: 1.5px solid #2e5d42;
  border-radius: 14px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 6px 20px rgba(0,0,0,0.6);
  position: relative;
}

.studio-stage-viewport {
  width: 140px;
  height: 175px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.92)) drop-shadow(0 0 14px rgba(230, 182, 85, 0.35));
}

.studio-stage-viewport img,
.studio-stage-viewport video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.studio-stage-meta {
  margin-top: 0.8rem;
  text-align: center;
}

.studio-stage-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold2);
  font-weight: 700;
}

.studio-stage-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.studio-stage-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.studio-section-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold);
  margin: 1.2rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.studio-card {
  background: rgba(18, 21, 40, 0.75);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}

.studio-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}

.studio-card.active-preview {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
  background: rgba(230, 182, 85, 0.12);
}

.studio-card.is-disabled {
  opacity: 0.45;
  border-color: #d9534f;
  background: rgba(40, 15, 15, 0.5);
}

.studio-card-thumb {
  width: 72px;
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.studio-card-thumb img,
.studio-card-thumb video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.studio-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-bottom: 0.2rem;
}

.studio-card-cat {
  font-size: 0.65rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.studio-card-actions {
  display: flex;
  gap: 0.35rem;
  width: 100%;
}

.studio-btn-test {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 0.68rem;
  padding: 0.25rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.studio-btn-test:hover {
  background: var(--gold);
  color: #111;
  font-weight: 700;
}

.studio-btn-toggle {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4caf50;
  color: #a5d6a7;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.studio-card.is-disabled .studio-btn-toggle {
  background: rgba(244, 67, 54, 0.2);
  border-color: #f44336;
  color: #ef9a9a;
}

.studio-summary-box {
  background: rgba(14, 17, 34, 0.95);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.85rem;
}

/* =========================================
   TIPPIN AKADEMIE & RATGEBER MIT REITERN (TABS)
   ========================================= */
.tippin-guide-modal {
  width: min(96vw, 760px);
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  padding: 1.25rem 1.4rem;
  background: radial-gradient(circle at 50% 10%, #1a1e36 0%, #0d1021 100%);
  border: 1.5px solid var(--gold);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(230, 182, 85, 0.3);
}

.guide-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
}

.guide-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  overflow: hidden;
  background: #0d111a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(230, 182, 85, 0.4);
}

.guide-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border-bottom: 1px solid rgba(230, 182, 85, 0.25);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.guide-tab-btn {
  background: rgba(18, 21, 40, 0.85);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.guide-tab-btn:hover {
  background: rgba(230, 182, 85, 0.15);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}

.guide-tab-btn.active {
  background: linear-gradient(135deg, rgba(230, 182, 85, 0.35), rgba(18, 21, 40, 0.98));
  border-color: #ffd700;
  color: var(--gold2);
  box-shadow: 0 4px 14px rgba(230, 182, 85, 0.35);
}

.guide-tab-pane {
  display: none;
  animation: guideFadeIn 0.2s ease;
}

.guide-tab-pane.active {
  display: block;
}

@keyframes guideFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.guide-rule-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.85rem;
}

.guide-rule-card h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold2);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.guide-rule-card p {
  font-size: 0.83rem;
  line-height: 1.48;
  color: var(--text);
  margin-bottom: 0.4rem;
}


/* ============================================================
   MOBILE GAME FIXES (STICHE-ANSAGE, TOPBAR & ELEVATED HAND)
   ============================================================ */

/* Handkarten während des Bietens: Prominent hochgezogen & 100% sichtbar! */
.bidding-active .hand-area {
  z-index: 200 !important;
  position: fixed !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  height: 160px !important;
  margin-top: 0 !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 14, 0.88) 35%, rgba(5, 7, 14, 0.98) 100%) !important;
  padding-bottom: 6px !important;
}

.bidding-active .hand-card {
  transform: translateY(-24px) scale(1.08) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.95), 0 0 16px rgba(246, 210, 122, 0.5) !important;
  border-color: rgba(246, 210, 122, 0.85) !important;
}

.bidding-active .hand-card:hover {
  transform: translateY(-42px) scale(1.25) !important;
  z-index: 250 !important;
}

/* Topbar für alle mobilen & kompakten Breiten/Höhen */
@media (max-width: 900px), (max-height: 550px) {
  .game-topbar {
    height: 44px !important;
    padding: 0 6px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .brand-section {
    gap: 4px !important;
    flex: 1 !important;
    white-space: nowrap !important;
    align-items: center !important;
  }
  .brand-title {
    font-size: 0.9rem !important;
    letter-spacing: 0.1em !important;
    padding-right: 2px !important;
  }
  .meta-pill {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.74rem !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .meta-bid-pill {
    white-space: nowrap !important;
  }
  /* Lange Beschriftungen ausblenden, Fokus auf Emoji + Zahl */
  .meta-pill .meta-label {
    display: none !important;
  }
  .game-meta #radio-title,
  .game-meta .meta-pill:has(#radio-title) {
    display: none !important;
  }
  .top-controls {
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .icon-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 768px) {
  /* Stich-Ansage Modal mobil (Portrait): Kompakt & oben verankert */
  .modal-overlay.bidding-mode {
    align-items: flex-start !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: 170px !important;
    overflow-y: auto !important;
  }
  .modal-overlay.bidding-mode .caligo-modal {
    width: min(94vw, 360px) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.95), 0 0 25px rgba(230, 182, 85, 0.3) !important;
  }
  .modal-overlay.bidding-mode .modal-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.2rem !important;
  }
  .modal-overlay.bidding-mode .modal-desc {
    font-size: 0.76rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.25 !important;
  }
  .modal-overlay.bidding-mode .bid-picker {
    gap: 0.7rem !important;
    margin: 0.2rem 0 !important;
  }
  .modal-overlay.bidding-mode .bid-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.15rem !important;
  }
  .modal-overlay.bidding-mode .bid-value {
    font-size: 1.7rem !important;
    min-width: 40px !important;
  }
  .modal-overlay.bidding-mode .bid-quick-select {
    margin: 0.35rem 0 !important;
    gap: 0.35rem !important;
  }
  .modal-overlay.bidding-mode .quick-bid-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
  }
  .modal-overlay.bidding-mode p.small {
    margin: 0.25rem 0 0.55rem !important;
    font-size: 0.78rem !important;
  }
  .modal-overlay.bidding-mode #btn-confirm-bid {
    padding: 0.55rem 1.2rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }

  /* Tippin Sims-Menü auf dem Handy: Kompakte 2-Spalten Anordnung */
  .tippin-sims-menu {
    bottom: 85px !important;
    right: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    max-width: 290px !important;
    z-index: 90 !important;
  }
  .sims-bubble-btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.72rem !important;
    gap: 0.3rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .sims-bubble-btn .bubble-icon {
    font-size: 0.95rem !important;
  }
}

/* Landscape / Querformat auf dem Handy (max-height: 550px): Kein Abschneiden, Hand & Modal gleichzeitig sichtbar! */
@media (max-height: 550px) {
  .felt-table {
    height: 54vh !important;
  }
  .modal-overlay {
    overflow-y: auto !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
  }
  .caligo-modal {
    max-height: 94vh !important;
    overflow-y: auto !important;
    padding: 0.45rem 0.8rem !important;
  }
  .modal-overlay.bidding-mode {
    align-items: flex-start !important;
    padding-top: 48px !important;
    padding-bottom: 115px !important;
  }
  .modal-overlay.bidding-mode .caligo-modal {
    width: min(85vw, 400px) !important;
    padding: 0.4rem 0.8rem !important;
  }
  .modal-overlay.bidding-mode .modal-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.15rem !important;
  }
  .modal-overlay.bidding-mode .modal-desc {
    display: none !important;
  }
  .modal-overlay.bidding-mode .bid-picker {
    margin: 0.1rem 0 !important;
    gap: 0.5rem !important;
  }
  .modal-overlay.bidding-mode .bid-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }
  .modal-overlay.bidding-mode .bid-value {
    font-size: 1.35rem !important;
    min-width: 32px !important;
  }
  .modal-overlay.bidding-mode .bid-quick-select {
    margin: 0.15rem 0 !important;
    gap: 0.25rem !important;
  }
  .modal-overlay.bidding-mode .quick-bid-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.82rem !important;
  }
  .modal-overlay.bidding-mode p.small {
    display: none !important;
  }
  .modal-overlay.bidding-mode #btn-confirm-bid {
    padding: 0.38rem 0.9rem !important;
    font-size: 0.85rem !important;
    width: 100% !important;
  }

  /* In Querformat: Handkarten kleiner und tiefer positioniert */
  .bidding-active .hand-area {
    height: 110px !important;
    bottom: 2px !important;
    padding-bottom: 2px !important;
  }
  .bidding-active .hand-card {
    width: 70px !important;
    height: 102px !important;
    margin-left: -20px !important;
    transform: translateY(-12px) !important;
  }
}


/* =========================================================
   TIPPIN TOGGLE & DEACTIVATION
   ========================================================= */
body.tippin-disabled #thurum-messenger,
body.tippin-disabled #tippin-sims-menu {
  display: none !important;
}

#btn-toggle-tippin.muted {
  opacity: 0.45;
  filter: grayscale(1);
}

/* =========================================================
   REVIEW LAST TRICK BUTTON (TISCHMITTE)
   ========================================================= */
.btn-review-last-trick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(14, 18, 32, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold2, #f5d77f);
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-review-last-trick:hover {
  background: rgba(230, 182, 85, 0.18);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

/* =========================================================
   ELIMINATED PLAYER SEAT STYLING (BANKROTT / RAUSGEKICKT)
   ========================================================= */
.seat.eliminated {
  opacity: 0.45;
  filter: grayscale(0.85);
  border-color: rgba(255, 60, 60, 0.3) !important;
  pointer-events: none;
}

.seat.eliminated .seat-avatar::after {
  content: "💀";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.9);
}

.eliminated-badge {
  display: inline-block;
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  color: #ff6b6b;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* =========================================================
   STICH-HISTORIE REVIEW MODAL (VOLLSTÄNDIGE ANALYSE)
   ========================================================= */
.trick-history-modal {
  width: min(96vw, 760px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.trick-pills-bar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trick-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--text-dim, #a3a8c3);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.trick-pill-btn:hover {
  color: #fff;
  border-color: var(--gold);
}

.trick-pill-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold);
  color: var(--gold2, #f5d77f);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.trick-history-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.history-card-slot {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.2s;
}

.history-card-slot.is-winner {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.09);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

.history-card-slot .winner-crown-badge {
  position: absolute;
  top: -10px;
  background: linear-gradient(135deg, #f6d27a, #c8902f);
  color: #120e05;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  z-index: 2;
  white-space: nowrap;
}

.history-card-img-wrap {
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 6px;
  overflow: hidden;
  margin: 0.4rem 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #000;
}

.history-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-player-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-top: 0.2rem;
}

.history-card-meta {
  font-size: 0.72rem;
  color: var(--text-dim, #a3a8c3);
  text-align: center;
  line-height: 1.3;
}

.history-card-meta b {
  color: var(--gold2, #f5d77f);
}

.history-rule-explanation-box {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 0.4rem;
}

.history-rule-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--gold2, #f5d77f);
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.history-rule-desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #e2e4f0;
}

/* ==========================================
   CASSIAN-TAUSCH: Fenster mit Animation + Hinweisband
   ========================================== */
.cassian-swap-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.4rem;
}
.cassian-swap-slot { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 140px; }
.cassian-swap-owner { font-weight: 800; color: var(--gold2, #ffdc8a); font-size: 0.95rem; }
.cassian-swap-arrows { font-size: 2rem; color: var(--gold2, #ffdc8a); animation: cassianArrowPulse 1.2s ease-in-out infinite; }
.cassian-swap-card { width: 120px; position: relative; z-index: 2; }
.cassian-swap-card img { width: 100%; border-radius: 8px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
.cassian-swap-card.to-right { animation: cassianSlideRight 1.3s cubic-bezier(.5,0,.3,1) 0.7s both; }
.cassian-swap-card.to-left  { animation: cassianSlideLeft  1.3s cubic-bezier(.5,0,.3,1) 0.7s both; }
.cassian-swap-result { opacity: 0; font-size: 0.95rem; margin-top: 0.6rem; animation: cassianFadeIn 0.5s ease 2.1s forwards; }
@keyframes cassianSlideRight {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(95px, -34px) rotate(8deg) scale(1.08); }
  100% { transform: translate(190px, 0) rotate(0deg) scale(1); }
}
@keyframes cassianSlideLeft {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-95px, 34px) rotate(-8deg) scale(1.08); }
  100% { transform: translate(-190px, 0) rotate(0deg) scale(1); }
}
@keyframes cassianArrowPulse { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes cassianFadeIn { to { opacity: 1; } }

.caligo-notice-stack {
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(92vw, 520px);
  pointer-events: none;
}
.caligo-table-notice {
  position: relative;
  transform: translateY(-20px);
  opacity: 0;
  max-width: 100%;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: rgba(15, 12, 30, 0.94);
  border: 1px solid var(--gold, #e6b655);
  color: #f1eeff;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.caligo-table-notice.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 520px) {
  .cassian-swap-slot { width: 100px; }
  .cassian-swap-card { width: 90px; }
  .cassian-swap-card.to-right { animation-name: cassianSlideRightSm; }
  .cassian-swap-card.to-left  { animation-name: cassianSlideLeftSm; }
  @keyframes cassianSlideRightSm { 0% { transform: translate(0,0); } 50% { transform: translate(75px,-28px) rotate(8deg); } 100% { transform: translate(150px,0); } }
  @keyframes cassianSlideLeftSm  { 0% { transform: translate(0,0); } 50% { transform: translate(-75px,28px) rotate(-8deg); } 100% { transform: translate(-150px,0); } }
}

/* ==========================================
   TOUCH-BEDIENUNG DER HAND (Handy / Tablet)
   Wischen = Karte ansehen (wird größer + hebt sich an)
   Nach oben auf den Tisch ziehen = Karte spielen
   ========================================== */
@media (pointer: coarse) {
  #card-fan,
  #card-fan .hand-card {
    /* pinch-zoom statt none: Einfinger-Wischen/Ziehen gehört dem Spiel, Zwei-Finger-Zoomen bleibt auch über der Hand möglich
       (sonst kann man nach dem Heranzoomen nur noch außerhalb der Karten herauszoomen) */
    touch-action: pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* Kein "klebendes" Hover nach dem Antippen auf Touch-Geräten */
@media (hover: none) {
  #card-fan .hand-card:hover:not(.touch-focus):not(.touch-dragging) {
    transform: var(--rest-transform, none) !important;
    z-index: var(--rest-z, auto) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.78) !important;
  }
}

#card-fan .hand-card.touch-focus {
  transform: translateX(var(--focus-shift, 0px)) translateY(-64px) scale(1.55) rotate(0deg) !important;
  z-index: 300 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.95), 0 0 34px rgba(246, 210, 122, 0.85) !important;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

#card-fan .hand-card.touch-dragging {
  transition: none !important;
  z-index: 400 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 36px rgba(246, 210, 122, 0.9) !important;
  pointer-events: none;
}

#card-fan .hand-card.touch-dragging.drop-ready {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px #4caf50, 0 0 44px rgba(76, 175, 80, 0.95) !important;
}

/* Tisch zeigt beim Ziehen, wohin die Karte soll */
.felt-table.drop-target {
  outline: 2px dashed rgba(255, 215, 0, 0.7);
  outline-offset: -10px;
  animation: dropTargetPulse 1s ease-in-out infinite;
}
@keyframes dropTargetPulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.10); }
  50%      { box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.28); }
}

@media (max-width: 520px) {
  .caligo-notice-stack { top: 6%; max-width: 94vw; }
  .caligo-table-notice { font-size: 0.82rem; padding: 0.55rem 0.8rem; }
}

/* ==========================================
   SPIELERWAHL + Hinweise im Rundenende-Fenster
   ========================================== */
.player-choice-grid { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.player-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  text-align: left; padding: 0.8rem 1rem; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line, rgba(255,255,255,0.18)); color: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.player-choice b { font-size: 1.05rem; color: var(--gold2, #ffdc8a); }
.player-choice span { font-size: 0.88rem; color: var(--muted, #9a98b0); }
.player-choice:hover, .player-choice:focus-visible, .player-choice.preselected { border-color: var(--gold, #e6b655); background: rgba(230, 182, 85, 0.1); outline: none; }
.player-choice:active { transform: scale(0.98); }

.round-notice {
  margin: 0.6rem 0; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 0.9rem; line-height: 1.4; text-align: left;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line, rgba(255,255,255,0.18));
}
.round-notice.out { background: rgba(255, 80, 80, 0.08); border-color: rgba(255, 80, 80, 0.4); }

/* Sitze ohne Spieler (z. B. 4. Platz bei 3 Spielern oder im Duell) */
.seat.seat-unused { display: none !important; }
#seat-top.seat-unused, #seat-left.seat-unused, #seat-right.seat-unused, #seat-bottom.seat-unused { display: none !important; }

/* Platzhalter-Avatar (Symbol statt Porträt) */
.seat-avatar img.avatar-icon { object-fit: contain; padding: 22%; background: radial-gradient(circle, #2a2438 0%, #11101c 100%); }

/* Auswahl der Gegner-Stufe im Start-Dialog */
.level-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1rem; }
.level-row > span { color: var(--muted, #a7a399); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-right: .3rem; }
.level-choice { padding: .45rem 1rem; border-radius: 999px; border: 1px solid rgba(217,173,90,.5); background: rgba(217,173,90,.08); color: var(--gold2, #f3d596); font: 600 .9rem/1 inherit; cursor: pointer; }
.level-choice.active { background: linear-gradient(135deg, #f3d596, #c9953a); color: #1a1205; border-color: transparent; }

/* Karte, die den Stich im Moment gewinnen würde: schmaler goldener Rand */
.trick-card.is-leading {
  border: 3px solid #ffd45c;
  box-shadow: 0 0 0 2px rgba(255,244,214,.9), 0 0 26px 6px rgba(255,200,70,.85), 0 10px 26px rgba(0,0,0,0.75);
  /* nicht mehr vergrößern/nach oben holen (08.11.2026): die Legereihenfolge der Karten soll lesbar bleiben */
}


/* =========================================================================
   Runden-Abrechnung (Ergebnis oben, Rechnung ausklappbar) und Stich-Historie (06.11.2026)
   ========================================================================= */
.caligo-modal.round-end { width: min(94vw, 640px); max-height: 92vh; overflow-y: auto; }
.re-banner { margin: .6rem 0; padding: .7rem 1rem; border-radius: 12px; text-align: center; font-size: 1.02rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.re-banner.win { background: linear-gradient(135deg, rgba(230,182,85,.22), rgba(230,182,85,.06)); border-color: rgba(230,182,85,.65); color: #fff3d6; }
.re-banner.none { background: rgba(255,112,67,.1); border-color: rgba(255,112,67,.45); color: #ffd0c0; }
.re-results { display: grid; gap: .45rem; margin: .8rem 0; }
.re-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .8rem; padding: .6rem .85rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); text-align: left; }
.re-row.you { border-color: rgba(230,182,85,.6); background: rgba(230,182,85,.08); }
.re-row.hit { border-left: 4px solid #4caf50; }
.re-row.miss { border-left: 4px solid #ffb74d; }
.re-row.out { border-left: 4px solid #ff5252; opacity: .75; }
.re-who b { display: block; font-size: 1.02rem; color: #fff; }
.re-row.you .re-who b { color: var(--gold2, #f3d596); }
.re-who span { font-size: .8rem; color: var(--muted, #a7a399); }
.re-row.hit .re-who span { color: #7ed081; }
.re-row.miss .re-who span { color: #ffb74d; }
.re-tricks, .re-total { text-align: center; line-height: 1.15; }
.re-tricks b, .re-total b { display: block; font-size: 1.05rem; color: #fff; }
.re-tricks span, .re-total span { font-size: .7rem; color: var(--muted, #a7a399); }
.re-total b { color: var(--gold2, #f3d596); font-size: 1.2rem; }
.re-delta { min-width: 4.2rem; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--muted, #a7a399); }
.re-delta.plus { color: #66d36e; } .re-delta.minus { color: #ff7a59; }

.re-calc { margin: .9rem 0 .2rem; border: 1px solid rgba(230,182,85,.4); border-radius: 12px; background: rgba(0,0,0,.28); text-align: left; }
.re-calc > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 1rem; font-weight: 700; color: var(--gold2, #f3d596); }
.re-calc > summary::-webkit-details-marker { display: none; }
.re-calc > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.re-calc[open] > summary::after { transform: rotate(180deg); }
.re-calc > summary small { font-weight: 500; color: var(--muted, #a7a399); }
.re-steps { list-style: none; margin: 0; padding: 0 1rem .4rem; display: grid; gap: .55rem; }
.re-steps li { display: flex; gap: .7rem; align-items: flex-start; }
.re-step-no { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: rgba(230,182,85,.2); color: var(--gold2, #f3d596); border: 1px solid rgba(230,182,85,.55); }
.re-steps li b { color: #fff; font-size: .92rem; }
.re-step-body { font-size: .85rem; line-height: 1.5; color: #dcd8e8; }
.re-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .35rem; }
.re-chip { padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.re-chip.hit { border-color: rgba(76,175,80,.7); color: #b7f0ba; } .re-chip.miss { border-color: rgba(255,183,77,.55); color: #ffd9a0; }
.re-table-wrap { overflow-x: auto; padding: 0 1rem; }
.re-table { width: 100%; border-collapse: collapse; font-size: .8rem; text-align: center; margin-top: .4rem; }
.re-table th { color: var(--muted, #a7a399); font-weight: 600; padding: .3rem .4rem; border-bottom: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.re-table td { padding: .35rem .4rem; border-bottom: 1px dashed rgba(255,255,255,.08); }
.re-table .l { text-align: left; }
.re-table tr.hit td:nth-child(5) { color: #9fe3a3; } .re-table tr.miss td:nth-child(5) { color: #ffcf8a; }
.re-table .d.plus { color: #66d36e; font-weight: 800; } .re-table .d.minus { color: #ff7a59; font-weight: 800; }
.re-rule { margin: .6rem 1rem 1rem; font-size: .76rem; color: var(--muted, #a7a399); line-height: 1.45; }
.re-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.re-actions .btn-ghost { padding: .65rem 1.3rem; }
.re-actions .btn-caligo { font-size: 1.02rem; padding: .75rem 1.8rem; }
@media (max-width: 520px) {
  .re-row { grid-template-columns: 1fr auto auto; } .re-tricks { display: none; }
  .re-table th:nth-child(2), .re-table td:nth-child(2), .re-table th:nth-child(3), .re-table td:nth-child(3) { display: none; }
}

/* Stich-Historie */
.trick-history-modal { width: min(96vw, 820px); }
.th-standing { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .2rem 0 .7rem; }
.th-stand { padding: .2rem .7rem; border-radius: 999px; font-size: .82rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.th-stand.you { border-color: rgba(230,182,85,.6); }
.th-stand b { color: #fff; } .th-stand small { color: var(--muted, #a7a399); }
.th-nav { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.th-arrow { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(230,182,85,.5); background: rgba(230,182,85,.1); color: var(--gold2, #f3d596); cursor: pointer; }
.th-arrow:disabled { opacity: .3; cursor: default; }
.th-chips { flex: 1; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: thin; padding: .2rem; }
.th-chip { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #ddd; cursor: pointer; font-size: .8rem; }
.th-chip span { font-size: .68rem; color: var(--muted, #a7a399); }
.th-chip.active { background: linear-gradient(135deg, #f3d596, #c9953a); color: #1a1205; border-color: transparent; }
.th-chip.active span { color: #5a3d0c; }
.th-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; color: #fff; }
.th-head span { font-size: .85rem; color: var(--muted, #a7a399); } .th-head span b { color: var(--gold2, #f3d596); }
.trick-history-modal .trick-history-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.trick-history-modal .history-card-slot { max-width: none; }
.th-order { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #a7a399); margin-bottom: .1rem; }
.th-card-name { font-size: .8rem; font-weight: 700; color: #fff; text-align: center; margin-top: .2rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.trick-history-modal .history-card-meta { font-size: .76rem; text-align: center; line-height: 1.25; }
.th-effects { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed rgba(230,182,85,.35); font-size: .82rem; color: var(--gold2, #f3d596); text-align: left; }
.th-effects ul { margin: .25rem 0 0 1.1rem; padding: 0; color: #e9e6f2; }

/* =========================================================================
   Spielleiste im neuen Design (Chronik): goldene Schrift, Glasflächen, wechselnde Landschaftsbilder
   ========================================================================= */
.game-topbar { position: relative; overflow: visible; background: #06070d; border-bottom: 1px solid rgba(230,182,85,.4); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.game-topbar > .hdr-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.game-topbar > :not(.hdr-art) { position: relative; z-index: 1; }
.hdr-art i { position: absolute; inset: 0; background-size: cover; background-position: center 45%; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.32) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.32) 100%); }
.hdr-art i.on { opacity: 1; }
.hdr-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,7,13,0) 0%, rgba(6,7,13,.3) 50%, rgba(6,7,13,.62) 100%), linear-gradient(180deg, rgba(6,7,13,.05) 0%, rgba(6,7,13,.45) 100%); }
.game-topbar .brand-title { font-family: 'Cinzel', var(--serif, serif); font-weight: 900; letter-spacing: .3em; color: #f3d596; text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.game-topbar .meta-pill { background: rgba(6,7,13,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(230,182,85,.45); color: #ece8dc; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.game-topbar .meta-coins-pill { background: linear-gradient(135deg, rgba(230,182,85,.28), rgba(6,7,13,.6)); border-color: rgba(243,213,150,.8); }
.game-topbar .icon-btn { background: rgba(6,7,13,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(230,182,85,.5); }
.game-topbar .icon-btn:hover { background: rgba(230,182,85,.25); }
.game-topbar .icon-btn svg { fill: #f3d596; }
@media (prefers-reduced-motion: reduce) { .hdr-art i { transition: none; } }

/* =========================================================================
   Audio-Menü in der Spielleiste: Schallplatte mit Caligo-Zeichen (dreht sich bei Musik) + Dropdown
   ========================================================================= */
.audio-menu { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.vinyl-btn { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(230,182,85,.55); border-radius: 50%; background: rgba(6,7,13,.55); cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vinyl-btn:hover { background: rgba(230,182,85,.2); }
.vinyl-disc { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #222 15%, #0d0e14 55%, #191c28 85%, #05060a 100%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 8px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.6); }
.vinyl-disc.spinning { animation: gameVinylSpin 4s linear infinite; }
@keyframes gameVinylSpin { to { transform: rotate(360deg); } }
.vinyl-grooves { position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); }
.vinyl-center { position: relative; width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle, #1a2032 25%, #0d101a 100%); border: 1.5px solid rgba(212,175,55,.9); display: grid; place-items: center; box-shadow: 0 0 8px rgba(212,175,55,.5); overflow: hidden; }
.vinyl-center svg { width: 14px; height: 14px; filter: drop-shadow(0 0 3px rgba(255,215,107,.9)); fill: #f3d596; }
.vinyl-btn.is-paused .vinyl-center { box-shadow: none; opacity: .8; }
.audio-caret { width: 20px; height: 40px; border: 0; background: transparent; color: #f3d596; cursor: pointer; font-size: .8rem; padding: 0; }

.audio-panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(330px, 92vw); max-height: 78vh; overflow-y: auto; z-index: 200;
  padding: .8rem; border-radius: 14px; background: rgba(10,12,24,.96); border: 1px solid rgba(230,182,85,.55); box-shadow: 0 16px 40px rgba(0,0,0,.75); text-align: left; color: #ece8dc;
  visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.audio-menu.open .audio-panel { visibility: visible; opacity: 1; transform: none; }
.am-now { display: flex; flex-direction: column; gap: 1px; margin-bottom: .55rem; }
.am-now small { color: #a7a399; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.am-now b { font-size: .98rem; color: #f3d596; line-height: 1.25; }
.am-transport { display: flex; justify-content: center; gap: .5rem; margin-bottom: .6rem; }
.am-transport button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(230,182,85,.5); background: rgba(230,182,85,.1); color: #f3d596; cursor: pointer; font-size: .95rem; }
.am-transport button.main { width: 46px; height: 46px; background: linear-gradient(135deg, #f3d596, #c9953a); color: #1a1205; border-color: transparent; }
.am-switch { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .2rem; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.1); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; text-align: left; }
.am-switch .sw { flex: 0 0 auto; width: 38px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; }
.am-switch .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.am-switch.on .sw { background: #c9953a; } .am-switch.on .sw::after { transform: translateX(18px); }
.am-list { border-top: 1px solid rgba(255,255,255,.1); margin-top: .2rem; }
.am-list > summary { cursor: pointer; padding: .5rem .2rem; font-size: .88rem; color: #f3d596; list-style: none; }
.am-list > summary::-webkit-details-marker { display: none; }
.am-list > summary::before { content: '▸ '; } .am-list[open] > summary::before { content: '▾ '; }
.am-tracks { max-height: 190px; overflow-y: auto; display: grid; gap: 2px; }
.am-station { margin: .35rem 0 .1rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #a7a399; }
.am-track { text-align: left; padding: .3rem .5rem; border-radius: 6px; border: 0; background: transparent; color: #ddd; font: inherit; font-size: .84rem; cursor: pointer; }
.am-track:hover { background: rgba(230,182,85,.14); }
.am-track.active { background: rgba(230,182,85,.22); color: #fff3d6; font-weight: 700; }
.am-sc { margin-top: .5rem; }
.am-sc .radio-sc-frame { width: 100%; height: 84px; border: 0; border-radius: 8px; display: block; }
.am-sc-link { display: block; margin-top: .35rem; font-size: .75rem; color: #f3d596; }
@media (max-width: 700px) { .audio-panel { position: fixed; right: .5rem; left: .5rem; top: 52px; width: auto; } }
.game-topbar:has(.audio-menu.open) { z-index: 150; }

/* Rat zur angesehenen Karte */
.card-advice { margin: .35rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; line-height: 1.45; text-align: left; }
.card-advice li b { color: var(--gold2, #f3d596); }

/* ---- Mehrspieler: Lobby, Beitritt ---- */
.mp-label { display: block; margin: .6rem 0 .25rem; font-size: .85rem; color: var(--muted, #a7a399); }
.mp-input { width: 100%; box-sizing: border-box; padding: .65rem .8rem; border-radius: 10px; border: 1px solid rgba(217,173,90,.35); background: rgba(8,10,18,.8); color: #fff; font: inherit; }
.mp-input:focus { outline: 2px solid var(--gold2, #f3d596); outline-offset: 1px; }
.mp-link-row { display: flex; gap: .5rem; align-items: stretch; }
.mp-link-row .mp-input { font-size: .78rem; }
.mp-seatlist { display: grid; gap: .45rem; margin-top: .6rem; }
.mp-seat { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; padding: .45rem .7rem; border: 1px solid rgba(217,173,90,.22); border-radius: 12px; background: rgba(12,15,26,.7); }
.mp-seat img, .mp-seat .mp-npc-icon { grid-row: 1 / span 2; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.4rem; }
.mp-seat b { color: #fff; text-align: left; }
.mp-seat span:not(.mp-npc-icon) { font-size: .78rem; color: var(--muted, #a7a399); text-align: left; }
.mp-seat.me { border-color: rgba(243,213,150,.55); }
.mp-seat.npc { opacity: .7; border-style: dashed; }
.mp-seat.wait { opacity: .8; }
.mp-choice { border-color: rgba(143,176,255,.5); }
.mp-waiting { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(5,6,12,.82); }
.mp-waiting-box { display: grid; gap: .5rem; padding: 1.4rem 1.8rem; text-align: center; border: 1px solid rgba(217,173,90,.4); border-radius: 14px; background: rgba(12,15,26,.95); color: #fff; max-width: min(90vw, 420px); }
.mp-waiting-box span { color: var(--muted, #a7a399); }

/* ---- Mehrspieler: Emotes, "Figur übernimmt" ---- */
.mp-emote-pop { position: fixed; top: 58px; right: 8px; z-index: 300; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; padding: .5rem; border: 1px solid rgba(217,173,90,.4); border-radius: 12px; background: rgba(12,15,26,.96); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.mp-emote-pop[hidden] { display: none; }
.mp-emote-pop button { padding: .45rem .7rem; border-radius: 9px; border: 1px solid rgba(217,173,90,.25); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; text-align: left; }
.mp-emote-pop button:hover { background: rgba(243,213,150,.16); }
.mp-slow { display: flex; align-items: center; gap: .7rem; pointer-events: auto; }
.mp-slow-btn { padding: .35rem .8rem; font-size: .8rem; white-space: nowrap; }
.mp-input.mp-bad { outline: 2px solid #e2543f; }

/* ---- Kleine Bildschirme (zum Beispiel iPhone SE 375x667): Fenster dürfen nie höher sein als der Bildschirm, sonst sind Knöpfe unten nicht erreichbar ---- */
#modal-container .caligo-modal { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-height: 740px) {
  .mp-lobby .modal-desc { margin: .2rem 0 .5rem; font-size: .85rem; }
  .mp-seat { padding: .3rem .6rem; grid-template-columns: 32px 1fr; }
  .mp-seat img, .mp-seat .mp-npc-icon { width: 30px; height: 30px; font-size: 1.15rem; }
  .mp-seatlist { gap: .3rem; margin-top: .4rem; }
  .mp-lobby .modal-title { font-size: 1.25rem; margin-bottom: .3rem; }
  .mp-lobby .level-row { margin-top: .5rem !important; }
  .mp-lobby .modal-actions { margin-top: .6rem !important; }
  .player-choice-grid .player-choice { padding: .6rem .8rem; }
}

/* ---- Handy: Tipps kleiner, Abrechnung mit festem Knopf unten ---- */
@media (max-width: 520px) {
  .messenger-bubble { max-width: 56vw; font-size: .7rem; padding: .45rem .65rem; line-height: 1.35; }
  .messenger-bubble .bubble-click-hint { display: none; }
  .messenger-bubble .bubble-header { margin-bottom: .2rem; }
  .caligo-table-notice { font-size: .74rem; padding: .45rem .7rem; line-height: 1.35; }
}
#modal-container .round-end .re-actions { position: sticky; bottom: -1px; z-index: 2; padding: .6rem 0 .2rem; margin-top: .4rem;
  background: linear-gradient(to top, rgba(14,17,34,.98) 75%, rgba(14,17,34,0)); }

/* ---- Zuschauer: keine Hand, keine Entscheidungen ---- */
body.mp-spectator #card-fan, body.mp-spectator .hand-area, body.mp-spectator #btn-mp-emote { display: none !important; }
body.mp-spectator::after { content: '👀 Du schaust zu'; position: fixed; left: 50%; bottom: .7rem; transform: translateX(-50%); z-index: 60; padding: .35rem .9rem; border-radius: 999px; background: rgba(12,15,26,.9); border: 1px solid rgba(217,173,90,.45); color: #f3d596; font-size: .85rem; pointer-events: none; }

/* Countdown über dem Namen (Mehrspieler) */
.mp-cd { margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; line-height: 1.5; white-space: nowrap;
  background: rgba(7, 8, 15, .9); border: 1px solid var(--gold); color: var(--gold); text-shadow: none; }
.mp-cd-off { border-color: #e0725a; color: #ffb4a3; animation: mpCdPulse 1s ease-in-out infinite; }
@keyframes mpCdPulse { 50% { opacity: .65; } }

.mp-expire { margin: .4rem 0 .6rem; font-size: .85rem; color: var(--gold); }
.mp-expire.warn { color: #ffb4a3; }

/* Lobby auf kleinen Bildschirmen: Knöpfe bleiben unten sichtbar */
@media (max-height: 760px) {
  .mp-lobby .modal-actions { position: sticky; bottom: -1px; padding: .6rem 0 .2rem; background: linear-gradient(180deg, transparent, rgba(12, 14, 28, .98) 30%); z-index: 2; }
}

/* Stich-Historie: Dimensionstor-Würfe */
.th-dimension { margin: .7rem 0 .2rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.28); font-size: .9rem; }
.th-dice { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .4rem; }
.th-die b { color: var(--text); font-weight: 600; margin-right: .25rem; }
.th-die.win { color: var(--gold); font-weight: 800; }
.th-stechen { margin-top: .35rem; color: var(--muted); }

/* "Letzten Stich prüfen": fester Platz oben links, damit der Knopf auf keinem Bildschirm hinter den Handkarten liegt */
.table-center .btn-review-last-trick {
  position: fixed !important; left: 12px; top: 70px; margin: 0 !important; z-index: 60;
}
@media (max-width: 900px), (max-height: 550px) {
  .table-center .btn-review-last-trick { top: 56px; left: 8px; }
}

.bid-leader { margin: .2rem 0 .6rem; font-size: .88rem; color: var(--gold2, #f3d596); text-align: center; }

/* Hover-Info zu Sonderkarten (erscheint nach 2 Sekunden, kompakt) */
#card-hover-tip { position: fixed; z-index: 400; width: 250px; max-width: 90vw; padding: .55rem .7rem .6rem; border-radius: 10px; pointer-events: none;
  background: rgba(12, 14, 28, .97); border: 1px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.8); color: var(--text); font-size: .8rem; line-height: 1.3; }
#card-hover-tip b { display: block; color: var(--gold2, #f3d596); font-family: var(--serif); font-size: .92rem; }
#card-hover-tip em { display: block; font-style: normal; color: var(--gold); font-size: .74rem; letter-spacing: .02em; margin: .1rem 0 .35rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(230,182,85,.3); }
#card-hover-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
#card-hover-tip li { padding-left: 0; }

/* === Handy: Menüleiste darf nie nach oben wegscrollen, seitlich schon (08.11.2026) === */
html, body { overscroll-behavior: none; }
#game-app { height: 100vh; height: 100dvh; }
@media (max-width: 900px), (max-height: 550px) {
  .game-topbar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0 !important;
  }
}

/* Abrechnung: buntes "+1" für die Corbin-Münze neben der Stichzahl */
.re-plus1 { font-style: normal; font-weight: 800; font-size: .72em; margin-left: .25em; padding: .05em .4em; border-radius: 999px; color: #fff; vertical-align: .15em;
  background: linear-gradient(135deg, #ff4fa3, #ff9d2e 50%, #3fd0ff); box-shadow: 0 0 6px rgba(255,120,200,.6); }

/* Dimensionstor-Stechen: kurzes Popup */
.stechen-modal .stechen-list { display: grid; gap: .6rem; margin: .8rem 0 .3rem; }
.stechen-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .8rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(230,182,85,.35); }
.stechen-name { font-weight: 700; color: #f3d596; }
.stechen-die { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }

/* Tippin: Rahmen über dem Tisch in der Farbe, die er annähme (bei weiß hellblau) */
#card-fan .hand-card.tippin-as-white.touch-dragging.drop-ready { border-color: #b57bff !important; box-shadow: 0 0 0 3px #b57bff, 0 0 44px rgba(181,123,255,.95) !important; }
#card-fan .hand-card.tippin-as-blau.touch-dragging.drop-ready  { border-color: var(--blau) !important; box-shadow: 0 0 0 3px var(--blau), 0 0 44px rgba(79,140,255,.95) !important; }
#card-fan .hand-card.tippin-as-gelb.touch-dragging.drop-ready  { border-color: var(--gelb) !important; box-shadow: 0 0 0 3px var(--gelb), 0 0 44px rgba(240,180,41,.95) !important; }
#card-fan .hand-card.tippin-as-gruen.touch-dragging.drop-ready { border-color: var(--gruen) !important; box-shadow: 0 0 0 3px var(--gruen), 0 0 44px rgba(63,191,127,.95) !important; }
#card-fan .hand-card.tippin-as-rot.touch-dragging.drop-ready   { border-color: var(--rot) !important; box-shadow: 0 0 0 3px var(--rot), 0 0 44px rgba(255,90,71,.95) !important; }

/* Tippin-Hinweis (08.11.2026): Leuchtrand läuft um den Knopf wie ein Ladebalken, darunter "Educated ?" */
@property --tg-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#btn-toggle-tippin.tippin-glow { position: relative; overflow: visible; opacity: 1 !important; filter: none !important; }
#btn-toggle-tippin.tippin-glow::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--tg-a), rgba(255,212,92,0) 0deg, rgba(255,212,92,0) 200deg, #ffd45c 300deg, #fff6d6 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: tippinGlowSpin 1.6s linear infinite; filter: drop-shadow(0 0 4px rgba(255,212,92,.9));
}
@keyframes tippinGlowSpin { to { --tg-a: 360deg; } }
#tippin-educated-hint { position: fixed; z-index: 5;   /* ganz hinten: liegt hinter jedem Popup, verdeckt nichts */ display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: tehBob 1.3s ease-in-out infinite; }
#tippin-educated-hint .teh-arrow { font-size: 1.5rem; line-height: 1; color: #ffd45c; text-shadow: 0 0 8px rgba(255,212,92,.9); }
#tippin-educated-hint .teh-text { padding: .3rem .8rem; border-radius: 999px; background: rgba(10,12,24,.95); border: 1px solid rgba(255,212,92,.8); color: #f3d596; font-family: var(--serif, serif); font-weight: 700; white-space: nowrap; }
@keyframes tehBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Eigener Platz: goldener Rand, wenn man am Zug ist oder gerade eine Fähigkeit auswählt (wie bei den Gegnern am Symbol) */
.seat.deciding .seat-avatar { border-color: var(--gold); box-shadow: 0 0 20px rgba(230, 182, 85, 0.6); transform: scale(1.08); }
.seat.seat-bottom.active .seat-stats, .seat.seat-bottom.deciding .seat-stats {
  border-color: #ffd45c !important;
  box-shadow: 0 0 0 2px rgba(255,212,92,.55), 0 0 20px 4px rgba(230,182,85,.7);
  animation: ownSeatPulse 1.6s ease-in-out infinite;
}
@keyframes ownSeatPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(255,212,92,.45), 0 0 14px 2px rgba(230,182,85,.5); } 50% { box-shadow: 0 0 0 2px rgba(255,212,92,.8), 0 0 26px 6px rgba(230,182,85,.9); } }

/* Tippin (09.11.2026): Grundrahmen violett wie Corbin; beim Überfahren (Desktop) und Anheben (Handy) die Farbe, die er annähme */
#card-fan .hand-card[data-n="40"] { border-color: #b57bff; }
#card-fan .hand-card[data-n="40"]:not(.illegal):hover,
#card-fan .hand-card[data-n="40"].touch-focus,
#card-fan .hand-card[data-n="40"].touch-dragging { border-color: #b57bff !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 40px rgba(181,123,255,.85) !important; }
#card-fan .hand-card.tippin-as-white:not(.illegal):hover,
#card-fan .hand-card.tippin-as-white.touch-dragging { border-color: #b57bff !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 0 3px #b57bff, 0 0 40px rgba(181,123,255,.9) !important; }
#card-fan .hand-card.tippin-as-blau:not(.illegal):hover,
#card-fan .hand-card.tippin-as-blau.touch-dragging  { border-color: var(--blau) !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 0 3px var(--blau), 0 0 40px rgba(79,140,255,.95) !important; }
#card-fan .hand-card.tippin-as-gelb:not(.illegal):hover,
#card-fan .hand-card.tippin-as-gelb.touch-dragging  { border-color: var(--gelb) !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 0 3px var(--gelb), 0 0 40px rgba(240,180,41,.95) !important; }
#card-fan .hand-card.tippin-as-gruen:not(.illegal):hover,
#card-fan .hand-card.tippin-as-gruen.touch-dragging { border-color: var(--gruen) !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 0 3px var(--gruen), 0 0 40px rgba(63,191,127,.95) !important; }
#card-fan .hand-card.tippin-as-rot:not(.illegal):hover,
#card-fan .hand-card.tippin-as-rot.touch-dragging   { border-color: var(--rot) !important; box-shadow: 0 28px 55px rgba(0,0,0,.98), 0 0 0 3px var(--rot), 0 0 40px rgba(255,90,71,.95) !important; }
.rb-vol, .am-vol { display: flex; align-items: center; gap: .5rem; padding: .55rem .2rem .2rem; }
.rb-vol input, .am-vol input { flex: 1; min-width: 0; height: 28px; accent-color: #e6b655; cursor: pointer; }
.rb-vol span, .am-vol span { font-size: .95rem; opacity: .8; }

/* Niedrige Handys (z. B. 320x568, 360x640): Tisch-Pot kleiner und etwas tiefer, damit er den oberen Gegner nicht ueberdeckt */
@media (max-width: 520px) and (max-height: 700px) {
  .pot-badge { padding: .3rem .9rem; font-size: .9rem; gap: .4rem; }
  .pot-badge b { font-size: 1.15em; }
  .seat.seat-top { top: 6px; }
}

/* Handy: Tisch-Pot liegt unterhalb der Anzeige des oberen Gegners (Muenzen/Stiche), nie darueber */
@media (max-width: 520px) {
  .table-center { position: relative; top: 26px; }
  .seat.seat-left, .seat.seat-right { top: 57%; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .table-center { top: 48px; }
  #seat-top .seat-avatar { width: 38px; height: 38px; }
  #seat-top .seat-name { font-size: .8rem; margin-top: 0; }
  .seat.seat-left, .seat.seat-right { top: 60%; }
}

/* ===== Erstausgabe-Karten (11.11.2026): Seitenverhaeltnis 708:1086 statt 2:3 ===
   js/card-img.js setzt die Klasse "cards-erstausgabe" auf <html>. Die Hoehe kommt weiter aus den bestehenden Regeln
   (Desktop, Handy, Ansage-Phase), die Breite folgt dem Kartenformat. So wird nichts abgeschnitten (object-fit: cover). */
.cards-erstausgabe .trick-card,
.cards-erstausgabe .hand-card,
.cards-erstausgabe .bidding-active .hand-card { width: auto !important; aspect-ratio: 708 / 1086; }
.cards-erstausgabe .showcase-card-frame,
.cards-erstausgabe .history-card-img-wrap { aspect-ratio: 708 / 1086; }

/* ===== Handy hochkant (11.11.2026): Gegner links/rechts ganz aussen, Stichansage steht senkrecht an der Aussenkante =====
   Links: Schrift von oben nach unten, rechts: von unten nach oben. Oben bleibt waagerecht am oberen Rand.
   Aussen -> innen: Ansage-Streifen, dann Bild mit Name. So verliert die Tischmitte am wenigsten Platz. */
@media (max-width: 600px) and (orientation: portrait) {
  .seat.seat-left, .seat.seat-right {
    display: grid !important;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    column-gap: 3px;
    top: 59%;
    max-width: 30vw;
  }
  /* Tisch ist 94vw breit mit 10px Rand: Platz liegt ausserhalb, damit der Streifen am Bildschirmrand laeuft */
  .seat.seat-left  { left: calc(-3vw - 8px); grid-template-columns: auto auto; }
  .seat.seat-right { right: calc(-3vw - 8px); grid-template-columns: auto auto; }
  /* Linke Seite: Streifen aussen (links), Bild innen; rechts umgekehrt */
  .seat.seat-left  .seat-stats  { grid-column: 1; grid-row: 1 / span 2; }
  .seat.seat-left  .seat-avatar { grid-column: 2; grid-row: 1; }
  .seat.seat-left  .seat-name   { grid-column: 2; grid-row: 2; }
  .seat.seat-right .seat-stats  { grid-column: 2; grid-row: 1 / span 2; }
  .seat.seat-right .seat-avatar { grid-column: 1; grid-row: 1; }
  .seat.seat-right .seat-name   { grid-column: 1; grid-row: 2; }
  .seat.seat-left .seat-avatar, .seat.seat-right .seat-avatar { width: clamp(38px, 11.5vw, 52px); height: clamp(38px, 11.5vw, 52px); }
  .seat.seat-left .seat-name, .seat.seat-right .seat-name { font-size: .7rem; margin-top: 2px; max-width: 18vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seat.seat-left .seat-stats, .seat.seat-right .seat-stats {
    writing-mode: vertical-rl;
    flex-direction: row;          /* folgt der Schreibrichtung: Muenzen und Stiche untereinander */
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .55rem .2rem;
    font-size: .72rem;
    line-height: 1.1;
    white-space: nowrap;
    max-height: 46vh;
  }
  .seat.seat-right .seat-stats { transform: rotate(180deg); }   /* von unten nach oben lesen */
  /* Sprechblase neben dem Bild, nach innen */
  .seat-left .speech-bubble  { left: calc(100% + 4px); top: 0; max-width: 38vw; }
  .seat-right .speech-bubble { right: calc(100% + 4px); left: auto; top: 0; max-width: 38vw; }
}

/* ===== Handy hochkant (11.11.2026, 2): Tischraster statt feste Abstaende =====
   Reihe 1: oberer Gegner, direkt darunter Pot + Bedienpflicht; Reihe 2: Stich in der Mitte des Restplatzes; Reihe 3: eigene Ansage.
   Passt sich jeder Handyhoehe an, nichts liegt mehr uebereinander. */
@media (max-width: 600px) and (orientation: portrait) {
  .felt-table { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: start; }
  .felt-table .table-ring { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .seat.seat-top { position: relative; top: auto; left: auto; transform: none; grid-row: 1; margin-top: 8px; }
  .table-center { grid-row: 2; position: relative; top: 0 !important; align-self: stretch; width: 100%; min-height: 0; gap: .35rem; margin-top: 4px; }
  .table-center .trick-slots { flex: 1 1 auto; min-height: 0; width: 100%; }
  .seat.seat-bottom { position: relative; bottom: auto; left: auto; transform: none; grid-row: 3; align-self: end; margin-bottom: 60px; }
  .seat.seat-left, .seat.seat-right { top: 56%; }
}

/* Aetherwolf-Einwurf und andere Fenster mit langen Knopf-Texten (Handy): Knoepfe untereinander, volle Breite, keine Ellipsen */
@media (max-width: 600px) {
  .caligo-modal.wolf-modal .modal-actions { flex-direction: column-reverse; align-items: stretch; gap: .6rem !important; }
  .caligo-modal.wolf-modal .modal-actions > button { width: 100%; border-radius: 16px; padding: .75rem 1rem !important; font-size: 1rem !important; line-height: 1.25; white-space: normal; transform: none; }
}