/* PepLive reference UI: 1–4 desktop, 5–8 mobile. Business values stay server-owned. */
body.peplive-home {
  margin:0;
  min-width:320px;
  min-height:100dvh;
  color:#f5f7ff;
  font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:#05226c url('./assets/homepage/sky.webp') center top/cover fixed no-repeat;
  overflow-x:hidden;
  font-size:14px
}
.peplive-home::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#00124488 0%,#0734ad22 50%,#477bff15);
  z-index:-1
}
.peplive-home #portalShell,.peplive-home #app {
  display:none!important
}
.hp-shell * {
  box-sizing:border-box
}
/* Shared dialogs mount outside .hp-shell, so theme the complete home surface. */
.peplive-home * {
  scrollbar-width:thin;
  scrollbar-color:#628fe0 #0b286333
}
.peplive-home ::-webkit-scrollbar {
  width:6px;
  height:6px
}
.peplive-home ::-webkit-scrollbar-track {
  background:#0b286333;
  border-radius:8px
}
.peplive-home ::-webkit-scrollbar-thumb {
  background:#628fe0;
  border-radius:8px
}
.peplive-home ::-webkit-scrollbar-thumb:hover {
  background:#8dcfff
}
.peplive-home ::-webkit-scrollbar-button {
  display:none;
  width:0;
  height:0
}
.peplive-home ::-webkit-scrollbar-corner {
  background:transparent
}
@supports selector(::-webkit-scrollbar) {
  .peplive-home :is(dialog,[role="dialog"]),
  .peplive-home :is(dialog,[role="dialog"]) * {
    scrollbar-width:auto;
    scrollbar-color:auto
  }
}
body.peplive-home .notification-center {
  display:flex;
  flex-direction:column;
  max-height:min(720px,calc(100dvh - max(72px,8vh) - 16px))
}
.peplive-home .notification-head,.peplive-home .notification-tools {
  flex-shrink:0
}
.peplive-home .notification-list {
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  padding-right:8px
}
.peplive-home .notification-item>div {
  min-width:0;
  overflow-wrap:anywhere
}
.hp-shell [hidden] {
  display:none!important
}
.hp-shell button,.hp-shell input,.hp-shell select {
  font:inherit;
  color:inherit
}
.hp-shell button {
  cursor:pointer
}
.hp-shell button:disabled {
  cursor:default;
  opacity:.53
}
.hp-shell button:focus-visible,.hp-shell a:focus-visible,.hp-shell input:focus-visible,.hp-shell select:focus-visible {
  outline:2px solid #83fbff;
  outline-offset:4px
}
.hp-shell a {
  color:inherit;
  text-decoration:none
}
.hp-shell h1,.hp-shell h2,.hp-shell h3,.hp-shell p {
  margin:0
}
.hp-shell h2 {
  font-size:clamp(17px,1.35vw,23px);
  font-weight:750
}
.hp-shell h3 {
  font-size:16px
}
.hp-shell small {
  font-size:12px
}
.hp-icon {
  width:24px;
  height:24px;
  flex-shrink:0;
  vertical-align:middle
}
.hp-header {
  height:96px;
  max-width:1920px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:26px;
  padding:16px 22px
}
.hp-brand {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:330px
}
.hp-brand strong {
  font-size:27px;
  letter-spacing:.5px;
  display:block
}
.hp-brand small {
  display:block;
  font-size:14px;
  color:#b2c7f7;
  margin-top:3px
}
.hp-logo {
  width:52px;
  height:52px;
  flex-shrink:0;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  border-radius:15px;
  background:linear-gradient(135deg,#0ce8ff,#635aff 62%,#ec5cfd);
  box-shadow:0 0 20px #258dff,inset 0 0 8px #ffffff70
}
.hp-logo i {
  width:6px;
  height:25px;
  border-radius:6px;
  background:#fff;
  box-shadow:0 0 9px #dcecff
}
.hp-logo i:first-child {
  height:21px;
  transform:translateY(2px)
}
.hp-resources {
  display:flex;
  justify-content:center;
  gap:14px;
  flex:1
}
.hp-resource {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-width:116px;
  padding:11px 18px;
  border:1px solid #3878e69c;
  border-radius:16px;
  background:linear-gradient(140deg,#143c9bde,#061963de);
  box-shadow:inset 0 1px 10px #476bfd19;
  white-space:nowrap
}
.hp-resource i {
  font-style:normal;
  font-size:26px;
  filter:drop-shadow(0 2px 3px #02104c)
}
.hp-resource strong {
  font-size:20px
}
.hp-resource small {
  display:block;
  color:#a8bce8;
  font-weight:400;
  margin-top:4px
}
.hp-header-actions {
  display:flex;
  align-items:center;
  gap:14px
}
.hp-icon-button,.hp-avatar-button {
  height:44px;
  min-width:46px;
  border-radius:14px;
  border:1px solid #4279df80;
  background:linear-gradient(130deg,#094696,#2428af);
  display:grid;
  place-items:center
}
.hp-avatar-button img {
  height:48px;
  width:48px;
  object-fit:contain
}
.hp-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 19px;
  border-radius:13px;
  border:1px solid #83acff;
  box-shadow:inset 0 0 9px #ffffff4a,0 0 13px #2963ff5c;
  background:linear-gradient(115deg,#12c7fa 0%,#244cff 47%,#843afd);
  color:white;
  font-weight:700;
  white-space:nowrap;
  transition:filter .15s,transform .15s
}
.hp-primary:hover:not(:disabled) {
  filter:brightness(1.17);
  transform:translateY(-1px)
}
.hp-primary .hp-icon {
  width:18px;
  height:18px
}
.hp-logout {
  min-width:142px;
  background:linear-gradient(115deg,#d251ac,#6e36f6 60%,#3839f3)
}
.hp-layout {
  max-width:1920px;
  margin:0 auto;
  padding:6px 20px 14px;
  display:grid;
  grid-template-columns:254px minmax(0,1fr);
  gap:16px;
  min-height:calc(100dvh - 146px);
  align-items:start
}
.hp-panel {
  border:1px solid #458cffe0;
  border-radius:19px;
  background:linear-gradient(120deg,#03205dea,#073287dc 50%,#12176be8);
  box-shadow:inset 0 1px 3px #b2f8ff18,0 4px 22px #02296b24;
  min-width:0;
  overflow:hidden
}
.hp-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:14px
}
.hp-panel-head h2 small {
  font-size:12px;
  vertical-align:middle;
  font-weight:500
}
.hp-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  background:transparent;
  color:#b5caf7!important;
  font-size:12px!important;
  white-space:nowrap;
  padding:3px 0
}
.hp-link .hp-icon {
  width:13px;
  height:13px
}
.hp-sidebar {
  display:flex;
  flex-direction:column;
  gap:15px;
  align-self:stretch
}
.hp-self {
  width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  padding:11px 10px;
  text-align:left;
  border-color:#50b8ff;
  background:linear-gradient(120deg,#13639dcc,#092476 60%,#2934bc)
}
.hp-self>img {
  width:82px;
  height:110px;
  object-fit:contain;
  flex-shrink:0
}
.hp-self>span {
  min-width:0;
  flex:1
}
.hp-self strong {
  display:block;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.hp-self b {
  display:block;
  margin:9px 0 5px;
  font-size:13px
}
.hp-self small {
  color:#b5cafa;
  font-size:11px;
  display:block;
  white-space:nowrap
}
.hp-self small.hp-online {
  color:#02ffb8;
  margin-top:6px;
  font-weight:700
}
.hp-self>.hp-icon {
  width:16px
}
.hp-side-nav {
  padding:12px 6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:335px
}
.hp-side-nav button {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 21px;
  border:1px solid transparent;
  border-radius:13px;
  color:#bed5ff;
  background:transparent;
  text-align:left;
  font-size:16px
}
.hp-side-nav .hp-icon {
  width:28px;
  height:28px;
  color:#b3ddff;
  filter:drop-shadow(0 0 5px #66d9ff60)
}
.hp-side-nav button.active {
  color:#fff;
  font-weight:750;
  border-color:#6ce2ff;
  background:linear-gradient(110deg,#00c8ffbb,#2242ff,#722fff);
  box-shadow:inset 0 0 12px #9edaff80,0 0 13px #2d8dff9c
}
.hp-invite {
  position:relative;
  display:flex;
  align-items:center;
  min-height:160px;
  background:linear-gradient(115deg,#3332b9cc,#141270e8);
  padding:10px 10px 10px 0;
  border-color:#7a85ff;
  box-shadow:inset 0 0 20px #7961ff5c,0 0 15px #5164ff32
}
.hp-invite>img {
  width:48%;
  height:155px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px #785cff66);
  margin-left:-8px
}
.hp-invite>div {
  flex:1;
  z-index:1
}
.hp-invite h2 {
  white-space:nowrap
}
.hp-invite p {
  font-size:11px;
  margin:5px 0 12px;
  color:#e0dbff;
  white-space:nowrap
}
.hp-invite .hp-primary {
  font-size:12px;
  border-radius:22px;
  padding:8px 12px
}
.hp-side-invite {
  margin-top:auto
}
.hp-studio-link {
  text-align:center;
  font-size:12px;
  color:#c8daff!important
}
.hp-page {
  min-width:0
}
.hp-farm-page {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:132px minmax(380px,1fr) 85px;
  gap:14px;
  min-height:calc(100dvh - 166px)
}
.hp-maps {
  grid-column:1;
  grid-row:1;
  display:flex;
  padding:9px;
  gap:9px;
  background:#11267c9c;
  overflow-x:auto;
  scrollbar-width:thin;
  align-items:stretch
}
.hp-map {
  flex:1 0 103px;
  min-width:0;
  position:relative;
  border:1px solid #4474d5a6;
  border-radius:13px;
  background:linear-gradient(#254f9ec2,#09267c);
  padding:7px 5px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-align:center;
  overflow:hidden
}
.hp-map img {
  width:88px;
  height:55px;
  object-fit:cover;
  border-radius:8px;
  mix-blend-mode:screen
}
.hp-map strong {
  font-size:13px;
  display:block;
  white-space:nowrap
}
.hp-map small {
  font-size:10px;
  color:#adc3ec;
  display:block;
  margin-top:3px;
  white-space:nowrap
}
.hp-map em {
  position:absolute;
  top:0;
  right:0;
  font-size:9px;
  padding:3px 5px;
  border-radius:0 10px 0 10px;
  background:#00d1b8;
  font-style:normal;
  box-shadow:0 0 10px #00eeff
}
.hp-map.selected {
  border:2px solid #77fcff;
  background:linear-gradient(120deg,#0c8ee4,#264aff);
  box-shadow:inset 0 0 16px #47e9ff,0 0 12px #33beff
}
.hp-farm-stage {
  grid-column:1;
  grid-row:2;
  position:relative;
  min-width:0;
  min-height:380px
}
.hp-farm-stage #sceneWrap {
  position:relative!important;
  inset:auto;
  width:100%;
  height:100%;
  min-height:380px;
  aspect-ratio:auto!important;
  border:0;
  border-radius:24px;
  background:transparent;
  box-shadow:none;
  overflow:hidden
}
.hp-farm-stage #sceneWrap::before {
  display:none
}
.hp-farm-stage .scene-camera,.hp-farm-stage .scene-depth,.hp-farm-stage .vector-scene {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:none!important;
  overflow:hidden
}
.hp-farm-stage canvas {
  width:100%!important;
  height:100%!important
}
.hp-farm-stage .scene-status {
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:85%;
  text-align:center;
  font-size:11px;
  border-radius:22px;
  background:#05256da8;
  border:1px solid #75b1fb60;
  padding:8px 16px
}
.hp-farm-stage .camera-help {
  display:none
}
.hp-farm-stage .camera-controls {
  top:12px;
  right:12px;
  bottom:auto;
  background:#052373d9;
  border-color:#5e94ff
}
.hp-farm-stage #visitWorldBar {
  position:absolute;
  left:0;
  top:0;
  right:0;
  z-index:8
}
.hp-farm-actions {
  grid-row:3;
  grid-column:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  padding:0 8px 8px
}
.hp-farm-action {
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:23px;
  border:1px solid #d9ffff;
  background:linear-gradient(130deg,#00eaa0,#00a86d);
  box-shadow:inset 0 0 12px #b8fffaa8,0 0 23px #23ffc979;
  transition:transform .15s
}
.hp-farm-action:hover {
  transform:translateY(-3px)
}
.hp-farm-action .hp-icon {
  width:35px;
  height:35px;
  filter:drop-shadow(0 3px 3px #07574766);
  fill:#ffffff35
}
.hp-farm-action strong {
  display:block;
  font-size:20px;
  white-space:nowrap
}
.hp-farm-action small {
  display:block;
  margin-top:4px;
  color:#edffff;
  font-size:11px
}
.hp-farm-action.water {
  background:linear-gradient(130deg,#00ceff,#1358ff,#5733f9);
  box-shadow:inset 0 0 12px #acfcffa8,0 0 23px #00d4ff99
}
.hp-farm-action.harvest {
  background:linear-gradient(130deg,#ffdf4d,#ffa228,#fb6d41);
  box-shadow:inset 0 0 12px #fff8c4a8,0 0 23px #ffc94899
}
.hp-farm-action.visit {
  background:linear-gradient(130deg,#b16bff,#7538ff,#4520e9);
  box-shadow:inset 0 0 12px #e3b9ffa8,0 0 23px #9753ff99
}
.hp-farm-market {
  grid-column:2;
  grid-row:1;
  align-self:start;
  padding:16px;
  margin-top:35px;
  position:relative;
  z-index:2
}
.hp-farm-inventory {
  grid-column:2;
  grid-row:2;
  align-self:start;
  padding:16px;
  margin-top:132px
}
.hp-farm-logs {
  grid-column:2;
  grid-row:2 / 4;
  align-self:end;
  padding:16px;
  max-height:320px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden
}
.hp-farm-logs>.hp-panel-head,.hp-farm-logs>.hp-log-tabs {
  flex-shrink:0
}
#hpFarmLogs {
  flex:1;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  padding-right:6px
}
@supports selector(::-webkit-scrollbar) {
  #hpFarmLogs {
    scrollbar-width:auto;
    scrollbar-color:auto
  }
}
.hp-inventory-value {
  display:none
}
.hp-tip {
  display:none
}
.hp-farm-mission-panel {
  padding:16px;
  display:none
}
.hp-shell[data-page="farm"] .hp-side-nav {
  display:none
}
.hp-shell[data-page="farm"] .hp-farm-mission-panel {
  display:block
}
.hp-shell[data-page="farm"] .hp-layout {
  grid-template-columns:300px minmax(0,1fr)
}
.hp-mission {
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 96px 90px;
  align-items:center;
  gap:14px;
  border:1px solid #3968c580;
  background:linear-gradient(100deg,#123d8370,#17297c66);
  border-radius:14px;
  padding:12px;
  margin-top:7px;
  min-height:82px
}
.hp-item-icon {
  font-size:37px;
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #437adb91;
  background:linear-gradient(125deg,#0c4f8b86,#10358d66);
  border-radius:14px;
  filter:drop-shadow(0 3px 3px #061a6550);
  flex-shrink:0
}
.hp-mission strong {
  font-size:16px
}
.hp-mission-copy {
  min-width:0
}
.hp-mission p {
  font-size:12px;
  color:#abc7f8;
  margin:6px 0
}
.hp-progress-row {
  display:flex;
  align-items:center;
  gap:10px
}
.hp-progress {
  height:8px;
  background:#254e997d;
  border:1px solid #4778d06b;
  flex:1;
  border-radius:8px;
  overflow:hidden
}
.hp-progress i {
  display:block;
  height:100%;
  border-radius:8px;
  background:linear-gradient(90deg,#41fff1,#02d9f7)
}
.hp-progress-row small {
  font-size:12px;
  min-width:26px
}
.hp-reward {
  font-weight:750;
  white-space:nowrap
}
.hp-mission .hp-primary {
  padding:9px 12px;
  font-size:13px
}
.hp-farm-mission-panel .hp-mission {
  grid-template-columns:44px minmax(0,1fr) 64px;
  gap:7px;
  padding:9px 6px;
  min-height:72px;
  position:relative
}
.hp-farm-mission-panel .hp-mission .hp-item-icon {
  width:42px;
  height:44px;
  font-size:27px
}
.hp-farm-mission-panel .hp-mission strong {
  font-size:12px
}
.hp-farm-mission-panel .hp-mission p {
  display:none
}
.hp-farm-mission-panel .hp-reward {
  position:absolute;
  right:82px;
  bottom:11px;
  font-size:10px
}
.hp-farm-mission-panel .hp-progress-row {
  max-width:76%;
  margin-top:8px;
  gap:4px
}
.hp-farm-mission-panel .hp-progress-row small {
  font-size:10px
}
.hp-farm-mission-panel .hp-primary {
  font-size:10px;
  padding:8px
}
.hp-farm-mission-panel .hp-panel-head {
  gap:3px
}
.hp-farm-mission-panel h2 {
  font-size:19px
}
.hp-tabs {
  display:flex;
  padding:3px;
  border-radius:14px;
  background:#27459266;
  border:1px solid #315ec141;
  gap:4px
}
.hp-tabs button {
  flex:1;
  background:transparent;
  border:1px solid transparent;
  border-radius:11px;
  padding:9px 6px;
  color:#c9d9ff;
  white-space:nowrap
}
.hp-tabs button.active,.hp-categories button.active {
  color:white;
  background:linear-gradient(110deg,#05d2ff,#3048ff 65%,#8045fb);
  border-color:#738fff;
  box-shadow:inset 0 0 9px #bdedff75,0 0 12px #3579ff70;
  font-weight:700
}
.hp-quick-sale {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  border-radius:12px;
  border:1px solid #5371d17d;
  padding:9px;
  background:#1435786e
}
.hp-quick-sale .hp-item-icon {
  font-size:31px;
  width:42px;
  height:45px;
  border:0;
  background:none
}
.hp-quick-sale>div {
  flex:1;
  min-width:0
}
.hp-quick-sale>div:last-child {
  flex:0 0 auto;
  text-align:right
}
.hp-quick-sale strong {
  display:block;
  font-size:13px
}
.hp-quick-sale p {
  font-size:12px;
  color:#bed0f8;
  margin-top:7px
}
.hp-quick-sale button {
  font-size:10px;
  padding:4px 12px;
  margin-top:6px
}
.hp-inventory-grid {
  display:flex;
  gap:10px;
  overflow:auto;
  scrollbar-width:thin
}
.hp-inventory-grid button {
  flex:1 0 49px;
  min-width:0;
  text-align:center;
  background:none;
  border:0;
  padding:0
}
.hp-inventory-grid .hp-item-icon {
  width:100%;
  height:51px;
  font-size:31px;
  border-radius:13px
}
.hp-inventory-grid strong,.hp-inventory-grid small {
  display:block;
  margin-top:5px;
  font-size:11px;
  white-space:nowrap
}
.hp-inventory-grid small {
  color:#bacffc
}
.hp-audits details {
  border-bottom:1px solid #4263b951;
  padding:7px 0
}
.hp-audits summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer
}
.hp-audits summary::-webkit-details-marker {
  display:none
}
.hp-audits .hp-item-icon {
  width:35px;
  height:36px;
  font-size:23px;
  border-radius:10px
}
.hp-audits summary>div {
  flex:1;
  min-width:0
}
.hp-audits strong {
  font-size:12px;
  display:block
}
.hp-audits p {
  font-size:10px;
  color:#c4d0f3;
  margin-top:4px;
  overflow-wrap:anywhere;
  line-height:1.45
}
.hp-audits time {
  color:#78e2fc;
  font-size:9px;
  max-width:93px
}
.hp-audits summary>.hp-icon {
  width:11px;
  height:11px
}
.hp-audit-detail {
  padding:8px 10px;
  background:#02164188;
  border-radius:9px;
  margin-top:5px
}
.hp-audit-detail p {
  overflow-wrap:anywhere
}
.hp-farm-logs .hp-audits summary {
  display:grid;
  grid-template-columns:35px minmax(0,1fr) 11px;
  gap:4px 10px
}
.hp-farm-logs .hp-audits summary>.hp-item-icon {
  grid-column:1;
  grid-row:1 / 3
}
.hp-farm-logs .hp-audits summary>div {
  grid-column:2;
  grid-row:1
}
.hp-farm-logs .hp-audits summary p {
  margin-bottom:0
}
.hp-farm-logs .hp-audits time {
  grid-column:2;
  grid-row:2;
  max-width:none
}
.hp-farm-logs .hp-audits summary>.hp-icon {
  grid-column:3;
  grid-row:1 / 3
}
.hp-log-tabs {
  font-size:11px;
  margin-bottom:8px
}
.hp-empty {
  padding:23px 12px;
  text-align:center;
  line-height:1.8;
  color:#acbfe6;
  font-size:13px
}
.hp-mobile-intro,.hp-bottom-nav {
  display:none
}
.hp-muted {
  color:#aec4ed;
  font-size:12px
}
.hp-green {
  color:#03edb1!important
}
.hp-red {
  color:#ff5d85!important
}
.hp-tag,.hp-level {
  display:inline-block;
  background:#173d956b;
  border:1px solid #4578d14f;
  border-radius:14px;
  padding:5px 12px;
  color:#d7e5ff;
  font-size:11px;
  white-space:nowrap
}
.hp-task-page {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:17px
}
.hp-task-main,.hp-task-aside {
  min-width:0
}
.hp-task-main {
  display:flex;
  flex-direction:column;
  gap:12px
}
.hp-task-hero {
  height:115px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:15px 10px
}
.hp-task-hero h1 {
  font-size:34px
}
.hp-task-hero p {
  color:#c5dcff;
  font-size:14px;
  margin-top:7px
}
.hp-task-hero>div {
  position:relative;
  z-index:1
}
.hp-task-hero>img {
  position:absolute;
  width:45%;
  right:0;
  top:0;
  height:140px;
  object-fit:cover;
  mask-image:linear-gradient(to right,transparent,#000 50%);
  opacity:.9
}
.hp-hero-caption {
  position:absolute;
  right:20px;
  bottom:12px;
  font-style:italic;
  font-size:13px;
  color:#b1c2ff
}
.hp-task-tabs {
  max-width:570px;
  background:#09226999;
  padding:4px;
  gap:6px
}
.hp-task-tabs button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:11px;
  font-size:18px
}
.hp-task-tabs b {
  font-size:23px
}
.hp-task-tabs small {
  display:none
}
.hp-today,.hp-milestone-panel,.hp-challenges {
  padding:16px
}
.hp-task-checkin {
  display:none
}
.hp-milestones {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  position:relative
}
.hp-milestones::before {
  content:"";
  height:9px;
  border:1px solid #366cd0;
  background:#173e8f;
  position:absolute;
  top:33px;
  left:20px;
  right:20px;
  border-radius:12px
}
.hp-milestones>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  position:relative;
  flex:1
}
.hp-milestones b {
  font-size:37px;
  filter:drop-shadow(0 0 7px #9e59ff)
}
.hp-milestones strong {
  font-size:11px
}
.hp-milestones span {
  font-size:10px;
  border:1px solid #3660b2;
  border-radius:15px;
  padding:5px 15px;
  color:#b8c9ed
}
.hp-milestones .done span {
  color:#08e9b6;
  background:#00c48929
}
.hp-challenges>div {
  display:flex;
  gap:12px
}
.hp-challenges button {
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  gap:6px;
  border:1px solid #2784df;
  border-radius:15px;
  background:linear-gradient(110deg,#044b9477,#132686);
  padding:5px;
  text-align:left
}
.hp-challenges button>img {
  width:30%;
  height:82px;
  object-fit:cover;
  border-radius:12px
}
.hp-challenges button:nth-child(2)>img {
  object-fit:contain
}
.hp-challenges strong {
  display:block;
  font-size:17px;
  margin:5px 0
}
.hp-challenges small {
  color:#27f5c7;
  font-size:11px
}
.hp-challenges p {
  font-size:10px;
  color:#c0d2f5
}
.hp-challenges .hp-icon {
  width:15px;
  margin-left:auto
}
.hp-task-aside {
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-top:44px
}
.hp-farm-preview {
  padding:0;
  background:linear-gradient(#124488,#182a79);
  text-align:left;
  width:100%
}
.hp-farm-preview header {
  padding:15px 15px 0
}
.hp-farm-preview header>span {
  font-size:11px
}
.hp-farm-preview>img {
  display:block;
  width:100%;
  height:245px;
  object-fit:cover
}
.hp-task-aside>section {
  padding:16px
}
.hp-checkin-days {
  display:flex;
  gap:5px;
  margin-top:12px
}
.hp-checkin-days>div {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  border-radius:9px;
  border:1px solid #416cc866;
  background:#0c2a6f88;
  padding:9px 2px
}
.hp-checkin-days small {
  font-size:9px;
  white-space:nowrap
}
.hp-checkin-days b {
  font-size:25px
}
.hp-checkin-days .done {
  border-color:#37ebc1;
  background:#008b6b77;
  box-shadow:inset 0 0 13px #3dfde455
}
.hp-checkin-days .done b {
  color:#24ffc1
}
.hp-recommend>div {
  display:flex;
  gap:10px
}
.hp-recommend button {
  flex:1;
  border-radius:12px;
  border:1px solid #426cce;
  background:#10358180;
  padding:10px;
  font-size:30px
}
.hp-recommend strong,.hp-recommend small {
  display:block;
  font-size:12px;
  margin:7px 0
}
.hp-recommend small {
  font-size:10px;
  color:#b5c9f0
}
.hp-recommend .hp-primary {
  display:block;
  font-size:11px;
  padding:7px
}
.hp-market-page {
  display:grid;
  grid-template-columns:minmax(0,1fr) 355px;
  gap:13px
}
.hp-market-hero {
  grid-column:1/-1;
  position:relative;
  height:112px;
  display:flex;
  align-items:center;
  padding:0 22px;
  overflow:visible
}
.hp-market-hero h1 {
  font-size:40px
}
.hp-market-hero h2 {
  font-size:18px;
  margin-top:5px;
  color:#d2e0ff;
  font-weight:500
}
.hp-market-hero p {
  color:#a5c6f7;
  font-size:12px;
  margin-top:5px
}
.hp-market-hero>div {
  z-index:1
}
.hp-market-hero>img {
  position:absolute;
  right:11%;
  top:-22px;
  width:43%;
  height:156px;
  object-fit:cover;
  object-position:center 27%;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 78%,transparent)
}
.hp-market-topbar {
  grid-column:1;
  display:flex;
  align-items:center;
  gap:22px
}
.hp-market-tabs {
  flex:1;
  background:transparent;
  border:0;
  padding:0;
  gap:8px
}
.hp-market-tabs button {
  font-size:18px;
  font-weight:700;
  border:1px solid #4179de80;
  background:#08236aba;
  padding:12px
}
.hp-search {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #4779c6;
  border-radius:13px;
  padding:7px 12px;
  background:#061f69;
  max-width:220px
}
.hp-search input {
  width:100%;
  min-width:0;
  background:none;
  border:none;
  outline:0;
  font-size:12px;
  padding:5px
}
.hp-search input::placeholder {
  color:#aac4ee
}
.hp-search span {
  font-size:25px
}
.hp-catalogue {
  grid-column:1;
  padding:15px
}
.hp-catalogue-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:15px
}
.hp-catalogue-head h2 {
  font-size:19px;
  white-space:nowrap
}
.hp-categories {
  display:flex;
  gap:5px;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1
}
.hp-categories button {
  white-space:nowrap;
  font-size:11px;
  background:#0a2c72;
  border:1px solid #2762b0;
  border-radius:10px;
  padding:8px 11px
}
.hp-catalogue-head select {
  background:#0a2c72;
  border:1px solid #3266b7;
  border-radius:9px;
  font-size:11px;
  padding:8px;
  max-width:100px
}
.hp-product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px
}
.hp-product {
  padding:12px;
  border:1px solid #4381d985;
  background:linear-gradient(135deg,#16488b77,#082269a8);
  border-radius:14px;
  min-width:0
}
.hp-product-top {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:16px
}
.hp-product-top .hp-item-icon {
  width:61px;
  height:67px;
  font-size:46px
}
.hp-product h3 {
  font-size:14px;
  white-space:nowrap
}
.hp-product-top small {
  display:inline-block;
  font-size:9px;
  border-radius:9px;
  padding:3px 6px;
  background:#1554a6;
  margin-top:5px;
  white-space:nowrap
}
.hp-product-price {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px;
  margin-bottom:14px
}
.hp-product-price small {
  font-size:10px;
  color:#bed3fc
}
.hp-product-price strong {
  font-size:14px;
  white-space:nowrap
}
.hp-product-stock {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px
}
.hp-product-stock>span {
  font-size:11px;
  color:#c5d9ff;
  white-space:nowrap
}
.hp-product-stock button {
  font-size:11px;
  padding:6px 15px;
  border-radius:11px
}
.hp-mobile-price {
  display:none
}
.hp-market-aside {
  grid-column:2;
  grid-row:2/4;
  display:flex;
  flex-direction:column;
  gap:13px
}
.hp-market-aside>.hp-panel {
  padding:16px
}
.hp-asset-grid {
  display:flex;
  gap:9px
}
.hp-asset-grid .hp-resource {
  flex:1;
  min-width:0;
  gap:6px;
  padding:14px 8px
}
.hp-asset-grid .hp-resource i {
  font-size:24px
}
.hp-asset-grid .hp-resource strong {
  font-size:16px
}
.hp-market-inventory .hp-muted {
  margin-top:-8px;
  margin-bottom:13px
}
.hp-fast-sale {
  display:flex;
  align-items:center;
  gap:5px
}
.hp-fast-sale>img {
  width:30%;
  height:95px;
  object-fit:contain
}
.hp-fast-sale p {
  font-size:10px;
  color:#c5d3f7;
  margin:6px 0 13px
}
.hp-fast-sale .hp-primary {
  font-size:12px;
  padding:8px 14px
}
.hp-price-panel {
  grid-column:1;
  padding:16px
}
.hp-quotes {
  display:flex;
  gap:10px
}
.hp-quotes>div {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-radius:12px;
  border:1px solid #386cc374;
  background:#0b2e797d;
  padding:12px
}
.hp-quotes span {
  font-size:30px
}
.hp-quotes strong {
  font-size:12px
}
.hp-quotes small {
  color:#b3c7ef;
  font-size:10px
}
.hp-quotes b {
  font-size:12px;
  color:#19f2ce
}
.hp-order-panel {
  grid-column:2;
  padding:16px
}
.hp-orders article {
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #4870b354
}
.hp-orders article:last-child {
  border-bottom:0
}
.hp-orders .hp-item-icon {
  width:33px;
  height:36px;
  font-size:25px;
  border:0;
  background:none
}
.hp-orders article>div {
  flex:1;
  min-width:0
}
.hp-orders strong {
  font-size:12px;
  display:block
}
.hp-orders time {
  display:block;
  font-size:10px;
  color:#b8c9ee;
  margin-top:3px
}
.hp-orders article>span:not(.hp-item-icon) {
  font-size:11px
}
.hp-orders article>b {
  font-size:12px;
  white-space:nowrap
}
.hp-completed {
  background:#00af8054;
  color:#00ffd4;
  border-radius:15px;
  padding:5px 9px;
  font-size:9px!important;
  white-space:nowrap
}
.hp-market-page .hp-order-panel {
  grid-column:1/-1
}
.hp-market-page .hp-price-panel {
  grid-column:1/-1
}
.hp-market-page .hp-orders {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px
}
.hp-profile-page {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  grid-template-rows:repeat(2,minmax(150px,auto)) auto auto;
  gap:12px
}
.hp-profile-page>.hp-panel {
  padding:16px
}
.hp-profile-identity {
  grid-column:1;
  grid-row:1/3
}
.hp-profile-self {
  grid-column:2;
  grid-row:1/3
}
.hp-profile-earnings {
  grid-column:3;
  grid-row:1
}
.hp-profile-assets {
  grid-column:3;
  grid-row:2
}
.hp-profile-growth {
  grid-column:1;
  grid-row:3
}
.hp-profile-auto {
  grid-column:2;
  grid-row:3
}
.hp-profile-worlds {
  grid-column:3;
  grid-row:3
}
.hp-profile-activity {
  grid-column:1;
  grid-row:4
}
.hp-profile-logs {
  grid-column:2;
  grid-row:4
}
.hp-profile-settings {
  grid-column:3;
  grid-row:4
}
.hp-profile-person {
  display:flex;
  align-items:center;
  gap:15px;
  margin:16px 0 30px
}
.hp-profile-person>img {
  width:115px;
  height:125px;
  object-fit:contain;
  background:radial-gradient(ellipse,#2ae6ff65,#7d63ff87 65%,#59c9ff);
  border-radius:50%;
  border:2px solid #68a4ff
}
.hp-profile-person>div {
  flex:1;
  min-width:0
}
.hp-profile-person h2 {
  font-size:19px;
  overflow-wrap:anywhere
}
.hp-level {
  background:linear-gradient(110deg,#0ccbff,#653bff);
  font-size:12px;
  font-weight:700;
  margin-top:6px
}
.hp-profile-person p {
  font-size:12px;
  color:#c0d5ff;
  line-height:1.6;
  margin-top:14px
}
.hp-profile-stats {
  display:flex;
  gap:10px;
  justify-content:space-between
}
.hp-profile-stats>div {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:#15408466;
  border:1px solid #3463b761;
  border-radius:13px;
  padding:14px 5px
}
.hp-profile-stats b {
  font-size:21px
}
.hp-profile-stats small {
  font-size:11px;
  white-space:nowrap;
  color:#b7cdf5
}
.hp-profile-stats span {
  font-size:25px
}
.hp-profile-stage {
  position:relative;
  height:220px;
  background:radial-gradient(ellipse at center bottom,#02befe72,#1c3db600 70%);
  border-radius:15px;
  display:flex;
  justify-content:center;
  overflow:hidden
}
.hp-profile-stage>img {
  height:225px;
  max-width:65%;
  object-fit:contain;
  filter:drop-shadow(0 0 17px #1caaff);
  z-index:1
}
.hp-profile-stage::after {
  content:"";
  position:absolute;
  bottom:0;
  left:12%;
  right:12%;
  height:40px;
  border:2px solid #75f9ff;
  border-radius:50%;
  box-shadow:0 0 20px #32adff,inset 0 0 25px #3d94ff
}
.hp-promise {
  position:absolute;
  left:0;
  top:6px;
  background:linear-gradient(#04bef8,#2844d9);
  border:1px solid #c0ffff;
  border-radius:12px;
  box-shadow:0 0 13px #18c4ff;
  padding:9px;
  font-size:11px;
  z-index:2;
  text-align:center
}
.hp-self-controls {
  position:absolute;
  right:0;
  top:6px;
  display:flex;
  flex-direction:column;
  gap:9px;
  z-index:2
}
.hp-self-controls button {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid #72b3ff8c;
  border-radius:12px;
  background:#1b56b6b3;
  padding:9px
}
.hp-self-controls .hp-icon {
  width:19px;
  height:19px
}
.hp-self-status {
  position:relative;
  margin-top:11px;
  background:#092674c9;
  border-radius:12px;
  padding:11px;
  font-size:13px
}
.hp-self-status span {
  display:block;
  color:#9dbbe7;
  margin-top:5px;
  font-size:11px
}
.hp-earnings-main {
  margin:17px 0
}
.hp-earnings-main>strong {
  font-size:36px;
  letter-spacing:1px
}
.hp-earnings-main p {
  color:#a4bfea;
  font-size:12px;
  margin-top:5px
}
.hp-earnings-bottom {
  display:flex;
  gap:10px;
  align-items:center
}
.hp-earnings-bottom>div {
  flex:1;
  background:#1b3d9166;
  border:1px solid #4262b34d;
  border-radius:12px;
  padding:11px
}
.hp-earnings-bottom strong {
  font-size:17px;
  white-space:nowrap
}
.hp-earnings-bottom small {
  display:block;
  color:#c1d0f5;
  font-size:11px;
  margin-top:5px
}
.hp-earnings-bottom button {
  font-size:12px;
  padding:11px
}
.hp-auto-grid {
  display:flex;
  gap:8px;
  margin-top:9px
}
.hp-auto-grid>div {
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  align-items:center;
  background:#173a876e;
  border:1px solid #3b61b666;
  border-radius:12px;
  padding:8px 4px;
  gap:6px
}
.hp-auto-grid b {
  font-size:24px
}
.hp-auto-grid span,.hp-auto-grid small {
  font-size:10px;
  white-space:nowrap
}
.hp-worlds-mini {
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin
}
.hp-worlds-mini .hp-map {
  flex:0 0 100px
}
.hp-profile-settings>div {
  display:grid;
  gap:7px
}
.hp-profile-settings button {
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  background:#173b8670;
  border:1px solid #416bc34f;
  border-radius:11px;
  padding:9px
}
.hp-profile-settings .hp-icon {
  width:25px;
  height:25px;
  color:#8eddff;
  filter:drop-shadow(0 0 5px #2895fa)
}
.hp-profile-settings strong {
  display:block;
  font-size:12px
}
.hp-profile-settings small {
  display:block;
  font-size:10px;
  color:#a9bfe9;
  margin-top:3px
}
.hp-profile-activity .hp-audits,.hp-profile-logs .hp-audits {
  max-height:205px;
  overflow:auto;
  scrollbar-width:thin
}
.hp-profile-assets .hp-asset-grid {
  flex-wrap:wrap
}
.hp-profile-assets .hp-resource {
  padding:10px 7px
}
.hp-profile-assets .hp-resource strong {
  font-size:14px
}
.hp-footer {
  min-height:50px;
  padding:9px 28px;
  background:#04194a99;
  border-top:1px solid #315aac;
  display:flex;
  align-items:center;
  gap:28px;
  font-size:11px;
  color:#a1b5e4
}
.hp-footer>strong {
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-size:12px
}
.hp-footer .hp-logo {
  width:26px;
  height:28px;
  border-radius:7px;
  gap:4px;
  box-shadow:0 0 8px #376bff
}
.hp-footer .hp-logo i {
  height:15px;
  width:3px
}
.hp-footer>button {
  margin-left:auto;
  background:none;
  border:0;
  color:#a1b5e4;
  font-size:11px
}
.hp-footer>small {
  border:1px solid #2854b7;
  padding:7px 20px;
  border-radius:18px;
  font-size:10px
}
.hp-toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translate(-50%,15px);
  background:#081e64f2;
  color:#fff;
  border:1px solid #6ab6ff;
  box-shadow:0 8px 35px #0005;
  border-radius:14px;
  padding:14px 24px;
  z-index:250;
  max-width:90vw;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.hp-toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.hp-dialog {
  color:#f1f7ff;
  background:linear-gradient(130deg,#062867,#152276);
  border:1px solid #66bbff;
  border-radius:22px;
  padding:22px;
  width:min(600px,90vw);
  max-height:85dvh;
  box-shadow:0 0 40px #396dff77
}
.hp-dialog::backdrop {
  background:#010a29a8;
  backdrop-filter:blur(5px)
}
.hp-dialog header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}
.hp-dialog header>button {
  border:0;
  background:#23499c;
  border-radius:50%;
  font-size:23px;
  width:34px;
  height:34px
}
.hp-dialog p {
  line-height:1.8;
  margin-bottom:14px;
  font-size:14px
}
.hp-dialog .hp-audits p {
  font-size:12px;
  margin-bottom:0
}
.hp-dialog .hp-inventory-grid {
  flex-wrap:wrap
}
.hp-dialog .hp-inventory-grid button {
  flex:0 0 90px
}
.hp-shell button {
  touch-action:manipulation
}
@media(min-width:1600px) {
  .hp-farm-page {
  grid-template-columns:minmax(0,1fr) 360px
}
.hp-farm-inventory {
  margin-top:132px
}
.hp-farm-logs {
  max-height:380px
}
.hp-farm-mission-panel .hp-mission {
  min-height:84px
}
.hp-task-page {
  grid-template-columns:minmax(0,1fr) 410px
}
.hp-task-hero {
  height:120px
}
.hp-task-aside .hp-farm-preview>img {
  height:270px
}
.hp-task-main .hp-mission {
  min-height:83px
}
.hp-profile-page {
  grid-template-rows:160px 165px auto auto
}
.hp-profile-stage {
  height:225px
}
}
@media(min-width:901px) and (max-width:1300px) {
  .hp-layout,.hp-shell[data-page="farm"] .hp-layout {
  grid-template-columns:215px minmax(0,1fr);
  gap:12px;
  padding:5px 12px 14px
}
.hp-header {
  padding:12px;
  gap:12px;
  height:86px
}
.hp-brand {
  min-width:270px;
  gap:10px
}
.hp-brand strong {
  font-size:22px
}
.hp-brand small {
  font-size:11px
}
.hp-resource {
  min-width:85px;
  padding:8px 11px;
  gap:7px
}
.hp-resource strong {
  font-size:16px
}
.hp-header-actions {
  gap:8px
}
.hp-logout {
  min-width:100px;
  font-size:12px;
  padding:9px
}
.hp-farm-page {
  grid-template-columns:minmax(0,1fr) 250px;
  grid-template-rows:120px minmax(425px,1fr) 75px;
  gap:10px
}
.hp-farm-inventory {
  margin-top:145px
}
.hp-farm-logs {
  max-height:295px
}
.hp-map {
  flex-basis:94px
}
.hp-self>img {
  width:65px;
  height:95px
}
.hp-self strong {
  font-size:12px
}
.hp-self small {
  font-size:9px
}
.hp-invite h2 {
  font-size:17px
}
.hp-invite p {
  font-size:9px
}
.hp-farm-mission-panel {
  padding:10px
}
.hp-farm-mission-panel .hp-mission {
  grid-template-columns:33px minmax(0,1fr) 48px;
  gap:4px
}
.hp-farm-mission-panel .hp-mission .hp-item-icon {
  width:31px;
  height:38px;
  font-size:22px
}
.hp-farm-mission-panel .hp-mission strong {
  font-size:10px
}
.hp-farm-mission-panel .hp-reward {
  right:64px;
  font-size:9px
}
.hp-farm-mission-panel .hp-primary {
  font-size:9px;
  padding:6px
}
.hp-farm-action {
  gap:6px;
  padding:7px;
  border-radius:18px
}
.hp-farm-action .hp-icon {
  width:26px
}
.hp-farm-action strong {
  font-size:16px
}
.hp-farm-action small {
  font-size:9px
}
.hp-farm-actions {
  gap:8px;
  padding:0 0 8px
}
.hp-task-page {
  grid-template-columns:minmax(0,1fr) 260px;
  gap:10px
}
.hp-task-aside>section {
  padding:12px
}
.hp-task-aside h2 {
  font-size:16px
}
.hp-task-aside .hp-primary {
  padding:8px;
  font-size:10px
}
.hp-mission {
  grid-template-columns:40px minmax(0,1fr) 62px 62px;
  gap:8px;
  padding:9px
}
.hp-mission .hp-item-icon {
  width:40px;
  height:45px;
  font-size:27px
}
.hp-mission strong {
  font-size:13px
}
.hp-mission .hp-primary {
  padding:9px 5px;
  font-size:11px
}
.hp-reward {
  font-size:12px
}
.hp-market-page {
  grid-template-columns:minmax(0,1fr) 250px
}
.hp-catalogue-head h2 {
  display:none
}
.hp-product-grid {
  gap:8px
}
.hp-product {
  padding:8px
}
.hp-product-top {
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  margin-bottom:10px
}
.hp-product-top .hp-item-icon {
  width:48px;
  height:50px;
  font-size:36px
}
.hp-product h3 {
  font-size:12px
}
.hp-product-price strong {
  font-size:12px
}
.hp-product-price small {
  display:none
}
.hp-product-stock {
  flex-wrap:wrap;
  gap:8px
}
.hp-profile-person {
  flex-direction:column;
  text-align:center;
  margin-bottom:15px
}
.hp-profile-person>img {
  width:90px;
  height:95px
}
.hp-profile-person h2 {
  font-size:16px
}
.hp-profile-page>.hp-panel {
  padding:12px
}
.hp-earnings-bottom {
  flex-wrap:wrap
}
.hp-earnings-bottom button {
  width:100%
}
.hp-profile-stats {
  gap:5px
}
.hp-profile-stats small {
  font-size:9px
}
.hp-profile-stats b {
  font-size:18px
}
.hp-self-controls {
  top:auto;
  bottom:0;
  flex-direction:row
}
.hp-self-controls button {
  font-size:9px;
  padding:6px
}
.hp-self-controls .hp-icon {
  display:none
}
.hp-profile-stage {
  height:235px
}
.hp-profile-stage>img {
  height:220px;
  max-width:90%
}
.hp-promise {
  font-size:9px;
  padding:6px
}
}
@media(max-width:900px) {
  body.peplive-home {
  background-size:auto 100dvh;
  font-size:14px
}
.hp-shell {
  padding-bottom:84px
}
.hp-header {
  height:94px;
  padding:15px 16px;
  gap:10px;
  flex-wrap:wrap;
  align-content:center;
  position:relative
}
.hp-brand {
  min-width:0;
  gap:10px;
  flex:1
}
.hp-brand strong {
  font-size:19px;
  white-space:nowrap
}
.hp-brand small {
  font-size:10px;
  white-space:nowrap
}
.hp-logo {
  width:40px;
  height:42px;
  border-radius:12px;
  gap:6px
}
.hp-logo i {
  width:5px;
  height:23px
}
.hp-logo i:first-child {
  height:19px
}
.hp-resources {
  flex:0 0 auto;
  gap:7px
}
.hp-resource {
  min-width:0;
  padding:8px 11px;
  gap:7px;
  border-radius:12px
}
.hp-resource i {
  font-size:18px
}
.hp-resource strong {
  font-size:14px
}
.hp-header-actions {
  gap:8px
}
.hp-header-actions .hp-icon-button:first-child,.hp-header-actions .hp-logout {
  display:none
}
.hp-icon-button {
  height:40px;
  min-width:39px;
  border-radius:12px
}
.hp-icon-button .hp-icon {
  width:23px
}
.hp-avatar-button {
  display:none
}
.hp-layout,.hp-shell[data-page="farm"] .hp-layout {
  display:block;
  padding:0 16px 12px;
  min-height:0
}
.hp-sidebar {
  display:none
}
.hp-panel {
  border-radius:17px
}
.hp-panel-head {
  margin-bottom:12px
}
.hp-panel-head h2 {
  font-size:20px
}
.hp-panel-head h2 small {
  font-size:11px
}
.hp-link {
  font-size:12px!important
}
.hp-farm-page {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0
}
.hp-mobile-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.hp-self {
  height:107px;
  padding:7px;
  gap:3px;
  border-radius:17px
}
.hp-self>img {
  width:63px;
  height:87px
}
.hp-self strong {
  font-size:13px
}
.hp-self b {
  font-size:12px;
  margin:6px 0 4px
}
.hp-self small {
  font-size:9px
}
.hp-self>span {
  min-width:0
}
.hp-self>.hp-icon {
  width:13px
}
.hp-invite {
  height:107px;
  min-height:0;
  border-radius:17px;
  padding:5px
}
.hp-invite>img {
  width:43%;
  height:93px;
  margin-left:-5px
}
.hp-invite h2 {
  font-size:17px
}
.hp-invite p {
  font-size:9px;
  white-space:normal;
  margin:5px 0 7px
}
.hp-invite .hp-primary {
  padding:6px 10px;
  font-size:10px
}
.hp-invite .hp-primary svg {
  display:none
}
.hp-maps {
  height:88px;
  flex:0 0 auto;
  border:0;
  background:none;
  box-shadow:none;
  overflow:auto;
  margin-right:-16px;
  border-radius:0;
  padding:0 16px 0 0;
  gap:8px
}
.hp-map {
  flex:0 0 160px;
  flex-direction:row;
  padding:5px;
  gap:4px;
  border-radius:12px;
  align-items:center;
  text-align:left
}
.hp-map img {
  width:69px;
  height:60px
}
.hp-map strong {
  font-size:13px
}
.hp-map small {
  font-size:10px
}
.hp-map em {
  font-size:8px
}
.hp-farm-stage {
  min-height:0;
  height:430px;
  margin:-7px -16px -14px;
  flex-shrink:0
}
.hp-farm-stage #sceneWrap {
  height:430px;
  min-height:0;
  border-radius:0
}
.hp-farm-stage .camera-controls {
  display:flex;
  flex-direction:column;
  top:12px;
  right:15px;
  border-radius:25px;
  padding:6px
}
.hp-farm-stage .camera-controls button {
  width:33px;
  height:30px;
  min-width:0
}
.hp-farm-stage .scene-status {
  font-size:9px;
  padding:5px 10px;
  bottom:12px
}
.hp-farm-actions {
  display:grid;
  gap:9px;
  padding:0;
  min-height:72px;
  z-index:2
}
.hp-farm-action {
  border-radius:18px;
  padding:8px 5px;
  gap:7px
}
.hp-farm-action .hp-icon {
  width:26px;
  height:29px
}
.hp-farm-action strong {
  font-size:17px
}
.hp-farm-action small {
  font-size:10px;
  margin-top:4px
}
.hp-farm-market {
  margin-top:0;
  padding:15px;
  align-self:stretch
}
.hp-farm-market .hp-mini-tabs {
  display:none
}
.hp-farm-market .hp-quick-sale {
  max-width:65%;
  margin-top:0
}
.hp-farm-market .hp-item-icon {
  width:42px;
  height:44px
}
.hp-farm-market .hp-quick-sale strong {
  font-size:14px
}
.hp-farm-market .hp-quick-sale p {
  font-size:12px
}
.hp-farm-market .hp-quick-sale button {
  font-size:10px
}
.hp-farm-market .hp-panel-head {
  margin-bottom:10px
}
.hp-farm-market {
  position:relative
}
.hp-inventory-value {
  display:flex;
  position:absolute;
  right:15px;
  top:57px;
  bottom:15px;
  width:29%;
  border:1px solid #466dc9;
  border-radius:13px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  font-size:10px;
  color:#b5c9ef;
  background:#16358666
}
.hp-inventory-value strong {
  font-size:13px;
  color:white
}
.hp-farm-inventory,.hp-farm-logs {
  display:none
}
.hp-tip {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 15px;
  text-align:left
}
.hp-tip>span {
  font-size:35px
}
.hp-tip>div {
  flex:1
}
.hp-tip strong {
  font-size:14px;
  display:block;
  margin-bottom:6px
}
.hp-tip p {
  font-size:11px;
  line-height:1.6;
  color:#b7cff8
}
.hp-tip .hp-icon {
  width:18px
}
.hp-footer {
  display:none
}
.hp-bottom-nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  position:fixed;
  z-index:70;
  bottom:0;
  left:0;
  right:0;
  height:80px;
  padding:7px 12px max(7px,env(safe-area-inset-bottom));
  background:linear-gradient(100deg,#081c59f5,#0c2f84fa,#09256cfa);
  border:1px solid #5478cc82;
  border-radius:27px 27px 0 0;
  backdrop-filter:blur(18px);
  box-shadow:0 -4px 30px #1e42b22f
}
.hp-bottom-nav button {
  background:none;
  border:1px solid transparent;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  color:#a8c3f7;
  font-size:13px;
  position:relative
}
.hp-bottom-nav .hp-icon {
  width:28px;
  height:28px
}
.hp-bottom-nav button.active {
  color:#fff;
  background:linear-gradient(120deg,#164bff,#7542f8);
  border-color:#8cbdff;
  box-shadow:inset 0 0 10px #789eff,0 0 18px #397cfc85;
  font-weight:700
}
.hp-bottom-nav button.active .hp-icon {
  filter:drop-shadow(0 0 7px #daa7ff)
}
.hp-task-page {
  display:block
}
.hp-task-main {
  gap:12px
}
.hp-task-hero {
  height:145px;
  padding:10px 4px;
  overflow:visible
}
.hp-task-hero h1 {
  font-size:34px;
  margin-top:24px
}
.hp-task-hero p {
  font-size:13px;
  max-width:280px;
  line-height:1.6
}
.hp-task-hero>img {
  height:165px;
  width:60%;
  right:-16px;
  top:-10px;
  object-position:center;
  mask-image:linear-gradient(90deg,transparent,#000 40%);
  opacity:.8
}
.hp-hero-caption {
  display:none
}
.hp-task-tabs {
  width:100%;
  max-width:none;
  border:1px solid #588eff;
  border-radius:21px;
  background:#062368cc;
  gap:0;
  padding:0;
  z-index:1
}
.hp-task-tabs button {
  padding:13px 8px;
  border-radius:19px;
  gap:10px;
  font-size:18px
}
.hp-task-tabs small {
  display:block;
  color:#c7d8fd;
  font-size:10px;
  font-weight:400;
  margin-top:4px
}
.hp-task-tabs b {
  font-size:27px
}
.hp-task-checkin {
  display:block;
  padding:15px
}
.hp-task-checkin .hp-primary {
  font-size:11px;
  padding:8px 15px;
  border-radius:20px
}
.hp-checkin-days {
  gap:7px;
  margin-top:13px
}
.hp-checkin-days>div {
  padding:10px 3px;
  gap:9px;
  border-radius:11px
}
.hp-checkin-days b {
  font-size:28px
}
.hp-checkin-days small {
  font-size:10px
}
.hp-task-aside {
  display:none
}
.hp-today {
  padding:15px
}
.hp-today .hp-panel-head {
  gap:5px
}
.hp-today h2 {
  font-size:21px
}
.hp-countdown {
  font-size:10px
}
.hp-mission {
  grid-template-columns:49px minmax(0,1fr) 65px 65px;
  gap:10px;
  padding:10px;
  margin-top:7px;
  min-height:82px;
  border-radius:14px
}
.hp-mission .hp-item-icon {
  width:46px;
  height:51px;
  font-size:34px;
  border-radius:12px
}
.hp-mission strong {
  font-size:14px
}
.hp-mission p {
  font-size:10px;
  margin:5px 0 7px
}
.hp-mission .hp-primary {
  padding:9px 5px;
  font-size:12px
}
.hp-mission .hp-reward {
  font-size:14px
}
.hp-progress-row small {
  font-size:10px;
  min-width:22px
}
.hp-progress {
  height:7px
}
.hp-milestone-panel {
  display:none
}
.hp-challenges {
  padding:15px
}
.hp-challenges button>img {
  height:77px;
  width:33%
}
.hp-challenges strong {
  font-size:16px
}
.hp-challenges p {
  font-size:10px;
  line-height:1.5
}
.hp-challenges small {
  font-size:10px
}
.hp-challenges .hp-icon {
  width:11px
}
.hp-market-page {
  display:flex;
  flex-direction:column;
  gap:12px
}
.hp-market-hero {
  height:133px;
  border:1px solid #4195ffc7;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(100deg,#08226a80,#0e56bb80);
  padding:17px 20px
}
.hp-market-hero h1 {
  font-size:33px;
  text-shadow:0 0 12px #02ccff
}
.hp-market-hero h2 {
  font-size:15px;
  margin-top:7px
}
.hp-market-hero p {
  font-size:11px;
  margin-top:6px
}
.hp-market-hero>img {
  right:-40px;
  top:-20px;
  width:60%;
  height:180px;
  opacity:.95;
  mask-image:linear-gradient(90deg,transparent,#000 35%)
}
.hp-market-topbar {
  display:block
}
.hp-market-tabs {
  padding:8px;
  border:1px solid #5184ce;
  background:#041b54e6;
  border-radius:18px;
  gap:7px
}
.hp-market-tabs button {
  padding:12px;
  font-size:20px;
  border-radius:13px
}
.hp-search {
  display:none
}
.hp-catalogue {
  padding:9px
}
.hp-catalogue-head {
  margin-bottom:9px;
  gap:0
}
.hp-catalogue-head h2,.hp-catalogue-head select {
  display:none
}
.hp-categories {
  gap:7px
}
.hp-categories button {
  padding:9px 12px;
  font-size:12px;
  border-radius:13px;
  flex:1
}
.hp-product-grid {
  gap:8px;
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.hp-product {
  padding:9px 7px 7px;
  min-width:0;
  border-radius:13px
}
.hp-product-top {
  flex-direction:column;
  gap:5px;
  text-align:center;
  align-items:center;
  margin:0
}
.hp-product-top .hp-item-icon {
  width:52px;
  height:51px;
  border:0;
  background:none;
  font-size:44px
}
.hp-product h3 {
  font-size:14px
}
.hp-product-top small {
  display:none
}
.hp-product-price {
  display:none
}
.hp-product-stock {
  flex-direction:column;
  gap:7px;
  margin-top:5px
}
.hp-product-stock>span {
  font-size:11px;
  color:#bed0f1
}
.hp-product-stock .hp-primary {
  width:100%;
  font-size:0;
  padding:7px 1px;
  border-radius:10px;
  box-shadow:none;
  border-color:#548be5;
  gap:0
}
.hp-product-stock .hp-mobile-price {
  font-size:12px;
  display:inline
}
.hp-market-aside {
  display:contents
}
.hp-market-aside #hpMarketAssets {
  display:none
}
.hp-fast-sale {
  order:4;
  padding:8px 12px!important
}
.hp-fast-sale>img {
  height:70px;
  width:24%
}
.hp-fast-sale>div {
  flex:1;
  position:relative
}
.hp-fast-sale h2 {
  font-size:19px
}
.hp-fast-sale p {
  font-size:11px;
  max-width:52%;
  margin:6px 0
}
.hp-fast-sale .hp-primary {
  position:absolute;
  right:0;
  top:11px;
  padding:11px 15px;
  font-size:13px;
  border-radius:23px
}
.hp-market-inventory {
  order:5;
  padding:14px!important
}
.hp-inventory-grid {
  gap:8px
}
.hp-inventory-grid button {
  border:1px solid #426cd28f;
  border-radius:11px;
  padding:6px;
  background:#12387470;
  flex:1 0 62px
}
.hp-inventory-grid .hp-item-icon {
  border:0;
  background:none;
  height:41px;
  font-size:32px
}
.hp-inventory-grid strong,.hp-inventory-grid small {
  font-size:11px;
  margin-top:3px
}
.hp-market-inventory #hpMarketInventoryCount {
  text-align:right;
  margin-top:-31px;
  margin-right:54px;
  font-size:10px;
  margin-bottom:17px
}
.hp-price-panel {
  display:none
}
.hp-order-panel {
  order:6;
  padding:14px
}
.hp-market-page .hp-orders {
  display:block
}
.hp-orders article {
  border:1px solid #3f63b78a;
  border-radius:13px;
  background:#15357470;
  padding:8px;
  margin-top:6px;
  gap:10px
}
.hp-orders .hp-item-icon {
  font-size:29px;
  width:36px
}
.hp-orders strong {
  font-size:13px
}
.hp-orders time {
  font-size:10px
}
.hp-orders article>b {
  font-size:13px
}
.hp-orders article>span {
  font-size:12px!important
}
.hp-completed {
  padding:5px 11px;
  font-size:10px!important
}
.hp-profile-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.hp-profile-page>.hp-panel {
  grid-column:auto;
  grid-row:auto;
  padding:14px
}
.hp-profile-page .hp-profile-identity {
  grid-column:1/-1;
  order:0;
  border:0;
  background:none;
  box-shadow:none;
  padding:5px 0 8px
}
.hp-profile-identity>.hp-panel-head {
  display:none
}
.hp-profile-person {
  flex-direction:row;
  text-align:left;
  margin:0;
  gap:16px
}
.hp-profile-person>img {
  width:110px;
  height:118px
}
.hp-profile-person>div {
  padding-right:0
}
.hp-profile-person h2 {
  font-size:22px
}
.hp-profile-person p {
  font-size:12px;
  margin-top:9px
}
.hp-profile-person .hp-level {
  font-size:12px
}
.hp-profile-identity .hp-profile-stats {
  display:none
}
.hp-profile-page .hp-profile-earnings {
  grid-column:1/-1;
  order:1
}
.hp-profile-earnings .hp-panel-head {
  margin-bottom:8px
}
.hp-earnings-main {
  margin:4px 0 13px
}
.hp-earnings-main>strong {
  font-size:36px
}
.hp-earnings-main p {
  font-size:12px
}
.hp-earnings-bottom {
  gap:10px;
  flex-wrap:nowrap
}
.hp-earnings-bottom>div {
  padding:8px
}
.hp-earnings-bottom strong {
  font-size:17px
}
.hp-earnings-bottom small {
  font-size:10px
}
.hp-earnings-bottom button {
  width:auto;
  font-size:14px;
  padding:12px 18px
}
.hp-profile-page .hp-profile-assets {
  grid-column:1/-1;
  order:2
}
.hp-profile-assets .hp-asset-grid {
  flex-wrap:nowrap;
  overflow:auto
}
.hp-profile-assets .hp-resource {
  flex:1 0 96px;
  padding:14px 8px;
  gap:8px;
  border-radius:13px
}
.hp-profile-assets .hp-resource strong {
  font-size:16px
}
.hp-profile-assets .hp-resource i {
  font-size:28px
}
.hp-profile-page .hp-profile-self {
  order:3
}
.hp-profile-page .hp-profile-auto {
  order:4
}
.hp-profile-self .hp-panel-head {
  margin-bottom:4px
}
.hp-profile-self .hp-panel-head h2,.hp-profile-auto .hp-panel-head h2 {
  font-size:17px;
  white-space:nowrap
}
.hp-profile-self .hp-panel-head>.hp-link {
  font-size:10px!important
}
.hp-profile-stage {
  height:154px
}
.hp-profile-stage>img {
  height:154px;
  max-width:90%
}
.hp-promise {
  font-size:9px;
  padding:6px
}
.hp-self-controls {
  display:none
}
.hp-self-status {
  padding:6px 8px;
  margin-top:5px
}
.hp-self-status strong {
  font-size:11px
}
.hp-self-status span {
  font-size:10px;
  line-height:1.5
}
.hp-profile-auto .hp-panel-head {
  flex-wrap:wrap;
  gap:4px
}
.hp-profile-auto>.hp-muted {
  font-size:10px;
  line-height:1.6
}
.hp-auto-grid {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px
}
.hp-auto-grid>div {
  flex-direction:row;
  justify-content:space-between;
  gap:5px;
  padding:6px;
  background:none;
  border:0
}
.hp-auto-grid b {
  font-size:17px
}
.hp-auto-grid span {
  font-size:12px
}
.hp-auto-grid small {
  font-size:10px
}
.hp-profile-page .hp-profile-logs {
  order:5;
  grid-column:1/-1
}
.hp-profile-logs .hp-audits {
  max-height:none
}
.hp-profile-logs .hp-audits details {
  border:1px solid #426bc095;
  border-radius:13px;
  background:#16357973;
  margin-top:7px;
  padding:9px
}
.hp-profile-logs .hp-audits .hp-item-icon {
  width:45px;
  height:45px;
  font-size:31px
}
.hp-profile-logs .hp-audits strong {
  font-size:14px
}
.hp-profile-logs .hp-audits p {
  font-size:11px;
  line-height:1.5
}
.hp-profile-logs .hp-audits time {
  font-size:10px;
  color:#adc8f7;
  max-width:120px
}
.hp-profile-logs .hp-audits details:nth-child(n+4) {
  display:none
}
.hp-profile-page .hp-profile-settings {
  order:6;
  grid-column:1/-1;
  padding:0;
  background:none;
  border:0;
  box-shadow:none
}
.hp-profile-settings>.hp-panel-head {
  display:none
}
.hp-profile-settings>div {
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.hp-profile-settings button {
  border-color:#477dec;
  background:linear-gradient(120deg,#044785d9,#141b78e3);
  padding:11px 7px;
  gap:6px;
  flex-direction:column;
  text-align:center;
  border-radius:14px
}
.hp-profile-settings .hp-icon {
  width:27px;
  height:27px
}
.hp-profile-settings strong {
  font-size:12px
}
.hp-profile-settings small {
  font-size:9px
}
.hp-profile-growth,.hp-profile-worlds,.hp-profile-activity {
  display:none
}
.hp-toast {
  bottom:94px;
  font-size:12px;
  padding:12px 17px
}
.peplive-home .avatar-picker,.peplive-home .map-picker,.peplive-home .neighbor-picker,.peplive-home .notification-center {
  max-height:82dvh
}
.hp-dialog {
  padding:18px
}
}
@media(max-width:600px) {
  .hp-header {
  height:105px;
  padding:13px 14px;
  align-content:flex-start;
  gap:10px
}
.hp-brand {
  flex:1 0 auto;
  max-width:calc(100% - 47px)
}
.hp-header-actions {
  position:absolute;
  right:14px;
  top:16px
}
.hp-resources {
  justify-content:flex-end;
  margin-left:auto;
  width:100%;
  gap:7px;
  margin-top:-2px
}
.hp-resources .hp-resource {
  padding:5px 10px;
  border-radius:10px;
  gap:6px
}
.hp-resources .hp-resource i {
  font-size:16px
}
.hp-resources .hp-resource strong {
  font-size:12px
}
.hp-layout,.hp-shell[data-page="farm"] .hp-layout {
  padding-left:12px;
  padding-right:12px
}
.hp-mobile-intro {
  gap:8px
}
.hp-self {
  height:101px;
  padding:4px
}
.hp-self>img {
  width:47px;
  height:75px
}
.hp-self strong {
  font-size:10px
}
.hp-self b {
  font-size:10px
}
.hp-self small {
  font-size:8px;
  white-space:normal;
  line-height:1.4
}
.hp-self>.hp-icon {
  display:none
}
.hp-invite {
  height:101px;
  gap:0
}
.hp-invite h2 {
  font-size:15px
}
.hp-invite p {
  font-size:8px
}
.hp-invite>img {
  height:82px;
  width:44%
}
.hp-invite .hp-primary {
  font-size:9px;
  padding:6px 10px
}
.hp-farm-page {
  gap:12px
}
.hp-maps {
  height:74px
}
.hp-map {
  flex-basis:142px
}
.hp-map img {
  width:60px;
  height:54px
}
.hp-map strong {
  font-size:12px
}
.hp-map small {
  font-size:9px
}
.hp-farm-stage {
  height:335px;
  margin-left:-12px;
  margin-right:-12px
}
.hp-farm-stage #sceneWrap {
  height:335px
}
.hp-farm-stage .camera-controls {
  right:9px
}
.hp-farm-actions {
  gap:6px;
  min-height:65px
}
.hp-farm-action {
  gap:5px;
  padding:8px 3px;
  border-radius:16px
}
.hp-farm-action .hp-icon {
  width:21px;
  height:25px
}
.hp-farm-action strong {
  font-size:14px
}
.hp-farm-action small {
  font-size:8px
}
.hp-panel-head h2 {
  font-size:18px
}
.hp-farm-market {
  padding:12px
}
.hp-farm-market .hp-quick-sale {
  max-width:69%;
  padding:7px 5px;
  gap:4px
}
.hp-farm-market .hp-quick-sale .hp-item-icon {
  width:31px;
  font-size:27px
}
.hp-farm-market .hp-quick-sale strong {
  font-size:12px
}
.hp-farm-market .hp-quick-sale p {
  font-size:10px
}
.hp-farm-market .hp-quick-sale button {
  font-size:9px;
  padding:4px 8px
}
.hp-inventory-value {
  width:25%;
  right:12px;
  top:52px;
  bottom:12px;
  font-size:8px
}
.hp-inventory-value strong {
  font-size:10px
}
.hp-tip {
  padding:12px;
  gap:10px
}
.hp-tip>span {
  font-size:29px
}
.hp-tip p {
  font-size:10px
}
.hp-task-hero {
  height:132px;
  padding-left:3px
}
.hp-task-hero h1 {
  font-size:29px
}
.hp-task-hero p {
  font-size:11px;
  max-width:230px
}
.hp-task-hero>img {
  height:160px;
  width:65%;
  top:-15px
}
.hp-task-tabs button {
  font-size:16px;
  gap:7px;
  padding:12px 6px
}
.hp-task-tabs b {
  font-size:22px
}
.hp-task-tabs small {
  font-size:9px
}
.hp-task-checkin,.hp-today,.hp-challenges {
  padding:12px
}
.hp-checkin-days {
  gap:5px
}
.hp-checkin-days>div {
  padding:8px 1px
}
.hp-checkin-days b {
  font-size:23px
}
.hp-checkin-days small {
  font-size:8px
}
.hp-checkin-days {
  margin-top:10px
}
.hp-task-checkin>.hp-muted {
  font-size:10px
}
.hp-mission {
  grid-template-columns:39px minmax(0,1fr) 50px 53px;
  gap:7px;
  min-height:77px;
  padding:8px 7px
}
.hp-mission .hp-item-icon {
  width:37px;
  height:43px;
  font-size:27px
}
.hp-mission strong {
  font-size:12px
}
.hp-mission p {
  font-size:9px;
  line-height:1.4
}
.hp-mission .hp-reward {
  font-size:11px
}
.hp-mission .hp-primary {
  font-size:10px;
  padding:9px 5px
}
.hp-progress-row {
  gap:5px
}
.hp-progress-row small {
  font-size:9px
}
.hp-countdown {
  font-size:9px
}
.hp-challenges>div {
  gap:7px
}
.hp-challenges button>img {
  width:32%;
  height:64px
}
.hp-challenges strong {
  font-size:12px
}
.hp-challenges p {
  font-size:8px
}
.hp-challenges small {
  font-size:8px
}
.hp-market-hero {
  height:121px;
  padding:13px 14px
}
.hp-market-hero h1 {
  font-size:29px
}
.hp-market-hero h2 {
  font-size:13px
}
.hp-market-hero p {
  font-size:10px
}
.hp-market-tabs button {
  font-size:17px;
  padding:10px
}
.hp-categories {
  gap:6px
}
.hp-categories button {
  font-size:11px;
  padding:8px 10px
}
.hp-product-grid {
  gap:6px
}
.hp-product {
  padding:7px 4px 5px
}
.hp-product-top .hp-item-icon {
  width:42px;
  height:46px;
  font-size:37px
}
.hp-product h3 {
  font-size:12px
}
.hp-product-stock>span {
  font-size:9px
}
.hp-product-stock .hp-mobile-price {
  font-size:10px
}
.hp-product-stock .hp-primary {
  padding:7px 0
}
.hp-fast-sale>img {
  width:25%;
  height:65px
}
.hp-fast-sale h2 {
  font-size:17px
}
.hp-fast-sale p {
  font-size:9px;
  max-width:47%;
  line-height:1.5
}
.hp-fast-sale .hp-primary {
  font-size:10px;
  padding:9px 10px
}
.hp-inventory-grid {
  gap:6px
}
.hp-inventory-grid button {
  flex-basis:48px;
  padding:5px 3px
}
.hp-inventory-grid .hp-item-icon {
  font-size:29px;
  height:35px
}
.hp-inventory-grid strong,.hp-inventory-grid small {
  font-size:9px
}
.hp-market-inventory #hpMarketInventoryCount {
  font-size:9px;
  margin-top:-29px;
  margin-right:48px
}
.hp-orders article {
  gap:7px;
  padding:7px
}
.hp-orders .hp-item-icon {
  width:27px;
  font-size:25px
}
.hp-orders strong {
  font-size:11px
}
.hp-orders time {
  font-size:8px
}
.hp-orders article>b {
  font-size:11px
}
.hp-orders article>span:not(.hp-item-icon) {
  font-size:10px!important
}
.hp-completed {
  font-size:8px!important;
  padding:5px 7px
}
.hp-profile-person>img {
  width:88px;
  height:101px
}
.hp-profile-person h2 {
  font-size:20px
}
.hp-profile-person p {
  font-size:11px
}
.hp-profile-page>.hp-panel {
  padding:12px
}
.hp-earnings-main>strong {
  font-size:34px
}
.hp-earnings-bottom strong {
  font-size:14px
}
.hp-earnings-bottom small {
  font-size:9px
}
.hp-earnings-bottom button {
  font-size:11px;
  padding:12px 9px
}
.hp-earnings-bottom {
  gap:7px
}
.hp-profile-assets .hp-resource {
  flex-basis:83px;
  padding:11px 7px;
  gap:6px
}
.hp-profile-assets .hp-resource strong {
  font-size:13px
}
.hp-profile-assets .hp-resource i {
  font-size:24px
}
.hp-profile-self .hp-panel-head h2,.hp-profile-auto .hp-panel-head h2 {
  font-size:14px
}
.hp-profile-self .hp-panel-head>.hp-link {
  font-size:8px!important
}
.hp-profile-self .hp-panel-head {
  gap:1px
}
.hp-profile-stage {
  height:135px
}
.hp-profile-stage>img {
  height:138px
}
.hp-promise {
  font-size:8px;
  padding:5px
}
.hp-self-status span {
  font-size:8px
}
.hp-self-status strong {
  font-size:10px
}
.hp-profile-auto .hp-panel-head .hp-link {
  font-size:10px!important
}
.hp-auto-grid span {
  font-size:10px
}
.hp-auto-grid small {
  font-size:8px
}
.hp-auto-grid b {
  font-size:16px
}
.hp-auto-grid>div {
  gap:3px;
  padding:5px 0
}
.hp-profile-auto>.hp-muted {
  font-size:9px
}
.hp-profile-logs .hp-audits strong {
  font-size:12px
}
.hp-profile-logs .hp-audits p {
  font-size:10px
}
.hp-profile-logs .hp-audits time {
  font-size:8px;
  max-width:76px
}
.hp-profile-logs .hp-audits .hp-item-icon {
  width:37px;
  height:41px;
  font-size:27px
}
.hp-profile-settings>div {
  gap:6px
}
.hp-profile-settings button {
  padding:10px 4px
}
.hp-profile-settings strong {
  font-size:10px
}
.hp-profile-settings small {
  font-size:8px
}
.hp-profile-settings .hp-icon {
  width:24px;
  height:24px
}
}
.hp-map img {
  mix-blend-mode:normal
}
.hp-farm-right {
  grid-column:2;
  grid-row:1/4;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:36px
}
.hp-farm-right>.hp-panel {
  margin:0;
  align-self:stretch
}
.hp-farm-right .hp-farm-logs {
  flex:1;
  max-height:400px
}
.hp-farm-mission-panel .hp-mission:nth-child(n+5) {
  display:none
}
.hp-farm-stage .three-map-help {
  display:none
}
.hp-farm-preview>img {
  object-fit:contain;
  background:radial-gradient(ellipse,#2d88ff88,#00236a00)
}
.hp-task-hero>img,.hp-market-hero>img {
  object-fit:contain;
  mask-image:none
}
.hp-profile-stage>img {
  object-fit:cover;
  object-position:center
}
.hp-self>img {
  object-fit:cover
}
.hp-profile-person>img {
  object-fit:cover
}
.hp-header .hp-avatar-button img {
  object-fit:cover
}
.hp-checkin-days .hp-primary {
  box-shadow:none
}
@media(min-width:901px) {
  .hp-challenges {
  display:none
}
.hp-task-page {
  min-height:calc(100dvh - 170px)
}
.hp-task-hero {
  height:96px
}
.hp-task-main {
  gap:10px
}
.hp-task-main .hp-mission {
  min-height:72px;
  padding:10px
}
.hp-task-main .hp-mission p {
  margin:4px 0
}
.hp-task-main .hp-today {
  padding:14px
}
.hp-task-main .hp-milestone-panel {
  padding:12px 16px
}
.hp-task-aside {
  padding-top:32px;
  gap:11px
}
.hp-task-aside .hp-farm-preview>img {
  height:250px
}
.hp-task-aside>.hp-panel {
  flex-shrink:0
}
.hp-task-aside .hp-recommend {
  flex:1
}
.hp-profile-page {
  grid-template-rows:236px 111px 160px 222px
}
.hp-profile-page>.hp-panel {
  padding:13px
}
.hp-profile-stage {
  height:213px
}
.hp-profile-stage>img {
  height:213px
}
.hp-profile-person {
  margin:15px 0 28px
}
.hp-profile-earnings .hp-panel-head {
  margin-bottom:7px
}
.hp-earnings-main {
  margin:11px 0
}
.hp-earnings-main>strong {
  font-size:32px
}
.hp-profile-assets .hp-panel-head {
  margin-bottom:8px
}
.hp-profile-assets .hp-resource {
  padding:8px 5px;
  gap:5px
}
.hp-profile-assets .hp-resource i {
  font-size:22px
}
.hp-profile-assets .hp-resource strong {
  font-size:12px
}
.hp-profile-activity .hp-audits,.hp-profile-logs .hp-audits {
  max-height:172px
}
.hp-profile-settings button {
  padding:7px
}
.hp-profile-settings .hp-panel-head {
  margin-bottom:9px
}
.hp-market-page {
  grid-template-columns:minmax(0,1fr) 340px;
  gap:11px
}
.hp-market-hero {
  height:98px
}
.hp-product-top {
  margin-bottom:11px
}
.hp-product-top .hp-item-icon {
  width:54px;
  height:56px;
  font-size:39px
}
.hp-market-page .hp-order-panel {
  grid-column:2;
  grid-row:4
}
.hp-market-page .hp-price-panel {
  grid-column:1;
  grid-row:4
}
.hp-market-page .hp-orders {
  display:block
}
.hp-market-page .hp-orders article:nth-child(n+4) {
  display:none
}
.hp-market-page .hp-catalogue .hp-orders article:nth-child(n+4) {
  display:flex
}
.hp-market-aside>.hp-panel {
  padding:13px
}
.hp-market-aside .hp-fast-sale {
  padding:9px
}
.hp-market-hero>img {
  right:8%;
  width:44%;
  height:170px;
  top:-35px
}
.hp-quotes>div {
  padding:8px
}
.hp-price-panel,.hp-order-panel {
  padding:14px
}
.hp-footer {
  height:49px
}
.hp-farm-mission-panel .hp-mission {
  min-height:72px
}
}
@media(max-width:900px) {
  .hp-farm-right {
  display:contents
}
.hp-farm-right .hp-farm-market {
  order:5
}
.hp-farm-page .hp-tip {
  order:6
}
.hp-farm-right .hp-farm-inventory,.hp-farm-right .hp-farm-logs {
  display:none
}
.hp-task-hero>img {
  width:65%;
  height:190px;
  top:-35px;
  right:-10px
}
.hp-market-hero>img {
  right:-20px;
  width:58%;
  height:175px;
  top:-22px
}
.hp-farm-stage .scene-status {
  display:none
}
.hp-farm-stage .camera-controls {
  transform:scale(.87);
  transform-origin:right top
}
.hp-profile-stage>img {
  object-fit:cover
}
.hp-profile-person>img {
  object-fit:cover
}
.hp-mobile-intro .hp-self img {
  object-fit:cover
}
.hp-shell {
  overflow-x:clip
}
.hp-maps {
  margin-right:0;
  padding-right:0
}
.hp-task-hero {
  overflow:hidden
}
.hp-profile-self .hp-self-status span {
  max-height:27px;
  overflow:hidden
}
}
@media(prefers-reduced-motion:reduce) {
  .hp-shell * {
  transition:none!important;
  scroll-behavior:auto!important
}
}
/* Fit the supplied 16:9 desktop compositions without clipping card content. */
@media(min-width:1400px) {
 .hp-task-main .hp-mission {
  min-height:66px;
  height:66px;
  grid-template-columns:48px minmax(0,1fr) 100px 96px;
  padding:7px 12px
}
 .hp-task-main .hp-mission .hp-item-icon {
  width:46px;
  height:47px;
  font-size:32px
}
 .hp-task-main .hp-mission p {
  margin:3px 0;
  font-size:11px
}
 .hp-task-main .hp-mission strong {
  font-size:15px
}
 .hp-task-hero {
  height:86px
}
.hp-task-tabs {
  height:60px
}
.hp-task-tabs button {
  padding:8px
}
 .hp-task-main .hp-panel-head {
  margin-bottom:9px
}
.hp-task-main .hp-today {
  padding:13px
}
 .hp-task-main .hp-milestone-panel {
  padding:12px
}
.hp-milestones {
  padding:3px 0
}
.hp-milestones b {
  font-size:32px
}
 .hp-task-aside .hp-farm-preview>img {
  height:220px
}
.hp-task-aside>section {
  padding:13px
}
.hp-task-aside .hp-recommend {
  flex:0 0 auto
}
 .hp-task-main .hp-mission .hp-progress-row {
  max-width:70%
}
.hp-task-main .hp-mission {
  margin-top:6px
}
 .hp-farm-page {
  grid-template-rows:132px minmax(370px,1fr) 85px;
  height:calc(100dvh - 164px);
  min-height:710px
}
 .hp-farm-right .hp-farm-logs {
  min-height:0;
  max-height:none
}
 .hp-farm-right .hp-farm-market {
  flex-shrink:0
}
.hp-farm-right .hp-farm-inventory {
  flex-shrink:0;
  padding:13px
}
 .hp-farm-stage {
  min-height:0
}
.hp-farm-stage #sceneWrap {
  min-height:0
}
 .hp-market-page .hp-orders article {
  padding:7px 0
}
.hp-market-page .hp-orders article:nth-child(n+4) {
  display:none
}
 .hp-market-hero {
  height:85px
}
.hp-product {
  padding:10px
}
.hp-product-price {
  margin-bottom:10px
}
.hp-market-page .hp-quotes {
  gap:8px
}
}
@media(max-width:600px) {
 .hp-header {
  height:92px;
  padding-top:11px
}
.hp-brand strong {
  font-size:18px
}
.hp-brand small {
  font-size:9px
}
 .hp-mobile-intro .hp-self,.hp-mobile-intro .hp-invite {
  height:88px
}
.hp-mobile-intro .hp-self>img {
  height:78px;
  width:48px
}
 .hp-farm-stage,.hp-farm-stage #sceneWrap {
  height:300px
}
.hp-farm-actions {
  min-height:58px
}
.hp-farm-page {
  gap:10px
}
 .hp-bottom-nav {
  height:73px
}
.hp-shell {
  padding-bottom:78px
}
.hp-farm-stage {
  margin-bottom:-7px
}
 .hp-profile-logs .hp-audits details {
  padding:7px
}
.hp-profile-person>img {
  height:94px
}
}
/* Keep all dashboard controls visible at desktop reference dimensions. */
@media(min-width:901px){
  .hp-profile-growth .hp-profile-stats>div{padding:8px 3px;gap:4px}
  .hp-profile-growth .hp-profile-stats span{font-size:22px}
  .hp-profile-growth .hp-profile-stats b{font-size:18px}
  .hp-profile-settings>div{gap:5px}
  .hp-profile-settings button{padding:5px 7px;height:36px}
  .hp-profile-settings button>span{display:flex;gap:18px;align-items:center}
  .hp-profile-settings small{margin:0}
  .hp-profile-auto .hp-auto-grid>div{padding:7px 3px;gap:4px}
  .hp-profile-auto .hp-auto-grid b{font-size:23px}
  .hp-profile-worlds .hp-map{padding:2px 3px}
  .hp-profile-worlds .hp-map img{height:44px}
  .hp-market-hero{overflow:hidden}
  .hp-market-hero>img{top:-8px;height:120px;pointer-events:none}
  .hp-farm-stage .map-hint{top:auto;bottom:5px;left:50%;transform:translateX(-50%);white-space:nowrap}
  .hp-farm-stage .scene-status{display:none}
}
@media(max-width:900px){.hp-farm-stage .map-hint{display:none}}
.hp-art{display:inline-block;width:1.7em;height:1.7em;flex:0 0 auto;vertical-align:middle;background-image:url('./assets/homepage/icons.webp');background-size:400% 400%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat}
.hp-item-icon .hp-art{width:90%;height:90%;max-width:64px;max-height:64px;aspect-ratio:1}
.hp-resource .hp-art{width:29px;height:29px}
.hp-product-top .hp-item-icon{background:none;border-color:#416cce70}
.hp-product-price .hp-art,.hp-reward .hp-art{width:23px;height:23px}
.hp-farm-action>.hp-art{width:44px;height:44px}
.hp-quotes .hp-art{width:45px;height:45px}
@media(max-width:600px){.hp-resource .hp-art{width:19px;height:19px}.hp-farm-action>.hp-art{width:28px;height:28px}.hp-reward .hp-art{width:18px;height:18px}}
.hp-item-icon .hp-art{width:min(90%,60px);height:auto;aspect-ratio:1}
@media(min-width:901px){.hp-market-hero p{display:none}}