/* ---------- cards ---------- */
.card{position:relative;width:5em;height:6em;border-radius:.6em;flex:none;overflow:hidden;isolation:isolate; /* keeps the rarity tag and frame under overlapping cards */
  background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:inset 0 0 0 .05em rgba(255,255,255,.32),inset 0 -1.2em 1.4em rgba(0,0,0,.22),0 .2em .5em rgba(var(--sh),calc(.6*var(--shk)));
  --c1:#777;--c2:#333}
.card.blue{--c1:var(--blue1);--c2:var(--blue2)}
.card.red{--c1:var(--red1);--c2:var(--red2)}
.card.grey{--c1:var(--grey1);--c2:var(--grey2)} /* a card in the collection, nobody's yet */
.card.gold{--c1:var(--gold1);--c2:var(--gold2)} .card.green{--c1:var(--green1);--c2:var(--green2)}
.card.purple{--c1:var(--purple1);--c2:var(--purple2)} .card.teal{--c1:var(--teal1);--c2:var(--teal2)}
/* your colour (save.js myCol), for what isn't a card: your side, avatar and score. Blue sets nothing, so
   these fall back to --blue1/2 and -ink, which some screens retune */
:root[data-me="gold"]{--me1:var(--gold1);--me2:var(--gold2);--me-ink:var(--gold-ink)}
:root[data-me="green"]{--me1:var(--green1);--me2:var(--green2);--me-ink:var(--green-ink)}
:root[data-me="purple"]{--me1:var(--purple1);--me2:var(--purple2);--me-ink:var(--purple-ink)}
:root[data-me="teal"]{--me1:var(--teal1);--me2:var(--teal2);--me-ink:var(--teal-ink)}
:root[data-me="grey"]{--me1:var(--grey1);--me2:var(--grey2);--me-ink:var(--grey-ink)}
/* registered so a flying card can fade from one colour to another */
@property --c1{syntax:'<color>';inherits:true;initial-value:#777}
@property --c2{syntax:'<color>';inherits:true;initial-value:#333}
.card::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 72% 68%,rgba(255,255,255,.2),transparent 55%);pointer-events:none}
.card .art{position:absolute;right:.12em;bottom:.72em;font-size:2.5em;line-height:1;filter:drop-shadow(0 .04em .08em rgba(0,0,0,.55))}
.card .nums{position:absolute;left:.12em;top:.12em;width:2.5em;height:2.5em}
.card .nums::before{content:"";position:absolute;top:.44em;right:.44em;bottom:.44em;left:.44em;transform:rotate(45deg);background:rgba(0,0,0,.4);border:.05em solid rgba(255,255,255,.4);border-radius:.14em}
.card .nums b{position:absolute;width:1em;text-align:center;font:900 .95em/1 var(--display);color:#fff;text-shadow:0 0 .12em #000,0 0 .12em #000,.05em .05em 0 #000}
.card .n0{left:50%;top:0;transform:translateX(-50%)}
.card .n2{left:50%;bottom:0;transform:translateX(-50%)}
.card .n1{right:0;top:50%;transform:translateY(-50%)}
.card .n3{left:0;top:50%;transform:translateY(-50%)}
.card .el{position:absolute;right:.18em;top:.14em;font-size:.95em;line-height:1;filter:drop-shadow(0 0 .1em rgba(0,0,0,.7))}
.card .nm{position:absolute;left:0;right:0;bottom:0;padding:.2em .3em .24em;font:600 .5em/1.1 var(--body);text-align:center;color:#fff;background:rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .mod{position:absolute;right:.2em;top:1.15em;font:900 .72em/1 var(--display);padding:.12em .25em;border-radius:.3em;background:rgba(0,0,0,.6)}
.card .mod.up{color:#8dff8d} .card .mod.dn{color:#ff9b9b}
.card .cnt{position:absolute;right:.35em;top:2.2em;z-index:2;font:800 .62em/1 var(--display);background:var(--accent);color:var(--on-accent);border-radius:.4em;padding:.2em .45em}
/* rarity: 1★ Common … 5★ Legendary (two old levels per star). Each gets a frame and a "3★" tag in its colour:
   bronze, silver, gold, violet, and for 5★ "prism", a rainbow (--r5 is only its fallback where one colour is needed).
   These are the only place the colours live: packs.js reads --r1 … --r5 for the pack opening.
   --rc colours the frame on the card; --rt is a text colour that stays readable on the page in both themes. */
:root{--r1:#c08a5b;--r2:#c9d3dc;--r3:#f0c35c;--r4:#9d6bff;--r5:#ff8fd0;
  --prism:linear-gradient(90deg,#ff8fd0,#ffd76a,#7fe0ff,#b98cff);--prism-ring:conic-gradient(from 200deg,#ff8fd0,#ffd76a,#7fe0ff,#b98cff,#ff8fd0);
  --r1t:#d29d6e;--r2t:#d5dde4;--r3t:#f0c35c;--r4t:#b594ff;--r5t:#ff9fd6;--prism-t:linear-gradient(90deg,#ff9fd6,#ffd76a,#7fe0ff,#c7a2ff)}
:root[data-theme="light"]{--r1t:#8a5a2b;--r2t:#5f6b76;--r3t:#946a0c;--r4t:#6a3dc8;--r5t:#b8337f;--prism-t:linear-gradient(90deg,#b8337f,#946a0c,#0e6f86,#6a3dc8)}
.rar1{--rc:var(--r1);--rt:var(--r1t)} .rar2{--rc:var(--r2);--rt:var(--r2t)} .rar3{--rc:var(--r3);--rt:var(--r3t)} .rar4{--rc:var(--r4);--rt:var(--r4t)} .rar5{--rc:var(--r5);--rt:var(--r5t)}
.rt{color:var(--rt)}
/* 5★ words ("5★", "Legendary") are written in the prism */
.rar5 .rt,.rt.rar5{background:var(--prism-t);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.card .rf{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 .1em var(--rc),inset 0 0 .5em .05em color-mix(in srgb,var(--rc) 40%,transparent)}
.card.rar5 .rf{box-shadow:inset 0 0 .55em .05em color-mix(in srgb,var(--r5) 45%,transparent)}
.card.rar5 .rf::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:.1em;background:var(--prism-ring);
  -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)}
/* the tag sits above the name strip with a clear gap (the strip is ~.77em tall), so a long name is never covered.
   Offsets are in the tag's own em (its font is .5 of the card's): 2.05em = 1.03 card-em up, .5em = .25 card-em in. */
.card .rchip{position:absolute;left:.5em;bottom:2.05em;z-index:2;font:800 .5em/1 var(--display);padding:.18em .38em .2em;border-radius:.35em;white-space:nowrap;
  background:rgba(0,0,0,.62);color:var(--rc);border:.08em solid var(--rc)}
.card.rar5 .rchip{color:#fff;border-color:transparent;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)) padding-box,var(--prism) border-box}
.card.nn .rchip{bottom:.6em}
/* "New" (a card you don't own yet, e.g. at the Merchant): the rarity tag's twin, in the bottom-right corner */
.card .nchip{position:absolute;right:.5em;bottom:2.05em;z-index:2;font:800 .5em/1 var(--display);padding:.18em .38em .2em;border-radius:.35em;white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.62);color:#7DF5B4;border:.08em solid #7DF5B4}
.card.nn .nchip{bottom:.6em}
.card.back .rf,.card.back .rchip,.card.back .nchip{display:none}
.card.back{background:repeating-linear-gradient(45deg,var(--surf2) 0 .3em,var(--surf) .3em .6em);box-shadow:inset 0 0 0 .05em var(--line2),0 .2em .5em rgba(var(--sh),calc(.5*var(--shk)))}
/* the back: the Leylines emblem */
.card.back::after{content:"";position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1;transform:translate(-50%,-50%);background:var(--accent);-webkit-mask:url(../images/leylines-emblem-line.svg) center/contain no-repeat;mask:url(../images/leylines-emblem-line.svg) center/contain no-repeat}
@supports not (aspect-ratio:1){.card.back::after{height:45%}} /* browsers before Chrome 88: the same square (54% of a 5 by 6 card) */
.card.back i{display:none}
.card.unknown{background:var(--surf);box-shadow:inset 0 0 0 .05em var(--line2)}
.card.unknown i{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font:900 2em var(--display);color:var(--muted);opacity:.45;font-style:normal}
.card.drop{animation:drop .3s var(--ease)}
@keyframes drop{0%{transform:scale(1.3) translateY(-.6em);opacity:0}100%{transform:none;opacity:1}}
.card.fy{animation:flipY .46s ease-in-out}
.card.fx{animation:flipX .46s ease-in-out}
@keyframes flipY{0%{transform:perspective(30em) rotateY(0)}50%{transform:perspective(30em) rotateY(90deg) scale(1.1)}100%{transform:perspective(30em) rotateY(0)}}
@keyframes flipX{0%{transform:perspective(30em) rotateX(0)}50%{transform:perspective(30em) rotateX(90deg) scale(1.1)}100%{transform:perspective(30em) rotateX(0)}}
/* Three open: a hand card both players can see (game.js). Sits under the element icon, in the part a stacked hand still shows; offsets in its own em (.62 of the card) */
.card.shown::after{content:"👁";position:absolute;right:.3em;top:1.95em;z-index:4;font-size:.62em;line-height:1;padding:.18em .22em;border-radius:.4em;background:rgba(0,0,0,.6)}
.card.lost{filter:saturate(.7) brightness(.85)}
.card.lost::after{content:"×0";position:absolute;right:.35em;top:2.2em;z-index:2;font:800 .62em/1 var(--display);background:var(--danger);color:#fff;border-radius:.4em;padding:.2em .45em}
.lostc{color:var(--danger)!important}