a.thumb { display: block; }
.thumb > .play-btn { pointer-events: none; }
.clip-card .thumb .overlay-chip .i { --i-size: 12px; }
.clip-card .actions .btn { flex: 1; }
.clip-card .actions .icon-btn { flex: none; }
.clip-card.is-failed .thumb > img { filter: grayscale(.6) brightness(.5); }

.mrow-list { display: flex; flex-direction: column; gap: 6px; container: mxlist / inline-size; }
.mrow-l2 { display: contents; }
.mrow { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 156px 164px 76px 190px; grid-template-areas: "thumb id score stats rank state"; column-gap: 12px; align-items: center; min-height: 76px; padding: 10px 14px; background: var(--s2); border: 1px solid var(--bd-2); border-radius: var(--r-md); transition: border-color 140ms ease, background-color 140ms ease, opacity 150ms ease, transform 160ms var(--ease-out); }
.mrow-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mrow-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mrow:not(.is-sk):hover { border-color: var(--bd-4); background: color-mix(in srgb, var(--s3) 55%, var(--s2)); }
  .mrow:not(.is-sk):hover .mrow-map { color: #FFFFFF; }
}
.mrow:not(.is-sk):active { transform: scale(0.99); }
.mrow.is-selected { border-color: var(--acc); box-shadow: inset 0 0 0 0.5px var(--acc); }
.mrow.is-selected .mrow-map { color: var(--acc); }
.mrow.is-new { animation: mx-arrive 150ms var(--ease-out) both; }
@keyframes mx-arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mrow-thumb { grid-area: thumb; position: relative; width: 52px; height: 44px; border-radius: var(--r-sm); background: var(--s3); box-shadow: inset 0 0 0 1px var(--bd-2); }
.mrow-thumb > img { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; object-fit: contain; }

.mrow-id { grid-area: id; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mrow-map { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: var(--tx-1); transition: color 140ms ease; }
.mrow-when { font-size: 12px; line-height: 16px; color: var(--tx-3); white-space: nowrap; }
.mrow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; max-width: 100%; }
.mrow-tags .chip { height: 18px; padding: 0 6px; font-size: 11px; gap: 4px; }
.mrow-tags .chip .i { --i-size: 12px; }
.mx-mode { color: var(--tx-2); }
.mx-rtag { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; margin-top: -1px; font-size: 11px; line-height: 14px; font-weight: 550; color: var(--tx-2); white-space: nowrap; cursor: help; }
.mx-rtag .i { color: var(--tx-3); }
.mrow-score { grid-area: score; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mrow-sc { display: flex; align-items: center; gap: 8px; }
.sc { display: grid; grid-template-columns: 26px 12px 26px; align-items: center; width: 64px; font-size: 20px; line-height: 24px; font-weight: 650; letter-spacing: -0.02em; color: var(--tx-1); }
.sc b { font-weight: inherit; }
.sc b:first-child { text-align: right; }
.sc i { font-style: normal; text-align: center; color: var(--tx-3); font-weight: 500; transform: translateY(-1px); }
.mx-ot { height: 20px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; color: var(--tx-1); background: var(--s4); border-color: var(--bd-4); }
.mrow-rs { display: flex; align-items: center; gap: 1px; min-height: 12px; }
.mrow-rs .roundstrip.sm { --cell: 4px; --gap: 1px; }
.mrow-rs .roundstrip.sm .rs-cell { height: 12px; border-radius: 1px; }
.mrow-rs .roundstrip .rs-sep { margin: 0 2px; background: var(--bd-4); }
.mx-rs-miss { display: inline-flex; gap: 1px; margin-left: 0; }
.mx-rs-miss i { width: 4px; height: 12px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--bd-4); }
.mrow.is-left .rs-cell:is([data-round="19"], [data-round="20"], [data-round="21"], [data-round="22"]) { opacity: .28; }
.mrow-rs.is-none { font-size: 13px; line-height: 12px; }

.mx-miss { position: relative; z-index: 2; color: var(--tx-3); cursor: help; }
.mrow-stats { grid-area: stats; display: grid; grid-template-columns: 66px 44px 42px; column-gap: 6px; }
.mrow-stats .st { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrow-stats .k { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--tx-3); white-space: nowrap; }
.mrow-stats .v { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--tx-1); white-space: nowrap; }
.mrow-stats .v i { font-style: normal; color: var(--tx-3); font-weight: 500; padding: 0 0.5px; }
.mrow-stats .v.mx-miss { color: var(--tx-3); font-weight: 500; }
.mrow-stats .v.rating-hi { color: var(--ok); font-weight: 700; }
.mrow-stats .v.rating-lo { color: var(--bad); font-weight: 650; }

