/* Card face, frame iii (from scripts/build-cards.py svg_card), as HTML/CSS.
   Face: full-bleed art, cost chips in one row top-left, dark strip at the bottom with type label, name, one effect line.
   Rules and flavour are only in the inspect overlay (.inspect).

   Size: set --card-w on .card (or a parent). Everything inside scales with the card through container query
   units (cqi = 1 % of the card width), measured on the 168 x 236 reference grid, with floors so text stays
   legible on small phone cards. State: data-state="playable|unaffordable|selected|targeting|discard|disabled".

   Markup (see card.html):
   <article class="card" data-type="attack" data-state="playable">
     <img class="card__art" src="..." alt="">
     <div class="card__cost"><span class="cost cost--power"><svg class="ico"><use href="#i-power"/></svg>10</span></div>
     <div class="card__strip"><span class="card__type"><svg class="ico"><use href="#i-type-attack"/></svg>Attack</span>
       <h3 class="card__name">Railgun</h3><p class="card__effect">28 damage</p></div>
   </article> */

.card {
  --card-w: 168px;
  --card-line: rgba(255, 210, 122, 0.6);
  --card-glow: none;
  position: relative; flex: none;
  width: var(--card-w); aspect-ratio: 168 / 236;
  container-type: inline-size;
  border-radius: calc(var(--card-w) * 0.0715); /* 12 / 168 */
  background: var(--c-void);
  box-shadow: var(--sh-2);
  color: var(--c-text);
  isolation: isolate;
  transform: translateY(var(--lift, 0)) scale(var(--scale, 1));
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
              filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.card::after { /* gold hairline frame, drawn above the art */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--card-line), var(--card-glow);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.card__art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: -1;
  background: #0d1130;
  transition: filter var(--dur-base) var(--ease-standard);
}
.card__art--placeholder { /* until art exists */
  display: block;
  background: radial-gradient(70% 45% at 50% 35%, rgba(91, 63, 217, 0.55), transparent 70%), #0d1130;
}

