/* ClashFarm Animal Keeper refresh — 2026.10.25 */

.petstore-page {
  --petstore-amber: #efbd68;
  --petstore-amber-soft: #ffe4a9;
  --petstore-forest: #17362f;
  --petstore-forest-deep: #091b18;
  --petstore-wood: #422717;
  --petstore-text: #fff3d9;
  background:
    radial-gradient(circle at 50% 8%, rgba(54, 110, 83, .22), transparent 56%),
    #07110f;
}

.petstore-frame {
  isolation: isolate;
  width: min(100%, var(--game-shell-width, 430px));
  max-width: var(--game-shell-width, 430px);
  background-color: #17271f;
  background-image:
    linear-gradient(180deg, rgba(5, 17, 14, .14) 0%, rgba(7, 20, 17, .25) 38%, rgba(5, 13, 11, .72) 100%),
    url('/assets/livestock-background-v20261025-1.webp') !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 44px rgba(0, 0, 0, .72);
}

.petstore-frame::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5, 14, 12, .38), transparent 18%, transparent 82%, rgba(5, 14, 12, .38)),
    linear-gradient(180deg, rgba(11, 28, 22, .1), rgba(8, 20, 17, .28) 40%, rgba(5, 12, 10, .7) 100%),
    radial-gradient(ellipse at 50% 12%, rgba(244, 174, 83, .08), transparent 45%);
}

.petstore-content {
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(10px, 2.5vw, 20px) clamp(10px, 3vw, 22px)
    calc(118px + var(--cf-safe-bottom, 0px));
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.petstore-content::-webkit-scrollbar,
.petstore-list::-webkit-scrollbar,
.petstore-confirm-modal::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.petstore-top {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  margin: 0 0 11px;
}

.petstore-back-button {
  min-width: 72px;
  min-height: 48px;
  padding: 0 13px;
  color: var(--petstore-amber-soft);
  background: linear-gradient(180deg, rgba(75, 91, 59, .98), rgba(24, 46, 37, .98));
  border: 1px solid rgba(255, 216, 137, .46);
  border-radius: 14px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 -8px 13px rgba(6, 20, 16, .18),
    0 4px 12px rgba(0, 0, 0, .34);
  font-size: 13px;
}

.petstore-title-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 8px 14px 8px 48px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(48, 75, 57, .95), rgba(15, 37, 31, .95) 62%, rgba(8, 22, 19, .95));
  border: 1px solid rgba(255, 213, 132, .4);
  border-radius: 16px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .11),
    inset 0 0 20px rgba(240, 176, 81, .035),
    0 5px 14px rgba(0, 0, 0, .34);
  backdrop-filter: blur(6px);
}

.petstore-title-box::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 25px;
  height: 25px;
  background: #efc06c;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 10.8c-3.25 0-6.6 2.73-6.6 5.75 0 2.12 1.73 3.05 3.52 2.38.92-.35 1.93-.35 2.82 0 1.8.68 3.57-.25 3.57-2.38 0-3.02-3.72-5.75-3.31-5.75ZM6.18 10.2c1.28-.38 1.87-2.08 1.32-3.8S5.47 3.6 4.19 4s-1.86 2.09-1.31 3.8 2.02 2.8 3.3 2.4Zm11.64 0c1.28.4 2.76-.68 3.31-2.4s-.03-3.42-1.31-3.8-2.76.68-3.31 2.4.03 3.42 1.31 3.8ZM10.4 8.35c1.34-.13 2.27-1.62 2.09-3.34S11.08 2.02 9.74 2.15 7.46 3.78 7.65 5.5s1.41 2.99 2.75 2.85Zm3.2 0c1.34.14 2.57-1.13 2.75-2.85s-.75-3.21-2.09-3.35-2.57 1.14-2.75 2.86.75 3.21 2.09 3.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 10.8c-3.25 0-6.6 2.73-6.6 5.75 0 2.12 1.73 3.05 3.52 2.38.92-.35 1.93-.35 2.82 0 1.8.68 3.57-.25 3.57-2.38 0-3.02-3.72-5.75-3.31-5.75ZM6.18 10.2c1.28-.38 1.87-2.08 1.32-3.8S5.47 3.6 4.19 4s-1.86 2.09-1.31 3.8 2.02 2.8 3.3 2.4Zm11.64 0c1.28.4 2.76-.68 3.31-2.4s-.03-3.42-1.31-3.8-2.76.68-3.31 2.4.03 3.42 1.31 3.8ZM10.4 8.35c1.34-.13 2.27-1.62 2.09-3.34S11.08 2.02 9.74 2.15 7.46 3.78 7.65 5.5s1.41 2.99 2.75 2.85Zm3.2 0c1.34.14 2.57-1.13 2.75-2.85s-.75-3.21-2.09-3.35-2.57 1.14-2.75 2.86.75 3.21 2.09 3.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.petstore-title {
  overflow: hidden;
  color: #ffda8b;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72);
  font-size: clamp(19px, 4.5vw, 23px);
  line-height: 1.05;
}

