/* NEMAZING ONLINE — profile, account-link, settings and inventory refresh */

.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: #746fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Profile overview */
.account-unified-page .profile-unified-card {
  overflow: hidden;
  border: 1px solid rgba(64, 58, 111, .10);
  box-shadow: 0 22px 70px rgba(38, 33, 77, .10);
}

.account-unified-page .profile-unified-body {
  display: block;
}

.account-unified-page .profile-game-section {
  padding: 32px;
  border-top: 1px solid rgba(49, 43, 86, .08);
}

.account-unified-page .profile-game-section .profile-unified-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 22px;
}

.account-unified-page .profile-game-section .profile-unified-title h2 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
}

.account-unified-page .profile-game-section .profile-unified-title p {
  flex-basis: 100%;
  margin: 0;
  color: #85839a;
  font-size: 14px;
}

.account-unified-page .profile-game-section .profile-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.account-unified-page .profile-game-section .profile-unified-grid > div {
  min-height: 92px;
  padding: 18px;
  border: 1px solid rgba(56, 50, 95, .08);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(249, 249, 255, .96), rgba(244, 243, 251, .78));
}

.account-unified-page .profile-game-section .profile-unified-grid > div > span {
  display: block;
  margin-bottom: 9px;
  color: #8a889d;
  font-size: 12px;
  font-weight: 700;
}

.account-unified-page .profile-game-section .profile-unified-grid > div > strong {
  display: block;
  overflow: hidden;
  color: #27233f;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.account-unified-page .profile-game-section .profile-unified-grid > div > small {
  display: block;
  margin-top: 7px;
  color: #9996aa;
}

/* Account link v2 */
.game-link-v2 {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(67, 58, 117, .10);
  box-shadow: 0 24px 80px rgba(38, 33, 77, .10);
}

.game-link-v2::before {
  position: absolute;
  top: -110px;
  right: -90px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 111, 255, .16), rgba(120, 111, 255, 0) 68%);
  content: '';
  pointer-events: none;
}

.game-link-v2-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  border-bottom: 1px solid rgba(54, 47, 93, .08);
}

.game-link-v2-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(145deg, #7d73ff, #5d55db);
  box-shadow: 0 13px 30px rgba(94, 83, 222, .28);
  color: white;
  font-size: 25px;
  font-weight: 900;
}

.game-link-v2-copy h2,
.settings-v2-head h2 {
  margin: 0;
  color: #25213d;
  font-size: clamp(23px, 2.2vw, 32px);
  letter-spacing: -.03em;
}

.game-link-v2-copy p,
.settings-v2-head p {
  margin: 8px 0 0;
  color: #858198;
  line-height: 1.55;
}

.game-link-v2-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(103, 95, 143, .11);
  border-radius: 999px;
  background: rgba(246, 245, 251, .92);
  color: #716e83;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.game-link-v2-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aaa6b8;
  box-shadow: 0 0 0 4px rgba(170, 166, 184, .12);
}

.game-link-v2-status.is-linked {
  border-color: rgba(42, 171, 118, .16);
  background: rgba(235, 251, 244, .92);
  color: #1d8a5e;
}

.game-link-v2-status.is-linked i {
  background: #2ab576;
  box-shadow: 0 0 0 4px rgba(42, 181, 118, .13);
}

