::-webkit-scrollbar {
  width: 6px;
  height: 0;
}
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
}

*:focus {
  outline: 1px solid transparent;
}

html, body {
  overflow: hidden;
  height: 100%;
  position: fixed;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body {
  font-family: Ubuntu;
  font-size: 14px;
  background-color: #484848;
}

:root {
  --ffa-mission-background-image: url("/imgs/FFA_mission_background_new.jpg");
  --tdm2-mission-background-image: url("/imgs/2tdm_art.jpg");
}

html, body, canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

canvas {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
}

#gameCanvas-gui {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.header {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.icon > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
h1 {
  padding: 0 12px;
  margin: 0;
  text-align: center;
  font: bold 40px/1.5 Ubuntu;
}
body.mobile .icon {
  width: 48px;
  height: 48px;
}
body.mobile h1 {
  font-size: 32px;
}

div.optionsHeader {
  display: block;
  margin: 8px 0 3px;
  font: bold 13px/1 Ubuntu;
  color: #000;
  text-align: center;
}
.moreLinks {
  text-align: center;
}
.moreLinks a {
  white-space: nowrap;
  margin: 0 5px;
}

h3 {
  font-size: 14px;
  line-height: 16px;
  color: #484848;
  text-align: center;
  padding: 0;
  margin: 9px 0 0;
}
#startMenuSlidingTrigger:hover > h3 {
  color: #323232;
}
#startMenuSlidingTrigger:hover > h3 > i.arrow {
  border-color: #323232;
}

.horizontalSelector {
  padding: 4px 0;
  margin-bottom: 4px;
  font: bold 12px Ubuntu;
  text-align: center;
  overflow: auto hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.horizontalSelector span {
  padding: 4px 10px;
  color: #343434;
  cursor: pointer;
}
.horizontalSelector span:hover {
  color: #5f5f5f;
}
.horizontalSelector span.active {
  background: #8abc3f;
  color: #ffffff;
  border-radius: 5px;
  cursor: default;
}

.serverSelector {
  height: 104px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 10px;
  padding: 0 6px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.15);
}
body.mobile .serverSelector {
  height: 68px;
}
.serverSelector tr {
  color: #828282;
  cursor: pointer;
}
.serverSelector tr.featured {
  color: #e8ae00;
  text-shadow: #fff27e 0 0 6px;
}
.serverSelector tr.message {
  color: #a8a8a8;
  cursor: default;
  font-style: italic;
}
.serverSelector tr.selected {
  color: #8abc3f;
  cursor: default;
}

.shadowScroll {
  overflow-y: scroll;
  background:
    /* Shadow covers */
    linear-gradient(#dde6eb 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #dde6eb 70%) 0 100%,
    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #dde6eb;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}
a:link, a:visited {
  color: #484848;
}
a:link:hover, a:visited:hover {
  color: #909090;
}

input {
  text-align: center;
  width: 100%;
  padding: 10px;
  border: solid 1px #dcdcdc;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: none;
  font-family: Ubuntu;
  background: #fff;
  transition: border 0.3s, background 0.3s, color 0.3s;
}

input:disabled {
  background: #eee;
}

#optName {
  padding: 10px;
  font-size: larger;
}

input:focus {
  border: solid 1px #ccc;
}

input.error {
  border: solid 1px #f00;
  background: #fee;
  color: #a00;
}

.gameAreaWrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#chatBox {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  width: 300px;
  height: 32px;
  top: 60%;
  left: calc(50% - 149px);
  border: 2px solid black;
  border-radius: 100px;
  color: black;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 4px 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: none;
  transition: none;
}

#chatInput {
  position: absolute;
  z-index: 21;
  width: 300px;
  height: 32px;
  top: 60%;
  left: calc(50% - 149px);
  border: 2px solid transparent;
  border-radius: 100px;
  color: black;
  background-color: transparent;
  pointer-events: auto;
  box-sizing: border-box;
  font: bold 18px / 32px Ubuntu;
  text-align: left;
  padding: 0 8px;
}

#startMenuWrapper {
  --desktop-menu-scale: 1.4;
  transition: top 1s;
  position: relative;
  top: 0px;
  left: 50%;
  z-index: 2;
  width: 1122px;
  max-width: none;
  margin: 0;
  transform: translateX(-50%) scale(var(--desktop-menu-scale));
  transform-origin: top center;
}
body.mobile #startMenuWrapper {
  width: 1122px;
  max-width: none;
  --mobile-menu-scale: 0.32;
  --mobile-account-screen-width: calc(281.25vw - 45px);
  --mobile-account-screen-height: calc(281.25vh - 45px);
  --mobile-account-screen-width: calc((100vw - 20px) / var(--mobile-menu-scale));
  --mobile-account-screen-height: calc((100vh - 52px) / var(--mobile-menu-scale));
  --mobile-account-screen-width: calc((100dvw - 20px) / var(--mobile-menu-scale));
  --mobile-account-screen-height: calc((100dvh - 52px) / var(--mobile-menu-scale));
  --mobile-account-screen-offset: 38px;
  transform: translateX(-50%) scale(var(--mobile-menu-scale));
}

body.mobile {
  --mobile-menu-scale: 0.32;
}

.mainWrapper {
  padding: 75px 20px 0;
}
body.mobile .mainWrapper {
  padding: 10px 10px 0;
}

.startMenu {
  display: flex;
  max-height: 390px;
  padding: 10px;
  border-radius: 5px;
  background-color: #dde6eb;
  overflow: hidden;
}
body.mobile .startMenu {
  flex-wrap: nowrap;
  align-content: flex-start;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.startMenuHolder {
  position: relative;
  width: 350px;
  flex: 0 0 350px;
  height: 350px;
  margin: 10px 12px;
  overflow: hidden;
}
body.mobile .startMenuHolder { height: 300px; }
body.mobile .startMenuHolder.mainHolder {
  width: 350px;
  flex: 0 0 350px;
}

.startMenuHolder.mainHolder {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#turnstileHolder {
  margin: 8px 0 6px;
  text-align: center;
}

#turnstileWidget {
  display: inline-block;
  min-height: 65px;
}

#turnstileStatus {
  height: 18px;
  color: #4f5d66;
  font: bold 12px Ubuntu;
  line-height: 18px;
}

.startMenuHolder.changelogHolder {
  width: 330px;
  flex: 0 0 330px;
  display: flex;
  flex-direction: column;
}
body.mobile .startMenuHolder.linkHolder { display: none; }
body.mobile .startMenuHolder.changelogHolder {
  flex: 0 0 330px;
  min-width: 330px;
  width: 330px;
  height: 300px;
}

.bannerHolder {
  display: block;
  width: 336px;
  height: 280px;
  margin: 0 8px 7px 7px;
  padding: 14px;
  text-align: center;
}

.referral-fallback {
  display: none;
}

.respawn-banner {
  position: absolute;
  max-width: 970px;
  max-height: 280px;
  bottom: 24px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.menuTabs {
  height: 28px;
  margin: 0 8px;
}
.menuTab {
  font: 13px/28px Ubuntu;
  padding: 6px 12px;
  border-radius: 5px 5px 0 0;
  color: #fff !important;
  margin: 0 6px;
}
.menuTab.warning {
  background: #e90;
}

.startMenuHolder.accountHolder {
  display: flex;
  flex-direction: column;
  color: #34424b;
  animation: accountPanelIn 220ms ease-out both;
}

@keyframes accountPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accountPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  margin-bottom: 10px;
  font: 700 15px/34px Ubuntu;
  color: #2d3a42;
}

.accountPanelHeader b {
  font-size: 11px;
  color: #6b7d87;
  letter-spacing: 0;
}

.accountAuth,
.accountSummary {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  animation: accountContentIn 160ms ease-out both;
}

@keyframes accountContentIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accountSummary {
  position: relative;
}

.accountNotificationsButton {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: 28px;
  border: 0;
  border-radius: 5px;
  padding: 0 9px;
  background: #d5e0e6;
  color: #34424b;
  font: 700 11px/28px Ubuntu;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
}

.accountNotificationsButton:hover {
  background: #e4edf1;
  transform: translateY(-1px);
}

.accountNotificationsButton span {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 999px;
  background: #bd5b5b;
  color: #fff;
  font: 700 10px/16px Ubuntu;
  text-align: center;
}

.accountNotificationsButton span[hidden] {
  display: none;
}

.accounts-disabled #accountFullPanel,
.accounts-disabled #accountHolder > *,
.accountAuth[hidden],
.accountSummary[hidden],
.accountFullPanel[hidden],
.accountTabPanel[hidden],
.missionCampaignList[hidden],
.accountDetailList[hidden],
.accountDetailMenu[hidden] {
  display: none !important;
}

.accountModeTabs,
.accountFullTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.accountModeTabs button,
.accountFullTabs button,
.accountSummaryActions button,
.accountDiscordButton,
#accountSubmitButton,
#accountFullBackButton {
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 13px/32px Ubuntu;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.accountModeTabs button,
.accountFullTabs button {
  flex: 1;
}

.accountModeTabs button.active,
.accountFullTabs button.active,
#accountSubmitButton {
  background: #8abc3f;
  color: #fff;
}

.accountModeTabs button:hover,
.accountFullTabs button:hover,
.accountSummaryActions button:hover,
.accountDiscordButton:hover,
#accountSubmitButton:hover,
#accountFullBackButton:hover {
  transform: translateY(-1px);
}

.accountModeTabs button:active,
.accountFullTabs button:active,
.accountSummaryActions button:active,
.accountDiscordButton:active,
#accountSubmitButton:active,
#accountFullBackButton:active {
  transform: translateY(0);
}

#accountForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

#accountForm input {
  height: 34px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  border: 2px solid #c6d2d9;
  border-radius: 5px;
  outline: none;
  background: #f8fbfc;
  color: #2c363c;
  font: 700 13px/34px Ubuntu;
}

#accountForm input:focus {
  border-color: #8abc3f;
  box-shadow: 0 0 0 2px rgba(138, 188, 63, 0.18);
}

.accountStatus {
  min-height: 38px;
  padding-top: 8px;
  color: #5d6d76;
  font: 700 12px/15px Ubuntu;
}

.accountStatus[data-kind="error"] {
  color: #be4b49;
}

.accountDiscordButton {
  width: 100%;
  background: #5865f2;
  color: #fff;
}

.accountDiscordLink {
  display: none;
  margin-top: auto;
  height: 32px;
  border-radius: 5px;
  background: #5865f2;
  color: #fff !important;
  font: 700 13px/32px Ubuntu;
  text-align: center;
  text-decoration: none;
}

.accountSummary img,
.accountFullTop img {
  width: 74px;
  height: 74px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: #f8fbfc;
  object-fit: cover;
}

.accountSummaryText {
  text-align: center;
}

