:root {
  --rp-black: #000;
  --rp-panel: #0b0b0b;
  --rp-panel-2: #101010;
  --rp-line: #242424;
  --rp-line-soft: #181818;
  --rp-white: #f5f5f2;
  --rp-muted: #7f7f82;
  --rp-dim: #56565a;
  --rp-volt: #caff00;
  --rp-score: #ffc928;
  --rp-danger: #ff4b55;
}

.product-ui:has(> .replica) {
  container-type: inline-size;
  overflow: hidden;
  background: var(--rp-black);
  color: var(--rp-white);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
}

.replica,
.replica * {
  box-sizing: border-box;
}

.replica {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--rp-black);
  color: var(--rp-white);
  font-size: 2.56cqw;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
}

.replica-phone {
  aspect-ratio: 390 / 844;
}

.replica-web {
  aspect-ratio: 1440 / 900;
  display: flex;
  justify-content: center;
}

.hero-phone-replica {
  display: none;
}

.replica-web-app {
  container-type: inline-size;
  width: 52.78%;
  min-height: 100%;
  border-right: 1px solid #171717;
  border-left: 1px solid #171717;
  background: #000;
  font-size: 1.32cqw;
}

.replica strong,
.replica b,
.replica h3,
.replica h4 {
  font-weight: 900;
  letter-spacing: 0;
}

.rp-crest {
  position: relative;
  width: 8.2cqw;
  height: 8.2cqw;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1.65cqw;
  background: linear-gradient(145deg, #ff7048 0%, #b92920 54%, #ef6d38 100%);
  clip-path: polygon(50% 2%, 88% 15%, 88% 47%, 78% 70%, 50% 96%, 22% 70%, 12% 47%, 12% 15%);
}

.rp-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.rp-crest::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .42), transparent 45%);
  pointer-events: none;
}

.rp-crest-blue {
  padding: 1.4cqw;
  border: .28cqw solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: linear-gradient(145deg, #8494a8 0%, #1f486f 52%, #868b34 100%);
  clip-path: none;
}

.rp-avatar {
  position: relative;
  width: 12.8cqw;
  height: 12.8cqw;
  flex: 0 0 auto;
  display: block;
  border: .55cqw solid var(--rp-white);
  border-radius: 50%;
  background: #1b1b1b;
}

.rp-avatar > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.rp-avatar > i {
  position: absolute;
  right: -1cqw;
  bottom: -.3cqw;
  width: 4cqw;
  height: 4cqw;
  border: .5cqw solid #111;
  border-radius: 50%;
  background: #d4472f;
}

.rp-avatar > span {
  display: none;
}

/* Home */
.rp-league-head {
  height: 22.8cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.4cqw;
  border-bottom: 1px solid var(--rp-line-soft);
}

.rp-league-head > div:first-child {
  display: grid;
  gap: 4.3cqw;
}

.rp-league-head > div:first-child > span,
.rp-form > span {
  color: #747476;
  font-size: 2.65cqw;
  font-weight: 850;
}

.rp-league-head > div:first-child > strong {
  font-size: 4.55cqw;
  line-height: 1;
}

.rp-league-head > div:first-child > strong i {
  margin-left: 1.2cqw;
  color: var(--rp-volt);
  font-size: 3.2cqw;
  font-style: normal;
}

.rp-form {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
}

.rp-form .rp-crest {
  width: 8.4cqw;
  height: 8.4cqw;
}

.rp-form > span {
  display: grid;
  gap: 1.1cqw;
  text-align: center;
}

.rp-form > span b {
  color: #ffb51b;
  font-size: 2.6cqw;
  letter-spacing: .9cqw;
  white-space: nowrap;
}

.replica-home > main {
  padding: 8.4cqw 5.4cqw 24cqw;
}

.rp-score-card {
  padding: 4.5cqw 4cqw 3.7cqw;
  border: 1px solid #353535;
  border-radius: 1.8cqw;
  background: #090909;
}

.rp-score-meta,
.rp-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rp-score-meta {
  color: #7a7a7d;
  font-size: 2.55cqw;
  font-weight: 850;
}

.rp-score-meta > span:first-child {
  color: #b3b3b5;
}

.rp-score-meta i {
  width: 1.7cqw;
  height: 1.7cqw;
  display: inline-block;
  margin-right: 1.2cqw;
  border-radius: 50%;
  background: var(--rp-danger);
}

.rp-score-row {
  position: relative;
  margin-top: 4.4cqw;
}

.rp-score-side {
  width: 39%;
}

.rp-score-side > div {
  display: flex;
  align-items: center;
  gap: 2.1cqw;
  color: #9c9c9f;
  font-size: 2.45cqw;
  font-weight: 900;
}

.rp-score-side > strong {
  display: block;
  margin-top: 1.7cqw;
  font-size: 9.2cqw;
  line-height: .95;
}

.rp-score-side-away {
  text-align: right;
}

.rp-score-side-away > div {
  justify-content: flex-end;
}

.rp-score-side-away > strong {
  color: #88888b;
}

.rp-score-center {
  position: absolute;
  inset: 5.3cqw 0 auto;
  display: grid;
  justify-items: center;
  gap: 8.7cqw;
  color: #5a5a5d;
  font-size: 2.3cqw;
}

.rp-score-center b {
  color: #6d6d70;
  font-size: 2.2cqw;
}

.rp-decision-center {
  margin-top: 5cqw;
  border-top: 1px solid var(--rp-line);
}

.rp-center-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4.5cqw;
  color: var(--rp-volt);
  font-size: 2.1cqw;
  font-weight: 950;
}

