/* Collector cards. Two kinds of markup:
   .cc  = the small chip-style card on trip pages and in the planner results
   .tc  = the full trading card on /cards/ and in the reveal (built by _cards.py and cards.js)

   Trading card geometry: everything is laid out on a 750 x 1050 grid (5:7), so 1u = card width / 750.
   Frame artwork (optional, see .has-frames below) must be 750 x 1050 px (or 1500 x 2100 px at 2x) and match:
     front  name plate    x 30-720,  y 30-122
            art window    x 44-706,  y 130-640
            category strip x 44-706, y 648-700
            text box      x 44-706,  y 708-962
            footer        x 44-706,  y 968-1012
     back   header        x 30-720,  y 30-122
            text area     x 52-698,  y 136-948   (keep it plain: small text sits on it)
            link row      x 52-698,  y 956-1012
   Outer corner radius 36u. Frame border is the 30u band around the edge. */

/* ---------- small chip cards (trip pages, planner) ---------- */
.cc-grid { list-style: none; padding: 0; margin: 1rem 0 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; }
.cc a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; padding: .8rem .6rem .9rem; text-align: center;
  border-radius: 14px; background: #fff; border: 2px solid var(--mist-2); text-decoration: none; color: var(--ink); filter: grayscale(.85); opacity: .72; }
