/* MagicAIl Table — styles: the table for 3–4 players (build 76), class "multi" on .table-layout (js/seats.js).
   Four play areas of the same size in the corners, the info boxes in a middle column, staggered like bricks.
   Loaded last (index.html): these rules win over the two-player layout. */

.table-layout.multi {
  /* Card sizes for four play areas (the two-player table computes its own, js/table.js). */
  --land-w: clamp(32px, min(3.3vw, 6.6vh), 80px);
  --perm-w: clamp(52px, min(6vw, 13.5vh), 150px);
  --mid-w: clamp(176px, 13vw, 232px);
  grid-template-columns: minmax(0, 1fr) var(--mid-w) minmax(0, 1fr) 300px;
  /* Build 104: twelve equal rows (six per play area) instead of two, so a play area of a player who is out can
     shrink to one row and give the rest to the area under or above it (js/modes.js: the out-… classes). */
  grid-template-rows: auto repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "turn turn turn turn"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side";
  height: calc(100vh - 24px);
  min-height: 640px;
}

.table-layout.multi.side-collapsed,
.table-layout.multi.side-collapsed.commander-game {
  grid-template-columns: minmax(0, 1fr) var(--mid-w) minmax(0, 1fr);
  grid-template-areas:
    "turn turn turn"
    "tl mid tr"
    "tl mid tr"
    "tl mid tr"
    "tl mid tr"
    "tl mid tr"
    "tl mid tr"
    "bl mid br"
    "bl mid br"
    "bl mid br"
    "bl mid br"
    "bl mid br"
    "bl mid br";
}

.table-layout.multi.commander-game {
  grid-template-areas:
    "turn turn turn turn"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "tl mid tr side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side"
    "bl mid br side";
}

.table-layout.multi > .zones-col,
.table-layout.multi > .table-main { display: none; }
.table-layout.multi > .side-panel { grid-area: side; min-height: 0; }

/* ---------- The four play areas ---------- */

.multi > .claude-side { grid-area: tl; }
.multi > #area-ai2 { grid-area: tr; }
.multi > #area-ai3 { grid-area: bl; }
.multi > .player-side { grid-area: br; margin-top: 0; }

.multi > .claude-side,
.multi > .player-side,
.multi > .seat-area {
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.multi > .claude-side { padding: 28px 12px 12px; gap: 10px; }
.multi > .player-side { padding: 28px 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; }

/* The seat's name inside its play area (the areas scroll, a title above the edge would be cut off). */
.multi > .player-side > .side-title,
.multi > .seat-area > .side-title,
.multi > .claude-side::after { top: 6px; left: 12px; background: transparent; padding: 0; }

/* Whose turn: the play area lights up too. */
/* Build 100: Sir Mulligan's and the player's areas by their own class (js/modes.js) — the ":has(~ .mid-col …)" rule never
   matched (the middle column comes before them), so their areas didn't light up. */
.multi > .claude-side:has(~ .mid-col .zones-claude.active-turn),
.multi > .player-side:has(~ .mid-col .zones-player.active-turn),
.multi > .claude-side.active-turn,
.multi > .player-side.active-turn,
.multi > .seat-area.active-turn { border-color: #6fd08f; box-shadow: inset 0 0 0 1px rgba(111, 208, 143, 0.35); }

.multi > .claude-side::after {
  content: "Sir Mulligan";
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
}

.seat-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 12px 12px;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 74, 0.05), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.seat-area[hidden] { display: none; }
/* Bottom left (King Manaburn): lands at his edge, at the bottom — like the player's side. */
.seat-area-ai3 { flex-direction: column-reverse; justify-content: flex-start; }
.seat-area .perm-row { flex: 1 1 auto; }

.seat-area .seat-lands,
.multi #bf-lands,
.multi #p-lands {
  --card-w: var(--land-w);
  min-height: calc(var(--land-w) * 1.4 + 26px);
  padding: 6px 8px;
  gap: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}

.multi #bf-lands { padding-right: 110px; }

.seat-area .seat-perms,
.multi #bf-permanents,
.multi #bf-other,
.multi #p-creatures,
.multi #p-other {
  --card-w: var(--perm-w);
  min-height: calc(var(--perm-w) * 1.4 + 10px);
  gap: 8px;
}

