[hidden] {
  display: none !important;
}
#hud {
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  padding: 7px 10px;
  align-items: flex-start;
  gap: 8px;
  min-height: 88px;
  background: linear-gradient(#b7eecc77, #b7eecc22);
  border-top: 2px solid #e0ffe1;
  transform: none;
  z-index: 3;
}
.classic-profile {
  width: 380px;
  flex: none;
  min-height: 76px;
  padding: 3px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: #99d9adbb;
  border: 1px solid #deffe4;
  border-radius: 5px;
  box-shadow: 0 1px 3px #35614766;
}
.avatar-wrap {
  position: relative;
  width: 59px;
  height: 66px;
  flex: none;
}
#avatarImage {
  width: 55px;
  height: 55px;
  object-fit: cover;
  border: 2px solid #e5f6df;
  border-radius: 3px;
  background: #dcf0bf;
}
.star-level {
  position: absolute;
  right: -2px;
  bottom: 0;
  background: #7ec2d8;
  color: #fff;
  border: 2px solid #f6e9a0;
  clip-path: polygon(
    50% 0,
    62% 24%,
    90% 15%,
    80% 45%,
    100% 63%,
    70% 70%,
    70% 100%,
    45% 85%,
    20% 100%,
    23% 70%,
    0 58%,
    23% 42%,
    10% 15%,
    38% 24%
  );
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
}
.profile-details {
  flex: 1;
  min-width: 0;
}
.profile-title {
  display: flex;
  align-items: center;
  height: 21px;
  gap: 6px;
}
#profileName {
  font-size: 14px;
  color: #31513e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 210px;
}
#vipBadge {
  background: #f8d657;
  color: #856222;
  border: 1px solid #c49e3e;
  border-radius: 4px;
  font: bold 10px Georgia;
  padding: 2px 4px;
}
.classic-tracks {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 3px 0 5px;
}
.track {
  position: relative;
  width: 124px;
  height: 11px;
  background: #f5f9ea;
  border: 1px solid #6ba080;
  border-radius: 12px;
  overflow: hidden;
}
.track i {
  height: 100%;
  display: block;
  min-width: 0;
  background: linear-gradient(#d7ee85, #8bc25c);
}
#popTrack {
  width: 104px;
}
#popbar {
  background: linear-gradient(#f9b8cc, #e77599);
}
.heart-stat {
  display: flex;
  align-items: center;
  gap: 3px;
}
.heart-stat svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.heart-stat span {
  font-size: 10px;
  color: #a63763;
}
.balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: 14px;
  color: #a57811;
}
.balance-row .mv-balance {
  color: #27833c;
}
.coin-symbol {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #eed860;
  border-radius: 50%;
  background: linear-gradient(#fff27c, #e9b827);
  box-shadow: 0 1px 1px #578e4244;
  color: #aa7814;
  font: bold 14px Georgia;
  margin-right: 3px;
}
.coin-symbol.green {
  background: linear-gradient(#87dc71, #35a44d);
  border-color: #7dca72;
  color: #1a7c35;
}
#xp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#popularity {
  font-size: 11px;
  color: #b45078;
  margin-left: 3px;
}
#hudActions {
  margin-left: auto;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 540px;
}
#hudActions > button,
#hudActions > a {
  font: 700 12px Georgia;
  color: #3b583a;
  background: #d9eec3cc;
  border: 1px solid #a5c68a;
  border-radius: 8px;
  padding: 7px 8px;
  box-shadow: 0 1px 2px #35633033;
  min-width: 46px;
  min-height: 44px;
  text-align: center;
  text-decoration: none;
}
#hudActions > button:hover,
#hudActions > a:hover {
  background: #f9ffe4;
}
#hudActions > button img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  margin: 0 auto 2px;
}
#hudActions #settingsOpen,
#hudActions #fullscreenToggle {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
}
#hudActions #settingsOpen span,
#hudActions #fullscreenToggle span {
  display: block;
  font: 700 9px/1 Arial, sans-serif;
  white-space: nowrap;
}
#hudActions #fullscreenToggle svg {
  width: 21px;
  height: 21px;
}
#hudActions #vipOpen {
  color: #9b6f15;
  background: #f9e899dd;
}
#visitBanner {
  position: absolute;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff4cce8;
  border: 1px solid #a5ad6c;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 2;
}
#visitBanner button {
  border: 1px solid #7e965e;
  border-radius: 4px;
  background: #e3efbe;
  padding: 4px 8px;
  margin-left: 10px;
  font: 12px Georgia;
}
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  background:
    linear-gradient(#204e3444, #234e2966),
    url("/assets/mapa/fundo-4096x2048.png") center/cover;
  display: grid;
  place-items: center;
  padding: 20px;
}
.auth-card {
  width: min(430px, 95vw);
  background: linear-gradient(#fffce9, #f4edcb);
  border: 4px solid #8ba554;
  border-radius: 17px;
  box-shadow: 0 9px 40px #194b3355;
  padding: 22px 30px;
  color: #4b6340;
}
.auth-logo {
  text-align: center;
  font: bold 35px Georgia;
  color: #4d8c36;
  text-shadow: 1px 2px #f7e57c;
  margin: 0 0 18px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid #c5ce9a;
  gap: 6px;
}
.auth-tabs button {
  flex: 1;
  background: #d6dfb5;
  border: 0;
  padding: 10px;
  color: #5d6d43;
  border-radius: 7px 7px 0 0;
  font: 16px Georgia;
}
.auth-tabs button.selected {
  background: #fffef1;
  font-weight: bold;
}
.auth-card h2 {
  font: 22px Georgia;
  text-align: center;
  margin: 18px 0;
}
.classic-form label,
.auth-card label {
  display: block;
  font: 14px Georgia;
  margin: 11px 0 4px;
}
.classic-form input,
.classic-form select,
.auth-card input,
.friend-search input {
  display: block;
  width: 100%;
  border: 1px solid #b4bd8b;
  background: #fffff7;
  border-radius: 5px;
  padding: 10px;
  font: 15px Arial;
  color: #485744;
  margin-top: 5px;
}
.auth-card .classic-button {
  width: 100%;
  padding: 12px;
  font-size: 17px;
  background: linear-gradient(#a8cd62, #78a840);
  border: 1px solid #5a8a34;
  color: #fffbe0;
  text-shadow: 1px 1px #4d772d;
}
.auth-card small {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 12px;
  color: #7c885d;
}
#authError,
#accountMessage {
  color: #a24736;
  font-size: 13px;
  min-height: 18px;
  line-height: 1.5;
}
.classic-form {
  max-width: 460px;
  margin: 15px auto;
}
.muted {
  color: #7e8868;
  font: 12px Arial;
  line-height: 1.5;
}
.avatar-options {
  border: 1px solid #d1d8b1;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.avatar-options label {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.avatar-options img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid #c9d6a6;
  background: #eff6db;
}
.avatar-options input {
  width: auto;
  display: inline;
  margin: 0;
}
.avatar-options input:checked + img {
  border: 3px solid #6f9a39;
}
.vip-intro {
  text-align: center;
  margin: 20px 0;
  color: #76613a;
}
.vip-intro > b {
  font: 26px Georgia;
  color: #ab8729;
}
.vip-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vip-plans > div {
  padding: 20px 12px;
  text-align: center;
  background: #fffbed;
  border: 2px solid #d7c58b;
  border-radius: 8px;
}
.vip-plans p {
  color: #9f8650;
}
.friend-search {
  background: #edf3dc;
  border: 1px solid #c9d6b3;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.friend-search > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.friend-search input {
  margin: 0;
}
.friend-search button,
.friend-row button {
  background: linear-gradient(#fffbe4, #dce5bc);
  border: 1px solid #a8b786;
  border-radius: 5px;
  padding: 7px 10px;
  font: 12px Georgia;
  color: #586d3b;
}
.friend-list,
.gift-list {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}
.friend-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.friend-row > img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 2px solid #d7e3bb;
  border-radius: 5px;
}
.friend-row > div {
  flex: 1;
}
.friend-row small {
  display: block;
  margin-top: 5px;
  color: #83916d;
  font-size: 11px;
}
.friend-row > span {
  font-size: 12px;
  color: #87916e;
}
.gift-list li {
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid #e4e8d8;
}
.success-note {
  text-align: center;
  padding: 40px;
  color: #66873b;
  font: 20px Georgia;
}
#windowBody h3 {
  font: 18px Georgia;
  color: #677d45;
  margin: 20px 0 8px;
}
.seed .vip-price {
  color: #8d783a;
}
.seed .vip-tag {
  position: absolute;
  right: 8px;
  top: 3px;
  font: 10px Georgia;
  background: #f4d56c;
  color: #876b27;
  border-radius: 3px;
  padding: 3px;
}
.seed .mv-buy {
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid #8ac48c;
  border-radius: 5px;
  background: #ecf6dc;
  color: #3c8c45;
  font: 12px Arial;
}
.seed {
  cursor: default;
}
.seed .buy-seed {
  border: 0;
  background: none;
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.seed .buy-seed:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 1000px) {
  .classic-profile {
    width: 330px;
  }
  .track {
    width: 100px;
  }
  #popTrack {
    width: 76px;
  }
  #hudActions {
    max-width: 390px;
    gap: 3px;
  }
  #hudActions > button,
  #hudActions > a {
    font-size: 10px;
    padding: 5px;
    min-width: 38px;
  }
}
@media (max-width: 700px) {
  #hud {
    padding: 4px;
    gap: 3px;
  }
  .classic-profile {
    width: 270px;
    transform: scale(0.8);
    transform-origin: top left;
    margin-right: -54px;
  }
  #hudActions > button,
  #hudActions > a {
    min-height: 30px;
    font-size: 9px;
    padding: 3px;
    min-width: 32px;
  }
  #hudActions > button img {
    width: 20px;
    height: 20px;
  }
  .vip-plans {
    grid-template-columns: 1fr;
  }
  .friend-row {
    gap: 5px;
  }
  .friend-row button {
    padding: 5px;
    font-size: 10px;
  }
  .friend-row > img {
    width: 32px;
    height: 32px;
  }
}
#farmNameSetup {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(700px, calc(100vw - 20px), calc((100dvh - 20px) * 1.333333));
  height: auto;
  aspect-ratio: 1448 / 1086;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("/assets/farm-name/placa_madeira_original.png") center / 100% 100% no-repeat;
  color: #435337;
  box-shadow: none;
}
#farmNameSetup::backdrop {
  background: #172315a8;
}
#farmNameSetup .farm-name-art-form {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
#farmNameTitle {
  position: absolute;
  top: 34%;
  left: 20%;
  width: 60%;
  margin: 0;
  color: #fff8dc;
  font: 700 clamp(16px, 2.5vw, 22px) Georgia, serif;
  text-align: center;
  text-shadow: 0 2px 2px #46260e, 0 0 5px #4c2a0d;
}
#farmNameInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 5%;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #493017;
  font: 700 clamp(14px, 2.5vw, 20px) Georgia, serif;
  text-align: center;
  caret-color: #573617;
}
.farm-name-field {
  position: absolute;
  left: 22.8%;
  top: 40.2%;
  width: 54.4%;
  height: 11.5%;
}
.farm-name-field > img,
#farmNameSubmit img,
#farmNameCancel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.farm-name-field > img,
.farm-name-field > img.focused,
#farmNameSubmit img,
#farmNameCancel img { position: absolute; inset: 0; }
.farm-name-field > img.focused { opacity: 0; }
.farm-name-field:focus-within > img.focused { opacity: 1; }
.farm-name-field:focus-within > img:first-child { opacity: 0; }
#farmNameSubmit,
#farmNameCancel {
  position: absolute;
  top: 54%;
  width: 21%;
  height: 9%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#farmNameSubmit { left: 27.3%; }
#farmNameCancel { left: 52.2%; }
#farmNameSubmit img.disabled,
#farmNameCancel img.disabled { display: none; }
#farmNameSubmit:disabled img.enabled,
#farmNameCancel:disabled img.enabled { display: none; }
#farmNameSubmit:disabled img.disabled,
#farmNameCancel:disabled img.disabled { display: block; }
#farmNameSubmit:disabled { cursor: default; }
#farmNameSubmit:not(:disabled):hover img.enabled,
#farmNameCancel:not(:disabled):hover img.enabled { filter: brightness(1.12); transform: scale(1.07); }
#farmNameSubmit:not(:disabled):active,
#farmNameCancel:active { transform: scale(.97); }
#farmNameSubmit:focus-visible,
#farmNameCancel:focus-visible {
  outline: 3px solid #fff4b0;
  outline-offset: 2px;
  border-radius: 18px;
}
#farmNameError {
  position: absolute;
  top: 66%;
  left: 15%;
  width: 70%;
  margin: 0;
  color: #a44336;
  font: 700 clamp(10px, 2vw, 14px) Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px #f2d49a;
}