/* Animated collectible cards */
.hand-section{margin-top:35px}.hand{gap:20px;perspective:1200px;padding:9px 0 15px}.skill{--card-color:#ffd586;--card-soft:#aa772e;--rx:0deg;--ry:0deg;--light-x:50%;--light-y:35%;isolation:isolate;padding:0;min-height:390px;border:1px solid #c19b586b;border-radius:15px;background:#101821!important;overflow:visible;transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 14px 24px #0007,0 0 0 3px #060c13,0 0 0 4px #ffffff0c;transition:transform .18s ease-out,box-shadow .2s,filter .25s;opacity:1!important}.skill[data-kind=bull]{--card-color:#75ffbd;--card-soft:#168c63}.skill[data-kind=shield]{--card-color:#94cbff;--card-soft:#396fe2}.skill[data-kind=top]{--card-color:#ff95b0;--card-soft:#b3265a}.skill:hover:not(:disabled),.skill:focus-visible{transform:perspective(800px) translateY(-13px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.025);box-shadow:0 22px 35px #0009,0 0 0 3px #060c13,0 0 0 4px var(--card-soft),0 0 28px color-mix(in srgb,var(--card-color) 18%,transparent);border-color:var(--card-color);z-index:3}.card-clip{display:flex;flex-direction:column;width:100%;height:100%;flex:1;border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(155deg,#182332,#0b1019 90%)}.card-clip:after{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at var(--light-x) var(--light-y),#ffffff1a,transparent 55%);z-index:4;opacity:.4;transition:opacity .2s}.skill:hover .card-clip:after{opacity:1}.skill-top{padding:14px 15px 0;position:absolute;top:0;left:0;z-index:5;font-size:11px;color:#ecf3fa;text-shadow:0 2px 5px #000;letter-spacing:2px;align-items:flex-start;gap:8px;flex-wrap:nowrap}.card-rarity{display:flex;flex-direction:column;gap:4px}.card-rarity small{color:var(--card-color);font-size:11px;letter-spacing:1px}.cost{display:grid;place-items:center;min-width:32px;height:36px;padding:0 7px;background:linear-gradient(145deg,#283545,#080e18);border:1px solid var(--card-color);border-radius:9px;color:#fff4d7;font-size:19px;font-weight:700;box-shadow:0 2px 12px #0008}.card-art{display:block;width:100%;height:205px;position:relative;overflow:hidden;background:#101821}.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#02071066,transparent 30%,transparent 65%,#111925)}.card-art img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:card-breathe 6s ease-in-out infinite;animation-play-state:paused;will-change:transform}.skill.in-view .card-art img,.skill.in-view .card-scan,.skill.in-view .card-mote{animation-play-state:running}.skill:nth-child(2) .card-art img{animation-delay:-2s}.skill:nth-child(3) .card-art img{animation-delay:-4s}.skill:nth-child(4) .card-art img{animation-delay:-1s}.card-scan{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 43%,#fff0 46%,#ffffff21 50%,transparent 55%);transform:translateX(-50%);animation:card-holo 7s ease-in-out infinite;animation-play-state:paused;z-index:3;mix-blend-mode:screen;pointer-events:none}.skill:nth-child(2) .card-scan{animation-delay:-1.4s}.skill:nth-child(3) .card-scan{animation-delay:-3s}.skill:nth-child(4) .card-scan{animation-delay:-4.6s}.card-mote{position:absolute;bottom:20%;left:var(--mote-x);width:3px;height:3px;background:var(--card-color);box-shadow:0 0 9px var(--card-color);border-radius:50%;animation:card-embers 3.5s linear infinite;animation-delay:var(--mote-delay);animation-play-state:paused;z-index:2}.card-body{position:relative;display:flex;flex-direction:column;flex:1;padding:0 17px 16px;text-align:left}.card-number{font-size:10px;letter-spacing:3px;color:var(--card-color);margin:0 0 3px}.skill-name{font-size:23px;letter-spacing:1px;color:#f7f1df;font-weight:600}.card-divider{height:1px;background:linear-gradient(90deg,var(--card-color),#ffffff0c);margin:11px 0}.skill-desc{font-size:13px;line-height:1.75;color:#c3cddb;min-height:67px;margin:0}.skill-footer{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1px;color:var(--card-color);padding-top:15px;border-top:1px solid #ffffff0d;margin-top:13px}.skill-footer:after{content:'◆';font-size:10px}.skill:disabled{filter:saturate(.55);cursor:not-allowed}.skill:disabled .card-clip{background:#101620}.skill:disabled .card-art img{filter:brightness(.55)}.skill:disabled .skill-desc{color:#a6b0be}.skill.used{filter:none;border-color:var(--card-color);box-shadow:0 0 0 3px #060c13,0 0 0 4px var(--card-soft)}.skill.used .card-art img{filter:brightness(.65) saturate(.6)}.skill.used .skill-footer{color:var(--card-color)}.skill.used .card-clip:before{content:'已部署';position:absolute;top:108px;left:50%;transform:translateX(-50%) rotate(-9deg);z-index:6;padding:4px 18px;background:#09101ae6;border:1px solid var(--card-color);color:var(--card-color);font-size:15px;letter-spacing:3px;white-space:nowrap}.card-idle-controls{display:flex;justify-content:flex-end;padding:0 0 9px}.card-idle-controls button{background:transparent;color:#acbbcd;border:0;padding:6px;font-size:12px}.card-idle-controls button[aria-pressed=true]{color:#e9bd68}.cards-paused .card-art img,.cards-paused .card-scan,.cards-paused .card-mote{animation-play-state:paused!important}.skill:disabled .card-scan,.skill:disabled .card-mote{animation-play-state:paused!important}
/* Different visual signatures for the four skills */
.skill[data-kind=cross] .card-scan{background:linear-gradient(125deg,transparent 42%,#fff4c044 46%,#fff6 49%,transparent 53%)}.skill[data-kind=bull] .card-mote{height:18px;width:2px;border-radius:0;animation-name:card-rising}.skill[data-kind=shield] .card-scan{inset:0;border:1px solid #86cfff50;border-radius:50%;background:none;animation:shield-wave 4s ease-out infinite;animation-play-state:paused}.skill[data-kind=top] .card-mote{width:5px;height:8px;border-radius:0;animation-name:card-falling}
@keyframes card-breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.035) translateY(-.5%)}}@keyframes card-holo{0%,45%{transform:translateX(-65%) rotate(-5deg);opacity:0}55%{opacity:1}80%,100%{transform:translateX(65%) rotate(-5deg);opacity:0}}@keyframes card-embers{0%{transform:translateY(15px);opacity:0}25%{opacity:.85}100%{transform:translate(14px,-110px);opacity:0}}@keyframes card-rising{0%{transform:translateY(35px) rotate(25deg);opacity:0}35%{opacity:.8}100%{transform:translate(25px,-130px) rotate(25deg);opacity:0}}@keyframes card-falling{0%{transform:translate(20px,-120px) rotate(20deg);opacity:0}30%{opacity:.75}100%{transform:translate(-10px,30px) rotate(70deg);opacity:0}}@keyframes shield-wave{0%{transform:scale(.2);opacity:.7}85%,100%{transform:scale(1.3);opacity:0}}
/* Summoning and impact */
#combat-fx{--hit:#ffd586}.fx-art{position:relative;z-index:1;display:none;width:clamp(130px,20vw,250px);height:clamp(170px,26vw,310px);flex-shrink:0;border:2px solid var(--hit);border-radius:14px;overflow:hidden;box-shadow:0 0 45px color-mix(in srgb,var(--hit) 35%,transparent),0 15px 45px #000a;transform:rotate(-8deg);background:#0b1521}.fx-art img{width:100%;height:100%;object-fit:cover}.fx-art:after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,#fff4,transparent 38%,transparent 70%,#fff2)}.card-cast .fx-art{display:block;animation:summon-card 1.1s both}.card-cast .fx-message{width:min(55vw,560px);animation:summon-copy 1.1s both}.card-cast{background:radial-gradient(ellipse at center,#030811d4,transparent 72%)}.card-cast #fx-title{font-size:clamp(30px,5vw,65px)}.card-cast #fx-value{font-size:clamp(32px,6vw,66px)}#combat-fx[data-kind=bull]{--hit:#75ffbd}#combat-fx[data-kind=shield]{--hit:#94cbff}#combat-fx[data-kind=top]{--hit:#ff95b0}#combat-fx.charge{background:radial-gradient(ellipse,#050911c4,transparent 70%)}.impact{background:radial-gradient(ellipse,color-mix(in srgb,var(--hit) 12%,transparent),transparent 60%)}.impact:before{content:'';position:absolute;width:150vw;height:2px;background:var(--hit);box-shadow:0 0 30px 5px var(--hit);transform:rotate(-16deg);animation:impact-slash .6s both}.guard.impact:before{height:180px;width:180px;border:2px solid var(--hit);border-radius:50%;background:transparent;box-shadow:0 0 35px var(--hit);animation:shockwave .8s ease-out both}.loss .fx-message{filter:drop-shadow(0 0 20px #e9325030)}#result{overflow:hidden;border-color:#b29454;background:radial-gradient(ellipse at top,#493b2450,#111b29 65%);box-shadow:0 0 70px #0008}#result[open]{animation:result-reveal .6s both}#result .final-equity{font-size:clamp(30px,6vw,48px);font-weight:600;text-shadow:0 0 25px #e9bd6830}.still .fx-art{animation:none!important}.still:before{display:none}.still .fx-message{animation:none!important}.motion-off .skill{transform:none!important}.motion-off .card-cast .fx-art{animation:none}
@keyframes summon-card{0%{opacity:0;transform:translate(50px,180px) rotate(20deg) scale(.35)}25%,75%{opacity:1;transform:translate(0,0) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-10px,-30px) rotate(-12deg) scale(1.04)}}@keyframes summon-copy{0%{opacity:0;transform:translateX(-20px)}25%,75%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateY(-20px)}}@keyframes impact-slash{0%{opacity:0;scale:.1 1}20%{opacity:.65;scale:1 1}100%{opacity:0;scale:1 1}}@keyframes result-reveal{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:1000px){.hand{gap:14px}.skill{min-height:390px}.card-art{height:175px}.card-body{padding:0 13px 13px}.skill-name{font-size:20px}.skill-top{padding:12px 11px}.card-rarity{letter-spacing:1px}}@media(max-width:740px){.hand{gap:16px 12px}.skill{min-height:355px}.card-art{height:175px}.skill-top{font-size:10px;gap:3px}.card-rarity small{font-size:10px}.cost{min-width:28px;height:31px;font-size:17px}.skill-desc{font-size:12px;min-height:80px}.skill-name{font-size:20px;letter-spacing:0}.card-number{font-size:9px;letter-spacing:2px}.skill-footer{letter-spacing:0;font-size:10px}.card-cast{gap:0;flex-direction:column}.card-cast .fx-art{height:200px;width:160px}.card-cast .fx-message{width:95vw;padding:18px 10px}.card-cast #fx-kicker{font-size:11px}.card-cast #fx-caption{font-size:13px}}@media(max-width:360px){.card-art{height:145px}.card-body{padding:0 10px 12px}.skill-name{font-size:18px}.card-rarity{font-size:9px}.card-rarity small{font-size:9px}.skill-desc{min-height:105px}.skill-top{padding:10px 8px}.skill-footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.card-art img,.card-scan,.card-mote,.fx-art,.fx-message,#result[open],.impact:before{animation:none!important}.skill{transform:none!important}.card-mote,.card-scan,.impact:before{display:none}}

.card-art{height:auto;aspect-ratio:1}.card-art img{object-fit:contain;transform:scale(1)}.fx-art img{object-fit:contain}.fx-art{background:#080e17}