/* Aetherbound card renderer – see skills/card-design/SKILL.md.
   All sizes are relative to the card width (container query units), so a card renders
   identically at any size; text blocks flow (no absolute stacking → no overlaps). */
.ac{--rx:-6deg;--ry:10deg;--lx:35%;--ly:30%;--ax:0;--ay:0;--scale:1;--depth:.75;--reflect:1;--flash:.4;
  --tx-r:.5;--tx-l:0;--tx-t:.5;--tx-b:0;--el1:#2b7fd9;--el2:#5fd0f2;--ink:#f6f5f3;
  perspective:1150px;display:flex;justify-content:center;width:100%}
.ac-card{position:relative;width:100%;aspect-ratio:63/88;container-type:inline-size;cursor:grab;touch-action:none;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));will-change:transform;outline:none;
  filter:drop-shadow(calc(var(--ax) * -20px) calc(18px + var(--ay) * 12px) 20px rgba(0,0,0,.55));
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ac-card:active{cursor:grabbing}
.ac-card:focus-visible{outline:3px solid #b8f2fa;outline-offset:6px;border-radius:4%}
.ac-surface{position:absolute;inset:0;overflow:hidden;border-radius:4.2% / 3%;background:#121e33;isolation:isolate}
.ac-surface > *{position:absolute;pointer-events:none}
.ac-fill{inset:0;width:100%;height:100%}
img.ac-fill{object-fit:cover;display:block}

/* ---------- full-art layout ---------- */
.ac[data-layout=full] .ac-art{inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(1.1) contrast(1.02)}
.ac[data-layout=full] .ac-vignette{inset:0;z-index:2;background:linear-gradient(to bottom,rgba(2,10,24,.66) 0%,rgba(3,12,25,.14) 13%,transparent 25%,transparent 46%,rgba(2,7,17,.2) 54%,rgba(1,10,23,.72) 70%,rgba(0,8,21,.9) 100%)}

/* ---------- frame layout ---------- */
.ac[data-layout=frame] .ac-frame{inset:0;z-index:1;background:
  radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.28),transparent 60%),
  linear-gradient(160deg,var(--el2),var(--el1) 55%,color-mix(in srgb,var(--el1) 70%,#000))}
.ac[data-layout=frame] .ac-frame::after{content:"";position:absolute;inset:2.2%;border-radius:3% / 2.2%;
  box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.35),inset 0 0 6cqw rgba(0,0,0,.25)}
.ac[data-layout=frame] .ac-panel{left:6%;right:6%;top:54.5%;bottom:12.5%;z-index:2;border-radius:2.2cqw;
  background:linear-gradient(180deg,rgba(255,252,244,.9),rgba(236,230,214,.86));box-shadow:inset 0 0 0 .4cqw rgba(0,0,0,.12)}
.ac[data-layout=frame] .ac-window{left:7%;right:7%;top:11.6%;height:40%;z-index:4;overflow:hidden;border-radius:1.2cqw;
  box-shadow:0 0 0 .7cqw #e9eef2,0 0 0 1.1cqw rgba(0,0,0,.35),0 1cqw 2cqw rgba(0,0,0,.35);background:#0c1626;isolation:isolate}
.ac[data-layout=frame] .ac-window > *{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ac[data-layout=frame] .ac-window .ac-art{object-fit:cover}
.ac[data-layout=frame]{--ink:#1b2230}

/* ---------- text ---------- */
.ac-copy{inset:0;z-index:9;font-family:"Avenir Next",Avenir,"Segoe UI",Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.15}
.ac[data-layout=full] .ac-copy{text-shadow:0 .25cqw .5cqw #000,0 0 1.4cqw #06101add}
.ac-stage{position:absolute;left:6%;top:2.9%;font-size:2.7cqw;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ac-evolve{position:absolute;left:6%;top:9.2%;font-size:2.2cqw;font-style:italic;opacity:.85}
.ac-name{position:absolute;left:5.6%;top:5.2%;font-size:8.4cqw;font-weight:900;font-style:italic;letter-spacing:-.06em;line-height:1}
.ac[data-layout=frame] .ac-name{font-size:6.6cqw;top:4.9%;color:#fff;text-shadow:0 .3cqw .6cqw rgba(0,0,0,.45)}
.ac[data-layout=frame] .ac-stage{color:#fff;text-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.ac[data-layout=frame] .ac-evolve{color:#fff;top:8.9%}
.ac-hp{position:absolute;right:15%;top:4.6%;display:flex;align-items:baseline;gap:.8cqw;font-weight:900;font-size:7cqw;letter-spacing:-.04em}
.ac[data-layout=frame] .ac-hp{color:#fff;font-size:5.6cqw;text-shadow:0 .3cqw .6cqw rgba(0,0,0,.45)}
.ac-hp small{font-size:.42em;letter-spacing:0}
.ac-type{position:absolute;right:5.2%;top:4%;width:8.2cqw;height:8.2cqw}
.ac-bottom{position:absolute;left:6%;right:6%;display:flex;flex-direction:column;gap:2.2cqw}
.ac[data-layout=full] .ac-bottom{bottom:14.5%}
.ac[data-layout=frame] .ac-bottom{top:56.5%;bottom:14%;justify-content:center;gap:2.6cqw;left:9%;right:9%}
.ac-ability-head{display:flex;align-items:center;gap:1.4cqw;flex-wrap:wrap}
.ac-tag{display:inline-block;color:#fff;background:linear-gradient(90deg,#b9435c,#cb6681);border:.25cqw solid #f4a8b1aa;border-radius:3.4cqw 1cqw 1cqw 3.4cqw;
  padding:.6cqw 2.6cqw .5cqw;font-style:italic;letter-spacing:.03em;font-weight:800;font-size:3cqw;text-shadow:none;box-shadow:0 .3cqw 1cqw #0006}
.ac-ability-name{font-weight:850;font-size:4cqw}
.ac-text{font-size:2.85cqw;font-weight:600;line-height:1.2;margin-top:1cqw}
.ac-attack-head{display:flex;align-items:center;gap:1.4cqw;font-weight:900;font-size:4.6cqw;letter-spacing:-.03em;white-space:nowrap}
.ac-attack-head .ac-dmg{margin-left:auto;font-size:1.12em}
.ac-cost{display:flex;gap:.7cqw;flex:0 0 auto}
.ac-energy{width:4.8cqw;height:4.8cqw;flex:0 0 auto;display:block;filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.5))}
.ac-flavor{font-size:2.8cqw;font-style:italic;line-height:1.3;opacity:.85}
.ac-meta{position:absolute;left:8%;right:8%;bottom:7.2%;display:flex;justify-content:space-between;align-items:center;font-size:2.5cqw;font-weight:700;color:#fff;text-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.ac-meta span{display:flex;align-items:center;gap:1cqw}
.ac-meta .ac-energy{width:3.6cqw;height:3.6cqw}
.ac-rule{position:absolute;left:5.7%;right:5.7%;bottom:7.2%;border-radius:5cqw;background:linear-gradient(90deg,rgba(8,18,35,.9),rgba(62,85,104,.56),rgba(8,18,35,.9));
  box-shadow:0 .3cqw 1cqw #0008,inset 0 0 0 .25cqw #ffffff57;text-align:center;padding:.8cqw 1.4cqw 1cqw;font-size:2.45cqw;line-height:1.1;color:#f6f5f3}
.ac-rule b{font-style:italic}
.ac-footer{position:absolute;left:6%;right:6%;bottom:3.3%;display:flex;justify-content:space-between;align-items:center;gap:1cqw;font-size:2.3cqw;color:#dbe8e9}
.ac[data-layout=frame] .ac-footer{color:#fff;text-shadow:0 .2cqw .4cqw rgba(0,0,0,.5)}
.ac-footer .ac-rarity{display:flex;align-items:center}
.ac-rarity-icon{height:2.6cqw;width:auto;display:block;filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6))}
.ac-footer b{display:flex;align-items:center;gap:1cqw}
.ac-setlogo{height:3.6cqw;width:3.6cqw;display:block;filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.5))}
.ac-footer b{font-weight:800}

/* ---------- rim ---------- */
.ac-rim{inset:0;z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.75),inset 0 0 0 1.3cqw rgba(171,207,215,.36),inset 0 0 0 1.8cqw rgba(19,39,60,.55),inset 0 0 0 2.1cqw rgba(246,238,215,.35)}
.ac[data-layout=frame] .ac-rim{box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.7),inset 0 0 0 1.4cqw rgba(240,232,210,.9),inset 0 0 0 1.7cqw rgba(0,0,0,.25)}
.ac[data-rarity=uncommon] .ac-rim{box-shadow:inset 0 0 0 .3cqw #fff,inset 0 0 0 1.4cqw #c9d3db,inset 0 0 0 1.7cqw rgba(0,0,0,.25)}
.ac[data-rarity=gold] .ac-rim{box-shadow:inset 0 0 0 .3cqw #fff3c4,inset 0 0 0 1.5cqw #c99a2e,inset 0 0 0 2cqw #6b4a10,inset 0 0 0 2.3cqw #f6d27a}
.ac[data-rarity=gold]{--ink:#fff4d6}
.ac[data-rarity=gold] .ac-name,.ac[data-rarity=gold] .ac-hp{color:#ffe6a3}

/* ---------- effects ---------- */
.ac-tex{inset:0;width:100%;height:100%;z-index:5;background-size:100% 100%;mix-blend-mode:overlay;opacity:0}
.ac-tex.r{opacity:calc(var(--depth) * var(--tx-r) * 1.2)}
.ac-tex.l{opacity:calc(var(--depth) * var(--tx-l) * 1.2)}
.ac-tex.t{opacity:calc(var(--depth) * var(--tx-t) * 1.2)}
.ac-tex.b{opacity:calc(var(--depth) * var(--tx-b) * 1.2)}
.ac-foil{inset:0;z-index:6;mix-blend-mode:color-dodge;background-repeat:no-repeat;
  background-image:repeating-linear-gradient(115deg,#b0124f 0%,#c99a0a 4%,#1f9a48 8%,#1270b8 12%,#5f35b8 16%,#b0124f 20%),
    repeating-linear-gradient(125deg,transparent 0 3px,#fff6 3.8px 4.2px,transparent 5px 7px);
  background-size:220% 220%,105% 105%;background-position:var(--lx) var(--ly),center;
  opacity:calc(var(--reflect) * (.55 + .3 * var(--flash)));-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ac-sheen{inset:0;z-index:6;mix-blend-mode:soft-light;background:linear-gradient(110deg,transparent 4%,rgba(127,240,240,.1) 15%,rgba(244,202,152,.6) 28%,rgba(253,240,249,.55) 33%,rgba(192,160,246,.18) 40%,transparent 60%);
  background-size:250% 190%;background-position:var(--lx) var(--ly);opacity:calc(var(--reflect) * (.4 + .2 * var(--flash)))}
.ac-glints{inset:0;width:100%;height:100%;z-index:7;mix-blend-mode:screen;opacity:calc(var(--reflect) * .62);filter:hue-rotate(calc(var(--ax) * 90deg)) brightness(1.35)}
.ac-light{inset:0;z-index:8;mix-blend-mode:soft-light;background:radial-gradient(ellipse 62% 40% at 50% 50%,rgba(255,255,255,.61) 0%,rgba(221,252,255,.24) 24%,transparent 70%);
  background-size:230% 200%;background-position:var(--lx) var(--ly);opacity:calc(var(--reflect) * .5)}
/* rarity presets */
.ac[data-rarity=art_rare]{--depth:.5}
.ac[data-rarity=art_rare] .ac-foil,.ac[data-rarity=art_rare] .ac-glints{display:none}
.ac[data-rarity=gold] .ac-foil{background-image:repeating-linear-gradient(115deg,#6b4a00 0%,#ffd76a 5%,#a87a12 10%,#fff1b8 14%,#6b4a00 20%),
    repeating-linear-gradient(125deg,transparent 0 3px,#fff6 3.8px 4.2px,transparent 5px 7px);opacity:calc(var(--reflect) * (.5 + .3 * var(--flash)))}
.ac[data-rarity=gold]{--depth:1}
.ac[data-layout=frame] .ac-window .ac-foil{opacity:calc(var(--reflect) * (.38 + .25 * var(--flash)))}
.ac-frame-foil{inset:0;z-index:3;mix-blend-mode:color-dodge;opacity:calc(var(--reflect) * (.45 + .3 * var(--flash)));
  background-image:repeating-linear-gradient(115deg,#b0124f 0%,#c99a0a 4%,#1f9a48 8%,#1270b8 12%,#5f35b8 16%,#b0124f 20%),
    repeating-conic-gradient(from 0deg at 50% 50%,#fff3 0 2deg,transparent 2deg 9deg);
  background-size:220% 220%,9cqw 9cqw;background-position:var(--lx) var(--ly),0 0}
@media (prefers-reduced-motion:reduce){.ac-card{transition:none}}

/* ---------- controls ---------- */
.card-controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:center;width:100%;max-width:520px;font:12px/1.3 ui-sans-serif,-apple-system,sans-serif;color:#b3c0c7}
.card-controls .cc-buttons{display:flex;gap:8px}
.card-controls button{border:1px solid #ffffff38;background:#ffffff0a;border-radius:8px;color:#dce6e8;font:600 12px/1 inherit;padding:10px 12px;min-height:40px;cursor:pointer;touch-action:manipulation}
.card-controls button[aria-pressed=true]{background:#b6edea16;border-color:#8ed7df9c;color:#c5f5f1}
.card-controls label{display:flex;flex-direction:column;gap:6px;min-width:140px;flex:1}
.card-controls .cc-head{display:flex;justify-content:space-between}
.card-controls input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:-12px 0;background:linear-gradient(90deg,#9fdcdb var(--fill,50%),#5d6d7a var(--fill,50%)) center / 100% 3px no-repeat;touch-action:none;cursor:pointer}
.card-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;background:#e3f6f3;border:3px solid #678995;border-radius:50%}
.card-controls input[type=range]::-moz-range-thumb{width:13px;height:13px;background:#e3f6f3;border:3px solid #678995;border-radius:50%}