/* 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);
}
/* Colour palettes (original): each colour sets the frame metal, plates, text box and rim.
   Blue is the .card default above. Per-colour tones are also exposed as --pal-<c>-a/b/c so
   hybrid and dual-land frames can split two of them. */
.card {
  --pal-w-a: #efe6c6; --pal-w-b: #c8b88a; --pal-w-c: #8a7a4e;
  --pal-u-a: #4d93c2; --pal-u-b: #1f5a8c; --pal-u-c: #10355a;
  --pal-b-a: #6c6573; --pal-b-b: #38323e; --pal-b-c: #17141a;
  --pal-r-a: #e48a5e; --pal-r-b: #b2442b; --pal-r-c: #5e1c14;
  --pal-g-a: #86b779; --pal-g-b: #417c47; --pal-g-c: #1c4325;
  --gem: #1f6d98;
}
.frame-w {
  --outer-a: #2a261c; --outer-b: #0e0c08;
  --frame-a: var(--pal-w-a); --frame-b: var(--pal-w-b); --frame-c: var(--pal-w-c);
  --plate-a: #fffdf5; --plate-b: #efe7cf; --plate-c: #d8caa2; --plate-ink: #2c2618;
  --box-a: #fbf8ee; --box-b: #ece4cd; --box-ink: #262014;
  --rim: rgba(255, 246, 214, 0.6); --gem: #8a7340;
}
.frame-b {
  --outer-a: #16131a; --outer-b: #050407;
  --frame-a: var(--pal-b-a); --frame-b: var(--pal-b-b); --frame-c: var(--pal-b-c);
  --plate-a: #ecebee; --plate-b: #cdc9d1; --plate-c: #a9a3af; --plate-ink: #141117;
  --box-a: #ebe8e6; --box-b: #d3cdc9; --box-ink: #18141a;
  --rim: rgba(210, 200, 222, 0.42); --gem: #4a3f55;
}
.frame-r {
  --outer-a: #2a0f0a; --outer-b: #0c0403;
  --frame-a: var(--pal-r-a); --frame-b: var(--pal-r-b); --frame-c: var(--pal-r-c);
  --plate-a: #fdf3ec; --plate-b: #efd6c8; --plate-c: #d7ab95; --plate-ink: #2e120b;
  --box-a: #f8eee7; --box-b: #ead6ca; --box-ink: #26130d;
  --rim: rgba(255, 210, 186, 0.5); --gem: #9c3a22;
}
.frame-g {
  --outer-a: #0f1f12; --outer-b: #040a05;
  --frame-a: var(--pal-g-a); --frame-b: var(--pal-g-b); --frame-c: var(--pal-g-c);
  --plate-a: #f5faef; --plate-b: #d9e7cc; --plate-c: #b5cba2; --plate-ink: #15240f;
  --box-a: #f1f5e9; --box-b: #dae5cc; --box-ink: #172312;
  --rim: rgba(214, 240, 196, 0.5); --gem: #3a6f3a;
}
.frame-gold {
  --outer-a: #241c0b; --outer-b: #0b0803;
  --frame-a: #ecd286; --frame-b: #bb9440; --frame-c: #6a4d18;
  --plate-a: #fffaea; --plate-b: #f1e2b6; --plate-c: #d8bf7e; --plate-ink: #2c2210;
  --box-a: #f9f3e1; --box-b: #ebdcb4; --box-ink: #251d0d;
  --rim: rgba(255, 232, 170, 0.6); --gem: #8a6420;
}
.frame-artifact {
  --outer-a: #1d1c1b; --outer-b: #080807;
  --frame-a: #c3bcb2; --frame-b: #8b8278; --frame-c: #4b443d;
  --plate-a: #f8f6f3; --plate-b: #dfdad3; --plate-c: #c0b8ad; --plate-ink: #24201b;
  --box-a: #f1efeb; --box-b: #dedad3; --box-ink: #1f1c18;
  --rim: rgba(236, 228, 214, 0.5); --gem: #6b6157;
}
/* hybrid: neutral plates, frame split between the two colours */
.frame-hybrid {
  --outer-a: #1a1a1c; --outer-b: #060607;
  --plate-a: #fbfaf7; --plate-b: #e3dfd6; --plate-c: #c5bfb2; --plate-ink: #201d18;
  --box-a: #f5f3ee; --box-b: #e2ded5; --box-ink: #1d1a16;
  --rim: rgba(240, 236, 226, 0.55); --gem: #5e584e;
}
.split-a-w { --sa-a: var(--pal-w-a); --sa-c: var(--pal-w-c); }
.split-a-u { --sa-a: var(--pal-u-a); --sa-c: var(--pal-u-c); }
.split-a-b { --sa-a: var(--pal-b-a); --sa-c: var(--pal-b-c); }
.split-a-r { --sa-a: var(--pal-r-a); --sa-c: var(--pal-r-c); }
.split-a-g { --sa-a: var(--pal-g-a); --sa-c: var(--pal-g-c); }
.split-b-w { --sb-a: var(--pal-w-a); --sb-c: var(--pal-w-c); }
.split-b-u { --sb-a: var(--pal-u-a); --sb-c: var(--pal-u-c); }
.split-b-b { --sb-a: var(--pal-b-a); --sb-c: var(--pal-b-c); }
.split-b-r { --sb-a: var(--pal-r-a); --sb-c: var(--pal-r-c); }
.split-b-g { --sb-a: var(--pal-g-a); --sb-c: var(--pal-g-c); }
.frame-hybrid {
  --frame-fill: linear-gradient(105deg, var(--sa-a), var(--sa-c) 49%, var(--sb-c) 51%, var(--sb-a));
}

