/* The card is a physical collectible: portrait, foil, engraved frame, crest and nameplate. */
.character-card{--foil-x:50%;--foil-y:35%;--tilt-x:0deg;--tilt-y:0deg;--rank-shadow:.14;aspect-ratio:500/720;border:0;border-radius:12px;background:var(--rare-deep);overflow:hidden;isolation:isolate;transform:perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 5px 9px #0007,0 0 0 1px #ffffff0a,0 0 19px rgba(var(--rare-rgb),var(--rank-shadow));container-type:inline-size;transition:transform .22s ease,box-shadow .3s ease;will-change:auto}
.character-card:before{content:'';position:absolute;inset:10px;border:1px solid rgba(var(--rare-rgb),.3);border-radius:5px;z-index:9;pointer-events:none}
.character-card:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,#07090efc 0%,#07090ef5 12%,#080a10ea 24%,#080a10b3 35%,#07090e15 59%,#0000000d 75%,#0006 100%)}
.character-card:hover{transform:perspective(850px) translateY(-6px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 16px 30px #000a,0 0 0 1px rgba(var(--rare-rgb),.4),0 0 27px rgba(var(--rare-rgb),.3)}
.character-card .card-art{position:absolute;inset:8px;overflow:hidden;border-radius:7px;z-index:0;background:#101219}
.character-card .card-portrait{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 19%;z-index:0;filter:saturate(.92) contrast(1.05);transition:transform .8s,filter .5s}
.character-card:hover .card-portrait{transform:scale(1.04);filter:saturate(1.06) contrast(1.07)}
.character-card .card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:8;pointer-events:none;filter:none}
.card-foil,.card-sheen,.card-starscape{position:absolute;inset:0;pointer-events:none;z-index:2}
.card-foil{opacity:0;background:linear-gradient(135deg,transparent 30%,rgba(var(--rare-rgb),.15) 52%,transparent 74%);mix-blend-mode:screen}
.card-sheen{z-index:7;opacity:0;background:linear-gradient(120deg,transparent 18%,#ffffff0a 38%,#ffffff45 48%,#ffffff05 57%,transparent 67%);background-size:270% 180%;background-position:100% 100%;mix-blend-mode:screen;transition:opacity .3s}
.character-card:hover .card-sheen{opacity:.65;animation:card-sheen-pass 1.5s ease-out both}
.character-card .card-top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 15px!important}
.rank-crest{width:45px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#09101cf2,var(--rare-deep));border:1px solid var(--rare);border-radius:3px 3px 12px 12px;box-shadow:inset 0 1px 0 #ffffff75,0 2px 9px #000a;color:var(--rare);position:relative;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.rank-crest small{font:600 5px/1 'DM Sans',Arial,sans-serif;letter-spacing:1.4px;color:#e4e2e4;opacity:.72;margin-top:0}
.rank-crest b{font:700 34px/.92 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-1px;margin:4px 0 1px;color:var(--rare);text-shadow:0 0 12px rgba(var(--rare-rgb),.5)}
.rank-crest i{font-style:normal;font-size:4px;letter-spacing:1px;margin-bottom:6px;white-space:nowrap}
.card-top-right{display:flex;flex-direction:column;gap:6px;align-items:center}.card-world-seal{font-family:Georgia,serif;display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(var(--rare-rgb),.7);background:#090c12b8;box-shadow:inset 0 0 10px rgba(var(--rare-rgb),.16);border-radius:50%;font-size:18px;color:var(--rare)}
.character-card .card-level{position:static;font:500 7px 'DM Sans',Arial,sans-serif;letter-spacing:.5px;background:#080b12d9;color:#f3f2f5;padding:3px 5px;border-radius:2px;border:1px solid #ffffff20}
.character-card .equipped-label{position:absolute;top:88px;right:15px;background:#10141bd9;border:1px solid rgba(var(--rare-rgb),.5);color:var(--rare);font-size:5px;letter-spacing:.7px;padding:3px 5px;z-index:10}
.character-card .card-copy{position:absolute;left:0;right:0;bottom:0;padding:0 17px 14px;z-index:10;display:block}
.character-card .card-universe{display:block;font-size:6px;letter-spacing:1.8px;color:#e0dbe6;opacity:.8;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-card .card-name{display:block;font:600 clamp(18px,13cqw,42px)/.94 'Barlow Condensed','Arial Narrow',Impact,sans-serif;letter-spacing:.1px;text-transform:uppercase;margin:5px 0 0;color:#f7f5f5;text-shadow:0 2px 6px #000;overflow-wrap:normal}
.card-epithet{font-size:6px;line-height:1.5;color:#b7b0bf;display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-rank-strip{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px;padding-top:6px;border-top:1px solid rgba(var(--rare-rgb),.45);color:var(--rare)}
.card-rank-strip>span{font-size:5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}.card-rank-strip i{font-size:5px;letter-spacing:1px;font-style:normal;white-space:nowrap}
.character-card .card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:0;border:0;margin:7px 0 0;color:inherit}
.character-card .card-stats>span{border:1px solid rgba(var(--rare-rgb),.19);background:linear-gradient(145deg,rgba(var(--rare-rgb),.09),#0a0d1300);display:flex;align-items:center;justify-content:center;gap:4px;border-radius:2px;padding:5px 1px}
.character-card .card-stats small{font-size:5px;letter-spacing:.5px;color:#a8a5af}
.character-card .card-stats b{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:14px;line-height:1;color:#f7f2fb;margin:0;font-weight:600}
.card-foot{display:flex;justify-content:space-between;font-size:4px;letter-spacing:.9px;text-transform:uppercase;color:#96939d;margin-top:7px}
.character-card .locked-tag{display:block;margin:9px 0 8px;font-size:5px;letter-spacing:1.1px;color:#a19da7}
.character-card.card-locked{--rank-shadow:0}.character-card.card-locked .card-portrait{filter:grayscale(.35) contrast(1.02);opacity:.72}.character-card.card-locked .card-foil{opacity:.1}.character-card.card-locked .card-frame{opacity:.68}.character-card.card-locked:hover .card-frame{opacity:1}.character-card.card-locked .card-name{color:#c6c0cd}.character-card.card-locked .card-starscape{display:none}
.card-rank-D{--rank-shadow:0}.card-rank-D .rank-crest{border-color:#77818e;background:linear-gradient(130deg,#404852,#111820)}.card-rank-D .card-rank-strip{border-top-style:solid;color:#a5aab3}.card-rank-D .card-portrait{filter:saturate(.65) contrast(1.05)}
.card-rank-C{--rank-shadow:.1}.card-rank-C .card-foil{opacity:.3;background:linear-gradient(130deg,#4ce7a026,transparent 33%),linear-gradient(310deg,#4ce7a026,transparent 35%)}.card-rank-C .rank-crest{background:linear-gradient(145deg,#1f6950,#081b15);border-color:#79ecb2}
.card-rank-B{--rank-shadow:.16}.card-rank-B .card-foil{opacity:.58;background:repeating-linear-gradient(130deg,transparent 0 32px,#88ccff1f 33px,#5ba9ff08 35px,transparent 36px 65px),linear-gradient(145deg,#5dbeff35,transparent 45%)}.card-rank-B .rank-crest{background:linear-gradient(135deg,#85d8ff,#173c7c 18%,#0c1d3a 70%,#3b76a8);border-color:#91caff}.card-rank-B .card-name{text-shadow:0 0 13px #2f7ad54d,0 2px 5px #000}
.card-rank-A{--rank-shadow:.22}.card-rank-A .card-foil{opacity:.55;background:radial-gradient(ellipse at var(--foil-x) var(--foil-y),#ffcc6c40,transparent 45%),repeating-linear-gradient(145deg,transparent 0 16px,#ffdb9410 17px 18px,transparent 19px 30px)}.card-rank-A .rank-crest{background:linear-gradient(135deg,#fff0b0 0%,#a25b16 15%,#301807 40%,#67340d 73%,#ffd37b);border:2px solid #ffd27e;width:48px;height:69px}.card-rank-A .rank-crest b{color:#ffdf8e;font-size:37px}.card-rank-A .card-rank-strip{background:linear-gradient(90deg,#ffad3421,transparent);padding-left:4px;padding-bottom:3px;border-color:#ffca6a}.card-rank-A .card-name{text-shadow:0 0 12px #ffa72f59,0 2px 5px #000}
.card-rank-S{--rank-shadow:.27}.card-rank-S .card-foil{opacity:.8;background:linear-gradient(65deg,transparent 30%,#ff204325 31%,transparent 33%,transparent 65%,#ff335635 66%,transparent 69%),radial-gradient(ellipse at 50% 60%,transparent 35%,#ef123b42 95%)}.card-rank-S .rank-crest{width:49px;height:72px;border:2px solid #ff6d7c;background:linear-gradient(140deg,#ff8692,#730623 15%,#1b0511 45%,#68041c 80%,#ff536c)}.card-rank-S .rank-crest b{color:#ff788a;font-size:40px;text-shadow:0 0 15px #ff0039}.card-rank-S .card-rank-strip{background:linear-gradient(90deg,#e816382b,#10030b);padding:5px 5px 3px;border-top:1px solid #ff5066;border-bottom:1px solid #6e1830}.card-rank-S .card-name{color:#fff0f2;text-shadow:0 0 15px #fb1c5c5c,0 2px 5px #000}.card-rank-S .card-world-seal{box-shadow:0 0 14px #ff1a4b55,inset 0 0 10px #8b0d2855}
.card-rank-X{--rank-shadow:.35;background:#3f1c6c;box-shadow:0 7px 14px #0009,0 0 2px #e8bdff,0 0 24px #ae4fff55,0 0 45px #782ed41f}
.card-rank-X:before{inset:15px;border-color:#e1aaff80;box-shadow:inset 0 0 15px #b75bff30}
.card-rank-X .card-foil{opacity:.7;background:conic-gradient(from 25deg at var(--foil-x) var(--foil-y),#8a2fff15,transparent 15%,#dfacff5c 23%,#802ee525 30%,transparent 38%,#d085ff4d 53%,#ae55ff17 60%,transparent 70%,#e9caff4d 86%,#7224bd15),radial-gradient(ellipse at 50% 10%,#dba8ff35,transparent 50%);background-size:160% 160%;animation:amethyst-foil 12s ease-in-out infinite alternate}
.card-rank-X .rank-crest{width:52px;height:76px;border:2px solid #dfacff;background:linear-gradient(135deg,#fff4ff,#c16eff 10%,#41166d 24%,#170722 45%,#3e125c 69%,#b66aff 88%,#eed0ff);box-shadow:0 0 20px #9b36ff,inset 0 0 15px #ba68ff4d}.card-rank-X .rank-crest b{font-size:43px;line-height:.88;color:#ead0ff;text-shadow:0 0 5px #c15aff,0 0 18px #8d24ff}.card-rank-X .rank-crest small{color:#f5ddff}.card-rank-X .card-name{color:#f7eaff;text-shadow:0 0 5px #b562ff77,0 0 18px #a63aff66,0 2px 4px #000}.card-rank-X .card-world-seal{border-color:#e5b8ff;background:linear-gradient(140deg,#61358bbd,#170724e8);box-shadow:0 0 16px #a841ff77,inset 0 0 13px #a852ff33}.card-rank-X .card-rank-strip{padding:5px 5px 3px;background:linear-gradient(100deg,#7b29cb70,#230c36c4,#7f38aa55);border-top:1px solid #e2b3ff;border-bottom:1px solid #713c9e;color:#ecd2ff}.card-rank-X .card-rank-strip>span{letter-spacing:1.3px}.card-rank-X .card-stats>span{border-color:#aa57e642;background:linear-gradient(140deg,#903add29,#190a23)}.card-rank-X .card-foot{color:#ae8ac1}
.card-starscape{z-index:6;overflow:hidden}.card-starscape i{position:absolute;width:2px;height:2px;top:calc(var(--py)*1%);left:calc(var(--px)*1%);background:var(--rare);border-radius:50%;box-shadow:0 0 5px var(--rare);opacity:.4}.card-starscape i:nth-child(3n){width:4px;height:4px;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);background:#f5dcff}.card-rank-X .card-starscape i{animation:star-breathe 4s calc(var(--i)*-.7s) ease-in-out infinite}.card-rank-A .card-starscape i{opacity:.25}
.mini-hero[data-rank]{border-left:2px solid var(--rare)}.mini-hero .rarity{font-weight:700}.combatant[data-rank="X"]{box-shadow:0 0 17px #a64dff45;border-color:#bf7aff}.combatant[data-rank="S"]{border-color:#e84c65}.combatant .rarity-badge{background:#080a10d9;border:1px solid var(--rare);padding:2px 6px;border-radius:3px;font-size:15px;box-shadow:0 0 10px rgba(var(--rare-rgb),.2);text-shadow:0 0 8px var(--rare)}
.rank-guide-button{font-size:10px;cursor:pointer;background:none;border:0;padding:0;color:#c29ce7;display:inline-flex;gap:7px;align-items:center}.rank-guide-button:hover{color:#e6c3ff}.collection-count-row{display:flex;justify-content:space-between;align-items:baseline;gap:15px}.rank-guide-intro{max-width:590px}.rank-guide-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:25px 0}.rank-guide-item{text-align:center;min-width:0}.rank-guide-item>strong{display:block;font:600 22px 'Barlow Condensed',sans-serif;color:var(--rare);margin-top:14px}.rank-guide-item>p{font-size:9px;line-height:1.6;margin-top:4px}.rank-guide-item>.button{font-size:7px;letter-spacing:.6px;padding:8px 5px;min-height:30px;width:100%;margin-top:12px}.rank-guide-note{font-size:10px!important;color:#96929e!important}.rank-guide-grid .card-epithet,.rank-guide-grid .card-foot{display:none}
.modal-detail{grid-template-columns:250px 1fr}.modal-detail .character-card .card-name{font-size:32px}.modal-detail .card-epithet{font-size:9px}.modal-detail .card-rank-strip>span{font-size:7px}.modal-detail .card-rank-strip i{font-size:7px}.modal-detail .card-stats b{font-size:19px}.modal-detail .card-stats small{font-size:7px}.modal-detail .card-universe{font-size:8px}.modal-detail .card-foot{font-size:6px}.modal-detail .rank-crest{transform:scale(1.18);transform-origin:top left}.modal-detail .card-top{padding:18px!important}.modal-detail .card-copy{padding:0 22px 19px}
.showcase-card .character-card:hover{transform:none}.showcase-card .card-epithet,.showcase-card .card-foot{display:none}.showcase-card .card-name{font-size:26px}.showcase-card .card-rank-strip>span{font-size:5px}.showcase-card .card-stats b{font-size:13px}.showcase-card .card-copy{padding:0 16px 14px}.team-slot .card-epithet,.team-slot .card-foot{display:none}
@keyframes card-sheen-pass{from{background-position:100% 100%}to{background-position:0 0}}
@keyframes amethyst-foil{from{background-position:5% 5%;filter:hue-rotate(-6deg)}to{background-position:95% 85%;filter:hue-rotate(9deg)}}
@keyframes star-breathe{0%,100%{opacity:.15;transform:scale(.65)}50%{opacity:.9;transform:scale(1.35)}}
@media(max-width:1200px){.cards-grid{gap:23px 18px}.rank-guide-grid{gap:10px}.character-card .card-copy{padding-left:14px;padding-right:14px}.rank-crest{width:40px;height:58px}.rank-crest b{font-size:30px}.card-rank-A .rank-crest{width:44px;height:63px}.card-rank-S .rank-crest{width:45px;height:66px}.card-rank-X .rank-crest{width:47px;height:69px}.card-rank-X .rank-crest b{font-size:38px}.card-rank-S .rank-crest b{font-size:36px}.card-rank-A .rank-crest b{font-size:33px}}
@media(max-width:900px){.rank-guide-grid{grid-template-columns:repeat(3,1fr);gap:24px 18px}.character-card .card-name{font-size:clamp(19px,12.5cqw,36px)}.character-card .card-epithet{display:none}.rank-guide-grid .character-card{max-width:180px;margin:auto}.modal-detail{grid-template-columns:215px 1fr}.modal-detail .character-card .card-name{font-size:28px}.collection-count-row{align-items:flex-start}.rank-guide-button{font-size:9px;white-space:nowrap}}
@media(max-width:620px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.character-card{border-radius:10px}.character-card .card-top{padding:12px!important}.character-card .card-copy{padding:0 14px 12px}.character-card .card-name{font-size:clamp(21px,13cqw,30px);margin-top:5px}.character-card .card-universe{font-size:5px;letter-spacing:1.2px}.character-card .card-epithet{display:block;font-size:6px}.character-card .card-stats{display:grid;gap:3px;margin-top:7px}.character-card .card-stats>span{padding:4px 1px;gap:3px}.character-card .card-stats small{font-size:4px}.character-card .card-stats b{font-size:13px}.character-card .card-rank-strip>span{font-size:5px;letter-spacing:1.2px}.character-card .card-rank-strip i{font-size:4px;letter-spacing:.8px}.character-card .card-foot{font-size:4px;margin-top:6px}.character-card .card-level{font-size:5px;padding:3px}.character-card .card-world-seal{height:24px;width:24px;font-size:15px}.character-card .equipped-label{top:78px;right:12px;font-size:4px;padding:3px}.rank-crest{width:37px;height:53px}.rank-crest b{font-size:28px}.rank-crest small{font-size:4px}.rank-crest i{font-size:3px}.card-rank-A .rank-crest{width:40px;height:58px}.card-rank-A .rank-crest b{font-size:31px}.card-rank-S .rank-crest{width:42px;height:60px}.card-rank-S .rank-crest b{font-size:33px}.card-rank-X .rank-crest{width:44px;height:63px}.card-rank-X .rank-crest b{font-size:35px}.rank-guide-grid{grid-template-columns:repeat(2,1fr);gap:24px 17px}.rank-guide-grid .character-card .card-name{font-size:23px}.rank-guide-grid .character-card .card-epithet,.rank-guide-grid .character-card .card-foot{display:none}.rank-guide-item>strong{font-size:22px}.rank-guide-item>p{font-size:9px}.rank-guide-item>.button{font-size:8px}.collection-count-row{display:block;margin-bottom:22px}.collection-count-row .collection-count{margin-bottom:9px}.modal-detail{grid-template-columns:1fr}.modal-detail>div:first-child{max-width:230px;width:100%;margin:0 auto 15px}.modal-detail .character-card .card-name{font-size:30px}.modal-detail .card-epithet{font-size:8px}.modal-detail .card-copy{padding:0 20px 18px}.modal-detail .card-universe{font-size:7px}.modal-detail .card-rank-strip>span,.modal-detail .card-rank-strip i{font-size:6px}.modal-detail .card-stats b{font-size:17px}.modal-detail .card-stats small{font-size:6px}.modal-detail .card-foot{font-size:5px}.modal-detail .card-top{padding:16px!important}.modal-detail .rank-crest{transform:scale(1.15)}.modal-detail .pick-grid{grid-template-columns:repeat(3,1fr)}.modal-detail .pick-grid .button{font-size:7px}.team-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.team-slot .character-card .card-top{padding:7px!important}.team-slot .rank-crest{transform:scale(.63);transform-origin:top left}.team-slot .card-top-right{display:none}.team-slot .character-card .card-name{font-size:14px}.team-slot .character-card .card-copy{padding:0 8px 9px}.team-slot .character-card .card-rank-strip{margin-top:5px;padding-top:4px}.team-slot .character-card .card-rank-strip>span{font-size:3px;letter-spacing:.6px}.team-slot .character-card .card-rank-strip i{display:none}.team-slot .character-card .card-universe{font-size:3px;letter-spacing:.5px}.team-slot .character-card .card-stats,.team-slot .character-card .card-epithet,.team-slot .character-card .card-foot{display:none}.team-slot .character-card .equipped-label{display:none}.team-bench .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-card .character-card .card-name{font-size:22px}.showcase-card .character-card .card-epithet,.showcase-card .character-card .card-foot{display:none}.showcase-card .rank-crest{transform:scale(.82);transform-origin:top left}.showcase-card .character-card .card-top{padding:11px!important}.showcase-card .character-card .card-copy{padding:0 13px 12px}.showcase-card .card-stats small{font-size:4px}.showcase-card .card-stats b{font-size:12px}.showcase-card .card-world-seal{width:20px;height:20px;font-size:13px}.showcase-card .card-level{font-size:4px}}
@media(prefers-reduced-motion:reduce){.character-card,.character-card:hover{transform:none}.card-foil,.card-sheen,.card-starscape i{animation:none!important}}