.multi [data-mark]::before { font-size: clamp(16px, 2.2vw, 44px); }
.multi .other-row[data-mark]::before { font-size: clamp(14px, 1.6vw, 34px); }
.multi .mana-pool { transform: scale(0.85); transform-origin: right center; }

/* ---------- The middle column: four info boxes like bricks in a wall ---------- */

.mid-col[hidden] { display: none; }

.multi > .mid-col {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.mid-pair { display: flex; flex-direction: column; min-height: 0; }
.mid-pair > .zones { width: 90%; padding: 8px 10px; gap: 6px; }
.mid-pair > .zones[hidden] { display: none; }
/* The right seats' boxes lean right, the left seats' left; the second of a pair hooks in below the first. */
.mid-pair > .zones-ai2,
.mid-pair > .zones-player { align-self: flex-end; }
.mid-pair > .zones-claude,
.mid-pair > .zones-ai3 { align-self: flex-start; }
/* Build 82: the boxes no longer overlap (they did by 10px) — each one stays fully readable. */
.mid-pair { gap: 6px; }

/* Build 99: the big boxes (no combat, no spell on the stage) — the life on the left, the hand cards on the right, the
   library and the graveyard right under them. Flatter than before (life, hand and piles one under the other), so four
   boxes fit even in a 1440×900 window; the pairs never shrink below their boxes, so no box lies over another. */
.multi .mid-pair { flex: 0 0 auto; }
.multi:not(.staged) .mid-col .zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  column-gap: 6px;
  row-gap: 2px;
}
/* The name across the whole box on top; under it the life in the left half, the hand cards in the right half. */
.multi:not(.staged) .mid-col .zones > .life-wrap { grid-row: 1; grid-column: 1 / -1; justify-content: flex-start; }
.multi:not(.staged) .mid-col .zones > .life-wrap > .life { flex: 1 1 auto; align-items: flex-start; }
.multi:not(.staged) .mid-col .zones .life > .life-label { align-self: center; }
.multi:not(.staged) .mid-col .zones .life > :not(.life-label) { width: calc(50% - 3px); text-align: center; }
.multi:not(.staged) .mid-col .zones > .hand { grid-row: 1; grid-column: 2; justify-self: center; position: relative; z-index: 1; padding-bottom: 14px; }
/* Build 100: library and graveyard each centered under the life and the hand cards (same two columns). */
.multi:not(.staged) .mid-col .zones > .zone-piles {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  column-gap: 6px;
  row-gap: 6px;
}
.multi:not(.staged) .mid-col .zones > .zone-piles > .pile:nth-child(3) { grid-column: 1 / -1; }
/* Build 100: on the hand pile only its number, no "2 cards" under it. */
.multi .mid-col .hand .hand-count { display: none; }
.multi .mid-col .hand .hand-n {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  min-width: 18px;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(11, 15, 13, 0.85);
  color: var(--text);
  font: 700 13px var(--font-body);
  text-align: center;
  z-index: 2;
}
.mid-col .zones .life { padding: 2px 0; }
.mid-col .zones .life-value { font-size: 28px; }
.mid-col .zones .life-label { font-size: 11px; }
.mid-col .hand { --card-w: 26px; min-height: 46px; padding-bottom: 12px; }
.mid-col .hand .card-back { --overlap: -18px; }
.mid-col .zone-piles .pile,
.multi.commander-game .mid-col .zone-piles .pile { --card-w: 30px; } /* build 99: 30 (before 40) — flatter boxes */
.mid-col .zone-piles.with-exile .pile,
.multi.commander-game .mid-col .zone-piles.with-exile .pile { --card-w: 26px; }
.mid-col .pile-label { font-size: 11px; }
.mid-col .playmat-name,
.mid-col .playmat-credit { display: none; }

/* The command zone (Commander) between the two pairs, small. */
.multi .mid-col .command-zone:not([hidden]) { flex: 0 0 auto; min-height: 0; container-type: normal; gap: 4px; }
.multi .mid-col .cmd-slot { --card-w: 28px; padding: 4px 8px; font-size: 12px; }

/* ---------- The stage in the middle ---------- */