.accountSummaryText strong,
.accountFullTop strong {
  display: block;
  overflow: hidden;
  color: #2d3a42;
  font: 700 18px/22px Ubuntu;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSummaryText span,
.accountFullTop span {
  display: block;
  color: #6a7b84;
  font: 700 13px/18px Ubuntu;
}

.accountSummaryText .accountDiscordUsername,
.accountFullTop .accountDiscordUsername {
  color: #5865f2;
}

.accountCompactMission {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  width: 75%;
  box-sizing: border-box;
  margin: 14px auto;
  padding: 8px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.45);
  color: #4a5961;
  font: 700 12px/15px Ubuntu;
  text-align: center;
}

.accountCompactMission.switchingUp strong,
.accountCompactMission.switchingUp span {
  animation: accountDailySlideUp 420ms ease both;
}

.accountCompactMission.switchingDown strong,
.accountCompactMission.switchingDown span {
  animation: accountDailySlideDown 420ms ease both;
}

@keyframes accountDailySlideUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes accountDailySlideDown {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.accountCompactMission strong,
.accountCompactMission span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountCompactMission strong {
  color: #2d3a42;
  font-size: 13px;
  line-height: 17px;
}

.accountCompactMission span {
  color: #62727b;
  line-height: 16px;
}

.accountCompactMission[data-summary-mode="friends"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  text-align: left;
}

.accountCompactMission[data-summary-mode="friends"] strong,
.accountCompactMission[data-summary-mode="friends"] span {
  grid-column: 1;
}

.accountCompactMission[data-summary-mode="friends"][data-online-friends-state="empty"] {
  grid-template-columns: 1fr;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.accountCompactMission[data-summary-mode="friends"][data-online-friends-state="empty"] strong,
.accountCompactMission[data-summary-mode="friends"][data-online-friends-state="empty"] span {
  grid-column: 1;
}

.accountCompactJoinButton {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: #8abc3f;
  color: #fff;
  font: 700 12px/30px Ubuntu;
  cursor: pointer;
}

.accountCompactJoinButton:hover {
  background: #9dcc50;
}

.accountSummaryActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.accountSummaryActions button:not(#accountLogoutButton) {
  background: #8abc3f;
  color: #fff;
}

.accountSummaryActions button.accountDiscordButton,
#connectDiscordButton.accountDiscordButton,
#connectDiscordButton.accountDiscordButton.connected,
.accountSummaryActions button.accountDiscordButton.connected {
  grid-column: 1 / -1;
  background: #5865f2;
  color: #fff;
}

.accountDiscordButton.connected {
  background: #5865f2;
  color: #fff;
  cursor: pointer;
}

.accountDiscordButton:disabled:hover,
.accountDiscordButton:disabled:active {
  transform: none;
}

.accountFullPanel {
  position: absolute;
  inset: 38px 10px 10px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 5px;
  background: #dde6eb;
  box-shadow: 0 10px 30px rgba(32, 42, 48, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-42px);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 220ms ease;
}

.accountFullPanel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.accountFullTop {
  display: grid;
  grid-template-columns: 68px 58px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

#accountFullBackButton {
  width: 68px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
}

.accountFullTop img {
  width: 58px;
  height: 58px;
  margin: 0;
}

.accountFullTop strong {
  font-size: 20px;
  line-height: 25px;
}

.accountFullTop span {
  font-size: 13px;
  line-height: 17px;
}

.accountDevPermissionsToggle {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 2;
  width: max-content;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 5px;
  padding: 0 10px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 12px/28px Ubuntu;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.accountDevPermissionsToggle.active {
  background: #8abc3f;
  color: #1f2b18;
}

.accountDevPermissionsToggle:hover {
  transform: translateY(-1px);
}

.accountDevPermissionsToggle:disabled {
  cursor: default;
  opacity: 0.65;
  transform: none;
}

.accountFullBody {
  display: flex;
  min-height: 0;
  flex: 1;
  animation: accountContentIn 160ms ease-out both;
}

.accountMissionsSection {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 1;
}

.accountSectionHeader {
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.accountFullPanel:has(#accountClansContent:not([hidden])) .accountSectionHeader,
.accountFullPanel:has(#accountFriendsContent:not([hidden])) .accountSectionHeader,
.accountFullPanel.clanPageMode .accountSectionHeader,
.accountFullPanel.clanDetailMode .accountSectionHeader,
.accountFullPanel.friendsPageMode .accountSectionHeader {
  display: none;
  margin-bottom: 0;
}

.accountSectionHeader.compact {
  align-items: flex-start;
}

.accountSectionHeader strong {
  display: block;
  color: #26323a;
  font: 700 22px/26px Ubuntu;
}

.accountSectionHeader span {
  display: block;
  margin-top: 2px;
  color: #64747d;
  font: 700 12px/16px Ubuntu;
}

.accountMissionBackButton {
  width: 80px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 13px/32px Ubuntu;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}

.accountDetailActions {
  display: flex;
  gap: 8px;
}

.accountMissionBackButton:hover {
  transform: translateY(-1px);
}

.ffaMissionCard {
  min-height: 122px;
  margin-bottom: 10px;
  padding: 14px;
  border-radius: 5px;
  background: linear-gradient(rgba(20, 27, 31, 0.32), rgba(20, 27, 31, 0.32)), var(--ffa-mission-background-image) center / cover;
}

.ffaMissionCard .accountMission {
  margin: 0;
  background: rgba(246, 250, 252, 0.88);
}

.missionCampaignList {
  display: block;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
}

#missionCampaignList:not(.campaignSelector) {
  display: grid;
  gap: 14px;
}

.accountDetailMenu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
  flex: 1;
  transform-origin: top center;
}

.accountDetailMenu.switching {
  animation: accountViewSwitch 190ms ease both;
}

.accountDetailMenu button {
  min-height: 150px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
  color: #34424b;
  font: 700 24px/29px Ubuntu;
  -webkit-text-stroke: 5.4px #000;
  paint-order: stroke fill;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.accountDetailMenu button:hover {
  background: rgba(255, 255, 255, 0.78);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(31, 42, 48, 0.16);
}

.accountDetailMenu button[data-account-open="missions"],
.accountDetailMenu button[data-account-open="shop"],
.accountDetailMenu button[data-account-open="leaderboards"],
.accountDetailMenu #accountOpenFriendsButton,
.accountDetailMenu #accountOpenClansButton {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.accountDetailMenu button[data-account-open="missions"] {
  background:
    linear-gradient(rgba(20, 27, 31, 0.22), rgba(20, 27, 31, 0.38)),
    url("/imgs/daily_goals_art.jpg") center / cover;
}

.accountDetailMenu button[data-account-open="missions"]:hover {
  background:
    linear-gradient(rgba(20, 27, 31, 0.12), rgba(20, 27, 31, 0.3)),
    url("/imgs/daily_goals_art.jpg") center / cover;
}

.accountDetailMenu button[data-account-open="shop"] {
  background:
    linear-gradient(rgba(20, 27, 31, 0.22), rgba(20, 27, 31, 0.38)),
    url("/imgs/shop_art.jpg") center / cover;
}

.accountDetailMenu button[data-account-open="shop"]:hover {
  background:
    linear-gradient(rgba(20, 27, 31, 0.12), rgba(20, 27, 31, 0.3)),
    url("/imgs/shop_art.jpg") center / cover;
}

.accountDetailMenu #accountOpenFriendsButton {
  background:
    linear-gradient(rgba(20, 27, 31, 0.22), rgba(20, 27, 31, 0.38)),
    url("/imgs/friends_tab_art.jpg") center / cover;
}

.accountDetailMenu #accountOpenFriendsButton:hover {
  background:
    linear-gradient(rgba(20, 27, 31, 0.12), rgba(20, 27, 31, 0.3)),
    url("/imgs/friends_tab_art.jpg") center / cover;
}

.accountDetailMenu #accountOpenClansButton {
  background:
    linear-gradient(rgba(20, 27, 31, 0.22), rgba(20, 27, 31, 0.38)),
    url("/imgs/clan_missions_background_art.jpg") center / cover;
}

.accountDetailMenu #accountOpenClansButton:hover {
  background:
    linear-gradient(rgba(20, 27, 31, 0.12), rgba(20, 27, 31, 0.3)),
    url("/imgs/clan_missions_background_art.jpg") center / cover;
}

.accountDetailMenu button[data-account-open="leaderboards"] {
  background:
    linear-gradient(rgba(20, 27, 31, 0.22), rgba(20, 27, 31, 0.38)),
    url("/imgs/leaderboard_background_art.png") center / cover;
}

.accountDetailMenu button[data-account-open="leaderboards"]:hover {
  background:
    linear-gradient(rgba(20, 27, 31, 0.12), rgba(20, 27, 31, 0.3)),
    url("/imgs/leaderboard_background_art.png") center / cover;
}

.missionCampaignList.switching {
  animation: accountViewSwitch 190ms ease both;
}

.missionCampaignList,
.accountDetailList {
  transform-origin: top center;
}

.accountDetailList.switching {
  animation: accountViewSwitch 190ms ease both;
}

.accountDetailList.accountLoading,
.accountDetailMenu.accountLoading,
.missionCampaignList.accountLoading {
  opacity: 0.72;
  transition: opacity 160ms ease;
}

@keyframes accountViewSwitch {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.missionCampaignList.campaignSelector {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	grid-auto-rows: minmax(150px, auto);
	align-items: stretch;
	gap: 14px;
	overflow: auto;
	padding: 2px 8px 10px 0;
}

.missionCampaignCard {
	position: relative;
	overflow: hidden;
	min-height: 150px;
	border: 0;
	border-radius: 5px;
  background: #111 var(--mission-bg, linear-gradient(135deg, #6b7d87, #c6d2d9)) center center / cover no-repeat;
  cursor: pointer;
  text-align: left;
  animation: accountSelectorIn 320ms ease both;
  animation-delay: var(--mission-delay, 0s);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="ffa"],
.missionCampaignCard.ffaMissionCampaignCard {
	background: #111 var(--ffa-mission-background-image) center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode*="2tdm"],
#missionCampaignList .missionCampaignCard[data-mission-mode*="tdm2"] {
	background: #111 var(--tdm2-mission-background-image) center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode*="4tdm"],
#missionCampaignList .missionCampaignCard[data-mission-mode*="tdm4"] {
	background: #111 url("/imgs/4tdm_art.png") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="assault-bunker"] {
	background: #111 url("/imgs/art_background_assault.jpg") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="duos-squads"] {
	background: #111 url("/imgs/art_background_duos_squads.jpg") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="capture-the-flag"] {
	background: #111 url("/imgs/capture_the_flag_art.png") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="domination"] {
	background: #111 url("/imgs/domination_art.png") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="elimination"] {
	background: #111 url("/imgs/elimination_art.png") center center / cover no-repeat !important;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="clan-wars"] {
	background: #111 url("/imgs/clan_wars_mission_background_art.png") center center / cover no-repeat !important;
}

.missionTrackView {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 2px 8px 12px 0;
}

.missionTrackView.missionTrackEntering {
  animation: accountViewSwitch 220ms ease both;
}

.missionCurrentLayout {
  display: grid;
  gap: 12px;
  width: min(680px, 100%);
  margin: auto;
}

.missionCurrentCard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  box-sizing: border-box;
  padding: 18px;
  border: 2px solid #8abc3f;
  border-radius: 6px;
  background: #f8fbfc;
  color: #34424b;
  box-shadow: 0 8px 20px rgba(80, 126, 34, 0.18);
  animation: missionTrackNodeIn 260ms ease both;
}