.rp-center-label b {
  color: #757578;
  font-size: 2.1cqw;
}

.rp-decision-center h3 {
  margin: 4cqw 0 3cqw;
  font-size: 4.7cqw;
}

.rp-neon-rule {
  height: .55cqw;
  background: var(--rp-volt);
}

.rp-decision-row {
  min-height: 14.9cqw;
  display: grid;
  grid-template-columns: 3cqw minmax(0, 1fr) auto 3cqw;
  align-items: center;
  gap: 1.2cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-decision-row > i {
  width: 3cqw;
  height: .55cqw;
  background: var(--rp-volt);
}

.rp-decision-row > div {
  min-width: 0;
}

.rp-decision-row span,
.rp-decision-row small {
  display: block;
  color: #848487;
  font-size: 1.9cqw;
  font-weight: 800;
}

.rp-decision-row strong {
  display: block;
  margin-top: 1.3cqw;
  overflow: hidden;
  font-size: 3.2cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-decision-row small {
  margin-top: 1.1cqw;
  font-weight: 600;
}

.rp-decision-row > b {
  color: var(--rp-volt);
  font-size: 4.6cqw;
}

.rp-decision-row > em {
  color: #78787b;
  font-size: 4.6cqw;
  font-style: normal;
}

.rp-decision-clear > i {
  background: #666;
}

.rp-decision-clear > b {
  color: #aaa;
  font-size: 3.2cqw;
}

.rp-since {
  min-height: 13.8cqw;
  display: flex;
  align-items: center;
  gap: 4cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-since > span {
  color: var(--rp-volt);
  font-size: 4cqw;
}

.rp-since b {
  color: #848487;
  font-size: 1.8cqw;
}

.rp-since p {
  margin: 1cqw 0 0;
  color: #8d8d90;
  font-size: 2.2cqw;
}

.rp-home-players {
  margin-top: 5cqw;
  border-top: 1px solid var(--rp-line);
}

.rp-week-star,
.rp-radar-row {
  min-height: 17cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-week-star > div {
  flex: 1;
}

.rp-week-star span,
.rp-radar-head span {
  color: #757578;
  font-size: 2cqw;
  font-weight: 850;
}

.rp-week-star strong {
  display: block;
  margin-top: 1cqw;
  font-size: 3.1cqw;
}

.rp-week-star > b,
.rp-radar-row > em {
  margin-left: auto;
  color: var(--rp-score);
  font-size: 5.2cqw;
  font-style: normal;
}

.rp-week-star small,
.rp-radar-row em small {
  display: block;
  color: #777;
  font-size: 1.7cqw;
  text-align: right;
}

.rp-week-star > em,
.rp-radar-row > i {
  color: #69696c;
  font-size: 4cqw;
  font-style: normal;
}

.rp-radar-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 4.4cqw 0 2.5cqw;
}

.rp-radar-head h3 {
  margin: 1.2cqw 0 0;
  font-size: 4.2cqw;
}

.rp-radar-head > b {
  padding-bottom: 1cqw;
  color: #9b9b9d;
  font-size: 2.4cqw;
}

.rp-radar-row > b {
  width: 4cqw;
  color: #848487;
  font-size: 2.4cqw;
}

.rp-radar-row > div {
  flex: 1;
}

.rp-radar-row strong {
  display: block;
  font-size: 3cqw;
}

.rp-radar-row div small {
  color: #777;
  font-size: 2.1cqw;
}

.rp-bottom-nav {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 19cqw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #292929;
  background: #0a0a0a;
}

.rp-bottom-nav span,
.rp-web-nav span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2cqw;
  color: #545457;
  font-size: 2.1cqw;
  font-weight: 800;
  text-align: center;
}

.rp-bottom-nav i,
.rp-web-nav i {
  font-size: 5.4cqw;
  font-style: normal;
}

.rp-bottom-nav .is-active,
.rp-web-nav .is-active {
  color: var(--rp-white);
}

.rp-bottom-nav .is-active i,
.rp-web-nav .is-active i {
  width: 9.5cqw;
  height: 9.5cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rp-volt);
  color: #000;
}

/* Shared inner screens */
.rp-mini-head {
  height: 15.5cqw;
  display: grid;
  grid-template-columns: 12cqw 1fr 12cqw;
  place-items: center;
  border-bottom: 1px solid var(--rp-line);
}

.rp-mini-head > span {
  font-size: 7cqw;
  font-weight: 400;
}

.rp-mini-head > div {
  text-align: center;
}

.rp-mini-head strong {
  display: block;
  font-size: 4.4cqw;
}

.rp-mini-head small {
  display: block;
  margin-top: 1.2cqw;
  color: #757578;
  font-size: 2.7cqw;
  font-weight: 700;
}

.rp-tabs {
  height: 15.2cqw;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--rp-line);
  background: #030303;
}

