/* MagicAIl Table — styles: the Magic font for labels and pop-ups, special cards next to the life.
   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. */

/* ---------- The table's labels in the Magic font (Cinzel), like the titles ---------- */

.pile-label,
.hand-count,
.card-total,
.cmd-damage,
.cmd-who,
.life-label,
.land-type-name,
.pile-count,
.mana-pool-label,
.mana-pool-words,
.arena-title,
.duel-vs,
.turn-phase,
.side-title {
  font-family: var(--font-display);
  font-weight: 600;
}

/* The player's lands in a box, like Claude's. */
#p-lands {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}

/* The player's lands box keeps its height while empty (the "Mana" mark shows). */
#p-lands { min-height: calc(var(--card-w) * 1.4 + 40px); }

/* ---------- Pop-ups, badges and the language switch in the Magic font (Cinzel) too ---------- */

.life-menu,
.life-menu .count-btn,
.life-menu .btn-link,
.count-menu,
.count-menu .count-btn,
.count-menu .btn-link,
.home-confirm,
.home-confirm .btn-copy,
.playmat-menu,
.playmat-menu .btn-copy,
.viewer-cards > p.muted,
.nav-pos,
.lang-btn,
.badge,
.counter-saga {
  font-family: var(--font-display);
}

.counter-saga { font-size: 12px; font-weight: 700; }

/* "40" big, "Life" under it — both in gold, on both sides (the active side shows by its green frame). */
.life-line { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.life-line .life-value { color: var(--gold); }
.life-word { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }

.home-btn svg { display: block; }

/* ---------- Special cards next to the life: dungeons, emblems, The Monarch, The Ring … ---------- */

/* Life and special cards side by side; without special cards the life stays centered as before. */
.life-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.life-wrap > .life { flex: 0 1 auto; min-width: 0; }

.special-cards {
  --card-w: 54px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}
.special-cards[hidden] { display: none; }
/* Two and more: a row of their own under Lord Mulligan's life / above yours, wrapping when needed. */
.life-wrap.stacked { flex-direction: column; gap: 6px; }
.zones-player .life-wrap.stacked { flex-direction: column-reverse; }
.life-wrap.stacked .special-cards { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.life-wrap.stacked .special-caption { width: calc(var(--card-w) + 12px); }
/* In the row a bit smaller, so the box doesn't grow much. */
.life-wrap.stacked .special-cards { --card-w: 46px; gap: 8px; }

.special-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: var(--card-w);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.special-card .card { position: relative; width: var(--card-w); }
.special-card:hover .card,
.special-card:focus-visible .card { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--card-r); }

/* The dungeon marker: a gold pawn on the card's corner. */
.dungeon-pawn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3dc9a, var(--gold) 55%, #7a5d1c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.special-caption {
  width: calc(var(--card-w) + 18px);
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--gold);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.marker-dungeons { color: var(--gold); }

/* The rooms under a dungeon in the large view. */
.dungeon-rooms {
  max-width: 420px;
  margin: 10px auto 0;
  text-align: left;
  font-size: 13px;
}
.dungeon-rooms h4 { margin: 0 0 6px; font-family: var(--font-display); color: var(--gold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.dungeon-rooms ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dungeon-rooms li.here { color: var(--gold); }

/* Claude's other cards (artifacts, enchantments, Sagas …): one row from the right, the creatures from the left —
   when the row gets full, both grow together in the middle and wrap. No narrow column at the edge any more. */
.perm-row > .other-row {
  display: flex;
  /* Only as wide as its own cards; when the row gets full it gives way first (shrink 100) and wraps. */
  flex: 0 100 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  align-items: flex-end;
  min-width: calc(var(--card-w) + 12px);
}
/* With other cards there, the creatures box takes all the free room (the other cards stay narrow at the right edge);
   the creatures only give way once the other cards are down to one column. */
.perm-row.has-other > .bf-row:first-child { flex: 1 1 auto; min-width: 0; }
/* The player's other cards start at the top like their creatures (Sir Mulligan's sit at the bottom, mirrored). */
.player-row .perm-row > .other-row { align-content: flex-start; align-items: flex-start; }