/* Shared/cardRenderer.css — styles for the DOM built by Shared/cardRenderer.js.
 *
 * Contract (SPEC §13): the root .card has no padding/border/margin; all
 * decoration is drawn inside the box (inset shadows, ::before/::after, child
 * layers). Children size themselves in cqw (1% of the card's width) so a card
 * looks identical at 96 px and at 400 px. The root's OWN properties can't use
 * cqw (they would resolve against an ancestor), so they use % instead.
 */

/* Custom properties set per card by cardRenderer.js (pages may read them;
   --card-bg may also be set directly, applyTemplateStyle() does exactly that):
   --card-bg      the template's background colour
   --card-ar      the template's width / height
   --rarity-color the rarity edge colour
   --stat-up / --stat-down  colours of buffed / damaged live stats */
.card {
  --rarity-color: #b8c0c8;
  --card-bg: #2a2f38;
  --card-ar: 0.714;
  --stat-up: #6dff9a;
  --stat-down: #ff5e54;
  --card-radius: 4.6%;

  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--card-radius) / calc(var(--card-radius) * var(--card-ar));
  background-color: var(--card-bg);
  color: #f1e4c8;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.card img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- Areas ---------------------------------------------------------------- */

.card > [data-area] {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}

.card > [data-area][hidden] {
  display: none;
}

.card > [data-area="art"] {
  z-index: 1;
  overflow: hidden;
  background: #0b161b;
}

.card > [data-area="art"][data-layer="above"] {
  z-index: 3;
}

.card > [data-area="art"] > [data-role="art-img"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(calc(var(--art-x, 0) * 100%), calc(var(--art-y, 0) * 100%)) scale(var(--art-scale, 1));
  transform-origin: 50% 50%;
}

