.ranked-card .ranked-open { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 7px 10px; letter-spacing: 0; }
.ranked-card .ranked-open::after { top: 14px; transform: none; }
.ranked-identity { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 54px; }
.ranked-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranked-title strong { color: #fff0c8; }
.ranked-badge { width: 52px; height: 58px; flex: 0 0 52px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.ranked-badge[hidden] { display: none; }
.ranked-icon { width: 100%; height: 48px; object-fit: contain; }
.ranked-marks { height: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ranked-marks i { display: block; width: 5px; height: 5px; transform: rotate(45deg); background: #ffe59b; border: 1px solid #ae8137; box-shadow: 0 0 3px #ffd66d88; }
.ranked-open > small { font-size: 10px; line-height: 1.4; }
.ranked-progress { display: block; min-width: 0; width: 100%; text-align: left; font-weight: normal; }
.ranked-track { position: relative; display: block; height: 9px; border: 1px solid #798aa6; border-radius: 8px; background: #0c172b; box-shadow: inset 0 1px 3px #0009; }
.ranked-fill { display: block; width: var(--rank-to); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3b9ed5,#77e6e9 65%,#ffe393); box-shadow: 0 0 6px #72dbed55; }
.ranked-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; margin-top: 3px; color: #e1edff; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.ranked-progress-copy b { color: #ffe59b; font-size: inherit; }
.ranked-progress-copy small { flex-shrink: 0; margin: 0 !important; font-size: 10px !important; color: #adc9dd; }
.ranked-result { animation: none; gap: 5px; }
.ranked-result.down { animation: none; }
.ranked-result-identity { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 9px; }
.ranked-result-identity > .ranked-badge { grid-area: 1 / 1; width: 66px; height: 72px; }
.ranked-result-identity .ranked-icon { height: 62px; }
.ranked-result-identity strong { grid-area: 1 / 2; min-width: 0; }
.ranked-result-name { display: block; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.ranked-result .ranked-progress { margin: 2px 0; }
.rank-meter-animate .ranked-fill { animation: rankart-fill .8s ease-in-out both; }
.rank-meter-promote .ranked-fill { animation-name: rankart-promote; }
.rank-meter-demote .ranked-fill { animation-name: rankart-demote; background: linear-gradient(90deg,#7a8bac,#bbbfdf); box-shadow: none; }
.rank-meter-promote .ranked-track::after { content: ''; position: absolute; inset: 0; border: 2px solid #ffe59b; border-radius: inherit; pointer-events: none; animation: rankart-burst .8s ease-out both; }
.ranked-new-badge { animation: rankart-reveal .8s ease-out both; }
.ranked-result.down .ranked-new-badge { animation-name: rankart-demote-reveal; }
.ranked-old-badge { animation: rankart-retire .8s linear both; }
.ranked-promotion { font-size: 15px; animation: rankart-celebrate .8s ease-out both; }
.ranked-season { display: flex; align-items: center; gap: 8px; text-align: left; letter-spacing: 0; }
.ranked-season > span:last-child { min-width: 0; flex: 1; }
.ranked-season b { display: block; font-size: 12px; }
.ranked-season small { display: block; font-size: 11px; }
@keyframes rankart-fill { from { width: var(--rank-from); } to { width: var(--rank-to); } }
@keyframes rankart-promote { 0% { width: var(--rank-from); } 48%, 56% { width: 100%; } 57% { width: 0%; } 100% { width: var(--rank-to); } }
@keyframes rankart-demote { 0% { width: var(--rank-from); } 48%, 56% { width: 0%; } 57% { width: 100%; } 100% { width: var(--rank-to); } }
@keyframes rankart-burst { 0%, 47% { opacity: 0; transform: scale(1); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1,2.2); } }
@keyframes rankart-reveal { 0%, 55% { opacity: 0; transform: scale(.7); } 78% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rankart-retire { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes rankart-demote-reveal { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rankart-celebrate { 0%, 48% { opacity: 0; } 70% { opacity: 1; text-shadow: 0 0 12px #ffd45a; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 360px), (max-height: 540px) {
  .ranked-card .ranked-open { padding: 5px 7px; gap: 2px; }
  .ranked-open .ranked-badge { width: 40px; height: 43px; flex-basis: 40px; }
  .ranked-open .ranked-icon { height: 35px; }
  .ranked-title b, .ranked-title strong { font-size: 12px; }
  .ranked-result-identity > .ranked-badge { width: 50px; height: 53px; }
  .ranked-result-identity .ranked-icon { height: 45px; }
  .ranked-result-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ranked-fill, .ranked-track::after, .ranked-badge, .ranked-promotion { animation: none !important; }
  .ranked-old-badge, .rank-meter-promote .ranked-track::after { display: none; }
}