/* ═══════════════════════════════════════════════════════════════════════════
   cardmodel.css — v3.2 "physical card model"
   Real trading-card proportions (63:88), thick beveled metal frame per rarity,
   tribe accent, inset art window, nameplate banner, parchment text box,
   gem cost + embossed medallion stats, stacked-edge thickness, foil + sheen.
   Loaded AFTER fx31.css. Pure CSS (+ tiny cardmodel.js for inspect tilt).
   Remove the <link> to restore the v3.1 flat look.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · proportions: 63:88 ≈ 0.716 ─────────────────────────────────────── */
:root { --card-w: 148px; --card-h: 207px; --cm-paper: url(assets/cardmodel/paper.svg); --cm-back: url(assets/cardmodel/back.svg); }
@media (max-width: 640px) { :root { --card-w: 122px; --card-h: 170px; } }
@media (max-height: 780px) and (min-width: 641px) { :root { --card-w: 132px; --card-h: 184px; } }
@media (max-width: 380px) { :root { --card-w: 104px; --card-h: 145px; } }
.card.lg { --cw: 160px; --ch: 223px; }
.card.sm { --cw: 110px; --ch: 154px; }
.card.xl { --cw: 200px; --ch: 279px; }
@media (max-width: 900px) { .card.xl { --cw: 150px; --ch: 209px; } }
@media (max-width: 600px) { .card.lg { --cw: 112px; --ch: 156px; } }
.v3d-grid .card.v3d-card { aspect-ratio: 63 / 88; }

