/* CardConjurer Short frames use a 2010 x 2814 (5:7) canvas.
   Their translucent panels are baked into the assets; text stays in HTML.
   This file is shared by the gallery and the local crop editor. */
.magic-card {
  --frame-image: url("/assets/artifact-short-16a67a656282.webp");
  --crown-image: url("/assets/colorless-crown-856b9c534eba.webp");
  --subtitle-image: url("/assets/artifact-crown-subtitle-b140b8a4d01d.webp");
  --crown-mask-image: url("/assets/crown-mask-c3375fd7b81f.webp");
  --subtitle-mask-image: url("/assets/crown-subtitle-mask-ebe068c71f21.webp");
  --name-top: 5.58%;
  --name-left: 8.51%;
  --name-width: 83.08%;
  --name-height: 4.58%;
  --name-font-size: 5cqw;
  --subtitle-top: 11.37%;
  --subtitle-left: 14.93%;
  --subtitle-width: 70.15%;
  --subtitle-height: 2.13%;
  --subtitle-font-size: 3.4cqw;
  --type-top: 70.75%;
  --type-left: 8.5%;
  --type-width: 83%;
  --type-height: 4.26%;
  --type-font-size: 4.3cqw;
  --symbol-top: 70.85%;
  --symbol-left: 85.33%;
  --symbol-width: 6.99%;
  --symbol-height: 4%;
  --symbol-gap: 1.8%;
  --credit-top: 77.5%;
  --credit-left: 9%;
  --credit-right: 8.96%;
  --credit-bottom: 9.38%;
  --moniker-font-size: 5cqw;
  --event-font-size: 4.4cqw;
  --event-gap: 3cqw;
  --appearances-font-size: 3.4cqw;
  --appearances-gap: 1cqw;
  --footer-bottom: 2.1%;
  --footer-left: 9%;
  --footer-right: 7.5%;
  --footer-font-size: 2.4cqw;
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7;
  container-type: inline-size; isolation: isolate; overflow: hidden;
  border: 0; border-radius: 4.5% / 3.2%; background: #161616; color: #fff;
}
.magic-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #151515; pointer-events: none; z-index: 4; }
.magic-card.frame-white { --frame-image: url("/assets/white-short-3e6bd98dc7fe.webp"); --crown-image: url("/assets/white-crown-bbaca11a5bdc.webp"); --subtitle-image: url("/assets/white-crown-subtitle-f9275c7f8cb8.webp"); }
.magic-card.frame-blue { --frame-image: url("/assets/blue-short-3437452d827e.webp"); --crown-image: url("/assets/blue-crown-0d38742d9d28.webp"); --subtitle-image: url("/assets/blue-crown-subtitle-4467a1696680.webp"); }
.magic-card.frame-black { --frame-image: url("/assets/black-short-da66840c78fb.webp"); --crown-image: url("/assets/black-crown-ccdd4c7d9bc2.webp"); --subtitle-image: url("/assets/black-crown-subtitle-4e7f57278c7b.webp"); }
.magic-card.frame-red { --frame-image: url("/assets/red-short-2197899b8a07.webp"); --crown-image: url("/assets/red-crown-ecbfba9eec86.webp"); --subtitle-image: url("/assets/red-crown-subtitle-b89db71e2c95.webp"); }
.magic-card.frame-green { --frame-image: url("/assets/green-short-8972b1954d47.webp"); --crown-image: url("/assets/green-crown-c7ca7e482393.webp"); --subtitle-image: url("/assets/green-crown-subtitle-162780a3ad1e.webp"); }
.magic-card.frame-gold { --frame-image: url("/assets/gold-short-d3a6570fba3d.webp"); --crown-image: url("/assets/gold-crown-f2faae31dbdb.webp"); --subtitle-image: url("/assets/gold-crown-subtitle-d5a6224e0605.webp"); }
.magic-card.frame-land { --frame-image: url("/assets/land-short-e6b2452af4a8.webp"); --crown-image: url("/assets/land-crown-9f78c8430b4e.webp"); --subtitle-image: url("/assets/land-crown-subtitle-2f1005bd9ad5.webp"); }
.magic-card.frame-artifact { --crown-image: url("/assets/artifact-crown-43ca092158df.webp"); }
.magic-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.magic-frame-layer, .magic-crown-layer, .magic-subtitle-layer { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.magic-frame-layer { background-image: var(--frame-image); z-index: 1; mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: alpha; }
.magic-card.legendary:not(.has-subtitle) .magic-frame-layer { mask-image: var(--crown-mask-image); }
.magic-card.has-subtitle .magic-frame-layer { mask-image: var(--subtitle-mask-image); }
.magic-crown-layer { background-image: var(--crown-image); z-index: 2; }
.magic-subtitle-layer { background-image: var(--subtitle-image); z-index: 2; }
.magic-card:not(.legendary) .magic-crown-layer, .magic-card.has-subtitle .magic-crown-layer,
.magic-card:not(.has-subtitle) .magic-subtitle-layer { display: none; }
.magic-name, .magic-type {
  position: absolute; display: flex; align-items: center;
  min-width: 0; padding: 0; margin: 0; color: #fff; z-index: 3;
  font-family: "Beleren", Georgia, serif; font-weight: 700; line-height: 1;
  white-space: nowrap; text-shadow: 0 1px 1px #0008;
}
.magic-name { top: var(--name-top); left: var(--name-left); width: var(--name-width); height: var(--name-height); font-size: var(--name-size, calc(var(--name-font-size) * var(--name-scale, 1))); }
.magic-subtitle {
  position: absolute; top: var(--subtitle-top); height: var(--subtitle-height); left: var(--subtitle-left); width: var(--subtitle-width); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: italic 400 var(--subtitle-font-size)/1 "EB Garamond", Georgia, serif; white-space: nowrap;
}
.magic-type { top: var(--type-top); height: var(--type-height); left: var(--type-left); width: var(--type-width); font-size: var(--type-size, var(--type-font-size)); }
.magic-credit {
  position: absolute; left: var(--credit-left); right: var(--credit-right); top: var(--credit-top); bottom: var(--credit-bottom);
  display: flex; flex-direction: column; justify-content: center; min-height: 0;
  padding: 0; margin: 0; color: #fffdf4; z-index: 3; text-shadow: 0 1px 1px #000;
}
.magic-moniker { display: block; font: 500 var(--moniker-font-size)/1.08 "EB Garamond", Georgia, serif; overflow-wrap: anywhere; }
.magic-event { display: block; margin-top: var(--event-gap); font: italic var(--event-font-size)/1.1 "EB Garamond", Georgia, serif; overflow-wrap: anywhere; }
.magic-appearances { display: block; margin-top: var(--appearances-gap); font: var(--appearances-font-size)/1.1 "EB Garamond", Georgia, serif; }
.magic-footer { position: absolute; bottom: var(--footer-bottom); left: var(--footer-left); right: var(--footer-right); display: flex; justify-content: space-between; gap: 1cqw; color: #eee; font: var(--footer-font-size)/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .035em; z-index: 3; }
.magic-footer .card-site { text-transform: none; }