/* ClashFarm beta audit #18: companion profile, commands, statistics and training. */
:root {
  --cf-pet-shell: 480px;
  --cf-pet-gold: #f0ce7a;
  --cf-pet-cream: #fff2ca;
  --cf-pet-panel: rgba(11, 29, 19, .90);
  --cf-pet-panel-deep: rgba(10, 18, 12, .94);
}

:where(.petprofile-page, .petstats-page, .petsettings-page, .training-page.pettraining-page, .inventory-page.pet-inventory-page) {
  background: #06100a !important;
  justify-content: center;
}

:where(.petprofile-frame, .petstats-frame, .petsettings-frame, .pettraining-page .training-frame, .pet-inventory-page .inventory-frame) {
  width: min(100%, var(--cf-pet-shell)) !important;
  max-width: var(--cf-pet-shell) !important;
  background-color: #09140d !important;
  background-image:
    linear-gradient(180deg, rgba(4, 11, 7, .10), rgba(5, 13, 8, .40) 52%, rgba(4, 9, 6, .78)),
    url('/assets/pet-profile-background-v20261026-1.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 54px rgba(0, 0, 0, .62);
}

:where(.petprofile-frame, .petsettings-frame, .pettraining-page .training-frame)::before {
  background: linear-gradient(180deg, rgba(5, 14, 9, .08), rgba(5, 14, 9, .16) 42%, rgba(3, 9, 5, .60)) !important;
}

:where(.petprofile-content, .petsettings-content, .petstats-content, .pettraining-page .training-content, .pet-inventory-page .inventory-content) {
  scrollbar-width: none;
}
:where(.petprofile-content, .petsettings-content, .petstats-content, .pettraining-page .training-content, .pet-inventory-page .inventory-content)::-webkit-scrollbar {
  display: none;
}

.petprofile-content {
  height: calc(100dvh - 146px) !important;
  padding: 10px 12px 22px !important;
  overflow-y: auto;
}

:where(.petprofile-top, .petstats-top, .petsettings-top, .petcommands-top) {
  gap: 9px;
  margin: 4px 0 10px !important;
}

:where(.petprofile-back-button, .petstats-back-button, .petsettings-back-button, .petcommands-back-button) {
  color: #fff0bd !important;
  text-shadow: 0 1px 2px #000 !important;
  background: linear-gradient(145deg, rgba(72, 116, 65, .98), rgba(22, 55, 37, .98)) !important;
  border: 1px solid rgba(245, 214, 137, .68) !important;
  border-radius: 12px !important;
  min-height: 40px;
  padding: 8px 12px !important;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 4px 10px rgba(0, 0, 0, .36) !important;
}

:where(.petprofile-title-box, .petstats-title-wrap, .petsettings-title-box, .petcommands-title-box) {
  min-width: 0;
  background: linear-gradient(145deg, rgba(18, 48, 31, .94), rgba(18, 25, 17, .94)) !important;
  border: 1px solid rgba(244, 211, 130, .54) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .34) !important;
}

:where(.petprofile-title, .petstats-title, .petsettings-title, .petcommands-title) {
  color: #ffe49d !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .62) !important;
}

.petprofile-character-card {
  margin-top: 2px !important;
  padding: 10px 10px 12px !important;
  border: 1px solid rgba(244, 211, 130, .34) !important;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 25%, rgba(147, 185, 105, .22), transparent 47%),
    linear-gradient(150deg, rgba(14, 43, 28, .80), rgba(20, 19, 12, .84)) !important;
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 28px rgba(0, 0, 0, .35);
}

.petprofile-big-avatar {
  width: min(47vw, 190px) !important;
  height: min(47vw, 190px) !important;
  margin: 0 auto 8px !important;
  border: 2px solid rgba(246, 215, 137, .82) !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 50% 34%, rgba(187, 224, 139, .42), rgba(17, 53, 33, .92)) !important;
  box-shadow: inset 0 0 24px rgba(255, 236, 177, .13), 0 10px 22px rgba(0, 0, 0, .46) !important;
}

.petprofile-big-name {
  color: #fff0bd !important;
  background: linear-gradient(145deg, rgba(59, 101, 54, .95), rgba(18, 47, 31, .96)) !important;
  border: 1px solid rgba(246, 215, 137, .60) !important;
  border-radius: 999px !important;
  margin-bottom: 5px !important;
  padding: 6px 18px !important;
  font-size: 18px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 4px 10px rgba(0, 0, 0, .30);
}

.petprofile-profile-menu,
.petprofile-profile-menu.cf-pet-menu-modern {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 7px 0 0 !important;
}

.petprofile-profile-button,
.petprofile-profile-button:last-child {
  grid-column: auto !important;
}