.missionCurrentIcon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: #d7e1e7;
}

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

.missionCurrentBody {
  min-width: 0;
}

.missionCurrentBody header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.missionCurrentBody strong {
  color: #25323a;
  font: 700 19px/24px Ubuntu;
  overflow-wrap: anywhere;
}

.missionCurrentBody header span {
  flex: 0 0 auto;
  color: #6d9c32;
  font: 700 11px/15px Ubuntu;
  text-transform: uppercase;
}

.missionCurrentBody p {
  margin: 5px 0 12px;
  color: #53646d;
  font: 700 13px/18px Ubuntu;
  overflow-wrap: anywhere;
}

.missionCurrentProgress {
  overflow: hidden;
  height: 9px;
  border-radius: 5px;
  background: #c6d2d9;
}

.missionCurrentProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8abc3f;
  transition: width 180ms ease;
}

.missionCurrentBody small {
  display: block;
  margin-top: 8px;
  color: #657681;
  font: 700 12px/15px Ubuntu;
}

.missionCompletedCount,
.missionCurrentEmpty {
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(248, 251, 252, 0.82);
  color: #53646d;
  font: 700 13px/18px Ubuntu;
  text-align: center;
}

.missionCompletedCount strong {
  color: #25323a;
}

.missionTrackRail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.missionTrackNode {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  min-height: 106px;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid rgba(37, 49, 56, 0.12);
  border-radius: 6px;
  background: rgba(248, 251, 252, 0.82);
  color: #34424b;
  box-shadow: 0 5px 14px rgba(31, 42, 48, 0.08);
  animation: missionTrackNodeIn 260ms ease both;
  animation-delay: var(--mission-delay, 0s);
}

@keyframes missionTrackNodeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.missionTrackNode.current {
  border-color: #8abc3f;
  background: #f8fbfc;
  box-shadow: 0 8px 20px rgba(80, 126, 34, 0.18);
}

.missionTrackNode.complete {
  border-color: rgba(88, 150, 72, 0.42);
}

.missionTrackNode.locked {
  opacity: 0.72;
}

.missionTrackIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #d7e1e7;
  overflow: hidden;
}

.missionTrackIcon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.missionTrackNode:not(.complete):not(.current) .missionTrackIcon img,
.missionTrackNode.locked .missionTrackIcon img {
  filter: saturate(0);
}

.missionTrackNode.complete .missionTrackIcon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 150, 72, 0.42);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.missionTrackNode.current .missionTrackIcon img {
  filter: none;
}

.missionTrackBody {
  min-width: 0;
}

.missionTrackBody header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.missionTrackBody strong {
  color: #25323a;
  font: 700 15px/19px Ubuntu;
  overflow-wrap: anywhere;
}

.missionTrackBody header span {
  flex: 0 0 auto;
  color: #6a7b84;
  font: 700 11px/15px Ubuntu;
  text-transform: uppercase;
}

.missionTrackNode.current .missionTrackBody header span {
  color: #6d9c32;
}

.missionTrackBody p {
  min-height: 0;
  margin: 4px 0 8px;
  color: #53646d;
  font: 700 12px/17px Ubuntu;
  overflow-wrap: anywhere;
}

.missionTrackProgress {
  overflow: hidden;
  height: 8px;
  border-radius: 4px;
  background: #c6d2d9;
}

.missionTrackProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8abc3f;
}

.missionTrackBody small {
  display: block;
  margin-top: 7px;
  color: #657681;
  font: 700 11px/14px Ubuntu;
}

.missionTrackIndex {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(37, 49, 56, 0.18);
  font: 700 22px/22px Ubuntu;
}

#missionCampaignList .missionCampaignCard[data-mission-mode="manhunt"] {
	background: #111 url("/imgs/art_background_manhunt.jpg") center center / cover no-repeat !important;
}

.missionCampaignCard::before,
.missionCampaignCard::after {
	content: "";
	position: absolute;
  inset: 0;
  pointer-events: none;
}

.missionCampaignCard::before {
  background: linear-gradient(90deg, rgba(12, 18, 22, 0.78), rgba(12, 18, 22, 0.22));
}

.missionCampaignCard::after {
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: inherit;
}

.missionCampaignCard:not(.locked):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(31, 42, 48, 0.18);
}

.missionCampaignCard.locked {
  cursor: default;
  filter: grayscale(0.7);
}

.missionCampaignShade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.18), transparent 34%);
}

.missionCampaignProgress {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(10, 16, 19, 0.68);
  color: #fff;
  font: 700 11px/14px Ubuntu;
  text-transform: uppercase;
}

.missionCampaignText {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
	color: #fff;
	overflow-wrap: anywhere;
}

.missionCampaignText b,
.missionCampaignText small {
  display: block;
  font-style: normal;
}

.missionCampaignText b {
	font: 700 24px/28px Ubuntu;
}

.missionCampaignText small {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.82);
	font: 700 11px/15px Ubuntu;
}

.accountMission,
.accountGoal,
.accountShopEmpty,
.accountEmpty {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  color: #34424b;
  font: 700 12px/15px Ubuntu;
  transition: background-color 140ms ease, transform 140ms ease;
}

.accountMission:hover,
.accountGoal:hover {
  transform: translateY(-1px);
}

.accountMission.complete,
.accountGoal.complete {
  background: rgba(138, 188, 63, 0.22);
}

.accountMissionTop,
.accountGoalMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.accountMission strong,
.accountGoal strong,
.accountShopEmpty strong {
  color: #26323a;
  font-size: 13px;
}

.accountMission p,
.accountGoal p,
.accountShopEmpty p {
  margin: 5px 0 8px;
  color: #596a73;
  font: 700 11px/14px Ubuntu;
}

.accountProgress {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #bdc9d0;
}

.accountProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #e7b93f;
  transition: width 420ms ease;
}

.accountMission.complete .accountProgress span,
.accountGoal.complete .accountProgress span,
.accountMissionNode.complete .accountProgress span {
  background: #8abc3f;
}

.accountReward,
.accountGoalMeta b {
  margin-top: 6px;
  color: #6c8f32;
  font: 700 11px/14px Ubuntu;
}

.accountClansContent {
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
}

.accountClansContent[hidden] {
  display: none !important;
}

.clanBackButton {
  display: none !important;
  width: 116px;
  height: 30px;
  margin-bottom: 8px;
  border: 0;
  border-radius: 5px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 12px/30px Ubuntu;
  cursor: pointer;
}

.clanStatus {
  min-height: 16px;
  margin-bottom: 8px;
  color: #596a73;
  font: 700 12px/16px Ubuntu;
}

.clanBrowseGrid,
.clanViewGrid {
  display: grid;
  gap: 12px;
  min-height: 0;
  animation: accountViewSwitch 190ms ease both;
}

.clanBrowseGrid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
}

.clanViewGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clanChoiceGrid {
  display: grid;
  gap: 10px;
}

.clanChoiceButton {
  min-height: 74px;
  border: 0;
  border-radius: 5px;
  padding: 12px;
  background: #8abc3f;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

.clanChoiceButton strong,
.clanChoiceButton span {
  display: block;
}

.clanChoiceButton strong {
  font: 700 17px/22px Ubuntu;
}

.clanChoiceButton span {
  margin-top: 4px;
  font: 700 11px/15px Ubuntu;
  opacity: 0.86;
}

.clanChoiceButton.join {
  background: #6f86d6;
}

.clanChoiceButton.view {
  background: #e0a33c;
}

.clanPanelSection {
  min-width: 0;
  padding: 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
  color: #34424b;
}

.clanPanelSection header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.clanPanelSection header strong,
.clanViewTitle strong {
  display: block;
  color: #26323a;
  font: 700 16px/20px Ubuntu;
}

.clanPanelSection header span,
.clanViewTitle span,
.clanMuted {
  color: #64747d;
  font: 700 11px/15px Ubuntu;
}

.clanViewTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.clanRankList,
.clanMissionList,
.clanPoolList,
.clanManageMembers,
.clanInviteSettings {
  display: grid;
  gap: 7px;
}

.clanRankRow,
.clanMemberManageRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.86);
  font: 700 11px/14px Ubuntu;
}

.clanRankRow {
  cursor: pointer;
}

.clanRankRow b {
  color: #7d933b;
}

.clanRankRow span,
.clanMemberManageRow span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clanRankRow em,
.clanMemberManageRow em {
  color: #64747d;
  font-style: normal;
}

.clanRankRow small {
  color: #7d933b;
  font-size: 10px;
}

.clanForm {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.clanForm input {
  height: 34px;
  border: 0;
  border-radius: 5px;
  padding: 0 10px;
  background: #eef4f7;
  color: #26323a;
  font: 700 13px/34px Ubuntu;
}

.clanInviteToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 8px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.86);
  color: #34424b;
  font: 700 11px/14px Ubuntu;
}

.clanInviteToggle input {
  width: 18px;
  height: 18px;
  accent-color: #6f86d6;
}

.clanForm button,
.clanEditButton,
.clanDangerButton,
.clanMemberManageRow button,
.clanInviteSettings button {
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: #8abc3f;
  color: #fff;
  font: 700 12px/32px Ubuntu;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

.clanDangerButton,
.clanMemberManageRow button[data-clan-action="ban"],
.clanMemberManageRow button[data-clan-confirm-action="ban"] {
	background: #bd5b5b;
}

.clanEditButton {
	background: #6f86d6;
}

.clanInviteSettings input {
  height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 9px;
  background: #eef4f7;
  color: #26323a;
  font: 700 12px/32px Ubuntu;
}

.clanInviteSettings small {
  color: #64747d;
  font: 700 10px/13px Ubuntu;
}

.clanMemberManageRow {
  grid-template-columns: minmax(0, 1fr) 52px 52px;
}

.clanMemberManageRow button {
  width: 52px;
}

.clanForm button:hover,
.clanChoiceButton:hover,
.clanEditButton:hover,
.clanDangerButton:hover,
.clanMemberManageRow button:hover,
.clanInviteSettings button:hover,
.clanBackButton:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.clanMission {
  min-height: 104px;
  padding: 9px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.86);
}

.clanMission.complete {
  background: rgba(138, 188, 63, 0.22);
}

.clanMissionTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.clanMission strong {
  color: #26323a;
  font: 700 12px/15px Ubuntu;
}

.clanMission p,
.clanMission small {
  display: block;
  margin: 5px 0;
  color: #596a73;
  font: 700 10px/13px Ubuntu;
}

.clanMissionTop span {
  color: #7d933b;
  font: 700 11px/14px Ubuntu;
}

.clanPoolList {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 28px;
}

.clanPoolList.clanPoolNextOnly {
  padding-left: 0;
}

.clanPoolList:not(.clanPoolNextOnly) {
  padding-left: 0;
  min-height: 118px;
}