.petstore-subtitle {
  overflow: hidden;
  margin-top: 4px;
  color: rgba(255, 241, 211, .78);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.petstore-message {
  margin: 0 0 10px;
  padding: 10px 12px;
  color: #ffe7b0;
  background: linear-gradient(120deg, rgba(79, 51, 25, .94), rgba(14, 31, 25, .94));
  border: 1px solid rgba(255, 202, 108, .4);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.petstore-list {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 660px;
  margin: 0 auto !important;
  padding: 0 0 12px !important;
  overflow: visible !important;
}

.petstore-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: clamp(88px, 22vw, 108px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 124px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(37, 64, 47, .96), rgba(18, 37, 31, .96) 55%, rgba(9, 23, 20, .96));
  border: 1px solid rgba(235, 197, 118, .42) !important;
  border-radius: 19px !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .095),
    inset 0 0 22px rgba(228, 170, 80, .025),
    0 6px 16px rgba(0, 0, 0, .4) !important;
  backdrop-filter: blur(6px);
}

.petstore-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #8fbd6f, #3d714e);
  box-shadow: 2px 0 10px rgba(98, 163, 102, .2);
}

.petstore-card:nth-child(2) {
  background:
    linear-gradient(110deg, rgba(77, 61, 34, .96), rgba(42, 37, 24, .96) 55%, rgba(20, 27, 22, .96));
}

.petstore-card:nth-child(2)::before {
  background: linear-gradient(180deg, #e1b457, #9b6523);
  box-shadow: 2px 0 10px rgba(224, 174, 74, .2);
}

.petstore-card:nth-child(3) {
  background:
    linear-gradient(110deg, rgba(52, 62, 66, .97), rgba(29, 38, 41, .97) 55%, rgba(14, 24, 25, .97));
}

.petstore-card:nth-child(3)::before {
  background: linear-gradient(180deg, #94b0b6, #526f75);
  box-shadow: 2px 0 10px rgba(132, 174, 182, .2);
}

.petstore-card-icon {
  box-sizing: border-box;
  display: grid !important;
  place-items: center;
  width: clamp(88px, 22vw, 108px) !important;
  max-width: 108px !important;
  height: clamp(88px, 22vw, 108px) !important;
  aspect-ratio: 1;
  margin: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 35%, rgba(239, 218, 151, .23), rgba(25, 45, 34, .56));
  border: 1px solid rgba(255, 221, 146, .48) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 0 14px rgba(242, 182, 85, .045),
    0 3px 10px rgba(0, 0, 0, .38) !important;
}

.petstore-card:nth-child(2) .petstore-card-icon {
  background: radial-gradient(circle at 48% 35%, rgba(255, 218, 130, .24), rgba(67, 48, 24, .6));
}

.petstore-card:nth-child(3) .petstore-card-icon {
  background: radial-gradient(circle at 48% 35%, rgba(202, 226, 224, .19), rgba(35, 48, 50, .62));
}

.petstore-card-icon img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .36));
}

/* New companion portraits are also assigned by the runtime globally. These
   content sources remove the old portrait flash inside the keeper cards. */
.petstore-card:nth-child(1) .petstore-card-icon img {
  content: url('/assets/livestock-forest-beast-v20261025-1.webp');
}

.petstore-card:nth-child(2) .petstore-card-icon img {
  content: url('/assets/livestock-field-beast-v20261025-1.webp');
}

.petstore-card:nth-child(3) .petstore-card-icon img {
  content: url('/assets/livestock-mountain-beast-v20261025-1.webp');
}

.petstore-card-main {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  grid-template-areas:
    'name price'
    'desc price'
    'desc action';
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  width: 100%;
  padding: 0 !important;
  text-align: left;
}

