/* d055b087a433d2a4105e3d78dfb70f57 */.pp {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: .625rem;
  min-width: 0;
}

.pp__nav {
  margin-block: 0;
}

.pp__card > .pp__panel,
.pp__panel > .pp__panel-content {
  min-width: 0;
}

.pp__search {
  display: flex;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-12);
}

.pp__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.pp__search button {
  flex: none;
}

.pp__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-12);
}

.pp__table {
  padding: .3rem;
  border-radius: var(--br-20);
  background-color: var(--transparent-2-w);
}

.pp__table td {
  vertical-align: middle;
}

.pp__table td,
.pp__table th {
  padding-inline: .45rem;
}

.pp__table-user a {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: .5rem;
}

.pp__table-user img {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--br-50);
}

.pp__table-user a span {
  color: var(--span);
}

.pp__table-sub {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
}

.pp__meter {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 6rem;
}

.pp__meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  white-space: nowrap;
}

.pp__meter-top b {
  color: var(--text-default);
  font-weight: var(--font-weight-6);
}

.pp__meter-top small {
  color: var(--text-secondary);
  font-size: var(--font-size-s);
}

.pp__meter-top.is-danger small {
  color: var(--red);
}

.pp__combo {
  display: inline-flex;
  gap: 2px;
  border-radius: var(--br-24);
  overflow: hidden;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
}

.pp__combo-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .3rem .6rem;
  background-color: var(--transparent-5-w);
  color: var(--text-secondary);
}

.pp__combo-item svg {
  flex: none;
  width: .85rem;
  height: .85rem;
  fill: currentColor;
}

.pp__combo-dot {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: var(--br-50);
  background-color: currentColor;
}

.pp__combo-item {
  justify-content: center;
}

.pp__combo-item:first-child {
  min-width: 6.75rem;
}

.pp__combo-item:last-child {
  min-width: 8.75rem;
}

.pp__combo-label {
  color: inherit;
  white-space: nowrap;
}

.pp__defs {
  position: absolute;
  width: 0;
  height: 0;
}

.pp__map-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

.pp__chips button {
  gap: .3rem;
}

.pp__card.pp__card-settings {
  flex-direction: column;
}

.pp__button-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}

.pp__card-settings > .pp__panel {
  width: 100%;
}

.pp__settings {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--transparent-5-w);
  border-radius: var(--br-10);
}

.pp__settings-title {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--transparent-5-w);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-6);
}

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

.pp__section {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
}

.pp__section-title {
  color: var(--text-secondary);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-5);
  text-transform: uppercase;
}

.pp__section-title--gap {
  margin-top: .75rem;
}

.pp__section-info {
  margin-bottom: .5rem;
  padding: .5rem;
  border-radius: var(--br-8);
  background-color: var(--transparent-2-w);
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  font-style: italic;
}

.pp__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1rem;
}

.pp__field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  margin-bottom: .5rem;
}

.pp__fields .pp__field {
  margin-bottom: 0;
}

.pp__field.is-off {
  opacity: .4;
}

.pp__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  height: 1.25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  white-space: nowrap;
}

.pp__field-head label {
  margin: 0;
}

.pp__field-head small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  text-overflow: ellipsis;
}

.pp__select {
  margin: 0;
}

.pp__select.is-off {
  visibility: hidden;
}

.pp__select .adaptive-select {
  grid-auto-flow: unset;
  grid-template-columns: minmax(0, 1fr) 12px;
  justify-content: stretch;
  min-width: 0;
  padding: 0 .85rem;
  text-align: left;
}

.pp__select[data-change-icon] .adaptive-select {
  grid-template-columns: 16px minmax(0, 1fr) 12px;
}

.pp__select .adaptive-select__arrow {
  margin: 0;
}

.pp__select .adaptive-select__fist-icon {
  color: var(--span);
}

.pp__select .adaptive-select__fist-icon svg,
.pp__select .adaptive-select__icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.pp__select .adaptive-select__dropdown-list {
  top: calc(100% + 6px);
  z-index: 20;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.pp__select[data-change-icon] .adaptive-select__label {
  grid-template-columns: 16px minmax(0, 1fr);
}

.pp__switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .875rem;
  cursor: pointer;
}