.petprofile-profile-button-icon {
  position: relative;
  color: #fff3c9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .74) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(151, 191, 109, .25), transparent 42%),
    linear-gradient(145deg, rgba(45, 94, 57, .98), rgba(16, 48, 32, .98)) !important;
  border: 1px solid rgba(243, 209, 127, .64) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px !important;
  min-width: 0;
  min-height: 58px !important;
  height: auto !important;
  padding: 7px 9px !important;
  text-align: left;
  font-size: 12px !important;
  line-height: 1.08 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), inset 0 -10px 18px rgba(2, 17, 9, .17), 0 5px 12px rgba(0, 0, 0, .34) !important;
}

.petprofile-profile-button-icon.cf-pet-nav-paw::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 38px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 226, 157, .82);
  border-radius: 50%;
  background: #173d29 url('/assets/pet-paw-badge-v20261023-1.svg') center / 13px 13px no-repeat;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .48);
}

.petprofile-profile-button-icon:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 2px 7px rgba(0, 0, 0, .34) !important;
}
.petprofile-profile-button-icon:hover .petprofile-nav-icon { transform: translateY(-1px); }

.petprofile-nav-icon {
  box-sizing: border-box;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  padding: 2px;
  border: 1px solid rgba(247, 220, 150, .50);
  border-radius: 12px;
  object-fit: contain;
  background: radial-gradient(circle, rgba(244, 220, 156, .16), rgba(4, 20, 12, .44));
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .48)) saturate(1.12) brightness(1.06) !important;
}
.petprofile-door-icon { padding: 4px !important; }
.cf-pet-command-nav-icon { padding: 1px !important; }

/* Statistics: accepted player symbols, marked as companion values with a paw. */
.petstats-content { padding: 10px 12px 24px !important; }
.petstats-section {
  border-color: rgba(244, 211, 130, .40) !important;
  background:
    radial-gradient(circle at 7% 0, rgba(135, 179, 92, .16), transparent 42%),
    linear-gradient(145deg, rgba(13, 43, 27, .90), rgba(24, 19, 12, .90)) !important;
  backdrop-filter: blur(4px);
}
.petstats-section-title {
  color: #fff0bd !important;
  background: linear-gradient(145deg, #477846, #244d34) !important;
  border: 1px solid rgba(246, 218, 147, .58) !important;
}
.petstats-row {
  min-height: 58px !important;
  padding: 7px 9px !important;
  background: linear-gradient(100deg, rgba(246, 230, 185, .11), rgba(246, 230, 185, .035)) !important;
  border-color: rgba(248, 222, 153, .20) !important;
}
.petstats-icon {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  padding: 2px;
  border: 1px solid rgba(246, 215, 137, .56);
  border-radius: 13px !important;
  background: radial-gradient(circle, rgba(244, 220, 156, .17), rgba(5, 24, 14, .66)) !important;
  overflow: visible;
}
.petstats-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48)) saturate(1.10) !important;
}
.petstats-row-left { gap: 12px; }
.cf-pet-stat-icon::after,
.cf-pet-training-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  z-index: 3;
  border: 1px solid rgba(255, 226, 157, .82);
  border-radius: 50%;
  background: #173d29 url('/assets/pet-paw-badge-v20261023-1.svg') center / 15px 15px no-repeat;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .48);
}

/* Training follows the player layout while keeping companion markings. */
.pettraining-page .training-panel {
  border-color: rgba(244, 211, 130, .44) !important;
  background:
    radial-gradient(circle at 7% 0, rgba(135, 179, 92, .17), transparent 42%),
    linear-gradient(145deg, rgba(13, 43, 27, .91), rgba(24, 19, 12, .91)) !important;
  backdrop-filter: blur(4px);
}
.pettraining-page .training-row {
  border-color: rgba(244, 216, 145, .23) !important;
  background: linear-gradient(105deg, rgba(247, 231, 188, .11), rgba(247, 231, 188, .035)) !important;
}
.pettraining-page .training-icon-wrap {
  position: relative;
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  padding: 2px;
  border: 1px solid rgba(244, 211, 130, .56) !important;
  border-radius: 14px !important;
  background: radial-gradient(circle, rgba(244, 220, 156, .16), rgba(5, 24, 14, .66)) !important;
}
.pettraining-page .training-stat-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48)) saturate(1.10);
}
.pettraining-page .training-upgrade-btn { min-width: 44px; min-height: 44px; }
.pettraining-page .training-confirm-stat { position: relative; }
.pettraining-page .training-confirm-stat.cf-pet-training-icon::after { right: auto; left: 39px; bottom: 2px; }