.mrow-rank { grid-area: rank; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.mrow-rank .delta { font-size: 12px; }
.mx-elo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--tx-1); }
.mx-elo .lvl { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; }

.mrow-state { grid-area: state; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; min-width: 0; text-align: right; }
.mx-st { flex: none; white-space: nowrap; }
.mx-st .i { flex: none; }
.mx-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.mrow-sub { display: flex; justify-content: flex-end; gap: 3px; flex-wrap: nowrap; max-width: 100%; }
.mx-kind { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px 0 4px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--tx-2); background: var(--s3); border: 1px solid var(--bd-2); white-space: nowrap; }
.mx-kind .i { --i-size: 12px; color: var(--tx-3); }
.mx-kind.is-pending, .mx-kind.is-more { position: relative; z-index: 2; cursor: help; }
.mx-kind.is-pending { background: transparent; border-style: dashed; border-color: var(--bd-4); color: var(--tx-3); }
.mx-kind.is-more { background: transparent; border-color: transparent; color: var(--tx-3); padding: 0 2px; }
.mx-act { position: relative; z-index: 2; gap: 3px; padding: 0 6px 0 9px; }
.mx-act .i { color: var(--tx-3); }
.mrow-sub.is-meta { font-variant-numeric: tabular-nums; }
.mrow-chev { grid-area: chev; display: none; color: var(--tx-3); }
.mrow-act { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tx-2); }
.mrow.is-unparsed .mrow-score .sc { color: var(--tx-3); }
.chip .spinner { width: 12px; height: 12px; border-width: 1.5px; }