.game-link-v2-loading {
  min-height: 290px;
  margin: 28px 30px;
  border-radius: 24px;
  background: linear-gradient(90deg, #f5f4fa 20%, #fbfaff 40%, #f5f4fa 60%);
  background-size: 300% 100%;
  animation: account-link-v2-loading 1.5s linear infinite;
}

.game-link-v2-loading[hidden] { display: none !important; }

@keyframes account-link-v2-loading {
  to { background-position: -300% 0; }
}

.game-link-v2-state {
  padding: 30px;
}

.game-link-v2-state[hidden] { display: none !important; }

.game-link-v2-codebox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 24px 26px;
  border: 1px solid rgba(100, 88, 193, .13);
  border-radius: 24px;
  background: linear-gradient(140deg, #faf9ff, #f2f0ff);
}

.game-link-v2-codebox > span {
  grid-column: 1 / -1;
  color: #827d98;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-link-v2-codebox .account-link-code {
  min-width: 0;
  color: #302956;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(29px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.1;
}

.game-link-v2-codebox .account-link-code-empty {
  color: #9a96aa;
  font-family: inherit;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -.02em;
}

.game-link-v2-codebox > div {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.game-link-v2-codebox small { color: #9692a7; }
.game-link-v2-codebox b { color: #655cdb; font-size: 19px; }

.game-link-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.game-link-v2-actions .btn { min-height: 46px; }

.game-link-v2-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.game-link-v2-guide article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(56, 50, 95, .08);
  border-radius: 18px;
  background: #fbfafd;
}

.game-link-v2-guide article > b {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #ece9ff;
  color: #655bdc;
  font-size: 14px;
}

.game-link-v2-guide article div { display: grid; gap: 4px; }
.game-link-v2-guide article strong { color: #302c47; font-size: 14px; }
.game-link-v2-guide article span { color: #8a8799; font-size: 12px; line-height: 1.45; }

.game-link-v2-note {
  margin: 16px 0 0;
  color: #9995a7;
  font-size: 12px;
}

.game-link-v2-success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(40, 174, 117, .16);
  border-radius: 19px;
  background: #effaf5;
}

.game-link-v2-success > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: #2bb678;
  color: white;
  font-size: 21px;
  font-weight: 900;
}

.game-link-v2-success div { display: grid; gap: 3px; }
.game-link-v2-success strong { color: #246c4f; }
.game-link-v2-success small { color: #65917e; }

.game-link-v2-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.game-link-v2-details > div {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid rgba(56, 50, 95, .08);
  border-radius: 17px;
  background: #faf9fc;
}

.game-link-v2-details span { color: #898599; font-size: 12px; }
.game-link-v2-details strong { color: #2f2b45; font-size: 16px; }
.game-link-v2 .account-link-status { margin: 0 30px 24px; }

/* Settings v2 */
.settings-v2 {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(67, 58, 117, .10);
  box-shadow: 0 24px 80px rgba(38, 33, 77, .10);
}

.settings-v2-head {
  padding: 29px 30px 25px;
  border-bottom: 1px solid rgba(54, 47, 93, .08);
}

.settings-v2-form { display: block; }

.settings-v2-avatar {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 26px 30px 0;
  padding: 22px;
  border: 1px solid rgba(97, 86, 174, .11);
  border-radius: 22px;
  background: linear-gradient(145deg, #faf9ff, #f4f2ff);
}

.settings-v2-avatar .avatar-settings-preview {
  display: grid;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  place-items: center;
  overflow: hidden;
  border: 4px solid white;
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(76, 65, 154, .18);
  background: linear-gradient(145deg, #7d73ff, #5148c8);
  color: white;
  font-size: 34px;
  font-weight: 900;
}

.settings-v2-avatar .avatar-settings-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-v2-avatar-copy { min-width: 0; }
.settings-v2-avatar-copy > strong { display: block; color: #2c2844; font-size: 18px; }
.settings-v2-avatar-copy > small { display: block; margin-top: 5px; color: #8d899d; }
.settings-v2-avatar-copy .avatar-settings-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }

.settings-v2 .avatar-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.settings-v2-delete {
  border: 1px solid rgba(210, 74, 91, .15) !important;
  background: rgba(255, 244, 246, .96) !important;
  color: #bf4051 !important;
}

.settings-v2-delete:hover { background: #ffecef !important; }
.settings-v2-delete:disabled { opacity: .45; }

.settings-v2-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 30px;
}

.settings-v2-fields .field {
  display: grid;
  gap: 9px;
  margin: 0;
}

.settings-v2-fields .field > span {
  color: #4c475f;
  font-size: 13px;
  font-weight: 800;
}

.settings-v2-fields .input {
  min-height: 51px;
  border-radius: 15px;
}

.settings-v2-fields .input:disabled {
  border-color: rgba(54, 47, 93, .06);
  background: #f4f3f7;
  color: #888597;
}

.settings-v2-email { grid-column: 1 / -1; }

.settings-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 30px;
  border-top: 1px solid rgba(54, 47, 93, .08);
  background: #faf9fc;
}

.settings-v2-footer > span { color: #9692a3; font-size: 12px; }
.settings-v2-footer .btn { min-width: 210px; }

/* Transfer server select */
#transfer-server { cursor: pointer; }

/* Inventory v2 */
.inventory-v2-page main { padding-top: 44px; }
.inventory-v2-main { padding: 36px 0 90px; }

.inventory-v2-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.inventory-v2-header h1 {
  margin: 0;
  color: #25213d;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.055em;
  line-height: .98;
}

.inventory-v2-total {
  display: grid;
  min-width: 155px;
  padding: 16px 20px;
  border: 1px solid rgba(61, 54, 103, .09);
  border-radius: 20px;
  background: white;
  box-shadow: 0 13px 40px rgba(38, 33, 77, .07);
}

.inventory-v2-total strong { color: #5f56d8; font-size: 29px; line-height: 1; }
.inventory-v2-total span { margin-top: 5px; color: #8e8a9f; font-size: 11px; }

.inventory-v2-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: end;
  gap: 16px;
  margin-bottom: 30px;
  padding: 18px;
  border: 1px solid rgba(60, 53, 101, .09);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 50px rgba(38, 33, 77, .07);
}

.inventory-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-category-tabs .inventory-filter {
  min-height: 39px;
  padding: 0 15px;
  border: 1px solid rgba(58, 51, 96, .09);
  border-radius: 12px;
  background: #f7f6fa;
  color: #656174;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.inventory-category-tabs .inventory-filter:hover { transform: translateY(-1px); background: #eeecf8; }
.inventory-category-tabs .inventory-filter.active {
  border-color: transparent;
  background: linear-gradient(145deg, #756cff, #5b52d1);
  box-shadow: 0 9px 22px rgba(92, 81, 211, .24);
  color: white;
}

.inventory-rarity-select {
  display: grid;
  gap: 7px;
}

.inventory-rarity-select > span {
  color: #888496;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-rarity-select .input {
  min-height: 43px;
  border-radius: 12px;
  cursor: pointer;
}

.inventory-rarity-select.is-disabled { opacity: .5; }

.inventory-v2-page .inventory-section-heading {
  margin: 0 0 17px;
  padding: 0;
}

.inventory-v2-page .inventory-section-heading h2 {
  margin: 0;
  color: #2a263f;
  font-size: 24px;
  letter-spacing: -.025em;
}

.inventory-v2-page .inventory-section-heading p {
  margin: 6px 0 0;
  color: #908c9d;
  font-size: 13px;
}

.inventory-v2-page .inventory-plates-section { margin-bottom: 34px; }
.inventory-v2-page .inventory-grid { gap: 14px; }

.inventory-v2-page .inventory-card {
  border: 1px solid rgba(55, 49, 90, .08);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(37, 31, 70, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.inventory-v2-page .inventory-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(37, 31, 70, .11);
}

.inventory-v2-page .inventory-card-image { border-radius: 16px; }
.inventory-v2-page .inventory-card-copy h3 { color: #2d2942; }
.inventory-v2-page .inventory-card-copy p { color: #8c8899; }

.inventory-v2-page .inventory-empty,
.inventory-v2-page .inventory-login {
  padding: 50px 24px;
  border: 1px solid rgba(60, 53, 101, .09);
  border-radius: 24px;
  background: white;
  box-shadow: 0 16px 50px rgba(38, 33, 77, .07);
  text-align: center;
}

.inventory-v2-page .inventory-empty .btn { margin-top: 12px; }
.inventory-v2-page .inventory-pager { margin-top: 34px; }
.inventory-v2-page .inventory-page-button { border-radius: 13px; }

@media (max-width: 1000px) {
  .account-unified-page .profile-game-section .profile-unified-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-v2-toolbar { grid-template-columns: 1fr; }
  .inventory-rarity-select { max-width: 240px; }
}

@media (max-width: 760px) {
  .account-unified-page .profile-game-section { padding: 22px 18px; }
  .account-unified-page .profile-game-section .profile-unified-grid { grid-template-columns: 1fr; }

  .game-link-v2-head { grid-template-columns: auto minmax(0, 1fr); padding: 21px 18px; }
  .game-link-v2-status { grid-column: 1 / -1; justify-self: start; }
  .game-link-v2-mark { width: 49px; height: 49px; border-radius: 16px; }
  .game-link-v2-state { padding: 20px 18px; }
  .game-link-v2-codebox { grid-template-columns: 1fr; padding: 21px 18px; }
  .game-link-v2-codebox > div { justify-items: start; }
  .game-link-v2-guide { grid-template-columns: 1fr; }
  .game-link-v2-details { grid-template-columns: 1fr; }
  .game-link-v2-actions { display: grid; }
  .game-link-v2-actions .btn { width: 100%; }
  .game-link-v2 .account-link-status { margin: 0 18px 18px; }

  .settings-v2-head { padding: 23px 19px; }
  .settings-v2-avatar { align-items: flex-start; margin: 18px 18px 0; padding: 18px; }
  .settings-v2-avatar .avatar-settings-preview { width: 72px; height: 72px; border-radius: 22px; }
  .settings-v2-fields { grid-template-columns: 1fr; padding: 20px 18px; }
  .settings-v2-email { grid-column: auto; }
  .settings-v2-footer { align-items: stretch; flex-direction: column; padding: 18px; }
  .settings-v2-footer .btn { width: 100%; min-width: 0; }

  .inventory-v2-page main { padding-top: 20px; }
  .inventory-v2-main { padding: 28px 0 70px; }
  .inventory-v2-header { align-items: stretch; flex-direction: column; }
  .inventory-v2-total { min-width: 0; align-self: flex-start; }
  .inventory-v2-toolbar { margin-inline: -4px; padding: 12px; border-radius: 19px; }
  .inventory-category-tabs { flex-wrap: nowrap; margin: 0 -12px; padding: 2px 12px 8px; overflow-x: auto; scrollbar-width: none; }
  .inventory-category-tabs::-webkit-scrollbar { display: none; }
  .inventory-category-tabs .inventory-filter { flex: 0 0 auto; }
  .inventory-rarity-select { max-width: none; }
}

@media (max-width: 520px) {
  .settings-v2-avatar { flex-direction: column; }
  .settings-v2-avatar-copy .avatar-settings-actions { display: grid; width: 100%; }
  .settings-v2-avatar-copy .btn { width: 100%; }
  .game-link-v2-copy h2, .settings-v2-head h2 { font-size: 23px; }
}