.cc.cc-have a { filter: none; opacity: 1; border-color: var(--lantern); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.cc a:hover, .cc a:focus-visible { opacity: 1; filter: none; }
.cc a:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.cc-art { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: var(--cc, #C9D3A4); }
.cc-art img { width: 4.6rem; height: 4.6rem; }
.cat-hominid .cc-art { --cc: #D9A05B; } .cat-canid .cc-art { --cc: #D0633F; } .cat-winged .cc-art { --cc: #B98ACB; } .cat-aquatic .cc-art { --cc: #4FB3A9; }
.cat-entity .cc-art { --cc: #9CC46B; } .cat-fae .cc-art { --cc: #E58FB0; } .cat-ufo .cc-art { --cc: #8E8CF0; } .cat-other .cc-art { --cc: #E0C36A; }
.cc-name { font-weight: 700; line-height: 1.2; }
.cc-meta { font-size: .8rem; color: var(--muted-l); }
.cc-r { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.cc-r-unique { background: linear-gradient(100deg, #8a5a12, #E8B64A 45%, #8a5a12); color: #1B1205; }
.cc-r-uncommon { background: #056770; color: #E3F5F2; } .cc-r-common { background: var(--mist-2); color: var(--ink); }
.cc-got { position: absolute; top: .4rem; right: .4rem; max-width: 85%; padding: .1rem .45rem; border-radius: 999px; background: var(--lantern); color: var(--spruce);
  font-size: .68rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-huntbox { margin: .5rem 0 2rem; padding: 1.2rem 1.3rem .4rem; border-radius: 18px; background: #1B1426; color: #F3E9D8; border: 2px solid #E07A4F;
  background-image: radial-gradient(circle at 90% 0%, rgba(224,122,79,.35), transparent 50%); }
.cc-huntbox h2 { color: #F7B267; margin: 0 0 .3rem; }
.cc-huntbox .cc a { background: #2A2036; color: #F3E9D8; border-color: #4A3A5A; }
.cc-huntbox .cc-meta { color: #CBB9D8; }
.cc-prog { font-weight: 700; color: #F7B267; }
.cc-total { font-weight: 700; color: var(--lantern); }

/* ---------- /cards/ page chrome ---------- */
.tc-band { background: radial-gradient(120% 60% at 50% 0%, #1E3A30 0%, var(--spruce) 60%), var(--spruce); }
.tc-band h2 { color: #F3F1DA; }
.tc-note { max-width: 46rem; }
.tc-tally { list-style: none; padding: 0; margin: 1rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tc-tally li { padding: .4rem .8rem; border-radius: 999px; background: var(--spruce-2); border: 1px solid var(--spruce-3); font-size: .92rem; }
.tc-tally b { color: #F3F1DA; }
.tc-tmark { font-size: .85em; }
.tc-t-uncommon .tc-tmark { color: #C9D6DD; }
.tc-t-unique .tc-tmark { color: #F2C14E; text-shadow: 0 0 6px rgba(242,193,78,.7); }
.tc-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 .2rem; }
.tc-filters button { min-height: 44px; padding: 0 1.05rem; border-radius: 999px; font: 600 .95rem var(--body); cursor: pointer;
  border: 1.5px solid #3A5A4C; background: transparent; color: var(--lichen); }
.tc-filters button[aria-pressed="true"] { background: var(--lichen); color: var(--spruce); border-color: var(--lichen); }
.tc-filters button:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.tc-filters .tc-tiltbtn { margin-left: auto; border-color: #8a6a2a; color: #F2C14E; }
.tc-filters .tc-tiltbtn[aria-pressed="true"] { background: #F2C14E; color: #1B1205; border-color: #F2C14E; }
.tc-shown { min-height: 1.3em; margin: .3rem 0 0; font-size: .9rem; color: var(--muted-d); }
.tc-empty { font-weight: 600; color: var(--lantern-2); }
.tc-huntbox { background-color: #1B1426; }
.tc-huntbox .tc-grid { margin-bottom: 1.2rem; }

/* ---------- the trading card ---------- */
.tc-grid { list-style: none; padding: 0; margin: 1rem 0 1.6rem; display: grid; gap: clamp(.7rem, 2vw, 1.2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 12.5rem), 1fr));
  --cc-frame-common: url("cards/frame-common.webp"); --cc-frame-uncommon: url("cards/frame-uncommon.webp");
  --cc-frame-unique: url("cards/frame-unique.webp"); --cc-frame-hunt: url("cards/frame-hunt.webp");
  --cc-back: url("cards/back.webp"); --cc-reverse: url("cards/reverse.webp"); }
.tc { position: relative; --px: .5; --py: .5; --rx: 0deg; --ry: 0deg;
  --k: #C9D3A4; --frame: #CDC3A6; --foot-ink: #2B2618; --mark: #5F6B63; }
.tc.cat-hominid { --k: #D9A05B; } .tc.cat-canid { --k: #D0633F; } .tc.cat-winged { --k: #B98ACB; } .tc.cat-aquatic { --k: #4FB3A9; }
.tc.cat-entity { --k: #9CC46B; } .tc.cat-fae { --k: #E58FB0; } .tc.cat-ufo { --k: #8E8CF0; } .tc.cat-other { --k: #E0C36A; }
.tc-card { position: relative; aspect-ratio: 5 / 7; container-type: inline-size; perspective: 900px; border-radius: 4.8%/3.43%; }
.tc-tilt, .tc-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.tc-card > * { --u: calc(100cqw / 750); }
.tc-tilt { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.tc-in { transition: transform .65s cubic-bezier(.3,.1,.2,1); }
.tc.is-flip .tc-in { transform: rotateY(180deg); }
.tc.is-act { z-index: 2; }
.tc.is-act .tc-tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform .12s linear; }
.tc-face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--u) * 36); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35); font-size: max(10.5px, calc(var(--u) * 36)); line-height: 1.22; color: #1E211C; }
.tc-back { transform: rotateY(180deg); }

/* front: frame material is the face background, plates sit on it */
.tc-front { background: var(--frame); }
.tc-common .tc-front { background:
  radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.18), transparent 60%),
  repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 2px, transparent 2px 5px), #CDC3A6; }
.tc-uncommon { --frame: #C7CED4; --mark: #3E6E80; }
.tc-uncommon .tc-front { background: linear-gradient(125deg, #8E979F 0%, #EEF2F5 16%, #A2AAB2 30%, #F7FAFC 46%, #8D959D 60%, #E3E8EC 76%, #9AA2A9 100%);
  background-size: 220% 220%; background-position: calc(var(--px) * 100%) calc(var(--py) * 100%); }
.tc-unique { --frame: #D9A93C; --mark: #9A6A0E; }
.tc-unique .tc-front { background: linear-gradient(125deg, #8C5E12 0%, #F6D77A 15%, #B3801F 30%, #FFF0B8 45%, #A87418 60%, #F2C860 76%, #7E5410 100%);
  background-size: 220% 220%; background-position: calc(var(--px) * 100%) calc(var(--py) * 100%); }
.tc-hunt { --foot-ink: #FFF3E3; }
.tc-hunt .tc-front { background: linear-gradient(150deg, #F28A2E 0%, #E2602B 30%, #6B2C8F 70%, #2C1240 100%); }
.tc-hunt.tc-unique .tc-front { background: linear-gradient(150deg, #F6D77A 0%, #F28A2E 22%, #E2602B 40%, #6B2C8F 72%, #2C1240 100%); }

.tc-name, .tc-win, .tc-strip, .tc-sum, .tc-foot, .tc-fx { position: absolute; margin: 0; }
.tc-name { left: calc(var(--u) * 30); top: calc(var(--u) * 30); width: calc(var(--u) * 690); height: calc(var(--u) * 92);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 8) calc(var(--u) * 8); background: #F4EDDA; box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(0,0,0,.18); }
.tc-name h3 { margin: 0; min-width: 0; font: 700 max(13px, calc(var(--u) * 52))/1.05 var(--display); color: #1B1E19; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-mark { flex: none; font-size: max(13px, calc(var(--u) * 50)); line-height: 1; color: var(--mark); }
.tc-unique .tc-mark { color: #C8901C; text-shadow: 0 0 calc(var(--u) * 10) rgba(255,214,102,.9); }
.tc-win { left: calc(var(--u) * 44); top: calc(var(--u) * 130); width: calc(var(--u) * 662); height: calc(var(--u) * 510); overflow: hidden;
  border-radius: calc(var(--u) * 6); box-shadow: inset 0 0 0 calc(var(--u) * 4) rgba(0,0,0,.35), 0 0 0 calc(var(--u) * 3) rgba(255,255,255,.4);
  /* dusk: stars and a moon over a sky that glows in the category colour at the horizon, dark ground */
  background:
    radial-gradient(circle at 78% 20%, #FFF6D8 0 4.5%, rgba(255,246,216,.28) 5.5%, transparent 11%),
    radial-gradient(1.2px 1.2px at 14% 16%, #fff 50%, transparent), radial-gradient(1px 1px at 33% 9%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 52% 24%, #fff 50%, transparent), radial-gradient(1px 1px at 63% 7%, #fff 50%, transparent),
    radial-gradient(1px 1px at 91% 36%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 24% 33%, #fff 50%, transparent),
    linear-gradient(to top, #14211B 0 7%, transparent 7.2%),
    linear-gradient(to bottom, #161B33 0%, #2B2550 32%, color-mix(in srgb, var(--k) 55%, #2B2550) 60%, var(--k) 84%, color-mix(in srgb, var(--k) 55%, #FFF4D6) 93%); }
.tc-win img, .tc-win .badge { position: absolute; left: 50%; bottom: 3%; height: 86%; width: auto; max-width: 92%; transform: translateX(-50%); object-fit: contain; }
.tc-win .badge { height: auto; bottom: 20%; }
.tc-strip { left: calc(var(--u) * 44); top: calc(var(--u) * 648); width: calc(var(--u) * 662); height: calc(var(--u) * 52);
  display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 6);
  background: var(--k); color: #18160F; font-size: max(9.5px, calc(var(--u) * 30)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tc-kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tc-no { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tc-sum { left: calc(var(--u) * 44); top: calc(var(--u) * 708); width: calc(var(--u) * 662); height: calc(var(--u) * 254); padding: calc(var(--u) * 20) calc(var(--u) * 24);
  background: #F4EDDA; border-radius: calc(var(--u) * 6); box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(0,0,0,.12); font-style: italic;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tc-foot { left: calc(var(--u) * 44); top: calc(var(--u) * 968); width: calc(var(--u) * 662); height: calc(var(--u) * 44);
  display: flex; align-items: center; justify-content: space-between; gap: .5em; color: var(--foot-ink); font-size: max(9.5px, calc(var(--u) * 30)); font-weight: 700; }
.tc-r { text-transform: uppercase; letter-spacing: .06em; flex: none; }
.tc-got { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* back */
.tc-back { background: linear-gradient(160deg, #20372E, #13261F 60%, #0E1C17); padding: 0; color: #E9E6CF; }
.tc-unique .tc-back { box-shadow: inset 0 0 0 calc(var(--u) * 30) #C9962F, 0 10px 22px rgba(0,0,0,.45); }
.tc-uncommon .tc-back { box-shadow: inset 0 0 0 calc(var(--u) * 30) #AEB6BD, 0 10px 22px rgba(0,0,0,.45); }
.tc-common .tc-back { box-shadow: inset 0 0 0 calc(var(--u) * 30) #CDC3A6, 0 10px 22px rgba(0,0,0,.45); }
.tc-hunt .tc-back { box-shadow: inset 0 0 0 calc(var(--u) * 30) #E2602B, 0 10px 22px rgba(0,0,0,.45); background: linear-gradient(160deg, #3A1C4E, #1D1028 70%); }
.tc-bhead { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 30); width: calc(var(--u) * 690); height: calc(var(--u) * 92);
  display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: 0 calc(var(--u) * 24); background: var(--k); color: #18160F;
  border-radius: calc(var(--u) * 6); }
.tc-bn { font: 700 max(12.5px, calc(var(--u) * 46))/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tc-bno { flex: none; font-weight: 700; font-size: max(9.5px, calc(var(--u) * 28)); font-variant-numeric: tabular-nums; }
.tc-stats, .tc-where { position: relative; margin: 0; }
.tc-back > .tc-stats { position: absolute; left: calc(var(--u) * 52); top: calc(var(--u) * 136); width: calc(var(--u) * 646); }
.tc-stats > div { margin: 0 0 calc(var(--u) * 10); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tc-stats > div:nth-child(1), .tc-stats > div:nth-child(3), .tc-stats > div:nth-child(4) { -webkit-line-clamp: 1; line-clamp: 1; }
.tc-stats dt { display: inline; margin-right: .35em; font-size: .78em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--k); }
.tc-stats dd { display: inline; margin: 0; }
.tc-stats .tc-signs { display: block; }
.tc-signs ul { margin: .1em 0 0; padding: 0 0 0 1em; }
.tc-signs li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0 0 .15em; list-style: none; position: relative; }
.tc-signs li::before { content: ""; position: absolute; left: -.8em; top: .45em; width: .38em; height: .38em; border-radius: 50%; background: var(--k); }
.tc-back > .tc-where { position: absolute; left: calc(var(--u) * 52); bottom: calc(var(--u) * 102); width: calc(var(--u) * 646);
  padding-top: calc(var(--u) * 12); border-top: 1px solid rgba(233,230,207,.25); }
.tc-wh { margin: 0 0 .2em; font-weight: 800; font-size: .86em; letter-spacing: .05em; text-transform: uppercase; color: #F2C14E; }
.tc-near { margin: 0 0 .2em; font-weight: 600; }
.tc-spots { margin: 0; padding: 0; list-style: none; }
.tc-spots li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-spots li::before { content: "\2316\00a0"; color: #F2C14E; }
.tc-spots .tc-moresp::before { content: ""; }
.tc-moresp { opacity: .75; font-style: italic; }
.tc .tc-spots li.tc-dup { display: none !important; }
.tc-wh-have { display: none; }
.tc-have .tc-wh-have { display: inline; } .tc-have .tc-wh-lock { display: none; }
.tc-have .tc-spots li:nth-child(n+3) { display: none; }
.tc-have .tc-near:not([hidden]) + .tc-spots { display: none; }
.tc:not(.tc-have) .tc-near:not([hidden]) + .tc-spots li:nth-child(n+3) { display: none; }
/* locked back: only home turf and where to go */
.tc:not(.tc-have) .tc-stats > div:not(:nth-child(2)) { display: none; }
.tc:not(.tc-have) .tc-back > .tc-where { top: calc(var(--u) * 300); bottom: auto; border-top: 0; font-size: 1.04em; }
.tc:not(.tc-have) .tc-spots li { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: .25em; }

/* the whole card is the flip button; the creature link shows on the back */
.tc-flip { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 4.8%/3.43%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tc-flip:focus-visible { outline: 3px solid var(--lantern); outline-offset: 4px; }
.tc-more { position: absolute; z-index: 4; left: calc(var(--u) * 52); top: calc(var(--u) * 956); height: calc(var(--u) * 56); min-height: 24px;
  display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 26); border-radius: 999px; background: #F2B33D; color: #13261F !important;
  font-weight: 800; font-size: max(10.5px, calc(var(--u) * 32)); text-decoration: none; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.tc-more::after { content: " \2192"; }
.tc.is-flip .tc-more { visibility: visible; opacity: 1; transition: opacity .25s .35s; }
.tc-more:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- locked: dark silhouette and a "?" for a name ---------- */
.tc:not(.tc-have) .tc-win { background:
    radial-gradient(circle at 78% 20%, rgba(200,210,220,.35) 0 4.5%, transparent 9%),
    linear-gradient(to top, #050807 0 7%, transparent 7.2%),
    linear-gradient(to bottom, #0B0F14, #1A2128 60%, #2A333B 92%); }
.tc:not(.tc-have) .tc-win img { filter: brightness(0); opacity: .92; }
.tc:not(.tc-have) .tc-win::after { content: "?"; position: absolute; right: 6%; top: 4%; font: 700 calc(var(--u) * 120)/1 var(--display); color: rgba(255,255,255,.14); }
.tc:not(.tc-have) .tc-nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tc:not(.tc-have) .tc-name h3::after { content: "? ? ?"; letter-spacing: .12em; color: #6F6A5A; }
.tc:not(.tc-have) .tc-strip { background: color-mix(in srgb, var(--k) 45%, #3A3F3C); color: #ECE6D3; }
.tc:not(.tc-have) .tc-sum { color: #4A4A40; }
.tc:not(.tc-have) .tc-front { filter: saturate(.75) brightness(.92); }
.tc.tc-have .tc-got::before { content: "\2713\00a0"; }

/* ---------- light: glare on every card under the pointer, holo foil + sparkle on Unique ---------- */
.tc-fx { inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.tc-fx::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at calc(var(--px) * 100%) calc(var(--py) * 100%), rgba(255,255,255,.75) 0%, rgba(255,255,255,.2) 28%, rgba(0,0,0,.35) 95%); }
.tc.is-act .tc-fx::after { opacity: .9; }
.tc-common.is-act .tc-fx::after { opacity: .5; }
.tc-holo { display: none; }
.tc-unique .tc-holo { display: block; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  filter: brightness(.82) contrast(1.15) saturate(1.1);
  background-image:
    radial-gradient(farthest-corner circle at calc(var(--px) * 100%) calc(var(--py) * 100%), rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(115deg, #FF8A86 0%, #FFE97A 9%, #9DF58A 18%, #82EFF2 27%, #8AA2FF 36%, #D48CFF 45%, #FF8A86 54%),
    repeating-linear-gradient(-35deg, rgba(255,255,255,0) 0 4%, rgba(255,255,255,.22) 5%, rgba(255,255,255,0) 6.5%);
  background-size: 100% 100%, 320% 320%, 220% 220%;
  background-position: 0 0, calc(var(--px) * 100%) calc(var(--py) * 100%), calc(100% - var(--px) * 100%) calc(var(--py) * 100%); }
.tc-unique:not(.tc-have) .tc-holo { opacity: .25; }
.tc-unique.is-act .tc-holo { opacity: .7; }
/* moving shine band: runs only on the one live card */
.tc-unique .tc-holo::after { content: ""; position: absolute; inset: -20% -60%; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,250,220,.9) 50%, rgba(255,255,255,.75) 52%, transparent 62%);
  transform: translateX(-60%); }
.tc-unique.is-live .tc-holo::after { animation: tc-sweep 3.6s ease-in-out infinite; }
@keyframes tc-sweep { 0%, 55% { transform: translateX(-60%); opacity: 0; } 60% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
/* sparkle pass over the whole front */
.tc-unique .tc-fx::before { content: ""; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .35;
  background-image:
    radial-gradient(circle, #fff 0 .9px, transparent 1.6px), radial-gradient(circle, #FFF2B0 0 1.2px, transparent 2px),
    radial-gradient(circle, #B8F3FF 0 .8px, transparent 1.4px);
  background-size: 37px 41px, 61px 53px, 29px 31px; background-position: 3px 7px, 19px 23px, 11px 2px;
  /* keep the sparkle off the name plate and the text box */
  -webkit-mask: linear-gradient(to bottom, #000 0 2.7%, transparent 2.8% 11.7%, #000 11.8% 67.3%, transparent 67.5% 91.5%, #000 91.7%); mask: linear-gradient(to bottom, #000 0 2.7%, transparent 2.8% 11.7%, #000 11.8% 67.3%, transparent 67.5% 91.5%, #000 91.7%); }
.tc-unique.is-act .tc-fx::before, .tc-unique.is-live .tc-fx::before { animation: tc-twinkle 1.8s steps(6) infinite; }
@keyframes tc-twinkle { 0% { opacity: .2; background-position: 3px 7px, 19px 23px, 11px 2px; }
  50% { opacity: .85; background-position: 6px 3px, 15px 27px, 8px 5px; } 100% { opacity: .2; background-position: 3px 7px, 19px 23px, 11px 2px; } }
.tc-unique .tc-front { box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,226,140,.6), 0 0 18px rgba(242,193,78,.25); }
.tc-uncommon .tc-fx::after { mix-blend-mode: soft-light; }

/* ---------- frame artwork (off until the images exist: add class has-frames to the grid) ---------- */
.has-frames .tc-common .tc-front { background: var(--cc-frame-common) center / 100% 100% no-repeat; }
.has-frames .tc-uncommon .tc-front { background: var(--cc-frame-uncommon) center / 100% 100% no-repeat; }
.has-frames .tc-unique .tc-front { background: var(--cc-frame-unique) center / 100% 100% no-repeat; }
.has-frames .tc-hunt .tc-front { background: var(--cc-frame-hunt) center / 100% 100% no-repeat; }
.has-frames .tc-name, .has-frames .tc-sum { background: transparent; box-shadow: none; }
.has-frames .tc .tc-back { background: var(--cc-back) center / 100% 100% no-repeat; box-shadow: 0 10px 22px rgba(0,0,0,.45); }
.has-frames .tc-rev { background: var(--cc-reverse) center / 100% 100% no-repeat; }
.has-frames .tc-rev > * { display: none; }

/* ---------- reveal ---------- */
.tc-rv { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: .8rem; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 42%, rgba(43,37,80,.88), rgba(6,10,9,.94) 70%); color: #F3F1DA; text-align: center; animation: tc-fade .3s ease-out; }
.tc-rv-stage { position: relative; width: min(68vw, 300px, 46vh); }
.tc-rv .tc { width: 100%; }
.tc-rv .tc-card { pointer-events: none; }
.tc-rv-t { margin: .2rem 0 0; font: 700 clamp(1.4rem, 5vw, 1.9rem)/1.1 var(--display); color: #FFD27A; }
.tc-rv-s { margin: 0; max-width: 26rem; }
.tc-rv-b { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.tc-rv-b .btn { min-height: 48px; }
.tc-rv-t, .tc-rv-s, .tc-rv-b { opacity: 0; transition: opacity .4s; }
.tc-rv.is-shown .tc-rv-t, .tc-rv.is-shown .tc-rv-s, .tc-rv.is-shown .tc-rv-b { opacity: 1; }
.tc-rv .tc-rvcard .tc-card { animation: tc-fly .75s cubic-bezier(.15,.75,.25,1) both; }
.tc-rv .tc-rvcard .tc-in { transition-duration: .8s; }
@keyframes tc-fly { from { transform: translateY(80vh) rotate(-16deg) scale(.6); } to { transform: none; } }
@keyframes tc-fade { from { opacity: 0; } }
/* face-down side used only in the reveal */
.tc-rev { transform: rotateY(180deg); display: grid; place-items: center; align-content: center; gap: calc(var(--u) * 24);
  background: repeating-conic-gradient(from 0deg at 50% 46%, #1B3A2F 0 7.5deg, #142B23 7.5deg 15deg); box-shadow: inset 0 0 0 calc(var(--u) * 30) #CDC3A6, 0 10px 22px rgba(0,0,0,.45); }
.tc-unique .tc-rev { box-shadow: inset 0 0 0 calc(var(--u) * 30) #C9962F, 0 10px 22px rgba(0,0,0,.45); }
.tc-rev-ring { width: calc(var(--u) * 300); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #F2B33D 0 30%, #13261F 31% 60%, #F2B33D 61% 64%, transparent 65%); }
.tc-rev-ring img { width: 42%; height: auto; filter: brightness(0) invert(.08); }
.tc-rev-w { font: 700 calc(var(--u) * 54)/1 var(--display); color: #F2B33D; letter-spacing: .02em; }
.tc-burst { position: absolute; inset: -40%; pointer-events: none; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,140,.55) 0 4deg, transparent 4deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
.tc-rv.is-burst .tc-burst { animation: tc-burst 1.6s ease-out both; }
@keyframes tc-burst { 0% { opacity: 0; transform: scale(.4) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(40deg); } }
.tc-rv.is-burst .tc-unique .tc-holo::after { animation: tc-sweep 1.4s ease-in-out 2 both; }
.tc-rv.is-burst .tc-unique .tc-holo { opacity: .85; }

@media (hover: hover) {
  .tc:not(.is-act) .tc-flip:hover { background: rgba(255,255,255,.03); }
}
@media (max-width: 520px) {
  .tc-filters .tc-tiltbtn { margin-left: 0; }
}
/* small cards (two across on a phone): the text can't shrink below its floor, so show less of it */
@container (max-width: 250px) {
  .tc-sum { font-size: 9.5px; line-height: 1.2; }
  .tc-stats > .tc-signs { display: none; }
  .tc-more { top: auto; bottom: calc(var(--u) * 44); }
  .tc-back > .tc-where { bottom: calc(var(--u) * 44 + 30px); }
  .tc-stats > div { -webkit-line-clamp: 1; line-clamp: 1; }
  .tc-have .tc-spots li:nth-child(n+3):not(.tc-moresp) { display: none; }
}
/* reduced motion: no 3D turn, no tilt, no sparkle; flips become a crossfade */
@media (prefers-reduced-motion: reduce) {
  .tc-in, .tc.is-flip .tc-in, .tc.is-act .tc-tilt { transform: none !important; transition: none; }
  .tc-face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .3s, visibility 0s; }
  .tc-back, .tc-rev { transform: none; opacity: 0; visibility: hidden; }
  .tc.is-flip .tc-back, .tc.is-flip .tc-rev { opacity: 1; visibility: visible; }
  .tc.is-flip .tc-front { opacity: 0; visibility: hidden; }
  .tc-unique .tc-fx::before, .tc-unique .tc-holo::after, .tc-burst { animation: none !important; }
  .tc-rv .tc-rvcard .tc-card, .tc-rv { animation: none; }
}