.clanPoolList:not(.clanPoolNextOnly)::before,
.clanPoolList:not(.clanPoolNextOnly) .clanPoolNode.current::before {
  display: none;
}

.clanPoolList:not(.clanPoolNextOnly) .clanPoolNode:not(.current) {
  display: none;
}

.clanPoolList:not(.clanPoolNextOnly) .clanPoolNode,
.clanPoolList:not(.clanPoolNextOnly) .clanPoolNextReward {
  display: none !important;
}

.clanPoolList:not(.clanPoolNextOnly) .clanPoolNode.current {
  margin-left: 0;
}

.clanPoolList::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 4px;
  border-radius: 999px;
  background: #bcc8cf;
}

.clanPoolList.clanPoolNextOnly::before {
  display: none;
}

.clanPoolNextReward {
  padding: 12px;
  border-radius: 5px;
  background: rgba(231, 185, 63, 0.22);
  box-shadow: inset 0 0 0 2px rgba(232, 167, 58, 0.42);
  color: #34424b;
}

.clanPoolNextReward strong,
.clanPoolNextReward b,
.clanPoolNextReward span {
  display: block;
  font-style: normal;
}

.clanPoolNextReward strong {
  color: #7d933b;
  font: 700 11px/14px Ubuntu;
  text-transform: uppercase;
}

.clanPoolNextReward b {
  margin-top: 4px;
  color: #26323a;
  font: 700 20px/24px Ubuntu;
}

.clanPoolNextReward span {
  margin-top: 5px;
  color: #596a73;
  font: 700 12px/15px Ubuntu;
}

.clanRoadReward {
  display: grid;
  gap: 13px;
  padding: 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 2px rgba(232, 167, 58, 0.42);
  color: #34424b;
}

.clanRoadTrack {
  display: none;
}

.clanRoadTrack span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--road-progress, 0%);
  border-radius: inherit;
  background: #e7b93f;
}

.clanRoadPoints {
  display: none;
  justify-content: space-between;
  gap: 14px;
  margin-top: 0;
}

.clanRoadPoint {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 86px;
}

.clanRoadPoint i {
  display: none;
}

.clanRoadPointPrevious i {
  display: none;
}

.clanRoadPoint b {
  font: 700 12px/15px Ubuntu;
}

.clanRoadSummary {
  display: grid;
  gap: 3px;
}

.clanRoadSummary strong {
  color: #26323a;
  font: 700 22px/26px Ubuntu;
}

.clanRoadSummary > span {
  color: #7d933b;
  font: 700 11px/14px Ubuntu;
  text-transform: uppercase;
}

.clanRoadSummary > em {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #596a73;
  font-style: normal;
  font: 700 12px/15px Ubuntu;
}

.clanRoadSummary > em > i {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(231, 185, 63, 0.22);
  color: #7a5d12;
  font-style: normal;
}

.clanPoolNode {
  position: relative;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 5px;
  background: rgba(189, 201, 208, 0.72);
  color: #34424b;
  overflow: hidden;
}

.clanPoolNode::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 18px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bcc8cf;
  box-shadow: 0 0 0 4px #eef4f7;
}

.clanPoolNode.unlocked {
  background: rgba(231, 185, 63, 0.28);
}

.clanPoolNode.unlocked::before {
  background: #e7b93f;
}

.clanPoolNode.claimed {
  background: rgba(138, 188, 63, 0.24);
}

.clanPoolNode.claimed::before {
  background: #8abc3f;
}

.clanPoolNode.current {
  box-shadow: inset 0 0 0 2px rgba(232, 167, 58, 0.55);
}

.clanPoolNode.locked {
  filter: saturate(0.55);
}

.clanPoolNode.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(238, 244, 247, 0.76), rgba(198, 210, 217, 0.54)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 8px, rgba(100, 116, 125, 0.12) 8px 16px);
  backdrop-filter: blur(1px);
}

.clanPoolNode b,
.clanPoolNode span,
.clanPoolNode em {
  position: relative;
  z-index: 2;
  display: block;
  font-style: normal;
}

.clanPoolNode b {
  color: #26323a;
  font: 700 15px/18px Ubuntu;
}

.clanPoolNode span,
.clanPoolNode em,
.clanEmpty {
  color: #596a73;
  font: 700 11px/14px Ubuntu;
}

.clanEmpty.large {
  padding: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.clanConfirmModal,
.clanActionModal,
.clanPublicModal,
.accountPublicProfileModal,
.accountNotificationsModal,
.discordDisconnectConfirmModal,
.accountPasswordSetupModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(20, 27, 31, 0.42);
}

.clanConfirmModal[hidden],
.clanActionModal[hidden],
.clanPublicModal[hidden],
.accountPublicProfileModal[hidden],
.accountNotificationsModal[hidden],
.discordDisconnectConfirmModal[hidden],
.accountPasswordSetupModal[hidden] {
  display: none;
}

.clanConfirmModal,
.clanPublicModal,
.accountPublicProfileModal,
.accountNotificationsModal,
.discordDisconnectConfirmModal,
.accountPasswordSetupModal {
  animation: accountModalFadeIn 140ms ease-out both;
}

.clanConfirmModal.closing,
.clanPublicModal.closing,
.accountPublicProfileModal.closing,
.accountNotificationsModal.closing,
.discordDisconnectConfirmModal.closing {
  animation: accountModalFadeOut 120ms ease-in both;
}

.clanConfirmBox,
.clanActionBox,
.clanPublicBox,
.accountPublicProfileBox,
.accountNotificationsBox,
.discordDisconnectConfirmBox,
.accountPasswordSetupBox {
  width: clamp(340px, 34vw, 720px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: clamp(16px, 1.4vw, 32px);
  border-radius: 5px;
  background: #eef4f7;
  box-shadow: 0 12px 30px rgba(20, 27, 31, 0.24);
}

.clanActionBox {
  width: clamp(380px, 38vw, 760px);
}

.clanConfirmBox {
  width: clamp(360px, 42vw, 760px);
  max-width: calc(100vw - 24px);
  max-height: min(82vh, calc(100vh - 24px));
  animation: accountProfileModalIn 140ms ease-out both;
}

.clanConfirmModal.closing .clanConfirmBox {
  animation: accountProfileModalOut 120ms ease-in both;
}

.clanPublicBox {
  position: relative;
  display: grid;
  gap: 10px;
  width: clamp(520px, 72vw, 1280px);
  max-width: calc(100vw - 24px);
  max-height: min(82vh, calc(100vh - 24px));
  overflow: auto;
  animation: accountProfileModalIn 150ms ease-out both;
}

.clanPublicModal.closing .clanPublicBox {
  animation: accountProfileModalOut 120ms ease-in both;
}

#clanPublicClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: #d96868;
  color: #fff;
  font: 900 14px/28px Ubuntu;
  cursor: pointer;
}

#clanPublicTitle {
  padding-right: 34px;
  color: #26323a;
  font: 900 clamp(20px, 1.7vw, 28px)/1.1 Ubuntu;
}

#clanPublicSummary {
  color: #5e707a;
  font: 700 12px/16px Ubuntu;
}

.clanPublicMembers {
  display: grid;
  gap: 7px;
  max-height: min(56vh, 560px);
  padding-right: 4px;
}

.clanPublicMember {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 8px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.9);
  color: #34424b;
  font: 700 12px/15px Ubuntu;
}

.clanPublicMember b {
  color: #7d933b;
}

.clanPublicMember span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clanPublicMember small {
  color: #7d933b;
  font-size: 10px;
}

.clanPublicMember em {
  color: #64747d;
  font-style: normal;
}

.clanDangerActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.clanDangerActions .clanDangerButton,
.clanDangerActions .clanEditButton {
	margin-bottom: 0;
}

.accountNotificationsBox {
  display: flex;
  flex-direction: column;
  width: clamp(520px, 72vw, 1280px);
  max-width: calc(100vw - 24px);
  max-height: min(82vh, calc(100vh - 24px));
  animation: accountProfileModalIn 150ms ease-out both;
}

.accountPublicProfileBox {
  width: clamp(520px, 72vw, 1280px);
  max-width: calc(100vw - 24px);
  max-height: min(82vh, calc(100vh - 24px));
  overflow: auto;
  animation: accountProfileModalIn 150ms ease-out both;
}

.accountPublicProfileModal.closing .accountPublicProfileBox,
.accountNotificationsModal.closing .accountNotificationsBox {
  animation: accountProfileModalOut 120ms ease-in both;
}

.accountPublicProfileHeader,
.accountNotificationsHeader,
.accountPasswordSetupBox header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 0.8vw, 18px);
  margin-bottom: clamp(10px, 0.8vw, 18px);
}

.clanConfirmBox strong,
.clanActionBox strong,
.accountPublicProfileHeader strong,
.accountNotificationsHeader strong,
.accountPasswordSetupBox header strong {
  color: #26323a;
  font: 700 clamp(18px, 1.15vw, 28px)/1.2 Ubuntu;
}

.accountPasswordSetupBox {
  display: grid;
  gap: 12px;
  width: clamp(360px, 32vw, 560px);
}

.accountPasswordSetupBox header {
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 2px;
}

.accountPasswordSetupBox header span {
  color: #596a73;
  font: 700 12px/16px Ubuntu;
}

.accountPasswordSetupBox input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c8d4dc;
  border-radius: 5px;
  background: #f9fcfd;
  color: #26323a;
  font: 700 13px/18px Ubuntu;
  padding: 11px 12px;
  outline: none;
}

.accountPasswordSetupBox input:focus {
  border-color: #77a9cf;
  box-shadow: 0 0 0 3px rgba(119, 169, 207, 0.2);
}

.accountPasswordSetupBox button {
  border: 0;
  border-radius: 5px;
  background: #5a9bc8;
  color: #fff;
  cursor: pointer;
  font: 700 13px/18px Ubuntu;
  padding: 11px 12px;
}

.accountPublicProfileHeader button,
.accountNotificationsHeader button {
  height: clamp(28px, 1.9vw, 44px);
  border: 0;
  border-radius: 5px;
  padding: 0 clamp(10px, 0.8vw, 18px);
  background: #c6d2d9;
  color: #34424b;
  font: 700 clamp(12px, 0.8vw, 18px)/clamp(28px, 1.9vw, 44px) Ubuntu;
  cursor: pointer;
}

.accountPublicProfileContent {
  display: grid;
  gap: clamp(12px, 0.9vw, 22px);
  min-width: 0;
}

.accountPublicProfileCard {
  display: grid;
  grid-template-columns: clamp(70px, 5vw, 118px) minmax(0, 1fr);
  gap: clamp(14px, 1vw, 26px);
  align-items: center;
}

.accountPublicProfileCard img {
  width: clamp(70px, 5vw, 118px);
  height: clamp(70px, 5vw, 118px);
  border-radius: 50%;
  background: #c6d2d9;
}

.accountPublicProfileInfo strong,
.accountPublicProfileInfo span {
  display: block;
}

