/* MagicAIl Table — styles: the broadcast view of an AI-vs-AI game (build 116, js/broadcast.js).
   The turning table (the AI on turn sits at the bottom), the dimmed change of turn with the name, the drawn cards big,
   the open hand fanned out at the bottom. Loaded last: these rules win over the AI-vs-AI layout (css/seats.css). */

/* ---------- The turning table: "bc-flip" = Sir Mulligan at the bottom, Lord Landflood at the top ---------- */

.multi.versus.bc-flip > .claude-side { grid-area: bl; }
.multi.versus.bc-flip > #area-ai2 { grid-area: tl; }
.multi.versus.bc-flip .mid-col > .mid-top { order: 10; }
.multi.versus.bc-flip .mid-col > .mid-bottom { order: -10; }

/* ---------- The change of turn: dimmed table, the name big ---------- */

.bc-turn {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 6, 0);
  pointer-events: none;
  transition: background 0.3s ease;
}
.bc-turn[hidden] { display: none; }
.bc-turn.bc-in { background: rgba(4, 8, 6, 0.64); }
.bc-turn-box {
  text-align: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.bc-turn.bc-in .bc-turn-box { opacity: 1; transform: none; }
.bc-turn-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.5vw, 110px);
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9), 0 0 40px rgba(201, 162, 74, 0.35);
}
.bc-turn-sub {
  margin-top: 6px;
  font-size: clamp(16px, 1.6vw, 26px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.85;
}

/* ---------- Drawn cards: big in the middle, then they drop to the hand ---------- */

.bc-draw {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.bc-draw[hidden] { display: none; }
.bc-draw-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 34px);
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bc-draw.bc-in .bc-draw-label { opacity: 1; }
.bc-draw-row { display: flex; gap: 18px; justify-content: center; }
.bc-draw-card {
  --card-w: min(300px, 36vh, calc((86vw - (var(--n) - 1) * 18px) / var(--n)));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(201, 162, 74, 0.55);
  opacity: 0;
  transform: translateY(50px) scale(0.7);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition-delay: calc(var(--i) * 90ms);
}
.bc-draw.bc-in .bc-draw-card { opacity: 1; transform: none; }
.bc-draw.bc-drop .bc-draw-label { opacity: 0; }
.bc-draw.bc-drop .bc-draw-card {
  opacity: 0;
  transform: translateY(55vh) scale(0.45);
  transition: opacity 0.42s ease-in, transform 0.42s ease-in;
  transition-delay: 0s;
}

/* ---------- The open hand at the bottom: its place, the dark band and the label (the fan itself: css/fan.css) ---------- */

.bc-hand {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 46px;
  pointer-events: none;
}
.bc-hand[hidden] { display: none; }
.bc-hand::before {
  content: "";
  position: absolute;
  inset: -40px 0 0;
  background: linear-gradient(to bottom, rgba(4, 8, 6, 0), rgba(4, 8, 6, 0.7) 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.bc-hand.bc-in::before { opacity: 1; }
.bc-hand.bc-down::before { opacity: 0; }
.bc-hand-label {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 26px);
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bc-hand.bc-in .bc-hand-label { opacity: 1; }
.bc-hand.bc-fold .bc-hand-label { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bc-turn,
  .bc-turn-box,
  .bc-draw-card,
  .bc-hand::before { transition-duration: 0.01s !important; }
}