/* Ranked duel ranks on the ranking page: medal legend and the rank cell of the table. */
.ranking-tabs .ranking-tab-rank::before { content: "◆ "; color: var(--red); }
.rank-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 22px; align-items: center; margin: 0 0 22px; padding: 22px; border: 1px solid var(--line); border-top: 2px solid var(--red); background: radial-gradient(ellipse at top right, #62212744, transparent 70%), linear-gradient(135deg, #22161599, #120d0f); }
.rank-legend[hidden] { display: none; }
.rank-legend h3 { margin: 10px 0; color: #f2d9b8; font: 22px/1.3 Georgia, serif; }
.rank-legend p { margin: 0; color: #b59c8e; font-size: 12px; line-height: 1.8; }
.rank-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rank-tiers li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px; border: 1px solid #a9784e33; background: #1b1010aa; text-align: center; }
.rank-tiers img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px #000a); }
.rank-tiers strong { color: #e6c391; font: 14px Georgia, serif; }
.rank-tiers small { color: #a08b7c; font-size: 10px; }
.rank-cell { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.rank-cell img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 6px #000b); }
.rank-cell strong { display: block; font: 14px Georgia, serif; }
.rank-cell small { display: block; color: #a08b7c; font-size: 10px; white-space: nowrap; }
.rank-1 strong { color: #d9955f; }
.rank-2 strong { color: #f0c862; }
.rank-3 strong { color: #cfe0e6; }
.rank-4 strong { color: #8fd4f5; }
.rank-5 strong { color: #ff6b5b; text-shadow: 0 0 10px #bf303288; }
@media (max-width: 760px) {
    .rank-legend { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .rank-legend { padding: 16px; }
    .rank-tiers { gap: 5px; }
    .rank-tiers img { width: 44px; height: 44px; }
    .rank-tiers strong { font-size: 11px; }
    .rank-tiers small { font-size: 8px; }
    .rank-cell { gap: 6px; }
    .rank-cell img { width: 30px; height: 30px; }
    .rank-cell strong { font-size: 12px; }
    .rank-cell small { white-space: normal; }
}