.mrow.is-sk { pointer-events: none; }
.mrow.is-sk .sk, aside .sk { background: var(--s4); }
.sk-code { display: inline-block; flex: none; white-space: nowrap; width: max-content; padding: 0 2px; border-radius: 4px; font-size: 12px; line-height: 16px; color: transparent; }
.mrow.is-sk .mrow-score .sk-code { font-size: 18px; line-height: 22px; }
.mx-sk { display: flex; flex-direction: column; gap: 6px; container: mxlist / inline-size; }
@container mxlist (max-width: 799px) {
  .mrow { grid-template-columns: 44px minmax(0, 1fr) 156px 112px 76px 190px; column-gap: 12px; padding: 12px; }
  .mrow-thumb { width: 44px; height: 40px; }
  .mrow-stats { grid-template-columns: 66px 42px; }
  .mrow-stats .st-adr { display: none; }
}
@container mxlist (max-width: 739px) {
  .mrow { grid-template-columns: 40px minmax(0, 1fr) auto 12px; grid-template-areas: "thumb id status chev" "l2 l2 l2 chev"; column-gap: 8px; row-gap: 7px; min-height: 0; padding: 9px 8px 10px 10px; align-items: center; }
  .mrow-thumb { width: 40px; height: 34px; align-self: center; }
  .mrow-thumb > img { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .mrow-id { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 1px; }
  .mrow-map { flex-basis: 100%; line-height: 19px; }
  .mrow-tags { margin-top: 0; }
  .mrow-tags .chip { height: 17px; padding: 0 5px; font-size: 11px; }
  .mrow-state { display: contents; }
  .mx-st { grid-area: status; justify-self: end; align-self: center; white-space: normal; height: auto; min-height: 22px; max-width: 150px; padding-block: 3px; line-height: 14px; text-align: left; }
  .mrow-sub { display: none; }
  .mrow-l2 { grid-area: l2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; min-width: 0; min-height: 22px; }
  .mrow-score { display: contents; }
  .mrow-sc { order: 1; flex: none; gap: 6px; }
  .mrow-sc .result { width: 20px; height: 20px; }
  .mrow-rs { order: 1; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .mrow-rs .roundstrip.sm { --cell: 3px; --gap: 1px; }
  .mrow-rs .roundstrip .rs-sep { margin: 0 2px; }
  .mx-rs-miss i { width: 3px; }
  .mx-rtag { order: 3; flex-basis: 100%; margin-top: 0; }
  .mrow-stats { order: 4; flex: 1 1 100%; display: flex; align-items: center; gap: 14px; }
  .mrow-stats .st { flex-direction: row; align-items: baseline; gap: 5px; }
  .mrow-stats .st-adr { display: flex; }
  .mrow-rank { order: 2; flex: none; margin-left: auto; flex-direction: row-reverse; align-items: center; gap: 6px; }
  .mrow-chev { display: flex; align-self: center; }
  .mrow.is-sk .mrow-state { display: flex; grid-area: status; }
  .mrow.is-sk .mrow-id { flex-direction: column; align-items: flex-start; gap: 7px; }
  .mrow.is-sk .mrow-score { display: flex; order: 1; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; }
  .mrow.is-sk .mrow-score .sk-code { font-size: 16px; line-height: 20px; }
  .mrow.is-sk .mrow-score > .sk:not(.sk-code) { flex: 0 1 auto; min-width: 0; max-width: 88px; }
  .mrow.is-sk .mrow-rank > :last-child { display: none; }
}
@container mxlist (max-width: 339px) {
  .mrow-stats .st-adr { display: none; }
}
@container mxlist (max-width: 459px) {
  .mrow-l2 { gap: 8px; }
  .mx-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sc { font-size: 17px; line-height: 22px; grid-template-columns: 21px 10px 21px; width: 52px; }
  .mrow-stats .st .k { font-size: 11px; }
}
.rs-cell.is-away { opacity: .28; }

.kit-section { display: flex; flex-direction: column; gap: var(--sp-4); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.kit-swatch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.kit-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.heat-grid { display: grid; grid-template-columns: 110px repeat(var(--heat-cols), minmax(0, 1fr)); gap: 3px; font-size: 12px; }
.heat-col { color: var(--tx-3); text-align: center; font-size: 11px; padding-bottom: 4px; }
.heat-row { color: var(--tx-2); display: flex; align-items: center; }
.heat-cell { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11.5px; background: color-mix(in srgb, var(--acc) var(--heat), var(--s1)); color: var(--tx-1); }
.heat-cell.is-hot { color: var(--tx-inv); }

.upsell-dlg .modal-head { align-items: flex-start; }
.upsell-dlg .modal-head p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; max-width: 46ch; }
.upsell-dlg .modal-foot .btn[hidden] { display: none; }

.roundstrip[data-interactive]:not(.is-overflow) { touch-action: pan-y; }
.rs-peek { position: fixed; z-index: 60; top: 0; left: 0; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--s3); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--tx-2); white-space: nowrap; pointer-events: none; }
.rs-peek.is-below { transform: translate(-50%, 0); }
.rs-peek[hidden] { display: none; }
.rs-peek b { color: var(--tx-1); font-weight: 650; }

.inapp { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--bd-2); }
.inapp[hidden] { display: none; }
.inapp .hd { display: flex; gap: 12px; align-items: flex-start; }
.inapp .ic { width: 36px; height: 36px; flex: none; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tg) 14%, var(--s2)); color: var(--tg); }
.inapp .ic.is-faceit { background: color-mix(in srgb, var(--faceit) 14%, var(--s2)); color: var(--faceit); }
.inapp .ic.is-download, .inapp .ic.is-pay { background: var(--s3); color: var(--tx-2); }
.inapp p { font-size: 13.5px; line-height: 19px; color: var(--tx-1); }
.inapp .ctx { font-size: 12px; color: var(--tx-3); margin-top: 3px; }
.inapp .row-2 { flex-wrap: wrap; }
.inapp .row-2 .btn { flex: 1 1 150px; }

.modal-foot > .auth-row { flex: 1 1 100%; }
@container app (max-width: 760px) {
  .modal-foot > .auth-row.is-equal > .btn { flex: none; width: 100%; }
}

.bell-pop-note { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--tx-2); font-size: 13.5px; line-height: 20px; }
.bell-pop-note p { margin: 0; }
.bell-pop-count { margin-right: var(--sp-1); }

.cmdk-note { display: flex; align-items: center; gap: var(--sp-3); flex: none; padding: 10px var(--sp-4); border-bottom: 1px solid var(--bd-2); background: var(--warn-sub); color: var(--tx-1); font-size: 13px; line-height: 1.4; }
.cmdk-note[hidden] { display: none; }
.cmdk-note > .i { flex: none; color: var(--warn); }
.cmdk-note > span { flex: 1; min-width: 0; }