:root {
  --tier-iron: #8b93a3;
  --tier-bronze: #c58a5b;
  --tier-silver: #b9c2d0;
  --tier-gold: #d9cfae;
  --tier-platinum: #4fc2c2;
  --tier-emerald: #6fcf6f;
  --tier-diamond: #8fd0ff;
  --tier-master: #a98bf0;
  --tier-gm: #e0607a;
  --tier-challenger: #f4ead0;
}
:root[data-theme="light"] {
  --tier-iron: #5d6575;
  --tier-bronze: #8f5a2c;
  --tier-silver: #6b7482;
  --tier-gold: #7f6420;
  --tier-platinum: #1d7f86;
  --tier-emerald: #1f7a3b;
  --tier-diamond: #2a6fa8;
  --tier-master: #6a49c9;
  --tier-gm: #b0233f;
  --tier-challenger: #6f5d2c;
}


.crest { display: inline-flex; align-items: center; gap: var(--step-1); --tier: var(--ink-2); vertical-align: middle; }
.crest-iron { --tier: var(--tier-iron); }
.crest-bronze { --tier: var(--tier-bronze); }
.crest-silver { --tier: var(--tier-silver); }
.crest-gold { --tier: var(--tier-gold); }
.crest-platinum { --tier: var(--tier-platinum); }
.crest-emerald { --tier: var(--tier-emerald); }
.crest-diamond { --tier: var(--tier-diamond); }
.crest-master { --tier: var(--tier-master); }
.crest-grandmaster { --tier: var(--tier-gm); }
.crest-challenger { --tier: var(--tier-challenger); }
.crest-svg { display: block; flex: none; }
.crest-frame { fill: var(--surface-1); stroke: var(--tier); stroke-width: 3; stroke-linejoin: round; }
.crest-mark { fill: var(--tier); }
.crest-line { fill: none; stroke: var(--tier); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.crest-division { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tier); font-size: var(--type-head); min-width: 1.4em; }


.ranked-page {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  padding: var(--page-top) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--step-8);
  background: var(--surface-ground);
  color: var(--ink-1);
}
.ranked-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--step-2) var(--step-5); margin: 0 0 var(--step-5); }
.ranked-season { margin: var(--step-1) 0 0; color: var(--ink-2); font-size: var(--type-read); }
.ranked-links { display: flex; flex-wrap: wrap; gap: 0 var(--step-4); }
.ranked-links a, .ranked-more { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; min-height: var(--touch); display: inline-flex; align-items: center; font-size: var(--type-body); }
@media (hover: hover) { .ranked-links a:hover, .ranked-more:hover { color: var(--ink-1); text-decoration-color: currentColor; } }
.ranked-grid { display: grid; gap: var(--step-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .ranked-grid {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "side main" "facts main";
    gap: var(--step-6) var(--step-7);
  }
  .ranked-side { grid-area: side; }
  .ranked-main { grid-area: main; }
  .ranked-grid > .ranked-facts { grid-area: facts; align-self: start; }
}
.ranked-side, .ranked-main { display: grid; gap: var(--step-6); min-width: 0; }
.ranked-part { display: grid; gap: var(--step-3); min-width: 0; justify-items: stretch; }
.ranked-part > .ranked-more { justify-self: start; }
.ranked-card[hidden], .ranked-closed[hidden], .ranked-next[hidden] { display: none; }
.ranked-note { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; max-width: 60ch; }


.ranked-plate {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--step-4); align-items: start;
  padding: var(--step-5); border: 1px solid var(--line-1); border-radius: 12px;
  background: var(--rift-field) right center / cover no-repeat, var(--surface-1);
}
.ranked-plate-crest { display: grid; place-items: center; min-width: 88px; min-height: 88px; }
.ranked-plate-crest .crest { flex-direction: column; gap: 0; }
.ranked-plate-crest .crest-division { font-size: var(--type-read); }
.ranked-plate-body { display: grid; gap: var(--step-2); min-width: 0; }
.ranked-plate-name { margin: 0; font: 700 var(--type-lead) / 1.1 var(--font-display); letter-spacing: var(--track-display); }
.ranked-plate-glory { margin: 0; display: flex; align-items: baseline; gap: var(--step-1); }
.ranked-plate-score { font: 700 2.5rem / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.ranked-plate-unit { color: var(--ink-2); font-size: var(--type-body); }
.ranked-plate-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--step-3); align-items: center; color: var(--ink-1); font-size: var(--type-body); }
.ranked-plate-pos { color: var(--ink-1); font-weight: 600; text-underline-offset: 3px; min-height: var(--touch); display: inline-flex; align-items: center; }
.ranked-plate-peak { margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.ranked-plate-more { grid-column: 1 / -1; display: grid; gap: var(--step-1); padding-top: var(--step-3); border-top: 1px solid var(--line-1); }
.ranked-card-line { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; }
.ranked-meter { --fill: 0%; display: block; height: 6px; border-radius: var(--round-pill); background: var(--surface-2); overflow: hidden; }
.ranked-meter-fill { display: block; height: 100%; width: var(--fill); border-radius: inherit; background: var(--ink-2); }
.ranked-pips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 16rem; margin: 0; padding: 0; list-style: none; }
.ranked-pip { height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.ranked-pip.is-win { background: var(--good); box-shadow: none; }
.ranked-pip.is-loss { background: var(--bad); box-shadow: none; }

.crest-empty .crest-frame { fill: none; stroke: var(--line-2); stroke-dasharray: 5 4; }


.ranked-next { display: grid; gap: var(--step-2); justify-items: stretch; }
.ranked-next-note { margin: 0; color: var(--ink-2); font-size: var(--type-body); }


.ranked-closed { align-items: center; flex-wrap: wrap; padding: var(--step-3) var(--step-4); background: var(--surface-1); }
.ranked-closed-line, .ranked-banner-line { margin: 0; flex: 1 1 14rem; color: var(--ink-1); font-size: var(--type-read); line-height: 1.45; }
.ranked-closed .ur-line-mark { color: var(--ink-3); }
.ranked-banner { align-items: center; flex-wrap: wrap; padding: var(--step-4); background: var(--surface-1); }


.ranked-recent-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto 5.5rem; gap: var(--step-3); min-height: 60px; }
.ranked-recent-row .ur-result { min-width: 0; }
.ranked-recent-main { min-height: var(--touch); align-content: center; }
.ranked-recent-side { display: flex; align-items: center; justify-content: flex-end; gap: var(--step-4); min-width: 0; }
.ranked-recent-when { min-width: 7.5em; text-align: right; white-space: nowrap; }
.ranked-replay { justify-self: end; text-decoration: none; }
@media (max-width: 720px) {
  .ranked-recent-row {
    grid-template-columns: 4.5em minmax(0, 1fr) auto;
    grid-template-areas: "res main replay" ". side side";
    row-gap: var(--step-1);
    padding-block: var(--step-3);
  }
  .ranked-recent-row .ur-result { grid-area: res; align-self: start; }
  .ranked-recent-row .ur-row-name, .ranked-recent-row .ur-row-sub { white-space: normal; overflow-wrap: anywhere; }
  .ranked-recent-main { grid-area: main; }
  .ranked-recent-side { grid-area: side; justify-content: space-between; flex-wrap: wrap; gap: var(--step-2) var(--step-3); }
  .ranked-recent-when { min-width: 0; }
  .ranked-replay, .ranked-replay-none { grid-area: replay; align-self: start; }
}


.ranked-ladder-me { display: grid; gap: var(--step-2); }
.ranked-ladder-you { margin: var(--step-2) 0 0; font-weight: 600; font-size: var(--type-body); }
.ranked-ladder-me thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


.ranked-legend-row { cursor: default; }
.ranked-legend-main { cursor: default; }
.ranked-legend-main::after { content: none; }
.ranked-legend-rate { display: grid; grid-template-columns: minmax(4rem, 8rem) auto; align-items: center; gap: var(--step-3); flex: none; }
.ranked-legend-pct { min-width: 5.5em; text-align: right; }
@media (max-width: 720px) {
  .ranked-legend-rate { grid-template-columns: 4rem auto; gap: var(--step-2); }
}


