/* Dialog cards use fixed artwork tracks, not the home carousel's flex sizing. */
#modalCard :is([data-tier="0"],[data-earned-tier="0"]){--rank-metal:#af805a;--rank-light:#edcda9}
#modalCard :is([data-tier="1"],[data-earned-tier="1"]){--rank-metal:#817674;--rank-light:#c1b5af}
#modalCard :is([data-tier="2"],[data-earned-tier="2"]){--rank-metal:#b77c57;--rank-light:#efbd96}
#modalCard :is([data-tier="3"],[data-earned-tier="3"]){--rank-metal:#9eafc9;--rank-light:#edf4ff}
#modalCard :is([data-tier="4"],[data-earned-tier="4"]){--rank-metal:#c99a46;--rank-light:#ffe0a0}
#modalCard :is([data-tier="5"],[data-earned-tier="5"]){--rank-metal:#5faaa6;--rank-light:#bcf0df}
#modalCard :is([data-tier="6"],[data-earned-tier="6"]){--rank-metal:#40ab83;--rank-light:#abf2cf}
#modalCard :is([data-tier="7"],[data-earned-tier="7"]){--rank-metal:#729ddb;--rank-light:#d1e9ff}
#modalCard :is([data-tier="8"],[data-earned-tier="8"]){--rank-metal:#a776cf;--rank-light:#e7c7ff}
#modalCard :is([data-tier="9"],[data-earned-tier="9"]){--rank-metal:#bd5c6a;--rank-light:#ffc0c5}
#modalCard :is([data-tier="10"],[data-earned-tier="10"]){--rank-metal:#c69d53;--rank-light:#bfeeff}
#modalCard.dialog-tiers .tier-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#modalCard.dialog-tiers .tier-option{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:150px;height:auto;padding:10px 10px 14px;border:1px solid #43515a;border-radius:5px;background:linear-gradient(160deg,#112734,#06131d);position:relative}
#modalCard.dialog-tiers .tier-option img{display:block;width:114px;max-width:90%;height:100px;min-height:100px;flex:none;object-fit:contain;transform:none;filter:drop-shadow(0 3px 6px #0008)}
#modalCard.dialog-tiers .tier-option b{position:static;text-align:center;white-space:normal;font:500 14px/1.2 Beaufort,"Segoe UI",serif;letter-spacing:.5px}
#modalCard.dialog-tiers .tier-option.locked img{filter:grayscale(1) brightness(.7);opacity:.7}
#modalCard.dialog-tiers .tier-option:not(.locked) b{color:var(--rank-light,#f1e2bd)}
#modalCard.dialog-tiers .tier-option.completed{border-color:color-mix(in srgb,var(--rank-metal) 48%,#27343e)}
#modalCard.dialog-tiers .tier-option.selected{border-color:var(--rank-metal,#dbbd76);background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--rank-metal) 18%,transparent),transparent 80%),#0a202d;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank-metal) 25%,transparent),0 0 16px #4dccdf12}
#modalCard.dialog-tiers .tier-option.selected:after{background:var(--rank-light);border-color:var(--rank-metal);box-shadow:0 0 8px var(--rank-metal)}
#modalCard.dialog-tiers .tier-check,#modalCard.dialog-tiers .tier-lock{position:absolute;bottom:14px;right:10px;left:auto;top:auto;width:16px;height:16px;transform:none}
#modalCard.dialog-tiers .tier-option:focus-visible{outline:2px solid #7be6ef;outline-offset:3px}
#modalCard.dialog-profile .profile-hero{display:grid;grid-template-columns:78px 130px minmax(0,1fr);gap:20px;align-items:center;padding:16px 0 24px;border-bottom:1px solid #36505b}
#modalCard.dialog-profile .profile-hero .profile-avatar{width:78px;height:78px;object-fit:cover;border:1px solid #8b754e;border-radius:50%;padding:3px}
#modalCard.dialog-profile .profile-hero .profile-earned-emblem{width:130px;height:130px;object-fit:contain;border:0;border-radius:0;padding:0;filter:drop-shadow(0 4px 10px #0008)}
#modalCard.dialog-profile .profile-hero{border-bottom-color:color-mix(in srgb,var(--rank-metal) 50%,#142c39);background:radial-gradient(ellipse at 20% 50%,color-mix(in srgb,var(--rank-metal) 9%,transparent),transparent 65%)}
#modalCard.dialog-profile .profile-hero h3{font-size:34px;margin:6px 0;color:var(--rank-light,#f1e2bd);text-shadow:0 2px 8px #0006}
@media(max-width:760px){#modalCard.dialog-tiers .tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#modalCard.dialog-tiers .tier-option{min-height:136px}#modalCard.dialog-tiers .tier-option img{width:100px;height:86px;min-height:86px}#modalCard.dialog-profile .profile-hero{grid-template-columns:90px minmax(0,1fr);gap:15px}#modalCard.dialog-profile .profile-hero .profile-avatar{display:none}#modalCard.dialog-profile .profile-hero .profile-earned-emblem{width:90px;height:100px}}
@media(max-width:440px){#modalCard.dialog-tiers .tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modalCard.dialog-tiers .tier-option b{font-size:12px}#modalCard.dialog-profile .profile-hero h3{font-size:28px}}