.accountPublicProfileInfo strong {
  overflow: hidden;
  color: #26323a;
  font: 700 clamp(20px, 1.35vw, 34px)/1.18 Ubuntu;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountPublicProfileInfo span {
  margin-top: clamp(4px, 0.32vw, 8px);
  color: #596a73;
  font: 700 clamp(12px, 0.86vw, 20px)/1.32 Ubuntu;
}

.accountPublicStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(118px, 8vw, 190px), 1fr));
  gap: clamp(8px, 0.65vw, 16px);
}

.accountPublicStat {
  min-width: 0;
  padding: clamp(9px, 0.7vw, 17px);
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.86);
}

.accountPublicStat span,
.accountPublicStat strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountPublicStat span {
  color: #64747d;
  font: 700 clamp(10px, 0.68vw, 16px)/1.28 Ubuntu;
  text-transform: uppercase;
}

.accountPublicStat strong {
  margin-top: clamp(3px, 0.25vw, 7px);
  color: #26323a;
  font: 700 clamp(14px, 0.95vw, 23px)/1.28 Ubuntu;
}

.trophyValue,
.trophyRewardInline,
.trophyInline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  line-height: inherit;
  white-space: nowrap;
}

.trophyValue b,
.trophyRewardInline b,
.trophyValue em {
  font: inherit;
}

.trophyValue em {
  color: inherit;
  font-style: normal;
}

.trophyIcon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -2px;
}

.clanPoolNextReward .trophyValue,
.clanPoolNextReward .trophyRewardInline,
.clanPoolNextReward .trophyInline,
.clanRankRow .trophyValue,
.clanRankRow .trophyRewardInline,
.clanRankRow .trophyInline,
.clanMemberManageRow .trophyValue,
.clanMemberManageRow .trophyRewardInline,
.clanMemberManageRow .trophyInline,
.clanMission .trophyValue,
.clanMission .trophyRewardInline,
.clanMission .trophyInline,
[class*="Achievement"] .trophyValue,
[class*="Achievement"] .trophyRewardInline,
[class*="Achievement"] .trophyInline,
[class*="achievement"] .trophyValue,
[class*="achievement"] .trophyRewardInline,
[class*="achievement"] .trophyInline {
  display: inline-flex;
}

body.mobile .accountPublicProfileBox {
  width: calc(100vw - 16px);
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  padding: 12px;
}

body.mobile .accountPublicProfileCard {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
}

body.mobile .accountPublicProfileCard img {
  width: 54px;
  height: 54px;
}

.accountFriendsContent {
  min-height: 0;
  height: 100%;
  padding-right: 8px;
  overflow: hidden;
}

.accountFriendsGrid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  animation: accountViewSwitch 190ms ease both;
}

.accountFriendsPanel,
.accountFriendChat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
  color: #34424b;
  overflow: hidden;
}

.accountFriendsPanel header,
.accountFriendChat header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.accountFriendsPanel header strong,
.accountFriendChat header strong,
.accountFriendsSubhead {
  color: #26323a;
  font: 700 16px/20px Ubuntu;
}

.accountFriendsPanel header span {
  color: #596a73;
  font: 700 11px/14px Ubuntu;
}

.accountFriendsSubhead {
  display: block;
  margin: 14px 0 7px;
  font-size: 13px;
  line-height: 16px;
}

.accountFriendRequestForm,
.accountFriendChatForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.accountFriendChatForm {
  flex: 0 0 auto;
  align-items: center;
  margin-bottom: 0;
}

.accountFriendRequestForm input,
.accountFriendChatForm input {
  min-width: 0;
  height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 10px;
  background: rgba(224, 234, 239, 0.94);
  color: #26323a;
  font: 700 12px/32px Ubuntu;
  text-align: left;
  outline: none;
}

.accountFriendRequestForm button,
.accountFriendChatForm button,
.accountFriendChat header button,
.accountFriendRequest button,
.accountFriendJoinButton,
.accountPublicProfileActions button,
.accountNotificationActions button {
  height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  background: #8abc3f;
  color: #fff;
  font: 700 12px/32px Ubuntu;
  cursor: pointer;
}

.accountFriendChat header button {
  height: 28px;
  background: #c6d2d9;
  color: #34424b;
  line-height: 28px;
}

.accountFriendRequest button[data-friend-action="decline"],
.accountFriendRequest button[data-friend-action="block"],
.accountNotificationActions button.decline {
  background: #d46a54;
}

.accountFriendList {
  display: grid;
  align-content: start;
  gap: 7px;
}

.accountFriendsLists {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}

.accountFriendsLists .accountFriendsSubhead {
  margin-bottom: 0;
}

.accountFriendRow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.7);
  cursor: pointer;
}

.accountFriendRow:hover {
  background: rgba(224, 234, 239, 0.98);
}

.accountFriendRow img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c6d2d9;
}

.accountFriendJoinButton {
  align-self: center;
}

.accountFriendRow span,
.accountFriendProfileButton,
.accountFriendRow small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountFriendProfileButton {
  border: 0;
  padding: 0;
  background: transparent;
  color: #26323a;
  font: 700 13px/16px Ubuntu;
  text-align: left;
  cursor: pointer;
}

.accountFriendProfileButton:hover {
  text-decoration: underline;
}

.accountFriendRow small {
  margin-top: 2px;
  color: #596a73;
  font: 700 10px/13px Ubuntu;
}

.accountFriendRequest {
  display: grid;
  gap: 7px;
}

.accountFriendRequest > div:last-child,
.accountNotificationActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.accountFriendMessages {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
  margin-bottom: 10px;
  overflow: auto;
}

.accountFriendMessage {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 5px;
  background: rgba(224, 234, 239, 0.86);
}

.accountFriendMessage.mine {
  background: rgba(138, 188, 63, 0.22);
}

.accountFriendMessage b {
  color: #26323a;
  font: 700 11px/14px Ubuntu;
}

.accountFriendMessage b small {
  margin-left: 5px;
  color: #6c7d86;
  font: 700 10px/12px Ubuntu;
}

.accountFriendMessage span {
  overflow-wrap: anywhere;
  color: #34424b;
  font: 700 12px/16px Ubuntu;
}

.accountFriendChat.loading {
  opacity: 0.72;
}

.accountPublicProfileActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accountPublicProfileActions span {
  color: #596a73;
  font: 700 12px/16px Ubuntu;
  text-transform: capitalize;
}

.accountPublicStats {
  display: grid;
  gap: 10px;
}

.accountPublicStats > strong {
  color: #26323a;
  font: 700 13px/16px Ubuntu;
}

.accountPublicStatsTop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.accountPublicStatsTop div,
.accountPublicShapeGrid div {
  min-width: 0;
  padding: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
}

.accountPublicStatsTop strong,
.accountPublicStatsTop span,
.accountPublicShapeGrid span,
.accountPublicShapeGrid b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountPublicStatsTop strong {
  color: #26323a;
  font: 700 16px/19px Ubuntu;
}

.accountPublicStatsTop span,
.accountPublicShapeGrid span {
  color: #596a73;
  font: 700 10px/13px Ubuntu;
}

.accountPublicShapeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.accountPublicShapeGrid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.accountPublicShapeGrid b {
  color: #26323a;
  font: 700 12px/15px Ubuntu;
}

.accountPublicProfileBox .accountPublicProfileActions {
  gap: clamp(8px, 0.65vw, 16px);
}

.accountPublicProfileBox .accountPublicProfileActions button {
  height: clamp(32px, 2.15vw, 50px);
  padding: 0 clamp(12px, 0.9vw, 22px);
  font: 700 clamp(12px, 0.85vw, 20px)/clamp(32px, 2.15vw, 50px) Ubuntu;
}

.accountPublicProfileBox .accountPublicProfileActions span {
  font: 700 clamp(12px, 0.86vw, 20px)/1.32 Ubuntu;
}

.accountPublicProfileBox .accountPublicStats {
  gap: clamp(10px, 0.8vw, 20px);
}

.accountPublicProfileBox .accountPublicStats > strong {
  font: 700 clamp(13px, 0.9vw, 22px)/1.25 Ubuntu;
}

.accountPublicProfileBox .accountPublicStatsTop {
  gap: clamp(8px, 0.65vw, 16px);
}

.accountPublicProfileBox .accountPublicStatsTop div,
.accountPublicProfileBox .accountPublicShapeGrid div {
  padding: clamp(8px, 0.65vw, 16px);
}

.accountPublicProfileBox .accountPublicStatsTop strong {
  font: 700 clamp(16px, 1.1vw, 27px)/1.2 Ubuntu;
}

.accountPublicProfileBox .accountPublicStatsTop span,
.accountPublicProfileBox .accountPublicShapeGrid span {
  font: 700 clamp(10px, 0.68vw, 16px)/1.3 Ubuntu;
}

.accountPublicProfileBox .accountPublicShapeGrid {
  gap: clamp(6px, 0.5vw, 13px);
  max-height: clamp(220px, 16vw, 360px);
}

.accountPublicProfileBox .accountPublicShapeGrid div {
  gap: clamp(8px, 0.65vw, 16px);
}

.accountPublicProfileBox .accountPublicShapeGrid b {
  font: 700 clamp(12px, 0.82vw, 20px)/1.25 Ubuntu;
}

@media (max-width: 760px) {
  .accountFriendsGrid,
  .accountPublicStatsTop,
  .accountPublicShapeGrid {
    grid-template-columns: 1fr;
  }
}

.accountUsernameLink {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.accountUsernameLink:hover,
[data-profile-username]:hover,
.clanRankRow span:hover,
.clanMemberManageRow span:hover {
  text-decoration: underline;
}

@keyframes accountModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes accountModalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes accountProfileModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes accountProfileModalOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

.accountNotificationsList {
  display: grid;
  gap: clamp(8px, 0.62vw, 16px);
  min-height: clamp(120px, 18vh, 320px);
  overflow: auto;
  padding-right: clamp(4px, 0.35vw, 9px);
}

.accountNotificationRow {
  padding: clamp(10px, 0.82vw, 20px);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  color: #34424b;
}

.accountNotificationRow.unread {
  box-shadow: inset 0 0 0 1px rgba(231, 185, 63, 0.5);
}

.accountNotificationRow strong,
.accountNotificationRow span,
.accountNotificationRow small {
  display: block;
}

.accountNotificationRow strong {
  color: #26323a;
  font: 700 clamp(13px, 0.92vw, 22px)/1.23 Ubuntu;
}

.accountNotificationRow span {
  margin-top: clamp(4px, 0.32vw, 8px);
  color: #596a73;
  font: 700 clamp(11px, 0.78vw, 18px)/1.35 Ubuntu;
}

.accountNotificationRow small {
  margin-top: clamp(5px, 0.38vw, 10px);
  color: #758690;
  font: 700 clamp(10px, 0.68vw, 15px)/1.3 Ubuntu;
}

.accountNotificationActions {
  display: flex;
  gap: clamp(6px, 0.45vw, 12px);
  margin-top: clamp(8px, 0.6vw, 15px);
}

.accountNotificationActions button {
  height: clamp(28px, 1.85vw, 42px);
  border: 0;
  border-radius: 5px;
  padding: 0 clamp(10px, 0.8vw, 18px);
  background: #6f86d6;
  color: #fff;
  font: 700 clamp(11px, 0.76vw, 17px)/clamp(28px, 1.85vw, 42px) Ubuntu;
  cursor: pointer;
}

.accountFriendChatForm button {
  align-self: center;
}

.accountNotificationActions button.decline {
  background: #bd5b5b;
}

.clanConfirmBox p,
.clanActionBox p,
.discordDisconnectConfirmContent p {
  margin: clamp(8px, 0.6vw, 16px) 0 clamp(14px, 1vw, 26px);
  color: #596a73;
  font: 700 clamp(12px, 0.86vw, 20px)/1.32 Ubuntu;
}

.discordDisconnectConfirmContent {
  display: grid;
  gap: clamp(10px, 0.8vw, 18px);
}

.clanActionForm {
  display: grid;
  gap: clamp(9px, 0.7vw, 18px);
}

.clanActionForm input {
  height: clamp(34px, 2.25vw, 52px);
  border: 0;
  border-radius: 5px;
  padding: 0 clamp(10px, 0.8vw, 18px);
  background: #fff;
  color: #26323a;
  font: 700 clamp(13px, 0.9vw, 21px)/clamp(34px, 2.25vw, 52px) Ubuntu;
}

#clanActionTagInput {
  text-transform: uppercase;
}