/* ── 2 · material variables (cards AND board minions share them) ────────── */
.card, .unit {
  --fw: 5px;
  --m1: #8a847a; --m2: #55504a; --m3: #1f1c19;           /* frame metal: light / mid / dark   */
  --ed1: #3a3632; --ed2: #2a2724; --ed3: #1b1917; --ed4: #0e0d0c; /* edge thickness steps */
  --ring: #6a645c; --pk1: #6a5f4e; --pk2: #473e31;      /* parchment */
  --gsh: 0 0 0 0 transparent;                             /* rarity glow */
  --acc: #b0a48c;                                         /* tribe accent */
  --nb1: #3a2e1c; --nb2: #1d150d; --nbc: var(--gold2);    /* nameplate */
}
.card.rarity-common, .unit.rarity-common { /* dark iron */
  --m1: #8d877d; --m2: #58534c; --m3: #1e1b18; --ring: #7a746a; --ed1: #3b3733; --ed2: #2b2825; --ed3: #1c1a18; --ed4: #0d0c0b;
}
.card.rarity-rare, .unit.rarity-rare { /* silver-blue */
  --m1: #e6f0fa; --m2: #8aa6c4; --m3: #2b3e55; --ring: #9dc0e6; --ed1: #5d7898; --ed2: #3e566f; --ed3: #263649; --ed4: #121b27;
  --pk1: #556171; --pk2: #38424f; --gsh: 0 0 10px #6a9ccc55;
}
.card.rarity-epic, .unit.rarity-epic { /* gold + violet */
  --m1: #fff0b0; --m2: #cf9c3c; --m3: #5e3f12; --ring: #8e5ad8; --ed1: #a67a28; --ed2: #7a5516; --ed3: #4a3210; --ed4: #1f1507;
  --pk1: #6e5f48; --pk2: #4a3d34; --gsh: 0 0 12px #a080c066;
}
.card.rarity-curse, .unit.rarity-curse { /* blood + black */
  --m1: #c24a38; --m2: #701812; --m3: #140403; --ring: #ff7a3a; --ed1: #5a1510; --ed2: #3a0d0a; --ed3: #230706; --ed4: #0a0202;
  --pk1: #5c3c32; --pk2: #3a2320; --gsh: 0 0 14px #e8501e66;
}
/* tribe accents */
[data-card-tribe="oathbreaker"] { --acc: #e6c26a; }
[data-card-tribe="hexblade"]    { --acc: #e63a58; }
[data-card-tribe="gravewarden"] { --acc: #8fbba0; }
[data-card-tribe="voidseer"]    { --acc: #a07ef0; }
/* category tints for nameplate */
.card.cat-unit  { --nb1: #1f4a3e; --nb2: #0e231d; --nbc: #c8f4e8; --body: linear-gradient(165deg, #172a24 0%, #0d1713 55%, #101a16 100%); }
.card.cat-power { --nb1: #3a2c52; --nb2: #1a1226; --nbc: #e6d8fa; --body: linear-gradient(165deg, #251d2c 0%, #151017 55%, #19141d 100%); }
.card.cat-spell { --nb1: #4a2a22; --nb2: #24120e; --nbc: #ffe6d8; --body: linear-gradient(165deg, #2a1d19 0%, #170f0d 55%, #1b1411 100%); }
.card.cat-buff  { --nb1: #4a3a16; --nb2: #251c0a; --nbc: #fbe9b8; --body: linear-gradient(165deg, #2b2316 0%, #18140d 55%, #1c1810 100%); }
.card.cat-trap  { --nb1: #3a2a1e; --nb2: #1b130d; --nbc: #ead9bf; --body: linear-gradient(165deg, #231b16 0%, #130f0c 55%, #181310 100%); }

/* ── 3 · the card body: thick beveled frame ─────────────────────────────── */
.card.card .card-inner {
  overflow: visible; border: var(--fw) solid transparent; border-radius: 13px;
  background:
    linear-gradient(0deg, #0006, #0006) padding-box,
    var(--body, linear-gradient(165deg, #2a241c, #16120e 50%, #1a1410)) padding-box,
    linear-gradient(135deg, var(--m1) 0%, var(--m2) 17%, var(--m3) 36%, var(--m2) 55%, var(--m1) 70%, var(--m2) 86%, var(--m3) 100%) border-box;
  box-shadow:
    0 0 0 1px #000a,
    1px 1px 0 1px var(--ed1), 2px 2px 0 1px var(--ed1), 3px 3px 0 1px var(--ed2), 4px 4px 0 1px var(--ed3), 5px 5px 0 1px var(--ed4), /* stacked side edge = thickness */
    var(--gsh),
    7px 13px 14px #000b;
  animation: none;
}
/* inner bevel + corner brackets */
.card.card .card-inner::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, #000), inset 0 0 0 3px #0008, inset 0 0 14px #000c;
  border: none; width: auto; height: auto; opacity: 1;
}
.card.card .card-inner::after {
  content: ""; position: absolute; inset: 3px; z-index: 5; pointer-events: none; border: none; opacity: .95; width: auto; height: auto; border-radius: 0;
  --b: var(--m1); --l: 13px;
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 1.5px var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 1.5px var(--l) no-repeat,
    radial-gradient(circle at 0 0, var(--m1) 0 2px, transparent 2.6px), radial-gradient(circle at 100% 0, var(--m1) 0 2px, transparent 2.6px),
    radial-gradient(circle at 0 100%, var(--m1) 0 2px, transparent 2.6px), radial-gradient(circle at 100% 100%, var(--m1) 0 2px, transparent 2.6px);
}
.card.card.rarity-rare .card-inner { animation: none; }
.card.card.rarity-epic .card-inner, .card.card.rarity-curse .card-inner { animation: none; }
.card.card.rarity-curse .card-inner {
  box-shadow: 0 0 0 1px #000a, 1px 1px 0 1px var(--ed1), 2px 2px 0 1px var(--ed1), 3px 3px 0 1px var(--ed2), 4px 4px 0 1px var(--ed3), 5px 5px 0 1px var(--ed4), var(--gsh), 7px 13px 14px #000b, 0 0 18px #c4401a44;
}
/* playable ember rim (kept from v3, now around the thick frame) */
.hand .card.card.playable .card-inner {
  box-shadow:
    0 0 0 1px #000a, 1px 1px 0 1px var(--ed1), 2px 2px 0 1px var(--ed1), 3px 3px 0 1px var(--ed2), 4px 4px 0 1px var(--ed3), 5px 5px 0 1px var(--ed4), var(--gsh),
    0 0 0 2.5px color-mix(in srgb, var(--glow-play) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--glow-play) 42%, transparent), 7px 13px 14px #000b;
  animation: none;
}
.hand .card.card.unplayable { filter: brightness(.6) saturate(.8); }

/* the animated rarity glint (existing .card-edge) rides on the metal rim */
.card.card .card-edge { padding: 2.5px; z-index: 7; }

/* ── 4 · inset art window ───────────────────────────────────────────────── */
.card .art-wrap {
  margin: 4px 4px 0; height: 50%; flex: 0 0 auto; border-radius: 7px 7px 3px 3px; background: #0a0810;
  box-shadow: 0 0 0 1px #000d, 0 0 0 2px var(--ring), 0 0 0 3px #000b, 0 0 8px 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
.card.is-unit .art-wrap { height: 47%; }
.card.lg .art-wrap, .card.xl .art-wrap, .card.v3d-card .art-wrap { height: 54%; }
.card.is-unit.lg .art-wrap, .card.is-unit.xl .art-wrap, .card.is-unit.v3d-card .art-wrap { height: 50%; }
.card .art-wrap::before { /* inner shadow: window is recessed */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 4px 9px #000d, inset 0 0 0 1px #0009, inset 0 -3px 8px #0008, inset 0 0 18px #0007;
}
.card .art-wrap::after { height: 34%; background: linear-gradient(transparent, #120c0ecc); z-index: 1; }
.card .art-wrap .type-ribbon { z-index: 2; bottom: 10px; padding: 1px 6px; font-size: .52rem; background: linear-gradient(90deg, transparent, #000b 20%, #000b 80%, transparent); }
.card.xl .art-wrap .type-ribbon { bottom: 12px; font-size: .62rem; }

/* ── 5 · nameplate banner (swallow-tail ends, overlaps the art edge) ────── */
.card.card .name-bar {
  margin: -9px 0 0; padding: 4px 21px 5px 9px; flex: 0 0 auto; z-index: 3; position: relative; border: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
  background:
    linear-gradient(var(--m1), var(--m1)) top / 100% 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--acc) 70%, #000), color-mix(in srgb, var(--acc) 70%, #000)) bottom / 100% 1.5px no-repeat,
    linear-gradient(180deg, var(--nb1), var(--nb2) 85%);
  color: var(--nbc); text-shadow: 0 1px 0 #000, 0 0 6px #000a; box-shadow: none; line-height: 1.2;
}
.card.sm .name-bar, .card.v3d-card .name-bar { padding: 3px 16px 4px 7px; }

/* ── 6 · text box: aged parchment / stone ───────────────────────────────── */
.card.card .effect {
  margin: 3px 4px 4px; padding: 5px 6px 6px; border-radius: 3px 3px 9px 9px; color: #f1e6cc; position: relative; flex: 1 1 0; min-height: 0; overflow: hidden;
  background:
    var(--cm-paper) 0 0 / 120px 120px,
    radial-gradient(ellipse 90% 70% at 50% 0%, #fff0d022, transparent 70%),
    linear-gradient(180deg, var(--pk1), var(--pk2));
  box-shadow:
    0 0 0 1px #000d, 0 0 0 2px color-mix(in srgb, var(--acc) 45%, #000),
    inset 0 3px 7px #000a, inset 0 -5px 10px #0008, inset 0 0 14px #0006;
}
.card.card.is-unit .effect { padding-bottom: 12px; }
.card .effect b, .card .effect strong { color: #ffd796; text-shadow: 0 1px 1px #000; }
.card .effect em { color: #cdbb98; }
.card .fx-text { text-shadow: 0 1px 2px #000, 0 0 1px #000; font-weight: 600; }
.card .kw { background: #1a1410e6; box-shadow: 0 1px 2px #0008, inset 0 1px 0 #ffffff14; }

/* ── 7 · cost gem + stat medallions (metal rings, enamel, emboss) ───────── */
.card.card .cost {
  top: -8px; left: -8px; width: 38px; height: 38px; border: 3px solid transparent; z-index: 8;
  background:
    radial-gradient(ellipse 55% 34% at 38% 24%, #ffffffd0, transparent 70%),
    radial-gradient(circle at 50% 62%, #8ad2f0, #2a6aa0 46%, #0b2342 82%) padding-box,
    conic-gradient(from 210deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box;
  box-shadow: 0 0 0 1px #000c, 0 4px 8px #000b, 1px 2px 0 #000, inset 0 -4px 7px #08204acc, inset 0 2px 3px #fff7;
}
.card.card .stat {
  bottom: -10px; min-width: 0; width: 34px; height: 34px; padding: 0; border-radius: 50%; z-index: 8;
  border: 3px solid transparent; font-size: 1.15rem; line-height: 1; letter-spacing: 0; position: absolute;
  box-shadow: 0 0 0 1px #000d, 0 4px 7px #000b, 1px 2px 0 #000, inset 0 -3px 6px #0009, inset 0 2px 3px #ffffff55;
  text-shadow: 0 1px 0 #000, 0 0 5px #000c;
}
.card.card .stat .stat-ico { position: absolute; inset: 7px; width: auto; height: auto; opacity: .2; }
.card.card .stat span { position: relative; transform: translateY(.5px); }
.card.card .stat.atk {
  left: -9px;
  background: radial-gradient(circle at 36% 28%, #ff9aa6, #b3243a 45%, #4a0714 90%) padding-box, conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box;
}
.card.card .stat.hp {
  right: -9px;
  background: radial-gradient(circle at 36% 28%, #9af0b4, #2a8a54 45%, #0a3a20 90%) padding-box, conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box;
}
.card.card .stat.hp.damaged { color: #ffd0a0; }
.card.card .rarity-badge {
  top: 6px; right: 6px; z-index: 3; padding: 1px 6px 1px 5px; border-radius: 3px; font-size: .5rem; letter-spacing: .04em;
  background: linear-gradient(180deg, #1b140ee6, #0a0706ee); border: 1px solid color-mix(in srgb, var(--m1) 60%, #000);
  box-shadow: 0 1px 3px #000a, inset 0 1px 0 #ffffff18;
}
.card .tribe-crest { border-color: var(--m1); box-shadow: 0 2px 5px #000c, 0 0 7px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 1px 0 #fff6, 0 0 0 1px #000; }

/* ── 8 · sheen + foil ───────────────────────────────────────────────────── */
.card.card .card-shine {
  z-index: 6; border-radius: 9px; inset: var(--fw);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 18%), #ffffff3a, transparent 40%),
    linear-gradient(112deg, transparent 38%, #ffffff55 48%, #fff8d8aa 50%, #ffffff40 52%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  mix-blend-mode: overlay; opacity: 0; transition: opacity .25s ease, background-position .85s cubic-bezier(.2, .7, .2, 1);
}
.hand .card:hover .card-shine, .card.inspect .card-shine, .card.tilting .card-shine, .card.xl .card-shine, .v3d-card:hover .card-shine, .shop-slot:hover .card-shine, .reward-row .card:hover .card-shine {
  opacity: 1; background-position: 0 0, -20% 0;
}
.card.card.rarity-epic .card-shine, .card.card.rarity-curse .card-shine {
  opacity: .5; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 18%), #ffffff40, transparent 38%),
    linear-gradient(var(--fa, 125deg), #ff6a6a00 18%, #ffd0702e 32%, #8affd02e 48%, #a08aff2e 64%, transparent 80%);
  animation: cmFoil 7s linear infinite;
}
.card.card.rarity-curse .card-shine { background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 18%), #ffd0a040, transparent 38%),
    linear-gradient(var(--fa, 125deg), #ff3a1a00 18%, #ff6a2a30 38%, #ffd08a26 52%, #c0301a2c 66%, transparent 82%); }
@property --fa { syntax: "<angle>"; inherits: false; initial-value: 110deg; }
@keyframes cmFoil { 0% { --fa: 100deg; } 50% { --fa: 150deg; } 100% { --fa: 100deg; } }
.hand .card:hover .card-shine, .card.inspect .card-shine, .card.xl .card-shine { opacity: 1; }
.hand .card.unplayable .card-shine { display: block; opacity: 0 !important; }

/* hover/lift: shadow reflects height */
.hand .card:hover { filter: drop-shadow(0 18px 14px #000b) drop-shadow(0 0 10px var(--glow, #c9a22733)); }
@media (hover: none) { .hand .card:hover { filter: drop-shadow(0 6px 6px #00000077); } }
.hand .card { filter: drop-shadow(0 5px 5px #00000088); }

/* inspect view: sway + deeper lift shadow (JS adds drag tilt via --rx/--ry) */
.hand .card.inspect .card-inner { animation: cmSway 5.5s ease-in-out infinite; }
.card.tilting .card-inner, .hand .card.inspect.tilting .card-inner { animation: none; }
@keyframes cmSway { 0%, 100% { transform: rotateY(-7deg) rotateX(2deg); } 50% { transform: rotateY(7deg) rotateX(-2deg); } }
.card.card.xl .card-inner { box-shadow: 0 0 0 1px #000a, 1px 1px 0 1px var(--ed1), 2px 2px 0 1px var(--ed1), 3px 3px 0 1px var(--ed2), 4px 4px 0 1px var(--ed2), 5px 5px 0 1px var(--ed3), 6px 6px 0 1px var(--ed3), 7px 7px 0 1px var(--ed4), 8px 8px 0 1px var(--ed4), var(--gsh), 12px 20px 26px #000c; }
@media (max-width: 600px) and (hover: none) {
  .hand .card.inspect { transform: translate(var(--ix, 0px), calc(-1 * var(--card-h) * .42)) rotate(0) scale(1.42) !important; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
}
@media (max-width: 600px) and (hover: none) { .hand .card.inspect { filter: drop-shadow(0 24px 22px #000d) drop-shadow(0 0 16px var(--glow, #c9a22744)) !important; } }

/* sizes: thinner frame on small cards, thicker on big */
.card.sm, .v3d-card { --fw: 4px; }
.card.lg, .card.xl { --fw: 6px; }
.card.xl { --fw: 8px; }
@media (max-width: 640px) { .card { --fw: 4px; } .card.xl, .card.lg { --fw: 5px; } }
.card.card.sm .card-inner::after, .card.card.v3d-card .card-inner::after { --l: 9px; }
@media (max-width: 640px) {
  .card.card .cost { top: -7px; left: -7px; width: 31px; height: 31px; border-width: 2.5px; font-size: .98rem; }
  .card.card .stat { width: 27px; height: 27px; font-size: .95rem; bottom: -9px; border-width: 2.5px; }
  .card.card .stat.atk { left: -8px; } .card.card .stat.hp { right: -8px; }
  .card.card .stat .stat-ico { inset: 5px; }
  .card.card .name-bar { padding: 3px 17px 4px 7px; margin-top: -7px; }
  .card.card .effect { padding: 3px 4px 4px; margin: 2px 3px 3px; }
  .card .art-wrap { margin: 3px 3px 0; }
}
.card.sm .cost, .v3d-card .cost { top: -7px; left: -7px; width: 29px; height: 29px; border-width: 2.5px; font-size: .95rem; }
.card.card.sm .stat, .card.card.v3d-card .stat { width: 25px; height: 25px; font-size: .88rem; border-width: 2.5px; bottom: -9px; }
.card.card.sm .stat.atk, .card.card.v3d-card .stat.atk { left: -8px; } .card.card.sm .stat.hp, .card.card.v3d-card .stat.hp { right: -8px; }
.card.xl .cost { width: 52px; height: 52px; border-width: 4px; top: -12px; left: -12px; }
.card.card.xl .stat { width: 48px; height: 48px; font-size: 1.5rem; bottom: -14px; border-width: 4px; }
.card.card.xl .stat.atk { left: -12px; } .card.card.xl .stat.hp { right: -12px; }
.card.card.lg .stat { width: 36px; height: 36px; }

/* ── 9 · board minions as mini cards ────────────────────────────────────── */
.board-slot { height: clamp(74px, 11vh, 98px); width: calc(clamp(74px, 11vh, 98px) * .716); }
@media (min-width: 641px) { .board-slot { height: 100px; width: 72px; } }
.unit.unit {
  border: 3px solid transparent; border-radius: 9px; overflow: visible; --fw: 3px;
  background: linear-gradient(165deg, #1a2430, #0a0d12) padding-box,
              linear-gradient(135deg, var(--m1) 0%, var(--m2) 20%, var(--m3) 40%, var(--m2) 58%, var(--m1) 74%, var(--m3) 100%) border-box;
  box-shadow: 0 0 0 1px #000a, 1px 1px 0 var(--ed1), 2px 2px 0 var(--ed2), 3px 3px 0 var(--ed3), 4px 5px 0 var(--ed4), var(--gsh), 4px 9px 10px #000a;
  position: relative;
}
.unit.unit.guardian { --gsh: 0 0 12px #6aa8d488; }
.unit.unit.fx-buffed { --gsh: 0 0 14px #ffc45acc, 0 0 3px #ffd27a; box-shadow: 1px 1px 0 var(--ed1), 2px 2px 0 var(--ed2), 3px 3px 0 var(--ed3), 4px 5px 0 var(--ed4), var(--gsh), 4px 9px 10px #000a; }
.unit.unit.guardian.spent { filter: saturate(.6) brightness(.85); }
.unit .unit-art { height: 74%; border-radius: 5px 5px 2px 2px; box-shadow: 0 0 0 1px #000d, 0 0 0 2px var(--ring), inset 0 3px 6px #000c, inset 0 0 10px #0008; margin: 0; background-color: #0a0810; }
.unit .unit-art.svg { overflow: hidden; }
.unit .unit-name {
  left: -1px; right: -1px; top: auto; bottom: 17px; padding: 2px 6px 3px; font-size: .55rem; z-index: 2; color: #f3e6c4;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%, 4px 50%);
  background: linear-gradient(var(--m1), var(--m1)) top / 100% 1px no-repeat, linear-gradient(color-mix(in srgb, var(--acc) 70%, #000), color-mix(in srgb, var(--acc) 70%, #000)) bottom / 100% 1px no-repeat, linear-gradient(180deg, #3a2e1c, #17110b);
}
.unit.unit .stat {
  bottom: -6px; min-width: 0; width: 25px; height: 25px; padding: 0; border-radius: 50%; border: 2.5px solid transparent; font-size: .84rem; z-index: 5;
  box-shadow: 0 0 0 1px #000d, 0 3px 6px #000b, inset 0 -3px 5px #0009, inset 0 2px 2px #ffffff50;
}
.unit.unit .stat .stat-ico { position: absolute; inset: 5px; width: auto; height: auto; opacity: .18; }
.unit.unit .stat span { position: relative; }
.unit.unit .stat.atk { left: -6px; background: radial-gradient(circle at 36% 28%, #ff9aa6, #b3243a 45%, #4a0714 90%) padding-box, conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box; }
.unit.unit .stat.hp { right: -6px; background: radial-gradient(circle at 36% 28%, #9af0b4, #2a8a54 45%, #0a3a20 90%) padding-box, conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box; }
.unit.unit .stat.hp.damaged { background: radial-gradient(circle at 36% 28%, #ffc890, #c8602a 45%, #4a1a08 90%) padding-box, conic-gradient(from 200deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)) border-box; }
.unit.unit .stat.atk.buffed { box-shadow: 0 0 0 1px #000d, 0 0 9px #4fe3c1, inset 0 -3px 5px #0009, inset 0 2px 2px #ffffff50; }
.unit .unit-badge { top: -5px; right: -5px; z-index: 6; box-shadow: 0 0 0 1px #000, 0 0 8px #7ec8ff66, 0 2px 4px #000a; }

/* ── 10 · card back (face-down / trap / deck) ───────────────────────────── */
.cm-back, .trap-reveal .tr-back {
  background: var(--cm-back) center / 100% 100% no-repeat, #120a07 !important;
  border: 3px solid transparent !important; border-radius: 11px !important;
  background-clip: padding-box, border-box;
  box-shadow: 1px 1px 0 #6a4a14, 2px 2px 0 #46300c, 3px 3px 0 #2a1c07, 4px 4px 0 #0e0803, 5px 10px 14px #000a, 0 0 22px #e8503a33 !important;
  position: relative; overflow: hidden;
}
.cm-back::before, .trap-reveal .tr-back::before { /* metal rim */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 0 2px #c9a22788, inset 0 0 10px #000c;
}
.cm-back::after, .trap-reveal .tr-back::after { /* sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, transparent 38%, #ffffff30 49%, transparent 60%); mix-blend-mode: overlay; opacity: .7;
}
.trap-reveal { width: 116px; height: 162px; margin: -81px 0 0 -58px; }
.trap-reveal .tr-face { border-radius: 12px; }
.trap-reveal .tr-front {
  border: 5px solid transparent;
  background: linear-gradient(170deg, #2e2418, #120e0a) padding-box, linear-gradient(135deg, #ffe9a0, #c8963a 30%, #5a3d12 50%, #c8963a 70%, #ffe9a0) border-box;
  box-shadow: 1px 1px 0 #7a5516, 2px 2px 0 #4a3210, 3px 3px 0 #1f1507, 6px 12px 16px #000a, 0 0 30px #e87a3a66;
}
/* persistent face-down trap markers → miniature card backs */
.fx31-trapmark i {
  width: 14px; height: 19px; transform: none; border: 1.5px solid #c9a227; border-radius: 3px;
  background: var(--cm-back) center / 100% 100% no-repeat, #120a07;
  box-shadow: 1px 1px 0 #46300c, 2px 2px 0 #0e0803, 0 0 8px #d9964f; animation: cmTrapPulse 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .25s);
}
@keyframes cmTrapPulse { 0%, 100% { opacity: .65; transform: translateY(0) scale(.96); } 50% { opacity: 1; transform: translateY(-1px) scale(1.06); } }

/* entrance cinematic frame (fx31) uses the same metal rim */
.fx31-cine .frame {
  border: 5px solid transparent; border-radius: 12px;
  background: #0a0806 padding-box, linear-gradient(135deg, color-mix(in srgb, var(--tc2, #fff) 90%, #fff), var(--tc) 28%, #1a1410 48%, var(--tc) 68%, color-mix(in srgb, var(--tc2, #fff) 90%, #fff)) border-box;
}

/* ── 11 · reduced motion / perf ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card.card.rarity-epic .card-shine, .card.card.rarity-curse .card-shine, .hand .card.inspect .card-inner, .fx31-trapmark i { animation: none !important; }
}
body.reduce-motion .card.card.rarity-epic .card-shine, body.reduce-motion .card.card.rarity-curse .card-shine,
body.reduce-motion .hand .card.inspect .card-inner, body.reduce-motion .fx31-trapmark i { animation: none !important; }

/* keep the text box inside the card: chips on one row, text clamps */
.card .kw-row { flex-wrap: nowrap; overflow: hidden; max-width: 100%; justify-content: center; }
.card .kw { flex: 0 1 auto; white-space: nowrap; }
.card:not(.xl):not(.lg) .fx-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card.xl .effect, .card.lg .effect { overflow: visible; }

.card.card .name-bar { font-size: .68rem; letter-spacing: 0; }
.card .tribe-crest { width: 17px; height: 17px; font-size: 10px; right: 2px; }
.card.lg .tribe-crest, .card.xl .tribe-crest { width: 24px; height: 24px; font-size: 13px; }
.card.card.is-unit .effect { padding-bottom: 8px; }

.card:not(.xl) .name-bar { font-size: .62rem; }
.card.lg .name-bar, .card.xl .name-bar { font-size: .72rem; }
.card.card.xl .name-bar { font-size: .92rem; }
.card.is-unit:not(.xl):not(.lg) .kw:nth-child(n+3) { display: none; }
.hand-area { height: calc(var(--card-h) + 36px + var(--safe-b)); }
@media (max-width: 600px) { .hand { padding-bottom: 12px; } .hand-area { height: calc(var(--card-h) + 38px + var(--safe-b)); } }

/* card-play ghost: same arc as depth.css but without the brightness(2) flare — a bright metal/stone card
   flaring to 2× while fading read as a one-frame flash in the flicker analyzer */
.ghost-play { animation: cmGhostArc .56s cubic-bezier(.3, 0, .4, 1) forwards !important; }
@keyframes cmGhostArc {
  0% { transform: translate(0, 0) scale(1) rotateX(0); opacity: 1; filter: none; }
  40% { transform: translate(calc(var(--gx) * .35), calc(var(--gy) * .45 - 70px)) scale(1.14) rotateX(14deg); opacity: 1; filter: brightness(1.08) drop-shadow(0 26px 22px #000c); }
  100% { transform: translate(var(--gx), var(--gy)) scale(.5) rotateX(30deg) rotateZ(8deg); opacity: 0; filter: brightness(1.12); }
}
.card.playing { animation: cmCardPlay .4s ease-out forwards !important; }
@keyframes cmCardPlay {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-80px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-140px) scale(.88); opacity: 0; }
}

/* units: keep text + chips clear of the hanging stat medallions */
.card.card.is-unit .effect { padding: 4px 12px 14px; }
.card.card.is-unit.xl .effect, .card.card.is-unit.lg .effect { padding: 5px 16px 16px; }
@media (max-width: 640px) { .card.card.is-unit:not(.xl) .effect { padding: 3px 9px 11px; } }
.card.xl .kw-row, .card.lg .kw-row { flex-wrap: wrap; overflow: visible; row-gap: 3px; }
.card.xl .effect, .card.lg .effect { justify-content: flex-start; padding-top: 7px; }