/* MagicAIl Table — styles: the table layout: columns, middle, combat arena, smaller screens.
   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. */

/* ===================================================================
   Table layout: zones left, played cards in the middle, log right.
   The game uses the whole window height.
   =================================================================== */

.page.wide { max-width: none; padding: 12px 16px; }
.page.wide .masthead,
.page.wide .footer { display: none; }

.table-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "turn  turn  turn"
    "zones main  side";
  gap: 12px 14px;
  min-height: max(640px, calc(100vh - 24px));
}

.turn-bar {
  grid-area: turn;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.turn-title { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 18px; }
.turn-sep { color: var(--muted); }
.turn-number { font-family: var(--font-display); font-weight: 700; }
.turn-phase { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Left column ---------- */

.zones-col {
  grid-area: zones;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
}

.zones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.zones-claude { background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 74, 0.08), transparent 70%), var(--surface); }

.zone-piles {
  display: flex;
  justify-content: space-evenly;
  gap: 6px;
}

/* Library and graveyard big and moved inwards; with an exile pile (only shown when used) all three are smaller. */
.zone-piles .pile { --card-w: 86px; }
.zone-piles.with-exile { justify-content: space-between; }
.zone-piles.with-exile .pile { --card-w: 58px; }
.zone-piles .pile[hidden] { display: none; }

.zones .life { align-items: center; padding: 4px 0; border-radius: 10px; cursor: pointer; }
.zones .life-value { font-size: 40px; }
.zones .life:hover,
.zones .life:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Commander damage under the life total: "3/21". */
.cmd-damage {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cmd-damage.lethal { color: var(--red); font-weight: 700; }

.hand {
  --card-w: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 86px;
  padding-bottom: 14px;
}

.hand .card-back {
  margin-left: var(--overlap, -26px);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  transform-origin: 50% 120%;
}

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

.hand-count {
  position: absolute;
  bottom: -2px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  padding: 0 6px;
  border-radius: 6px;
}

.mini-counts { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Middle: the played cards ---------- */

.table-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}

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

/* Claude's cards grow the most: they are only on the screen. */
.claude-row { flex: 1 1 auto; }

#bf-permanents,
#bf-other {
  --card-w: clamp(110px, min(11vw, 19vh), 250px);
  gap: 18px;
  min-height: calc(var(--card-w) * 1.4 + 12px);
  align-content: flex-start;
}



#bf-lands { --card-w: clamp(62px, min(5.4vw, 10vh), 118px); min-height: calc(var(--card-w) * 1.4 + 28px); }

/* The player's side grows a bit: the real cards lie on the table anyway. */
.player-side {
  flex: 0 0 auto;
  position: relative;
  margin-top: 6px;
  padding: 18px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.player-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
}

.player-stacks { --card-w: clamp(92px, min(7vw, 12vh), 150px); }
.land-stacks { --card-w: clamp(52px, min(4.4vw, 8vh), 92px); }

/* ---------- Combat arena ---------- */

.combat-arena {
  flex: 0 0 auto;
  position: relative;
  padding: 16px 14px 10px;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 50%, rgba(224, 121, 95, 0.12), transparent 70%), var(--surface);
  animation: fade-in 0.25s ease-out;
  --card-w: clamp(88px, min(7vw, 11vh), 170px);
}

.arena-title {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 0 8px;
  background: var(--bg);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--red);
}

.arena-duels { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; }

/* One duel: Claude's card(s) on top, the player's below — facing each other. */
.duel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.duel-row { display: flex; gap: 10px; align-items: flex-end; justify-content: center; min-height: 20px; }
.duel-vs { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.duel-vs.unblocked { color: var(--red); }
.duel-row .slot.attacking > .card { box-shadow: 0 0 0 2px var(--red), 0 0 18px rgba(224, 121, 95, 0.7); }
.duel-row.blockers .slot > .card { box-shadow: 0 0 0 2px #e6c229, 0 0 14px rgba(230, 194, 41, 0.5); }

/* ---------- Right column ---------- */

.side-panel {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.side-panel .log-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.side-panel .log { flex: 1 1 0; max-height: none; min-height: 160px; }

/* ---------- Card pictures: placeholder while loading ---------- */

.img-face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: var(--card-r);
}

.img-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-r);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.img-face.ready img { opacity: 1; }

/* High-quality shrunk copy of the picture, laid over the <img> (see initSmoothing in js/pictures.js). */
.img-face > canvas.img-smooth {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--card-r);
  pointer-events: none;
}
.img-face.ready .img-ph { display: none; }

