/* Tidebound card frame: original visual identity for the Dandân client.
   All sizing flows from --card-w (aspect 63:88). Inside a card, lengths use cqw
   (1cqw = 1% of the card width), so a card scales cleanly whether the layout sets
   --card-w, --card-w-<size> on an ancestor, or simply the element's width.

   Hooks for the app:
     --card-w            width of one card (inline style on the card)
     --card-w-hand|battlefield|stack|zoom|browser   per-size width, set on any ancestor
     --mx, --my          pointer position over the card, 0..1 (drives the foil sheen)
     .is-hovered         force the sheen without :hover
     .cards-auto-tap     ancestor class: CSS rotates tapped cards (otherwise motion does it) */

:root {
  --card-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --card-sans: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --card-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hl-playable: #3fb6ff;
  --hl-target: #9ff6ff;
  --hl-selected: #ffe7a3;
  --hl-attacking: #ff6a3d;
  --hl-blocking: #b9cde0;
  --hl-mustRespond: #ffb02e;
}

/* ---------- box ---------- */
.card {
  --card-w: 168px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--card-w);
  aspect-ratio: 63 / 88;
  container-type: inline-size;
  /* own stacking context: the inner layers (art, plates, scan z 2, sheen z 10) must never compete
     with siblings outside the card, e.g. the rollover zoom over a graveyard viewer (13/10/2026) */
  isolation: isolate;
  border-radius: 4.8% / 3.44%;
  font-family: var(--card-serif);
  color: #0d1f2d;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.card--hand        { --card-w: var(--card-w-hand, 168px); }
.card--battlefield { --card-w: var(--card-w-battlefield, 118px); }
.card--stack       { --card-w: var(--card-w-stack, 150px); }
.card--zoom        { --card-w: var(--card-w-zoom, 340px); }
.card--browser     { --card-w: var(--card-w-browser, 210px); }

/* Fill mode: the card takes its parent's box (e.g. a 150x210 wrapper scaled by the motion system) */
.card.card--fill, .cards-fill > .card { width: 100%; height: 100%; }
/* The layout draws its own highlight rings on a wrapper: hide ours */
.cards-no-hl .card__glow { display: none; }

/* Frame palettes */
.card {
  --outer-a: #0b1d33; --outer-b: #030b16;
  --frame-a: #4d93c2; --frame-b: #1f5a8c; --frame-c: #10355a;
  --plate-a: #f4f9fa; --plate-b: #c9dde4; --plate-c: #a9c3cd; --plate-ink: #0b2236;
  --box-a: #eef5f2; --box-b: #d6e6e5; --box-ink: #10202c;
  --rim: rgba(198, 236, 247, 0.55);
}
.frame-land {
  --outer-a: #1a1f1f; --outer-b: #070a0b;
  --frame-a: #a39373; --frame-b: #6b7b70; --frame-c: #35565e;
  --plate-a: #f8f4ea; --plate-b: #e2d7bf; --plate-c: #c8b996; --plate-ink: #2a2216;
  --box-a: #f4efe3; --box-b: #e2d8c3; --box-ink: #231d14;
  --rim: rgba(240, 226, 196, 0.5);
}
.frame-land.accent-blue { --frame-c: #2b6283; --rim: rgba(184, 228, 240, 0.55); }
.frame-colorless, .frame-land.accent-colorless {
  --frame-a: #9aa2a6; --frame-b: #646d73; --frame-c: #3c4449;
  --plate-a: #f5f6f6; --plate-b: #d7dbdd; --plate-c: #b8bec2; --plate-ink: #1e2428;
  --box-a: #eff0ef; --box-b: #dcdedd; --box-ink: #1b1f22;
  --rim: rgba(225, 230, 232, 0.5);
}

.card__body {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(160deg, var(--outer-a), var(--outer-b));
  box-shadow:
    0 0.6cqw 1.2cqw rgba(0, 6, 14, 0.45),
    0 2.4cqw 6cqw rgba(0, 6, 14, 0.35),
    inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.08);
}

/* inner frame, textured with fine waves */
.card__frame {
  position: absolute;
  inset: 2.8cqw;
  border-radius: 3cqw;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 7 q6 -6 12 0 t12 0' fill='none' stroke='white' stroke-opacity='.10' stroke-width='.8'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(165deg, var(--frame-a), var(--frame-b) 45%, var(--frame-c));
  background-size: 6cqw 2.5cqw, auto, auto;
  box-shadow:
    inset 0 0 0 0.45cqw var(--rim),
    inset 0 0.8cqw 1.6cqw rgba(255, 255, 255, 0.18),
    inset 0 -1.2cqw 2.4cqw rgba(0, 0, 0, 0.35);
}