/* cost row: one row, top-left (8 px inset on the 168 grid) */
.card__cost { position: absolute; top: 4.8cqi; left: 4.8cqi; right: 4.8cqi; display: flex; gap: 2.4cqi; flex-wrap: nowrap; }
.cost {
  --cost: var(--c-pearl);
  display: inline-flex; align-items: center; gap: 1.2cqi;
  height: max(14px, 9.6cqi); padding: 0 max(4px, 3.6cqi) 0 max(3px, 2.6cqi);
  border-radius: 999px; border: 1px solid var(--cost);
  background: rgba(7, 11, 31, 0.87); color: var(--cost);
  font: 500 max(9px, 6.25cqi)/1 var(--font-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cost .ico { width: max(9px, 7.2cqi); height: max(9px, 7.2cqi); --icon-stroke: 2; }
.cost--alloy { --cost: var(--c-alloy); }
.cost--power { --cost: var(--c-power); }
.cost--ordnance { --cost: var(--c-ordnance); }
.cost--armour { --cost: var(--c-pearl); }

/* bottom strip: starts at y 146 of 236 on the reference grid; grows upward if the name wraps */
.card__strip {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 38%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center;
  padding: 0 3cqi 4.4cqi;
  border-radius: 0 0 7.15cqi 7.15cqi;
  background: linear-gradient(180deg, rgba(7, 11, 31, 0) 0%, rgba(7, 11, 31, 0.55) 16%, rgba(7, 11, 31, 0.86) 36%, rgba(7, 11, 31, 0.95) 100%);
}
.card__type {
  display: inline-flex; align-items: center; gap: 1.2cqi;
  font: 400 max(7px, 3.9cqi)/1.2 var(--font-mono); letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--c-gold); opacity: 0.88; margin-bottom: 1.2cqi; padding-left: 0.25em;
}
.card__type .ico { width: max(8px, 5.4cqi); height: max(8px, 5.4cqi); --icon-stroke: 2; margin-left: -0.25em; }
.card__name {
  font: 500 max(10.5px, 8.9cqi)/1.1 var(--font-display); letter-spacing: 0.02em; color: var(--c-pearl);
  text-wrap: balance; max-width: 100%; hyphens: none;
}
.card__name--long { font-size: max(10px, 8.05cqi); }
.card__effect {
  margin-top: 1.4cqi;
  font: 600 max(8.75px, 5.95cqi)/1.15 var(--font-body); color: var(--c-gold); white-space: nowrap; letter-spacing: -0.005em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* state badge, top-right */
.card__badge {
  position: absolute; top: 4.2cqi; right: 4.2cqi; display: none;
  width: max(18px, 12cqi); height: max(18px, 12cqi); border-radius: 50%;
  place-items: center; background: var(--c-void); border: 1px solid currentColor;
}
.card__badge .ico { width: 70%; height: 70%; --icon-stroke: 2.2; }

/* ---------- states ---------- */
.card[data-state="playable"] { cursor: pointer; }
.card[data-state="playable"]:hover { --lift: -4%; --card-line: var(--c-gold); --card-glow: 0 0 18px rgba(255, 210, 122, 0.35); }

.card[data-state="unaffordable"] .card__art { filter: saturate(0.3) brightness(0.5); }
.card[data-state="unaffordable"] .card__name { color: var(--c-text-2); }
.card[data-state="unaffordable"] { --card-line: rgba(237, 235, 245, 0.25); cursor: pointer; }
.cost.is-short { border-style: dashed; color: var(--c-danger); border-color: var(--c-danger); }

.card[data-state="selected"] { --lift: -9%; --scale: 1.04; --card-line: var(--c-gold); z-index: 2;
  --card-glow: 0 0 0 1px var(--c-gold), 0 0 26px rgba(255, 210, 122, 0.55); }

.card[data-state="targeting"] { --lift: -9%; --scale: 1.04; --card-line: var(--c-danger); z-index: 2;
  --card-glow: 0 0 0 1px var(--c-danger), 0 0 26px rgba(255, 110, 127, 0.55); animation: card-target-pulse 1200ms var(--ease-standard) infinite; }
.card[data-state="targeting"] .card__badge { display: grid; color: var(--c-danger); }

.card[data-state="discard"] { --lift: 5%; --card-line: var(--c-danger); cursor: pointer;
  --card-glow: inset 0 0 0 2px rgba(255, 110, 127, 0.0); }
.card[data-state="discard"] .card__art { filter: brightness(0.45) saturate(0.5); }
.card[data-state="discard"]::before { /* hatched overlay so the mark does not rely on colour */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(255, 110, 127, 0.18) 0 2px, transparent 2px 9px);
  outline: 2px dashed var(--c-danger); outline-offset: -2px;
}
.card[data-state="discard"] .card__badge { display: grid; color: var(--c-danger); z-index: 2; }

.card[data-state="disabled"] { filter: grayscale(0.85); opacity: 0.55; cursor: not-allowed; --card-line: rgba(237, 235, 245, 0.2); }

.card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

@keyframes card-target-pulse {
  0%, 100% { box-shadow: var(--sh-2), 0 0 0 0 rgba(255, 110, 127, 0.0); }
  50% { box-shadow: var(--sh-2), 0 0 0 6px rgba(255, 110, 127, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .card[data-state="targeting"] { animation: none; } }

/* ---------- card back: design agent's image (assets/gen, provisional b0 pick) over a CSS fallback ---------- */
.card--back { overflow: hidden; }
.card--back .card__art {
  background:
    url("../assets/gen/card-back-s41-b0.png") center / cover no-repeat,
    radial-gradient(60% 40% at 50% 50%, rgba(255, 210, 122, 0.18), transparent 70%),
    conic-gradient(from 30deg at 50% 50%, rgba(91, 63, 217, 0.5), rgba(7, 11, 31, 0.2), rgba(91, 63, 217, 0.5), rgba(7, 11, 31, 0.2), rgba(91, 63, 217, 0.5), rgba(7, 11, 31, 0.2), rgba(91, 63, 217, 0.5)),
    #0d1130;
}
.card--back .card__sigil { display: none; } /* shown only by the fallback, see .card--back-css */
.card--back-css .card__art { background-image: none; }
.card--back-css .card__sigil { display: block; position: absolute; inset: 30% 22%; color: var(--c-gold); opacity: 0.85; }
.card--back .card__sigil svg { width: 100%; height: 100%; }

/* ---------- inspect overlay ---------- */
.inspect-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) var(--sp-4);
  background: var(--c-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade-in var(--dur-base) var(--ease-out);
}
.inspect-scrim[hidden] { display: none; }
.inspect-scrim--inline { position: relative; inset: auto; min-height: 560px; border-radius: var(--r-lg); animation: none; }
.inspect {
  position: relative;
  display: grid; gap: var(--sp-4); width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  grid-template-columns: 1fr; justify-items: center;
  padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--c-void-raised); border: 1px solid var(--c-line-strong); box-shadow: var(--sh-3);
  animation: inspect-in var(--dur-slow) var(--ease-spring);
}
.inspect .card { --card-w: min(336px, 62vw); }
.inspect__body { width: 100%; display: grid; gap: var(--sp-3); align-content: start; }
.inspect__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.inspect__title { font: 500 var(--fs-h1)/var(--lh-h1) var(--font-display); color: var(--c-text); margin: 0; }
.inspect__target { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--c-text-2); }
.inspect__target .ico { width: 18px; height: 18px; }
.inspect__target--hostile { color: var(--c-danger); }
.inspect__rule { font: 600 var(--fs-body-lg)/1.45 var(--font-body); color: var(--c-text); }
.inspect__flavour { font-style: italic; color: var(--c-text-2); }
.inspect__cost { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.inspect__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.inspect__actions .btn { flex: 1 1 120px; }
.inspect__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
@media (min-width: 720px) {
  .inspect { grid-template-columns: auto 1fr; justify-items: stretch; align-items: start; padding: var(--sp-6); gap: var(--sp-6); }
  .inspect .card { --card-w: 300px; }
}
@keyframes inspect-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }