/* Red = Master, purple = Grandmaster, blue = Challenger. Static alpha artwork. */
.tier-master{--tier-ink:#ad2546;--tier-line:#e89ca7;--tier-tint:#fff9fa;--tier-glow:transparent}
.tier-grandmaster{--tier-ink:#7730ad;--tier-line:#c494e7;--tier-tint:#fcf9ff;--tier-glow:transparent}
.rating-master{color:#9c2245;background:#fff0f2}
.rating-grandmaster{color:#7132a4;background:#f5e9ff}
.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){
  --static-unit:.28px;--frame-safe:8px;
  --frame-side:calc(260 * var(--static-unit));
  --frame-crest:calc(300 * var(--static-unit));
  --frame-top:calc(365 * var(--static-unit));
  --frame-bottom:calc(327 * var(--static-unit));
  --side-panel-width:calc(140 * var(--static-unit));
  --content-top:calc(400 * var(--static-unit));
  --content-bottom:calc(345 * var(--static-unit));
  --static-inset:calc(var(--side-panel-width) + var(--frame-safe) + 12px);
  border:0;background:transparent;box-shadow:none;
}
.tier-frame.tier-challenger{
  --frame-side:calc(440 * var(--static-unit));
  --frame-top:calc(390 * var(--static-unit));
  --side-panel-width:calc(230 * var(--static-unit));
  --content-top:calc(420 * var(--static-unit));
}
/* A small inner gutter protects outer flame tips. Only artwork is clipped, so
   song popovers and keyboard focus rings remain outside the decoration layer. */
.rating-outer-art.rating-static-art{inset:var(--frame-safe);overflow:hidden;contain:paint;border-radius:0;background:transparent}
.rating-static-art .rating-outer-surface{display:none}
.rating-static-art .rating-outer-frame{inset:0;overflow:hidden;filter:none;transform:none;animation:none;transition:none;will-change:auto}
.rating-static-art .rating-frame-piece{
  height:calc(var(--piece-height) * var(--static-unit))!important;
  transform:translateY(calc(var(--piece-shift,0) * var(--static-unit)));
  overflow:hidden;filter:none;animation:none;transition:none;will-change:auto;z-index:1;
}
.rating-side-panel{position:relative;display:block;width:var(--side-panel-width);min-width:0;min-height:0;overflow:hidden;background-size:100% calc(290 * var(--static-unit));background-repeat:repeat-y}
.rating-side-panel.frame-side-right{justify-self:end}
.tier-master .frame-side-left{background-image:url('/assets/rating-v86315/side-master-left.svg')}
.tier-master .frame-side-right{background-image:url('/assets/rating-v86315/side-master-right.svg')}
.tier-grandmaster .frame-side-left{background-image:url('/assets/rating-v86315/side-grandmaster-left.svg')}
.tier-grandmaster .frame-side-right{background-image:url('/assets/rating-v86315/side-grandmaster-right.svg')}
.tier-challenger .rating-side-panel{background-size:100% calc(360 * var(--static-unit));margin-top:calc(-75 * var(--static-unit));margin-bottom:calc(-25 * var(--static-unit))}
.tier-challenger .frame-side-left{background-image:url('/assets/rating-v86315/side-challenger-left.svg')}
.tier-challenger .frame-side-right{background-image:url('/assets/rating-v86315/side-challenger-right.svg')}
.ranking-card.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger),
.home-rank-row.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){padding:calc(var(--content-top) + var(--frame-safe) + 12px) var(--static-inset) calc(var(--content-bottom) + var(--frame-safe) + 12px);border:0;background:transparent;box-shadow:none}
.home-rank-row.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger):is(:hover,:focus-visible){background:transparent;box-shadow:none}
.rating-summary.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger)>.rating-summary-content{padding:calc(var(--content-top) + var(--frame-safe) + 12px) var(--static-inset) calc(var(--content-bottom) + var(--frame-safe) + 12px);background:transparent}
/* Numbers are part of the card, without a second white box inside the artwork. */
.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger) .rating-score-card{border:0;border-radius:0;background:transparent;box-shadow:none}
.ranking-season-guide{margin:20px 0;padding:16px;border:1px solid var(--line,#dce0e9);border-radius:12px;background:var(--panel2,#f7f6fb)}
.ranking-season-guide-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.ranking-season-guide-heading h3{margin:0;font-size:15px}
.ranking-season-guide-text{font-size:14px;line-height:1.9;overflow-wrap:anywhere}
@media(min-width:1280px){.ranking-card.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){--static-unit:.34px}}
@media(min-width:761px) and (max-width:1120px){
  .ranking-card.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){--static-unit:.22px;--static-inset:calc(var(--side-panel-width) + var(--frame-safe) + 10px)}
}
@media(max-width:540px){
  .tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){--static-unit:.22px;--static-inset:calc(var(--side-panel-width) + var(--frame-safe) + 10px)}
  .ranking-card:is(.tier-master,.tier-grandmaster,.tier-challenger) .ranking-card-metrics{grid-template-columns:minmax(0,1fr);gap:12px}
  .tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger) .rating-song-list{flex-wrap:wrap;gap:8px}
  .tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger) .rating-song{flex:0 0 44px;min-width:44px}
  .rating-summary.tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger) .rating-summary-head{flex-wrap:wrap;gap:14px}
  .ranking-card.tier-challenger .ranking-card-header{flex-wrap:wrap;gap:8px}
  .ranking-card.tier-challenger .ranking-card-rank{flex-direction:row;flex-basis:100%;justify-content:flex-start;gap:8px}
  .ranking-card.tier-challenger .rating-badge{white-space:normal}
}
@media(max-width:360px){
  .tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){--static-unit:.18px;--static-inset:calc(var(--side-panel-width) + var(--frame-safe) + 8px)}
  .ranking-card:is(.tier-master,.tier-grandmaster,.tier-challenger) .ranking-card-header{flex-wrap:wrap}
  .ranking-card:is(.tier-master,.tier-grandmaster,.tier-challenger) .ranking-card-rank{flex-direction:row;flex-basis:100%;justify-content:flex-start;gap:8px}
  .ranking-card .rating-badge{white-space:normal}
}
@media(forced-colors:active){
  .rating-static-art{display:none}
  .tier-frame:is(.tier-master,.tier-grandmaster,.tier-challenger){--content-top:16px;--content-bottom:16px;--static-inset:16px;border:2px solid CanvasText;background:Canvas}
}