.card > [data-role="frame"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.card-area--text {
  z-index: 4;
  display: flex;
  overflow: hidden;
  font-size: calc(var(--fs, 5) * 1cqw);
  line-height: 1.15;
  font-kerning: normal;
}

/* Name + description: a column whose main axis is vertical. */
.card-area--block {
  flex-direction: column;
  font-size: calc(var(--fs, 5) * var(--fit, 1) * 1cqw);
}
/* `safe`: text that doesn't fit starts at the top instead of spilling upwards. */
.card-area--block[data-valign="top"] { justify-content: flex-start; }
.card-area--block[data-valign="middle"] { justify-content: safe center; }
.card-area--block[data-valign="bottom"] { justify-content: safe flex-end; }
.card-area--block[data-align="left"] { text-align: left; }
.card-area--block[data-align="center"] { text-align: center; }
.card-area--block[data-align="right"] { text-align: right; }

/* Stats: icon + number in a row. */
.card-area--stat { flex-direction: row; }
.card-area--stat[data-align="left"] { justify-content: flex-start; }
.card-area--stat[data-align="center"] { justify-content: center; }
.card-area--stat[data-align="right"] { justify-content: flex-end; }
.card-area--stat[data-valign="top"] { align-items: flex-start; }
.card-area--stat[data-valign="middle"] { align-items: center; }
.card-area--stat[data-valign="bottom"] { align-items: flex-end; }

/* "Outline" = a crisp dark rim around the glyphs for readability on art. */
.card-area--text[data-outline="true"] {
  text-shadow:
    0.055em 0 0 #0b0806, -0.055em 0 0 #0b0806, 0 0.055em 0 #0b0806, 0 -0.055em 0 #0b0806,
    0.04em 0.04em 0 #0b0806, -0.04em 0.04em 0 #0b0806, 0.04em -0.04em 0 #0b0806, -0.04em -0.04em 0 #0b0806,
    0 0.09em 0.18em rgb(0 0 0 / 0.7);
}

.card-name {
  display: block;
  flex: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.card-desc {
  display: block;
  flex: none;
  width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.card-line {
  margin: 0 0 0.38em;
}
.card-line:last-child { margin-bottom: 0; }

.card-ability-name {
  font-weight: 700;
}

.card-line--flavor {
  font-style: italic;
  opacity: 0.88;
}

.card-line--ability + .card-line--flavor {
  padding-top: 0.38em;
  border-top: max(1px, 0.25cqw) solid color-mix(in srgb, currentColor 28%, transparent);
}

/* ---- Stats ---------------------------------------------------------------- */

.card-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.card-stat-icon,
.card-stat-glyph {
  display: none;
  flex: none;
  line-height: 0;
}
.card-stat-icon svg {
  width: 0.74em;
  height: 0.74em;
  filter: drop-shadow(0 0.04em 0.05em rgb(0 0 0 / 0.6));
}
/* The diagonal sword covers less area than the heart: give it a larger box. */
.card-stat--power .card-stat-icon svg {
  width: 0.86em;
  height: 0.86em;
}
/* The glyph is the only cost-type cue on templates that hide stat icons, so
   it keeps a legible floor: gear and skull stay distinguishable at hand size. */
.card-stat-glyph svg {
  width: max(9px, 0.6em);
  height: max(9px, 0.6em);
  margin-top: -0.45em;
  filter: drop-shadow(0 0.03em 0.04em rgb(0 0 0 / 0.6));
}

/* showIcon → icon before the number; otherwise cost shows a small glyph after. */
.card-area--stat[data-icon="true"] .card-stat-icon { display: inline-block; }
.card-area--cost[data-icon="false"] .card-stat-glyph { display: inline-block; }

/* Long numbers shrink so "12" or "999" still fit a badge. */
.card-stat-value[data-len="2"] { font-size: 0.86em; }
.card-stat-value[data-len="3"] { font-size: 0.7em; }

.card-stat[data-trend="up"] .card-stat-value { color: var(--stat-up); }
.card-stat[data-trend="down"] .card-stat-value { color: var(--stat-down); }

.card-stat--bump {
  animation: card-stat-bump 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-stat-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Imageless templates: CSS-drawn frame ----------------------------------- */

.card--imageless {
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(255 255 255 / 0.1), transparent 65%),
    linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(0 0 0 / 0.3)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.022) 0 1px, transparent 1px 4px),
    var(--card-bg);
}

.card > [data-role="css-frame"] {
  position: absolute;
  inset: 1.3cqw;
  z-index: 2;
  pointer-events: none;
  border-radius: 3.4cqw;
  /* Neon hairline just inside the brass ring (the ring covers its outer part). */
  box-shadow: inset 0 0 0 1.45cqw rgb(0 174 255 / 0.32);
}

.card-css-frame-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.05cqw solid transparent;
  background: linear-gradient(150deg, #f7e2ad, #c8963e 18%, #6e4c17 40%, #deb062 58%, #8a6424 78%, #f0cf86) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}

/* Corner rivets, painted after (above) the ring. */
.card > [data-role="css-frame"]::after {
  content: '';
  position: absolute;
  inset: 0;
  --rivet: radial-gradient(circle, #fff1c9 0 10%, #e1b05a 26%, #8a6424 54%, #2e1f08 68%, transparent 72%);
  background:
    var(--rivet) left 0.15cqw top 0.15cqw / 3.4cqw 3.4cqw no-repeat,
    var(--rivet) right 0.15cqw top 0.15cqw / 3.4cqw 3.4cqw no-repeat,
    var(--rivet) left 0.15cqw bottom 0.15cqw / 3.4cqw 3.4cqw no-repeat,
    var(--rivet) right 0.15cqw bottom 0.15cqw / 3.4cqw 3.4cqw no-repeat;
}

/* Picture window: brass bezel + inner shade. */
.card--imageless > [data-area="art"] {
  border-radius: 2.2cqw;
  box-shadow:
    0 0 0 0.45cqw #1a1209,
    0 0 0 1cqw #b98a3c,
    0 0 0 1.35cqw #2a1c08,
    0 0.8cqw 2cqw rgb(0 0 0 / 0.55);
}
.card--imageless > [data-area="art"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.3cqw rgb(255 232 180 / 0.22), inset 0 0 5cqw rgb(0 0 0 / 0.55);
}

/* Text backings. Each text area has data-tone (set by cardRenderer.js from
   the template's text colour): "light" text sits on a dark plate, "dark" text
   on parchment, so every colour the owner picks stays readable on any
   template background. The defaults are a dark name plate (light name text),
   a parchment description panel (dark description text) and dark stat badges
   (white numbers). */
.card--imageless > [data-area="name"],
.card--imageless > [data-area="description"][data-tone="light"] {
  /* Nearly opaque, so it stays dark on a light template background too. */
  background: linear-gradient(180deg, rgb(8 14 17 / 0.9), rgb(8 14 17 / 0.78));
  box-shadow:
    inset 0 0 0 0.3cqw rgb(200 150 62 / 0.6),
    inset 0 0.5cqw 1.2cqw rgb(0 0 0 / 0.45),
    0 0.3cqw 0.8cqw rgb(0 0 0 / 0.35);
}
.card--imageless > [data-area="description"],
.card--imageless > [data-area="name"][data-tone="dark"] {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(150 104 40 / 0.28)),
    linear-gradient(180deg, #f7ecd2, #eadbb5 70%, #e0cc9f);
  box-shadow:
    inset 0 0 0 0.3cqw rgb(110 76 23 / 0.55),
    inset 0 0 0 0.75cqw rgb(255 250 235 / 0.35),
    0 0.5cqw 1.4cqw rgb(0 0 0 / 0.5);
}

/* Name plate. */
.card--imageless > [data-area="name"] {
  padding: 0 2.2cqw;
  border-radius: 1.6cqw;
}

/* Description panel. */
.card--imageless > [data-area="description"] {
  padding: 2.4cqw 2.8cqw;
  border-radius: 1.8cqw;
}

/* Stat badges behind cost / power / health. */
.card--imageless > .card-area--stat {
  border-radius: 999px;
}

.card--imageless > [data-area="cost"] {
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #344d5a, #132129 58%, #081015);
  box-shadow:
    inset 0 0 0 0.8cqw #d3a24c,
    inset 0 0 0 1.2cqw #3b2808,
    inset 0 0.9cqw 1.6cqw rgb(255 255 255 / 0.1),
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6),
    0 0 2.6cqw rgb(0 174 255 / 0.4);
}
.card--imageless[data-cost-type="sacrifice"] > [data-area="cost"] {
  background: radial-gradient(circle at 36% 28%, #6e2020, #3a0d0d 58%, #1a0404);
  box-shadow:
    inset 0 0 0 0.8cqw #c27a3d,
    inset 0 0 0 1.2cqw #3b1608,
    inset 0 0.9cqw 1.6cqw rgb(255 255 255 / 0.1),
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6),
    0 0 2.6cqw rgb(229 72 60 / 0.5);
}

.card--imageless > [data-area="power"] {
  background: linear-gradient(180deg, #4a2c17, #231209 70%);
  box-shadow:
    inset 0 0 0 0.7cqw #d9955a,
    inset 0 0 0 1.05cqw #2c1406,
    inset 0 0.8cqw 1.4cqw rgb(255 255 255 / 0.1),
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6);
}

.card--imageless > [data-area="health"] {
  background: linear-gradient(180deg, #1c4a42, #0b241f 70%);
  box-shadow:
    inset 0 0 0 0.7cqw #5fbfa9,
    inset 0 0 0 1.05cqw #06201a,
    inset 0 0.8cqw 1.4cqw rgb(255 255 255 / 0.1),
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6);
}

/* Light badges for dark stat numbers (same rims, pale metal faces). */
.card--imageless > [data-area="cost"][data-tone="dark"] {
  background: radial-gradient(circle at 36% 28%, #fffaf0, #f0dcaa 58%, #d2ae62);
  box-shadow:
    inset 0 0 0 0.8cqw #8a6424,
    inset 0 0 0 1.2cqw #f6dfa8,
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6),
    0 0 2.6cqw rgb(0 174 255 / 0.4);
}
.card--imageless[data-cost-type="sacrifice"] > [data-area="cost"][data-tone="dark"] {
  background: radial-gradient(circle at 36% 28%, #fff4f0, #f2c4b6 58%, #d88c78);
  box-shadow:
    inset 0 0 0 0.8cqw #8c2a2a,
    inset 0 0 0 1.2cqw #f7d2c4,
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6),
    0 0 2.6cqw rgb(229 72 60 / 0.5);
}
.card--imageless > [data-area="power"][data-tone="dark"] {
  background: linear-gradient(180deg, #fdebd6, #eec39b 70%);
  box-shadow:
    inset 0 0 0 0.7cqw #8a4a1c,
    inset 0 0 0 1.05cqw #f7d6b6,
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6);
}
.card--imageless > [data-area="health"][data-tone="dark"] {
  background: linear-gradient(180deg, #e2f6ef, #b0dccd 70%);
  box-shadow:
    inset 0 0 0 0.7cqw #1e6e5c,
    inset 0 0 0 1.05cqw #d2efe5,
    0 0.6cqw 1.4cqw rgb(0 0 0 / 0.6);
}

/* ---- Placeholder art ("workshop blueprint") -------------------------------- */

.card-art-placeholder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 50% 48%, color-mix(in srgb, var(--rarity-color) 30%, transparent), transparent 72%),
    linear-gradient(rgb(0 174 255 / 0.17) 1px, transparent 1px) 0 0 / 8cqw 8cqw,
    linear-gradient(90deg, rgb(0 174 255 / 0.17) 1px, transparent 1px) 0 0 / 8cqw 8cqw,
    linear-gradient(rgb(0 174 255 / 0.06) 1px, transparent 1px) 0 0 / 2cqw 2cqw,
    linear-gradient(90deg, rgb(0 174 255 / 0.06) 1px, transparent 1px) 0 0 / 2cqw 2cqw,
    linear-gradient(160deg, #173d4d 0%, #0c212b 55%, #07141b 100%);
}

.card-art-placeholder-gears {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-art-placeholder .ph-gear {
  fill: none;
  stroke: #d9a94f;
  stroke-width: 0.9;
  stroke-linejoin: round;
  opacity: 0.5;
}
.card-art-placeholder .ph-gear--hub { fill: rgb(200 150 62 / 0.25); }
.card-art-placeholder .ph-spoke { stroke-width: 1.6; opacity: 0.28; }
.card-art-placeholder .ph-gear--small { stroke: #7fd8ff; opacity: 0.55; }
.card-art-placeholder .ph-measure {
  fill: none;
  stroke: #7fd8ff;
  stroke-width: 0.5;
  opacity: 0.45;
}

.card-art-placeholder-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 17cqw/1 Georgia, 'Times New Roman', serif;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: #f6e7c6;
  text-shadow: 0 0 3cqw rgb(0 174 255 / 0.75), 0 0.5cqw 0 rgb(0 0 0 / 0.55);
}

/* ---- Support ribbon --------------------------------------------------------- */

/* A riveted brass plaque centred on the picture's lower edge, above the frame
   image, so it reads on framed and imageless templates alike. */
.card-kind-ribbon {
  position: absolute;
  left: calc(var(--art-left, 0%) + var(--art-width, 100%) / 2);
  bottom: calc(var(--art-bottom, 0%) + 2.2cqw);
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.9cqw 4.4cqw 1cqw;
  border-radius: 1.2cqw;
  font: 700 5cqw/1 Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2a1a05;
  text-shadow: 0 0.08em 0 rgb(255 240 200 / 0.55);
  pointer-events: none;
  --rivet: radial-gradient(circle, #fff1c9 0 12%, #8a6424 48%, #2e1f08 64%, transparent 70%);
  background:
    var(--rivet) left 0.9cqw center / 1.7cqw 1.7cqw no-repeat,
    var(--rivet) right 0.9cqw center / 1.7cqw 1.7cqw no-repeat,
    linear-gradient(180deg, #f7e2ad, #d9a94e 45%, #a7772c);
  box-shadow:
    inset 0 0 0 0.35cqw #5a3c10,
    inset 0 0.4cqw 0.6cqw rgb(255 250 230 / 0.45),
    0 0.5cqw 1.4cqw rgb(0 0 0 / 0.6),
    0 0 2.4cqw rgb(0 174 255 / 0.35);
}

/* Compact cards fill the card with the picture. */
.card--compact > .card-kind-ribbon {
  left: 50%;
  bottom: 4cqw;
  font-size: max(8px, 9cqw);
}

/* ---- Status badges -------------------------------------------------------- */

/* On the picture's top-right corner (compact mode: the card's corner). */
.card-badges {
  position: absolute;
  top: calc(var(--art-top, 0%) + 2.5cqw);
  right: calc(var(--art-right, 0%) + 2.5cqw);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.4cqw;
  max-width: 58%;
  font: 700 max(11px, 7cqw)/1 system-ui, 'Segoe UI', Roboto, sans-serif;
}
.card-badges:empty { display: none; }

.card-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  color: #f1e4c8;
  background: radial-gradient(circle at 35% 30%, #22343d, #0a1419 70%);
  box-shadow: inset 0 0 0 max(1px, 0.5cqw) rgb(241 228 200 / 0.55), 0 0.1em 0.3em rgb(0 0 0 / 0.6);
}
.card-badge-icon { display: grid; place-items: center; line-height: 1; }
.card-badge-icon svg { width: 1.05em; height: 1.05em; }
.card-badge-count {
  position: absolute;
  right: -0.25em;
  bottom: -0.25em;
  min-width: 1.15em;
  padding: 0 0.2em;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: max(11px, 0.66em);
  line-height: 1.15em;
  text-align: center;
  color: #03141f;
  background: #7fd8ff;
}
.card-badge[data-status="suppressed"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #f5b83f, 0 0 0.45em rgb(245 184 63 / 0.6); }
.card-badge[data-status="poisoned"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #6fdc5a, 0 0 0.45em rgb(111 220 90 / 0.6); }
.card-badge[data-status="armor"],
.card-badge[data-status="armored"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #9fc7e8, 0 0 0.45em rgb(159 199 232 / 0.55); }
.card-badge[data-status="reduction"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #b9a2e6, 0 0 0.45em rgb(185 162 230 / 0.55); }
.card-badge[data-status="ward"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #7fffd4, 0 0 0.45em rgb(127 255 212 / 0.6); }
.card-badge[data-status="empowered"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #ff9f43, 0 0 0.45em rgb(255 159 67 / 0.6); }
.card-badge[data-status="weakened"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #c09bff, 0 0 0.45em rgb(192 155 255 / 0.6); }
.card-badge[data-status="fortified"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #ff9aa8, 0 0 0.45em rgb(255 154 168 / 0.55); }
.card-badge[data-status="charged"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #ffe066, 0 0 0.45em rgb(255 224 102 / 0.6); }
.card-badge[data-status="grown"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #9ad35a, 0 0 0.45em rgb(154 211 90 / 0.55); }
.card-badge[data-status="shield"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #f2c14e, 0 0 0.45em rgb(242 193 78 / 0.6); }
.card-badge[data-status="focused"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #ff6b5e, 0 0 0.5em rgb(255 107 94 / 0.7); }
.card-badge[data-status="impaled"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #e0523f, 0 0 0.45em rgb(224 82 63 / 0.6); }
.card-badge[data-status="coffin"] { box-shadow: inset 0 0 0 max(1px, 0.5cqw) #c78bb0, 0 0 0.45em rgb(199 139 176 / 0.6); }

.card-badge--new {
  animation: card-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-badge-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Compact mode (board cards) -------------------------------------------- */

.card--compact > [data-area="art"] {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  box-shadow: none;
}
.card--compact > [data-area="art"]::after { display: none; }
.card--compact .card-art-placeholder-mark { font-size: 30cqw; }

.card--compact > [data-area="name"],
.card--compact > [data-area="description"] {
  display: none !important;
}

.card--compact > .card-area--stat {
  display: flex !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0.12em 0.34em 0.12em 0.24em;
  border-radius: 999px;
  font: 400 max(11px, 16cqw)/1.1 Impact, 'Arial Black', 'Franklin Gothic Heavy', system-ui, sans-serif !important;
  color: #fff;
  background: linear-gradient(180deg, rgb(20 32 38 / 0.94), rgb(5 11 14 / 0.94));
  box-shadow: inset 0 0 0 max(1px, 1.1cqw) var(--chip-rim, #c8963e), 0 0.08em 0.25em rgb(0 0 0 / 0.7);
}
.card--compact > [data-area="cost"] { left: 4cqw !important; top: 4cqw !important; --chip-rim: #d3a24c; }
.card--compact[data-cost-type="sacrifice"] > [data-area="cost"] { --chip-rim: #e5534b; }
.card--compact > [data-area="power"] { left: 4cqw !important; bottom: 4cqw; --chip-rim: #d9955a; }
.card--compact > [data-area="health"] { right: 4cqw; bottom: 4cqw; --chip-rim: #5fbfa9; }

.card--compact .card-stat { font-weight: 700; }
/* Long numbers still shrink, but board text never goes below 11 px. */
.card--compact .card-stat-value[data-len="2"] { font-size: max(11px, 0.86em); }
.card--compact .card-stat-value[data-len="3"] { font-size: max(11px, 0.7em); }
.card--compact .card-stat-value { color: #fff; }
.card--compact .card-stat[data-trend="up"] .card-stat-value { color: var(--stat-up); }
.card--compact .card-stat[data-trend="down"] .card-stat-value { color: var(--stat-down); }
.card--compact .card-stat-icon { display: inline-block !important; }
.card--compact .card-stat-glyph { display: none !important; }
.card--compact .card-stat-icon svg { width: 0.8em; height: 0.8em; }

.card--compact > .card-badges {
  top: 4cqw;
  right: 4cqw;
  font-size: max(11px, 13cqw);
}

/* ---- Rarity: coloured inner edge + legendary shimmer ------------------------ */

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 0.9cqw color-mix(in srgb, var(--rarity-color) 85%, transparent),
    inset 0 0 0 1.35cqw rgb(0 0 0 / 0.35),
    inset 0 0 5cqw color-mix(in srgb, var(--rarity-color) 45%, transparent);
}
.card--rarity-common::after {
  box-shadow:
    inset 0 0 0 0.7cqw color-mix(in srgb, var(--rarity-color) 60%, transparent),
    inset 0 0 0 1.1cqw rgb(0 0 0 / 0.35),
    inset 0 0 3cqw color-mix(in srgb, var(--rarity-color) 22%, transparent);
}
.card--rarity-legendary::after {
  box-shadow:
    inset 0 0 0 0.9cqw var(--rarity-color),
    inset 0 0 0 1.35cqw rgb(60 36 0 / 0.5),
    inset 0 0 7cqw color-mix(in srgb, var(--rarity-color) 60%, transparent);
}
.card--no-rarity::after {
  box-shadow: inset 0 0 0 0.6cqw rgb(0 0 0 / 0.45);
}

.card--rarity-legendary:not(.card--no-rarity)::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -55%;
  width: 55%;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgb(255 232 160 / 0) 25%,
    rgb(255 236 176 / 0.32) 46%,
    rgb(255 255 245 / 0.55) 50%,
    rgb(255 236 176 / 0.32) 54%,
    rgb(255 232 160 / 0) 75%,
    transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(0) skewX(-14deg);
  animation: card-shimmer 4.6s ease-in-out infinite;
}
@keyframes card-shimmer {
  0% { transform: translateX(0) skewX(-14deg); }
  42%, 100% { transform: translateX(310%) skewX(-14deg); }
}

/* ---- Card back ------------------------------------------------------------ */

.card-back {
  --back-accent: #00aeff;
  background: #081419;
}

.card-back-face {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--back-accent) 30%, transparent), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, rgb(200 150 62 / 0.12) 0 0.35cqw, transparent 0.35cqw 5cqw),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 2.4cqw),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 2.4cqw),
    linear-gradient(160deg, #15333f, #0a1a21 55%, #061015);
}

.card-back-emblem {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 1;
}
.card-back-emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.card-back .cb-trace {
  fill: none;
  stroke: var(--back-accent);
  stroke-width: 0.9;
  opacity: 0.6;
}
.card-back .cb-node { fill: var(--back-accent); opacity: 0.8; }
.card-back .cb-gear {
  fill: #b98a3c;
  stroke: #3b2808;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.card-back .cb-ring {
  fill: #2a1c08;
  stroke: #f0cf86;
  stroke-width: 1.2;
}
.card-back .cb-core {
  fill: #06141b;
  stroke: var(--back-accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 2px var(--back-accent));
}
.card-back .cb-bolt {
  fill: #dff6ff;
  stroke: var(--back-accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2.5px var(--back-accent));
}

/* A template's card-back picture: full-bleed over the built-in back, which
   stays underneath in case the picture fails to load. */
.card-back-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}
.card-back--image .card-css-frame { display: none; }

/* ---- Interaction states pages may add ------------------------------------- */

/* Greyed-out "not owned" card (gallery). */
.card--locked {
  filter: grayscale(0.85) brightness(0.55);
}

/* Selected / targeted card: neon ring outside the box (outline adds no layout). */
.card--selected {
  outline: 3px solid #00aeff;
  outline-offset: 2px;
  box-shadow: 0 0 18px 2px rgb(0 174 255 / 0.55);
}

/* Playable / actionable card: pulsing neon glow. */
.card--playable {
  box-shadow: 0 0 0 2px rgb(0 174 255 / 0.85), 0 0 16px 3px rgb(0 174 255 / 0.5);
  animation: card-playable-pulse 1.4s ease-in-out infinite;
}
@keyframes card-playable-pulse {
  50% { box-shadow: 0 0 0 2px rgb(0 174 255 / 1), 0 0 26px 6px rgb(0 174 255 / 0.7); }
}

/* Reduced motion: the OS setting, unless the player overrode it (Shared/motion.js sets data-motion). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) .card--rarity-legendary:not(.card--no-rarity)::before {
    animation: none;
    transform: translateX(95%) skewX(-14deg);
    opacity: 0.55;
  }
  :root:not([data-motion='full']) .card-stat--bump,
  :root:not([data-motion='full']) .card-badge--new,
  :root:not([data-motion='full']) .card--playable {
    animation: none;
  }
}
:root[data-motion='reduced'] .card--rarity-legendary:not(.card--no-rarity)::before {
  animation: none;
  transform: translateX(95%) skewX(-14deg);
  opacity: 0.55;
}
:root[data-motion='reduced'] .card-stat--bump,
:root[data-motion='reduced'] .card-badge--new,
:root[data-motion='reduced'] .card--playable {
  animation: none;
}