.clanActionStatus {
  min-height: clamp(15px, 1.1vw, 24px);
  color: #596a73;
  font: 700 clamp(11px, 0.78vw, 18px)/1.35 Ubuntu;
}

.clanModalActions,
.accountConfirmActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(8px, 0.65vw, 16px);
}

.clanConfirmBox button,
.clanActionBox button,
.accountConfirmActions button {
  min-width: clamp(82px, 6vw, 138px);
  height: clamp(32px, 2.15vw, 50px);
  border: 0;
  border-radius: 5px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 clamp(12px, 0.85vw, 20px)/clamp(32px, 2.15vw, 50px) Ubuntu;
  cursor: pointer;
}

#clanConfirmOk {
  background: #bd5b5b;
  color: #fff;
}

#discordDisconnectConfirm {
  min-width: clamp(190px, 14vw, 280px);
  padding: 0 clamp(12px, 0.9vw, 20px);
  background: #bd5b5b;
  color: #fff;
  white-space: nowrap;
}

#clanActionSubmit {
  background: #8abc3f;
  color: #fff;
}

.accountGoal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  animation: accountItemIn 210ms ease both;
}

.accountGoal .accountProgress {
  grid-column: 1 / -1;
}

body.mobile .startMenuHolder.changelogHolder {
  display: flex;
}

@media (max-width: 680px) {
  body.mobile .startMenu {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  body.mobile .startMenuHolder.mainHolder,
  body.mobile .startMenuHolder.changelogHolder {
    width: 350px;
    min-width: 350px;
    flex: 0 0 350px;
  }

  body.mobile .startMenuHolder.changelogHolder {
    width: 330px;
    min-width: 330px;
    flex-basis: 330px;
    height: 300px;
  }

  body.mobile #patchNotes {
    max-width: none;
  }
}

body.mobile .accountFullPanel {
  inset: var(--mobile-account-screen-offset) auto auto 50%;
  width: var(--mobile-account-screen-width);
  height: var(--mobile-account-screen-height);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(10px, 1.1vw, 18px);
  transform: translateX(-50%) translateY(18px);
  transform-origin: top center;
}

body.mobile .accountFullPanel.open {
  transform: translateX(-50%) translateY(0);
}

body.mobile .startMenuHolder.accountHolder {
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.mobile .accountPanelHeader {
  height: 28px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 28px;
}

body.mobile .accountSummary img {
  width: 54px;
  height: 54px;
  margin: 0 auto 6px;
}

body.mobile .accountSummaryText strong {
  font-size: 16px;
  line-height: 19px;
}

body.mobile .accountSummaryText span {
  font-size: 12px;
  line-height: 15px;
}

body.mobile .accountCompactMission {
  min-height: 42px;
  width: 86%;
  margin: 6px auto;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 13px;
}

body.mobile .accountCompactMission strong {
  font-size: 12px;
  line-height: 14px;
}

body.mobile .accountCompactMission span {
  line-height: 13px;
}

body.mobile .accountSummaryActions {
  gap: 5px;
}

body.mobile .accountSummaryActions button {
  height: 28px;
  font-size: 12px;
  line-height: 28px;
}

body.mobile .missionCampaignList {
  display: block;
}

.accountMissionNode {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 28px;
  animation: accountItemIn 210ms ease both;
}

@keyframes accountSelectorIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes accountItemIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accountMissionNode:last-child {
  padding-bottom: 0;
}

.accountMissionConnector {
  position: absolute;
  top: 44px;
  bottom: -2px;
  left: 22px;
  width: 4px;
  border-radius: 999px;
  background: #bcc8cf;
}

.accountMissionNode:last-child .accountMissionConnector {
  display: none;
}

.accountMissionBadge {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #c6d2d9;
  color: #34424b;
  font: 700 18px/46px Ubuntu;
  text-align: center;
  box-shadow: inset 0 0 0 4px #dde6eb;
  overflow: hidden;
}

.accountMissionBadge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.accountMissionNode.complete .accountMissionBadge {
  background: #8abc3f;
  color: #fff;
}

.accountMissionNode.locked .accountMissionBadge {
  background: #aebbc3;
  color: #eef3f6;
}

.accountMissionNode.current .accountMissionBadge {
  background: #e8a73a;
  color: #fff;
}

.accountMissionNode.current .accountMissionContent {
  box-shadow: inset 0 0 0 2px rgba(232, 167, 58, 0.45);
}

.accountMissionContent {
  min-height: 132px;
  padding: 16px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  color: #34424b;
  transition: background-color 140ms ease, transform 140ms ease;
}

.accountMissionContent:hover {
  transform: translateY(-1px);
}

.accountMissionNode.locked .accountMissionContent {
  background: rgba(255, 255, 255, 0.34);
}

.accountMissionContent .accountMissionTop strong {
  font-size: 18px;
  line-height: 23px;
}

.accountMissionContent .accountMissionTop span {
  color: #657780;
  font-size: 13px;
}

.accountMissionContent p {
  margin: 8px 0 14px;
  color: #596a73;
  font: 700 13px/18px Ubuntu;
}

.accountMissionMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: #62727b;
  font: 700 12px/16px Ubuntu;
}

.accountMissionMeta b {
  color: #6c8f32;
}

.accountEmpty.large {
  padding: 22px;
  font-size: 15px;
  line-height: 21px;
}

.accountShopContent {
  min-height: 0;
  overflow: auto;
}

.accountLeaderboardsContent {
  min-height: 0;
  overflow: auto;
  padding: 2px 6px 8px 0;
}

.leaderboardArchivePanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.leaderboardArchivePanel.loading {
  opacity: 0.72;
  pointer-events: none;
}

.leaderboardArchiveControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.leaderboardArchiveControls button,
.leaderboardArchiveCustom button {
  height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 12px/32px Ubuntu;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.leaderboardArchiveControls button.active,
.leaderboardArchiveCustom button {
  background: #8abc3f;
  color: #fff;
}

.leaderboardArchiveControls button:hover,
.leaderboardArchiveCustom button:hover {
  transform: translateY(-1px);
}

.leaderboardArchiveCustom {
  display: inline-grid;
  grid-template-columns: 82px auto;
  gap: 6px;
  align-items: center;
}

.leaderboardArchiveCustom input {
  width: 82px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #34424b;
  font: 700 12px/32px Ubuntu;
}

.leaderboardArchiveLoading {
  color: #596a73;
  font: 700 12px/32px Ubuntu;
}

.leaderboardArchiveLayout {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(320px, 1fr);
  gap: 12px;
  min-height: 0;
}

.leaderboardArchiveShelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(73px, auto);
  gap: 10px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.leaderboardModeButton {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 73px;
  border: 0;
  border-radius: 5px;
  background: #18242b;
  color: #fff;
  text-align: left;
  cursor: pointer;
  filter: saturate(0);
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.leaderboardActiveFrame {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(138, 188, 63, 0.95), 0 8px 16px rgba(31, 42, 48, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: transform 210ms ease, width 210ms ease, height 210ms ease, opacity 120ms ease;
}

.leaderboardModeButton::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px;
  border-radius: 3px;
  background: var(--leaderboard-bg) center / cover no-repeat;
}

.leaderboardModeButton::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: 3px;
  background: linear-gradient(rgba(18, 28, 34, 0.08), rgba(18, 28, 34, 0.68));
  pointer-events: none;
}

.leaderboardModeButton span {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.leaderboardModeButton b {
  font: 700 17px/20px Ubuntu;
}

.leaderboardModeButton small {
  font: 700 11px/14px Ubuntu;
  opacity: 0.9;
}

.leaderboardModeButton.active {
  filter: saturate(1);
  box-shadow: none;
}

.leaderboardModeButton:hover {
  filter: saturate(0) brightness(1.06);
  transform: translateY(-1px);
}

.leaderboardModeButton.active:hover {
  filter: saturate(1) brightness(1.06);
}

.leaderboardArchiveDetail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.56);
  overflow: hidden;
}

.leaderboardArchiveDetail header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.54);
}

.leaderboardArchiveDetail header strong {
  color: #26323a;
  font: 700 19px/24px Ubuntu;
}

.leaderboardArchiveDetail header span,
.leaderboardArchiveMeta {
  color: #596a73;
  font: 700 12px/18px Ubuntu;
}

.leaderboardArchiveMeta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  text-align: right;
}

.leaderboardRewardCountdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.leaderboardRewardHelp {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(38, 50, 58, 0.85);
  color: #fff;
  cursor: help;
  font: 700 11px/16px Ubuntu;
}

.leaderboardArchiveDetail header .leaderboardRewardHelp > span {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 150px;
  padding: 7px 9px;
  border-radius: 5px;
  background: #26323a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  font: 700 11px/16px Ubuntu;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.leaderboardArchiveDetail header .leaderboardRewardHelp > span::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 100%;
  border: 5px solid transparent;
  border-bottom-color: #26323a;
}