.img-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8% 6%;
  border-radius: var(--card-r);
  border: 2px solid #2b2f2c;
  background: linear-gradient(170deg, #1d2420, #0d1210);
  color: #d8d2bf;
  overflow: hidden;
}

.ph-name {
  align-self: stretch;
  font-weight: 700;
  font-size: max(9px, calc(var(--card-w, 100px) * 0.085));
  line-height: 1.15;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-spinner {
  margin: auto;
  width: 28%;
  max-width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgba(201, 162, 74, 0.25);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

/* Screen readers and copied text get the mana symbol as text, e.g. {G}. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Smaller screens: one column ---------- */

@media (max-width: 1100px) {
  .table-layout {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "turn" "zclaude" "main" "zplayer" "side";
  }
  /* One column: Claude's zones above the table, the player's below it. */
  .zones-col { display: contents; }
  .zones-claude { grid-area: zclaude; }
  .table-layout.commander-game { grid-template-areas: "turn" "zclaude" "zcmdc" "main" "zcmdp" "zplayer" "side"; }
  .zones-player { grid-area: zplayer; }
  .side-panel .log { max-height: 280px; }
  .webcam-panel { max-width: 420px; }
  #bf-permanents, #bf-other { --card-w: clamp(96px, 16vw, 168px); }
  #bf-lands { --card-w: clamp(56px, 8vw, 82px); }
}

@media (max-width: 620px) {
  :root { --card-w: 72px; }
  .game-form,
  .summary { grid-template-columns: 1fr 1fr; }
  .mode-row { grid-template-columns: 1fr; gap: 6px; }
  .field-edition,
  .summary-item:first-child { grid-column: 1 / -1; }
  .step { padding: 18px; }
  .form-actions,
  .dialog-actions { grid-template-columns: 1fr; }
  .turn-title, .turn-sep { display: none; }
  #bf-permanents, #bf-other { --card-w: 100px; }
  #bf-lands { --card-w: 54px; padding-right: 6px; padding-bottom: 70px; }
  .mana-pool { top: auto; bottom: 6px; transform: none; left: 8px; right: 8px; width: auto; flex-direction: row; justify-content: center; }
  .p-row { --card-w: 76px; }
  .land-stacks { --card-w: 46px; }
  .combat-arena { --card-w: 84px; }
  .stage-cards { --card-w: 140px; }
}

/* Build 108: a blocker stays in its play area (the front row) with a yellow frame; a yellow arrow runs from it to the
   attacker it blocks in the arena (js/combat.js blockArrows). Before (build 104) it lay on top of the attacker. */
.slot.blocking > .card { box-shadow: 0 0 0 3px #e6c229, 0 0 16px rgba(230, 194, 41, 0.6); }

/* Build 105: the arrows from the attackers to the attacked players' areas (js/combat.js drawCombatArrows). */
.combat-arrows {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 20;
}
.combat-arrow {
  fill: none;
  stroke: #e0795f;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(224, 121, 95, 0.7));
}
.block-arrow {
  fill: none;
  stroke: #e6c229;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(230, 194, 41, 0.7));
}

/* Build 106: the combat damage that gets through. Build 143: in the middle of the arena's frame, at the bottom or (.at-top) the top ("4 of 4
   damage gets through") — on the side the blockers don't come from, so their yellow arrows don't run over it. */
.arena-damage {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--red);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arena-damage[hidden] { display: none; }
/* Build 143: the player is attacked — their blockers' arrows come from below, so the line sits at the top. */
.arena-damage.at-top { top: -10px; bottom: auto; }
/* In the narrow middle column (table for 3–4): a line over the duels instead. */
.multi .mid-col > .combat-arena .arena-damage { position: static; display: block; max-width: none; margin: 0 0 8px; text-align: center; white-space: normal; background: transparent; }
.multi .mid-col > .combat-arena .arena-damage[hidden] { display: none; }