/* SnapDragon card component — ported VERBATIM from the demo (apps/snapdragon/src/styles.css)
   so marketing cards render identically to the in-game cards. Keep in sync with the demo. */
:root{
  --r-art:8px;
  --font-display:'Rubik Dirt', system-ui, sans-serif;
  --font-label:'Barlow Condensed', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;
}
.card-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}

.card{
  width:var(--card-w,250px);
  font-size:calc(var(--card-w,250px) * .064);
  aspect-ratio:5/7;
  background:var(--ice);
  border-radius:calc(var(--card-w,250px)*.072);
  padding:calc(var(--card-w,250px)*.04);
  position:relative;
  box-shadow:var(--shadow-ink), 0 12px 32px rgba(0,0,0,.45);
  flex-shrink:0;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:calc(var(--card-w,250px)*.072);
  background-image:radial-gradient(circle, rgba(14,12,15,.5) 1.6px, transparent 1.7px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(circle 130px at 0 0, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle 130px at 0 0, #000 0%, transparent 70%);
  pointer-events:none;
}
.card .frame{
  background:var(--ink);
  border-radius:calc(var(--card-w,250px)*.048);
  width:100%;height:100%;
  padding:calc(var(--card-w,250px)*.032);
  position:relative;
}
.card .art{
  position:relative;width:100%;height:100%;
  border-radius:var(--r-art);
  background-color:var(--field);
  background-image:radial-gradient(circle, rgba(255,255,255,.13) 1.7px, transparent 1.8px);
  background-size:12px 12px;
  overflow:hidden;
}
.card .art > svg.illo{position:absolute;inset:0;width:100%;height:100%}
.card .scrim{
  position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(to top, rgba(14,12,15,.92) 30%, rgba(14,12,15,.55) 65%, transparent 100%);
}
.card .titleblock{position:absolute;right:.75em;bottom:.6em;left:.75em;text-align:right}
.card .title{
  font-family:var(--font-display);color:var(--gold);
  font-size:1.3em;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;
}
.card .cat{
  font-family:var(--font-label);font-weight:600;color:var(--label-red);
  letter-spacing:.24em;font-size:.7em;text-transform:uppercase;margin-top:.3em;
}
.card .stat-strip{display:flex;justify-content:flex-end;gap:.4em;margin-bottom:.4em;flex-wrap:wrap}
.card .stat{
  font-family:var(--font-label);font-weight:700;font-size:.72em;
  letter-spacing:.08em;color:var(--paper);
  background:rgba(14,12,15,.85);border:1.5px solid var(--ink);
  padding:.15em .6em;border-radius:999px;
}
.card .chips-left{position:absolute;top:.6em;left:.6em;display:flex;flex-direction:column;gap:.5em;align-items:center}
.card .gem{
  width:1.5em;height:1.5em;border-radius:50%;
  background:var(--gemc,var(--rarity-common));
  border:3px solid var(--ink);
  box-shadow:var(--shadow-ink-sm), inset -2px -3px 0 rgba(0,0,0,.35), inset 2px 3px 0 rgba(255,255,255,.35);
}
.card .cat-chip{
  width:1.6em;height:1.6em;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-ink-sm);
  display:flex;align-items:center;justify-content:center;
}
.card .cat-chip svg{width:60%;height:60%;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card .cost{
  position:absolute;top:.6em;right:.6em;
  width:1.9em;height:1.9em;border-radius:50%;
  background:var(--ink);border:2px solid var(--gold);color:var(--gold);
  font-family:var(--font-label);font-weight:700;font-size:1em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-ink-sm);
}
/* founding wax-seal marque (Founder card only) */
.card .seal{
  position:absolute;bottom:.6em;left:.6em;z-index:2;
  font-family:var(--font-label);font-weight:700;font-size:.6em;letter-spacing:.1em;
  color:var(--gold);text-transform:uppercase;
}
/* rarity keylines + gems */
.r-uncommon .art{box-shadow:inset 0 0 0 2px var(--rarity-uncommon)}
.r-rare     .art{box-shadow:inset 0 0 0 2px var(--rarity-rare)}
.r-epic     .art{box-shadow:inset 0 0 0 2px var(--rarity-epic)}
.r-legendary .art{box-shadow:inset 0 0 0 2px var(--rarity-legendary)}
.r-common   {--gemc:var(--rarity-common)}
.r-uncommon {--gemc:var(--rarity-uncommon)}
.r-rare     {--gemc:var(--rarity-rare)}
.r-epic     {--gemc:var(--rarity-epic)}
.r-legendary{--gemc:var(--rarity-legendary)}
.r-epic .art::before, .r-legendary .art::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.35) 1.6px, transparent 1.7px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(circle 90px at 12% 8%, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle 90px at 12% 8%, #000 0%, transparent 70%);
  pointer-events:none;
}
.r-legendary .art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(232,163,61,.28) 50%, transparent 65%);
  background-size:260% 100%;
  animation:cardshimmer 4.5s linear infinite;
}
@keyframes cardshimmer{from{background-position:130% 0}to{background-position:-130% 0}}