.petstore-card-name {
  grid-area: name;
  align-self: end;
  min-width: 0;
  color: #ffe09a;
  text-align: left;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72);
  font-size: clamp(17px, 3.7vw, 20px);
  line-height: 1.12;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.petstore-card-desc {
  grid-area: desc;
  align-self: start;
  max-width: 34ch;
  margin: 3px 0 0;
  color: rgba(255, 248, 229, .82);
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.petstore-price-line {
  grid-area: price;
  align-self: end;
  justify-self: stretch;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin: 0 0 7px !important;
  padding: 7px 9px;
  color: #fff0c8;
  background: rgba(7, 17, 14, .48);
  border: 1px solid rgba(255, 216, 137, .18);
  border-radius: 11px;
  font-size: 13px;
  white-space: nowrap;
}

.petstore-price-line span {
  color: #eac77e;
}

.petstore-price-line img {
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .48));
}

.petstore-buy-button {
  grid-area: action;
  justify-self: stretch;
  align-self: start;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 12px;
  color: #fff5dc;
  background: linear-gradient(180deg, #7bb44f, #427b35 55%, #315f2c);
  border: 1px solid rgba(220, 255, 184, .34) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .21),
    inset 0 -8px 12px rgba(26, 73, 27, .14),
    0 3px 0 rgba(22, 57, 23, .72),
    0 6px 11px rgba(0, 0, 0, .23) !important;
  font-size: 14px;
  line-height: 1.15;
}

.petstore-buy-button:disabled {
  opacity: .58;
  filter: grayscale(.34);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
}

.petstore-confirm-overlay {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 35%, rgba(58, 104, 76, .24), transparent 48%),
    rgba(3, 10, 8, .82);
  backdrop-filter: blur(4px);
}

.petstore-confirm-modal {
  box-sizing: border-box;
  width: min(100%, 370px);
  max-height: min(88dvh, 620px);
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none !important;
  background: linear-gradient(145deg, rgba(52, 76, 55, .99), rgba(10, 28, 23, .99) 68%);
  border: 1px solid rgba(255, 214, 132, .52);
  border-radius: 21px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .11),
    0 18px 48px rgba(0, 0, 0, .66);
}

.petstore-confirm-title {
  color: #ffdc91;
}

.petstore-confirm-text {
  color: #fff3db;
}

.petstore-confirm-cancel,
.petstore-confirm-buy {
  min-height: 43px;
  height: auto;
  border-radius: 12px;
}

.petstore-confirm-cancel {
  color: #edf2ed;
  background: linear-gradient(180deg, #59655f, #293730);
  border-color: rgba(225, 239, 226, .24);
}

.petstore-confirm-buy {
  color: #fff4d8;
  background: linear-gradient(180deg, #7eb653, #3f7934);
  border-color: rgba(222, 255, 190, .32);
}

@media (max-width: 460px) {
  .petstore-card {
    grid-template-columns: clamp(78px, 24vw, 96px) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 132px !important;
    padding: 10px !important;
  }

  .petstore-card-icon {
    width: clamp(78px, 24vw, 96px) !important;
    height: clamp(78px, 24vw, 96px) !important;
  }

  .petstore-card-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'name'
      'desc'
      'price'
      'action';
    gap: 4px;
  }

  .petstore-price-line {
    justify-self: start;
    justify-content: flex-start;
    margin: 3px 0 4px !important;
    padding: 4px 7px;
    font-size: 12px;
  }

  .petstore-price-line img {
    flex-basis: 17px;
    width: 17px !important;
    height: 17px !important;
  }

  .petstore-buy-button {
    min-height: 38px;
    padding-block: 7px;
    font-size: 13px;
  }
}

@media (max-width: 340px) {
  .petstore-content {
    padding-inline: 8px;
  }

  .petstore-top {
    gap: 7px;
  }

  .petstore-back-button {
    min-width: 64px;
    padding-inline: 9px;
  }

  .petstore-title-box {
    padding-left: 42px;
    padding-right: 9px;
  }

  .petstore-title-box::before {
    left: 10px;
    width: 23px;
    height: 23px;
  }

  .petstore-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .petstore-card-icon {
    width: 72px !important;
    height: 72px !important;
  }

  .petstore-card-name {
    font-size: 15px;
  }

  .petstore-card-desc {
    font-size: 10.5px;
  }
}

@media (max-height: 720px) {
  .petstore-content {
    padding-top: 8px;
  }

  .petstore-top {
    margin-bottom: 8px;
  }

  .petstore-list {
    gap: 8px !important;
  }

  .petstore-card {
    min-height: 114px !important;
    padding-block: 8px !important;
  }
}

@media (hover: hover) {
  .petstore-back-button:hover,
  .petstore-buy-button:not(:disabled):hover,
  .petstore-confirm-actions button:not(:disabled):hover {
    filter: brightness(1.1);
  }

  .petstore-buy-button:not(:disabled):hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .petstore-back-button,
  .petstore-buy-button,
  .petstore-confirm-actions button {
    transition: none;
  }
}