.ranked-card-art{position:relative;width:100%;max-width:230px;margin:0 auto}
.family-card:nth-child(n+2).ready-card:not(.acquired-card) img{filter:none!important}
.trial-entry-cards .ranked-card-art{max-width:250px}
.family-card .card-rank-badge{position:static;flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;min-height:28px;padding:0;margin:0;border:2px solid #d8b9ff;border-radius:5px;background:#b887ef;color:#000;font:800 20px/1 system-ui,sans-serif;box-shadow:0 2px 7px #0009;cursor:pointer}
.family-card .card-rank-badge:hover{background:#cba3f5}
.family-card .card-rank-badge:focus-visible{outline:3px solid #fff;outline-offset:3px}
#card-rank-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 32px));text-align:center;padding:26px 20px;border:1px solid #ffdc32;border-radius:16px;background:#181323;color:#fff}
#card-rank-dialog h2{font-size:clamp(21px,5vw,28px);line-height:1.2;margin:0 0 12px}
#card-rank-name{color:#e9d9ff}
.card-rank-value{display:grid;place-items:center;width:64px;height:64px;margin:16px auto;background:#b887ef;color:#000;border-radius:6px;font:800 36px/1 system-ui,sans-serif}
#card-rank-note{font-size:15px;line-height:1.5}
#card-rank-dialog::backdrop{background:#090310cc}

.card-xp-position{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;margin:5px 0 8px}
.family-card .card-xp-position p{margin:0;min-width:0;font-size:14px;line-height:1.3}

.card-rank-sections{display:grid;gap:12px;margin:16px 0}
.card-rank-section{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #77538d;border-radius:10px;background:#241831;text-align:left}
#card-rank-dialog .card-rank-section h3{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.35;color:#fff}
.card-rank-section h3 span{display:block;margin-top:4px;color:#dcc4f0;font-size:14px;font-weight:400}
.card-rank-section .card-rank-value{flex:0 0 48px;width:48px;height:48px;margin:0;font-size:28px}

.family-card .card-xp-position p{flex:1;text-align:center}
.family-card .card-xp-position .card-rank-badge{margin-left:auto}

.family-card .card-rank-badge{color:#000;font-size:14px;letter-spacing:-.5px;white-space:nowrap}

/* Separate challenge (left, blue) and general BSL (right, violet) controls. */
.family-card .card-rank-badge{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:auto;min-width:32px;height:32px;min-height:32px;padding:3px;border-radius:5px;letter-spacing:0;box-sizing:border-box}
.family-card .card-rank-badge small{font:800 8px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2px}
.family-card .card-rank-badge b{font:800 12px/1 system-ui,sans-serif;white-space:nowrap}
.family-card .card-xp-position{gap:4px}
.family-card .card-xp-position .card-rank-challenge{order:-1;margin:0 auto 0 0;background:#70c5ff;border-color:#b4e2ff;color:#101b2b}
.family-card .card-xp-position .card-rank-general{order:1;margin:0 0 0 auto;background:#bf91f3;border-color:#dfc2ff;color:#160d1d}
.family-card .card-rank-badge:hover{filter:brightness(1.1)}
#card-rank-dialog .card-rank-section:first-child{border-color:#70c5ff}
#card-rank-dialog .card-rank-section:first-child .card-rank-value{background:#70c5ff}
#card-rank-dialog .card-rank-section:last-child{border-color:#bf91f3}
#card-rank-dialog .card-rank-section:last-child .card-rank-value{background:#bf91f3}
#card-rank-dialog .card-rank-section .card-rank-value{flex:0 0 92px;width:92px;min-height:48px;height:auto;box-sizing:border-box;padding:9px 5px;font-size:16px;line-height:1.25;overflow-wrap:normal}
@media(max-width:380px){#card-rank-dialog .card-rank-section{gap:8px;padding:10px}#card-rank-dialog .card-rank-section h3{font-size:15px}#card-rank-dialog .card-rank-section .card-rank-value{flex-basis:80px;width:80px;font-size:14px}}

/* Each ranking control opens only its own section. */
#card-rank-dialog .card-rank-section[hidden]{display:none!important}

/* Readable labels and balanced two-line explanation across screen sizes. */
.family-card .card-rank-badge,
.family-card .card-rank-badge small,
.family-card .card-rank-badge b{color:#000!important;-webkit-text-fill-color:#000;text-shadow:none}
.family-card .card-rank-badge small{font-size:9px;font-weight:800}
#card-rank-note{text-align:center;text-wrap:balance}
#card-rank-note .rank-note-line{display:block;white-space:nowrap;font-size:clamp(12px,4.7vw,15px);line-height:1.55}