/* ---------- art ---------- */
.card__art {
  position: absolute;
  top: 14.6cqw; left: 6.4cqw; right: 6.4cqw;
  height: 57cqw;
  border-radius: 1cqw;
  overflow: hidden;
  background: #0a2236;
  box-shadow: 0 0 0 0.5cqw rgba(4, 16, 28, 0.9), 0 0 0 1cqw var(--rim);
  z-index: 1;
}
.card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 2.4cqw rgba(0, 0, 0, 0.45), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.art-svg, .back-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- plates (title, type line) ---------- */
.plate {
  position: absolute;
  left: 4.4cqw; right: 4.4cqw;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 2.4cqw 0 3cqw;
  border-radius: 1.6cqw;
  color: var(--plate-ink);
  background:
    linear-gradient(180deg, var(--plate-a), var(--plate-b) 58%, var(--plate-c));
  box-shadow:
    0 0 0 0.35cqw rgba(6, 20, 34, 0.8),
    inset 0 0.45cqw 0 rgba(255, 255, 255, 0.85),
    inset 0 -0.45cqw 0 rgba(0, 30, 50, 0.18),
    0 0.8cqw 1.6cqw rgba(0, 8, 18, 0.45);
  z-index: 2;
}
.card__title { top: 4.6cqw; height: 9.2cqw; }
.card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 5.7cqw;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.card__cost { flex: none; display: flex; }
.card__type { top: 72.2cqw; height: 8.4cqw; }
.card__typeline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 4.5cqw;
  font-weight: 600;
  line-height: 1;
}
.card__gem { flex: none; width: 5.4cqw; color: #1f6d98; display: flex; }
.frame-land .card__gem { color: #6a5532; }
.card__gem svg { width: 100%; height: auto; }

/* ---------- mana symbols ---------- */
.mana-cost { display: inline-flex; align-items: center; gap: 0.5cqw; }
.ms { display: inline-block; width: 1em; height: 1em; line-height: 0; vertical-align: -0.14em; }
.ms svg { width: 100%; height: 100%; display: block; overflow: visible; }
.card__cost .ms { width: 5.4cqw; height: 5.4cqw; }
.card__text .ms { width: 0.95em; height: 0.95em; margin: 0 0.03em; }

/* ---------- rules text ---------- */
.card__textbox {
  position: absolute;
  top: 81.6cqw; left: 6.4cqw; right: 6.4cqw; bottom: 7.6cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4cqw 3.4cqw;
  border-radius: 1cqw;
  color: var(--box-ink);
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 9 q10 -8 20 0 t20 0' fill='none' stroke='%23305a6a' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--box-a), var(--box-b));
  background-size: auto, 10cqw 3.5cqw, auto;
  box-shadow: 0 0 0 0.4cqw rgba(6, 20, 34, 0.75), inset 0 0.3cqw 1cqw rgba(0, 20, 40, 0.18);
  z-index: 1;
  font-size: 4.8cqw;
  line-height: 1.22;
}
.card__textbox[data-len="xs"] { font-size: 6cqw; }
.card__textbox[data-len="s"]  { font-size: 5.3cqw; }
.card__textbox[data-len="m"]  { font-size: 4.8cqw; }
.card__textbox[data-len="l"]  { font-size: 4.35cqw; }
.card__textbox[data-len="xl"] { font-size: 3.85cqw; line-height: 1.18; }
.card__text p { margin: 0 0 0.36em; }
.card__text p:last-child { margin-bottom: 0; }
.reminder { font-style: italic; opacity: 0.78; }
.card__textbox.is-basic .card__text { display: none; }
.card__watermark { display: flex; justify-content: center; align-items: center; height: 100%; }
.card__watermark .ms { width: 24cqw; height: 24cqw; filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.25)); }

