/* ClashFarm beta profile refresh: artwork, navigation, statistics and profile hubs. */

:root {
  --cf-profile-shell: 480px;
  --cf-profile-gold: #f3d489;
  --cf-profile-ink: #08120d;
  --cf-profile-panel: rgba(16, 36, 25, .88);
}

.cf-dragon-panel {
  width: min(100%, var(--cf-profile-shell)) !important;
  max-width: var(--cf-profile-shell) !important;
}

:where(.profile-page, .stats-page, .training-page, .inventory-page, .playersettings-page) {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: var(--cf-viewport-height, 100dvh);
  background: #060d09 !important;
}

:where(.profile-page, .stats-page, .training-page, .inventory-page, .playersettings-page)::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: min(100vw, var(--cf-profile-shell));
  pointer-events: none;
  transform: translateX(-50%);
  background-image:
    linear-gradient(180deg, rgba(4, 11, 7, .20), rgba(5, 13, 9, .43) 48%, rgba(4, 10, 7, .77)),
    url('/assets/profile-background-v20261025-2.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 58px rgba(0, 0, 0, .64);
}

.stats-page::before {
  background-image:
    linear-gradient(180deg, rgba(4, 12, 8, .24), rgba(5, 14, 9, .45) 52%, rgba(4, 10, 7, .73)),
    url('/assets/profile-stats-background-v20261025-1.webp');
}

:where(.profile-frame, .stats-frame, .training-frame, .inventory-frame, .playersettings-frame) {
  position: relative;
  z-index: 1;
  width: min(100%, var(--cf-profile-shell)) !important;
  max-width: var(--cf-profile-shell) !important;
  background: transparent !important;
}

.profile-content {
  padding-top: 12px;
}

.profile-character-board {
  border-color: rgba(247, 214, 132, .46) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(126, 158, 95, .18), transparent 45%),
    linear-gradient(145deg, rgba(20, 43, 30, .72), rgba(20, 15, 10, .78)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .13),
    inset 0 0 34px rgba(239, 202, 113, .05),
    0 12px 30px rgba(0, 0, 0, .38) !important;
  backdrop-filter: blur(3px);
}

.profile-center-avatar {
  filter: drop-shadow(0 11px 13px rgba(0, 0, 0, .48));
}

.profile-avatar-frame {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

.profile-avatar-img {
  position: absolute !important;
  z-index: 1 !important;
  inset: 10% auto auto 10% !important;
  transform: none !important;
  width: 80% !important;
  height: 80% !important;
  border-radius: 18% !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .34);
}

.profile-avatar-frame-img {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .42)) saturate(1.04);
}

.profile-action-button {
  min-height: 72px !important;
  border-color: rgba(245, 213, 132, .66) !important;
  background:
    radial-gradient(circle at 14% 5%, rgba(151, 184, 108, .22), transparent 44%),
    linear-gradient(145deg, rgba(49, 91, 58, .96), rgba(18, 43, 30, .98)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .17),
    inset 0 -12px 24px rgba(5, 16, 10, .17),
    0 6px 16px rgba(0, 0, 0, .34) !important;
}

.profile-action-button:hover,
.profile-action-button:focus-visible {
  border-color: rgba(255, 234, 169, .95) !important;
  background:
    radial-gradient(circle at 14% 5%, rgba(177, 205, 124, .30), transparent 44%),
    linear-gradient(145deg, rgba(60, 108, 67, .98), rgba(22, 52, 35, .98)) !important;
}

.profile-action-icon,
.cf-profile-action-image {
  width: 48px !important;
  height: 48px !important;
  box-sizing: border-box;
  padding: 2px !important;
  border: 1px solid rgba(249, 220, 145, .52) !important;
  border-radius: 14px !important;
  object-fit: contain;
  color: transparent !important;
  background: radial-gradient(circle, rgba(253, 228, 160, .16), rgba(7, 18, 12, .36)) !important;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .42)) saturate(1.08) !important;
}

.profile-action-text {
  color: #fff0c4 !important;
  font-weight: 900;
  letter-spacing: .01em;
}

.cf-profile-back-icon {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .42));
}

:where(.stats-back-button, .training-back-btn, .inventory-back-button, .playersettings-back-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 82px;
  padding-inline: 7px !important;
}

/* Statistics keep a fixed tall background while the information scrolls over it. */
.stats-content {
  padding-top: 10px !important;
}

.stats-top {
  position: sticky;
  z-index: 6;
  top: 0;
  margin: -2px -2px 10px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid rgba(243, 209, 126, .20);
  background: linear-gradient(180deg, rgba(6, 16, 10, .94), rgba(6, 16, 10, .73), transparent);
  backdrop-filter: blur(5px);
}

.stats-section {
  overflow: hidden;
  border-color: rgba(241, 207, 124, .45) !important;
  background:
    radial-gradient(circle at 6% 0, rgba(132, 174, 98, .15), transparent 40%),
    linear-gradient(145deg, rgba(15, 38, 25, .88), rgba(25, 18, 12, .86)) !important;
  backdrop-filter: blur(4px);
}

