/* The account's character XP is independent from any game's level. */
.player-xp-button {
  display: grid;
  justify-content: stretch;
  gap: 6px;
  min-width: 184px;
  min-height: 44px;
  padding: 7px 14px;
  box-sizing: border-box;
  align-content: center;
  border: 1px solid #caa66b;
  border-radius: 13px;
  background: linear-gradient(110deg, #133b43, #072532);
  color: #ffedc9;
  text-align: left;
}
.player-xp-button:has(> .progression-art) {
  display: flex;
  align-items: center;
}
.player-xp-button > .progression-art {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.player-xp-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}
.player-xp-line strong {
  font-size: 13px;
  color: #ffe2a7;
}
.player-xp-line small {
  font-size: 11px;
  color: #a3ebe0;
}
.player-xp-track {
  height: 10px;
  border: 1px solid #4d9a9f;
  border-radius: 20px;
  background: #001a22;
  overflow: hidden;
  box-shadow: inset 0 2px 4px #0008;
}
.player-xp-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10aebb, #58f4e7);
  border-radius: inherit;
  box-shadow: 0 0 10px #3cfffaaa;
}
.player-xp-button .player-xp-track {
  height: 6px;
}
.player-progression-dialog {
  width: min(1440px, calc(100vw - 24px));
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 2px solid #ca9b55;
  border-radius: 22px;
  color: #fff0d2;
  background: #062731 url('/assets/progression/backdrop.webp') center/cover;
  box-shadow:
    0 25px 100px #000c,
    inset 0 0 0 4px #ddb77322;
}
.player-progression-dialog[open] {
  display: flex;
  flex-direction: column;
}
.player-progression-dialog::backdrop {
  background: #001522cc;
  backdrop-filter: blur(6px);
}
.player-progression-dialog * {
  box-sizing: border-box;
}
.player-progression-dialog > header {
  padding: 18px 5%;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: #062936df;
  border-bottom: 1px solid #c7985966;
}
.player-progression-dialog > header h2 {
  margin: 4px 0 0;
  font-size: 27px;
  color: #ffe5b1;
  font-family: Georgia, serif;
}
.player-progression-dialog > header small {
  color: #b6d2cb;
}
.player-progression-dialog > header button {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 26px;
  flex: none;
}
.player-progression-dialog button {
  cursor: pointer;
  color: #fce9c7;
  border: 1px solid #b8955c;
  background: #153d43;
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 14px;
}
.player-progression-dialog :focus-visible,
.player-xp-button:focus-visible {
  outline: 3px solid #72f2e7;
  outline-offset: 3px;
}
.player-progression-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 5% 32px;
  scrollbar-gutter: stable;
}
.player-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 0;
  position: sticky;
  top: 0;
  background: #062a34f2;
  z-index: 2;
}
.player-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
}
.player-tabs img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.player-tabs button[aria-selected='true'] {
  color: #142f35;
  background: linear-gradient(115deg, #ffe1a4, #e3aa65);
  border-color: #ffe7b1;
  box-shadow: inset 0 0 0 3px #fff2bd44;
  font-weight: 750;
}
.player-hero {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 170px;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  margin: 6px 0 20px;
  border: 2px solid #c49657;
  border-radius: 16px;
  background: linear-gradient(120deg, #092f3beb, #03242eed);
  box-shadow: inset 0 0 0 3px #efca8233;
}
.player-hero-illustration {
  width: 190px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px #0008);
}
.player-hero-stats {
  min-width: 0;
}
.player-identity {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: #efd9ac;
  font-size: 14px;
}
.player-identity .account-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.player-hero-stats > small {
  color: #d1ddd0;
  font-size: 12px;
}
.player-hero h3 {
  font-size: clamp(26px, 3vw, 42px);
  margin: 7px 0 14px;
  overflow-wrap: anywhere;
  color: #fff0cd;
}
.player-hero .player-xp-track {
  height: 25px;
  padding: 2px;
  border-width: 2px;
}
.player-hero-stats > strong {
  display: block;
  text-align: right;
  color: #65ece1;
  font-size: 20px;
  margin-top: 8px;
}
.player-hero-stats > p {
  margin: 5px 0 0;
  text-align: right;
  font-size: 12px;
  color: #c5d9d4;
}
.player-hero-motto {
  transform: rotate(3deg);
  padding: 24px 16px;
  color: #573b20;
  background: linear-gradient(120deg, #ffe4b9, #d3a776);
  font:
    italic 22px/1.45 Georgia,
    serif;
  box-shadow: 0 8px 20px #0005;
}
.player-journey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}
.player-journey-layout > div {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.player-panel {
  border: 1px solid #bc955c;
  border-radius: 16px;
  padding: 20px;
  background: #052731ed;
  box-shadow: inset 0 0 0 3px #c28c4820;
}
.player-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 15px;
  margin: 0 0 18px;
}
.player-section-heading h3 {
  margin: 0;
  color: #fff0cc;
  font-size: 22px;
}
.player-section-heading p {
  margin: 0;
  color: #bdd3cc;
  font-size: 13px;
  line-height: 1.5;
}
.player-route {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 30px 0 10px;
  padding: 0;
  gap: 0;
}
.player-route li {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  min-width: 0;
}
.player-route li::before {
  content: '';
  height: 3px;
  background: #cfa75e;
  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
}
.player-route li:first-child::before {
  left: 50%;
}
.player-route li:last-child::before {
  right: 50%;
}
.player-route li > span {
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 50px;
  max-width: calc(100% - 5px);
  min-height: 50px;
  padding: 8px;
  border: 2px solid #d2ac6b;
  border-radius: 30px;
  background: #082e3a;
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.player-route li[data-current='true'] > span {
  color: #6affed;
  border: 3px solid #64ecea;
  box-shadow: 0 0 14px #20ccce88;
}
.player-route small {
  color: #bfcec1;
  font-size: 11px;
  margin-top: 12px;
  line-height: 1.4;
}
.player-xp-origin {
  text-align: center;
}
.player-xp-origin > img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.player-xp-origin h4 {
  color: #f6da9e;
  font-size: 21px;
  margin: 20px 0 10px;
}
.player-xp-origin p {
  color: #bcd2cb;
  font-size: 13px;
  line-height: 1.6;
}
.player-xp-origin strong {
  color: #71eddb;
}
.player-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.player-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0b3541e8;
  border: 1px solid #6f969177;
  border-radius: 14px;
  padding: 14px;
  min-width: 0;
}
.player-badge > img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 4px 7px #0007);
}
.player-badge > div {
  flex: 1;
  min-width: 0;
}
.player-badge h4 {
  font-size: 16px;
  margin: 6px 0 10px;
  line-height: 1.3;
  color: #fff0d0;
}
.player-badge small {
  display: block;
  color: #b1cfc9;
  font-size: 11px;
  line-height: 1.5;
}
.player-badge p {
  font-size: 12px;
  margin: 8px 0;
  color: #d1ded5;
}
.player-badge strong {
  display: block;
  color: #70ecdd;
  font-size: 13px;
  margin-bottom: 6px;
}
.player-journey-layout .player-badge-grid {
  grid-template-columns: minmax(0, 1fr);
}
.player-text-button {
  display: block;
  margin: 14px 0 0 auto;
}
.player-game-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #082d3aef;
  border: 1px solid #c19b65;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 18px;
}
.player-game-card > img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}
.player-game-card h3 {
  font-size: 24px;
  color: #ffe3ac;
}
.player-game-card p {
  color: #bfd6ce;
}
.player-game-card strong {
  color: #73ecd7;
  display: block;
}
.player-game-card button {
  margin-top: 20px;
}
.player-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: min(540px, calc(100dvh - 180px));
  text-align: center;
  padding: clamp(24px, 5vw, 64px);
  background: radial-gradient(ellipse at top, #21616cdd, #06232ff2 70%);
  border: 1px solid #b7975e;
  border-radius: 18px;
  margin-top: 20px;
}
.player-guest > button {
  margin: auto auto 0;
  min-height: 56px;
  width: min(300px, 100%);
  font-size: 19px;
  font-weight: 800;
  color: #172b30;
  background: linear-gradient(110deg, #ffd18b, #f7a951);
  border-color: #ffd89f;
}
.player-guest > h3 {
  margin: 0;
}
.player-guest > p {
  max-width: 580px;
  margin: 0 0 24px;
}
.player-guest img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.player-guest p {
  color: #cadbd1;
  line-height: 1.6;
}
@media (min-width: 1300px) {
  .player-journey-layout .player-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .player-journey-layout .player-badge {
    flex-direction: column;
    align-items: stretch;
  }
  .player-journey-layout .player-badge > img {
    align-self: center;
  }
}
@media (max-width: 1100px) {
  .player-hero {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .player-hero-illustration {
    width: 150px;
    height: 150px;
  }
  .player-hero-motto {
    display: none;
  }
  .player-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 750px) {
  .player-xp-button {
    min-width: 130px;
    padding: 6px 9px;
  }
  .player-xp-line {
    gap: 8px;
  }
  .player-xp-line strong {
    font-size: 12px;
  }
  .player-xp-line small {
    font-size: 10px;
  }
  .player-progression-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }
  .player-progression-dialog > header {
    padding: 12px 16px;
  }
  .player-progression-dialog > header h2 {
    font-size: 23px;
  }
  .player-progression-dialog > header small {
    font-size: 11px;
  }
  .player-progression-body {
    padding: 0 12px 20px;
    scrollbar-gutter: auto;
  }
  .player-tabs {
    gap: 4px;
  }
  .player-tabs button {
    font-size: 12px;
    padding: 6px 4px;
    gap: 5px;
  }
  .player-tabs img {
    width: 25px;
    height: 25px;
  }
  .player-hero {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 12px;
  }
  .player-hero-illustration {
    width: 76px;
    height: 90px;
  }
  .player-hero h3 {
    font-size: 27px;
    margin: 6px 0 10px;
  }
  .player-hero-stats > small {
    font-size: 10px;
  }
  .player-hero-stats > strong {
    font-size: 16px;
  }
  .player-hero-stats > p {
    font-size: 11px;
  }
  .player-hero .player-xp-track {
    height: 18px;
  }
  .player-identity {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .player-identity .account-avatar {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }
  .player-journey-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .player-panel {
    padding: 16px;
  }
  .player-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 0;
  }
  .player-route li:nth-child(3n)::before {
    right: 50%;
  }
  .player-route li:nth-child(3n + 1)::before {
    left: 50%;
  }
  .player-badge-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .player-badge {
    padding: 12px;
    gap: 10px;
  }
  .player-badge > img {
    width: 72px;
    height: 78px;
  }
  .player-game-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    gap: 10px;
  }
  .player-game-card > img {
    width: 88px;
    height: 88px;
  }
  .player-game-card h3 {
    font-size: 21px;
    margin-top: 0;
  }
}
@media (max-width: 850px) {
  .hub-home > .topbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
  }
}
@media (max-width: 620px) {
  .hub-home > .topbar .utilities {
    margin-left: 0;
    flex: 1 1 100%;
    flex-wrap: nowrap;
  }
  .hub-home > .topbar .utilities .player-xp-button {
    min-width: 0;
    flex: 1 1 auto;
  }
}
.player-game-progress-host {
  display: contents;
}
@media (max-width: 520px) {
  .player-tabs button {
    flex-direction: column;
    gap: 2px;
  }
}
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.cosmetic-card {
  background: #153c3b;
  border: 1px solid #638b80;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  color: #fff4d9;
}
.cosmetic-card img {
  width: min(100%, 128px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
}
.cosmetic-card h4 {
  margin: 10px 0 6px;
}
.cosmetic-card p {
  color: #e1d8b9;
  margin: 0;
}
.cosmetic-card[data-locked='true'] img {
  filter: grayscale(1) brightness(0.7);
}
.cosmetic-card[data-locked='true'] {
  background: #283638;
  border-color: #667174;
}
.cosmetic-kind {
  display: table;
  margin: 0 auto 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #071e28;
  color: #fff4d9;
  font-size: 13px;
  font-weight: 700;
}
.cosmetic-card[data-kind='avatar'] img {
  border-radius: 50%;
}
.cosmetic-use {
  display: block;
  color: #e1d8b9;
  margin-bottom: 8px;
}
.cosmetic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cosmetic-filters button[aria-pressed='true'] {
  background: #f2cd83;
  color: #122f36;
  border-color: #f2cd83;
}
.player-pane > .player-section-heading {
  background: #092d35;
  border: 1px solid #547a75;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}