.fr-mtool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.fr-msearch {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
}

.fr-msearch svg {
  position: absolute;
  top: 50%;
  left: .75rem;
  width: .9375rem;
  height: .9375rem;
  color: var(--stone-400);
  pointer-events: none;
  transform: translateY(-50%);
}

.fr-msearch input {
  width: 100%;
  padding: .5625rem .75rem .5625rem 2.25rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--stone-800);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-100) 45%, var(--white)) 0%,
    var(--white) 100%);
  border: none;
  border-radius: .25rem;
  box-shadow: inset 0 1px 2px #0000000f,
    inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-msearch input::placeholder {
  color: var(--stone-300);
}

.fr-msearch input:focus {
  outline: none;
  background-color: var(--white);
  box-shadow: inset 0 1px 2px #0000000a,
    inset 0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 0 0 3px rgb(var(--gold-rgb) / .1);
}

.fr-drop__btn {
  min-width: 12rem;
}

.fr-drop__btn em {
  font-style: normal;
  color: var(--stone-400);
}

.fr-drop__opt {
  white-space: nowrap;
}

.fr-view {
  display: flex;
  gap: .125rem;
  padding: .1875rem;
  background: var(--ivory);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
}

.fr-view button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  color: var(--stone-400);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-view button svg {
  width: .9375rem;
  height: .9375rem;
}

.fr-view button:hover {
  color: var(--stone-800);
}

.fr-view button.is-on {
  color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .35);
}

.fr-gchips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .1875rem;
  margin-bottom: 1.25rem;
  padding: .25rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-100) 55%, var(--white)) 0%,
    var(--ivory) 100%);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px #0000000f,
    inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
}

.fr-gchip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .625rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-gchip:hover {
  color: var(--stone-900);
  background: color-mix(in srgb, var(--white) 65%, transparent);
}

.fr-gchip:active {
  transform: scale(.97);
}

.fr-gchip b {
  padding: .0625rem .3125rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--stone-400);
  background: color-mix(in srgb, var(--white) 70%, transparent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--stone-300) 45%, transparent);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-gchip.is-active {
  color: var(--stone-900);
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-300),
    0 1px 3px #00000014;
}

.fr-gchip.is-active b {
  color: var(--stone-600);
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--stone-300);
}

.fr-mlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.25rem;
  align-items: start;
}

.fr-mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.fr-mcard {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fffc),
    0 0 0 1px var(--stone-200),
    0 4px 16px #0000000f;
  transition: box-shadow var(--transition-base), transform .2s cubic-bezier(.16, 1, .3, 1);
}

.fr-mcard:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fffc),
    0 0 0 1px rgb(var(--gold-rgb) / .35),
    0 10px 26px #00000014;
}

.fr-mcard__top {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.fr-mava {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--stone-600);
  background: linear-gradient(135deg, var(--stone-200), var(--stone-300));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--stone-200);
}

.fr-mava--gold {
  color: #241c0c;
  background: linear-gradient(135deg, #8b6914 0%, #e8c96a 100%);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgb(var(--gold-rgb) / .45);
}

.fr-mava__dot {
  position: absolute;
  right: -.0625rem;
  bottom: -.0625rem;
  width: .6875rem;
  height: .6875rem;
  background: var(--live, #4ea172);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
}

.fr-mcard__id {
  min-width: 0;
}

.fr-mcard__name {
  display: block;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--stone-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.fr-mcard__name:hover {
  color: var(--gold);
}

.fr-mcard__rank {
  display: block;
  margin-top: .1875rem;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-mcard__stats {
  display: flex;
  align-items: stretch;
  padding: .5rem 0;
  border-top: 1px solid var(--stone-100);
  border-bottom: 1px solid var(--stone-100);
}

.fr-mstat {
  position: relative;
  flex: 1;
  text-align: center;
}

.fr-mstat + .fr-mstat:before {
  content: "";
  position: absolute;
  top: -.125rem;
  bottom: -.125rem;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--stone-200), transparent);
}

.fr-mstat b {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--stone-700);
}

.fr-mstat span {
  display: block;
  margin-top: .1875rem;
  font-size: .5625rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone-400);
}

.fr-mcard__foot {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.fr-mcard__joined {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--stone-400);
}

.fr-mlist .fr-mcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff), 0 0 0 1px var(--stone-200);
}

.fr-mlist .fr-mcard + .fr-mcard {
  margin-top: .625rem;
}

.fr-mlist .fr-mcard:hover {
  transform: none;
}

.fr-mlist .fr-mcard__top {
  display: contents;
}

.fr-mlist .fr-mcard__stats {
  border: none;
  padding: 0;
  width: 16rem;
}

.fr-mlist .fr-mcard__foot {
  flex: 0 0 auto;
}

.fr-mlist .fr-mcard__joined {
  display: none;
}