.stats-section-title {
  color: #ffe6a0 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}

.stats-row {
  min-height: 54px !important;
  padding: 6px 9px !important;
  border-color: rgba(255, 226, 155, .19) !important;
  background: linear-gradient(100deg, rgba(248, 232, 190, .105), rgba(248, 232, 190, .035)) !important;
}

.stats-icon {
  width: 42px !important;
  height: 42px !important;
  padding: 2px;
  overflow: hidden;
  border-color: rgba(245, 211, 129, .55) !important;
  background: radial-gradient(circle, rgba(245, 221, 157, .15), rgba(9, 24, 15, .64)) !important;
}

.stats-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)) saturate(1.08) !important;
}

.stats-label {
  color: #f6ecd2;
  font-weight: 750;
}

.stats-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #ffe7a4 !important;
  font-weight: 900;
}

.stats-base-bonus {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
}

.stats-base-bonus em {
  margin-left: 2px;
  font-style: normal;
  font-weight: 950;
}

.stats-base-bonus .is-positive {
  color: #79e79a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .62);
}

.stats-base-bonus .is-negative {
  color: #ff8b79;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .62);
}

.cf-profile-currency-icon,
.cf-stat-currency-value img {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .44));
}

.cf-stat-currency-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.cf-profile-dragon-row {
  border-color: rgba(233, 154, 80, .29) !important;
  background: linear-gradient(100deg, rgba(125, 50, 23, .22), rgba(248, 232, 190, .04)) !important;
}

/* Training: the price now sits visually beside the upgrade action. */
.training-panel {
  border-color: rgba(243, 211, 129, .48) !important;
  background:
    radial-gradient(circle at 6% 0, rgba(127, 171, 92, .16), transparent 42%),
    linear-gradient(145deg, rgba(15, 39, 25, .88), rgba(27, 19, 12, .88)) !important;
  backdrop-filter: blur(4px);
}

.training-row {
  grid-template-columns: 56px minmax(0, 1fr) minmax(104px, max-content) 43px !important;
  grid-template-rows: auto auto auto;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px !important;
  border-color: rgba(250, 222, 149, .24) !important;
  background: linear-gradient(105deg, rgba(247, 232, 191, .105), rgba(247, 232, 191, .035)) !important;
}

.training-icon-wrap {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 56px !important;
  height: 56px !important;
  padding: 2px;
  border-color: rgba(242, 210, 130, .54) !important;
  background: radial-gradient(circle, rgba(247, 223, 157, .14), rgba(8, 22, 14, .64)) !important;
}

.training-stat-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .42));
}

.training-row-text {
  display: contents !important;
  min-width: 0;
}

.training-row-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.training-row-desc {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.training-row-meta {
  display: contents !important;
}

.training-row-meta > span:not(.training-price) {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}

.training-price {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
  white-space: nowrap;
}

.training-price img {
  width: 16px !important;
  height: 16px !important;
}

.training-upgrade-btn {
  grid-column: 4;
  grid-row: 1 / span 3;
  align-self: center;
  width: 43px !important;
  height: 43px !important;
  border-color: rgba(206, 247, 174, .58) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .28);
}

.training-confirm-overlay {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 auto 0 50% !important;
  width: min(100vw, 480px) !important;
  max-width: 480px !important;
  height: 100dvh !important;
  transform: translateX(-50%) !important;
  padding: 16px !important;
}

.training-confirm-modal {
  box-sizing: border-box !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 16px !important;
}

.training-confirm-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Inventory: readable full descriptions and icon based item characteristics. */
.inventory-section,
.inventory-details-panel {
  border-color: rgba(243, 211, 129, .45) !important;
  background:
    radial-gradient(circle at 7% 0, rgba(125, 169, 91, .14), transparent 42%),
    linear-gradient(145deg, rgba(15, 38, 25, .91), rgba(27, 19, 12, .91)) !important;
  backdrop-filter: blur(5px);
}

.inventory-mode-expanded .inventory-item {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: start;
  min-height: 102px !important;
}

.inventory-mode-expanded .inventory-item-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  text-align: left;
}

.inventory-mode-expanded .inventory-item-description {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
  line-height: 1.35;
}

.inventory-mode-expanded .inventory-item-description.cf-inventory-equipment-description,
.inventory-details-desc.cf-inventory-equipment-description,
.inventory-details-stats.cf-inventory-original-stats,
.inventory-details-meta .cf-inventory-original-level {
  display: none !important;
}

.cf-inventory-extra {
  display: none;
  gap: 6px;
  margin-top: 2px;
}

.inventory-mode-expanded .cf-inventory-extra,
.inventory-details-panel .cf-inventory-extra {
  display: grid;
}

.cf-inventory-level-line,
.cf-inventory-effect-line {
  color: #f7eccd;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}

.cf-inventory-level-line b,
.cf-inventory-effect-line b {
  color: #ffe19a;
}

.cf-inventory-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cf-inventory-stat-chip,
.inventory-stat-chip {
  min-height: 28px;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 7px !important;
  border: 1px solid rgba(242, 209, 127, .31);
  border-radius: 9px;
  color: #fff0c4;
  background: rgba(6, 20, 12, .56);
}

.cf-inventory-stat-chip img,
.inventory-stat-chip img {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .42));
}