.pp__switch input {
  flex: none;
}

.pp__switch--field {
  height: var(--input-height);
}

.pp__form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem;
  padding-top: .5rem;
  border-top: 1px solid var(--transparent-5-w);
}

.pp__stock {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: var(--br-24);
  background-color: color-mix(in srgb, var(--money) 14%, transparent);
  color: var(--money);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
}

.pp__stock svg {
  flex: none;
  width: .85rem;
  height: .85rem;
  fill: currentColor;
}

.pp__stock.is-empty {
  background-color: var(--transparent-5-w);
  color: var(--text-secondary);
}

.pp__table td:last-child,
.pp__table th:last-child {
  width: 1%;
  white-space: nowrap;
}

.pp__table tbody tr:hover {
  color: var(--text-default);
}

.pp__notice > .pp__notice-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: .3rem;
}

.pp__panel-content.pp__achs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: .5rem;
}

.pp__ach {
  display: flex;
  gap: .75rem;
  min-width: 0;
  padding: .75rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-2-w);
}

.pp__ach.is-locked {
  opacity: .45;
  filter: grayscale(1);
  transition: opacity .15s;
}

.pp__ach.is-locked:hover {
  opacity: .75;
}

.pp__panel-title--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.pp__panel-title--row button {
  flex: none;
}

.pp__ach-count {
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  white-space: nowrap;
}

.pp__ach.is-done {
  background-image: linear-gradient(214deg, color-mix(in srgb, var(--green) 12%, transparent), transparent, transparent);
}

.pp__ach-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-5-w);
  color: var(--text-secondary);
}

.pp__ach.is-done .pp__ach-icon {
  background-color: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.pp__ach-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.pp__ach-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.pp__ach .pp__hint {
  padding: 0;
}

.pp__ach .pp__meter-top {
  margin-top: auto;
}

.pp__ach-head {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-default);
}

.pp__ach-check {
  flex: none;
  width: .9rem;
  height: .9rem;
  fill: var(--green);
}

.pp__ach-reward {
  color: var(--money) !important;
  font-weight: var(--font-weight-6);
}

.pp__ach-name {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.pp__ach-name > svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--text-secondary);
}

.pp__ach-actions {
  display: flex;
  justify-content: flex-end;
  gap: .3rem;
  margin: 0;
}

.pp__ach-actions .button-icon {
  width: 2rem;
  height: 2rem;
  min-height: 0;
}

.pp__ach-actions svg {
  width: .9rem;
  height: .9rem;
  fill: currentColor;
}

.pp__tag {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--br-24);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
}

.pp__title-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .35rem;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

.pp__title-link:hover {
  color: var(--text-default);
}

.pp__title-link svg {
  width: .7rem;
  height: .7rem;
  fill: currentColor;
}

.pp__settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--transparent-5-w);
}

.pp__settings-head .pp__settings-title {
  padding-bottom: 0;
  border-bottom: 0;
}

.pp__settings-head button {
  flex: none;
}

#pets-ach-modal .popup_modal_content {
  width: 96%;
  max-width: 56rem;
}

.pp__danger {
  background-color: color-mix(in srgb, var(--red) 14%, transparent);
  color: color-mix(in srgb, var(--red) 80%, var(--text-default));
}

.pp__danger:hover {
  background-color: color-mix(in srgb, var(--red) 24%, transparent);
  color: color-mix(in srgb, var(--red) 80%, var(--text-default));
}

.pp__ach-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pp__modal-cancel {
  width: auto;
}