/* Settings and equipment use the same sanctuary panels. */
.petsettings-card,
.pet-inventory-page .inventory-panel,
.pet-inventory-page .inventory-list-wrap {
  border-color: rgba(244, 211, 130, .40) !important;
  background:
    radial-gradient(circle at 7% 0, rgba(135, 179, 92, .14), transparent 42%),
    linear-gradient(145deg, rgba(13, 43, 27, .91), rgba(24, 19, 12, .91)) !important;
  backdrop-filter: blur(4px);
}
.petsettings-section-title {
  color: #fff0bd !important;
  background: linear-gradient(145deg, #477846, #244d34) !important;
  border: 1px solid rgba(246, 218, 147, .52);
}
.petsettings-main-button,
.petsettings-upload {
  color: #fff1c1 !important;
  text-shadow: 0 1px 2px #000 !important;
  background: linear-gradient(145deg, #4c8248, #245038) !important;
  border: 1px solid rgba(246, 218, 147, .67) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 4px 10px rgba(0, 0, 0, .34) !important;
}
.inventory-page.pet-inventory-page {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.pet-inventory-page .inventory-frame { backdrop-filter: none !important; }
.pet-inventory-page .inventory-item.is-pet-equipped {
  outline: 2px solid #e8c77d;
  outline-offset: 1px;
  box-shadow: 0 0 18px rgba(232, 199, 125, .30);
}
.pet-inventory-page .inventory-item.is-pet-equipped::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #13231a;
  background: #e8c77d;
  font-weight: 900;
}

/* Dedicated Commands page. */
.petprofile-frame.cf-petcommands-open .petprofile-content { display: none !important; }
.petcommands-content {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  height: calc(100dvh - 146px);
  padding: 10px 12px 24px;
  overflow-y: auto;
  scrollbar-width: none;
}
.petcommands-content::-webkit-scrollbar { display: none; }
.petcommands-top { display: flex; align-items: center; }
.petcommands-title-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.petcommands-title-box > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48));
}
.petcommands-title { font-size: 18px; font-weight: 1000; }
.petcommands-subtitle { margin-top: 2px; color: rgba(255, 255, 255, .80); font-size: 10px; font-weight: 800; }
.petcommands-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(244, 211, 130, .44);
  border-radius: 20px;
  color: #fff4d3;
  background:
    radial-gradient(circle at 7% 0, rgba(135, 179, 92, .18), transparent 43%),
    linear-gradient(145deg, rgba(13, 43, 27, .93), rgba(24, 19, 12, .93));
  backdrop-filter: blur(5px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 10px 24px rgba(0, 0, 0, .38);
}
.petcommands-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(246, 218, 147, .17);
}
.petcommands-card-heading > img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .50));
}
.petcommands-card-heading > div { display: grid; gap: 3px; }
.petcommands-card-heading b { color: #ffe49d; font-size: 17px; }
.petcommands-card-heading span { color: rgba(255, 255, 255, .74); font-size: 11px; }
.petcommands-switch-row {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  text-align: left;
  color: #fff2c9;
  background: linear-gradient(125deg, rgba(243, 226, 181, .10), rgba(243, 226, 181, .035));
  border: 1px solid rgba(246, 218, 147, .24);
  border-radius: 15px;
}
.petcommands-switch-row:disabled { opacity: .70; cursor: wait; }
.petcommands-switch-row.active {
  border-color: rgba(145, 226, 126, .66);
  background: linear-gradient(125deg, rgba(94, 169, 81, .25), rgba(243, 226, 181, .045));
}
.petcommands-switch {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border: 1px solid rgba(255, 231, 170, .48);
  border-radius: 999px;
  background: rgba(7, 17, 11, .78);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .48);
}
.petcommands-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(#fff0b0, #c68a34);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .50);
  transition: transform .18s ease;
}
.petcommands-switch-row.active .petcommands-switch {
  background: linear-gradient(90deg, #2c7a41, #5ead62);
}
.petcommands-switch-row.active .petcommands-switch i { transform: translateX(20px); }
.petcommands-switch-copy { min-width: 0; display: grid; gap: 4px; }
.petcommands-switch-copy b { color: #fff0bd; font-size: 13px; line-height: 1.22; }
.petcommands-switch-copy small { color: rgba(255, 255, 255, .76); font-size: 10.5px; line-height: 1.32; }
.petcommands-rule {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(123, 192, 109, .31);
  border-radius: 14px;
  background: rgba(32, 75, 43, .28);
}
.petcommands-rule img { width: 48px; height: 48px; object-fit: contain; }
.petcommands-rule span { display: grid; gap: 3px; color: rgba(255, 255, 255, .78); font-size: 10.5px; line-height: 1.30; }
.petcommands-rule b { color: #dff3a9; font-size: 12px; }
.petcommands-status {
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  text-align: center;
  color: #eaf4d4;
  background: rgba(4, 16, 9, .45);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}
.petcommands-status.error { color: #ffd0c8; background: rgba(91, 28, 21, .40); }

@media (max-width: 390px) {
  .petprofile-content { padding-inline: 8px !important; }
  .petprofile-character-card { padding-inline: 8px !important; }
  .petprofile-big-avatar { width: min(43vw, 166px) !important; height: min(43vw, 166px) !important; }
  .petprofile-profile-button-icon { min-height: 52px !important; padding: 6px 7px !important; font-size: 11px !important; }
  .petprofile-nav-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .petprofile-profile-button-icon.cf-pet-nav-paw::after { left: 32px; top: 31px; }
  .petcommands-content { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .petcommands-switch i { transition: none; }
}