.rp-tabs > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  color: #848487;
  font-size: 2.9cqw;
  font-weight: 850;
  white-space: nowrap;
}

.rp-tabs > span.is-active {
  color: var(--rp-volt);
}

.rp-tabs > span.is-active::after {
  position: absolute;
  right: 4cqw;
  bottom: 0;
  left: 4cqw;
  height: .55cqw;
  content: "";
  background: var(--rp-volt);
}

.rp-tabs span b {
  min-width: 4.8cqw;
  height: 4.8cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rp-volt);
  color: #000;
  font-size: 2.3cqw;
}

.rp-list-label {
  margin: 4.2cqw 4.3cqw 2.3cqw;
  color: #626265;
  font-size: 2.4cqw;
  font-weight: 900;
}

.rp-line-title {
  display: flex;
  align-items: center;
  gap: 2.3cqw;
  margin: 5cqw 4.3cqw 2.3cqw;
  color: #848487;
  font-size: 2.3cqw;
  font-weight: 900;
  white-space: nowrap;
}

.rp-line-title > span {
  width: 100%;
  height: 1px;
  background: var(--rp-line);
}

/* Draft */
.rp-draft-stats,
.rp-squad-summary {
  height: 17cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 0 5cqw;
  border-bottom: 1px solid var(--rp-line-soft);
}

.rp-draft-stats span,
.rp-squad-summary span {
  display: grid;
  gap: 1cqw;
  color: #868689;
  font-size: 2.4cqw;
  font-weight: 850;
}

.rp-draft-stats span:nth-child(2) {
  text-align: center;
}

.rp-draft-stats span:last-child {
  text-align: right;
}

.rp-draft-stats b {
  color: var(--rp-white);
  font-size: 4.7cqw;
}

.rp-current-turn {
  margin: 2cqw 4.3cqw 0;
  padding: 3.3cqw 3.6cqw;
  border-left: .55cqw solid var(--rp-volt);
  background: #0a0a0a;
}

.rp-current-turn > span {
  color: #a2a2a4;
  font-size: 2.4cqw;
  font-weight: 850;
}

.rp-current-turn > div {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 1.3cqw;
}