.pp__rewards {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pp__reward {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 13rem auto;
  align-items: center;
  gap: .3rem;
}

.pp__reward-add {
  align-self: flex-start;
}

.pp__form-actions--between {
  align-items: center;
  justify-content: space-between;
}

.pp__form-buttons {
  display: flex;
  gap: .3rem;
}

.pp__state--ok {
  background-color: rgba(70, 200, 120, .15);
  color: #5fd38d;
}

.pp__state--hungry {
  background-color: rgba(240, 180, 60, .15);
  color: #f0b43c;
}

.pp__state--starving {
  background-color: rgba(240, 90, 70, .15);
  color: #f06a55;
}

.pp__state--dead {
  background-color: var(--transparent-5-w);
  color: var(--text-secondary);
}

.pp__card {
  width: 100%;
  flex-direction: row;
  gap: .5rem;
  padding: .5rem;
}

.pp__stretch {
  flex: 1 1 0;
  min-width: 0;
}

.pp__panel {
  background-color: var(--card);
  border-radius: var(--br-12);
  border: 1px solid var(--transparent-5-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.pp__panel--grow {
  flex: 1 1 auto;
}

.pp__panel-title {
  background-color: var(--transparent-1-w);
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding-inline: 1rem;
  flex: none;
}

.pp__h2 {
  margin: 0;
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.pp__h2 svg {
  width: 1rem;
  height: 1rem;
  fill: var(--text-custom);
  flex: none;
}

.pp__panel-content {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
}

.pp__notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--input-form);
  border-radius: var(--br-12);
  flex: 1;
}

.pp__notice > svg {
  width: 2rem;
  height: 2rem;
  fill: var(--text-custom);
  flex: none;
}

.pp__notice > div {
  flex: 1;
  min-width: 0;
}

.pp__notice h2 {
  margin: 0 0 .25rem;
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-6);
  color: var(--text-default);
}

.pp__notice p {
  margin: 0;
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

.pp__main {
  align-items: stretch;
}

.pp__stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 30rem;
  border-radius: var(--br-12);
  border: 1px solid var(--transparent-5-w);
  overflow: hidden;
  background-color: var(--input-form);
  isolation: isolate;
}

.pp__backdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity .25s;
}

.pp__backdrop.is-ready {
  opacity: 1;
}

.pp__backdrop {
  overflow: hidden;
}

.pp__backdrop-video {
  position: absolute;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.pp__backdrop-video.is-ready {
  opacity: 1;
}

.pp__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 28%, rgba(0, 0, 0, .05) 68%, rgba(0, 0, 0, .65) 100%);
}

.pp__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.pp__canvas:active {
  cursor: grabbing;
}

.pp__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pp__loading[hidden] {
  display: none;
}

.pp__stage-head {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.pp__stage-title {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  color: #fff;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.pp__stage-title span {
  overflow-wrap: anywhere;
}

.pp__stage-title small {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-5);
  color: rgba(255, 255, 255, .85);
}

.pp__stage-badge {
  flex: none;
  padding: .35rem .75rem;
  border-radius: var(--br-24);
  background-color: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
}

.pp__heart {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  fill: #ff5a6e;
  opacity: 0;
  pointer-events: none;
  animation: pp-heart 1.1s ease-out both;
}

@keyframes pp-heart {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift)), calc(-50% - 7rem)) scale(1.1);
  }
}

.pp__feeder-tip {
  position: absolute;
  padding: .3rem .6rem;
  border-radius: var(--br-6);
  background-color: rgba(20, 20, 20, .9);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - .4rem));
}

.pp__stage-actions {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.pp__stage-actions button:not(.active) {
  background-color: rgba(20, 20, 20, .8);
}

.pp__stage-actions button:not(.active):hover {
  background-color: rgba(40, 40, 40, .9);
}

.pp__count {
  min-width: 1.25rem;
  padding-inline: .3rem;
  border-radius: var(--br-6);
  background-color: rgba(0, 0, 0, .25);
  font-size: var(--font-size-s);
  text-align: center;
}

.pp__side {
  width: 25rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pp__nameform-row {
  display: flex;
  gap: .3rem;
}

.pp__nameform-row input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--input-height);
  padding-inline: .8rem;
  border-radius: var(--br-10);
  background-color: var(--input-form);
  color: var(--text-default);
  font-size: var(--font-size-m);
}

.pp__nameform-row .button-icon {
  flex: none;
}

.pp__hint {
  padding: .2rem .3rem;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  line-height: 1.35;
}

.pp__hint b {
  color: var(--text-default);
  font-weight: var(--font-weight-6);
}

.pp__hats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
}

.pp__hats button {
  width: 100%;
  min-width: 0;
  padding-inline: .25rem;
  font-size: var(--font-size-s);
}

.pp__hats button:first-child {
  grid-column: span 2;
}

.pp__chips {
  flex-direction: row;
  flex-wrap: wrap;
}

