/* MagicAIl Table — styles: both sides by the same rules: card size, lands, spacing.
   The styles are split into files in their old order (build 71, before: one style.css); index.html loads them in
   this order, so later rules still win over earlier ones. */

/* ---------- Both sides by the same rules: the same card size, the same lands, the same spacing ---------- */
/* Sir Mulligan's side and the player's side mirror each other exactly: one card size for all creatures and other
   cards (js/table.js, fitTableCards, scales both sides together), one size for the land piles, the same land box, the
   same spacing — so the line between the two sides lies in the middle of the table. */
.table-main {
  --land-w: clamp(52px, min(4.4vw, 8vh), 92px);
  --perm-w: clamp(84px, min(6.6vw, 11.5vh), 140px);
}
#bf-lands,
#p-lands {
  --card-w: var(--land-w);
  min-height: calc(var(--land-w) * 1.4 + 40px);
  padding: 8px 10px;
  gap: 14px 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}
#bf-lands { padding-right: 190px; } /* room for the open mana on the right */
#bf-permanents,
#bf-other,
#p-creatures,
#p-other {
  --card-w: var(--perm-w);
  min-height: calc(var(--card-w) * 1.4 + 12px);
  gap: 12px;
}
/* Mirrored spacing: Sir Mulligan's side 12 px on top, 18 below; the player's 18 on top (room for "Your side"), 12 below. */
.claude-side { padding: 12px 14px 18px; gap: 14px; }
.player-side { margin-top: 0; padding: 18px 14px 12px; }
.player-row { row-gap: 14px; }

@media (max-width: 1100px) {
  .table-main { --perm-w: clamp(84px, 12vw, 140px); --land-w: clamp(52px, 7vw, 82px); }
}
@media (max-width: 620px) {
  .table-main { --perm-w: 76px; --land-w: 46px; }
  #bf-lands { padding-right: 10px; padding-bottom: 70px; } /* the open mana goes below the lands */
}

/* Build 70: while js/table.js measures and sets the card size (fitTableCards), the places don't animate their width —
   otherwise they would be measured in the middle of the animation and slide around on every update. */
.fitting .slot { transition: none !important; }