/* Keep the active farm fitted to the browser viewport without page scrolling. */
body.is-game {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-game .shell,
body.is-game .game-frame,
body.is-game .play-layout,
body.is-game .stage,
body.is-game #farmCanvas {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
}

body.is-game .shell,
body.is-game .game-frame {
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden;
}

body.is-game .game-frame {
  display: block;
}

body.is-game .play-layout {
  overflow: hidden;
}

body.is-game #farmCanvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body.is-game .game-frame button,
body.is-game .game-frame [role="button"] {
  touch-action: manipulation;
}

/* Barn Buddy-style pointer: the arrow remains visible and the active tool follows it. */
.game-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  width: 82px;
  height: 78px;
  pointer-events: none;
  transform: translate(-13px, -8px);
  filter: drop-shadow(0 2px 2px rgba(37, 32, 23, 0.28));
}

.game-cursor[hidden],
.game-cursor-tool[hidden] {
  display: none;
}

.game-cursor-pointer,
.game-cursor-tool {
  position: absolute;
  display: block;
  object-fit: contain;
  user-select: none;
}

.game-cursor-pointer {
  top: 0;
  left: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
}

.game-cursor-tool {
  top: 23px;
  left: 27px;
  z-index: 1;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 2px 1px rgba(45, 31, 18, 0.25));
}

@media (pointer: fine) {
  body.is-game .game-frame,
  body.is-game .game-frame * {
    cursor: none !important;
  }
}

@media (pointer: coarse) {
  .game-cursor {
    display: none !important;
  }
}

/* Crop progress belongs to the hovered plant instead of floating over every field tile. */
.tile-pop[data-mode="crop"] {
  width: min(330px, calc(100% - 16px));
  min-width: 270px;
  border: 4px solid #fff5cf;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffe7a7 0%, #f5cd79 100%);
  padding: 10px 12px 11px;
  color: #593a1d;
  box-shadow:
    0 0 0 3px #9c6b30,
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 10px 24px rgba(43, 29, 12, 0.38);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  backdrop-filter: none;
  animation: crop-hover-enter 130ms ease-out both;
}

.crop-hover-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(113, 76, 29, 0.22);
  padding-bottom: 7px;
}

.crop-hover-art {
  display: grid !important;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 2px solid rgba(129, 88, 38, 0.38);
  border-radius: 10px;
  background: rgba(255, 252, 224, 0.86);
  font-size: 1.65rem;
  box-shadow: inset 0 2px 0 white;
}