.fr-btn {
  gap: .4375rem;
  height: 2rem;
  padding: 0 .6875rem;
  font-size: .75rem;
}

.fr-btn svg {
  width: .875rem;
  height: .875rem;
}

.fr-btn:active {
  transform: translateY(0) scale(.96);
}

.fr-btn--icon {
  width: 2rem;
}

.fr-btn--primary {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 9%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 20%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 1px 2px rgb(var(--gold-rgb) / .12);
}

.fr-btn--primary:hover {
  color: var(--gold);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--gold-rgb) / .7),
    0 6px 18px rgb(var(--gold-rgb) / .28);
}

.fr-btn--primary:active {
  box-shadow: inset 0 1px 4px rgb(var(--gold-rgb) / .3),
    0 0 0 1px rgb(var(--gold-rgb) / .5);
}

.fr-top {
  display: grid;
  grid-template-columns: 1.5rem 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  padding: .5625rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
  transition: background var(--transition-fast);
}

.fr-top:last-child {
  border-bottom: none;
}

.fr-top:hover {
  background: rgb(var(--gold-rgb) / .04);
}

.fr-top__place {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  color: var(--stone-300);
}

.fr-top--1 .fr-top__place,
.fr-top--2 .fr-top__place,
.fr-top--3 .fr-top__place {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.fr-top--1 .fr-top__place {
  background-image: linear-gradient(180deg, #f2d894, #a8842f);
}

.fr-top--2 .fr-top__place {
  background-image: linear-gradient(180deg, var(--stone-400), var(--stone-500));
}

.fr-top--3 .fr-top__place {
  background-image: linear-gradient(180deg, #c99a6a, #8a6236);
}

.fr-top__ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 700;
  color: var(--stone-600);
  background: linear-gradient(135deg, var(--stone-200), var(--stone-300));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--stone-200);
}

.fr-top--1 .fr-top__ava {
  color: #241c0c;
  background: linear-gradient(135deg, #8b6914 0%, #e8c96a 100%);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgb(var(--gold-rgb) / .45);
}

.fr-top__name {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-800);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.fr-top__name:hover {
  color: var(--gold);
}

.fr-top__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-500);
}

.fr-top--1 .fr-top__num {
  color: var(--gold);
}

[data-theme="dark"] .fr-mcard {
  background: linear-gradient(180deg, var(--bone) 0%, var(--white) 100%);
  box-shadow: inset 0 1px 0 #ffffff08,
    0 0 0 1px var(--stone-200),
    0 4px 16px #0003;
}

[data-theme="dark"] .fr-mcard:hover {
  box-shadow: inset 0 1px 0 #ffffff08,
    0 0 0 1px rgb(var(--gold-rgb) / .35),
    0 10px 26px #00000040;
}

[data-theme="dark"] .fr-top,
[data-theme="dark"] .fr-mcard__stats {
  border-color: var(--stone-200);
}

[data-theme="dark"] .fr-msearch input {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  box-shadow: inset 0 1px 2px #00000040, inset 0 0 0 1px #ffffff1a;
}

[data-theme="dark"] .fr-msearch input:focus {
  background-color: var(--parchment);
  box-shadow: inset 0 1px 2px #00000040,
    inset 0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 0 0 3px rgb(var(--gold-rgb) / .12);
}

[data-theme="dark"] .fr-view {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px var(--stone-300);
}

[data-theme="dark"] .fr-view button.is-on {
  background: var(--white);
}

[data-theme="dark"] .fr-btn--primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 20%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 10%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 #ffffff1f,
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 1px 2px #00000040;
}

[data-theme="dark"] .fr-gchips {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  box-shadow: inset 0 1px 2px #00000040, inset 0 0 0 1px #ffffff1a;
}

[data-theme="dark"] .fr-gchip:hover {
  background: color-mix(in srgb, var(--white) 55%, transparent);
}

[data-theme="dark"] .fr-gchip.is-active {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 #ffffff14,
    0 0 0 1px var(--stone-300),
    0 1px 3px #00000040;
}

[data-theme="dark"] .fr-gchip b {
  background: color-mix(in srgb, var(--white) 60%, transparent);
}

[data-theme="dark"] .fr-mava,
[data-theme="dark"] .fr-top__ava {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--stone-300);
}

[data-theme="dark"] .fr-mava__dot {
  box-shadow: 0 0 0 2px var(--bone);
}

@media (max-width: 64rem) {
  .fr-mlayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .fr-mlist .fr-mcard {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fr-mlist .fr-mcard__stats {
    grid-column: 1 / -1;
    width: auto;
    padding: .5rem 0;
    border-top: 1px solid var(--stone-100);
  }

  .fr-mlist .fr-mcard__foot {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .fr-mgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fr-drop,
  .fr-drop__btn {
    width: 100%;
  }
}