/* Three factions: blue technology, violet sorcery, jade spirits. */
.card-info:before,.card-info:after{content:'❖';position:absolute;top:-12px;left:5px;color:var(--frame);font-size:20px;text-shadow:0 1px 3px #000,0 0 8px var(--frame);z-index:3}.card-info:after{left:auto;right:5px}.rarity-sr .card-info:before,.rarity-ssr .card-info:before{content:'❧';font-size:28px;top:-18px}.rarity-sr .card-info:after,.rarity-ssr .card-info:after{content:'❧';font-size:28px;top:-18px;transform:scaleX(-1)}
:root{--accent:#f3d595;--fire:#8bdfff;--wind:#d3a6ff;--water:#94edcc;--line:#62547a;--panel:#161b32;--bg:#0b1022}
body{background:radial-gradient(ellipse at 20% 0,#45315677,transparent 55%),radial-gradient(ellipse at 90% 45%,#1b65743b,transparent 50%),#0b1022}
.topbar{background:linear-gradient(90deg,#10152b,#32223c,#10152b);border-bottom:2px solid #b18b51;box-shadow:0 3px 22px #eecb6830}.brand{color:#fff0c9;text-shadow:0 0 18px #f5cb7060}.brand-mark{color:#ffdd91}.primary{background:linear-gradient(#fff0bd,#deb765 55%,#ba853d);border:1px solid #ffe2a0;box-shadow:inset 0 0 0 2px #81592360,0 3px 14px #e6bb5225;color:#30203b;text-shadow:0 1px #ffeda9}.primary:hover:not(:disabled){background:linear-gradient(#fff6d9,#efc973)}nav{border-color:#867048}nav .active:after{height:3px;box-shadow:0 0 12px #f5ce76}h1,h2,.card-info h3{font-family:'Noto Sans JP',serif;text-shadow:0 2px 12px #0006}.hero h1 em{background:linear-gradient(#fff5db,#e1b966);background-clip:text;color:transparent}.panel,.tower-banner{background:linear-gradient(135deg,#222340,#10182c);border:1px solid #8d7754;box-shadow:inset 0 0 0 3px #0e1525,0 6px 26px #0003}.hero-note{color:#d2c3aa}
.fire{--shade:#143848}.wind{--shade:#392346}.water{--shade:#173c36}
.card{border-width:5px;border-radius:12px;background:linear-gradient(160deg,var(--shade),#101429 80%) padding-box,linear-gradient(130deg,#fff0b7,var(--frame),#5b3b34,var(--frame)) border-box;border-color:transparent;box-shadow:0 6px 20px #0008,inset 0 0 0 2px #fff2}.card:before{inset:3px;border:1px solid var(--frame);z-index:4;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-radius:5px}.rarity-c{--frame:#b78360}.rarity-uc{--frame:#d9e2f0}.rarity-r{--frame:#65baff}.rarity-sr{--frame:#ffdb73;background:linear-gradient(160deg,#554125,#17162d 65%) padding-box,linear-gradient(135deg,#fff6c5,#b77919,#ffe991,#bd791c,#fff5b6) border-box;box-shadow:0 0 24px #ffc94a40,inset 0 0 0 2px #fff5}.rarity-ssr{--frame:#ffe5ff;background:linear-gradient(160deg,var(--shade),#17132e 70%) padding-box,conic-gradient(from 20deg,#ffb9e9,#b5a1ff,#75e6ff,#8efcbb,#ffe695,#ff9cce,#bea0ff,#ffb9e9) border-box;box-shadow:0 0 12px #cb93ff66,0 0 28px #74d9ff33,inset 0 0 0 2px #fff5}.rarity-ssr:before{border-color:#ffe8fa}.card-top{position:relative;padding:12px 12px 9px;z-index:3;color:var(--tone);font-size:12px;font-weight:900;background:linear-gradient(90deg,#050d1cdd,#141427);min-height:47px;align-items:center}.card-top b{font:bold 20px Georgia,serif;letter-spacing:1px;color:var(--frame);background:#0b1020;padding:2px 8px;border:1px solid var(--frame);border-radius:3px;text-shadow:0 0 12px var(--frame)}
.portrait,.auth-portraits span{background-image:url('./assets/characters-v4.png');background-size:400% 400%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat}.card .portrait,.card-grid .portrait{height:auto!important;aspect-ratio:1/1;border-top:1px solid var(--frame);border-bottom:2px solid var(--frame);position:relative}.portrait:before{content:'';inset:auto 0 0;height:30%;background:linear-gradient(transparent,#090d22cc);opacity:1;z-index:1}.portrait:after{content:'◆';right:8px;bottom:7px;top:auto;left:auto;color:var(--frame);opacity:1;text-shadow:0 0 8px #fff}.card-stars{position:absolute;bottom:7px;left:10px;z-index:2;color:var(--frame);font-size:17px;letter-spacing:2px;text-shadow:0 1px 3px #000,0 0 8px var(--frame)}.card-info{position:relative;background:linear-gradient(120deg,#10152df5,var(--shade));padding:14px}.card-info h3{font-size:23px;color:#fff3d7;margin:5px 0}.card-info small{color:var(--tone);letter-spacing:1px}.card-info p{color:#d5cbdc}.stats{border-top:1px solid #b79c6155}.stats b{color:#ffefc1}.locked{filter:none}.card.locked .select-label{background:#070a17;color:#c6bdce}.card:disabled{opacity:.82}.select-label{position:relative;z-index:3}.selected{outline:3px solid #fff2b8;outline-offset:3px}.selected .select-label{background:linear-gradient(#ffe5a6,#c69443);color:#201731}.serial-badge{background:linear-gradient(90deg,#573d75,#24485d,#573d75);font-weight:700;color:#fff0c8;border-color:#ffe3a4}.hero-cards{height:490px}.hero-cards .card{width:205px}.hero-cards .card .portrait{aspect-ratio:1}.hero-watermark{bottom:-8px}.limited-banner{border:2px solid #dec387;background:radial-gradient(ellipse at 100% 0,#77569099,transparent),linear-gradient(115deg,#25213d,#163747);box-shadow:0 0 24px #deb86720}.limited-banner h2{color:#ffdfad}.affinity{padding:14px 12px;border:1px solid #94816666;background:#11172baa;border-radius:5px;gap:12px;flex-wrap:wrap}.affinity>span:nth-child(even){color:#e0c18b}.auth-layout{gap:48px}.auth-portraits{display:flex;gap:9px;margin-top:24px;max-width:480px}.auth-portraits span{display:block;width:33.333%;aspect-ratio:.8;border:2px solid #e6c781;box-shadow:0 0 20px #a77bd740;border-radius:40% 40% 5px 5px}.auth-layout h1{color:#fff0d0}.auth-layout .affinity{font-size:12px}.auth-gift{margin-top:14px}.summon-portal .card{width:290px}.battle-cards{max-width:820px}.battle-cards .portrait{aspect-ratio:1.15}.battle-cards .card-top b{font-size:18px}.battle-cards .card-top{font-size:12px}.battle-cards .card-info h3{font-size:18px}
@media(max-width:900px){.hero-cards .card{width:160px}.hero-cards{height:410px}.hero-cards .card-top{padding:9px 7px;font-size:10px}.hero-cards .card-top b{font-size:15px}.hero-cards .card-stars{font-size:11px;letter-spacing:1px}}
@media(max-width:600px){.hero-cards{height:380px}.hero-cards .card{width:150px}.hero-cards .card .portrait{height:auto!important}.card{border-width:4px}.card-top{padding:9px 7px;font-size:10px;letter-spacing:0;min-height:38px}.card-top b{font-size:17px;padding:2px 5px}.card-info{padding:10px}.card-info h3{font-size:18px}.card-info small{font-size:8px;letter-spacing:0}.card-stars{font-size:12px;letter-spacing:1px;left:7px}.card-grid{gap:13px}.battle-cards{gap:7px}.battle-cards .card-top{font-size:9px;padding:7px 4px;min-height:32px}.battle-cards .card-top b{font-size:11px;padding:1px 3px}.battle-cards .card-info h3{font-size:12px}.battle-cards .card-stars{font-size:8px;letter-spacing:0;bottom:4px;left:4px}.battle-cards .portrait:after{display:none}.battle-cards .select-label{font-size:8px}.auth-layout{gap:25px}.affinity{font-size:11px;gap:7px}.affinity small{flex-basis:100%}.auth-portraits{max-width:360px}.auth-layout .affinity{font-size:10px}.hero h1{font-size:37px}}