.cf-inventory-stat-bonus {
  margin-left: -2px;
  color: #9fe68f;
  font-size: .92em;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .48);
}

.inventory-details-desc {
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-line !important;
}

/* Gifts, achievements and tasks behave as normal profile pages. */
body > .cf-social-overlay:not(.cf-social-mail-inline),
body > .cf-achievements-overlay,
body > .cf-newcomer-overlay {
  place-items: start center !important;
  padding: 0 !important;
  background: #060d09 !important;
  backdrop-filter: none !important;
}

body > .cf-social-overlay:not(.cf-social-mail-inline) > .cf-social-panel,
body > .cf-achievements-overlay > .cf-achievements-panel,
body > .cf-newcomer-overlay > .cf-newcomer-panel {
  width: min(100%, var(--cf-profile-shell)) !important;
  max-width: var(--cf-profile-shell) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  border-block: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 58px rgba(0, 0, 0, .66) !important;
}

body > .cf-social-overlay:not(.cf-social-mail-inline) > .cf-social-panel {
  background-image:
    linear-gradient(180deg, rgba(5, 14, 9, .27), rgba(6, 15, 10, .54) 54%, rgba(5, 12, 8, .78)),
    url('/assets/profile-social-background-v20261025-1.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body > .cf-achievements-overlay > .cf-achievements-panel {
  background-image:
    linear-gradient(180deg, rgba(5, 14, 9, .31), rgba(6, 15, 10, .57) 54%, rgba(5, 12, 8, .80)),
    url('/assets/profile-stats-background-v20261025-1.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body > .cf-newcomer-overlay > .cf-newcomer-panel {
  background-image:
    linear-gradient(180deg, rgba(5, 14, 9, .29), rgba(6, 15, 10, .57) 54%, rgba(5, 12, 8, .82)),
    url('/assets/profile-background-v20261025-2.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

:where(.cf-social-header, .cf-achievements-header, .cf-newcomer-header) {
  flex: 0 0 auto;
  border-bottom-color: rgba(241, 208, 127, .31) !important;
  background: linear-gradient(105deg, rgba(37, 72, 45, .94), rgba(8, 24, 15, .94)) !important;
  backdrop-filter: blur(7px);
}

.cf-social-header > span:first-child {
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.cf-social-header > span:first-child::before,
.cf-social-header > span:first-child::after,
.cf-social-header h2::before,
.cf-social-header h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

[data-cf-stat-icon="dragon-damage"] :is(.stats-icon, .cf-social-stat-icon, .cf-social-stat-label) > img {
  content: url('/assets/profile-stat-dragon-damage-v20261025-2.webp') !important;
}

[data-cf-stat-icon="dragon-green"] :is(.stats-icon, .cf-social-stat-icon, .cf-social-stat-label) > img {
  content: url('/assets/profile-stat-dragon-green-v20261025-2.webp') !important;
}

[data-cf-stat-icon="dragon-gold-v2"] :is(.stats-icon, .cf-social-stat-icon, .cf-social-stat-label) > img {
  content: url('/assets/profile-stat-dragon-gold-v20261025-2.webp') !important;
}

:where(.cf-social-content, .cf-achievements-scroll, .cf-newcomer-scroll) {
  scrollbar-width: none !important;
}

:where(.cf-social-content, .cf-achievements-scroll, .cf-newcomer-scroll)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.cf-profile-page-close {
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  background: rgba(22, 54, 34, .88) !important;
}

.cf-profile-page-close img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}

.cf-achievement-card,
.cf-newcomer-step,
.cf-daily-task,
.cf-social-item-card,
.cf-social-effect-card {
  backdrop-filter: blur(4px);
}

.cf-achievements-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 560px) {
  body > .cf-social-overlay:not(.cf-social-mail-inline) > .cf-social-panel,
  body > .cf-achievements-overlay > .cf-achievements-panel,
  body > .cf-newcomer-overlay > .cf-newcomer-panel {
    border-inline: 1px solid rgba(244, 211, 128, .52) !important;
  }
}

@media (max-width: 370px) {
  .profile-action-icon,
  .cf-profile-action-image {
    width: 42px !important;
    height: 42px !important;
  }

  .training-row {
    grid-template-columns: 48px minmax(0, 1fr) minmax(92px, max-content) 38px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .training-icon-wrap {
    width: 48px !important;
    height: 48px !important;
  }

  .training-upgrade-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .training-row-desc {
    -webkit-line-clamp: 1 !important;
  }

  .training-row-meta {
    font-size: 10px;
  }

  .training-price {
    gap: 2px;
    font-size: 10px;
  }

  .inventory-mode-expanded .inventory-item {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .profile-character-board,
  .stats-section,
  .training-panel,
  .inventory-section,
  .inventory-details-panel {
    backdrop-filter: none;
  }
}