.rank-character-link { display:block; border:0; padding:0; background:none; color:#efd7b3; font:inherit; font-weight:500; text-align:left; cursor:pointer; text-underline-offset:4px; }.rank-character-link:hover { color:#ffb6b4; text-decoration:underline; }.rank-character-link:focus-visible { outline:2px solid #eaa098; outline-offset:5px; }.rank-character-link.arena-class-name { font-size:1rem; }.rank-character-link.loyalty-champion-name { font-size:1.1rem; }
.rank-profile-search { max-width:700px; margin:0 auto 33px; }.rank-profile-search label { display:block; margin-bottom:10px; color:#d8ada7; font-size:.68rem; letter-spacing:.8px; }.rank-profile-search>div { display:flex; gap:10px; border:1px solid #bc6b6659; border-radius:9px; padding:8px; background:#25162077; }.rank-profile-search input { min-width:0; width:100%; padding:12px; border:0; outline:none; background:transparent; color:#efdadb; font:inherit; font-size:.8rem; }.rank-profile-search:focus-within>div { outline:2px solid #d8918c; outline-offset:2px; }.rank-profile-search button { flex-shrink:0; color:#f1cf9b; background:#70304745; border:1px solid #c2826f55; border-radius:6px; padding:10px 16px; font:inherit; font-size:.75rem; cursor:pointer; }.rank-profile-search p { color:#b8a1b9; font-size:.68rem; line-height:1.8; margin-top:10px; }
.loyalty-champion.has-portrait { display:flex; flex-direction:row; align-items:center; gap:13px; padding:19px 16px; }.rank-champion-copy { position:relative; min-width:0; flex:1; }.rank-champion-copy .loyalty-champion-label,.rank-champion-copy .loyalty-champion-meta,.rank-champion-copy>small,.rank-champion-copy .loyalty-champion-score { display:block; }.rank-champion-copy .loyalty-champion-name { margin:12px 0 6px; }.rank-champion-copy .loyalty-champion-score { font-size:1.2rem; margin-top:16px; }.rank-view-hint { display:block; margin-top:13px; font-size:.56rem; color:#d5929c; }
.rank-portrait-button { display:grid; place-items:center; position:relative; flex:0 0 98px; width:98px; height:174px; border:0; background:radial-gradient(ellipse at bottom,#ae4f4830,transparent 65%); cursor:pointer; padding:0; color:#d9aa84; border-radius:8px; }.rank-portrait-button:hover { background:radial-gradient(ellipse at bottom,#b65b4e4d,transparent 65%); }.rank-character-portrait { width:100%; height:100%; object-fit:contain; object-position:center bottom; transition:transform .2s; }.rank-portrait-button:hover .rank-character-portrait { transform:translateY(-3px); }.rank-portrait-button:focus-visible { outline:2px solid #eb9f9d; outline-offset:3px; }.arena-class-card .rank-portrait-button { flex-basis:100px; width:100px; height:165px; }
.loyalty-profile .profile-figure { max-width:300px; }.profile-character-portrait { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 12px 14px #0007); }
.loyalty-profile { width:min(1510px,96vw); max-width:96vw; max-height:92dvh; padding:0; margin:auto; color:#ddcbd6; border:1px solid #bd69665e; border-radius:16px; background:#11131b; box-shadow:0 30px 120px #0009; overflow:auto; color-scheme:dark; }.loyalty-profile::backdrop { background:#03050bce; backdrop-filter:blur(7px); }.profile-shell { font-family:var(--font-ui); }
.profile-top { position:sticky; top:0; z-index:3; display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding:22px 25px; background:linear-gradient(120deg,#301924fa,#13151ffa); border-bottom:1px solid #bf69653b; }.profile-identity { display:flex; align-items:center; gap:14px; flex:1; min-width:200px; }.profile-identity h2 { color:#f1d7b5; font-size:1.25rem; margin:0 0 7px; font-family:var(--font-ui); }.profile-identity p { font-size:.73rem; line-height:1.7; color:#bba7bf; }.profile-crest { width:47px; height:53px; flex-shrink:0; display:grid; place-items:center; border:1px solid #d19b6b55; border-radius:12px; background:#b23b4e16; color:#e7b98c; font-size:1.4rem; }
.profile-search { display:flex; gap:8px; flex:1; max-width:430px; }.profile-search input { width:100%; min-width:0; padding:12px; border:1px solid #aa70664d; border-radius:7px; background:#0e111a; color:#e9d6df; font:inherit; font-size:.75rem; }
.loyalty-profile button { font:inherit; color:#d9b894; font-size:.72rem; cursor:pointer; padding:10px 12px; border:1px solid #ae786448; border-radius:6px; background:#241920; transition:background .2s,border-color .2s; }.loyalty-profile button:hover { background:#6d2c3f45; border-color:#d67c8070; }.loyalty-profile .profile-close { font-size:1.6rem; line-height:1; padding:6px 12px; margin-left:auto; }.profile-demo { color:#bd9fba; background:#a62c3e09; font-size:.67rem; padding:14px 25px; line-height:1.8; }
.profile-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#7e4550 #11131b; padding:13px 22px; border-bottom:1px solid #ad5a6733; background:#0d111a; }.profile-tabs button { display:flex; flex-shrink:0; align-items:center; gap:8px; background:transparent; border-color:transparent; white-space:nowrap; }.profile-tabs button[aria-pressed=true] { color:#f6d3a4; border-color:#cc747a75; background:#742b3c35; box-shadow:inset 0 -2px #d6ae75; }.profile-tabs i { color:#d58f97; font-size:.8rem; }
.profile-content { padding:22px 25px 30px; min-height:400px; }.profile-status { color:#efa5ac; font-size:.77rem; padding:0 25px; }.profile-status:not(:empty) { padding-top:15px; }.profile-view-heading { display:flex; align-items:center; gap:12px; margin:0 0 22px; color:#deafa2; }.profile-view-heading h3 { font:600 1.05rem var(--font-ui); color:#ecd3b1; }
.profile-general { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:23px; }.profile-card { padding:21px; border:1px solid #a86b6440; border-radius:11px; background:linear-gradient(125deg,#5426380d,#171820); }.profile-card h3 { color:#ecd2b0; font:500 .9rem var(--font-ui); margin-bottom:12px; }.profile-card-note { color:#bba5bb; font-size:.72rem; line-height:1.8; }.profile-summary { display:grid; gap:18px; align-content:start; }
.profile-stage { display:grid; grid-template-columns:58px minmax(0,1fr) 58px; gap:12px; align-items:center; padding:20px 0; }.profile-slots { display:grid; gap:10px; }.loyalty-profile .profile-slot { position:relative; width:58px; height:58px; display:grid; place-items:center; color:#deb980; border:1px solid #c99c5a55; background:linear-gradient(145deg,#b88f4513,#070d17); font-size:1.25rem; }.profile-slot small { position:absolute; bottom:3px; right:4px; font-size:.52rem; color:#e9c987; }.loyalty-profile .profile-slot[aria-pressed=true] { border-color:#f0b0a6; box-shadow:0 0 14px #c5485930; }
.profile-model { text-align:center; min-width:0; overflow:hidden; }.profile-figure { max-width:250px; margin:auto; transform-origin:50% 65%; transition:transform .2s; }.profile-figure svg { width:100%; display:block; }.profile-model>small { display:block; color:#ae919e; font-size:.56rem; letter-spacing:1px; margin:12px 0; }.profile-model-controls { display:flex; gap:7px; justify-content:center; }.profile-gear-detail { padding:13px; border:1px solid #ba786336; border-radius:7px; color:#cdb0c4; font-size:.73rem; line-height:1.8; }.profile-gear-detail strong { color:#efc799; }.profile-other-equipment { margin-top:17px; }.profile-other-equipment summary { cursor:pointer; color:#cba883; font-size:.74rem; }
.profile-stats { margin-top:16px; }.profile-stats>div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #bb7e631d; }.profile-stats dt { color:#baa0b6; font-size:.73rem; }.profile-stats dd { color:#e5c5a0; margin:0; font-size:.78rem; text-align:right; line-height:1.6; }
.profile-system-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.profile-value { color:#eec591; font-size:1.4rem; font-weight:500; display:block; margin:20px 0; }.profile-system-grid progress { width:100%; height:6px; display:block; margin-bottom:15px; accent-color:#c65772; }.profile-system-grid progress::-webkit-progress-bar { background:#27212b; border-radius:4px; }.profile-system-grid progress::-webkit-progress-value { background:linear-gradient(90deg,#9d374f,#d1a66c); border-radius:4px; }.profile-wing { display:block; width:180px; max-height:180px; object-fit:contain; margin:20px auto; }
.profile-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 25px; border-top:1px solid #ab656039; font-size:.62rem; color:#ad8ea9; letter-spacing:.6px; }.profile-footer a { font-size:.74rem; color:#ddb58d; text-underline-offset:4px; letter-spacing:0; }.loyalty-profile :is(button,input,a,summary):focus-visible { outline:2px solid #ed9da2; outline-offset:3px; }
@media(max-width:1050px) { .profile-general { grid-template-columns:1fr 1fr; }.profile-stage { gap:6px; }.profile-card { padding:17px; }.profile-system-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:750px) { .loyalty-profile { width:98vw; max-width:98vw; max-height:95dvh; }.profile-general { grid-template-columns:1fr; }.profile-top { padding:16px; gap:12px; }.profile-search { order:3; flex-basis:100%; max-width:none; }.profile-content { padding:18px 15px; }.profile-figure { max-width:220px; }.profile-tabs { padding:12px 15px; }.profile-demo { padding:12px 16px; }.profile-system-grid { gap:12px; } }
@media(max-width:430px) { .profile-system-grid { grid-template-columns:1fr; }.profile-card { padding:15px; } }
@media(max-width:1050px) { .loyalty-champion.has-portrait { flex-direction:column; align-items:stretch; }.loyalty-champion.has-portrait>.rank-portrait-button { align-self:center; width:110px; height:145px; flex-basis:auto; } }
@media(max-width:650px) { .loyalty-champion.has-portrait.is-leader { flex-direction:row; align-items:center; }.rank-profile-search button { padding:9px; font-size:.68rem; }.arena-class-card .rank-portrait-button { width:110px; flex-basis:110px; height:170px; } }
@media(prefers-reduced-motion:reduce) { .loyalty-profile * { animation:none!important; transition:none!important; } }
.profile-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:15px 22px; background:linear-gradient(120deg,#15111a,#0d111a); overflow:visible; }
.loyalty-profile .profile-tabs button { position:relative; width:100%; min-width:0; min-height:56px; padding:10px; white-space:normal; text-align:left; border:1px solid #ae78652b; border-radius:9px; background:#ffffff02; color:#c6b5c6; transition:border-color .2s,background .2s; }
.profile-tabs button>i { display:grid; place-items:center; width:28px; height:30px; flex-shrink:0; color:#c8a37c; border:1px solid #bd8a6333; border-radius:7px; background:#c99a5d06; }.profile-tabs button>span { font-size:.71rem; line-height:1.6; }.loyalty-profile .profile-tabs button:hover { border-color:#cc7c7c59; background:#6a263527; }.loyalty-profile .profile-tabs button[aria-pressed=true] { color:#ffe0b3; border-color:#cb7a7a80; background:linear-gradient(110deg,#80304445,#231622); box-shadow:inset 0 -2px #dbad73; }.profile-tabs button[aria-pressed=true]>i { color:#f1baaa; border-color:#d8877873; background:#b64c5a1c; }
@media(max-width:1050px) { .profile-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:650px) { .profile-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:12px; }.loyalty-profile .profile-tabs button { flex-direction:column; justify-content:center; gap:6px; padding:9px 5px; text-align:center; }.profile-tabs button>span { font-size:.63rem; } }
.profile-menu-symbol { display:inline-block; width:21px; height:21px; flex:0 0 21px; background:currentColor; color:#b9aaa5; mask-repeat:no-repeat; mask-size:contain; mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; -webkit-mask-position:center; }
.loyalty-profile .profile-tabs button { gap:11px; border-radius:7px; background:#ffffff01; }.loyalty-profile .profile-tabs button[aria-pressed=true] { background:#79304520; box-shadow:inset 0 -2px #b99b76; }.profile-tabs button[aria-pressed=true] .profile-menu-symbol { color:#e2c39a; }.profile-tabs button:hover .profile-menu-symbol { color:#e5d4c0; }.profile-view-heading .profile-menu-symbol { color:#d3b08a; }
@media(max-width:650px) { .loyalty-profile .profile-tabs button { gap:7px; }.profile-menu-symbol { width:20px; height:20px; flex-basis:20px; } }