.leaderboardArchiveDetail header .leaderboardRewardHelp:hover > span,
.leaderboardArchiveDetail header .leaderboardRewardHelp:focus > span {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.leaderboardRankList {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.leaderboardRankRow {
  display: grid;
  grid-template-columns: 42px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  color: #34424b;
}

.leaderboardRankRow[data-rank="2"],
.leaderboardRankRow[data-rank="3"] {
  background: rgba(198, 210, 217, 0.5);
}

.leaderboardRankRow img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboardRankRow b {
  color: #26323a;
  font: 700 13px/16px Ubuntu;
}

.leaderboardRankRow small,
.leaderboardRankRow em {
  color: #596a73;
  font: 700 11px/14px Ubuntu;
  font-style: normal;
}

.leaderboardRankName {
  display: grid;
  min-width: 0;
}

.leaderboardRankName b,
.leaderboardRankName small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboardArchiveEmpty {
  padding: 24px;
  color: #596a73;
  font: 700 13px/18px Ubuntu;
}

.accountMissionsSection.skinShopMode .accountSectionHeader,
.accountMissionsSection.leaderboardMode .accountSectionHeader {
  display: none;
}

.skinShopPanel {
  display: grid;
  gap: 12px;
  padding: 2px 4px 4px;
}

.skinShopPanel.loading {
  opacity: 0.7;
  pointer-events: none;
}

.skinShopHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 2px;
}

.skinShopHeader span {
  color: #596a73;
  font-size: 13px;
  line-height: 18px;
}

.skinShopTabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 6px;
  min-width: 216px;
}

.skinShopTabs button,
.skinShopButton {
  border: 0;
  border-radius: 5px;
  background: #c6d2d9;
  color: #34424b;
  font: 700 12px/32px Ubuntu;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, filter 120ms ease, transform 120ms ease;
}

.skinShopTabs button {
  height: 32px;
  padding: 0 12px;
}

.skinShopTabs button.active {
  background: #8abc3f;
  color: #fff;
}

.skinShopTabs button:hover,
.skinShopButton:hover {
  transform: translateY(-1px);
}

.skinShopGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  animation: skinShopSwitch 180ms ease-out both;
}

@keyframes skinShopSwitch {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skinShopCard {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 184px;
  padding: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  color: #34424b;
  font: 700 12px/15px Ubuntu;
  transition: background-color 140ms ease, transform 140ms ease;
}

.skinShopCard:hover {
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-1px);
}

.skinShopCard.equipped {
  background: rgba(138, 188, 63, 0.22);
  box-shadow: inset 0 0 0 2px rgba(138, 188, 63, 0.18);
}

.skinShopCard.disabled {
  opacity: 0.52;
}

.skinShopCard.disabled:hover {
  transform: none;
}

.skinShopCard.inventory {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 58px;
  padding: 7px 8px;
}

.skinShopPreview {
  width: min(100%, 94px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(38, 50, 58, 0.08);
}

.skinShopCard.inventory .skinShopPreview {
  width: 44px;
}

.skinShopInfo {
  min-width: 0;
  text-align: center;
}

.skinShopCard.inventory .skinShopInfo {
  text-align: left;
}

.skinShopInfo strong {
  display: block;
  overflow: hidden;
  color: #26323a;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skinShopInfo span {
  color: #596a73;
  font-size: 11px;
  line-height: 14px;
}

.skinShopButton {
  height: 32px;
  padding: 0 12px;
}

.skinShopButton:disabled {
  cursor: default;
  transform: none;
}

.skinShopConfirm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.skinShopCard.inventory .skinShopButton {
  min-width: 74px;
}

.skinShopButton.ghost {
  background: #c6d2d9;
  color: #34424b;
}

.skinShopButton:not(.ghost),
.skinShopButton.buy {
  background: #8abc3f;
  color: #fff;
}

.skinShopButton:hover,
.skinShopButton.buy:hover {
  filter: brightness(1.05);
}

.skinShopError {
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(176, 39, 39, 0.12);
  color: #8a1f1f;
  font-size: 13px;
  font-weight: 700;
}

.accountShopEmpty.large strong {
  display: block;
  margin-bottom: 8px;
  color: #26323a;
  font-size: 18px;
  line-height: 24px;
}

.accountShopEmpty.large p {
  margin: 0;
  color: #596a73;
  font-size: 13px;
  line-height: 18px;
}

body.mobile .accountFullBody {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.mobile .accountMissionsSection {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.mobile .accountDetailMenu {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  gap: clamp(6px, 0.85vw, 12px);
  overflow: hidden;
}

body.mobile .accountDetailMenu button {
  min-width: 0;
  min-height: 150px;
  height: auto;
  padding: 0;
  overflow: hidden;
  font-size: 24px;
  line-height: 29px;
  -webkit-text-stroke-width: 5.4px;
  overflow-wrap: anywhere;
}

body.mobile .clanBrowseGrid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
}

body.mobile .clanViewGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.mobile .skinShopGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mobile .leaderboardArchiveLayout {
  grid-template-columns: minmax(220px, 0.58fr) minmax(320px, 1fr);
}

body.mobile .leaderboardArchiveShelf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile .clanViewTitle {
  display: block;
}

body.mobile .missionCampaignList.campaignSelector {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(220px, auto);
  align-content: start;
  gap: clamp(12px, 1.1vw, 18px);
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

body.mobile .missionCampaignCard {
  width: 100%;
  min-width: 0;
  min-height: 220px;
  box-sizing: border-box;
}

body.mobile .missionTrackRail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

body.mobile .missionTrackView,
body.mobile .missionTrackNode {
  min-width: 0;
}

body.mobile .missionCurrentLayout {
  width: 100%;
}

body.mobile .missionCurrentCard {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

body.mobile .missionCurrentIcon {
  width: 64px;
  height: 64px;
}

body.mobile .missionTrackNode {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 96px;
}

body.mobile .missionCampaignText {
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 16px;
  text-align: center;
}

body.mobile .missionCampaignText b {
  font-size: 40px;
  line-height: 46px;
}

body.mobile .missionCampaignText small {
  margin-top: 8px;
  font-size: 22px;
  line-height: 30px;
}

body.mobile .clanConfirmModal,
body.mobile .clanActionModal,
body.mobile .clanPublicModal,
body.mobile .accountPublicProfileModal,
body.mobile .accountNotificationsModal,
body.mobile .discordDisconnectConfirmModal,
body.mobile .accountPasswordSetupModal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  transform: none;
}

body.mobile .clanConfirmModal[hidden],
body.mobile .clanActionModal[hidden],
body.mobile .clanPublicModal[hidden],
body.mobile .accountPublicProfileModal[hidden],
body.mobile .accountNotificationsModal[hidden],
body.mobile .discordDisconnectConfirmModal[hidden],
body.mobile .accountPasswordSetupModal[hidden] {
  display: none;
}

body.mobile .clanConfirmBox,
body.mobile .clanActionBox,
body.mobile .clanPublicBox,
body.mobile .accountPublicProfileBox,
body.mobile .accountNotificationsBox,
body.mobile .discordDisconnectConfirmBox,
body.mobile .accountPasswordSetupBox {
  width: min(calc(100dvw - 24px), 760px);
  height: auto;
  box-sizing: border-box;
  max-width: calc(100dvw - 24px);
  max-height: calc(90dvh - 24px);
  min-width: 0;
  min-height: 0;
  animation: none;
  overflow: auto;
  padding: 14px;
  transform: none;
  transform-origin: center center;
}

body.mobile .clanPublicBox,
body.mobile .accountPublicProfileBox,
body.mobile .accountNotificationsBox {
  width: calc(100dvw - 24px);
  height: calc(86dvh - 24px);
  max-width: calc(100dvw - 24px);
  max-height: calc(86dvh - 24px);
}

body.mobile .accountPublicProfileBox,
body.mobile .accountNotificationsBox {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.mobile .clanConfirmBox *,
body.mobile .clanActionBox *,
body.mobile .clanPublicBox *,
body.mobile .accountPublicProfileBox *,
body.mobile .accountNotificationsBox *,
body.mobile .discordDisconnectConfirmBox *,
body.mobile .accountPasswordSetupBox * {
  max-width: 100%;
  box-sizing: border-box;
}

body.mobile .accountPublicProfileHeader,
body.mobile .accountNotificationsHeader,
body.mobile .accountPasswordSetupBox header {
  flex-wrap: wrap;
}

body.mobile .clanModalActions,
body.mobile .clanDangerActions,
body.mobile .accountConfirmActions,
body.mobile .accountPublicProfileActions {
  flex-wrap: wrap;
}

body.mobile .clanPublicMembers {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

body.mobile .accountNotificationsHeader {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

body.mobile .accountPublicProfileContent,
body.mobile .accountNotificationsList {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  min-width: 0;
  max-height: none;
  box-sizing: border-box;
  overflow: auto;
}

body.mobile .accountNotificationsList {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 12px;
  padding-right: 4px;
}

body.mobile .accountNotificationRow {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
}

body.mobile .accountNotificationRow strong,
body.mobile .accountNotificationRow span,
body.mobile .accountNotificationRow small {
  margin-top: 0;
  min-width: 0;
  white-space: normal;
}

body.mobile .accountNotificationActions {
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}

body.mobile .accountNotificationActions button {
  flex: 1 1 120px;
  min-width: 0;
  white-space: normal;
}

body.mobile .accountPublicProfileCard {
  grid-template-columns: clamp(70px, 5vw, 118px) minmax(0, 1fr);
  gap: clamp(14px, 1vw, 26px);
}

body.mobile .accountPublicProfileCard img {
  width: clamp(70px, 5vw, 118px);
  height: clamp(70px, 5vw, 118px);
}

body.mobile .accountPublicStatsTop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mobile .accountPublicShapeGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menuTab.discord {
  padding: 6px 12px 6px 36px;
  background: #7289da;
}
.menuTab.stat {
  background: #f00 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkQAP/////DxJiZGRkRJZC4YAkcCpEl6C9QrgNhKweSgoBUcBf8wTAguMAAAAASUVORK5CYII=) 11px 9px no-repeat;
  /*
  let canvas = document.body.appendChild(document.createElement('canvas'))
  canvas.width = 10
  canvas.height = 10
  canvas.style.background = '#f00'
  let ctx = canvas.getContext('2d')
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 2, 2, 8)
  ctx.fillRect(4, 0, 2, 10)
  ctx.fillRect(8, 4, 2, 6)
  copy(canvas.toDataURL())
  */
  padding: 6px 12px 6px 30px;
}
.menuTab.achieve {
  background: #8abc3f;
}
.menuTab > a {
  color: #fff !important;
  text-decoration: none;
}
.menuTab > a:link:hover, .menuTab > a:visited:hover {
  text-decoration: underline;
}

.sliderHolder {
  width: 350px;
  height: 270px;
  overflow: hidden;
}
body.mobile .sliderHolder {
  position: relative;
  height: 220px;
}
.startMenuHolder.mainHolder .sliderHolder {
  height: 302px;
}
body.mobile .startMenuHolder.mainHolder .sliderHolder {
  height: 252px;
}

body.mobile .startMenuHolder.mainHolder .sliderHolder.slided {
  overflow: visible;
}
.startMenuHolder.mainHolder .serverSelector {
  height: 136px;
}
body.mobile .startMenuHolder.mainHolder .serverSelector {
  height: 92px;
}

table {
  width: 100%;
}
body.mobile .desktopControlTab {
  display: none;
}
.resetControls {
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 1000ms, margin 1000ms;
  margin: 0 -6px;
}
.resetControls.spin {
  transition: transform 500ms, opacity 1000ms 150ms, margin 1000ms 150ms;
  transform: rotate(360deg);
}
.resetControls.active {
  opacity: 1;
  margin: 0 5px;
  cursor: pointer;
}
.controlTable {
  border-collapse: collapse;
  margin: 0 2px;
}
.controlTable tr {
  border: 0;
  transition: opacity 500ms;
}
.controlTable td {
  transition: padding 500ms;
}
.controlTable div {
  position: relative;
  top: 0px;
  height: 18px;
  transition: height 500ms, top 500ms;
}
.controlTable td b {
  display: inline-block;
  width: 12px;
  height: 16px;
  cursor: pointer;
  text-align: right;
  vertical-align: bottom;
}
.controlTable td b:hover {
  color: #777;
}
.controlTable td.editing b {
  background: #fff;
  color: #333;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -2px -7px -2px -3px;
  text-align: center;
  cursor: text;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.controlTable td.editing span {
  visibility: hidden;
}

#optColors {
  width: 220px;
}
#optBorders {
  width: 120px;
}
#optNames {
  width: 200px;
}
#optMobile {
  display: none;
}
body.mobile #optMobile {
  display: inline-block;
  width: 100px;
}

.slider {
  position: relative;
  top: 0px;
  opacity: 1;
  width: 100%;
  transition: top 500ms, opacity 500ms;
}
.slided .slider {
  top: -270px;
}
body.mobile .slided .slider {
  top: -220px;
}

.startMenuSlidingContent {
  height: 270px;
}
body.mobile .startMenuSlidingContent {
  height: 220px;
}

body.mobile .sliderHolder.slided > .slider:nth-child(3) {
  position: absolute;
  inset: 0;
  top: 0 !important;
  display: block;
  height: 252px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.startMenuHolder.mainHolder .slider:first-child {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.startMenuHolder.mainHolder #optName {
  margin-top: auto;
}

#startMenuSlidingTrigger {
  display: none;
}

.sliderHolder > .slider:nth-child(3) {
  display: none;
}

.sliderHolder.slided > .slider:nth-child(3) {
  display: block;
}

.sliderHolder.slided > .slider:first-child {
  top: 0 !important;
  opacity: 1 !important;
}

#patchNotes {
  max-width: 330px;
  flex: 1 1 0;
  padding: 5px 10px 10px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.15);
}
body.mobile #patchNotes {
  max-width: none;
}