.pp__chips button {
  flex: 1 1 calc(25% - .3rem);
  min-width: 0;
  padding-inline: .5rem;
  font-size: var(--font-size-s);
}

.pp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  flex: 1;
  min-width: 0;
}

.pp__stat {
  position: relative;
  background-color: var(--input-form);
  border-radius: var(--br-12);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
  min-height: 7rem;
}

.pp__stat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pp__stat > * {
  position: relative;
}

.pp__stat.accent-red::before {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--red) 7%, transparent), transparent);
}

.pp__stat.accent-gold::before {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--money) 7%, transparent), transparent);
}

.pp__stat.accent-vip::before {
  background-image: linear-gradient(0deg, color-mix(in srgb, #e844ff 7%, transparent), transparent);
}

.pp__stat.accent-green::before {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--green) 7%, transparent), transparent);
}

.pp__stat > .pp__stat-bg {
  position: absolute;
  right: -.75rem;
  bottom: -1rem;
  z-index: 0;
  width: 7rem;
  height: 7rem;
  fill: currentColor;
  opacity: .09;
  transform: rotate(-12deg);
  pointer-events: none;
}

.pp__stat.accent-red {
  color: var(--red);
}

.pp__stat.accent-gold {
  color: var(--money);
}

.pp__stat.accent-vip {
  color: #e844ff;
}

.pp__stat.accent-green {
  color: var(--green);
}

.pp__stat-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-custom);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-6);
}

.pp__stat-head svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex: none;
}

.pp__stat-value {
  font-size: 1.8rem;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .2rem;
}

.pp__stat-value small {
  font-size: var(--font-size-m);
  color: var(--text-secondary);
  font-weight: var(--font-weight-5);
}

.pp__stat-foot {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  color: var(--text-custom);
  font-size: var(--font-size-s);
  margin-top: auto;
}

.pp__stat-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1rem;
}

.pp__stat-split.is-danger {
  color: var(--red);
}

.pp__kpi {
  color: var(--text-default);
  font-weight: var(--font-weight-6);
  text-align: right;
}

.pp__stat-bar {
  position: relative;
  height: 6px;
  background-color: var(--transparent-3-w);
  border-radius: var(--br-6);
  overflow: hidden;
}

.pp__stat-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--br-6);
  transition: width .4s;
}

.pp__stat-bar.red > span {
  background-color: var(--red);
}

.pp__stat-bar.gold > span {
  background-color: var(--money);
}

.pp__stat-bar.green > span {
  background-color: var(--green);
}

.pp__stat-bar.vip > span {
  background: linear-gradient(90deg, #ff6844 0%, #e844ff, #6d5cff 100%);
}

.pp__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
}

.pp__timeline {
  display: flex;
  gap: .3rem;
}

.pp__timeline .filter {
  flex: 1 1 0;
}

.pp__step:not(.done):not(.active) {
  color: var(--text-secondary);
}

.pp__facts {
  gap: 0;
}

.pp__facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem .5rem;
  font-size: var(--font-size-m);
  color: var(--text-custom);
}

.pp__facts > div + div {
  border-top: 1px solid var(--transparent-5-w);
}

.pp__facts b {
  color: var(--text-default);
  font-weight: var(--font-weight-6);
  text-align: right;
}

.pp__rules {
  position: relative;
  gap: .4rem;
  margin: .5rem;
  padding: .75rem 1rem;
  overflow: hidden;
  border-radius: var(--br-12);
  background-color: var(--transparent-2-w);
  color: var(--text-custom);
  font-size: var(--font-size-m);
  line-height: 1.45;
  list-style: disc;
}

.pp__rules li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.pp__rules svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .1rem;
  fill: currentColor;
}

.pp__rules li:nth-child(1) svg {
  color: var(--money);
}

.pp__rules li:nth-child(2) svg {
  color: #e844ff;
}

.pp__rules li:nth-child(3) svg {
  color: var(--red);
}

.pp__rules li:nth-child(4) svg {
  color: var(--green);
}

.pp__rules::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--br-12);
  background: linear-gradient(214deg, color-mix(in srgb, var(--green) 10%, transparent), transparent, transparent);
  pointer-events: none;
}