.ranked-facts { padding: var(--step-4); border: 1px solid var(--line-1); border-radius: 12px; background: var(--surface-1); }
.ranked-facts-name { margin: 0; font: 600 var(--type-read) / 1.3 var(--font-display); letter-spacing: var(--track-display); }
.ranked-facts-sets { display: grid; gap: var(--step-2); }
.ranked-facts-label { margin: 0; color: var(--ink-2); font-size: var(--type-note); text-transform: uppercase; letter-spacing: 0.06em; }
.ranked-sets { display: flex; flex-wrap: wrap; gap: var(--step-2); margin: 0; padding: 0; list-style: none; }
.ranked-set { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-pill); color: var(--ink-1); font-size: var(--type-body); }
.ranked-facts-line { margin: 0; color: var(--ink-2); font-size: var(--type-body); line-height: 1.45; }

@media (max-width: 720px) {
  .ranked-plate { grid-template-columns: auto minmax(0, 1fr); padding: var(--step-4); }
  .ranked-plate-crest { min-width: 64px; min-height: 64px; }
  .ranked-plate-crest .crest-svg { width: 64px; height: 64px; }
  .ranked-plate-score { font-size: 2rem; }
  .ranked-plate-more .ranked-card-line { font-size: var(--type-note); }
}


.ranked-badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px var(--step-2);
  border: 1px solid var(--line-2); border-radius: var(--round-pill); color: var(--ink-2); font-size: var(--type-note); white-space: nowrap;
}
.ranked-idle { color: var(--warn); font-size: var(--type-body); font-weight: 600; }


.ranked-result {
  display: grid; gap: var(--step-2); justify-items: start; width: min(32rem, 100%); margin: 0 auto var(--step-4);
  padding: var(--step-4); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1);
}
.ranked-result-head { display: flex; align-items: center; gap: var(--step-3); min-width: 0; }
.ranked-result-main { margin: 0; font-size: var(--type-head); font-weight: 600; }
.ranked-result-line, .ranked-result-loading { margin: 0; color: var(--ink-2); font-size: var(--type-read); line-height: 1.45; }
.ranked-result.is-won .ranked-result-main { color: var(--good); }
.ranked-result.is-lost .ranked-result-main { color: var(--bad-ink); }

.ranked-result-slot { min-height: 12rem; }
.ranked-result-slot > .ranked-result { animation: chain-place var(--motion-3) var(--ease-spring) both; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ranked-result-slot > .ranked-result { animation: chain-fade-in var(--motion-still) linear both; }
}
:root[data-motion="reduce"] .ranked-result-slot > .ranked-result { animation: chain-fade-in var(--motion-still) linear both; }

.ranked-result-crest { position: relative; display: inline-flex; flex: none; }
.rr-slot { position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rr-slot > .rr-old, .rr-slot > .rr-new { grid-area: 1 / 1; }
.rr-slot > .rr-new { animation: rr-in var(--motion-4) var(--ease-spring) var(--motion-3) both; }
.rr-slot > .rr-old { animation: rr-out var(--motion-4) var(--ease-spring) var(--motion-3) both; }
@keyframes rr-in { from { opacity: 0.4; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes rr-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-60%); } }
.rr-echo { position: absolute; inset: -3px; border: 2px solid var(--good); border-radius: var(--round-2); opacity: 0; pointer-events: none; animation: rr-echo var(--motion-4) var(--ease-standard) var(--motion-3) both; }
@keyframes rr-echo {
  from { opacity: calc(var(--echo-light) * var(--echo-peak)); transform: scale(1); }
  to { opacity: 0; transform: scale(var(--echo-grow)); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .rr-slot > .rr-new { animation: none; }
  :root:not([data-motion="full"]) .rr-slot > .rr-old, :root:not([data-motion="full"]) .rr-echo { display: none; }
}
:root[data-motion="reduce"] .rr-slot > .rr-new { animation: none; }
:root[data-motion="reduce"] .rr-slot > .rr-old, :root[data-motion="reduce"] .rr-echo { display: none; }
.ranked-result-actions { display: flex; flex-wrap: wrap; gap: var(--step-2); margin-top: var(--step-2); }