/* MagicAIl Table — styles: cards.
   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. */

/* ---------- Cards ---------- */

.card-back {
  display: block;
  width: var(--card-w);
  aspect-ratio: 63 / 88;
  border-radius: var(--card-r);
  border: 3px solid #0b0f0d;
  /* The real Magic card back (served by the table server, downloaded once from Scryfall).
     If it isn't there, the drawn back underneath shows. */
  background:
    /* --back: the same picture shrunk in high quality by js/pictures.js (smooth edges, see initSmoothing). */
    var(--back, url("/card-back.jpg")) center / cover no-repeat,
    radial-gradient(circle at 50% 50%, rgba(201, 162, 74, 0.9) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(201, 162, 74, 0.55) 19% 21%, transparent 22%),
    repeating-linear-gradient(45deg, rgba(201, 162, 74, 0.08) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #23412f, #10201a 60%, #0b1612);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.card {
  position: relative;
  display: block;
  width: var(--card-w);
  aspect-ratio: 63 / 88;
  border-radius: var(--card-r);
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-r);
}

.card.big { --card-w: min(480px, 85vw); }
.card.big .text-card { font-size: 15px; padding: 16px; }
.card.big .tc-name { font-size: 18px; }
.card.big .tc-pt { font-size: 20px; }

.text-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 100%;
  aspect-ratio: 63 / 88;
  padding: 8px;
  border-radius: var(--card-r);
  background: linear-gradient(170deg, #e9e2cc, #cfc6aa);
  color: #1d1a12;
  font-size: 10px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  position: relative;
}

.text-card.is-token { background: linear-gradient(170deg, #d9d6cf, #aaa79f); }
.tc-name { font-weight: 700; font-size: 11px; }
.tc-type { font-style: italic; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 3px; }
.tc-text { flex: 1; overflow: hidden; }
.tc-pt {
  align-self: flex-end;
  font-weight: 700;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding: 0 5px;
}

.badges {
  position: absolute;
  left: -4px;
  top: -6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
}

.badge-attack { background: var(--red); color: #fff; }
.badge-token { background: #6f7d76; color: #fff; }
.badge-yours { background: var(--gold); color: #1a1408; }

/* Bottom middle, so the printed power/toughness (bottom right) stays visible. Several types side by side. */
.counters {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 70%;
  pointer-events: none;
}

/* Ability badges: right edge, in the art area. */
.abilities {
  position: absolute;
  right: -6px;
  top: 22%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}

.ability {
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  font: 800 11px var(--font-body);
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.ability.gained { outline: 2px solid var(--gold); outline-offset: 1px; }

.card.big .ability { font-size: 15px; min-width: 32px; padding: 2px 8px; }
.card.big .counter { font-size: 15px; }
.card.big .badge { font-size: 13px; }

.counter {
  background: #f1ece0;
  color: #1a1408;
  border: 2px solid #1a1408;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}