/* text changes (Magical Hack, Crystal Spray): struck original + highlighted replacement */
.tc { white-space: nowrap; }
.tc__from {
  text-decoration: line-through;
  text-decoration-thickness: 0.09em;
  text-decoration-color: #c2361f;
  opacity: 0.55;
  font-size: 0.8em;
  margin-right: 0.18em;
}
.tc__to {
  position: relative;
  padding: 0 0.16em;
  border-radius: 0.22em;
  font-weight: 700;
  color: #052a36;
  background: linear-gradient(180deg, #c9fbf2, #7fe3d6);
  box-shadow: 0 0 0 0.06em rgba(0, 90, 100, 0.55);
}
.tc--eot .tc__to { background: linear-gradient(180deg, #fff3c9, #ffd977); box-shadow: 0 0 0 0.06em rgba(140, 90, 0, 0.5); }
.tc__to::after {
  content: "";
  position: absolute;
  inset: -0.12em -0.2em;
  border-radius: 0.3em;
  box-shadow: 0 0 0.5em 0.15em rgba(127, 240, 230, 0.95);
  opacity: 0;
  pointer-events: none;
}
.tc--new .tc__to::after { animation: tc-flash 900ms var(--card-ease-out) 2; }
@keyframes tc-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- footer + P/T ---------- */
.card__footer {
  position: absolute;
  left: 7cqw; right: 27cqw; bottom: 2.6cqw;
  height: 4.6cqw;
  display: flex;
  gap: 2cqw;
  align-items: center;
  font-family: var(--card-sans);
  font-size: 2.3cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 245, 250, 0.6);
  z-index: 2;
}
.card__pt {
  position: absolute;
  right: 3.6cqw; bottom: 2.2cqw;
  min-width: 20cqw;
  height: 9.4cqw;
  padding: 0 2cqw;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
  border-radius: 2cqw 2cqw 2cqw 4cqw;
  font-size: 6.2cqw;
  font-weight: 800;
  line-height: 1;
  color: var(--plate-ink);
  background: linear-gradient(180deg, var(--plate-a), var(--plate-b) 58%, var(--plate-c));
  box-shadow:
    0 0 0 0.4cqw rgba(6, 20, 34, 0.85),
    inset 0 0.45cqw 0 rgba(255, 255, 255, 0.85),
    0 0.8cqw 1.6cqw rgba(0, 8, 18, 0.5);
  z-index: 3;
  font-variant-numeric: lining-nums tabular-nums;
}
.has-pt .card__pt { display: flex; }
.pt-slash { opacity: 0.6; font-weight: 600; }
.pt-p.is-up, .pt-t.is-up { color: #157a43; }
.pt-p.is-down, .pt-t.is-down { color: #c2321c; }
.card__pt.pt--up {
  background: linear-gradient(180deg, #eafff1, #b7ecc9 58%, #8fd6aa);
  box-shadow: 0 0 0 0.4cqw #0e5a32, inset 0 0.45cqw 0 rgba(255, 255, 255, 0.85), 0 0 3cqw rgba(60, 220, 130, 0.55);
}
.card__pt.pt--down {
  background: linear-gradient(180deg, #fff0ec, #f6c4b8 58%, #e79a87);
  box-shadow: 0 0 0 0.4cqw #7a1a0e, inset 0 0.45cqw 0 rgba(255, 255, 255, 0.85), 0 0 3cqw rgba(255, 90, 60, 0.55);
}

/* damage marker: a red diamond beside the P/T */
.card__damage {
  position: absolute;
  right: 4.6cqw; bottom: 12.4cqw;
  width: 9cqw; height: 9cqw;
  display: grid;
  place-items: center;
  z-index: 4;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease, transform 220ms var(--card-ease-out);
  pointer-events: none;
}
.card__damage::before {
  content: "";
  position: absolute;
  inset: 0.8cqw;
  transform: rotate(45deg);
  border-radius: 1.2cqw;
  background: linear-gradient(180deg, #ff6a4d, #b8220f);
  box-shadow: 0 0 0 0.4cqw #3d0802, 0 0 2.4cqw rgba(255, 70, 40, 0.7);
}
.card__damage span {
  position: relative;
  font-family: var(--card-sans);
  font-weight: 800;
  font-size: 4.6cqw;
  color: #fff;
}
.is-damaged .card__damage { opacity: 1; transform: none; }

/* counters */
.card__counters {
  position: absolute;
  left: 7.4cqw; top: 63.6cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
  z-index: 3;
  pointer-events: none;
}
.counter {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.5cqw 1.6cqw;
  border-radius: 99px;
  font-family: var(--card-sans);
  font-size: 3.2cqw;
  font-weight: 700;
  color: #e9fbff;
  background: rgba(4, 20, 34, 0.88);
  box-shadow: 0 0 0 0.3cqw #7fe3d6;
}
.counter__n { opacity: 0.8; }

/* badges: summoning sickness, control changed */
.card__badges {
  position: absolute;
  left: 8cqw; top: 16.6cqw;
  display: flex;
  gap: 1.2cqw;
  z-index: 3;
  pointer-events: none;
}
.badge {
  display: none;
  width: 8cqw; height: 8cqw;
  padding: 1.4cqw;
  border-radius: 50%;
  background: rgba(4, 18, 32, 0.82);
  box-shadow: 0 0 0 0.35cqw rgba(160, 230, 255, 0.6);
}
.badge svg { width: 100%; height: 100%; display: block; }
.badge--sick svg { fill: none; stroke: #bfeeff; stroke-width: 1.4; overflow: visible; }
.badge--sick circle { animation: sick-rise 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.badge--sick circle:nth-child(2) { animation-delay: -0.8s; }
.badge--sick circle:nth-child(3) { animation-delay: -1.6s; }
@keyframes sick-rise { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-14%); opacity: 1; } }
.badge--stolen { box-shadow: 0 0 0 0.35cqw #c79bff, 0 0 2cqw rgba(199, 155, 255, 0.6); }
.badge--stolen svg { fill: none; stroke: #e7d6ff; stroke-width: 1.4; }
.is-sick .badge--sick, .is-stolen .badge--stolen { display: block; }
.card:not(.card--battlefield) .badge--sick { display: none; }

/* ---------- foil sheen (pointer-driven) ---------- */
.card__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  mix-blend-mode: overlay;
  background:
    radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.3) * 100%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
    linear-gradient(115deg, transparent 22%, rgba(120, 240, 255, 0.4) 38%, rgba(255, 255, 255, 0.55) 48%, rgba(190, 150, 255, 0.35) 58%, transparent 76%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__sheen { opacity: 1; }
}
.card.is-hovered .card__sheen { opacity: 1; }

/* ---------- highlight states ---------- */
.card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  --hl: transparent;
  box-shadow: 0 0 0 0.9cqw var(--hl), 0 0 4cqw 1cqw var(--hl), 0 0 12cqw 2cqw color-mix(in srgb, var(--hl) 55%, transparent);
}
.card__glow::after {
  content: "";
  position: absolute;
  inset: -2.4cqw;
  border-radius: 7cqw;
  border: 0.9cqw solid var(--hl);
  opacity: 0;
  pointer-events: none;
}
.hl-playable    .card__glow { --hl: var(--hl-playable); opacity: 1; }
.hl-target      .card__glow { --hl: var(--hl-target); opacity: 1; }
.hl-selected    .card__glow { --hl: var(--hl-selected); opacity: 1; box-shadow: 0 0 0 1.4cqw var(--hl), 0 0 7cqw 2.4cqw var(--hl); }
.hl-attacking   .card__glow { --hl: var(--hl-attacking); opacity: 1; box-shadow: 0 0 0 1cqw var(--hl), 0 0 6cqw 2.4cqw var(--hl); }
.hl-blocking    .card__glow { --hl: var(--hl-blocking); opacity: 1; }
.hl-mustRespond .card__glow { --hl: var(--hl-mustRespond); opacity: 1; }

/* playable: a soft breathing edge (Arena-like blue glow, original timing) */
.hl-playable .card__glow { animation: hl-breathe 2.2s ease-in-out infinite; }
@keyframes hl-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
/* target + mustRespond: an outer ring that pulses outward */
.hl-target .card__glow::after,
.hl-mustRespond .card__glow::after { animation: hl-pulse 1.1s var(--card-ease-out) infinite; }
@keyframes hl-pulse {
  0% { opacity: 0.95; transform: scale(0.97); }
  100% { opacity: 0; transform: scale(1.07); }
}
/* attacking: brighter rim on the art */
.hl-attacking .card__art { box-shadow: 0 0 0 0.5cqw rgba(4, 16, 28, 0.9), 0 0 0 1cqw var(--hl-attacking); }
.hl-blocking .card__art  { box-shadow: 0 0 0 0.5cqw rgba(4, 16, 28, 0.9), 0 0 0 1cqw var(--hl-blocking); }

/* ---------- tapped ---------- */
.card.is-tapped .card__body { filter: saturate(0.78) brightness(0.86); }
.cards-auto-tap .card { transition: rotate 220ms var(--card-ease-out); }
.cards-auto-tap .card.is-tapped { rotate: 90deg; }

/* ---------- battlefield: compact, art-forward ---------- */
.card--battlefield .card__frame,
.card--battlefield .card__type,
.card--battlefield .card__textbox,
.card--battlefield .card__footer { display: none; }
.card--battlefield .card__art {
  top: 2.6cqw; left: 2.6cqw; right: 2.6cqw; bottom: 2.6cqw;
  height: auto;
  border-radius: 3.4cqw;
  box-shadow: 0 0 0 0.6cqw var(--rim);
}
.card--battlefield .card__title {
  top: 2.6cqw; left: 2.6cqw; right: 2.6cqw;
  height: 17cqw;
  padding: 0 3cqw 0 4.4cqw;
  border-radius: 3.4cqw 3.4cqw 1.6cqw 1.6cqw;
  color: #eef8fc;
  background: linear-gradient(180deg, rgba(3, 14, 26, 0.92), rgba(3, 14, 26, 0.7));
  box-shadow: inset 0 -0.4cqw 0 var(--rim);
}
.card--battlefield .card__name { font-size: 8.6cqw; text-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.6); }
.card--battlefield .card__cost .ms { width: 6.4cqw; height: 6.4cqw; }
.card--battlefield .mana-cost { gap: 0.6cqw; }
.card--battlefield .card__pt {
  right: 3.6cqw; bottom: 3.6cqw;
  min-width: 38cqw;
  height: 18cqw;
  border-radius: 4cqw 4cqw 4cqw 7cqw;
  font-size: 12.4cqw;
}
.card--battlefield .card__damage { right: 4cqw; bottom: 23cqw; width: 17cqw; height: 17cqw; }
.card--battlefield .card__damage span { font-size: 8.4cqw; }
.card--battlefield .card__counters { left: 4.6cqw; top: auto; bottom: 24cqw; }
.card--battlefield .counter { font-size: 8cqw; padding: 1.2cqw 3.4cqw; }
.card--battlefield .card__badges { left: 5cqw; top: 22cqw; }
.card--battlefield .badge { width: 15cqw; height: 15cqw; padding: 2.6cqw; }


/* ---------- card back ---------- */
.card-back .card__body { background: #050f1f; }
.card-back__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2.6cqw #08182b,
    inset 0 0 0 3.1cqw rgba(230, 201, 138, 0.75),
    inset 0 0 0 4.4cqw rgba(8, 24, 43, 0.6),
    inset 0 0 0 4.8cqw rgba(127, 211, 230, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hl-playable .card__glow,
  .hl-target .card__glow::after,
  .hl-mustRespond .card__glow::after,
  .badge--sick circle,
  .tc--new .tc__to::after { animation: none; }
  .hl-target .card__glow::after,
  .hl-mustRespond .card__glow::after { opacity: 0.8; transform: none; }
  .cards-auto-tap .card, .card__damage { transition: opacity 160ms ease; }
}

/* ---------- image mode (official Scryfall scans) ----------
   The <img class="card__img"> sits above the procedural layers (frame, plates, text) and below
   the overlays (P/T when modified, damage, counters, badges, sheen). Until it loads, or if it
   fails, the procedural card shows: `.card--img` is only added on the image's load event.
   The full scan is shown (object-fit: fill, 488x680 vs 63:88 differs by 0.2%), so the artist
   credit and copyright line stay visible. */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: inherit;
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  -webkit-user-drag: none;
}
.card--img .card__img { opacity: 1; }
.card--img .card__art,
.card--img .card__frame,
.card--img .card__title,
.card--img .card__type,
.card--img .card__footer,
.card--img .card__textbox { visibility: hidden; }
/* P/T box only when it differs from the printed values (or the creature is damaged) */
.card--img:not(.is-damaged) .card__pt:not(.pt--up):not(.pt--down) { display: none; }
.card--img .card__pt { height: 10cqw; min-width: 22cqw; font-size: 7cqw; right: 4cqw; bottom: 4cqw; }
.card--img.card--battlefield .card__pt { height: 16cqw; min-width: 34cqw; font-size: 11cqw; }
/* text changes: our rules box is laid over the printed one so the struck/replaced words show */
.card--img.has-text-change:not(.card--battlefield) .card__textbox {
  visibility: visible;
  top: 87cqw; left: 7cqw; right: 7cqw; bottom: 14cqw;
  z-index: 3;
}
.card--img.has-text-change.card--battlefield .card__body::after {
  content: "";
  position: absolute;
  top: 4cqw; right: 4cqw;
  width: 9cqw; height: 9cqw;
  border-radius: 50%;
  background: #2ec4b6;
  box-shadow: 0 0 0 0.8cqw rgba(4, 16, 28, 0.85), 0 0 3cqw rgba(46, 196, 182, 0.8);
  z-index: 3;
}
.card--img.hl-attacking .card__body { box-shadow: 0 0 0 1cqw var(--hl-attacking); }
.card--img.hl-blocking .card__body  { box-shadow: 0 0 0 1cqw var(--hl-blocking); }

/* ---------- official mana symbols (Scryfall SVGs, `.ms--sf`) ----------
   Flat discs as printed; costs get the printed cards' small dark offset shadow. */
.ms--sf svg { overflow: hidden; border-radius: 50%; }
.card__cost .ms--sf svg { filter: drop-shadow(-0.06em 0.08em 0 rgba(0, 0, 0, 0.85)); overflow: visible; }