main.profile-page {
  max-width: 1176px;
  padding-block: 36px 64px;
  min-height: 65vh;
}
.profile-guest {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 60px auto 100px;
  padding: 0 32px;
}
.profile-guest:before {
  content: "";
  position: absolute;
  inset: -70px -100px -40px;
  z-index: -1;
  background:
    linear-gradient(#ffffff09 1px, transparent 1px),
    linear-gradient(
      90deg,
      #ffffff09 1px,
      transparent 1px);
  background-size: 32px 32px;
  mask-image:
    radial-gradient(
      ellipse 60% 70% at 50% 30%,
      #000 20%,
      transparent 75%);
  pointer-events: none;
}
.profile-discord-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  background: #5865f2;
  box-shadow: inset -6px -6px #0004, inset 6px 6px #ffffff2e;
}
.profile-discord-mark > span {
  width: 24px;
  height: 24px;
  background: #fff;
  box-shadow: inset -6px -6px #c9ccf5;
}
.profile-guest .materials-heading {
  margin: 0 0 20px;
  display: block;
}
.profile-guest .materials-heading h1 {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 600;
}
.profile-guest-description {
  max-width: 520px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.profile-guest #profile-status {
  font-size: 12px;
  margin: 14px 0 0;
}
.profile-guest #profile-status:empty {
  display: none;
}
.profile-guest #profile-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.materials .profile-guest #profile-login {
  min-height: 48px;
  padding: 0 22px;
  background: #5865f2;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset -4px -4px #0004, inset 4px 4px #ffffff2e;
}
.materials .profile-guest #profile-login:hover {
  background: #6773f5;
}
.profile-guest .profile-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  background: #1f2125;
  border: 1px solid #2f3137;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.profile-guest .profile-back:hover {
  background: #26282d;
}
.profile-page > .profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  border-inline-start: 1px solid var(--line);
  margin-bottom: 24px;
}
.profile-card .profile-identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.profile-identity > div {
  min-width: 0;
}
.profile-card #profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 0;
  background: #5865f2;
  box-shadow: inset -6px -6px #0004, inset 6px 6px #ffffff2e;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-card .profile-label {
  font: 400 10px var(--pixel-font);
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 8px;
}
.profile-card #profile-name {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0;
  overflow-wrap: anywhere;
}
.profile-card #profile-handle {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}
.profile-card #profile-handle:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 8px;
  background: #5865f2;
}
.profile-card .profile-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  padding: 0;
  margin: 0;
  max-width: 100%;
}
.profile-details > div {
  padding: 12px 16px;
  background: var(--surface);
  min-width: 110px;
  max-width: 100%;
}
.profile-details dt {
  font-size: 10px;
  margin-bottom: 6px;
  color: var(--muted);
}
.profile-details dd {
  font: 500 12px/1.6 var(--mono-font);
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.materials #profile-signout {
  min-height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid #2f3137;
  font-size: 12px;
  color: #d5d7db;
}
.materials #profile-signout:hover {
  background: #1f2125;
  color: #fff;
}
.profile-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.profile-main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile-account-panel,
.profile-page .profile-favorites,
.profile-permissions,
.profile-account-note {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
}
.profile-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.profile-panel-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.profile-panel-heading > .pixel-label {
  font-size: 10px;
}
.profile-link-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 20px;
}
.profile-link-placeholder p {
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
.profile-account-block {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: #253529;
  border: 1px solid #36583e;
  box-shadow: inset -5px -5px #0003, inset 5px 5px #ffffff12;
}
.profile-page .minecraft-section {
  margin: 0;
  padding: 20px;
  border: 0;
  background: transparent;
}
.minecraft-section .content-heading {
  margin: 0 0 12px;
  justify-content: flex-end;
}
.minecraft-section #minecraft-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.minecraft-section .content-heading button {
  font-size: 12px;
}
.minecraft-section > .access-note {
  font-size: 11px;
  line-height: 1.8;
  margin-top: 0;
}
.minecraft-section .minecraft-accounts {
  margin: 16px 0 0;
}
.minecraft-section .minecraft-account {
  padding: 12px 0;
  font-size: 13px;
  gap: 12px;
}
.minecraft-account > span {
  font-size: 14px;
}
.minecraft-account > button {
  font-size: 11px;
  padding: 8px 10px;
}
.profile-page .linked-player {
  margin: 0;
  padding: 20px;
  border-top: 1px solid var(--line);
}
.linked-player > h2 {
  display: none;
}
.linked-player > .access-note:empty {
  display: none;
}
.linked-player > label {
  margin: 0 0 8px;
  font-size: 11px;
}
.linked-player > select {
  width: 100%;
  margin: 0 0 16px;
  background: #1f2125;
  color: var(--ink);
  font-size: 12px;
}
.profile-page .linked-layout {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.profile-page .linked-skin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 180px;
  min-width: 0;
  padding: 12px 8px 16px;
  border: 0;
  background: linear-gradient(#1b2430, #17181b);
  overflow: hidden;
}
.linked-skin:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 16px;
  background:
    linear-gradient(
      #5bd46a 0 5px,
      #45a853 5px 8px,
      #7a5434 8px);
}
.profile-page .linked-skin > img {
  height: 148px;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  cursor: pointer;
  image-rendering: pixelated;
}
.linked-skin > .access-note {
  font-size: 10px;
  margin: 0;
  line-height: 1.7;
}
.linked-profile-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.profile-page .linked-name {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.linked-elo {
  font: 400 12px var(--mono-font);
  color: var(--muted);
  margin: 0;
}
.linked-profile-info .card-customize {
  order: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.linked-profile-info .card-customize:hover {
  color: var(--accent);
}
.profile-page .linked-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  align-items: center;
}
.linked-links > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  background: #1f2125;
  border: 1px solid #2f3137;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.linked-links > a:first-child {
  background: var(--ink);
  color: #111214;
  border-color: var(--ink);
  box-shadow: inset -3px -3px #0003, inset 3px 3px #fff;
}
.profile-linked-details {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
}
.profile-linked-details > summary {
  cursor: pointer;
  font-size: 12px;
  line-height: 1.8;
  color: var(--accent);
}
.profile-linked-details .linked-stats {
  gap: 12px;
  padding-top: 16px;
}
.profile-linked-details .linked-stat {
  padding: 16px;
  background: #141518;
  border: 1px solid var(--line);
}
.profile-linked-details .linked-stat h3 {
  font-size: 14px;
  margin: 0 0 14px;
}
.profile-linked-details .linked-values dd {
  font: 500 15px var(--mono-font);
}
.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
  min-width: 0;
}
.profile-role-badge {
  font-size: 9px;
  line-height: 1.5;
  color: #8be695;
  background: #1c2b20;
  border: 1px solid #2f5a35;
  padding: 4px 6px;
  overflow-wrap: anywhere;
}
.profile-permissions ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 6px 0;
}
.profile-permissions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  font-size: 12px;
  color: #d5d7db;
}
.profile-permissions li > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.permission-allowed,
.permission-restricted {
  font: 400 10px/1.5 var(--mono-font);
  text-align: end;
  flex-shrink: 0;
}
.permission-allowed {
  color: #8be695;
}
.permission-restricted {
  color: var(--muted);
}
.profile-account-note {
  padding: 22px 20px;
}
.profile-account-note > .pixel-label {
  font-size: 10px;
  color: #a6afff;
}
.profile-account-note .access-note {
  font-size: 12px;
  margin: 12px 0 16px;
  line-height: 1.8;
}
.profile-account-note > a {
  font-size: 12px;
  color: var(--accent);
}
.profile-page .profile-favorites {
  margin: 0;
  padding: 0;
}
.profile-favorites > .content-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.profile-favorites #favorites-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}
.profile-favorites #favorites-title:before {
  content: "\2605";
  color: #f5c04a;
  font-size: 15px;
}
.profile-favorites #favorites-refresh {
  font-size: 11px;
  padding: 7px 10px;
}
.profile-favorites > .access-note {
  font-size: 12px;
  line-height: 1.8;
  padding: 0 20px;
  margin: 16px 0;
}
.profile-favorites > .access-note:empty {
  display: none;
}
.profile-favorites #favorites-retry {
  margin: 0 20px 16px;
}
.profile-page .favorites-pagination {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.favorites-pagination button {
  font-size: 11px;
  padding: 8px 10px;
}
.favorites-pagination > span {
  font-size: 10px;
}
@media (max-width: 1150px) {
  .profile-dashboard {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
  }
  .profile-sidebar {
    top: 138px;
  }
  .profile-card .profile-details {
    order: 3;
    width: 100%;
  }
  .profile-card .profile-details > div {
    flex: 1;
  }
  .profile-page > .profile-card {
    gap: 18px;
  }
  .profile-card #profile-signout {
    margin-inline-start: auto;
  }
  .profile-page .linked-layout {
    gap: 18px;
    grid-template-columns: 120px minmax(0, 1fr);
  }
}
@media (max-width: 800px) {
  .profile-dashboard {
    grid-template-columns: 1fr;
  }
  .profile-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .profile-page .linked-layout {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .profile-permissions li {
    padding: 10px 16px;
  }
  .profile-panel-heading {
    padding: 16px;
  }
  .profile-panel-heading h2 {
    font-size: 15px;
  }
  .profile-sidebar .profile-panel-heading {
    flex-wrap: wrap;
  }
  .profile-card .profile-details {
    order: initial;
    width: auto;
  }
}
@media (max-width: 600px) {
  main.profile-page {
    padding-block: 24px 40px;
  }
  .profile-guest {
    padding: 0 8px;
    margin: 42px auto 64px;
    max-width: 100%;
  }
  .profile-guest:before {
    inset: -40px -16px;
  }
  .profile-guest .materials-heading h1 {
    font-size: 36px;
  }
  .profile-guest-description {
    font-size: 14px;
  }
  .profile-discord-mark {
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
  }
  .profile-page > .profile-card {
    padding: 20px;
    gap: 18px;
  }
  .profile-card .profile-identity {
    gap: 14px;
    flex-basis: 100%;
  }
  .profile-card #profile-avatar {
    width: 56px;
    height: 56px;
  }
  .profile-card #profile-name {
    font-size: 26px;
  }
  .profile-card .profile-label {
    font-size: 9px;
    margin-bottom: 6px;
  }
  .profile-card #profile-handle {
    font-size: 11px;
    margin-top: 7px;
  }
  .profile-card .profile-details {
    width: 100%;
    order: 2;
  }
  .profile-card .profile-details > div {
    padding: 12px;
    min-width: 0;
  }
  .profile-card .profile-details dd {
    font-size: 11px;
  }
  .profile-card #profile-signout {
    order: 3;
    width: 100%;
    margin: 0;
    min-height: 40px;
  }
  .profile-sidebar {
    display: flex;
    flex-direction: column;
  }
  .profile-sidebar > section {
    width: 100%;
  }
  .profile-dashboard {
    gap: 20px;
  }
  .profile-page .linked-layout {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 16px;
  }
  .profile-page .linked-skin {
    height: 160px;
    padding-inline: 4px;
  }
  .profile-page .linked-skin > img {
    height: 132px;
  }
  .profile-page .linked-player {
    padding: 16px;
  }
  .profile-page .linked-name {
    font-size: 20px;
  }
  .linked-elo {
    font-size: 11px;
  }
  .profile-page .linked-links {
    gap: 6px;
  }
  .linked-links > a {
    min-height: 36px;
    font-size: 11px;
    padding: 8px 10px;
  }
  .linked-profile-info .card-customize {
    font-size: 10px;
  }
  .profile-page .minecraft-section {
    padding: 16px;
  }
  .minecraft-section .minecraft-account {
    flex-wrap: wrap;
  }
  .profile-permissions li {
    padding: 12px 20px;
  }
  .profile-link-placeholder {
    padding: 20px 16px;
    gap: 14px;
  }
  .profile-link-placeholder p {
    font-size: 12px;
  }
  .profile-page .favorites-pagination {
    padding: 14px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .profile-favorites > .content-heading {
    padding: 16px;
  }
  .profile-favorites #favorites-title {
    font-size: 15px;
  }
  .profile-permissions .profile-panel-heading {
    flex-wrap: nowrap;
  }
}
@media (max-width: 360px) {
  .profile-page .linked-layout {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
  }
  .profile-page .linked-skin {
    height: 148px;
  }
  .profile-page .linked-skin > img {
    height: 124px;
  }
  .profile-card .profile-identity {
    gap: 12px;
  }
  .profile-card #profile-name {
    font-size: 23px;
  }
  .profile-card #profile-avatar {
    width: 48px;
    height: 48px;
  }
  .profile-permissions li {
    font-size: 11px;
  }
  .permission-allowed,
  .permission-restricted {
    font-size: 9px;
  }
}
.profile-guest-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.profile-guest-cta #profile-actions {
  margin: 0;
}
.profile-guest-cta .profile-back {
  margin: 0;
  min-height: 48px;
}
.profile-page[data-session=ready] .profile-guest #profile-status {
  display: none;
}
.profile-page .favorite-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 20px;
  background: transparent;
}
@media (max-width: 480px) {
  .profile-page .favorite-cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
    gap: 16px;
  }
}
.profile-page .favorite-cards {
  --favorite-card-width: calc((100cqw - 114px) / 4);
  grid-template-columns: repeat(auto-fill, minmax(0, var(--favorite-card-width)));
  gap: 16px;
  align-items: stretch;
}
.profile-page .favorite-player-link {
  padding: 16px;
  gap: 14px;
}
.profile-page .favorite-player-skin {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 174px;
  padding: 10px;
  border-radius: 9px;
}
.profile-page .favorite-player-skin img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 152px;
  object-fit: contain;
  transform: scale(1.3);
  transform-origin: center;
}
.profile-page .favorite-player-links {
  padding-inline: 16px;
}
.profile-page .favorite-player-card > .player-social {
  padding-inline: 14px;
}
@media (max-width: 700px) {
  .profile-page .favorite-cards {
    --favorite-card-width: 141px;
    gap: 12px;
  }
  .profile-page .favorite-player-link {
    padding: 10px;
    gap: 12px;
  }
  .profile-page .favorite-player-link strong {
    font-size: 13px;
  }
  .profile-page .favorite-player-skin {
    height: 148px;
    padding: 8px;
  }
  .profile-page .favorite-player-skin img {
    max-height: 130px;
  }
  .profile-page .favorite-player-links {
    padding-inline: 10px;
  }
}
.profile-page {
  container-type: inline-size;
}
.profile-page .favorite-player-card {
  min-height: 378px;
}
@container (max-width: 914px) {
  .profile-page .favorite-player-card {
    min-height: 453px;
  }
}
@media (max-width: 700px) {
  .profile-page .favorite-player-card {
    min-height: 385px;
  }
  .profile-page .favorite-player-links {
    row-gap: 0;
    padding-bottom: 11px;
  }
}