.crop-hover-art img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.crop-hover-title {
  display: grid !important;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.crop-hover-title strong {
  overflow: hidden;
  color: #593719;
  font-size: 0.92rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crop-hover-title small {
  color: #8b683a;
  font-size: 0.68rem;
  font-weight: 800;
}

.crop-hover-row {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) minmax(112px, auto);
  align-items: center;
  gap: 9px;
  min-height: 24px;
}

.crop-hover-row + .crop-hover-row { margin-top: 4px; }

.crop-hover-row > strong {
  color: #6d4b24;
  font-size: 0.7rem;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.crop-hover-track {
  position: relative;
  display: block !important;
  height: 15px;
  overflow: hidden;
  border: 2px solid #8a6638;
  border-radius: 999px;
  background: #f8f1d3;
  box-shadow: inset 0 2px 3px rgba(71, 50, 23, 0.22), 0 1px 0 rgba(255, 255, 255, 0.7);
}

.crop-hover-track > span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
  transition: width 180ms linear;
}

.crop-hover-track.harvest > span { background: linear-gradient(#53d5f1, #24a8ce); }
.crop-hover-track.health > span { background: linear-gradient(#9ddd59, #58ad31); }

.crop-hover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.crop-hover-tag {
  display: inline-flex !important;
  align-items: center;
  min-height: 20px;
  border: 1px solid rgba(101, 73, 36, 0.28);
  border-radius: 999px;
  background: rgba(255, 250, 219, 0.72);
  padding: 3px 8px;
  color: #7c5a30;
  font-size: 0.61rem;
  font-weight: 900;
  line-height: 1;
}

.crop-hover-tag.watered { color: #14769c; }
.crop-hover-tag.danger { color: #a2382f; background: rgba(255, 226, 180, 0.82); }

@keyframes crop-hover-enter {
  from { opacity: 0; transform: translateY(3px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 620px), (max-height: 620px) {
  .tile-pop[data-mode="crop"] { min-width: 245px; width: min(290px, calc(100% - 16px)); padding: 8px 9px; }
  .crop-hover-art { flex-basis: 36px; width: 36px; height: 36px; }
  .crop-hover-art img { width: 31px; height: 31px; }
  .crop-hover-row { grid-template-columns: minmax(82px, 1fr) minmax(105px, auto); gap: 6px; }
  .crop-hover-row > strong { font-size: 0.64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile-pop[data-mode="crop"] { animation: none; }
  .crop-hover-track > span { transition: none; }
}

/* Barn Buddy-style contextual menu for a friend card. */
.friend-card-menu {
  --friend-menu-arrow-left: 50%;
  position: fixed;
  z-index: 40;
  width: 144px;
  padding: 6px;
  border: 3px solid #8b602f;
  border-radius: 9px;
  color: #4b3218;
  background: linear-gradient(180deg, #fff4c9, #e8c77d);
  box-shadow: inset 0 0 0 2px rgba(255, 252, 220, 0.76), 0 7px 15px rgba(48, 31, 13, 0.34);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

.friend-card-menu::after {
  content: "";
  position: absolute;
  left: var(--friend-menu-arrow-left);
  bottom: -10px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-top: 10px solid #8b602f;
  border-left: 9px solid transparent;
  transform: translateX(-50%);
}

.friend-menu-name {
  display: block;
  overflow: hidden;
  padding: 1px 22px 5px 4px;
  font-size: 0.72rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-menu-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 2px solid #8b4c2c;
  border-radius: 50%;
  color: #fff7d7;
  background: linear-gradient(180deg, #ee7757, #bd422f);
  box-shadow: inset 0 -2px 0 rgba(105, 35, 24, 0.26), 0 2px 4px rgba(69, 38, 18, 0.3);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
}

.friend-menu-level,
.friend-menu-action {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 2px solid #b88a45;
  border-radius: 7px;
  color: #54391e;
  background: linear-gradient(180deg, #fff8d8, #efd597);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 2px 3px rgba(89, 57, 20, 0.13);
  font-size: 0.72rem;
  font-weight: 950;
}

.friend-menu-level {
  margin-bottom: 4px;
}

.friend-menu-level > span:first-child {
  color: #f0a817;
  font-size: 1.2rem;
  line-height: 1;
  text-shadow: 0 1px 0 #7e5415;
}

.friend-menu-action {
  justify-content: flex-start;
  margin-top: 4px;
  cursor: pointer;
  text-align: left;
}

.friend-menu-action > span {
  color: #fffdf0;
  font-size: 1rem;
  text-shadow: 0 1px 0 #6b4d2c;
}

.friend-menu-action.visit {
  justify-content: center;
  min-height: 38px;
  text-align: center;
}

.friend-menu-action:hover,
.friend-menu-action:focus-visible {
  border-color: #6d9238;
  outline: 0;
  background: linear-gradient(180deg, #eff8b6, #c8df72);
}

.friend-card.is-selected {
  border-color: #4b8b2f;
  background: #dff09a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 223, 0.7), 0 0 0 2px #6c9f3f;
  transform: translateY(-3px);
}

@media (max-width: 720px) {
  .friend-card-menu {
    width: 136px;
  }
}

/* Read-only farm visit mode. */
.farm-visit-banner {
  position: absolute;
  top: clamp(12px, 1.2vw, 20px);
  left: 50%;
  z-index: 24;
  min-width: min(390px, calc(100% - 360px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 9px 8px 15px;
  border: 3px solid #8b602f;
  border-radius: 14px;
  color: #4b3218;
  background: linear-gradient(180deg, #fff6cf, #e8ca84);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 238, 0.72), 0 7px 16px rgba(48, 31, 13, 0.3);
  transform: translateX(-50%);
}

.farm-visit-banner[hidden] {
  display: none;
}

.farm-visit-copy {
  min-width: 0;
  display: grid;
  line-height: 1.05;
}

.farm-visit-copy small {
  color: #7b684a;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.farm-visit-copy strong {
  overflow: hidden;
  max-width: 200px;
  font-size: 0.93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.farm-visit-copy span {
  color: #6b573b;
  font-size: 0.67rem;
  font-weight: 800;
}

.leave-farm-visit {
  min-height: 38px;
  padding: 7px 13px;
  border: 2px solid #39752f;
  border-radius: 9px;
  color: #fffde4;
  background: linear-gradient(180deg, #72c555, #3f9138);
  box-shadow: inset 0 -3px 0 rgba(34, 100, 38, 0.24), 0 3px 6px rgba(38, 81, 31, 0.18);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 950;
  white-space: nowrap;
}

.leave-farm-visit:hover,
.leave-farm-visit:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.is-visiting-farm .tooldock,
body.is-visiting-farm .left-panels,
body.is-visiting-farm .right-panels {
  filter: saturate(0.65) brightness(0.94);
}

body.is-visiting-farm .tool:disabled,
body.is-visiting-farm .panel button:disabled,
body.is-visiting-farm .stage-corner-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

body.is-visiting-farm #farmCanvas {
  cursor: default;
}

@media (max-width: 760px) {
  .farm-visit-banner {
    top: 8px;
    min-width: 0;
    width: calc(100% - 118px);
    gap: 8px;
    padding-left: 10px;
  }

  .farm-visit-copy strong { max-width: 125px; }
  .leave-farm-visit { min-height: 34px; padding: 5px 8px; font-size: 0.62rem; }
}

/* Compact player HUD adapted from the user-provided friend build. */
.compact-player-hud {
  position: absolute;
  top: clamp(10px, 1vw, 18px);
  left: clamp(10px, 1vw, 18px);
  z-index: 12;
  width: 336px;
  display: grid;
  grid-template-columns: 84px 242px;
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: 10px;
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(21, 40, 27, 0.28));
}

.compact-player-avatar {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 84px;
  height: 84px;
  overflow: hidden;
  padding: 0;
  border: 4px solid #493a25;
  border-radius: 8px;
  background: #9bd36a;
  box-shadow: 0 3px 0 rgba(36, 29, 18, 0.34), 0 7px 12px rgba(19, 45, 25, 0.2);
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
}

.compact-player-avatar:hover,
.compact-player-avatar:focus-visible {
  border-color: #fff1a6;
  outline: 3px solid rgba(43, 122, 55, 0.48);
  outline-offset: 2px;
}

.compact-player-avatar::after {
  content: "+";
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 3;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #fff4c2;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #4fa9ee, #2169ac);
  box-shadow: 0 2px 4px rgba(30, 43, 30, 0.34);
  font: 950 15px/1 Arial, sans-serif;
}

.compact-player-avatar:disabled { cursor: default; }
.compact-player-avatar:disabled::after { display: none; }

.compact-player-avatar > img,
.compact-player-avatar > span,
.compact-player-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.compact-player-avatar > img {
  object-fit: cover;
}

.compact-player-avatar > img[hidden],
.compact-player-avatar > span[hidden] { display: none; }

.profile-avatar-button {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.profile-avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-button img[hidden],
.profile-avatar-button span[hidden] { display: none; }

.friend-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-editor-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

#infoModal { z-index: 50; }

.avatar-editor-preview {
  width: 144px;
  height: 144px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid #fff3bd;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #68b969, #246d56);
  box-shadow: 0 0 0 3px #6e4a28, 0 12px 25px rgba(47, 35, 19, 0.24);
  font-size: 2.2rem;
  font-weight: 950;
}

.avatar-editor-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-note { max-width: 390px; margin: 0 !important; }
.avatar-editor-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.avatar-editor-action {
  min-height: 44px;
  padding: 9px 17px;
  border: 2px solid #2d762f;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(180deg, #66c65b, #319239);
  box-shadow: 0 3px 0 #236328;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.avatar-editor-action.remove {
  border-color: #9d4337;
  background: linear-gradient(180deg, #ef735e, #c34638);
  box-shadow: 0 3px 0 #7e3029;
}

.avatar-editor-action:disabled { cursor: wait; opacity: 0.65; }
.avatar-upload-status { min-height: 20px; margin: 0 !important; font-weight: 900; }

@media (max-width: 480px) {
  .avatar-editor-preview { width: 118px; height: 118px; }
  .avatar-editor-actions { width: 100%; }
  .avatar-editor-action { flex: 1 1 130px; }
}

.compact-player-stats {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 4px;
  padding-top: 1px;
}

.compact-level-row {
  display: flex;
  min-width: 0;
  align-items: center;
}

.compact-level-star {
  position: relative;
  z-index: 2;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  filter: drop-shadow(0 2px 1px rgba(53, 34, 9, 0.4));
}

.compact-xp-track {
  position: relative;
  flex: 1;
  height: 31px;
  overflow: hidden;
  border: 4px solid #493a25;
  border-radius: 999px;
  background: #4f3b24;
  box-shadow: inset 0 2px 2px rgba(23, 14, 7, 0.42), 0 2px 0 rgba(36, 25, 13, 0.32);
}

.compact-xp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, #ffc65c 0%, #f19922 78%, #df7b0b 100%);
  box-shadow: inset 0 3px 0 rgba(255, 236, 166, 0.48);
  transition: width 220ms ease;
}

.compact-xp-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-left: 10px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 #3e2d1d, 1px 0 0 #3e2d1d, -1px 0 0 #3e2d1d;
}

.compact-resource-row {
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 9px;
  padding-left: 10px;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 0 #3d372a, 1px 0 0 #3d372a, -1px 0 0 #3d372a;
}

.compact-resource-row strong {
  font-weight: 950;
}

.compact-coin-icon {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  border: 3px solid #8d5a0c;
  border-radius: 50%;
  color: #8b5908;
  background: radial-gradient(circle at 35% 27%, #fff19d 0 12%, #ffd448 23%, #f0a916 72%, #c47b08 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 232, 104, 0.72), 0 2px 2px rgba(54, 33, 8, 0.3);
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 241, 155, 0.75);
}

.compact-credit-icon {
  width: 21px;
  height: 26px;
  display: block;
  flex: 0 0 21px;
  margin-left: 3px;
  margin-right: 3px;
  border: 3px solid #762b27;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff796e 0%, #e43e36 48%, #ab1f29 100%);
  box-shadow: inset 3px 3px 0 rgba(255, 193, 177, 0.52), 0 2px 2px rgba(53, 25, 20, 0.35);
  transform: rotate(45deg) scale(0.78);
}

.compact-add-credits {
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: start;
  min-width: 184px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
  padding: 5px 16px 6px 11px;
  border: 3px solid #18528a;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #59b5f6 0%, #2f86d3 72%, #2472bf 100%);
  box-shadow: inset 0 2px 0 rgba(221, 246, 255, 0.48), 0 4px 0 #164c81, 0 7px 11px rgba(19, 46, 75, 0.26);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 950;
  pointer-events: auto;
  text-shadow: 0 2px 0 #14518e;
}

.compact-add-credits svg {
  width: 21px;
  height: 21px;
  fill: #2988d6;
  stroke: #135896;
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38));
}

.compact-add-credits:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.compact-hud-actions {
  grid-column: 1 / span 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-left: 9px;
}

.compact-hud-action {
  position: relative;
  width: 39px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

.compact-hud-action > svg {
  display: block;
  width: 34px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(27, 34, 24, 0.36));
  transition: transform 120ms ease;
}

.compact-hud-action:hover > svg {
  transform: translateY(-1px) scale(1.06);
}

.compact-add-credits:focus-visible,
.compact-hud-action:focus-visible {
  outline: 3px solid rgba(255, 243, 144, 0.96);
  outline-offset: 3px;
}

.compact-hud-action .compact-mail-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 2px solid #fff4cf;
  border-radius: 50%;
  background: linear-gradient(180deg, #f15a45, #c72e24);
  filter: drop-shadow(0 2px 2px rgba(80, 24, 17, 0.34));
}

.compact-hud-action .compact-mail-badge.is-wide {
  width: 28px;
  border-radius: 999px;
}

.compact-hud-action .compact-mail-badge span {
  color: #fff;
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 #8f1d16;
  transform: none;
}

@media (max-width: 720px) {
  .compact-player-hud {
    top: 8px;
    left: 8px;
    transform: scale(0.78);
    transform-origin: top left;
  }
}

@media (max-width: 430px) {
  .compact-player-hud {
    top: 6px;
    left: 6px;
    transform: scale(0.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-xp-fill,
  .compact-hud-action > svg {
    transition: none;
  }
}
/* End compact player HUD. */

/* Sticker shortcuts in the top-right corner. */
.stage-corner-menu {
  position: absolute;
  top: clamp(8px, 0.9vw, 16px);
  right: clamp(9px, 1vw, 18px);
  z-index: 12;
  display: flex;
  align-items: flex-start;
  gap: clamp(3px, 0.35vw, 7px);
  pointer-events: auto;
}

.stage-corner-action {
  position: relative;
  width: clamp(58px, 4.5vw, 78px);
  height: clamp(58px, 4.5vw, 78px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}

.stage-corner-action img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(31, 43, 27, 0.26));
  transition: transform 130ms ease, filter 130ms ease;
  pointer-events: none;
}

.stage-corner-action:hover img {
  transform: translateY(-2px) scale(1.07);
  filter: drop-shadow(0 7px 5px rgba(31, 43, 27, 0.3)) brightness(1.04);
}

.stage-corner-action:active img {
  transform: translateY(1px) scale(0.97);
}

.stage-corner-action:focus-visible {
  border-radius: 14px;
  outline: 3px solid rgba(255, 243, 144, 0.96);
  outline-offset: 2px;
}

.stage-corner-tooltip {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  z-index: 2;
  min-width: 76px;
  padding: 4px 9px 5px;
  border: 2px solid #af7f35;
  border-radius: 7px;
  color: #5f431d;
  background: linear-gradient(180deg, #fffbd5, #f5dda0);
  box-shadow: 0 3px 0 rgba(92, 58, 22, 0.22), 0 6px 12px rgba(47, 42, 25, 0.2);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.92);
  transform-origin: top center;
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.stage-corner-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #af7f35;
  border-left: 6px solid transparent;
  transform: translateX(-50%);
}

.stage-tooltip-action:hover .stage-corner-tooltip,
.stage-tooltip-action:focus-visible .stage-corner-tooltip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 720px) {
  .stage-corner-menu {
    top: 7px;
    right: 7px;
    gap: 3px;
  }

  .stage-corner-action {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 430px) {
  .stage-corner-menu {
    top: 6px;
    right: 5px;
    gap: 2px;
  }

  .stage-corner-action {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-corner-action img {
    transition: none;
  }
}
/* End sticker shortcuts. */

/* Locked field purchase dialog. */
.land-purchase-modal {
  z-index: 24;
  background: rgba(25, 43, 25, 0.55);
}

.land-purchase-dialog {
  width: min(520px, 100%);
  overflow: hidden;
  border: 6px solid #fffdf0;
  border-radius: 22px;
  color: #513b20;
  background: linear-gradient(180deg, #fff4c9 0%, #f7d987 100%);
  box-shadow: 0 0 0 3px #c99843, 0 18px 42px rgba(36, 28, 12, 0.42);
}

.land-purchase-head {
  position: relative;
  padding: 17px 58px 11px;
  border-bottom: 2px solid rgba(189, 132, 43, 0.42);
  text-align: center;
}

.land-purchase-head h2 {
  margin: 0;
  color: #513719;
  font-size: clamp(1.55rem, 5vw, 2.15rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.land-purchase-close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 3px solid #9b3828;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #f17755, #c43d2e);
  box-shadow: 0 3px 0 #842d22;
  font-size: 1.65rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.land-purchase-body {
  padding: 16px 22px 14px;
  text-align: center;
}

.land-purchase-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border: 3px solid #9a7338;
  border-radius: 16px;
  background: linear-gradient(180deg, #eaf8c8, #b6d98a);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 4px 0 rgba(116, 76, 28, 0.22);
  font-size: 2.5rem;
}

.land-purchase-body > p { margin: 7px auto; }

.land-purchase-progress {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  color: #684c24;
  background: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
}

.land-purchase-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.land-purchase-option {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px 10px;
  border: 3px solid #b78131;
  border-radius: 14px;
  color: #543a1c;
  background: linear-gradient(180deg, #fffdf1, #f8e2a8);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #a36e29;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 100ms ease, filter 100ms ease;
}

.land-purchase-option:hover { filter: brightness(1.04); transform: translateY(-1px); }
.land-purchase-option:active { box-shadow: 0 2px 0 #a36e29; transform: translateY(2px); }
.land-purchase-option strong { font-size: 1.25rem; }
.land-purchase-option small { color: #80643a; font-size: 0.7rem; }
.land-purchase-option.insufficient small { color: #a33227; }
.land-purchase-option.credit-option { border-color: #3e8da7; box-shadow: inset 0 2px 0 #fff, 0 4px 0 #2f7188; }

.land-purchase-note {
  color: #83683d;
  font-size: 0.68rem;
  font-weight: 750;
}

.land-purchase-actions {
  display: flex;
  justify-content: center;
  padding: 0 22px 18px;
}

.land-purchase-actions button {
  min-width: 132px;
  padding: 9px 18px;
  border: 3px solid #9d3527;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #ed664b, #bd392b);
  box-shadow: 0 3px 0 #7f291f;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

@media (max-width: 480px) {
  .land-purchase-modal { padding: 10px; }
  .land-purchase-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; border-width: 4px; }
  .land-purchase-body { padding-inline: 12px; }
  .land-purchase-options { grid-template-columns: 1fr; }
  .land-purchase-option { min-height: 92px; }
}

/* Phone controls: safe-area aware spacing and reliable touch targets. */
@media (max-width: 760px), (pointer: coarse) {
  .compact-player-hud {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
  }

  .stage-corner-menu {
    top: max(6px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
  }

  .friends-dock {
    min-height: calc(64px + env(safe-area-inset-bottom));
    grid-template-columns: 36px minmax(0, 1fr) 36px auto;
    padding-right: max(5px, env(safe-area-inset-right));
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    padding-left: max(5px, env(safe-area-inset-left));
  }

  .friends-arrow {
    width: 36px;
    min-width: 36px;
    min-height: 44px;
  }

  .invite-friend-button,
  .more-friends-button {
    min-height: 44px;
  }

  .tooldock {
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right));
    overflow: visible;
  }

  .tooldock .tool {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .tooldock .tool-icon {
    width: 32px;
    height: 32px;
  }

  .seed-bag-close {
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
  }
}