/* The MTG-style artist card (cards.js mtg()). Placeholder frame drawn in CSS until Codex's frames land in
   assets/art/new/cards/ (then .m-frame takes the PNG and the plates go transparent).
   Layout, top to bottom, like a Magic card: name bar + rarity gem, art window (Instagram photo, or engraved initials),
   type line (genre · city · rarity), text box (why they fit, evidence as flavour text), followers box, @handle + number.
   The world's print sits on top of everything: film grain, a fine halftone and worn edges (Joe: the cards felt
   disjointed from the background). Sizes are in cqw so the card reads the same at every size. */
.tc.mtg {
  --c: var(--t-mortal); --metal-hi: color-mix(in srgb, var(--c) 70%, #fff 30%); --metal-lo: color-mix(in srgb, var(--c) 30%, #000 70%);
  --plate: linear-gradient(180deg, #2a2125, #140f12 60%, #1c1518); --ink: #f6ead8;
  aspect-ratio: 1024 / 1536; border-radius: 3.6% / 2.4%; text-align: left; /* % here: cqw on the card itself would measure the page */ background: #0b0809; outline: 0; isolation: isolate;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 22px color-mix(in srgb, var(--c) 22%, transparent);
}
/* the foil's mask (Dodd 2026-10-25: "the top doesn't have the normal line border... 100% cohesive"): the frame shows
   the foil, the slots don't. Codex's foil-mask.svg cut its holes a little outside the name plate's printed border but
   inside the type line's and the foot's, so the foil lit those borders and left the name plate's dull. These holes sit
   just inside every printed border (measured on all five frames, 1024x1536), so every plate's line catches the same light. */
.tc.mtg { --foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1536' viewBox='0 0 1024 1536' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H1024V1536H0Z M111 90h801v84h-801Z M111 933h802v88h-802Z M112 1058h800v190h-800Z M104 1286h700v129h-700Z M182 560a330 330 0 1 0 660 0a330 330 0 1 0 -660 0Z'/%3E%3C/svg%3E"); }
.tc.mtg.mythic { --c: var(--t-mythic); } .tc.mtg.titan { --c: var(--t-titan); } .tc.mtg.demigod { --c: var(--t-demigod); } .tc.mtg.oracle { --c: var(--t-oracle); } .tc.mtg.hero { --c: var(--t-hero); }
/* the frame: tier metal on the outside, a dark marble field inside */
.mtg .m-frame { position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='450'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.006 .022' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .86 0 0 0 0 .8 -2.6 0 0 0 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    radial-gradient(120% 80% at 50% 0%, #1d1619, #0a0708 70%);
  box-shadow: inset 0 0 0 1.1cqw var(--metal-lo), inset 0 0 0 1.6cqw var(--metal-hi), inset 0 0 0 2.6cqw color-mix(in srgb, var(--c) 55%, #120d0f), inset 0 0 0 3cqw #0b0809, inset 0 0 6cqw #000; }
.mtg .m-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: .8; padding: 3cqw;
  background: linear-gradient(125deg, transparent 0 30%, rgba(255, 255, 255, .35) 38%, transparent 46% 62%, rgba(255, 255, 255, .18) 70%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* plates */
.mtg .m-name, .mtg .m-type { position: absolute; z-index: 2; left: 6%; right: 6%; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 3cqw 0 3.4cqw;
  border-radius: 1.6cqw; background: var(--plate); color: var(--ink);
  box-shadow: inset 0 0 0 .35cqw color-mix(in srgb, var(--c) 75%, #000), inset 0 .5cqw 0 rgba(255, 255, 255, .08), 0 .8cqw 1.6cqw rgba(0, 0, 0, .6); }
.mtg .m-name { top: 4.6%; height: 7.6%; }
.mtg .m-name b { min-width: 0; font-family: var(--serif); font-weight: 700; line-height: 1.05; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .3cqw .6cqw #000; }
.mtg .m-gem { flex: none; width: 4.6cqw; height: 4.6cqw; transform: rotate(45deg); border-radius: .8cqw;
  background: radial-gradient(circle at 30% 30%, #fff 0 8%, var(--metal-hi) 22%, var(--c) 48%, var(--metal-lo) 100%);
  box-shadow: 0 0 0 .4cqw #0b0809, 0 0 0 .7cqw color-mix(in srgb, var(--c) 70%, #000), 0 0 3cqw color-mix(in srgb, var(--c) 55%, transparent); }
.mtg .m-type { top: 57.2%; height: 6.4%; font: 600 3.5cqw/1 var(--sans); letter-spacing: .02em; }
.mtg .m-type span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtg .m-type em { flex: none; font: 700 2.9cqw/1 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
/* the art window */
.mtg .m-art { position: absolute; z-index: 1; top: 13.4%; left: 7.6%; right: 7.6%; height: 42.6%; overflow: hidden; border-radius: .6cqw; background: radial-gradient(80% 70% at 50% 40%, #2a2226, #0c090a);
  box-shadow: 0 0 0 .5cqw #0b0809, 0 0 0 .9cqw color-mix(in srgb, var(--c) 60%, #000), inset 0 0 5cqw #000; }
.mtg .m-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mtg .m-art.is-photo img { filter: contrast(1.06) saturate(.86) sepia(.08); }
/* the print over the art: a halftone, a warm red glow from below like the world, a vignette */
.mtg .m-art-print { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(circle, transparent 0 .32cqw, rgba(8, 5, 6, .5) .52cqw) 0 0 / 1.15cqw 1.15cqw,
    linear-gradient(180deg, transparent 55%, rgba(140, 14, 22, .28) 100%),
    radial-gradient(110% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .6)); }
.mtg .m-art-print { opacity: .7; } .mtg .m-art.is-photo .m-art-print { opacity: .45; }
/* the text box */
.mtg .m-text { position: absolute; z-index: 2; top: 64.6%; left: 7.6%; right: 7.6%; height: 21.6%; padding: 3.4cqw 4cqw 0; overflow: hidden; border-radius: .8cqw;
  background: linear-gradient(180deg, rgba(236, 222, 200, .1), rgba(236, 222, 200, .04)), #151012;
  box-shadow: inset 0 0 0 .3cqw color-mix(in srgb, var(--c) 40%, #2a2124), inset 0 0 4cqw rgba(0, 0, 0, .7); color: #eadfcf; }
.mtg .m-text p { margin: 0; font: 400 4cqw/1.32 var(--serif); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* followers box, where Magic keeps power / toughness */
.mtg .m-pt { position: absolute; z-index: 3; right: 5%; top: 83.4%; height: 6.8%; min-width: 27%; padding: 0 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4cqw;
  border-radius: 1.4cqw; background: var(--plate); color: #fff;
  box-shadow: inset 0 0 0 .35cqw color-mix(in srgb, var(--c) 80%, #000), 0 .8cqw 1.6cqw rgba(0, 0, 0, .7); }
.mtg .m-pt b { font: 700 4.6cqw/1 var(--serif); }
.mtg .m-pt span { font: 600 2cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-2); }
.mtg .m-foot { position: absolute; z-index: 2; left: 8%; right: 36%; top: 91.4%; display: flex; justify-content: space-between; gap: 2cqw; font: 600 2.6cqw/1.2 var(--sans); letter-spacing: .04em; color: #bcae9c; }
.mtg .m-foot span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtg .m-foot span:last-child { flex: none; letter-spacing: .14em; }
/* the world's print on the whole card: film grain, worn specks, heavier towards the edges */
.mtg .m-grain { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 9 0 0 0 -6.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 55cqw 55cqw,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 40cqw 40cqw;
  -webkit-mask: radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, .55) 40%, #000 75%); mask: radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, .55) 40%, #000 75%); }
/* foil: the rarer, the more shimmer; mortals stay matte */
.mtg > .tc-holo { z-index: 5; inset: 0; padding: 0; border-radius: inherit; -webkit-mask: none; mask: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .35s;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 190, 220, .32) 40%, rgba(255, 236, 170, .34) 48%, rgba(170, 245, 230, .3) 56%, transparent 70%); background-size: 260% 100%;
  background-position: calc(100% - var(--bx, 50%)) 0; }
.mtg.hero > .tc-holo { opacity: .12; } .mtg.oracle > .tc-holo { opacity: .2; } .mtg.demigod > .tc-holo { opacity: .3; } .mtg.titan > .tc-holo { opacity: .38; } .mtg.mythic > .tc-holo { opacity: .46; }
.mtg:hover > .tc-holo { opacity: .55; } .mtg.mortal:hover > .tc-holo { opacity: .15; }
@media (prefers-reduced-motion: reduce) { .mtg > .tc-holo { transition: none; } }

/* ---------- Codex's frame art (has-frame): the PNG is the frame, our text and photo sit in its slots ----------
   Codex's card-frame-*-circle-v2 (1024x1536; web copies in assets/art/new/cards/web): name bar, circular portrait,
   type line, bone text panel, bottom bar and the medallion (followers). Slots match Codex's foil-mask.svg. Colour, foil
   and glow grow with rarity; the photo and all text stay clear of the foil. The frame carries its own marble and print,
   so our grain is lighter on top. */
.mtg.has-frame { background: #0b0809 var(--frame) 0 0 / 100% 100% no-repeat;
  --holo: .06; --power: var(--holo); --glow: 1.2cqw; /* --holo: the ONE rainbow-foil scale, the same in every card style (#212) */
  box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 var(--glow) color-mix(in srgb, var(--c) 45%, transparent); }
.mtg.has-frame.hero { --holo: .26; --glow: 2.2cqw; } .mtg.has-frame.oracle { --holo: .38; --glow: 3.4cqw; }
.mtg.has-frame.demigod { --holo: .5; --glow: 5cqw; } .mtg.has-frame.titan { --holo: .64; --glow: 6.8cqw; } .mtg.has-frame.mythic { --holo: .42; --glow: 9cqw; } /* Mythic keeps its own black and red foil; the grey Mortal keeps its white shine, almost no rainbow */
.mtg.has-frame .m-frame { background: none; box-shadow: none; }
.mtg.has-frame .m-frame::before { display: none; }
.mtg.has-frame .m-name, .mtg.has-frame .m-type { background: none; box-shadow: none; }
/* the name plate and the type line sit exactly on their printed fields (88-176 and 931-1023 of 1536), with the same
   side padding, so the @handle is centred in its border the way the genre and city are in theirs */
.mtg.has-frame .m-name { top: 5.73%; height: 5.73%; left: 10.84%; right: 10.94%; padding: 0 2.6cqw; justify-content: center; }
.mtg.has-frame .m-name b { text-align: center; }
.mtg.has-frame .m-gem { display: none; } /* the frame's colour says the rarity; the type line names it */
.mtg.has-frame .m-art { top: 15.2%; left: 18.6%; width: 62.8%; right: auto; height: auto; aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 4cqw #000, 0 0 0 .4cqw rgba(0, 0, 0, .55); }
.mtg.has-frame .m-art img { object-position: 50% 30%; }
.mtg.has-frame .m-art-print { border-radius: 50%; background: radial-gradient(circle, transparent 0 .32cqw, rgba(8, 5, 6, .5) .52cqw) 0 0 / 1.15cqw 1.15cqw,
  radial-gradient(closest-side, transparent 72%, rgba(0, 0, 0, .55)); }
.mtg.has-frame .m-type { top: 60.61%; height: 5.99%; left: 10.84%; right: 10.84%; padding: 0 2.6cqw; }
.mtg.has-frame .m-text { top: 68.3%; height: 13.6%; left: 11%; right: 10.8%; padding: 2.2cqw 3.4cqw 0; background: none; box-shadow: none; color: #2b1e15; }
.mtg.has-frame .m-text p { font-size: 3.8cqw; line-height: 1.27; -webkit-line-clamp: 2; }
.mtg.has-frame .m-pt { top: 84.2%; height: 6.9%; right: 8.8%; min-width: 0; width: 10.4%; padding: 0; border-radius: 50%; background: none; box-shadow: none; }
.mtg.has-frame .m-pt b { font-size: 3cqw; text-shadow: 0 .3cqw .8cqw #000, 0 0 1.5cqw #000; }
.mtg.has-frame .m-pt span { display: none; }
.mtg.has-frame .m-foot { top: 83.6%; height: 9.2%; left: 12.6%; right: 24%; align-items: center; font-size: 3cqw; color: #e2d4c0; }
.mtg.has-frame .m-grain { opacity: .26; }
/* holography (Codex's card lab): a thin-film spectrum and a soft glare that follow the pointer, on the frame only;
   stronger with rarity. It drifts on its own only on the card you're looking at (the panel, a card up close). */
.mtg.has-frame > .tc-holo { z-index: 5; inset: 0; opacity: var(--power); mix-blend-mode: color-dodge;
  -webkit-mask: var(--foil-mask) 0 0 / 100% 100%; mask: var(--foil-mask) 0 0 / 100% 100%;
  background: radial-gradient(ellipse at var(--bx, 50%) var(--by, 40%), rgba(255, 248, 221, .5), transparent 38%),
    repeating-linear-gradient(115deg, #e8c4dd 0%, #b6cbee 8%, #8dc1ac 16%, #e5d2a4 24%, #bca0d9 32%, #e8c4dd 40%) var(--bx, 50%) var(--by, 50%) / 240% 240%; }
.mtg.has-frame:hover > .tc-holo { opacity: calc(var(--power) + .14); }
.mtg.has-frame.mortal:hover > .tc-holo { opacity: .12; }
.inspect .mtg.has-frame:not(:hover) > .tc-holo { animation: foil-drift 10s ease-in-out infinite; }
@keyframes foil-drift { 0%, 100% { background-position: 30% 35%, 30% 35%; } 50% { background-position: 70% 65%, 70% 65%; } }
/* no theme changes the cards (Dodd 10-27): the foil is the tier scale above in every theme */
@media (prefers-reduced-motion: reduce) { .mtg.has-frame > .tc-holo { animation: none !important; } }

/* ---------- up close: the card flips to its dossier (Codex's card-detail-back) ---------- */
.inspect:has(.flipper) { grid-auto-flow: row; align-content: center; gap: 18px; }
.flipper { height: min(80vh, 860px, calc((100vw - 32px) * 1.5)); aspect-ratio: 1024 / 1536; perspective: 1800px; cursor: pointer; animation: pop .5s var(--ease); }
.flip-turn { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.flipper.flipped .flip-turn { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.inspect .flip-face .tc { width: 100%; height: 100%; animation: none; }
.inspect-acts { display: flex; justify-content: center; gap: 12px; }
.inspect-acts .btn { min-height: 46px; }
.card-back { --c: var(--t-mortal); background: #0b0809 url("assets/art/new/cards/web/card-back.webp") 0 0 / 100% 100% no-repeat; border-radius: 3.6% / 2.4%; cursor: default;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 4cqw color-mix(in srgb, var(--c) 40%, transparent); }
.card-back.mythic { --c: var(--t-mythic); } .card-back.titan { --c: var(--t-titan); } .card-back.demigod { --c: var(--t-demigod); } .card-back.oracle { --c: var(--t-oracle); } .card-back.hero { --c: var(--t-hero); }
.cb-photo { position: absolute; left: 42%; top: 2.6%; width: 16.4%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #141012; box-shadow: inset 0 0 2cqw #000; }
.cb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: contrast(1.06) saturate(.86); }
.cb-name { position: absolute; left: 14%; right: 14%; top: 13.7%; height: 5.9%; display: grid; place-items: center; padding: 0 2cqw;
  font: 700 5cqw/1 var(--serif); color: #f1e6d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .3cqw .8cqw #000; }
.cb-body { position: absolute; left: 11%; right: 11%; top: 22.6%; height: 63.2%; overflow-y: auto; overscroll-behavior: contain; padding: 1cqw 1.6cqw 3cqw 0;
  color: #2b1e15; font: 400 3.7cqw/1.38 var(--serif); scrollbar-width: thin; scrollbar-color: rgba(70, 45, 25, .35) transparent; }
.cb-body:focus-visible { outline: .4cqw solid rgba(70, 45, 25, .5); outline-offset: 1cqw; }
.cb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw 3cqw; margin: 0 0 3cqw; }
.cb-facts dt { font: 700 2.3cqw/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7a6450; }
.cb-facts dd { margin: .5cqw 0 0; font-weight: 700; overflow-wrap: anywhere; }
.cb-body section { padding-top: 2.4cqw; margin-top: 2.4cqw; border-top: .25cqw solid rgba(70, 45, 25, .22); }
.cb-body h4 { margin: 0 0 1cqw; font: 700 2.4cqw/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7a6450; }
.cb-body p { margin: 0; }
.cb-msg { font-style: italic; }
.cb-none { color: #7a6450; }
.cb-history { list-style: none; margin: 0; padding: 0; }
.cb-history li { display: flex; justify-content: space-between; gap: 2cqw; padding: .6cqw 0; }
.cb-history span { color: #6b5643; font-size: 3.2cqw; }
.cb-foot { position: absolute; left: 14%; right: 14%; top: 89.6%; height: 5.2%; display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  font: 600 2.8cqw/1 var(--sans); letter-spacing: .06em; color: #e2d4c0; }
.cb-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .flip-turn { transition: none; } .flipper { animation: none; } }
/* the print over portraits, finer and lighter (art bible: no coarse dots across a face): a fine screen that reads as
   print, strongest at the edge of the circle, almost clear in the middle where the eyes are */
.mtg.has-frame .m-art-print { background:
    radial-gradient(circle, transparent 0 .2cqw, rgba(8, 5, 6, .42) .34cqw) 0 0 / .72cqw .72cqw,
    radial-gradient(closest-side, transparent 72%, rgba(0, 0, 0, .55));
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, .35) 45%, #000 95%); mask: radial-gradient(closest-side, rgba(0, 0, 0, .35) 45%, #000 95%); }
.mtg.has-frame .m-art.is-photo .m-art-print { opacity: .35; }

/* ---------- the card face, locked (board #70, Dodd 2026-10-25: "a bit overly complicated... the font looks off.
   Lock that all in") ----------
   Two styles and nothing else:
     NAME  - Libre Caslon 700, bone, the @handle in the name bar (cards.js sizes it by length, 7.3 to 4.5 cqw). Caslon is
             for the plate only.
     LINE  - Inter 600 at 4.4 cqw, line-height 1.2, normal tracking, no shadow: the type line (a note + the genre,
             a pin + the city, icons in the text's own colour), the why-they-fit line (dark ink on the bone panel, two
             lines at most, nothing when there's no reason), the artist's name and the rarity in the foot (the rarity in its
             tier colour) and the followers on the medallion's dark coin (700, tabular figures).
   No italics, no second flavour line, no letter-spaced capitals, no glows on the text. Sizes are cqw, so the queue
   card, the hand and the binder all read the same; the slots are the frame's, so the art still lines up. */
.mtg.has-frame { --line: 4.4cqw; }
.mtg.has-frame :is(.m-type, .m-text, .m-foot, .m-pt) { font-family: var(--sans); font-weight: 600; font-size: var(--line); line-height: 1.2; letter-spacing: 0; text-transform: none; font-style: normal; text-shadow: none; }
.mtg.has-frame .m-name b { font-family: var(--serif); font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #f4ead9; text-shadow: none; translate: 0 .06em; }
.mtg.has-frame .m-type { justify-content: space-between; gap: 3cqw; color: #efe4d2; }
.mtg.has-frame .m-type > span { display: inline-flex; align-items: center; gap: 1.3cqw; min-width: 0; }
.mtg.has-frame .m-type > span > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtg.has-frame .m-genre { flex: 0 1 auto; } .mtg.has-frame .m-city { flex: 0 1 auto; margin-left: auto; }
.mtg.has-frame .m-ico { flex: none; width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mtg.has-frame .m-text { padding: 1.5cqw 3.4cqw 0; color: #21150d; font-weight: 600; }
.mtg.has-frame .m-text p { font: inherit; color: inherit; letter-spacing: inherit; line-height: 1.28; margin: 0; -webkit-line-clamp: 3; opacity: 1; text-shadow: none; }
.mtg.has-frame .m-foot { color: #efe4d2; }
.mtg.has-frame .m-foot span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtg.has-frame .m-foot em { flex: none; font-style: normal; color: color-mix(in srgb, var(--c) 78%, #fff); }
.mtg.has-frame .m-pt { background: radial-gradient(closest-side, rgba(12, 8, 9, .86) 66%, rgba(12, 8, 9, .5) 82%, transparent 100%); }
.mtg.has-frame .m-pt b { font: inherit; font-weight: 700; font-size: 3.9cqw; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #fff6e6; text-shadow: none; }
/* small cards (the phone's queue card, the hand): one step up so the line stays ~10 px or more */
@container (max-width: 250px) and (min-width: 150px) {
  .mtg.has-frame { --line: 4.9cqw; }
  .mtg.has-frame .m-pt b { font-size: 4.2cqw; }
}
/* ---------- the empty circle (Dodd 2026-10-25: no initials; the name plate carries the @handle) ----------
   When there's no Instagram photo the circle is an empty seal cut into the card's dark stone, made on purpose rather
   than left blank: a disc of dark stone lit from above, a carved groove inside the rim (its upper wall in shadow, its
   lower lip catching the key light) tinted by the tier, a fine milled ring like a coin's edge, and a faint IRIS mark
   inlaid at the centre with a small diamond under it. No letters of the artist's name. Sized by the circle itself
   (container units), so it works in the card, the dossier's small circle and the old portrait card alike; very small
   circles drop the mark and keep the rings. A photo, when there is one, covers it; if the photo fails, it shows again. */
.m-mono { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; container-type: size; border-radius: inherit; overflow: hidden; pointer-events: none;
  --mc: var(--c, #8d9095);
  background:
    radial-gradient(64% 44% at 50% 16%, rgba(255, 243, 224, .1), transparent 72%),
    radial-gradient(84% 52% at 50% 112%, color-mix(in srgb, var(--mc) 24%, transparent), transparent 72%),
    /* no marble veins in the seal: at this size a vein beside a letter reads as an accent mark */
    radial-gradient(closest-side, #241d1f, #151113 68%, #0a0809); }
/* the carved groove inside the rim */
.m-mono::before { content: ""; position: absolute; inset: 6.5%; border-radius: 50%;
  border: 1.3cqmin solid color-mix(in srgb, var(--mc) 34%, #0c090a);
  box-shadow: inset 0 1.1cqmin 1.3cqmin rgba(0, 0, 0, .85), inset 0 -.6cqmin 0 rgba(255, 240, 220, .08), 0 .6cqmin 0 rgba(255, 240, 220, .08), 0 -.7cqmin .9cqmin rgba(0, 0, 0, .75); }
/* the milled ring: fine ticks around a thin annulus, tier-tinted */
.m-mono .m-seal-ring { position: absolute; inset: 16%; border-radius: 50%;
  background: repeating-conic-gradient(from 1deg, color-mix(in srgb, var(--mc) 46%, #d9cbb5) 0 .9deg, transparent .9deg 5deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.6cqmin), #000 calc(100% - 2.4cqmin) calc(100% - .2cqmin), transparent 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - 2.6cqmin), #000 calc(100% - 2.4cqmin) calc(100% - .2cqmin), transparent 100%);
  opacity: .34; }
.m-mono .m-seal-ring::after { content: ""; position: absolute; inset: 7.5%; border-radius: 50%; box-shadow: 0 0 0 .35cqmin color-mix(in srgb, var(--mc) 30%, rgba(255, 240, 220, .2)), inset 0 .5cqmin .8cqmin rgba(0, 0, 0, .55); opacity: .7; }
/* the inner shadow, so the disc sits below the frame */
.m-mono::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 9cqmin rgba(0, 0, 0, .75), inset 0 2cqmin 4cqmin rgba(0, 0, 0, .5); }
/* the faint IRIS mark, inlaid: darker than the stone with a lit lower lip, a small diamond under it */
.m-mono b { position: relative; z-index: 1; display: block; transform: translateY(-4%);
  font: 400 12.5cqmin/1 var(--wordmark, var(--serif)); letter-spacing: .34em; padding-left: .34em; white-space: nowrap;
  color: color-mix(in srgb, var(--mc) 30%, #0d0a0b);
  text-shadow: 0 .22cqmin 0 rgba(255, 240, 220, .07), 0 -.35cqmin .35cqmin rgba(0, 0, 0, .7); } /* a thin lit lip; a deeper one hooked under the S like a cedilla */
.m-mono b::after { content: ""; position: absolute; left: 50%; top: calc(100% + 5cqmin); width: 2.6cqmin; height: 2.6cqmin; translate: -50% 0; rotate: 45deg;
  background: color-mix(in srgb, var(--mc) 55%, #1a1416); box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--mc) 40%, transparent); opacity: .7; }
@container (max-width: 96px) { .m-mono b { display: none; } }
.titan .m-mono { --mc: #d8b56a; }
.mythic .m-mono { --mc: #e2525f; }
.mortal .m-mono { --mc: #9a9a9e; }
/* a photo on top hides the seal; the print over the circle is lighter on stone than on a face */
.m-art img, .cb-photo img { position: relative; z-index: 1; }
.mtg .m-art.is-empty { background: #0c090a; }
.mtg .m-art.is-empty .m-art-print { opacity: .22; }
.cb-photo.is-empty { background: #0c090a; }
.tc-photo .m-mono { border-radius: 50%; }
.tc-photo.has-photo .m-mono { display: none; }
/* the name plate is the Instagram @: the @ in the tier's metal, a hair lighter than the handle */
.m-at { margin-right: .03em; font-weight: 400; color: color-mix(in srgb, var(--c, #cfc6bb) 62%, #fff1d8); }
.mortal .m-at { color: #cfc6bb; }
/* the dossier's plate and the old portrait card centre their text in a grid: the @handle goes in as one line */
:is(.cb-name, .tc-name) > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the artist's own name, small in the foot where the @handle used to be */
.mtg.has-frame .m-foot .m-realname { font-weight: 500; color: #e2d6c3; }


/* ---------- the frames, per card family (cards.js FAMILIES), and sharper print up close (board #70) ----------
   frame-<tier>.webp is 768x1152 (the 1x copy, plenty for a card up to ~570 px tall). On HiDPI screens, and whenever a
   card is up close (.inspect), the frame comes from the full-resolution 1024x1536 -2x copy of Codex's PNG instead.
   The worn family is <html data-card-family> (none = Black Laurel); a card with fam-<id> shows that family whatever is
   worn (the Locker's previews). */
/* the stock style (board #168, Dodd + Joe 10-26): IRIS Binary, Codex's Binary FIRST PASS (cards/binary-v1, exported to
   binary-v1/web; the Mythic is the Binary family's red). Same plate positions as Black Laurel. */
.mtg.has-frame.titan { --frame: url("assets/art/new/cards/binary-v1/web/frame-titan.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-titan-2x.webp"); }
.mtg.has-frame.mythic { --frame: url("assets/art/new/cards/binary-v1/web/frame-mythic.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-mythic-2x.webp"); }
.mtg.has-frame.demigod { --frame: url("assets/art/new/cards/binary-v1/web/frame-demigod.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-demigod-2x.webp"); }
.mtg.has-frame.oracle { --frame: url("assets/art/new/cards/binary-v1/web/frame-oracle.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-oracle-2x.webp"); }
.mtg.has-frame.hero { --frame: url("assets/art/new/cards/binary-v1/web/frame-hero.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-hero-2x.webp"); }
.mtg.has-frame.mortal { --frame: url("assets/art/new/cards/binary-v1/web/frame-mortal.webp"); --frame-2x: url("assets/art/new/cards/binary-v1/web/frame-mortal-2x.webp"); }
/* Black Laurel (the first IRIS card, earned on the pass now): Codex's circle-v2 frames */
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).titan { --frame: url("assets/art/new/cards/web/frame-titan.webp"); --frame-2x: url("assets/art/new/cards/web/frame-titan-2x.webp"); }
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).mythic { --frame: url("assets/art/new/cards/web/frame-mythic.webp"); --frame-2x: url("assets/art/new/cards/web/frame-mythic-2x.webp"); }
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).demigod { --frame: url("assets/art/new/cards/web/frame-demigod.webp"); --frame-2x: url("assets/art/new/cards/web/frame-demigod-2x.webp"); }
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).oracle { --frame: url("assets/art/new/cards/web/frame-oracle.webp"); --frame-2x: url("assets/art/new/cards/web/frame-oracle-2x.webp"); }
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).hero { --frame: url("assets/art/new/cards/web/frame-hero.webp"); --frame-2x: url("assets/art/new/cards/web/frame-hero-2x.webp"); }
:is(html[data-card-family="laurel"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-laurel).mortal { --frame: url("assets/art/new/cards/web/frame-mortal.webp"); --frame-2x: url("assets/art/new/cards/web/frame-mortal-2x.webp"); }
/* the stock style lit up (Dodd: "more contrasting, more glowy, like our current one", with the holo): the frame is drawn
   once more on .m-frame with more contrast and colour (the card's own background stays as the base), a brighter tier
   glow round the card and a stronger holo foil. Light only: no art is drawn. A worn family (data-card-family) or a
   preview of one (fam-<id>) doesn't get it. */
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris) .m-frame {
  background: var(--frame) 0 0 / 100% 100% no-repeat; filter: contrast(1.22) saturate(1.3) brightness(1.06); }
.inspect :is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris) .m-frame { background-image: var(--frame-2x, var(--frame)); }
@media (min-resolution: 1.5dppx) { :is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris) .m-frame { background-image: var(--frame-2x, var(--frame)); } }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris) { --glow: 2.6cqw; }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris):not(.is-bounty, .mythic) {
  box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 var(--glow) color-mix(in srgb, var(--c) 62%, transparent), 0 0 calc(var(--glow) * .4) color-mix(in srgb, var(--c) 55%, transparent); }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris).hero { --glow: 3.6cqw; }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris).oracle { --glow: 5cqw; }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris).demigod { --glow: 6.6cqw; }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris).titan { --glow: 8.4cqw; }
:is(html:not([data-card-family]) .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-iris).mythic { --glow: 10cqw; }
/* Binary (Codex, binary-v1/README.md): Joe's engraved stone with binary erosion. Its plates, circle, bone panel and coin
   sit within 1 to 3 px of Black Laurel's at 1024x1536 (measured on all five), so the live text and the foil mask use the
   same slots; only the frame pictures change. */
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).titan { --frame: url("assets/art/new/cards/binary-web/frame-titan.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-titan-2x.webp"); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).mythic { --frame: url("assets/art/new/cards/binary-web/frame-mythic.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-mythic-2x.webp"); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).demigod { --frame: url("assets/art/new/cards/binary-web/frame-demigod.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-demigod-2x.webp"); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).oracle { --frame: url("assets/art/new/cards/binary-web/frame-oracle.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-oracle-2x.webp"); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).hero { --frame: url("assets/art/new/cards/binary-web/frame-hero.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-hero-2x.webp"); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).mortal { --frame: url("assets/art/new/cards/binary-web/frame-mortal.webp"); --frame-2x: url("assets/art/new/cards/binary-web/frame-mortal-2x.webp"); }
.inspect .mtg.has-frame { background-image: var(--frame-2x, var(--frame)); }
.inspect .card-back { background-image: url("assets/art/new/cards/web/card-back-2x.webp"); }
@media (min-resolution: 1.5dppx) {
  .mtg.has-frame { background-image: var(--frame-2x, var(--frame)); }
  .card-back { background-image: url("assets/art/new/cards/web/card-back-2x.webp"); }
}
/* Binary Oracle's name, type and foot plates are lapis velvet (the others are dark stone): bright flecks behind light
   text. A soft lapis-dark wash calms the velvet under the words (fading out before the plate's border), and the @ and
   the rarity go a pale ice instead of the tier's own blue, which vanished on a blue plate. */
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).oracle {
  --bin-wash: linear-gradient(90deg, transparent, rgba(0, 7, 30, .5) 9% 91%, transparent); }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).oracle :is(.m-name, .m-type, .m-foot) { background: var(--bin-wash); border-radius: 1cqw; }
:is(html[data-card-family="binary"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-binary).oracle :is(.m-at, .m-foot em) { color: #dbe8ff; }

/* ---------- Codex's other three five-tier sets (Dodd 2026-10-26: "make sure none of those assets were wasted") ----------
   Each wears its own frames and, where its plates sit elsewhere, its own slots. Every number below was measured on all
   five of its frames at 1024x1536 (the dark field inside each printed border), so the live text lands on the plates.
   A family's foil mask cuts the same holes (the portrait and the text plates) so the shimmer stays on the frame. */

/* Temple Prism (temple-prism-production, README there): the portrait sits low in the arch (an ellipse, 686x664 inside
   the innermost ring, centre 510,748) and there is no plate up top: the @handle, genre and city, the why and the foot
   all live in the one black panel below (x 97-927, y 1169-1472). Codex's foil starting points: .04 to .18. */
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).titan { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-titan.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-titan-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).mythic { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-mythic.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-mythic-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).demigod { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-demigod.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-demigod-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).oracle { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-oracle.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-oracle-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).hero { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-hero.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-hero-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple).mortal { --frame: url("assets/art/new/cards/temple-prism-production/web/frame-mortal.webp"); --frame-2x: url("assets/art/new/cards/temple-prism-production/web/frame-mortal-2x.webp"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) {
  --foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1536' viewBox='0 0 1024 1536' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H1024V1536H0Z M168 748a342 332 0 1 0 684 0a342 332 0 1 0 -684 0Z M98 1166h830v308h-830Z'/%3E%3C/svg%3E"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-art { top: 27.41%; left: 16.82%; width: 66.02%; height: 42.58%; aspect-ratio: auto; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) :is(.m-name, .m-type, .m-text) { left: 12.7%; right: 12.7%; padding: 0; }
/* four rows in the panel with air between them: the why gets one line here (the dossier has all of it) */
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-name { top: 77.21%; height: 4.17%; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-type { top: 82.16%; height: 2.86%; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-text { top: 85.68%; height: 3.26%; color: #d9ccb7; text-align: center; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-text p { font-size: calc(var(--line) * .9); line-height: 1.2; -webkit-line-clamp: 1; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-foot { top: 90.36%; height: 3.39%; left: 12.7%; right: 26%; }
/* the followers close the foot row, a number like Black Laurel's coin (the row is too narrow for the word too) */
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-pt { top: 90.36%; height: 3.39%; right: 12.7%; width: 12%; align-items: flex-end; border-radius: 0; background: none; }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple) .m-pt b { font-size: var(--line); }

/* Obsidian (obsidian-*-v3, OBSIDIAN-V3.md): the name plate sits between a moon and a ringed planet (x 175-847, y 102-184;
   Demigod's has a star at each end), the portrait is a wide ellipse (730x712, centre 511,560; Demigod's ring is smaller),
   the genre and city plate is y 953-1027, and the bone panel (y 1057-1279) holds the why with the artist, the rarity and
   the followers in a row under it: the foot bar is a string of pearls, so nothing is written on it. */
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).titan { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-titan.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-titan-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).mythic { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-mythic.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-mythic-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).demigod { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-demigod.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-demigod-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).oracle { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-oracle.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-oracle-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).hero { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-hero.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-hero-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).mortal { --frame: url("assets/art/new/cards/obsidian-v3/web/frame-mortal.webp"); --frame-2x: url("assets/art/new/cards/obsidian-v3/web/frame-mortal-2x.webp"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) {
  --foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1536' viewBox='0 0 1024 1536' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H1024V1536H0Z M175 100h672v86h-672Z M120 950h784v80h-784Z M80 1050h866v236h-866Z M146 559a365 357 0 1 0 730 0a365 357 0 1 0 -730 0Z'/%3E%3C/svg%3E"); }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-name { top: 6.77%; height: 5.08%; left: 20%; right: 20%; padding: 0; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).demigod .m-name { left: 23%; right: 23%; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-art { top: 13.61%; left: 14.72%; width: 70.31%; height: 45.7%; aspect-ratio: auto; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian).demigod .m-art { top: 13.59%; left: 15.97%; width: 67.97%; height: 44.53%; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-type { top: 62.17%; height: 4.56%; left: 13.5%; right: 13.5%; padding: 0 .6cqw; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-text { top: 69.27%; height: 9.24%; left: 10.7%; right: 10.7%; padding: 1.8cqw 2.4cqw 0; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-foot { top: 79.4%; height: 3.5%; left: 13%; right: 26%; color: #2a1d13; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-foot .m-realname { color: #3b2b1e; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-foot em { color: color-mix(in srgb, var(--c) 34%, #120c08); font-weight: 700; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-pt { top: 79.4%; height: 3.5%; right: 13%; width: 12%; align-items: flex-end; border-radius: 0; background: none; }
:is(html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) .m-pt b { font-size: var(--line); color: #2a1d13; }

/* ---------- #167 Mythic, the red tier above Titan ----------
   Each family's Mythic is Codex's own red frame (mythic-v1, edited from that family's Titan: ruby ornament, the same
   plates, measured within a few px of the Titan's at 1024x1536, so it uses the Titan's slots). Dodd liked the first red
   look a little over the top, so a Mythic keeps that on top of the real art: a red foil, the widest red bloom round the
   card and the strongest breathing rim (card-idle.css). */
.mtg.has-frame.mythic > .tc-holo {
  background: radial-gradient(ellipse at var(--bx, 50%) var(--by, 40%), rgba(255, 214, 200, .4), transparent 40%),
    repeating-linear-gradient(115deg, #ff5a6e 0%, #ffb08a 9%, #c8102e 18%, #ff8a7a 27%, #8a0a1c 36%, #ff5a6e 45%) var(--bx, 50%) var(--by, 50%) / 240% 240%; }
.mtg.has-frame.mythic { box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 var(--glow) color-mix(in srgb, var(--t-mythic) 60%, transparent), 0 0 calc(var(--glow) * .35) color-mix(in srgb, var(--t-mythic) 70%, transparent); }
.mythic .m-at { color: #ff8f99; }

/* ---------- #167 the Bounty (bounty.js: one card in every pack, any tier) ----------
   The card keeps its tier colour (a green Hero bounty still reads green). On top, a fast rainbow: a glow behind the card,
   a thin edge round it, the @ and a live "Bounty" tag cycle through the hues together (--bh, a registered angle the card
   animates). Light and colour only, no art. Once messaged (claimed), and with reduced motion, it holds still: a static
   rainbow edge and tag. */
@property --bh { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes bounty-hue { to { --bh: 360deg; } }
.tc.is-bounty:not(.is-claimed) { animation: bounty-hue 1.6s linear infinite; }
@media (prefers-reduced-motion: no-preference) {
  /* the resting holders' idle motion (card-idle.css) keeps going alongside the hue */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc.is-bounty:not(.is-claimed) {
    animation: card-orbit var(--od, 11s) linear var(--op, 0s) infinite var(--odir, normal), card-bob var(--bd, 7s) ease-in-out var(--bp, 0s) infinite alternate, bounty-hue 1.6s linear infinite; }
  /* where card-idle.css stills a card (the opening stack, the card up close), the hue still turns */
  :is(.big-card, .flipper, .dragging, .is-dragging, .flipping) .tc.is-bounty:not(.is-claimed) { animation: bounty-hue 1.6s linear infinite !important; }
}
.mtg.is-bounty, .mtg.has-frame.is-bounty { box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 var(--glow, 2cqw) color-mix(in srgb, var(--c) 45%, transparent),
  0 0 2.4cqw .5cqw hsl(var(--bh) 100% 60% / .85), 0 0 4.6cqw .6cqw hsl(calc(var(--bh) + 140deg) 100% 60% / .32); } /* kept tight: a wider halo washed over the cards beside it */
.tc.is-bounty > .m-bounty-edge { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; padding: 1.1cqw;
  background: conic-gradient(from var(--bh), #ff3b4a, #ffb020, #f4ff3a, #3dff7a, #2ee6ff, #4a6bff, #c04bff, #ff3b4a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.tc.is-bounty > .m-bounty { position: absolute; z-index: 8; left: 50%; top: .9%; translate: -50% 0; padding: 1.1cqw 3.4cqw 1cqw 4cqw; border-radius: 99px;
  font: 800 3.9cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: #fff; pointer-events: none;
  background: linear-gradient(#0b0809, #0b0809) padding-box, conic-gradient(from var(--bh), #ff3b4a, #ffb020, #f4ff3a, #3dff7a, #2ee6ff, #4a6bff, #c04bff, #ff3b4a) border-box;
  border: .45cqw solid transparent; box-shadow: 0 0 2.4cqw hsl(var(--bh) 100% 60% / .85), 0 .4cqw 1.2cqw rgba(0, 0, 0, .7);
  text-shadow: 0 0 1.4cqw hsl(var(--bh) 100% 66%); }
.tc.is-bounty .m-at { color: hsl(var(--bh) 100% 72%); }
@container (max-width: 96px) { .tc.is-bounty > .m-bounty { font-size: 0; padding: 1.6cqw; } } /* a tiny card: just the rainbow dot */
/* under the rainbow: Codex's static prism edge (mythic-v1/bounty/bounty-edge.png, alpha; web copies in mythic-v1/web),
   thin prism lines round the card with engraved corner pieces and a star. It's cut with the style's own foil mask, so it
   never lies on the photo, the name, the type line or the text panels, and (Black Laurel, Binary, Window) round the
   follower coin too; the frame's own tier colour shows all round it. With reduced motion it's the only edge left. */
.tc.mtg { --bounty-hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1536' viewBox='0 0 1024 1536' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H1024V1536H0Z M817 1348a66 66 0 1 0 132 0a66 66 0 1 0 -132 0Z'/%3E%3C/svg%3E"); }
:is(html[data-card-family="temple"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-temple, html[data-card-family="obsidian"] .mtg.has-frame:not([class*="fam-"]), .mtg.has-frame.fam-obsidian) { --bounty-hole: linear-gradient(#000 0 0); } /* their followers sit in a panel the foil mask already cuts */
.tc.is-bounty > .m-bounty-art { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: .92;
  background: url("assets/art/new/cards/mythic-v1/web/bounty-edge.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--foil-mask) 0 0 / 100% 100%, var(--bounty-hole) 0 0 / 100% 100%; -webkit-mask-composite: source-in;
  mask: var(--foil-mask) 0 0 / 100% 100%, var(--bounty-hole) 0 0 / 100% 100%; mask-composite: intersect; }
.tc.is-bounty.is-claimed > .m-bounty-art { opacity: .6; }
.inspect .tc.is-bounty > .m-bounty-art { background-image: url("assets/art/new/cards/mythic-v1/web/bounty-edge-2x.webp"); }
@media (min-resolution: 1.5dppx) { .tc.is-bounty > .m-bounty-art { background-image: url("assets/art/new/cards/mythic-v1/web/bounty-edge-2x.webp"); } }
/* the done screen's "Bounty: <name>" (app.js spreadParts) wears the same turning rainbow */
.done-bounty { color: hsl(var(--bh) 100% 70%); animation: bounty-hue 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tc.is-bounty, .done-bounty { animation: none !important; }
  /* the static edge only: no rainbow ring, no rainbow glow (the tag stays, it says what the card is) */
  .tc.is-bounty > .m-bounty-edge { display: none; }
  .mtg.is-bounty, .mtg.has-frame.is-bounty { box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 var(--glow, 2cqw) color-mix(in srgb, var(--c) 45%, transparent); } }