#patchNotes ul {
  padding-left: 15px;
  margin-left: 10px;
}

#patchNotes table.poll-list {
  margin: 8px 5px 20px;
}
#patchNotes table.poll-table {
  text-align: center;
  margin: 0 0 12px;
}
#patchNotes table.poll-table thead {
  font-weight: bold;
}
#patchNotes b small {
  color: #444;
}
#patchNotes b small a {
  margin-left: 10px;
}

#patchNotes div {
  transition: max-height 500ms, opacity 500ms, line-height 500ms;
  max-height: 1500px;
  opacity: 1;
  margin-bottom: 0;
  line-height: 1.2;
}
#patchNotes div:nth-last-child(n+2)::after {
  content: '';
  display: block;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  margin: 18px 0;
  transition: margin 500ms;
}
#patchNotes.default div.balance,
#patchNotes.default div.patch,
#patchNotes.updates div.announcement,
#patchNotes.updates div.poll,
#patchNotes.updates div.event,
#patchNotes.updates div.balance,
#patchNotes.updates div.patch,
#patchNotes.balance div.update,
#patchNotes.balance div.announcement,
#patchNotes.balance div.poll,
#patchNotes.balance div.event,
#patchNotes.balance div.patch {
  max-height: 0px;
  opacity: 0;
  line-height: 0;
  pointer-events: none;
}
#patchNotes.default div.balance::after,
#patchNotes.default div.patch::after,
#patchNotes.updates div.announcement::after,
#patchNotes.updates div.poll::after,
#patchNotes.updates div.event::after,
#patchNotes.updates div.balance::after,
#patchNotes.updates div.patch::after,
#patchNotes.balance div.update::after,
#patchNotes.balance div.announcement::after,
#patchNotes.balance div.poll::after,
#patchNotes.balance div.event::after,
#patchNotes.balance div.patch::after {
  margin: 0;
}

.startButtonHolder {
  margin-top: auto;
}

#startButton {
  margin: 0;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  color: white;
  text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  background: #a9d86d;
  border: 0;
  border-bottom: 2px solid #8abc3f;
  cursor: pointer;
  box-shadow: inset 0 -2px #8abc3f;
  border-radius: 5px;
  font: 16px Ubuntu;
}
#startButton:hover {
  margin-top: 1px;
  height: 39px;
  border-bottom: 1px solid #8abc3f;
}

#startButton:active {
  margin-top: 2px;
  height: 38px;
  background: #8abc3f;
  border-bottom: 0px;
  outline: none;
  box-shadow: none;
}

.proximityVoiceButton {
  display: block;
  width: 74px;
  height: 22px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: rgba(25, 28, 31, 0.68);
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font: 700 10px/18px Ubuntu;
  white-space: nowrap;
  letter-spacing: 0;
}

.proximityVoiceButton.active {
  background: rgba(38, 162, 105, 0.74);
  border-color: rgba(173, 255, 211, 0.55);
}

.proximityVoiceButton:disabled {
  background: rgba(75, 84, 91, 0.58);
  border-color: rgba(255, 255, 255, 0.16);
  cursor: not-allowed;
  opacity: 0.72;
}

.proximityVoiceControls {
  position: fixed;
  right: 16px;
  bottom: 196px;
  z-index: 12;
  display: none;
  pointer-events: auto;
}

.proximityVoiceControls.visible {
  display: block;
}

body.mobile .proximityVoiceControls {
  right: 12px;
  bottom: 178px;
}

.bottomHolder > a {
  display: inline-block;
  position: relative;
  margin: 2px;
  border: 0px;
  padding: 6px 0;
  width: 330px; /* 110px in original */
  height: 16px;
  font-size: smaller;
  color: white !important;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  cursor: pointer;
  background: #b58efd;
  border-radius: 5px;
  box-shadow: inset 0 -4px rgba(0, 0, 0, 0.15);
}
.bottomHolder > a:hover {
  top: 1px;
  height: 15px;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15);
}
.bottomHolder > a:active {
  top: 4px;
  height: 12px;
  box-shadow: inset 0 -25px rgba(0, 0, 0, 0.15);
}

/* Customize the label (the container) */
.count {
  display: inline-block;
  width: 20px;
  font: bold 12px Ubuntu;
}
.count span {
  font-size: 10px;
}

.container {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  border-radius: 4px;
  background-color: #eee;
  border: 1px solid #ccc;
}
.radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: #eee;
  border: 1px solid #ccc;
}

.container:hover input ~ .checkmark, .container:hover input ~ .radio {
  background-color: #ccc;
}
.container input:disabled ~ .checkmark, .container input:disabled ~ .radio {
  background-color: #ddd;
}

.container input:checked ~ .checkmark, .container input:checked ~ .radio {
  background-color: #8abc3f;
  border: 1px solid #8abc3f;
}

.container:hover input:checked ~ .checkmark, .container:hover input:checked ~ .radio {
  background-color: #7fa843;
  border: 1px solid #7fa843;
}

.container input:disabled:checked ~ .checkmark, .container input:disabled:checked ~ .radio {
  background-color: #a1c172;
  border: 1px solid #a1c172;
}

.container .checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.container .radio:after {
  content: '';
  display: none;
  margin: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.container input:checked ~ .checkmark:after, .container input:checked ~ .radio:after {
  display: block;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: 13px/1 Ubuntu;
  padding: 2px 28px 2px 8px;
  height: 21px;
  margin-left: 3px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6+qAAAAwklEQVQoU42QMQrCQBBFZxeGgJ7BI1jYa2GzTTY3sRUECy1yA0svEQhhEHIHLdRrqF2a5EuCkbgmmin/zLz5f5QxZsTMK2ZeR1F0p5ay1i7zPD+LiLT1S01Za7dEtCGiY5Zl8zRNH81h3/d3SqkFgFOSJJNOUBAEAwAHIpq6sAbkprWexXF86QSVjTaY53nhy8lfSBWtvuDAKhlAL8gHyHUGAFrr8a84zZhvR7VojBkyc1gUxV5Erl0/cfUvUN9Fd+4JA1JkCdbmVf8AAAAASUVORK5CYII=) 100% no-repeat #eee;
  /*
  let canvas = document.body.appendChild(document.createElement('canvas'))
  canvas.width = Math.ceil(8 * Math.sqrt(2)) + 6
  canvas.height = Math.ceil(5 * Math.sqrt(2))
  let ctx = canvas.getContext('2d')
  ctx.strokeStyle = '#4c4c4c'
  ctx.translate(4 * Math.sqrt(2), -3 * Math.sqrt(2))
  ctx.rotate(Math.PI * 0.25)
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(1, 7)
  ctx.lineTo(7, 7)
  ctx.lineTo(7, 1)
  ctx.stroke()
  copy(canvas.toDataURL())
  */
  border-radius: 4px;
  border: 1px solid #ccc;
}
select:hover {
  background-color: #ccc;
}
select:active {
  background-color: #eee;
}

#optShaderIntensity,
#optGraphicsEngine {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 3px);
}

.tooltip {
  position: relative;
  bottom: 1px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  text-align: center;
  background: rgb(0, 0, 0, 0.6);
  font: bold 10px/15px Ubuntu;
  color: #fff;
  margin: 0 2px;
}
.tooltip::before {
  content: '?';
}

.tooltip span {
  position: absolute;
  width: 160px;
  background-color: #444;
  color: #fff;
  font: bold 11px Ubuntu;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  margin-left: -80px;
  left: 50%;
  transition: opacity 200ms, bottom 200ms;
  pointer-events: none;
  opacity: 0;
  bottom: 200%;
}
.tooltip span::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
}
.tooltip:hover span {
  pointer-events: unset;
  opacity: 1;
  bottom: 150%;
}

i {
  transition: transform 500ms;
}
i.arrow {
  border: solid #484848;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}
i.reset {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: #000 2px solid;
  border-right-color: transparent;
  border-radius: 50%;
  position: relative;
  top: 3px;
}
i.reset::after {
  content: '';
  display: inline-block;
  border: 3px solid;
  border-color: transparent #000 #000 transparent;
  position: relative;
  left: 3px;
  bottom: 8px;
}
i.cross {
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 5px -3px;
  padding: 6px;
}
i.cross.x {
  transform: rotate(135deg);
}
i.cross::before, i.cross::after {
  content: '';
  background-color: #000;
  border-radius: 2px;
  float: left;
}
i.cross::before {
  width: 12px;
  height: 2px;
  margin-left: -5px;
}
i.cross::after {
  width: 2px;
  height: 12px;
  margin-top: -7px;
}
i.flag {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: #000;
  margin: 0 15px 0 5px;
}
i.flag::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 7px;
  background-color: #000;
  margin: 0 0 5px 3px;
  transition: margin-bottom 500ms;
}
i.flag.down::before {
  margin-bottom: 2px;
}