/* Combat: the arena stands upright in the middle column between the two pairs of info boxes (build 82; before: a
   wide box across the play areas). The info boxes shrink to a line; the duels stack one under the other. */
.multi .mid-col > .combat-arena {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  margin: 4px 0;
  padding: 26px 8px 10px;
  --card-w: clamp(54px, min(5vw, 9vh), 96px);
}
.multi .mid-col > .combat-arena .arena-duels { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 14px; }
.multi .mid-col > .combat-arena .duel-row { flex-wrap: wrap; gap: 6px; }
.multi .mid-col > .combat-arena .duel-caption { font-size: 11px; line-height: 1.25; }

.multi.staged .mid-col .zones > :not(.life-wrap) { display: none; }
.multi.staged .mid-col .zones { display: flex; }
.multi.staged .mid-col .command-zone { display: none; }
/* Build 84: a compact box = the name, then the life as a heart with its number and the hand cards as a small fanned
   pile with the number on it (js/modes.js renderMiniHands). */
.multi.staged .mid-col .zones { padding: 4px 8px; }
.multi.staged .mid-col .zones .life {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
}
.multi.staged .mid-col .zones .life > * { grid-column: 1 / -1; justify-self: center; }
.multi.staged .mid-col .zones .life > .life-line { grid-column: 1; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.multi.staged .mid-col .zones .life > .mini-hand { grid-column: 2; grid-row: 2; display: inline-flex; }
.multi.staged .mid-col .zones .life-value { font-size: 20px; }
.multi.staged .mid-col .zones .life-word { display: none; }
.multi.staged .mid-col .zones .life-heart { display: inline; }
.multi.staged .mid-col .zones .life > .life-label { grid-row: 1; }
.multi.staged .mid-col .zones .life > .life-line { grid-row: 2; }

.life-heart,
.mini-hand,
.hand-n { display: none; }
.life-heart { color: #e0605a; font-size: 18px; line-height: 1; }
.mini-hand { position: relative; align-items: center; height: 30px; padding: 0 2px; }
.mini-hand .card-back { --card-w: 18px; border-width: 1px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.mini-hand .card-back + .card-back { margin-left: -12px; }
.mini-hand .card-back:nth-child(1) { transform: rotate(-9deg) translateY(1px); }
.mini-hand .card-back:nth-child(3) { transform: rotate(9deg) translateY(1px); }
.mini-hand b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 16px;
  padding: 0 3px;
  border-radius: 6px;
  background: rgba(11, 15, 13, 0.85);
  color: var(--text);
  font: 700 12px var(--font-body);
  text-align: center;
}

/* ---------- Narrow windows: one column ---------- */

@media (max-width: 1100px) {
  .table-layout.multi,
  .table-layout.multi.side-collapsed,
  .table-layout.multi.commander-game,
  .table-layout.multi.side-collapsed.commander-game {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "turn" "mid" "arena" "tl" "tr" "bl" "br" "side";
    --land-w: clamp(30px, 6vw, 60px);
    --perm-w: clamp(52px, 11vw, 110px);
  }
  .multi > .mid-col { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .mid-pair { flex: 1 1 260px; flex-direction: row; gap: 8px; }
  .mid-pair > .zones { width: auto; flex: 1 1 0; }
  .mid-pair > .zones + .zones { margin-top: 0; }
  .multi .mid-col > .combat-arena { flex: 1 1 100%; order: 1; }
  .multi .mid-col > .combat-arena .arena-duels { flex-direction: row; flex-wrap: wrap; }
  .multi .command-zone { display: flex; }
  .multi #bf-lands { padding-right: 8px; }
  .multi .mana-pool { position: static; transform: none; width: auto; margin-top: 6px; }
}

/* The arena's "Combat" label inside its box (the box scrolls). */
.multi .mid-col > .combat-arena > .arena-title { top: 6px; background: transparent; }

/* ---------- Two-Headed Giant: team against team (build 82) ---------- */

/* The player and Sir Mulligan on the left, one above the other; Lord Landflood and King Manaburn on the right.
   Attacks go across the middle column from team to team. Only in Two-Headed Giant (class from js/modes.js). */
.multi.two-headed > .player-side { grid-area: bl; }
.multi.two-headed > #area-ai3 { grid-area: br; }
.multi.two-headed .mid-pair > .zones-player { align-self: flex-start; }
.multi.two-headed .mid-pair > .zones-ai3 { align-self: flex-end; order: -1; }

/* Build 104: the play area of a player who is out shrinks to one row (its name and R.I.P.); the area above or under
   it gets the room. Wide layout only, not in Two-Headed Giant (a team leaves together). */
@media (min-width: 1101px) {
  .multi:not(.two-headed).out-claude:not(.out-ai3) > .claude-side { grid-row: 2 / 3; }
  .multi:not(.two-headed).out-claude:not(.out-ai3) > #area-ai3 { grid-row: 3 / 14; }
  .multi:not(.two-headed).out-ai3:not(.out-claude) > .claude-side { grid-row: 2 / 13; }
  .multi:not(.two-headed).out-ai3:not(.out-claude) > #area-ai3 { grid-row: 13 / 14; }
  .multi:not(.two-headed).out-ai2:not(.out-human) > #area-ai2 { grid-row: 2 / 3; }
  .multi:not(.two-headed).out-ai2:not(.out-human) > .player-side { grid-row: 3 / 14; }
  .multi:not(.two-headed).out-human:not(.out-ai2) > #area-ai2 { grid-row: 2 / 13; }
  .multi:not(.two-headed).out-human:not(.out-ai2) > .player-side { grid-row: 13 / 14; }
}
/* The shrunk area: only its name and "☠ R.I.P." (its cards left the table with the player). */
.multi > .seat-out > :not(.side-title) { display: none !important; }
.multi > .seat-out { display: flex !important; align-items: center; justify-content: center; padding-top: 6px !important; padding-bottom: 6px !important; }
.multi > .seat-out::before { content: "☠ R.I.P."; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.12em; color: var(--muted); }

/* Build 104: an empty hand in the big info boxes — three faded backs with the "0" on them (js/cards.js handFanHtml). */
.hand-empty-backs { display: none; }
.multi .mid-col .hand .hand-empty-backs { display: contents; }
.multi .mid-col .hand .hand-empty-backs .card-back { opacity: 0.45; }
.multi .mid-col .hand .hand-empty-backs .card-back:nth-child(1) { transform: rotate(-8deg); }
.multi .mid-col .hand .hand-empty-backs .card-back:nth-child(3) { transform: rotate(8deg); }
.multi .mid-col .hand .hand-empty-backs .card-back + .card-back { margin-left: -16px; }

/* ---------- AI vs AI (build 115): two play areas over each other, the middle column on the right ---------- */

/* Sir Mulligan's area at the top over the full width, Lord Landflood's at the bottom (js/seats.js applySeatLayout,
   class "versus"). The player's area and King Manaburn's are not on this table. */
.table-layout.multi.versus,
.table-layout.multi.versus.commander-game {
  grid-template-columns: minmax(0, 1fr) var(--mid-w) 300px;
  grid-template-areas:
    "turn turn turn"
    "tl mid side"
    "tl mid side"
    "tl mid side"
    "tl mid side"
    "tl mid side"
    "tl mid side"
    "bl mid side"
    "bl mid side"
    "bl mid side"
    "bl mid side"
    "bl mid side"
    "bl mid side";
}
.table-layout.multi.versus.side-collapsed,
.table-layout.multi.versus.side-collapsed.commander-game {
  grid-template-columns: minmax(0, 1fr) var(--mid-w);
  grid-template-areas:
    "turn turn"
    "tl mid"
    "tl mid"
    "tl mid"
    "tl mid"
    "tl mid"
    "tl mid"
    "bl mid"
    "bl mid"
    "bl mid"
    "bl mid"
    "bl mid"
    "bl mid";
}
.multi.versus > #area-ai2 { grid-area: bl; }
.multi.versus .mid-col { justify-content: space-between; }
@media (max-width: 1100px) {
  .table-layout.multi.versus,
  .table-layout.multi.versus.commander-game,
  .table-layout.multi.versus.side-collapsed,
  .table-layout.multi.versus.side-collapsed.commander-game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "turn" "mid" "arena" "tl" "bl" "side";
  }
}
.multi.versus .mid-pair > .zones { width: 100%; align-self: stretch; }