@font-face{font-family:Teko;src:url('assets/fonts/Teko.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:Shippori;src:url('assets/fonts/ShipporiMincho-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* The printed card: 1024 x 1536, with live typography on a transparent overlay. */
.art-card[data-full-art=true]{border-radius:12px;overflow:hidden;background:#101923;box-shadow:0 22px 50px #0009;filter:none;--card-text:#fffdf5}
.art-card[data-full-art=true] .art-window{inset:0;border-radius:inherit;clip-path:none}
.art-card[data-full-art=true] .frame-skin{border-radius:inherit;object-fit:fill}
.art-card[data-full-art=true] .card-copy{color:var(--card-text);text-shadow:0 1px 2px #000b}
.art-card[data-full-art=true] .card-copy>*{transform:none;margin:0}
.art-card[data-full-art=true] .card-name{left:10%;top:87.7%;width:57%;text-align:left;font:600 10.5cqw/.85 Teko,sans-serif;letter-spacing:.005em;color:#fff;white-space:nowrap;text-shadow:0 1px 1px #18222b88}
.art-card[data-full-art=true] .card-type{left:10%;top:92.9%;width:56%;font:500 2.55cqw/1 Barlow,sans-serif;letter-spacing:.025em;text-align:left;color:#fff3e0}
.art-card[data-full-art=true] .card-rules{left:6%;top:78.7%;width:87%;text-align:left;font:400 3.45cqw/1.25 Barlow,sans-serif;color:#fff;filter:drop-shadow(0 1px 2px #000)}
.art-card[data-full-art=true] .card-rules>strong{display:inline-block;margin-bottom:1cqw;padding:.65cqw 1.6cqw;background:var(--accent);color:#101923;font:600 3.1cqw/1 Barlow,sans-serif;border-radius:2px;text-shadow:none}
.art-card[data-full-art=true] .card-rules p{margin:0;font-size:3.3cqw;line-height:1.25}.art-card[data-full-art=true] .card-rules small{display:none}
.art-card[data-full-art=true] .card-stat{left:77%;top:4.8%;width:17%;height:auto;padding:0;display:flex;flex-direction:column;gap:.3cqw;align-items:flex-end;justify-content:center;background:none;clip-path:none;border:0;color:#fff}
.art-card[data-full-art=true] .card-stat small{font:500 2.6cqw/1 Barlow,sans-serif;letter-spacing:.08em}
.art-card[data-full-art=true] .card-stat b{font:600 10.8cqw/.83 Teko,sans-serif;letter-spacing:-.015em}
.art-card[data-full-art=true] .defense{left:75%;top:91%;width:18%}
.edition-rarity{display:none}.art-card[data-full-art=true] .edition-rarity{display:block;left:auto;right:5%;top:17%;width:auto;background:#10202bd9;border:1px solid var(--bright);border-radius:2px;padding:.7cqw 1.8cqw;color:#fffdf1;font:500 2.6cqw/1 Barlow,sans-serif;letter-spacing:.035em;text-align:center}
.art-card[data-full-art=true][data-rarity=common] .edition-rarity{color:#d6dee3;border-color:#a9b2ba}
.art-card[data-full-art=true][data-rarity=epic] .edition-rarity{color:#ead4ff;border-color:#cba2f8}
.art-card[data-full-art=true][data-rarity=legendary] .edition-rarity{background:#f0d59a;color:#33271b;border-color:#fff4cf;text-shadow:none}
.art-card[data-full-art=true][data-rarity=mythic] .edition-rarity{background:linear-gradient(115deg,#faf2d6,#e8c685 40%,#fff3d2 60%,var(--bright));color:#292123;border:1px solid #fff5df;text-shadow:none;box-shadow:0 1px 4px #0006}
.art-card[data-full-art=true][data-rarity=mythic] .edition-rarity::before{content:'✦ ';font-size:2.4cqw}
.art-card[data-full-art=true] #effect-canvas{mask-image:radial-gradient(ellipse at 50% 40%,#0001 10%,#0005 60%,#000 100%)}
.art-card[data-full-art=true] .frame-luster{opacity:calc(var(--foil)*var(--finish-power)*.14);mask-repeat:no-repeat}
.art-card[data-full-art=true] .element-foil{opacity:calc(var(--foil)*var(--finish-power)*.12)}
.art-card[data-full-art=true] .specular{opacity:calc(var(--glare)*.32)}
.art-card[data-full-art=true][data-rarity=mythic] .rarity-foil{opacity:calc(var(--foil)*.2)}
.art-card[data-full-art=true][data-rarity=mythic] .frame-luster{opacity:calc(var(--foil)*.33)}
.art-card[data-full-art=true][data-rarity=mythic]:not(.original){box-shadow:0 24px 48px #0009,0 0 0 1px #f4d5a1,0 0 20px rgba(var(--accent-rgb),.18);filter:none}
/* Shrine: Japanese print typography and a compact ivory caption. */
.art-card[data-full-art=true][data-layout=shrine] .card-name{left:9%;top:85%;width:56%;font:700 7.4cqw/1.2 Shippori,serif;color:#202632;text-shadow:none;letter-spacing:-.04em}
.art-card[data-full-art=true][data-layout=shrine] .card-type{left:9%;top:91.5%;width:56%;color:#555d68;font-size:2.5cqw;text-shadow:none}
.art-card[data-full-art=true][data-layout=shrine] .card-rules{top:76.5%;left:7%;width:85%}
.art-card[data-full-art=true][data-layout=shrine] .card-stat{left:74%;top:86%;width:20%;color:#202632;flex-direction:row;align-items:baseline;justify-content:space-between;text-shadow:none}
.art-card[data-full-art=true][data-layout=shrine] .defense{top:92.5%}
.art-card[data-full-art=true][data-layout=shrine] .card-stat b{font-size:8.3cqw}
.art-card[data-full-art=true][data-layout=shrine] .edition-rarity{top:16%;right:5%;font-family:Shippori,serif;font-size:2.7cqw}
/* Astral: softly curved white caption and paired circular attributes. */
.art-card[data-full-art=true][data-layout=astral] .card-name{left:9%;top:80.2%;width:82%;font:700 8.6cqw/1.15 Shippori,serif;text-align:center;letter-spacing:-.04em;text-shadow:0 2px 5px #172137}
.art-card[data-full-art=true][data-layout=astral] .card-rules{left:26%;top:92%;width:48%;color:#263048;filter:none;text-shadow:none;text-align:center}
.art-card[data-full-art=true][data-layout=astral] .card-rules>strong{display:none}
.art-card[data-full-art=true][data-layout=astral] .card-rules p{font-size:2.8cqw}
.art-card[data-full-art=true][data-layout=astral] .card-type{left:23%;top:88.9%;width:54%;text-align:center;color:#3a4253;text-shadow:none;font-size:2.5cqw}
.art-card[data-full-art=true][data-layout=astral] .card-stat{left:8.4%;top:90.8%;width:11.4%;align-items:center;gap:.4cqw}
.art-card[data-full-art=true][data-layout=astral] .card-stat b{font-size:7cqw}.art-card[data-full-art=true][data-layout=astral] .card-stat small{font-size:2.1cqw}
.art-card[data-full-art=true][data-layout=astral] .defense{left:80.2%;top:90.8%}
.art-card[data-full-art=true][data-layout=astral] .edition-rarity{top:8.5%;right:6%;border-radius:20px}
/* Circuit: a white power plate and heavy condensed lettering. */
.art-card[data-full-art=true][data-layout=circuit] .card-name{left:6%;top:87%;width:60%;font:600 11.7cqw/.85 Teko,sans-serif;color:#192333;text-shadow:none;text-transform:uppercase;letter-spacing:-.015em}
.art-card[data-full-art=true][data-layout=circuit] .card-type{left:6%;top:92.3%;width:53%;color:#303e53;text-shadow:none;font-size:2.4cqw}
.art-card[data-full-art=true][data-layout=circuit] .card-stat.attack{top:5.1%;color:#1a273c;text-shadow:none}
.art-card[data-full-art=true][data-layout=circuit] .edition-rarity{top:17%;right:5%;border-radius:0}
.art-card[data-full-art=true][data-layout=circuit] .card-rules{top:77.6%}
/* Eclipse: premium character portrait, spare metallic print and split top stats. */
.art-card[data-full-art=true][data-layout=eclipse] .card-name{left:7%;top:80.5%;width:86%;font:700 9.3cqw/1.1 Shippori,serif;letter-spacing:-.045em}
.art-card[data-full-art=true][data-layout=eclipse] .card-type{left:7%;top:88.9%;width:80%;font-size:2.7cqw}
.art-card[data-full-art=true][data-layout=eclipse] .card-rules{left:6%;top:94.6%;width:69%;filter:none}
.art-card[data-full-art=true][data-layout=eclipse] .card-rules>strong{display:none}
.art-card[data-full-art=true][data-layout=eclipse] .card-rules p{font-size:2.9cqw}
.art-card[data-full-art=true][data-layout=eclipse] .card-stat{left:6%;top:4.8%;width:15%;align-items:flex-start}
.art-card[data-full-art=true][data-layout=eclipse] .defense{left:79%;top:4.8%;align-items:flex-end}
.art-card[data-full-art=true][data-layout=eclipse] .card-stat b{font-size:10cqw}
.art-card[data-full-art=true][data-layout=eclipse] .edition-rarity{top:94.3%;right:5%;font-size:2.2cqw}
.art-card[data-full-art=true].no-frame,.art-card[data-full-art=true].original{aspect-ratio:auto}
.art-card[data-full-art=true].no-frame .art-window,.art-card[data-full-art=true].original .art-window{position:relative;inset:auto}
.art-card[data-full-art=true].no-frame .card-copy,.art-card[data-full-art=true].original .card-copy{display:none}

/* Atelier controls: five visual choices, with earlier studies tucked away. */
.element-story .large-sigil{width:84px;height:84px;margin-bottom:5px}
.element-story .collection-count{margin-top:13px}
.layout-workbench{margin-top:20px;max-width:270px;min-width:0;width:100%}
.layout-options{gap:5px}
.layout-options button{padding:5px 10px 5px 5px;gap:12px;min-height:58px}
.layout-options b{font-size:23px}.layout-options em{font-size:10px}.layout-options small{font-size:8px}
.edition-preview{display:block;width:38px;aspect-ratio:2/3;flex:none;border-radius:2px;overflow:hidden;background-image:var(--preview-art);background-size:cover;background-position:center}
.edition-preview img{display:block;width:100%;height:100%}
.legacy-layouts{margin:14px 0;color:#a59b8b;font:12px/1.4 'Barlow',sans-serif}
.legacy-layouts summary{cursor:pointer;padding:5px 0}.legacy-layouts p{font-size:11px;margin:8px 0}
.legacy-options{display:flex;gap:5px;flex-wrap:wrap}.legacy-options button{background:#101214aa;border:1px solid #ffffff25;color:#c6b99e;font:12px 'Barlow',sans-serif;padding:7px}
.legacy-options button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
#frame-status{color:var(--accent);font-size:11px}#layout-description{font-size:12px;margin:7px 0 12px}
.layout-workbench .sample-note{font-size:10px;line-height:1.5}
.layout-options button:focus-visible,.legacy-options button:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
@media(min-width:901px){.element-story{align-self:start}.element-story h2{font-size:48px}.element-story .element-description{font-size:12px;line-height:1.5}.showcase{align-self:start;padding-top:24px}.inspector{align-self:start;margin-top:24px}.card-stage{min-height:570px}}
@media(max-width:900px){.element-story .large-sigil{width:55px;height:55px;margin:0}.layout-workbench{display:block;max-width:none;flex-basis:100%;margin-top:12px}.layout-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.layout-options button{display:flex;flex-direction:column;gap:6px;align-items:start;padding:7px}.edition-preview{width:36px}.layout-options b{font-size:21px}.layout-options em{font-size:9px}.legacy-layouts{margin:9px 0}#layout-description{margin:6px 0}.art-fit-label,.crop-label{display:inline-flex;width:48%;margin:6px 0}.crop-label{padding-left:12px}.layout-workbench input[type=range]{width:48%;margin-left:52%}.frame-download{margin-top:-19px;width:max-content}.sample-note{margin-top:13px}}
@media(max-width:630px){.element-story .large-sigil{width:36px;height:36px}.layout-options{display:flex;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent) #ffffff08;padding-bottom:5px;scroll-snap-type:x proximity}.layout-options button{min-width:116px;flex:0 0 116px;flex-direction:row;gap:7px;align-items:center;scroll-snap-align:start}.layout-options .edition-preview{width:28px}.layout-options b{font-size:20px}.layout-options em{display:none}.layout-options small{font-size:7px}.layout-workbench{margin-top:6px}.layout-heading h3{font-size:23px}.element-story .collection-count{margin-top:0}.art-fit-label select{max-width:100px}.card-stage{min-height:430px}}

.style-guide-link{display:block;margin:12px 0 4px;font:12px Barlow,sans-serif;color:var(--accent);text-underline-offset:3px}

.art-card[data-full-art=true][data-layout=vanguard] .card-rules{top:76.5%}
.art-card[data-full-art=true][data-layout=shrine] .edition-rarity{top:10.1%;right:5.3%;width:13.2%;font-size:2.1cqw;padding:.65cqw 0;border-radius:0}.art-card[data-full-art=true][data-layout=circuit] .card-rules{top:75%}
.art-card[data-full-art=true][data-layout=vanguard]:is([data-element=ice],[data-element=light],[data-element=wind],[data-element=water]) :is(.card-name,.card-type){color:#172b38;text-shadow:none}