.rp-current-turn .rp-crest {
  width: 7.8cqw;
  height: 7.8cqw;
}

.rp-current-turn strong {
  font-size: 3.8cqw;
}

.rp-current-turn > b {
  display: block;
  margin-top: 1cqw;
  color: var(--rp-volt);
  font-size: 3cqw;
}

.rp-position-tabs {
  height: 14cqw;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0 4.3cqw;
}

.rp-position-tabs span {
  min-width: 9cqw;
  height: 10cqw;
  display: grid;
  place-items: center;
  color: #98989a;
  font-size: 2.8cqw;
  font-weight: 900;
}

.rp-position-tabs .is-active {
  border-radius: 1.3cqw;
  background: #151b00;
  color: var(--rp-volt);
}

.rp-watchlist {
  margin: 0 4.3cqw;
  padding: 3cqw 3.2cqw 1cqw;
  border: 1px solid #465500;
  border-radius: 3.4cqw;
  background: #111600;
}

.rp-watchlist h4 {
  margin: 0 0 1cqw;
  color: var(--rp-volt);
  font-size: 2.7cqw;
}

.rp-draft-player {
  min-height: 16.5cqw;
  display: flex;
  align-items: center;
  gap: 2.8cqw;
  padding: 1.2cqw 4.3cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-watchlist .rp-draft-player {
  min-height: 17cqw;
  padding: 1.4cqw 0;
  border-color: #273000;
}

.rp-draft-player > div {
  min-width: 0;
  flex: 1;
}

.rp-draft-player strong,
.rp-squad-player strong,
.rp-market-row strong,
.rp-market-suggestion strong {
  display: block;
  overflow: hidden;
  font-size: 3.5cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-draft-player span,
.rp-draft-player small,
.rp-squad-player span,
.rp-market-row span,
.rp-market-suggestion span,
.rp-market-suggestion small {
  display: block;
  margin-top: .8cqw;
  color: #929295;
  font-size: 2.45cqw;
  font-weight: 750;
}

.rp-draft-player small {
  color: #b0b0b2;
  font-size: 2.25cqw;
}

.rp-draft-player > i {
  width: 11cqw;
  height: 11cqw;
  display: grid;
  place-items: center;
  border: 1px solid #2d2d2f;
  border-radius: 1.3cqw;
  color: #9a9a9d;
  font-size: 5.4cqw;
  font-style: normal;
}

.rp-draft-player > .rp-action {
  min-width: 17cqw;
  height: 11cqw;
  border-radius: 1.2cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 3cqw;
  font-weight: 950;
  display: grid;
  place-items: center;
}

.rp-watchlist .rp-draft-player > .rp-action {
  min-width: 13cqw;
  background: #202708;
  color: #eee;
  font-size: 2.5cqw;
}

/* Squad */
.rp-squad-summary {
  grid-template-columns: 1fr 1px 1fr;
  height: 24cqw;
  margin: 0 4.3cqw;
  padding: 0 8cqw;
}

.rp-squad-summary span {
  justify-items: center;
  text-align: center;
}

.rp-squad-summary b {
  color: var(--rp-volt);
  font-size: 5.8cqw;
}

.rp-squad-summary span:last-child b {
  color: #fff;
}

.rp-squad-summary > i {
  width: 1px;
  height: 10cqw;
  background: var(--rp-line);
}

.rp-lock-card {
  min-height: 17.5cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin: 3.4cqw 4.3cqw;
  padding: 3.2cqw;
  background: #0d0d0d;
}

.rp-lock-card b,
.rp-lock-card span {
  display: block;
  font-size: 2.6cqw;
}

.rp-lock-card span {
  margin-top: 1.5cqw;
  color: #89898c;
  font-weight: 650;
}

.rp-lock-card > .rp-action {
  min-width: 29cqw;
  height: 11cqw;
  border-radius: 1.2cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 2.4cqw;
  font-weight: 950;
  display: grid;
  place-items: center;
  text-align: center;
}

.rp-squad-assistant {
  margin: 0 4.3cqw;
  padding: 3.5cqw;
  border-left: .55cqw solid var(--rp-volt);
  background: #0c0c0c;
}

.rp-squad-assistant > span,
.rp-market-title > span {
  color: var(--rp-volt);
  font-size: 2.3cqw;
  font-weight: 950;
}

.rp-squad-assistant > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2cqw;
}

.rp-squad-assistant h4,
.rp-market-title h4 {
  margin: 0;
  font-size: 3.3cqw;
}

.rp-squad-assistant > div b,
.rp-market-title b {
  padding: 1.2cqw 2.3cqw;
  border-radius: 5cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 2.3cqw;
}

.rp-squad-assistant > .rp-action {
  width: max-content;
  display: block;
  margin-top: 2cqw;
  padding: 2cqw 3cqw;
  border-radius: 1.1cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 2.5cqw;
  font-weight: 950;
}

.rp-squad-assistant strong,
.rp-squad-assistant p,
.rp-squad-assistant small {
  display: block;
  margin: 2.5cqw 0 0;
  font-size: 3cqw;
}

.rp-squad-assistant p,
.rp-squad-assistant small {
  margin-top: .8cqw;
  color: #747477;
  font-size: 2.45cqw;
  line-height: 1.5;
}

.rp-squad-player {
  min-height: 18.4cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin: 0 4.3cqw;
  padding: 1.8cqw 1cqw 1.8cqw 1.8cqw;
  border-bottom: 1px solid var(--rp-line);
  border-left: .75cqw solid var(--rp-score);
}

.rp-squad-player > div {
  min-width: 0;
  flex: 1;
}

.rp-squad-player strong i {
  width: 2.2cqw;
  height: 2.2cqw;
  display: inline-block;
  margin-left: 1.2cqw;
  border-radius: 50%;
  background: var(--rp-volt);
}

.rp-squad-player > b {
  color: var(--rp-score);
  font-size: 5.8cqw;
  text-align: right;
}

.rp-squad-player > b small {
  display: block;
  color: #8a8a8d;
  font-size: 1.7cqw;
}

/* Matchup */
.rp-locked {
  margin: 4.3cqw 4.3cqw 0;
  padding: 3cqw;
  background: #0c0c0c;
}

.rp-locked strong,
.rp-locked span {
  display: block;
  font-size: 2.5cqw;
}

.rp-locked span {
  margin-top: 1.1cqw;
  color: #8b8b8e;
  font-weight: 650;
}

.rp-live-state {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2cqw;
  margin: 4cqw 4.3cqw 0;
  color: #aaa;
  font-size: 2.5cqw;
  font-weight: 850;
}

.rp-live-state b {
  color: #fff;
  font-size: 3cqw;
}

.rp-live-state > i {
  grid-column: 1 / -1;
  height: .8cqw;
  background: #202023;
}

.rp-live-state em {
  width: 52%;
  height: 100%;
  display: block;
  background: var(--rp-volt);
}

.rp-match-score {
  height: 41cqw;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  margin: 0 4.3cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-match-score > div {
  display: grid;
  justify-items: center;
  gap: 1.4cqw;
}

.rp-match-score > i {
  height: 11cqw;
  background: var(--rp-line);
}

.rp-match-score b {
  font-size: 10.3cqw;
  line-height: .9;
}

.rp-match-score > div:last-child b {
  color: #848487;
}

.rp-match-score em {
  padding: .8cqw 2.2cqw;
  border-radius: 1cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 2.5cqw;
  font-style: normal;
  font-weight: 950;
}

.rp-match-score > div:last-child em {
  background: #222;
  color: #ddd;
}

.rp-match-score span {
  color: #828285;
  font-size: 2.5cqw;
  font-weight: 750;
}

.rp-category-bars {
  padding: 3.2cqw 4.3cqw 2.6cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-category-bar {
  height: 8.4cqw;
  display: grid;
  grid-template-columns: 18cqw 10cqw 1fr 10cqw 9cqw;
  align-items: center;
  gap: 1.5cqw;
  color: #8a8a8d;
  font-size: 2.15cqw;
  font-weight: 850;
}

.rp-category-bar > b {
  color: #fff;
  font-size: 3.2cqw;
  text-align: right;
}

.rp-category-bar > b:nth-of-type(2) {
  color: #8a8a8d;
  text-align: left;
}

.rp-category-bar > i {
  height: .9cqw;
  background: #242427;
}

.rp-category-bar em {
  height: 100%;
  display: block;
  background: var(--rp-volt);
}

.rp-category-bar > strong {
  color: #858588;
  font-size: 2.4cqw;
  text-align: right;
}

.rp-category-bar > strong.positive,
.positive {
  color: var(--rp-volt) !important;
}

.replica-matchup .rp-tabs {
  height: 16cqw;
  margin: 4cqw 4.3cqw 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.4cqw;
  background: #0c0c0c;
}

.replica-matchup .rp-tabs > span.is-active {
  margin: 2cqw 0;
  border-radius: 1.2cqw;
  background: #191919;
}

.replica-matchup .rp-tabs > span.is-active::after {
  display: none;
}

.rp-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
  margin: 0 4.3cqw;
}

.rp-duel > div {
  min-width: 0;
  min-height: 18cqw;
  display: grid;
  grid-template-columns: 12.8cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw;
  border: 1px solid #28282a;
  background: #0c0c0c;
}

.rp-duel > div:last-child {
  grid-template-columns: auto minmax(0, 1fr) 12.8cqw;
  text-align: right;
}

.rp-duel span {
  min-width: 0;
}

.rp-duel strong,
.rp-duel small {
  display: block;
  overflow: hidden;
  font-size: 2.8cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-duel small {
  margin-top: 1cqw;
  color: #6f6f72;
  font-size: 2.1cqw;
}

.rp-duel b {
  color: var(--rp-score);
  font-size: 4.6cqw;
}

/* Market */
.rp-search {
  height: 12cqw;
  display: flex;
  align-items: center;
  margin: 2.6cqw 4.3cqw;
  padding: 0 3cqw;
  border-radius: 1.7cqw;
  background: #0b0b0b;
  color: #848487;
  font-size: 3.2cqw;
  font-weight: 650;
}

.replica-market > .rp-tabs {
  width: 65%;
  height: 11cqw;
  margin-left: 4.3cqw;
  border: 0;
}

.replica-market > .rp-tabs > span.is-active {
  border-radius: 1.2cqw;
  background: #151b00;
}

.replica-market > .rp-tabs > span.is-active::after {
  display: none;
}

.rp-waiver-mode {
  min-height: 13.5cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2.8cqw 4.3cqw 0;
  padding: 2.7cqw 3cqw;
  border-left: .55cqw solid var(--rp-volt);
  background: #0c0c0c;
}

.rp-waiver-mode strong,
.rp-waiver-mode span {
  display: block;
  font-size: 2.4cqw;
}

.rp-waiver-mode span {
  margin-top: 1cqw;
  color: #848487;
}

.rp-waiver-mode > b {
  color: #747477;
  font-size: 4cqw;
}

.rp-market-assistant {
  margin: 7cqw 4.3cqw 0;
  padding: 3.2cqw;
  border-left: .55cqw solid var(--rp-volt);
  background: #0b0b0b;
}

.rp-market-title {
  position: relative;
}

.rp-market-title b {
  position: absolute;
  top: 0;
  right: 0;
}

.rp-market-title h4 {
  margin-top: 1cqw;
}

.rp-market-suggestion {
  min-height: 26cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin-top: 2.2cqw;
  padding: 2.5cqw 3cqw;
  border: 1px solid #151515;
  border-radius: 1.7cqw;
  background: #090909;
}

.rp-market-suggestion .rp-avatar {
  border-color: var(--rp-volt);
}

.rp-market-suggestion > div {
  min-width: 0;
  flex: 1;
}

.rp-market-suggestion span,
.rp-market-suggestion small {
  white-space: normal;
  line-height: 1.35;
}

.rp-market-suggestion > b {
  color: var(--rp-volt);
  font-size: 4.5cqw;
}

.rp-market-row {
  min-height: 18.5cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 1.7cqw 4.3cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-market-row > div {
  min-width: 0;
  flex: 1;
}

.rp-market-row strong i {
  margin-left: 1.3cqw;
  padding: .5cqw 1.3cqw;
  border-radius: .7cqw;
  background: var(--rp-volt);
  color: #000;
  font-size: 1.8cqw;
  font-style: normal;
}

.rp-market-row > b {
  align-self: flex-start;
  margin-top: 2cqw;
  color: #848487;
  font-size: 2.8cqw;
}

.rp-market-row > b small {
  margin-left: .7cqw;
  font-size: 2cqw;
}

.rp-market-row > .rp-action {
  width: 10cqw;
  height: 10cqw;
  border: 1px solid var(--rp-volt);
  border-radius: 1.2cqw;
  background: #101500;
  color: var(--rp-volt);
  font-size: 6cqw;
  display: grid;
  place-items: center;
}

/* Trades */
.replica-trades .rp-tabs {
  height: 15cqw;
}

.rp-trade-card {
  margin: 4.2cqw;
  padding: 4cqw 3.2cqw 3cqw;
  border-left: .55cqw solid var(--rp-volt);
  border-radius: 1.8cqw;
  background: #0b0b0b;
}

.rp-trade-head {
  display: flex;
  align-items: center;
  gap: 2.8cqw;
}

.rp-trade-head > div {
  flex: 1;
}

.rp-trade-head strong,
.rp-trade-head span {
  display: block;
  font-size: 3.7cqw;
}

.rp-trade-head span {
  margin-top: .8cqw;
  color: #7a7a7d;
  font-size: 2.3cqw;
}

.rp-trade-head > b {
  padding: 1.3cqw 2cqw;
  border-radius: 5cqw;
  background: #273106;
  color: #eee;
  font-size: 2.1cqw;
}

.rp-trade-label {
  display: block;
  margin-top: 4.5cqw;
  color: #848487;
  font-size: 2.3cqw;
  font-weight: 850;
}

.rp-trade-player {
  min-height: 16cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  border-bottom: 1px solid var(--rp-line);
}

.rp-trade-player > div {
  flex: 1;
}

.rp-trade-player strong,
.rp-trade-player span {
  display: block;
  font-size: 3.5cqw;
}

.rp-trade-player span {
  margin-top: 1cqw;
  color: #7e7e81;
  font-size: 2.3cqw;
}

.rp-trade-player > b {
  color: #8b8b8d;
  font-size: 3.3cqw;
}

.rp-swap {
  height: 8cqw;
  display: grid;
  place-items: center;
  color: var(--rp-volt);
  font-size: 5.4cqw;
}

.rp-trade-metrics {
  display: grid;
  gap: 1.8cqw;
  padding: 3cqw 0;
  border-bottom: 1px solid var(--rp-line);
}

.rp-trade-metrics span {
  display: flex;
  justify-content: space-between;
  color: #848487;
  font-size: 2.6cqw;
  font-weight: 750;
}

.rp-trade-metrics b,
.rp-trade-metrics > strong {
  color: var(--rp-volt);
  font-size: 3cqw;
}

.rp-trade-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2cqw;
  margin-top: 3cqw;
}

.rp-trade-actions > .rp-action,
.rp-veto {
  height: 12cqw;
  border: 1px solid #65212a;
  border-radius: 1.2cqw;
  background: transparent;
  color: #ff5a63;
  font-size: 2.9cqw;
  font-weight: 950;
  display: grid;
  place-items: center;
}

.rp-trade-actions > .rp-action:last-child {
  border-color: var(--rp-volt);
  background: var(--rp-volt);
  color: #000;
}

.rp-veto {
  width: 100%;
  margin-top: 2.2cqw;
}

/* Desktop web home uses the same source hierarchy at its real proportions. */
.replica-web-app .rp-league-head {
  height: 15.2cqw;
  padding: 0 3.2cqw;
}

.replica-web-app .rp-league-head > div:first-child {
  gap: 2cqw;
}

.replica-web-app .rp-league-head > div:first-child > span,
.replica-web-app .rp-form > span {
  font-size: 1.25cqw;
}

.replica-web-app .rp-league-head > div:first-child > strong {
  font-size: 2.5cqw;
}

.replica-web-app .rp-form .rp-crest {
  width: 4.8cqw;
  height: 4.8cqw;
  padding: .9cqw;
}

.replica-web-app .rp-form > span b {
  font-size: 1.15cqw;
  letter-spacing: .45cqw;
}

.rp-web-nav {
  height: 7.3cqw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--rp-line);
  background: #0a0a0a;
}

.rp-web-nav span {
  grid-auto-flow: column;
  gap: 1cqw;
  font-size: 1.2cqw;
}

.rp-web-nav i {
  font-size: 2.3cqw;
}

.rp-web-nav .is-active i {
  width: 4cqw;
  height: 4cqw;
}

.replica-web-app > main {
  padding: 4.3cqw 2.7cqw;
}

.replica-web-app .rp-score-card {
  padding: 2.2cqw;
  border-radius: .8cqw;
}

.replica-web-app .rp-score-meta {
  font-size: 1.15cqw;
}

.replica-web-app .rp-score-row {
  margin-top: 2.4cqw;
}

.replica-web-app .rp-score-side > div {
  gap: 1.2cqw;
  font-size: 1.25cqw;
}

.replica-web-app .rp-score-side .rp-crest {
  width: 4.2cqw;
  height: 4.2cqw;
  padding: .8cqw;
}

.replica-web-app .rp-crest-blue {
  padding: .7cqw;
  border-width: .15cqw;
}

.replica-web-app .rp-score-side > strong {
  margin-top: 1cqw;
  font-size: 5.2cqw;
}

.replica-web-app .rp-score-center {
  inset: 3.7cqw 0 auto;
  gap: 4.6cqw;
  font-size: 1.2cqw;
}

.replica-web-app .rp-score-center b {
  font-size: 1.1cqw;
}

.replica-web-app .rp-locked-center {
  margin-top: 4cqw;
  border-top: .35cqw solid var(--rp-volt);
  border-bottom: 1px solid var(--rp-line);
}

.replica-web-app .rp-locked-center .rp-neon-rule {
  display: none;
}

.replica-web-app .rp-locked-center .rp-center-label {
  padding-top: 3cqw;
  font-size: 1.05cqw;
}

.replica-web-app .rp-locked-center h3 {
  margin: 2.7cqw 0 1.2cqw;
  font-size: 3cqw;
}

.replica-web-app .rp-locked-center p {
  margin: 0;
  color: #8b8b8e;
  font-size: 1.3cqw;
}

.replica-web-app .rp-locked-center small {
  display: block;
  margin-top: 2.3cqw;
  color: #68686b;
  font-size: .9cqw;
  font-weight: 850;
}

.replica-web-app .rp-open-center {
  margin-top: 2.7cqw;
  padding: 2.4cqw 0;
  border-top: 1px solid var(--rp-line);
  color: var(--rp-volt);
  font-size: 1.25cqw;
  font-weight: 950;
}

.replica-web-app .rp-open-center b {
  float: right;
  font-size: 2.4cqw;
}

.replica-web-app .rp-home-players {
  margin-top: 2.7cqw;
}

.replica-web-app .rp-week-star,
.replica-web-app .rp-radar-row {
  min-height: 9.2cqw;
  gap: 2cqw;
}

.replica-web-app .rp-avatar {
  width: 6cqw;
  height: 6cqw;
  border-width: .25cqw;
}

.replica-web-app .rp-avatar > i {
  right: -.4cqw;
  width: 2cqw;
  height: 2cqw;
  border-width: .25cqw;
}

.replica-web-app .rp-week-star span,
.replica-web-app .rp-radar-head span {
  font-size: 1cqw;
}

.replica-web-app .rp-week-star strong,
.replica-web-app .rp-radar-row strong {
  font-size: 2cqw;
}

.replica-web-app .rp-week-star > b,
.replica-web-app .rp-radar-row > em {
  font-size: 2.8cqw;
}

.replica-web-app .rp-radar-head {
  padding: 3cqw 0 1.8cqw;
}

.replica-web-app .rp-radar-head h3 {
  font-size: 2.7cqw;
}

.replica-web-app .rp-radar-head > b,
.replica-web-app .rp-radar-row div small {
  font-size: 1.2cqw;
}

.replica-web-app .rp-radar-row > b {
  width: 2.5cqw;
  font-size: 1.3cqw;
}

@media (max-width: 700px) {
  .product-stage .replica-web {
    display: none;
  }

  .product-stage .hero-phone-replica {
    display: block;
  }
}