@media (max-width: 1200px) {
  .pp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .pp__panel-content.pp__achs {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp__main {
    flex-direction: column;
  }

  .pp__stage {
    flex: none;
    min-height: 24rem;
  }

  .pp__side {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .pp__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp__sections,
  .pp__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp__section {
    display: flex;
    flex-direction: column;
  }

  .pp__select.is-off {
    display: none;
  }

  .pp__reward {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pp__reward > :nth-child(2),
  .pp__reward > :nth-child(3) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

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

  .pp__hats button:first-child {
    grid-column: 1 / -1;
  }

  .pp__chips button {
    flex-basis: calc(50% - .3rem);
  }

  .pp__stage {
    min-height: 30rem;
  }

  .pp__backdrop {
    bottom: 7.5rem;
  }

  .pp__canvas {
    height: calc(100% - 7.5rem);
  }
}

.pp__farm-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.pp__farm-tools .pp__search {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0;
  border: 0;
}

.pp__farm-tools .pp__select {
  flex: 0 0 11rem;
  min-width: 0;
}

.pp__farm {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .5rem;
}

.pp__farm-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1rem .6rem .35rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-2-w);
}

.pp__farm-row.is-top-1 {
  background-image: linear-gradient(100deg, color-mix(in srgb, #ffd23f 20%, transparent), transparent 42%);
}

.pp__farm-row.is-top-2 {
  background-image: linear-gradient(100deg, color-mix(in srgb, #8fb6ff 16%, transparent), transparent 42%);
}

.pp__farm-row.is-top-3 {
  background-image: linear-gradient(100deg, color-mix(in srgb, #c8552d 22%, transparent), transparent 42%);
}

.pp__farm-place {
  color: var(--text-default);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.is-top-1 .pp__farm-place {
  color: #ffd23f;
}

.is-top-2 .pp__farm-place {
  color: #8fb6ff;
}

.is-top-3 .pp__farm-place {
  color: #e0703f;
}

.pp__farm-thumb {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: var(--br-12);
  outline: none;
  background-color: var(--transparent-5-w);
  cursor: help;
}

.pp__farm-thumb > img,
.pp__farm-pop-view > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp__farm-thumb > img.is-pullet,
.pp__farm-pop-view > img.is-pullet {
  transform: scale(.8);
  transform-origin: 50% 90%;
}

.pp__farm-info {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  width: .9rem;
  height: .9rem;
  fill: var(--text-secondary);
}

.pp__farm-pop {
  display: none;
}

.pp__farm-pop.is-open {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 19rem;
  padding: .9rem;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-12);
  background-color: var(--card);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45);
  pointer-events: none;
}

.pp__farm-pop-title {
  overflow: hidden;
  color: var(--text-default);
  font-size: 1.1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp__farm-pop-stage {
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  text-transform: uppercase;
}

.pp__farm-pop-view {
  position: relative;
  height: 11rem;
  margin-top: .6rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-5-w);
  background-image: radial-gradient(var(--transparent-5-w) 1px, transparent 1px);
  background-size: .6rem .6rem;
}

.pp__farm-evo {
  position: absolute;
  bottom: .4rem;
  left: .5rem;
  display: flex;
  align-items: flex-end;
  gap: .1rem;
}

.pp__farm-evo img {
  object-fit: contain;
  object-position: bottom;
}

.pp__farm-evo img:nth-child(1) {
  width: 1.5rem;
  height: 1.5rem;
}

.pp__farm-evo img:nth-child(2) {
  width: 2.1rem;
  height: 2.1rem;
}

.pp__farm-evo img:nth-child(3) {
  width: 2.9rem;
  height: 2.9rem;
}

.pp__farm-evo img.is-locked {
  filter: brightness(0) invert(.42);
}

.pp__farm-evo-count {
  position: absolute;
  right: .6rem;
  bottom: .55rem;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
}

.pp__farm-evo-count b {
  color: var(--text-default);
}

.pp__farm-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .7rem;
}

.pp__farm-facts > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pp__farm-facts > div.is-wide {
  grid-column: 1 / -1;
}

.pp__farm-facts small {
  color: var(--text-secondary);
}

.pp__farm-facts b {
  color: var(--text-default);
  font-weight: 600;
}

.pp__farm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .6rem;
}

.pp__farm-tags span {
  padding: .2rem .5rem;
  border-radius: var(--br-6);
  background-color: var(--transparent-5-w);
  color: var(--text-default);
  font-size: var(--font-size-s);
}

.pp__farm-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.pp__farm-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  min-width: 0;
}

.pp__farm-name b {
  overflow: hidden;
  color: var(--text-default);
  font-size: 1.25rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp__farm-rarity {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .3rem;
  padding: .1rem .5rem;
  border-radius: 1rem;
  background-color: var(--transparent-5-w);
  color: var(--text-secondary);
  font-size: var(--font-size-s);
  font-weight: 600;
}

.pp__farm-rarity i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background-color: currentColor;
}

.pp__farm-rarity.is-rare,
.pp__coat-share.is-rare {
  color: #7fa4ff;
}

.pp__farm-rarity.is-rare {
  background-color: color-mix(in srgb, #7fa4ff 20%, transparent);
}

.pp__farm-rarity.is-very_rare,
.pp__coat-share.is-very_rare {
  color: #f067d5;
}

.pp__farm-rarity.is-very_rare {
  background-color: color-mix(in srgb, #f067d5 20%, transparent);
}

.pp__farm-rarity.is-unique,
.pp__coat-share.is-unique {
  color: var(--red);
}

.pp__farm-rarity.is-unique {
  background-color: color-mix(in srgb, var(--red) 20%, transparent);
}

.pp__coats-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .85rem;
  margin-bottom: .4rem;
  padding-inline: .25rem;
}

.pp__coats-head b {
  color: var(--text-default);
  font-size: 1.1rem;
}

.pp__coats-head small {
  color: var(--text-secondary);
}

.pp__coats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .4rem;
}

.pp__coat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
  padding: .5rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-2-w);
}

.pp__coat-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--br-12);
  background-color: var(--transparent-5-w);
}

