:root {
  color-scheme: dark;
  --bg: #0d0f1a;
  --bg2: #161a2b;
  --panel: #1c2136;
  --panel2: #252b45;
  --line: #333a5c;
  --text: #e8e6f0;
  --muted: #9a9cb8;
  --gold: #e9b949;
  --gold2: #ffdf8a;
  --good: #5ad17f;
  --bad: #ff5d6c;
  --accent: #7c6cff;
  --W: #f3e9c6; --U: #9cc6ef; --B: #9e93a8; --R: #f0907a; --G: #8fd19a; --C: #c9cdd6;
  --Wd: #c9b06a; --Ud: #3c7bc4; --Bd: #2d2633; --Rd: #c2402b; --Gd: #2f8a45; --Cd: #7a8090;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at top, #22284a 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  overflow-x: hidden;
}
body[data-screen="game"] { overflow: hidden; }
.hidden { display: none !important; }
h1, h2, h3 { margin: 0 0 .5em; font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; }
h1 { color: var(--gold2); }
a { color: var(--gold2); }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.center { text-align: center; }
.bad { color: var(--bad); }
.warn { color: var(--gold2); }

/* ---- Buttons & inputs ---- */
.btn {
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  padding: .6em 1.2em; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 600;
  transition: transform .1s, background .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { background: #313963; transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #f6c95a, #d39a22); color: #2a1a00; border-color: #ffd97a; box-shadow: 0 0 18px rgba(233,185,73,.35); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffd874, #e3a92e); }
.btn.ghost { background: transparent; }
.btn.danger { background: #4a1f2a; border-color: #7a2c3b; }
.btn.danger:hover { background: #6a2735 !important; }
.btn.small { padding: .35em .8em; font-size: .85em; }
.btn.big { padding: .9em 2em; font-size: 1.15em; }
.btn.full { width: 100%; }
.mini { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 4px; cursor: pointer; padding: 0 .45em; font-size: .9em; }
input, select, textarea {
  background: #0f1222; color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: .45em .6em; font: inherit; width: 100%;
}
select { -webkit-appearance: none; appearance: none; padding-right: 2em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
option, optgroup { background: #1c2136; color: #e8e6f0; }
option:checked { background: #3a4370; color: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
label { display: block; font-size: .85em; color: var(--muted); margin-bottom: .6em; }
label > input, label > select, label > textarea { margin-top: .25em; color: var(--text); font-size: 1.1em; }
label.chk { display: inline-flex; align-items: center; gap: .4em; color: var(--text); cursor: pointer; }
label.chk input { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 .8em; padding: .6em .8em; }
legend { color: var(--gold); font-size: .85em; padding: 0 .4em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1em; }
.row-btns { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; margin-top: 1em; }
.col-btns { display: flex; flex-direction: column; gap: .5em; margin-top: 1em; }

/* ---- Nav ---- */
.topnav {
  display: flex; align-items: center; gap: .3em; padding: .5em 1em; background: rgba(10,12,22,.85);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); flex-wrap: wrap;
}
.logo-sm { font-family: Georgia, serif; font-weight: bold; color: var(--gold2); font-size: 1.25em; margin-right: auto; cursor: pointer; }
.logo-sm span { color: var(--muted); font-size: .7em; font-style: italic; }
.nav-btn { background: none; border: none; color: var(--muted); padding: .5em .9em; border-radius: 6px; cursor: pointer; font-size: .95em; font-weight: 600; }
.nav-btn:hover { color: var(--text); background: var(--panel); }
.nav-btn.on { color: var(--gold2); background: var(--panel); }

.page { max-width: 1100px; margin: 0 auto; padding: 1.5em 1em 4em; }
.page.narrow { max-width: 820px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.2em 1.4em; margin-bottom: 1.2em; }

/* ---- Home ---- */
.home { display: flex; flex-direction: column; align-items: center; padding: 3em 1em; gap: 2.5em; }
.hero { text-align: center; }
.logo {
  font-size: clamp(3em, 9vw, 6.5em); line-height: .9; margin: 0;
  background: linear-gradient(180deg, #fff3c4, #e9b949 55%, #a8711a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(233,185,73,.35));
}
.logo small { display: block; font-size: .32em; font-style: italic; letter-spacing: .2em; }
.tagline { color: var(--muted); font-size: 1.2em; margin: 1em 0 1.6em; }
.hero-btns { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; }
.hint { color: var(--muted); margin-top: 1.5em; }
.showcase { display: flex; justify-content: center; padding: 2em 0 4em; }
.fan { margin: 0 -28px; transform: rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 8px)); transition: transform .2s; }
.fan:hover { transform: translateY(-30px) scale(1.06); z-index: 5; }

/* ---- Play setup ---- */
.vs { display: flex; align-items: center; justify-content: space-around; gap: 1em; margin-bottom: 1.5em; }
.vs-side { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }
.vs-side label { width: 100%; max-width: 280px; text-align: left; }
.vs-mid { font-family: Georgia, serif; font-size: 3em; color: var(--gold); font-weight: bold; }

.avatar {
  width: 52px; height: 52px; border-radius: 50%; background: #2a3150 center/cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 28px; border: 2px solid var(--gold);
}
.avatar.big { width: 110px; height: 110px; font-size: 60px; margin-bottom: .4em; }
.img-slot { display: flex; gap: 1em; align-items: center; margin: .6em 0 1em; }
.photo-prev { width: 160px; height: 120px; border-radius: 8px; background: #0f1222 center/cover; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ======================= CARDS ======================= */
/* Procedural textures (SVG noise) — subtle print grain, grime and wear. */
:root {
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 .55 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .08 1.3 0 0 0 -.58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 .45 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-scratch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='turbulence' baseFrequency='.003 .45' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.86'/%3E%3C/filter%3E%3Crect x='-300' y='-300' width='1020' height='1020' filter='url(%23f)' transform='rotate(-28 210 210)'/%3E%3C/svg%3E");
  --tex-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .86 14 0 0 0 -10.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.card {
  --frame: var(--C); --frame-d: var(--Cd);
  --frame-bg: linear-gradient(172deg, color-mix(in srgb, var(--frame) 92%, #fff), color-mix(in srgb, var(--frame) 62%, var(--frame-d)));
  --bar-bg: linear-gradient(180deg, color-mix(in srgb, var(--frame) 22%, #f6f1e6), color-mix(in srgb, var(--frame) 34%, #d8cfbe));
  width: 150px; aspect-ratio: 63 / 88; font-size: 10.7px; border-radius: .75em; padding: .42em;
  background: var(--tex-grain), radial-gradient(120% 90% at 30% 15%, #2a2826, #0b0a09 70%, #050404);
  position: relative; user-select: none;
  box-shadow: 0 .3em 1em rgba(0,0,0,.55), inset 0 0 0 .06em rgba(255,255,255,.07);
  flex-shrink: 0; color: #1b150e;
}
/* Edge wear: faint chipping along the black border */
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: var(--tex-specks); background-size: 140px; background-position: var(--wx, 0) var(--wy, 0);
  padding: .2em; opacity: .4;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Surface wear: a few hairline scratches and handling grime over the whole card */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background:
    var(--tex-scratch) var(--wx, 0) var(--wy, 0) / 300px auto,
    radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(40,28,12,.12) 100%);
}
.card.size-xs { width: 56px; font-size: 4px; }
.card.size-sm { width: 116px; font-size: 8.3px; }
.card.size-md { width: 132px; font-size: 9.4px; }
.card.size-lg { width: 280px; font-size: 20px; }
.c-inner {
  height: 100%; border-radius: .4em; display: flex; flex-direction: column; gap: .28em; padding: .35em .38em .38em;
  background: var(--tex-grain), var(--tex-grime), var(--frame-bg);
  background-size: 160px, 300px, auto; background-position: 0 0, var(--wx, 0) var(--wy, 0), 0 0;
  box-shadow: inset 0 0 0 .07em rgba(0,0,0,.55), inset 0 .1em .08em rgba(255,255,255,.35), inset 0 0 1.6em rgba(30,18,6,.32);
  position: relative; overflow: hidden;
}
.frame-W { --frame: var(--W); --frame-d: var(--Wd); }
.frame-U { --frame: var(--U); --frame-d: var(--Ud); }
.frame-B { --frame: var(--B); --frame-d: var(--Bd); }
.frame-R { --frame: var(--R); --frame-d: var(--Rd); }
.frame-G { --frame: var(--G); --frame-d: var(--Gd); }
.frame-C { --frame: var(--C); --frame-d: var(--Cd); }
.frame-M { --frame: #e8c872; --frame-d: #9c6f22; }
.frame-land { --frame-bg: linear-gradient(170deg, #cdb79a, #7a6248); }
.frame-land.frame-W { --frame-bg: linear-gradient(170deg, #efe5c6, #b29a62); }
.frame-land.frame-U { --frame-bg: linear-gradient(170deg, #c2d7ea, #47799f); }
.frame-land.frame-B { --frame-bg: linear-gradient(170deg, #ada4b2, #352e3a); }
.frame-land.frame-R { --frame-bg: linear-gradient(170deg, #ecb3a2, #a8402d); }
.frame-land.frame-G { --frame-bg: linear-gradient(170deg, #b3dbb8, #3a7f4b); }

.c-top, .c-type {
  display: flex; align-items: center; justify-content: space-between; gap: .3em;
  background: var(--tex-grain), var(--bar-bg); background-size: 160px, auto;
  border-radius: .7em / .9em; padding: .24em .45em; border: .08em solid rgba(35,25,12,.7);
  box-shadow: inset 0 .09em .05em rgba(255,255,255,.65), inset 0 -.12em .18em rgba(60,40,15,.28), 0 .08em .18em rgba(0,0,0,.4);
}
.c-name {
  font-weight: 700; font-size: 1.05em; white-space: nowrap; overflow: hidden; min-width: 0; flex: 1 1 auto;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; letter-spacing: .01em;
  text-shadow: 0 .05em 0 rgba(255,255,255,.45);
}
.c-name.wrap2, .c-type > span.wrap2 { white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.c-text.no-flavor .c-flavor { display: none; }
.c-cost { display: flex; gap: .1em; flex-shrink: 0; }
.pip {
  --pip: #cfcbc4;
  display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  font-size: .95em; line-height: 1; font-weight: 700; vertical-align: middle; color: #1b150e;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 55%), var(--pip);
  box-shadow: -.06em .1em 0 rgba(0,0,0,.85), inset 0 -.08em .12em rgba(0,0,0,.25);
}
.pip-C { --pip: #cac5bc; color: #222; }
.pip-W { --pip: #f7efcd; } .pip-U { --pip: #a3c9ec; } .pip-B { --pip: #b3a9ad; }
.pip-R { --pip: #eea084; } .pip-G { --pip: #94c99d; }
.c-art {
  flex: 1 1 auto; min-height: 0; border-radius: .12em; border: .1em solid rgba(20,14,8,.75);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--frame) 60%, white), var(--frame-d));
  display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center;
  box-shadow: 0 0 0 .07em rgba(255,255,255,.3), 0 .06em .15em rgba(0,0,0,.35);
}
/* Art overlay: inner bevel, vignette and a touch of print grain */
.c-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--tex-grain), radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(20,10,0,.35));
  background-size: 160px, auto; opacity: .6;
  box-shadow: inset 0 0 0 .06em rgba(0,0,0,.4), inset 0 .15em .4em rgba(0,0,0,.35);
}
.c-art.has-img { background-color: #333; }
.c-emoji { font-size: 5em; filter: drop-shadow(0 .1em .2em rgba(0,0,0,.4)); line-height: 1; }
.c-badge { position: absolute; right: .2em; bottom: .2em; font-size: 2em; filter: drop-shadow(0 0 .15em rgba(0,0,0,.9)); z-index: 1; }
.c-type { font-size: .9em; font-weight: 600; font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.c-type > span:first-child { white-space: nowrap; overflow: hidden; min-width: 0; }
.c-gem { width: .9em; height: .9em; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, #555, #111 60%); border: .08em solid #000; box-shadow: 0 .04em 0 rgba(255,255,255,.4); }
.rarity-uncommon .c-gem { background: linear-gradient(135deg, #e8eef5, #8c9aa8 55%, #5d6874); }
.rarity-rare .c-gem { background: linear-gradient(135deg, #fbe6a0, #c59221 55%, #8a6312); }
.rarity-mythic .c-gem { background: linear-gradient(135deg, #ffb27a, #d4381c 55%, #8f2410); box-shadow: 0 0 .35em rgba(255,122,61,.7); }
.c-text {
  flex: 0 0 auto; min-height: 32%; max-height: 55%; border-radius: .15em; padding: .4em .5em; font-size: .92em; line-height: 1.25;
  background: var(--tex-fiber), var(--tex-grain), radial-gradient(140% 120% at 50% 40%, color-mix(in srgb, var(--frame) 10%, #f5efe1) 55%, color-mix(in srgb, var(--frame) 18%, #ddd2bb));
  background-size: 220px, 160px, auto;
  border: .08em solid rgba(35,25,12,.6); overflow: hidden;
  box-shadow: inset 0 0 .6em rgba(90,60,20,.22), 0 0 0 .07em rgba(255,255,255,.25);
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
.c-text p { margin: 0 0 .3em; }
.c-text .pip { width: 1.2em; height: 1.2em; font-size: .85em; box-shadow: -.05em .07em 0 rgba(0,0,0,.8); }
.c-flavor { font-style: italic; color: #4e4234; }
.card:has(.c-pt) .c-text { padding-bottom: 1.6em; }
.c-art { min-height: 25%; }
.c-kw { display: none; }
.c-pt {
  position: absolute; right: .2em; bottom: .15em; z-index: 1;
  background: var(--tex-grain), var(--bar-bg); background-size: 160px, auto; border: .1em solid #1d150b;
  border-radius: .35em; padding: .1em .45em; font-weight: 800; font-size: 1.25em;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  box-shadow: inset 0 .08em .05em rgba(255,255,255,.6), inset 0 -.1em .15em rgba(60,40,15,.3), 0 .1em .3em rgba(0,0,0,.45);
}
.c-pt.buffed { color: #127a2f; }
.c-pt.hurt { color: #b31b1b; }
.is-land .c-art { flex-basis: 60%; }
.is-land .c-text { flex-basis: auto; text-align: center; font-size: 1.1em; }

/* Small cards: drop the text box, show keyword icons */
.size-sm .c-text, .size-xs .c-text { display: none; }
.size-sm .c-kw { display: flex; gap: .15em; position: absolute; left: .6em; top: 3em; font-size: 1.5em; filter: drop-shadow(0 0 .15em rgba(0,0,0,.8)); z-index: 1; }
.size-sm .c-pt { font-size: 1.7em; }
.size-sm .c-emoji { font-size: 4.5em; }
.size-xs .c-top, .size-xs .c-type { display: none; }
.size-xs .c-emoji { font-size: 7em; }
.size-xs .c-art { border-width: 0; }
.size-sm .c-type { font-size: 1em; }

.card-back .c-inner {
  background: var(--tex-grain), var(--tex-grime), radial-gradient(circle, #553683, #1d1035 70%);
  background-size: 160px, 300px, auto; border: .3em solid #a37b2c;
  box-shadow: inset 0 0 0 .08em rgba(0,0,0,.6), inset 0 0 1.5em rgba(0,0,0,.5);
  align-items: center; justify-content: center;
}
.back-logo { font-family: Georgia, serif; color: var(--gold2); font-size: 6em; font-weight: bold; text-align: center; line-height: 1; text-shadow: 0 .03em 0 #6b4a12, 0 .06em .1em rgba(0,0,0,.6); }
.back-logo small { display: block; font-size: .25em; font-style: italic; }

#preview { position: fixed; right: 300px; top: 50%; transform: translateY(-50%); z-index: 100; pointer-events: none; filter: drop-shadow(0 10px 40px rgba(0,0,0,.8)); }
#preview.left { right: auto; left: 20px; }
body:not([data-screen="game"]) #preview { right: 30px; }
body:not([data-screen="game"]) #preview.left { left: 30px; right: auto; }
body[data-screen="forge"] #preview { left: 270px; right: auto; }

/* ======================= GAME ======================= */
.game { display: grid; grid-template-columns: 1fr 280px; position: fixed; inset: 0; }
.table {
  display: grid; grid-template-rows: 30px minmax(0, 1fr) 170px;
  background: radial-gradient(ellipse at 50% 30%, #1c2236 0%, #0b0d16 75%);
  position: relative; overflow: hidden; overflow: clip; min-width: 0;
}
/* The tilted play mat */
.board-wrap { perspective: 1100px; perspective-origin: 50% 20%; min-height: 0; position: relative; z-index: 1; }
.board {
  position: absolute; left: 6%; right: 6%; top: -4%; bottom: 0;
  display: grid; grid-template-rows: 68px minmax(0, 1fr) 34px minmax(0, 1fr) 68px; grid-template-columns: minmax(0, 1fr);
  transform: rotateX(24deg); transform-origin: 50% 100%; transform-style: preserve-3d;
  border-radius: 28px;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 55%, #35503b 0%, #1f3326 55%, #13201a 100%);
  border: 6px solid #5a4126;
  box-shadow: 0 0 0 2px #2b1d10, inset 0 0 60px rgba(0,0,0,.65), 0 40px 80px rgba(0,0,0,.6);
}
.board::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(233,185,73,.18); border-radius: 20px; pointer-events: none; }
.board.drop-attack .creatures.opp, .board.drop-attack .lands.opp { background: rgba(255,122,61,.10); box-shadow: inset 0 0 40px rgba(255,122,61,.25); }
.board.drop-cast .creatures.me { background: rgba(90,209,127,.08); box-shadow: inset 0 0 40px rgba(90,209,127,.25); border-radius: 16px; }
.opp-hand { display: flex; justify-content: center; align-items: flex-start; gap: 3px; position: relative; z-index: 2; }
.opp-hand .card { transform: translateY(-44px); }
.player-panel { position: absolute; left: 14px; z-index: 5; }
.player-panel.opp { top: 36px; }
.player-panel.me { bottom: 182px; }
.pp {
  display: flex; gap: 10px; align-items: center; background: rgba(10,12,22,.75); border: 1px solid var(--line);
  border-radius: 40px 12px 12px 40px; padding: 5px 14px 5px 5px; min-width: 210px; transition: box-shadow .2s;
}
.pp-name { font-weight: 700; font-size: .95em; }
.pp-life { font-size: 1.35em; font-weight: 800; color: #ffd0d4; }
.pp-zones { display: flex; gap: 10px; font-size: .8em; color: var(--muted); }
.pp-zones .link { cursor: pointer; } .pp-zones .link:hover { color: var(--text); }
.pp.hit { animation: hit .5s; }
.pp.healed { animation: healed .6s; }
@keyframes hit { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); background: rgba(160,20,30,.8); } 60% { transform: translateX(6px); } }
@keyframes healed { 30% { background: rgba(30,140,70,.7); } }
.pp.targetable { box-shadow: 0 0 0 3px #ff4d5e, 0 0 22px #ff4d5e; cursor: crosshair; animation: pulse 1s infinite; }
.bf-card.targetable .card { box-shadow: 0 0 0 3px #ff4d5e, 0 0 18px #ff4d5e; cursor: crosshair; }
.bf-card.targetable::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 3px #ff8c96, 0 0 34px #ff4d5e; opacity: 0; animation: glowPulse .5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #ff8c96, 0 0 34px #ff4d5e; } }

.lands { display: flex; gap: 0; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; height: 100%; padding: 4px 16px; transform-style: preserve-3d; border-radius: 16px; transition: background .2s; }
.land-tile { transition: transform .25s; flex-shrink: 0; margin-right: var(--lov, 0px); }
.land-tile.tapped { transform: rotate(90deg) scale(.85); filter: brightness(.6); margin-left: 6px; margin-right: calc(var(--lov, 0px) + 6px); }
.mana-left { font-size: .8em; color: var(--muted); margin-left: 8px; white-space: nowrap; }

.creatures { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 6px 12px; flex-wrap: nowrap; min-height: 0; transform-style: preserve-3d; border-radius: 16px; transition: background .2s, box-shadow .2s; }
.bf-card { position: relative; transition: transform .25s; cursor: default; transform-style: preserve-3d; touch-action: none; }
.bf-card .card { box-shadow: 0 6px 10px rgba(0,0,0,.55); }
.bf-card:hover { transform: translateZ(14px); }
.hand-card { touch-action: none; }
.bf-card.tapped { transform: rotate(14deg) translateY(4px); filter: brightness(.7); }
.bf-card.can-act { cursor: pointer; }
.bf-card.can-act .card { box-shadow: 0 0 0 2px var(--good), 0 0 14px rgba(90,209,127,.6); }
.creatures.me .bf-card.attacking { transform: translateY(-22px) translateZ(40px); }
.creatures.opp .bf-card.attacking { transform: translateY(22px) translateZ(40px); }
.bf-card.attacking .card { box-shadow: 0 0 0 3px #ff7a3d, 0 0 22px #ff7a3d, 0 30px 30px rgba(0,0,0,.5); }
.bf-card.attacking .card { box-shadow: 0 0 0 3px #ff7a3d, 0 0 22px #ff7a3d; }
.bf-card.selected-attack .card { box-shadow: 0 0 0 3px #ff7a3d, 0 0 22px #ff7a3d; }
.bf-card.selected-attack { transform: translateY(-14px) translateZ(26px); }
.bf-card.blocking .card, .bf-card.selected-block .card { box-shadow: 0 0 0 3px #5ab8ff, 0 0 22px #5ab8ff; }
.bf-card.selected-block { transform: translateY(-10px) translateZ(20px); }
.creatures.me .bf-card.blocking { transform: translateY(-18px) translateZ(30px); }
.creatures.opp .bf-card.blocking { transform: translateY(18px) translateZ(30px); }
.bf-card.blocking .card { box-shadow: 0 0 0 3px #5ab8ff, 0 0 26px #5ab8ff, 0 24px 26px rgba(0,0,0,.5); }
.ctag { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; font-weight: 900; font-size: .72em; letter-spacing: .06em; white-space: nowrap; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.ctag.blocking { background: #1d6fd1; color: #fff; }
.ctag.blocked { background: #2b3550; color: #9fd3ff; border: 1px solid #5ab8ff; }
.cbadge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 10px; font-weight: 800; font-size: .8em; white-space: nowrap; }
.cbadge.atk { background: #ff7a3d; color: #2a0f00; }
.cbadge.blk { background: #5ab8ff; color: #001a2e; }
.sick { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 1.6em; animation: float 2s infinite; pointer-events: none; }
.counters { position: absolute; top: -6px; right: -6px; background: var(--good); color: #032; font-weight: 800; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: .75em; }
@keyframes float { 50% { transform: translate(-50%, -6px); } }

.midline { margin: 0 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.45), transparent); border-top: 1px solid rgba(233,185,73,.25); border-bottom: 1px solid rgba(233,185,73,.25); }
.turn-owner { font-weight: 700; font-size: .9em; }
.turn-owner.me { color: var(--gold2); } .turn-owner.opp { color: #ff9aa4; }
.phases { display: flex; gap: 4px; }
.phase { padding: 2px 10px; border-radius: 10px; font-size: .78em; color: var(--muted); background: rgba(255,255,255,.04); }
.phase.on { background: var(--gold); color: #2a1a00; font-weight: 700; }

.hand { display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; position: relative; z-index: 4; }
.hand-card { margin: 0 var(--ov, -14px); transform: rotate(var(--rot)) translateY(var(--dy)); transition: transform .15s, margin .15s; cursor: pointer; }
.hand-card:hover { transform: translateY(-34px) scale(1.12); z-index: 10; margin: 0 4px; }
.hand-card { position: relative; }
.hand-card.playable .card { box-shadow: 0 0 0 3px #ff9a2e, 0 0 22px rgba(255,140,30,.9); }
.hand-card.playable::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 3px #ffb257, 0 0 30px rgba(255,150,40,1); opacity: 0; animation: glowPulse .8s ease-in-out infinite alternate; will-change: opacity; }
@keyframes glowPulse { to { opacity: 1; } }
.shake { animation: shake .35s; }
@keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

.sidebar { background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; gap: 10px; min-height: 0; }
.sidebar-top { display: flex; justify-content: space-between; }
.prompt { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 70px; font-size: .95em; line-height: 1.35; }
.actions { display: flex; flex-direction: column; gap: 8px; }
.actions .btn { width: 100%; }
.actions .btn.primary { padding: .85em; font-size: 1.1em; }
.log { flex: 1; overflow-y: auto; background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; font-size: .8em; line-height: 1.4; min-height: 0; }
.log-line { padding: 1px 0; color: var(--muted); }
.log-line.turn { color: var(--gold2); font-weight: 700; margin-top: 6px; }
.log-line.you { color: #cfe8ff; } .log-line.opp { color: #ffc4ca; }
.log-line.bad, .log-line.death { color: #ff8a95; } .log-line.good { color: #9ff0b6; } .log-line.sys { color: var(--accent); }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.floater { position: absolute; transform: translate(-50%, 0); font-weight: 900; font-size: 30px; animation: floatUp 1.3s forwards; text-shadow: 0 2px 6px #000; }
.floater.dmg { color: #ff4d5e; } .floater.heal { color: #5ad17f; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0) scale(1.3); } to { opacity: 0; transform: translate(-50%, -70px) scale(1); } }

.overlay { position: fixed; inset: 0; background: rgba(5,6,12,.75); display: flex; align-items: center; justify-content: center; z-index: 80; backdrop-filter: blur(3px); }
.overlay.passive { background: rgba(5,6,12,.35); pointer-events: none; backdrop-filter: none; }
.announce { text-align: center; animation: pop .3s; }
.announce-who { font-family: Georgia, serif; font-size: 1.5em; color: #ffc4ca; margin-bottom: .4em; text-shadow: 0 2px 8px #000; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.6em 2em; max-width: 460px; width: 92%; max-height: 90vh; overflow: auto; animation: pop .25s; }
.modal.wide { max-width: 900px; }
.howto { color: var(--muted); padding-left: 1.2em; line-height: 1.6; }
.gameover { text-align: center; }
.gameover h1 { font-size: 3.5em; margin: 0; }
.gameover.lose h1 { color: var(--bad); }
.gameover .sub { color: var(--muted); font-style: italic; }
.card-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }

/* ======================= DECK BUILDER ======================= */
.deckbuilder { display: grid; grid-template-columns: 220px 1fr 320px; height: calc(100vh - 51px); }
.deck-list, .deck-panel, .forge-list { background: var(--bg2); padding: 1em; overflow-y: auto; border-right: 1px solid var(--line); }
.deck-panel { border-right: none; border-left: 1px solid var(--line); }
.deck-list .btn { margin-bottom: .8em; }
.deck-item { display: flex; justify-content: space-between; padding: .6em .7em; border-radius: 8px; cursor: pointer; margin-bottom: 3px; }
.deck-item:hover { background: var(--panel); }
.deck-item.on { background: var(--panel2); color: var(--gold2); }
.deck-item small { color: var(--muted); }
.collection { padding: 1em; overflow-y: auto; }
.filters { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; }
.filters input { flex: 1; min-width: 160px; }
.filters select { width: auto; }
.color-filter { display: flex; gap: 3px; }
.cf { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: .35em .6em; cursor: pointer; font-size: 1em; }
.cf.on { background: var(--gold); color: #2a1a00; }
.coll-card { position: relative; cursor: pointer; transition: transform .12s; }
.coll-card:hover { transform: translateY(-4px); }
.coll-card .count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #2a1a00; font-weight: 800; border-radius: 12px; padding: 1px 7px; font-size: .85em; }
.deck-name { font-size: 1.2em; font-family: Georgia, serif; font-weight: bold; margin-bottom: .6em; }
.deck-stats { font-size: .9em; margin-bottom: .8em; color: var(--muted); }
.deck-stats b { color: var(--text); }
.curve { display: flex; gap: 4px; height: 70px; align-items: flex-end; margin-bottom: 1em; padding: 4px; background: rgba(0,0,0,.25); border-radius: 6px; }
.curve .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.curve .bar div { width: 100%; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-radius: 3px 3px 0 0; min-height: 1px; }
.curve .bar span { font-size: .7em; color: var(--muted); }
.deck-row { display: flex; align-items: center; gap: .4em; padding: .3em .5em; margin-bottom: 2px; border-radius: 6px; font-size: .88em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--frame) 30%, transparent), transparent); border-left: 3px solid var(--frame); }
.deck-row .pip { width: 1.3em; height: 1.3em; font-size: .75em; }
.dr-cost { display: flex; gap: 1px; min-width: 3.2em; }
.dr-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-n { font-weight: 800; color: var(--gold2); }

/* ======================= FORGE ======================= */
.forge { display: grid; grid-template-columns: 260px 1fr 340px; height: calc(100vh - 51px); }
.forge-list input { margin: .6em 0; }
.forge-items { display: flex; flex-direction: column; gap: 2px; }
.forge-item { display: flex; align-items: center; gap: .4em; padding: .4em .5em; border-radius: 6px; cursor: pointer; font-size: .88em; }
.forge-item:hover { background: var(--panel); }
.forge-item.on { background: var(--panel2); color: var(--gold2); }
.fi-cost { display: flex; gap: 1px; min-width: 3.4em; }
.fi-cost .pip { width: 1.25em; height: 1.25em; font-size: .72em; }
.fi-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: .7em; padding: 1px 6px; border-radius: 8px; }
.tag.custom { background: var(--accent); color: #fff; }
.tag.edited { background: var(--gold); color: #2a1a00; }
.forge-form { padding: 1.2em 1.5em; overflow-y: auto; }
.forge-preview { padding: 1.5em; display: flex; flex-direction: column; align-items: center; background: var(--bg2); border-left: 1px solid var(--line); overflow-y: auto; }
.forge-preview .col-btns { width: 280px; }
.cost-edit { display: flex; gap: .5em; flex-wrap: wrap; }
.pipin { display: flex; align-items: center; gap: .3em; margin: 0; }
.pipin .pip { width: 1.8em; height: 1.8em; }
.pipin input { width: 3.6em; margin: 0; }
.kw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; }
.eff-row { display: flex; flex-wrap: wrap; gap: .4em; align-items: flex-end; padding: .5em; background: rgba(0,0,0,.2); border-radius: 6px; margin-bottom: .5em; }
.eff-row select { width: auto; flex: 1 1 140px; }
.eff-row .inl { margin: 0; font-size: .75em; }
.eff-row .inl input { width: 4.5em; margin-top: 2px; }
.eff-row .inl input[data-e="tokenName"] { width: 9em; }
.eff-row .rm-eff { margin-left: auto; padding: .3em .6em; }
.emoji-in { width: 4em !important; text-align: center; font-size: 1.4em !important; }
.art-edit { display: flex; gap: .8em; align-items: center; flex-wrap: wrap; }
.art-edit label { margin: 0; }

@media (max-width: 1000px) {
  .deckbuilder, .forge { grid-template-columns: 1fr; height: auto; }
  .game { grid-template-columns: 1fr 220px; }
  #preview { display: none; }
}

/* ---- Drag & drop ---- */
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.card, .hand-card, .bf-card, .land-tile { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.hand-card, .bf-card.can-act { cursor: grab; }
.drag-src { opacity: .35; }
.hand-card.drag-src { visibility: hidden; }
.drag-ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 70; transition: scale .15s; }
.drag-ghost .card { box-shadow: 0 0 0 3px #ff9a2e, 0 0 28px rgba(255,140,30,.9), 0 25px 40px rgba(0,0,0,.7); }
.drag-ghost.unplayable .card { box-shadow: 0 0 0 2px var(--bad), 0 0 20px rgba(255,93,108,.6); filter: grayscale(.4); }
.drag-ghost.on-target .card { box-shadow: 0 0 0 3px #ff4d5e, 0 0 34px #ff4d5e; }
.drag-arrow { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; overflow: visible; color: #ff9a5c; }
.drag-arrow.block { color: #7cc6ff; }
.drag-arrow.good { color: #ff5a2a; }
.drag-arrow.block.good { color: #39a8ff; }
.drag-arrow path.arrow-line { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.drag-arrow path.arrow-glow { fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; opacity: .25; filter: blur(4px); }
.bf-card.drop-target .card, .pp.drop-target { box-shadow: 0 0 0 3px #ff8c96, 0 0 18px #ff4d5e; }
.bf-card.drop-hover .card, .pp.drop-hover { box-shadow: 0 0 0 4px #fff, 0 0 30px #ff4d5e; }
.bf-card.drop-hover { transform: translateZ(24px) scale(1.05); }

/* ---- Combat visuals ---- */
.lines-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 55; overflow: visible; }
.lines-layer .bl-line { stroke: #5ab8ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 8; animation: dash 0.8s linear infinite; }
.lines-layer .bl-glow { stroke: #5ab8ff; stroke-width: 16; opacity: .25; stroke-linecap: round; }
.lines-layer .bl-dot { fill: #1d6fd1; stroke: #cfe9ff; stroke-width: 2.5; }
.lines-layer .bl-icon { font-size: 18px; text-anchor: middle; }
@keyframes dash { to { stroke-dashoffset: -20; } }

.banner {
  position: fixed; left: calc((100vw - 280px) / 2); top: 46%; transform: translate(-50%, -50%); z-index: 75; pointer-events: none;
  font-family: Georgia, serif; font-weight: 900; font-size: 46px; letter-spacing: .04em; white-space: nowrap;
  padding: 10px 46px; color: #fff; text-shadow: 0 3px 10px #000;
  background: linear-gradient(90deg, transparent, rgba(160,50,20,.85) 20%, rgba(160,50,20,.85) 80%, transparent);
  animation: bannerIn 1.5s ease forwards;
}
.banner.me { background: linear-gradient(90deg, transparent, rgba(170,120,20,.85) 20%, rgba(170,120,20,.85) 80%, transparent); }
.banner.block { background: linear-gradient(90deg, transparent, rgba(20,90,180,.85) 20%, rgba(20,90,180,.85) 80%, transparent); }
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
  15% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.05); }
  25% { transform: translate(-50%, -50%) scaleX(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
.combat-clone { position: fixed; z-index: 72; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.7)); }
.combat-clone .card { box-shadow: 0 0 0 3px #ff7a3d, 0 0 30px #ff7a3d; }
.impact { position: fixed; z-index: 74; pointer-events: none; font-size: 80px; transform: translate(-50%, -50%); animation: boom .6s ease-out forwards; }
@keyframes boom { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.struck { animation: struck .4s; }
@keyframes struck { 0%, 100% { filter: none; } 30% { filter: brightness(2.2) saturate(.3); translate: 6px 0; } 60% { translate: -6px 0; } }
.screen-shake { animation: screenshake .4s; }
@keyframes screenshake { 20% { translate: -8px 4px; } 40% { translate: 7px -4px; } 60% { translate: -5px 3px; } 80% { translate: 3px -2px; } }

/* ---- Spell & ability effects ---- */
.projectile { position: fixed; z-index: 76; pointer-events: none; font-size: 44px; line-height: 1; transform: translate(-50%, -50%); }
.projectile.fire { filter: drop-shadow(0 0 12px #ff6a00) drop-shadow(0 0 24px #ff3d00); }
.projectile.doom { filter: drop-shadow(0 0 12px #b04dff) drop-shadow(0 0 24px #6a00ff); }
.projectile.swirl, .projectile.ice { filter: drop-shadow(0 0 12px #5ab8ff) drop-shadow(0 0 22px #0080ff); }
.projectile.buff { filter: drop-shadow(0 0 12px #5ad17f) drop-shadow(0 0 22px #00ff66); }
.projectile.cardfly { font-size: 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.burst { position: fixed; z-index: 75; pointer-events: none; font-size: 54px; transform: translate(-50%, -50%); animation: burst .8s ease-out forwards; }
.burst.big { font-size: 80px; }
.burst.fire, .burst.big:not(.doom):not(.buff) { filter: drop-shadow(0 0 16px #ff6a00); }
.burst.doom { filter: drop-shadow(0 0 18px #b04dff); }
.burst.buff { filter: drop-shadow(0 0 18px #3dff7a); }
.burst.ice { filter: drop-shadow(0 0 18px #5ab8ff); }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 50% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1.5); opacity: 0; } }
.fx-layer .floater { z-index: 77; }

.bf-card.doomed .card, .pp.doomed { box-shadow: 0 0 0 3px #b04dff, 0 0 40px #8a2be2 !important; filter: brightness(.7) saturate(.4) hue-rotate(250deg); transition: filter .3s; }
.bf-card.frozen .card { box-shadow: 0 0 0 3px #9fe1ff, 0 0 30px #5ab8ff !important; filter: saturate(.5) brightness(1.2) hue-rotate(160deg); }
.bf-card.pumped .card { box-shadow: 0 0 0 3px #5ad17f, 0 0 34px #3dff7a !important; animation: pumpPulse .8s; }
.bf-card.weakened .card { box-shadow: 0 0 0 3px #b04dff, 0 0 30px #8a2be2 !important; filter: saturate(.5) brightness(.8); }
.pp.healglow { box-shadow: 0 0 0 3px #5ad17f, 0 0 40px #3dff7a; }
.pp.struck { box-shadow: 0 0 0 3px #ff4d5e, 0 0 40px #ff4d5e; }
@keyframes pumpPulse { 30% { scale: 1.12; } }

.bf-card.dying { pointer-events: none; }
.bf-card.dying .card { animation: dying .7s ease-in forwards; }
@keyframes dying {
  0% { filter: none; }
  25% { filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(4); scale: 1.08; }
  100% { filter: grayscale(1) brightness(.3); scale: .5; rotate: -18deg; opacity: 0; translate: 0 30px; }
}
.entering .card { animation: enterDrop .55s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes enterDrop {
  0% { translate: 0 -60px; scale: 1.6; opacity: 0; filter: brightness(2); }
  60% { translate: 0 4px; scale: .97; opacity: 1; filter: brightness(1.3); }
  100% { translate: 0 0; scale: 1; filter: none; }
}
.announce.mine .announce-who { color: var(--gold2); }
.banner.turn { font-size: 40px; padding: 8px 60px; }
.banner.turn.opp { background: linear-gradient(90deg, transparent, rgba(120,20,40,.85) 20%, rgba(120,20,40,.85) 80%, transparent); }

/* Small cards: the P/T badge sits on the type line, so keep type text clear of it */
.size-sm:has(.c-pt) .c-type, .size-md:has(.c-pt) .c-type { padding-right: 0.4em; }
.size-sm:has(.c-pt) .c-type .c-gem { margin-right: 3.6em; }
.size-sm .c-sub, .size-xs .c-sub { display: none; }

.creatures .bf-card { zoom: var(--bfzoom, 1); }
.creatures { gap: calc(12px * var(--bfzoom, 1)); }