.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); --gem: #6a5532;
}
/* land accents: the lower frame takes the colour of the mana the land makes */
.frame-land.accent-u { --frame-c: #2b6283; --rim: rgba(184, 228, 240, 0.55); }
.frame-land.accent-w { --frame-c: #b3a06a; --rim: rgba(255, 244, 210, 0.6); }
.frame-land.accent-b { --frame-c: #2c2731; --rim: rgba(206, 196, 216, 0.45); }
.frame-land.accent-r { --frame-c: #8a3220; --rim: rgba(255, 206, 182, 0.5); }
.frame-land.accent-g { --frame-c: #2e6236; --rim: rgba(204, 236, 186, 0.5); }
.frame-land.accent-gold { --frame-c: #8f6b26; --rim: rgba(255, 230, 166, 0.55); }
.frame-land.accent-split {
  /* one layer only (the frame's background-size list has three entries) */
  --frame-fill: linear-gradient(105deg, var(--sa-c), var(--frame-b) 34%, var(--frame-a) 50%, var(--frame-b) 66%, var(--sb-c));
}
.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); --gem: #646d73;
}

.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%),
    var(--frame-fill, 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: var(--gem); display: flex; }
.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), PROTOCOL v1.7 item 9: removed words grey and struck
   through, added words blue (measured reference values, details in local notes). Light text boxes use
   the first pair; a dark text box (none yet, e.g. future inverted frames) sets .tc-on-dark. */
.card { --tc-added: #0055ff; --tc-removed: #808080; --tc-glow: rgba(0, 85, 255, 0.55); }
.card.tc-on-dark, .tc-on-dark .card { --tc-added: #8dc3ff; --tc-removed: #818181; --tc-glow: rgba(141, 195, 255, 0.8); }
.tc { white-space: nowrap; }
.tc__from {
  color: var(--tc-removed);
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--tc-removed);
  margin-right: 0.22em;
}
.tc__to {
  position: relative;
  color: var(--tc-added);
}
/* until end of turn (Crystal Spray): same colours, dotted underline marks it as temporary */
.tc--eot .tc__to {
  text-decoration: underline dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}
.tc__to::after {
  content: "";
  position: absolute;
  inset: -0.1em -0.18em;
  border-radius: 0.3em;
  box-shadow: 0 0 0.45em 0.12em var(--tc-glow);
  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 (counters.js registry; each chip gets --ctr-tone from its registry colour)
   row: small kinds (+1/+1, shield, oil...), overflow "+K" chip; corner: loyalty / defense badge */
.card__counters {
  position: absolute;
  left: 7.4cqw; top: 63.6cqw;
  right: 7.4cqw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
  z-index: 4;
  pointer-events: none;
}
.counter {
  --ctr-tone: #b9cde0;
  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;
  line-height: 1;
  color: #f2fbff;
  background: rgba(4, 20, 34, 0.9);
  box-shadow: 0 0 0 0.3cqw var(--ctr-tone), 0 0.4cqw 1cqw rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.counter__icon { display: inline-grid; color: var(--ctr-tone); }
.counter__icon svg { width: 1.15em; height: 1.15em; }
.counter__k { color: var(--ctr-tone); }
.counter__n:empty { display: none; }
.counter--more { color: #d6e4ef; background: rgba(4, 20, 34, 0.75); }

.card__corner-ctr {
  position: absolute;
  right: 3.6cqw; bottom: 2.2cqw;
  z-index: 4;
  pointer-events: none;
}
.counter-corner {
  --ctr-tone: #e9edf2;
  position: relative;
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 16.5cqw;
  font-family: var(--card-sans);
  font-weight: 800;
  font-size: 7.4cqw;
  line-height: 1;
  color: var(--ctr-tone);
  filter: drop-shadow(0 0.5cqw 1cqw rgba(0, 0, 0, 0.5));
}
.ctr-plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.counter-corner .counter__n { position: relative; margin-top: -1.4cqw; }

/* 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; right: 4.6cqw; top: auto; bottom: 24cqw; }
.card--battlefield .counter { font-size: 8cqw; padding: 1.2cqw 3.4cqw; }
.card--battlefield.has-corner-ctr .card__counters { right: 34cqw; bottom: 4.6cqw; }
.card--battlefield .card__corner-ctr { right: 3.6cqw; bottom: 3.6cqw; }
.card--battlefield .counter-corner { width: 28cqw; height: 31cqw; font-size: 15cqw; }
.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; }
/* loyalty / defense: the scan prints the starting value, so off the battlefield the badge shows only
   when the current value differs from the printed one */
.card--img:not(.card--battlefield) .counter-corner.is-printed { visibility: hidden; }
/* 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: #8dc3ff;
  box-shadow: 0 0 0 0.8cqw rgba(4, 16, 28, 0.85), 0 0 3cqw rgba(141, 195, 255, 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; }

/* ---------- colour identity pips (renderColorIdentity) ----------
   Inline row of mana symbols; size follows font-size (1em pips). */
.color-identity { display: inline-flex; gap: 0.12em; align-items: center; vertical-align: middle; line-height: 1; }
.color-identity .ms { width: 1em; height: 1em; display: inline-flex; }
.color-identity .ms svg { width: 100%; height: 100%; }

/* ---------- commander (PROTOCOL v3.1): crest, gold rim, command-zone look, tax chip ----------
   .card__cmdr is a root child above the body (z 11, over the scan and sheen). Sizes are in card
   widths (cqw) with px floors so a 60-70px opponent card keeps a legible crest and tax. */
.card { --cmdr-gold: #f3d27a; --cmdr-gold-deep: #b8892c; --cmdr-ink: #1b1407; }
.card__cmdr {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 11;
  pointer-events: none;
}
.is-commander > .card__cmdr, .has-tax > .card__cmdr { display: block; }
/* gold rim (commanders only) */
.is-commander > .card__cmdr::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 max(1.5px, 1.3cqw) var(--cmdr-gold), inset 0 0 0 max(2.5px, 2.2cqw) rgba(27, 20, 7, 0.55);
}
/* crest: top centre, over the name bar */
.cmdr-crest {
  display: none;
  position: absolute;
  left: 50%; top: -1cqw;
  width: max(14px, 15cqw); height: max(14px, 15cqw);
  translate: -50% 0;
  filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.7));
}
.cmdr-crest svg { width: 100%; height: 100%; display: block; }
.is-commander .cmdr-crest { display: block; }
.card--battlefield .cmdr-crest { width: max(14px, 22cqw); height: max(14px, 22cqw); top: 1cqw; }
/* command zone: plinth glow and a ribbon along the bottom edge */
.in-command.is-commander > .card__cmdr::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 max(1px, 0.6cqw) rgba(27, 20, 7, 0.9), 0 0 max(6px, 6cqw) max(1px, 1cqw) rgba(243, 210, 122, 0.55);
}
.cmdr-ribbon {
  display: none;
  position: absolute;
  left: 7cqw; bottom: 2.4cqw;
  padding: 0.8cqw 3cqw;
  border-radius: 1.4cqw;
  background: linear-gradient(180deg, #2b210c, var(--cmdr-ink));
  box-shadow: 0 0 0 0.5cqw var(--cmdr-gold-deep);
  color: var(--cmdr-gold);
  font: 700 6cqw/1 var(--card-serif, Georgia, serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.in-command.is-commander .cmdr-ribbon { display: block; }
/* small cards (opponent seats): the ribbon text would be unreadable, the crest and rim carry it */
@container (max-width: 99px) {
  .cmdr-ribbon { display: none !important; }
}
/* tax chip: right edge just under the mana cost (it adds to the cost); "+2" with a generic-mana disc */
.cmdr-tax {
  display: none;
  position: absolute;
  right: -2cqw; top: 14cqw;
  font-size: max(11px, 11cqw);
}
.has-tax .cmdr-tax { display: inline-flex; }
.cmdr-tax, .commander-tax {
  align-items: center;
  gap: 0.08em;
  padding: 0.1em 0.18em 0.1em 0.3em;
  border-radius: 1em;
  background: linear-gradient(180deg, #3a2a10, #160f04);
  box-shadow: 0 0 0 0.09em var(--cmdr-gold, #f3d27a), 0 0.12em 0.3em rgba(0, 0, 0, 0.6);
  color: var(--cmdr-gold, #f3d27a);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.commander-tax { display: inline-flex; font-size: 1em; vertical-align: middle; }
.commander-tax.is-zero { opacity: 0.45; }
.tax__plus { font-size: 0.9em; }
.tax__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: #d9d0bf;
  box-shadow: inset 0 0 0 0.08em #8c7f68;
  color: #2a241c;
  font-size: 0.9em;
}
.commander-crest { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.commander-crest svg { width: 100%; height: 100%; display: block; }