/* ランクの仮レート・連勝表示と「おまかせで上げる」 */
.ranked-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ranked-chip { display: inline-block; padding: 1px 7px; border: 1px solid #6889b7; border-radius: 999px; background: #152541; color: #cfe3ff; font-size: 10px; font-weight: normal; line-height: 1.5; white-space: nowrap; }
.ranked-chip.hot { border-color: #ffb95e; background: #4a2c10; color: #ffe3a8; }
.ranked-chip.cold { border-color: #8ea0d6; background: #1d2644; color: #c9d4ff; }
.ranked-chip.assist { border-color: #7fd1b0; color: #c6f3df; }
/* 連勝の行と昇格の行は、並べて1行にする（320px 幅の小さい画面で結果の下のボタンを押し出さないため） */
.ranked-flags { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; }
.ranked-streak { display: block; font-size: 17px; color: #ffe08a; text-shadow: 0 0 8px #ffb95e88; animation: rankedAutoPop .5s ease-out both; }
.ranked-streak.down { color: #bcc7ff; text-shadow: none; }
.ranked-placement { color: #cfe3ff; }
@keyframes rankedAutoPop { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }

.ranked-assist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px; border: 1px solid #6889b7; border-radius: 8px; background: #152541; line-height: 1.5; }
.ranked-assist > b { font-size: 14px; color: #ffe5a2; }
.ranked-assist p { margin: 0; }
.ranked-assist small { font-size: 11px; color: #cfe3ff; }
.ranked-assist .btn { align-self: stretch; }
.ranked-assist-note { font-size: 12px; color: #cfe3ff; }
.ranked-assist-result { padding: 6px 8px; border-radius: 6px; background: #0e1a31; font-size: 12px; }
.ranked-assist-now { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ranked-assist-now > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ranked-assist-now strong { font-size: 15px; color: #fff0c8; }
.ranked-trail { display: flex; flex-wrap: wrap; gap: 3px; min-height: 14px; }
.ranked-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0006; }
.ranked-dot.won { background: #66d9a0; }
.ranked-dot.lost { background: #e0707a; }
.ranked-dot.draw { background: #aab6cc; }
.ranked-dot:last-child { box-shadow: 0 0 0 2px #ffe59b99; }
@media (max-width: 380px) {
  .ranked-assist { padding: 8px; }
  .ranked-assist-now .ranked-badge { width: 40px; height: 43px; flex-basis: 40px; }
  .ranked-assist-now .ranked-icon { height: 35px; }
}
@media (prefers-reduced-motion: reduce) { .ranked-streak { animation: none; } }