.pp__coat-view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp__coat-number,
.pp__coat-share {
  position: absolute;
  top: .35rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .4rem;
  border-radius: var(--br-6);
  background-color: rgba(0, 0, 0, .4);
  font-size: var(--font-size-s);
  font-weight: 600;
}

.pp__coat-number {
  left: .35rem;
  color: var(--text-default);
}

.pp__coat-share {
  right: .35rem;
  color: var(--text-secondary);
}

.pp__coat-share i {
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background-color: currentColor;
}

.pp__coat-name {
  min-height: 2.4em;
  color: var(--text-default);
  font-weight: 600;
  line-height: 1.2;
}

.pp__farm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-s);
}

.pp__farm-meta > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.pp__farm-meta svg {
  flex: none;
  width: .85rem;
  height: .85rem;
  fill: currentColor;
}

.pp__farm-owner {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .15rem .55rem .15rem .2rem;
  border-radius: 1rem;
  background-color: var(--transparent-5-w);
  color: var(--text-default);
  font-weight: 600;
}

.pp__farm-owner img {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.pp__farm-owner span {
  overflow: hidden;
  max-width: 11rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.pp__farm-like {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2.25rem;
  padding-inline: .75rem;
  border-radius: var(--br-12);
  background-color: var(--transparent-5-w);
  color: var(--text-default);
  font-weight: 700;
}

button.pp__farm-like svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

button.pp__farm-like.is-liked {
  background-color: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

button.pp__farm-like:disabled {
  cursor: default;
  opacity: .6;
}

@media (max-width: 760px) {
  .pp__farm-tools .pp__select {
    flex: 1 1 8rem;
  }

  .pp__farm-row {
    grid-template-columns: 1.5rem 4.5rem minmax(0, 1fr);
    gap: .5rem;
    padding: .5rem;
  }

  .pp__farm-thumb {
    width: 4.5rem;
    height: 4.5rem;
  }

  .pp__farm-place {
    font-size: 1rem;
  }

  .pp__farm-name b {
    font-size: 1rem;
  }

  .pp__farm-pop.is-open {
    width: min(19rem, calc(100vw - 1rem));
  }

  button.pp__farm-like {
    grid-column: 3;
    justify-self: start;
    height: 1.9rem;
  }
}