/* One card face across the hand, catalogue, shop, rewards and upgrade previews.
   Frame shape encodes ownership; metal tint and the central gem encode rarity. */
body .hand-card.card-surface[data-rarity]{
 --frame:#b7aebd;--frame-bright:#e2d8e7;--frame-dark:#55505f;--gem:#e2d3ed;--jewel-ink:#413149;--glow:#bba8d32b;
 --paper:#d6cedc;--ink:#eee7f2;--name-ink:#302735;
 position:relative;container-type:inline-size;isolation:isolate;overflow:visible;padding:0;
 border:0;border-radius:3px;background:linear-gradient(145deg,#22202b,#100e18 73%);color:var(--ink);
 box-shadow:0 8px 18px #06040bcc,0 0 8px var(--glow);text-shadow:none;
}
body .hand-card.card-surface[data-tier=uncommon]{--frame:#608bc9;--frame-bright:#b8d5ff;--frame-dark:#243e74;--gem:#60b9ff;--jewel-ink:#142d62;--glow:#3c87ff43}
body .hand-card.card-surface[data-tier=rare]{--frame:#b568c9;--frame-bright:#f2c9ff;--frame-dark:#612976;--gem:#d075fc;--jewel-ink:#512263;--glow:#cf56ff42}
body .hand-card.card-surface[data-tier=legendary]{--frame:#d4a35e;--frame-bright:#ffe1ae;--frame-dark:#835027;--gem:#ffb74f;--jewel-ink:#61401c;--glow:#ffb54c4d}
body .hand-card.card-surface[data-tier=special]{--frame:#8e849a;--frame-bright:#cfbedc;--frame-dark:#51465b;--gem:#b2a1c4;--jewel-ink:#382c43;--glow:#a795c12a}
body .hand-card.card-surface.neutral-card{--paper:#e7e2ec;--name-ink:#302a38;--ink:#302a38;--rarity-ink:#55465e;background:linear-gradient(110deg,#aaa0b5 0%,#211d29 8%,#17141f 89%,#a99db2);box-shadow:0 8px 18px #050409b0,0 0 0 1px #d5c9db57,0 0 8px var(--glow)}
/* Silver paper needs dark ink; keep the brighter gemstone and frame accents. */
body .hand-card.card-surface.neutral-card[data-tier=uncommon]{--rarity-ink:#254d7a}
body .hand-card.card-surface.neutral-card[data-tier=rare]{--rarity-ink:#713689}
body .hand-card.card-surface.neutral-card[data-tier=legendary]{--rarity-ink:#75451d}
body .hand-card.card-surface.neutral-card[data-rarity] .card-copy p{ text-shadow:none }
body .hand-card.card-surface.neutral-card[data-rarity] .card-hotkey{color:var(--ink);opacity:1}
body .hand-card.card-surface.luneth-card{background:linear-gradient(120deg,#0d0b13,#221b2a 42%,#100b19);box-shadow:0 8px 18px #050409cc,0 0 10px var(--glow)}
body .hand-card.card-surface[data-rarity]:before,body .hand-card.card-surface[data-rarity]:after{display:none}
body .hand-card.card-surface[data-rarity] .card-illustration{position:absolute;inset:2% 2% auto;height:52%;border:0;border-radius:7px 7px 0 0;opacity:1;mask-image:none;background-size:cover;background-position:center;filter:none;z-index:0}
body .hand-card.card-surface.neutral-card .card-illustration{inset-inline:2%;border-radius:7px 7px 0 0}
body .hand-card.card-surface[data-rarity] .card-illustration:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07050d10,transparent 62%,#16101f68);opacity:1}
body .card-surface .card-frame-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:5;pointer-events:none;overflow:visible;color:var(--frame);filter:drop-shadow(0 1px 1px #000)}
body .hand-card.card-surface[data-rarity] .card-cost{position:absolute;inset:-2% auto auto -3%;width:20%;height:auto;aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid var(--frame-bright);border-radius:50%;font:clamp(23px,15cqw,35px)/1 Georgia,serif;color:#f9efff;background:radial-gradient(circle at 35% 24%,var(--frame-dark),#181425 72%);box-shadow:0 0 0 2px #13101ddd,0 0 0 3px var(--frame),inset 0 0 0 3px #dcd0ed20,0 2px 5px #0008;text-shadow:0 1px 4px #0006;z-index:9}
body .hand-card.card-surface[data-rarity] .card-cost:before{content:'';position:absolute;inset:-13%;border:1px solid var(--frame);border-radius:38%;transform:rotate(32deg);opacity:.65;pointer-events:none}
body .hand-card.card-surface[data-rarity] .card-copy{position:absolute;inset:0;display:block;margin:0;padding:0;background:none;color:var(--ink);z-index:6;pointer-events:none;min-height:0}
body .hand-card.card-surface[data-rarity] .card-copy h3{position:absolute;top:52%;left:5%;right:5%;inset-inline:5%;height:8%;margin:0;padding:0 3%;display:flex;align-items:center;justify-content:center;min-height:0;border:0;border-top:1px solid var(--frame-bright);border-bottom:1px solid var(--frame);border-radius:0;background:linear-gradient(100deg,#9d8ca7,var(--paper) 24%,var(--paper) 73%,#9b8ba7);box-shadow:0 3px 6px #0006;color:var(--name-ink);font:clamp(11px,6.5cqw,17px)/1.2 'SimSun','Noto Serif SC',serif;font-weight:600;letter-spacing:1px;white-space:nowrap;text-shadow:none;transform:none;overflow:visible}
body .hand-card.card-surface[data-rarity] .card-copy h3:before,body .hand-card.card-surface[data-rarity] .card-copy h3:after{content:'';position:absolute;top:14%;bottom:-9%;width:6%;z-index:-1;border:1px solid var(--frame);background:#8b7a95;box-shadow:0 2px 2px #0004}
body .hand-card.card-surface[data-rarity] .card-copy h3:before{left:-3%;clip-path:polygon(0 0,100% 8%,100% 100%,0 88%,25% 48%)}
body .hand-card.card-surface[data-rarity] .card-copy h3:after{right:-3%;clip-path:polygon(0 8%,100% 0,75% 48%,100% 88%,0 100%)}
body .hand-card.card-surface[data-rarity] .card-copy p{position:absolute;inset:67% 8% 11.5%;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;min-height:0;font:clamp(9px,5.6cqw,13px)/1.55 'SimSun','Noto Serif SC',serif;letter-spacing:.15px;text-align:center;color:var(--ink);text-shadow:0 1px 2px #08050d;overflow:visible;word-break:normal;overflow-wrap:anywhere}
body .hand-card.card-surface[data-rarity] .card-jewel{position:absolute;top:59.5%;left:50%;right:auto;bottom:auto;width:14px;height:20px;transform:translateX(-50%);display:grid;place-items:center;z-index:7;color:var(--gem);filter:drop-shadow(0 0 4px var(--glow));pointer-events:auto}
body .hand-card.card-surface[data-rarity] .card-jewel:before{content:'';position:absolute;inset:3px 2px;transform:rotate(45deg);background:var(--jewel-ink);border:1px solid var(--frame-bright);z-index:-1;box-shadow:0 0 6px var(--glow)}
body .hand-card.card-surface[data-rarity] .card-jewel .ui-icon{width:14px;height:20px;stroke-width:1.1}
body .hand-card.card-surface[data-rarity] .card-type{position:absolute;inset:auto 19% 4.8%;height:5.4%;min-height:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;margin:0;z-index:7;background:linear-gradient(90deg,transparent,#16111fd9 22%,#16111fd9 78%,transparent);border:0;border-top:1px solid var(--frame-dark);border-bottom:1px solid var(--frame-dark);clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);color:#dbcede;font:clamp(9px,4.8cqw,12px)/1 'SimSun',serif;letter-spacing:3px;text-align:center;white-space:nowrap}
body .hand-card.card-surface[data-rarity] .card-type i{font:9px Georgia;color:var(--frame-bright);letter-spacing:0}
body .hand-card.card-surface[data-rarity] .card-affiliation{position:absolute;top:7%;right:10%;font:7px/1.2 'SimSun',serif;letter-spacing:1px;color:#e6d3ee;z-index:3;opacity:.75;text-shadow:0 1px 4px #000;background:#110b197a;padding:3px 4px;border-bottom:1px solid var(--frame-dark);pointer-events:none}
body .hand-card.card-surface[data-rarity] .card-hotkey{inset:auto auto 5% 7%;font:8px Georgia;color:#bfa8cc;background:none;border:0;opacity:.8;z-index:8}
body .hand-card.card-surface[data-rarity] .card-bottom{position:absolute;inset:auto -4% -27px;height:19px;margin:0;padding:0;display:block;min-height:0;border:0;background:none;font:10px/19px 'SimSun',serif;letter-spacing:1px;color:#c7b5d5;text-align:center;white-space:nowrap;pointer-events:none}
body.in-battle .fan-hand .card-surface[data-rarity]{position:absolute}
body.in-battle .fan-hand .card-surface .card-bottom{display:none}
body.in-battle .fan-hand .card-surface.swap-selected .card-bottom{display:block;inset:43% 0 auto;height:22px;line-height:22px;background:#39204cec;color:#fff0ff;border-block:1px solid #dfbafa;z-index:12}
body .hand-card.card-surface[data-rarity]:hover:enabled,body .hand-card.card-surface[data-rarity]:focus-visible{box-shadow:0 0 0 1px var(--frame-bright),0 0 17px var(--glow),0 12px 26px #000a;outline:1px solid var(--frame-bright);outline-offset:3px}
body .hand-card.card-surface[data-rarity]:hover:enabled .card-frame-art{filter:drop-shadow(0 0 3px var(--glow))}
body .hand-card.card-surface[data-rarity]:disabled{opacity:.78;filter:saturate(.65)}
body .reward-cards .card-surface{margin-bottom:30px}
body .catalog-card .card-surface{width:204px;height:306px;min-width:0;min-height:0;flex:none;margin:10px auto 28px;cursor:default}
body .catalog-card .hand-card.card-surface[data-rarity] .card-bottom{display:none}
body .catalog-card{overflow:visible;border:0;background:none;box-shadow:none;padding:0 6px}
body .catalog-card:after{display:none}
body .catalog-copy{padding:0 10px 15px;color:#bcaacb;background:none;border:0}
body .catalog-card-meta{font:11px/1.7 'SimSun',serif;letter-spacing:1px;text-align:center;color:#d5c5e2;padding:9px 0;border-top:1px solid #a286b347;margin-bottom:8px}
body .catalog-copy>small{display:block;font-size:10px;line-height:1.7;color:#a994b9}
body .catalog-copy details{border:0;margin:10px 0;font-size:11px}
body .catalog-copy summary{color:#cbb5dd}
body .catalog-copy details p{font-size:11px;line-height:1.8}
body .catalog-original{font-size:10px;color:#bfa9d0;margin-top:8px}
body .neutral-catalog-grid{gap:25px 18px;align-items:start}
body .shop-cards .shop-item{padding-bottom:18px}
body .flow-upgrade-pair .card-surface .card-bottom,body .front-card-detail .card-surface .card-bottom{color:#dac6e9}
@media(max-width:700px){
 body.in-battle .fan-hand .card-surface[data-rarity]{position:relative}
 body.in-battle .hand-card.card-surface[data-rarity] .card-copy p{font-size:9px;line-height:1.45;inset:67% 8% 11.5%;letter-spacing:0}
 body .hand-card.card-surface[data-rarity] .card-cost{font-size:clamp(22px,15cqw,29px)}
 body .hand-card.card-surface[data-rarity] .card-affiliation{font-size:6px;padding:2px;letter-spacing:0}
 body .hand-card.card-surface[data-rarity] .card-jewel{width:11px;height:15px;top:60%}
 body .hand-card.card-surface[data-rarity] .card-jewel .ui-icon{width:11px;height:15px}
 body .hand-card.card-surface[data-rarity] .card-jewel:before{inset:2px}
 body .hand-card.card-surface[data-rarity] .card-type{font-size:9px;letter-spacing:2px}
 body .hand-card.card-surface[data-rarity] .card-bottom{font-size:9px;letter-spacing:0}
 body .catalog-card .card-surface{width:220px;height:330px;margin-top:14px;margin-bottom:23px}
 body .catalog-copy{max-width:250px;margin:0 auto;padding:0 8px 16px}
 body .front-card-detail .hand-card.card-surface[data-rarity] .card-copy h3{font-size:10px;letter-spacing:0}
 body .front-card-detail .hand-card.card-surface[data-rarity] .card-copy p{font-size:10px!important;line-height:1.45;inset-inline:8%;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){body .card-surface,body .card-surface *{transition:none!important}}

/* Generated PNGs provide all perimeter ornament. Keep the art window clear. */
body .hand-card.card-surface.neutral-card{background:var(--paper);box-shadow:0 8px 18px #050409b0,0 0 8px var(--glow)}
body .hand-card.card-surface[data-rarity] .card-illustration:after{background:linear-gradient(180deg,transparent 78%,#16101f38)}
body .hand-card.card-surface[data-rarity] .card-copy h3:before,body .hand-card.card-surface[data-rarity] .card-copy h3:after{display:none}
body .hand-card.card-surface[data-rarity] .card-copy h3{box-shadow:0 2px 4px #0005;font-weight:500;letter-spacing:.5px;background:linear-gradient(90deg,#b4a8bc,var(--paper) 25%,var(--paper) 75%,#b4a8bc)}
body .hand-card.card-surface[data-rarity] .card-affiliation{display:none}
body .hand-card.card-surface[data-rarity] .card-jewel{top:60.6%;height:5%;width:auto;min-width:42px;display:flex;gap:4px;align-items:center;justify-content:center;filter:none}
body .hand-card.card-surface[data-rarity] .card-jewel:before{display:none}
body .hand-card.card-surface[data-rarity] .card-jewel .ui-icon{width:10px;height:15px;flex:none}
body .hand-card.card-surface[data-rarity] .rarity-label{font:8px/1 'SimSun',serif;letter-spacing:1px;color:var(--gem);white-space:nowrap}
body .hand-card.card-surface.neutral-card[data-rarity] .rarity-label{color:var(--rarity-ink);font-weight:600;text-shadow:none}
body .hand-card.card-surface[data-rarity] .card-type{inset-inline:12%;letter-spacing:1px;gap:0;border-color:#a59aad36}
body .hand-card.card-surface[data-rarity] .card-type small{font:inherit;color:#b4a5bf}
body .hand-card.card-surface.neutral-card .card-type{color:#f0eaf3}
body .hand-card.card-surface.neutral-card[data-rarity] .card-type small{color:#e5dcea}
body .hand-card.card-surface[data-rarity] .card-cost{width:18%;inset:-1% auto auto -2%;box-shadow:0 0 0 2px #13101ddd,0 0 0 2.5px var(--frame),inset 0 0 0 2px #dcd0ed20,0 2px 5px #0008}
body .hand-card.card-surface[data-rarity] .card-cost:before{display:none}
body .hand-card.card-surface[data-rarity] .card-frame-art{filter:drop-shadow(0 1px 1px #0006)}