/* Final responsive guardrails for phones; keep the desktop farm untouched. */
@media (orientation: portrait) {
  html.mobile-device #rotatePrompt:not([hidden]) {
    display: grid !important;
  }
  html.mobile-device #game > *:not(#rotatePrompt) {
    visibility: hidden !important;
  }
  html.mobile-device #authScreen {
    visibility: hidden !important;
  }
  html.mobile-device #rotatePrompt {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  html.mobile-device .rotate-card {
    width: min(340px, 100%);
  }
}
@media (orientation: landscape) or (min-width: 1101px) {
  #rotatePrompt[hidden] {
    display: none !important;
  }
}
#friendsRail {
  position: fixed;
  top: 50%;
  left: 0;
  bottom: auto;
  transform: translateY(-50%);
}
@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overscroll-behavior: none;
  }
  #game {
    isolation: isolate;
  }
  #farm {
    touch-action: none;
  }
  #hud {
    box-sizing: border-box;
    width: auto !important;
    transform: none !important;
  }
  #hudActions {
    max-width: min(58vw, 430px);
    overscroll-behavior-inline: contain;
  }
  #toolbar {
    max-width: calc(100vw - 12px);
  }
  #toolbar button,
  #hudActions button,
  #hudActions a,
  #cameraControls button,
  #mobileMenuToggle,
  #mobileMenuPanel button,
  #helpOpen,
  #friendsRailToggle,
  .server-chat-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #mobileMenuPanel {
    max-height: calc(100dvh - 120px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  #mobileMenuPanel button {
    min-height: 44px;
    font-size: 12px;
  }
  #hudActions.collapsed > *:not(#hudCollapse) {
    display: none !important;
  }
  #hudActions.collapsed #hudCollapse {
    min-width: 34px;
    min-height: 42px;
  }
  #window,
  #giftWindow,
  #mailRewardDialog,
  #landConfirmDialog,
  #errorDialog,
  #levelUpDialog {
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  #windowBody,
  #giftWindowBody {
    min-width: 0;
    overscroll-behavior: contain;
  }
  #window[data-kind="shop"],
  #window:has(.shop-grid),
  #window[data-kind="bag"],
  #window:has(.bag-tabs),
  #window[data-kind="warehouse"],
  #window:has(#sellAll) {
    width: min(96vw, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: hidden !important;
  }
  #window[data-kind="shop"] #windowBody,
  #window:has(.shop-grid) #windowBody,
  #window[data-kind="bag"] #windowBody,
  #window:has(.bag-tabs) #windowBody,
  #window[data-kind="warehouse"] #windowBody,
  #window:has(#sellAll) #windowBody {
    height: auto !important;
    max-height: calc(100dvh - 82px) !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="shop"] .shop-grid,
  #window:has(.shop-grid) .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(126px, auto) !important;
    overflow: visible !important;
  }
  #window .shop-intro {
    min-width: 0;
  }
  #window .shop-intro .tabs {
    min-width: 0;
    max-width: 100%;
  }
  #window .bag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #friendsRail:not(.collapsed) {
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    transform: translateY(-50%);
    width: min(310px, calc(100vw - 24px)) !important;
    max-height: min(48dvh, 330px) !important;
    z-index: 14;
    filter: drop-shadow(0 4px 10px #192c1760);
  }
  #friendsRail:not(.collapsed) #friendsRailBody {
    width: 100% !important;
    max-height: min(48dvh, 330px) !important;
    border-radius: 0 8px 8px 0;
    background: #edf5e8f5;
  }
  #friendsRail:not(.collapsed) #friendsRailList {
    max-height: min(calc(48dvh - 52px), 278px) !important;
  }
  #friendsRail.collapsed #friendsRailToggle {
    width: 34px;
    min-height: 34px;
    height: 34px;
  }
  #friendsRail.collapsed {
    position: fixed;
    top: 50%;
    left: 0;
    bottom: auto;
    transform: translateY(-50%);
  }
  #purchaseBox.crop-purchase {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50%;
    width: min(500px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    height: auto !important;
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #purchaseBox.crop-purchase .crop-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #purchaseBox.crop-purchase .crop-facts > div,
  #purchaseBox.crop-purchase .crop-facts > div:nth-last-child(-n + 2) {
    border-bottom: 1px solid #eee6cf;
  }
  #purchaseBox.crop-purchase .crop-facts > div:last-child {
    border-bottom: 0;
  }
  #giftWindow {
    width: calc(100vw - 16px) !important;
    height: min(78dvh, 620px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  #giftWindowBody {
    max-height: calc(100dvh - 84px);
    overflow: auto;
  }
  #window[data-kind="warehouse"] #windowBody {
    overflow: hidden !important;
  }
  #window[data-kind="warehouse"] .warehouse-panel {
    min-height: 0;
  }
  #window[data-kind="warehouse"] .warehouse-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
    grid-auto-rows: 68px !important;
    gap: 3px;
    padding: 7px;
  }
  #window[data-kind="warehouse"] .warehouse-card {
    min-width: 0;
    padding: 3px;
  }
  #window[data-kind="warehouse"] .warehouse-card > img {
    width: min(100%, 48px);
    height: 45px;
  }
  #window[data-kind="warehouse"] .warehouse-card .warehouse-item-name {
    font-size: 9px;
  }
  #window[data-kind="warehouse"] .warehouse-footer {
    gap: 5px;
    min-height: 54px;
    padding: 5px 8px;
  }
  #window[data-kind="warehouse"] .warehouse-total {
    gap: 4px;
    font-size: 10px;
  }
  #window[data-kind="warehouse"] .warehouse-total > b {
    gap: 2px;
    font-size: 13px;
  }
  #window[data-kind="warehouse"] .warehouse-total img {
    width: 20px;
    height: 20px;
  }
  #window[data-kind="warehouse"] .warehouse-actions {
    gap: 4px;
  }
  #window[data-kind="warehouse"] .warehouse-actions #giftFriends {
    width: 34px;
    height: 34px;
  }
  #window[data-kind="warehouse"] .warehouse-actions #sellAll {
    min-width: 62px;
    min-height: 38px;
    padding: 5px 7px;
    font-size: 11px;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #hud {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
  }
  #hud .classic-profile {
    flex: 0 1 220px;
    width: 220px;
    min-width: 0;
    transform: scale(0.58) !important;
    transform-origin: top left;
    margin: 0 -92px -39px 0 !important;
  }
  #hudActions {
    flex: 0 1 auto;
    max-width: calc(100vw - 154px);
    gap: 2px;
  }
  #hudActions > button,
  #hudActions > a {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 40px;
    min-height: 40px;
  }
  #hudActions #hudCollapse {
    flex-basis: 28px;
    width: 28px;
    min-width: 28px;
  }
  #toolbar {
    left: 50%;
    right: auto;
    bottom: max(7px, env(safe-area-inset-bottom));
    width: calc(100% - 12px);
    height: 58px;
    min-height: 52px;
  }
  #toolbar button {
    min-width: 0;
    min-height: 46px;
  }
  #toolbar img {
    max-width: 34px;
    max-height: 34px;
  }
  #cameraControls {
    right: max(6px, env(safe-area-inset-right));
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
  #toolHint {
    left: 5%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 65%;
  }
  #helpOpen {
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
  #mobileMenuToggle {
    right: max(6px, env(safe-area-inset-right));
  }
  #mobileMenuPanel {
    right: max(6px, env(safe-area-inset-right));
  }
  #serverChat:not(.collapsed) .server-chat-panel {
    z-index: 15;
  }
  #window:has(input:focus),
  #window:has(textarea:focus) {
    left: 50%;
    width: calc(100vw - 16px);
  }
  #window[data-kind="bag"] {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    bottom: auto !important;
    translate: -50% -50%;
    transform: none !important;
    width: calc(100vw - 16px) !important;
    height: min(74dvh, 640px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  #window[data-kind="bag"]::backdrop {
    background: #102b2b80 !important;
    backdrop-filter: none !important;
  }
  #window[data-kind="bag"] .title {
    height: 48px !important;
    min-height: 48px;
    font-size: 18px !important;
  }
  #window[data-kind="bag"] .title button {
    top: 5px !important;
    right: 7px !important;
    width: 36px;
    height: 36px;
  }
  #window[data-kind="bag"] #windowBody {
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px) !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 7px !important;
  }
  #window[data-kind="bag"] .bag-tabs {
    gap: 4px;
    padding-bottom: 6px;
    overflow-x: auto;
  }
  #window[data-kind="bag"] .bag-tabs button {
    flex: 1 0 auto;
    min-height: 40px;
    padding: 6px 8px;
    font-size: 11px;
  }
  #window[data-kind="bag"] #bagContent {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="bag"] .bag-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(78px, auto) !important;
    gap: 4px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center;
    height: 78px !important;
    min-height: 78px !important;
    padding: 4px !important;
    border: 1px solid #e0e4d5;
    border-radius: 7px;
    background: #fbfcf7;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon > img {
    width: 52px !important;
    height: 52px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-quantity {
    left: auto !important;
    right: 3px !important;
    bottom: 3px !important;
    font-size: 10px;
  }
  #window[data-kind="bag"] .bag-grid .used-mark {
    top: 2px;
    right: 2px;
  }
  #window[data-kind="bag"] .feed-item {
    min-height: 144px;
    padding: 8px 4px;
  }
  #window[data-kind="bag"] .feed-item img {
    width: 54px;
    height: 54px;
  }
  #window[data-kind="bag"] .feed-item p {
    font-size: 10px;
    line-height: 1.2;
  }
  #window[data-kind="bag"] .feed-item small {
    font-size: 9px;
  }
  #window[data-kind="shop"] .shop-grid,
  #window:has(.shop-grid) .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(136px, auto) !important;
  }
  #window[data-kind="shop"] .seed {
    min-width: 0;
    padding: 6px 5px;
  }
  #window[data-kind="shop"] .seed > img {
    width: 52px;
    height: 46px;
  }
  #window[data-kind="shop"] .seed > b {
    font-size: 11px;
    line-height: 1.15;
  }
  #window[data-kind="shop"] .seed small {
    display: block;
    margin: 3px 0;
    font-size: 9px;
    line-height: 1.2;
  }
  #window[data-kind="shop"] .seed-prices {
    height: auto;
    min-height: 30px;
    flex-wrap: wrap;
  }
  #window[data-kind="shop"] .seed .buy-seed {
    width: 100% !important;
    min-width: 0;
    height: 30px;
    min-height: 30px;
  }
  #window[data-kind="shop"] .tabs button {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }
  #window[data-kind="warehouse"] {
    height: min(76dvh, 620px) !important;
  }
  #window[data-kind="warehouse"] .warehouse-footer {
    min-height: 64px;
  }
  #window[data-kind="other"][data-animal] {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  #window[data-kind="other"][data-animal] #windowBody {
    max-height: calc(100dvh - 80px) !important;
    overflow: auto !important;
  }
}

@media (orientation: landscape) and (max-width: 1000px),
  (orientation: landscape) and (max-height: 600px) {
  /* The play area must fill the available landscape viewport, not letterbox. */
  html.mobile-device #game {
    width: 100vw !important;
    height: 100dvh !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  html.mobile-device #farm {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill;
  }
  #hud {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
  }
  #hudActions {
    max-width: calc(100vw - 210px);
  }
  #window[data-kind="shop"] .shop-grid,
  #window:has(.shop-grid) .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(112px, auto) !important;
  }
  #toolbar {
    left: 50%;
    right: auto;
  }
  #window[data-kind="bag"] {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    bottom: auto !important;
    translate: -50% -50%;
    transform: none !important;
    width: min(760px, calc(100vw - 24px)) !important;
    height: min(78dvh, 460px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
  }
  #window[data-kind="bag"]::backdrop {
    background: #102b2b80 !important;
    backdrop-filter: none !important;
  }
  #window[data-kind="bag"] #windowBody {
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px) !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 7px !important;
  }
  #window[data-kind="bag"] #bagContent {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  #window[data-kind="bag"] .bag-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 68px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon {
    grid-template-columns: 1fr !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 3px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon > img {
    width: 46px !important;
    height: 46px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-quantity {
    left: auto !important;
    right: 2px !important;
    bottom: 2px !important;
  }
  #window[data-kind="shop"] .shop-grid,
  #window:has(.shop-grid) .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(120px, auto) !important;
  }
}

@media (orientation: landscape) and (max-width: 700px) {
  #toolbar {
    width: min(420px, calc(100% - 16px));
  }
}

@media (max-width: 380px) {
  #hud .classic-profile {
    transform: scale(0.52) !important;
    margin-right: -105px !important;
    margin-bottom: -43px !important;
  }
  #hudActions {
    max-width: calc(100vw - 136px);
  }
  #hudActions > button,
  #hudActions > a {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    height: 38px;
    min-height: 38px;
    font-size: 7px;
  }
  #toolbar {
    height: 54px;
    min-height: 48px;
  }
  #toolbar button {
    min-height: 44px;
  }
  #cameraControls button {
    min-width: 36px;
    min-height: 38px;
  }
  #cameraControls #zoomValue {
    width: 43px;
  }
  #window[data-kind="shop"] .shop-grid,
  #window:has(.shop-grid) .shop-grid {
    grid-auto-rows: minmax(116px, auto) !important;
  }
}

@media (max-height: 420px) and (orientation: landscape) {
  #toolbar {
    height: 48px;
    min-height: 44px;
  }
  #toolbar button {
    min-height: 40px;
  }
  #toolbar img {
    max-width: 29px;
    max-height: 29px;
  }
  #cameraControls {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
  #toolHint {
    bottom: calc(57px + env(safe-area-inset-bottom));
  }
  #window .title {
    height: 42px;
    min-height: 42px;
    padding-top: 5px;
    font-size: 17px;
  }
  #window[data-kind="shop"] #windowBody,
  #window:has(.shop-grid) #windowBody,
  #window[data-kind="bag"] #windowBody,
  #window:has(.bag-tabs) #windowBody,
  #window[data-kind="warehouse"] #windowBody,
  #window:has(#sellAll) #windowBody {
    max-height: calc(100dvh - 68px) !important;
  }
}

/* Keep tool icons grouped while preserving generous touch targets. */
#toolbar {
  left: 50%;
  width: min(470px, 42vw);
  height: 56px;
  min-height: 52px;
  padding: 2px 6px;
  justify-content: center;
  gap: 2px;
  border-radius: 14px;
  transform: translateX(-50%) !important;
  transform-origin: bottom center !important;
}
#toolbar button {
  flex: 0 0 62px;
  width: 62px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: 11px;
}
#toolbar img {
  width: min(100%, 48px);
  height: min(100%, 48px);
  max-width: 48px;
  max-height: 48px;
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #toolbar {
    width: max-content;
    max-width: calc(100% - 16px);
    height: 52px;
    min-height: 48px;
    padding: 3px 6px;
    gap: 0;
    border-radius: 14px;
  }
  #toolbar button {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 10px;
    padding: 0;
  }
  #toolbar img {
    max-width: 34px;
    max-height: 34px;
  }
  html.mobile-device #toolbar {
    width: max-content;
    height: 52px;
    min-height: 48px;
    padding: 3px 6px;
  }
  html.mobile-device #toolbar button {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    height: 100%;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #toolbar {
    width: max-content;
    max-width: calc(100% - 16px);
  }
}

@media (orientation: landscape) and (max-width: 700px) {
  #toolbar {
    width: max-content;
    max-width: calc(100% - 16px);
  }
}

@media (max-width: 380px) {
  #toolbar {
    width: max-content;
    max-width: calc(100% - 12px);
    height: 48px;
    min-height: 44px;
    padding: 2px 4px;
  }
  #toolbar button {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  html.mobile-device #toolbar {
    height: 48px;
    min-height: 44px;
    padding: 2px 4px;
  }
  html.mobile-device #toolbar button {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  #toolbar img {
    max-width: 32px;
    max-height: 32px;
  }
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #hudActions {
    justify-content: flex-start !important;
  }
  #cameraControls {
    display: none !important;
  }
  #window[data-kind="bag"] {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(760px, calc(100vw - 16px)) !important;
    height: min(82dvh, 620px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #window[data-kind="shop"]#window > .title,
  #window[data-kind="bag"]#window > .title,
  #window[data-kind="warehouse"]#window > .title {
    flex: 0 0 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #window[data-kind="shop"]#window #windowBody,
  #window[data-kind="bag"]#window #windowBody,
  #window[data-kind="warehouse"]#window #windowBody,
  #window[data-kind="warehouse"]#window:has(#sellAll) #windowBody {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  #window[data-kind="shop"] #windowBody {
    padding: 6px 9px !important;
  }
  #window[data-kind="shop"] .tabs {
    flex: 0 0 auto !important;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }
  body #window[data-kind="shop"] .shop-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="shop"] .shop-grid .seed {
    box-sizing: border-box;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 4px 3px !important;
    overflow: hidden !important;
  }
  #window[data-kind="shop"] .shop-grid .seed > img {
    width: 46px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  #window[data-kind="shop"] .shop-grid .seed-prices {
    height: 25px !important;
    min-height: 25px !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }
  #window[data-kind="shop"] .shop-grid .seed-prices:has(> button:nth-child(2)) {
    height: 38px !important;
    min-height: 38px !important;
  }
  #window[data-kind="shop"] .shop-grid .seed-prices:has(> button:nth-child(2)) .buy-seed {
    height: 19px !important;
    min-height: 19px !important;
  }
  #window[data-kind="shop"] .shop-footer {
    flex: 0 0 auto !important;
  }

  #window[data-kind="bag"] #windowBody {
    padding: 7px !important;
  }
  #window[data-kind="bag"] #bagContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #window[data-kind="warehouse"] #windowBody {
    padding: 7px !important;
  }
  #window[data-kind="warehouse"] .warehouse-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  #window[data-kind="warehouse"] .warehouse-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="warehouse"] .warehouse-footer {
    flex: 0 0 auto;
  }
  #window[data-kind="warehouse"]#window:has(#sellAll) {
    height: min(82dvh, 620px) !important;
  }

  #purchaseBox {
    box-sizing: border-box !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  #purchaseBox.crop-purchase {
    width: min(500px, calc(100vw - 20px)) !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
  }
  #purchaseBox.crop-purchase .purchase-heading {
    margin: 0 0 3px !important;
  }
  #purchaseBox.crop-purchase .purchase-heading > img {
    width: 46px !important;
    height: 42px !important;
  }
  #purchaseBox.crop-purchase .purchase-heading p {
    display: none;
  }
  #purchaseBox.crop-purchase .purchase-currency {
    margin: 0 0 3px !important;
  }
  #purchaseBox.crop-purchase .currency-choice {
    min-height: 32px !important;
    padding-block: 2px !important;
  }
  #purchaseBox.crop-purchase .crop-facts {
    margin: 2px 0 3px !important;
    padding: 2px 6px !important;
  }
  #purchaseBox.crop-purchase .crop-facts > div {
    min-height: 16px !important;
  }
  #purchaseBox.crop-purchase .quantity-control {
    height: 28px !important;
  }
  #purchaseBox.crop-purchase .purchase-summary {
    margin-top: 3px !important;
    padding: 4px 7px !important;
  }
  #purchaseBox.crop-purchase .purchase-actions {
    margin-top: 4px !important;
  }
}

@media (pointer: coarse), (max-width: 1000px), (max-height: 600px) {
  #hud {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: max(6px, env(safe-area-inset-top));
    width: auto !important;
    min-height: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
    background: transparent;
    border: 0;
  }
  #hud .classic-profile {
    flex: 0 0 420px;
    width: 420px;
    transform: scale(0.62) !important;
    transform-origin: top left;
    margin: 0 -160px 0 0 !important;
  }
  #hudActions {
    display: none !important;
  }
  #mobileMenuToggle {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    z-index: 22;
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }
  #mobileMenuPanel {
    top: calc(56px + env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    z-index: 22;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top));
    overflow: auto;
    overscroll-behavior: contain;
  }
  #giftWindow {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(760px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #giftWindowBody {
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Shared responsive layout for game utilities on touch devices and narrow viewports. */
@media (pointer: coarse), (max-width: 700px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    width: min(760px, calc(100vw - 24px)) !important;
    height: min(76dvh, 620px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 12px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  html.mobile-device #game {
    width: 100vw !important;
    height: 100dvh !important;
    inset: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  html.mobile-device #farm {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    position: fixed !important;
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    translate: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  #window[data-kind="shop"]#window > .title,
  #window[data-kind="bag"]#window > .title,
  #window[data-kind="warehouse"]#window > .title {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding-inline: 48px !important;
  }

  #window[data-kind="shop"]#window #windowBody,
  #window[data-kind="bag"]#window #windowBody,
  #window[data-kind="warehouse"]#window #windowBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  #window[data-kind="shop"]#window .title #close,
  #window[data-kind="bag"]#window .title #close,
  #window[data-kind="warehouse"]#window .title #close {
    top: 4px !important;
    right: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* The mobile dialog layout uses flex; never let that override the closed state. */
#window#window:not([open]),
#window#window[hidden] {
  display: none !important;
}

#window[hidden],
#window:not([open]) {
  display: none !important;
}

/* Keep floating game controls out of the dialog's close-button hit area. */
#game:has(#window[open]) #mobileMenuToggle,
#game:has(#window[open]) #mobileMenuPanel {
  display: none !important;
  pointer-events: none !important;
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    position: fixed !important;
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    translate: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  #window[data-kind="shop"]#window > .title,
  #window[data-kind="bag"]#window > .title,
  #window[data-kind="warehouse"]#window > .title {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding-inline: 48px !important;
  }

  #window[data-kind="shop"]#window #windowBody,
  #window[data-kind="bag"]#window #windowBody,
  #window[data-kind="warehouse"]#window #windowBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  #window[data-kind="shop"]#window .title #close,
  #window[data-kind="bag"]#window .title #close,
  #window[data-kind="warehouse"]#window .title #close {
    top: 4px !important;
    right: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }

  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    z-index: 1000 !important;
  }

  #window[data-kind="warehouse"]#window .warehouse-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #window[data-kind="warehouse"]#window .warehouse-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
    grid-auto-rows: 82px !important;
    align-content: start !important;
    gap: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
  }
  #window[data-kind="warehouse"]#window .warehouse-card {
    min-height: 82px !important;
    padding: 4px !important;
  }
  #window[data-kind="warehouse"]#window .warehouse-card > img {
    width: min(100%, 58px) !important;
    height: 54px !important;
  }
  #window[data-kind="warehouse"]#window .warehouse-card .warehouse-item-name {
    font-size: 10px !important;
  }
  #window[data-kind="warehouse"]#window .warehouse-footer {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    min-height: 54px !important;
    padding: 6px 9px !important;
  }
}

/* Keep the three shop/storage dialogs aligned and above the farm toolbar. */
@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(760px, calc(100vw - 16px)) !important;
    height: min(76dvh, 620px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 72px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #window[data-kind="shop"]#window > .title,
  #window[data-kind="bag"]#window > .title,
  #window[data-kind="warehouse"]#window > .title {
    position: relative;
    z-index: 2;
    flex: 0 0 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #window[data-kind="shop"]#window > .title #close,
  #window[data-kind="bag"]#window > .title #close,
  #window[data-kind="warehouse"]#window > .title #close {
    position: absolute;
    z-index: 10;
    top: 3px !important;
    right: 4px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
    display: grid !important;
    place-items: center;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  #window[data-kind="shop"]#window #windowBody,
  #window[data-kind="bag"]#window #windowBody,
  #window[data-kind="warehouse"]#window #windowBody {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  #window[data-kind="shop"] #windowBody {
    padding: 7px 9px !important;
  }
  #window[data-kind="shop"] .shop-intro {
    flex: 0 0 auto !important;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    margin: 0 0 6px;
    padding: 0 0 6px;
  }
  #window[data-kind="shop"] .shop-intro .tabs {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }
  #window[data-kind="shop"] .shop-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    grid-auto-rows: 80px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="shop"] .shop-footer {
    flex: 0 0 auto !important;
  }

  #window[data-kind="bag"] #windowBody {
    padding: 7px !important;
  }
  #window[data-kind="bag"] #bagContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #window[data-kind="warehouse"] #windowBody {
    padding: 7px !important;
  }
  #window[data-kind="warehouse"] .warehouse-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  #window[data-kind="warehouse"] .warehouse-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #window[data-kind="warehouse"] .warehouse-footer {
    flex: 0 0 auto;
  }
}

@media (max-width: 700px) {
  #window[data-kind="shop"] .shop-intro {
    flex-wrap: wrap;
  }
  #window[data-kind="shop"] .shop-intro .tabs {
    flex-basis: 100%;
  }
  #window[data-kind="shop"] .shop-intro .window-wallet {
    align-self: flex-end;
  }
  #window[data-kind="shop"] .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 136px !important;
  }
  #window[data-kind="bag"] .bag-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  #window[data-kind="warehouse"] .warehouse-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
  }
}

/* Keep the classic bag compact, with two fixed rows before scrolling. */
#window[data-kind="bag"] {
  height: 230px !important;
  min-height: 230px !important;
  max-height: min(260px, calc(100dvh - 120px)) !important;
}
#window[data-kind="bag"] #windowBody {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
#window[data-kind="bag"] #bagContent {
  min-height: 0 !important;
  overflow: auto !important;
}
#window[data-kind="bag"] .bag-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 92px) !important;
  grid-auto-rows: 66px !important;
  gap: 3px !important;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  max-height: 135px;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: auto;
  align-content: start;
  justify-content: start;
}
#window[data-kind="bag"] .bag-grid .inventory-icon {
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center;
  width: 92px;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#window[data-kind="bag"] .bag-grid .inventory-icon:hover {
  filter: brightness(1.06);
}
#window[data-kind="bag"] .bag-grid .inventory-icon > img {
  width: 56px !important;
  height: 56px !important;
}
#window[data-kind="bag"] .bag-grid .inventory-quantity {
  right: 9px;
  bottom: 4px;
  left: auto;
  min-width: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  color: #666;
  font: 12px Arial, sans-serif;
}
#window[data-kind="bag"] .bag-grid .bag-empty-slot {
  visibility: hidden;
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="bag"] {
    height: min(230px, calc(100dvh - 120px)) !important;
    min-height: min(190px, calc(100dvh - 120px)) !important;
  }
  #window[data-kind="bag"] .bag-grid {
    grid-template-columns: repeat(7, 44px) !important;
    grid-auto-rows: 58px !important;
    gap: 2px !important;
    max-height: 118px;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon {
    width: 44px;
    height: 58px !important;
    min-height: 58px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-icon > img {
    width: 42px !important;
    height: 42px !important;
  }
  #window[data-kind="bag"] .bag-grid .inventory-quantity {
    right: 0;
    bottom: 1px;
    font-size: 10px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  #window[data-kind="shop"] .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 80px !important;
  }
}

/* Make secondary game dialogs fit a short mobile viewport without resizing the page. */
@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window#window:not([data-kind="shop"]):not([data-kind="bag"]):not([data-kind="warehouse"]),
  #giftWindow,
  #mailRewardDialog,
  #landConfirmDialog,
  #errorDialog,
  #levelUpDialog,
  #purchaseBox {
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 24px);
  }

  #window#window:not([data-kind="shop"]):not([data-kind="bag"]):not([data-kind="warehouse"]) {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(760px, calc(100vw - 16px)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #window#window:not([data-kind="shop"]):not([data-kind="bag"]):not([data-kind="warehouse"])
    > .title {
    flex: 0 0 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #window#window:not([data-kind="shop"]):not([data-kind="bag"]):not([data-kind="warehouse"])
    #windowBody {
    flex: 0 1 auto !important;
    height: auto !important;
    max-height: calc(100dvh - 96px) !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #giftWindow {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(760px, calc(100vw - 16px)) !important;
    height: min(78dvh, 620px) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  #giftWindow > .title {
    min-height: 48px;
  }
  #giftWindow .title button,
  #mailRewardDialog .mail-reward-header button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    touch-action: manipulation;
  }
  #giftWindowBody {
    max-height: calc(78dvh - 56px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #mailRewardDialog {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    width: min(520px, calc(100vw - 20px)) !important;
    height: auto !important;
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #landConfirmDialog,
  #errorDialog,
  #levelUpDialog,
  #purchaseBox {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #errorDialog {
    width: min(420px, calc(100vw - 24px)) !important;
  }
  #purchaseBox {
    width: min(500px, calc(100vw - 20px)) !important;
  }
}

#window#window:not([open]),
#window#window[hidden] {
  display: none !important;
}

@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window[data-kind="shop"]#window,
  #window[data-kind="bag"]#window,
  #window[data-kind="warehouse"]#window {
    position: fixed !important;
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    translate: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  #window[data-kind="shop"]#window > .title,
  #window[data-kind="bag"]#window > .title,
  #window[data-kind="warehouse"]#window > .title {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding-inline: 48px !important;
  }

  #window[data-kind="shop"]#window #windowBody,
  #window[data-kind="bag"]#window #windowBody,
  #window[data-kind="warehouse"]#window #windowBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  #window[data-kind="shop"]#window .title #close,
  #window[data-kind="bag"]#window .title #close,
  #window[data-kind="warehouse"]#window .title #close {
    top: 4px !important;
    right: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

#window#window:not([open]),
#window#window[hidden] {
  display: none !important;
}

#window#window#window:not([data-kind]),
#window#window#window:has(> #windowBody:empty) {
  display: none !important;
}

#window#window#window:not([open]),
#window#window#window[hidden] {
  display: none !important;
}
body {
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: -18px;
  z-index: -1;
  background: url("/assets/mapa/fundo-4096x2048.png") center / cover no-repeat;
  filter: brightness(0.7) saturate(0.85);
  pointer-events: none;
}
/* A loja desktop mantém exatamente duas linhas de quatro cartões por página. */
@media (min-width: 701px) {
  #window[data-kind="shop"] .shop-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  #window[data-kind="shop"] .seed-prices:has(> .buy-seed:nth-child(2)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 19px !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  #window[data-kind="shop"] .seed-prices:has(> .buy-seed:nth-child(2)) .buy-seed {
    width: 100% !important;
    height: 19px !important;
    min-height: 19px !important;
    margin: 0 !important;
  }
}

/* Friend list opens as a compact popover anchored below the Amigos shortcut. */
#friendsRail.collapsed {
  display: none !important;
}
#friendsRail.friends-open {
  position: fixed !important;
  inset: var(--friends-popover-top, 74px) var(--friends-popover-right, 8px) auto auto !important;
  z-index: 30 !important;
  display: block !important;
  width: min(352px, calc(100vw - 16px)) !important;
  max-height: min(74dvh, 560px) !important;
  transform: none !important;
  overflow: visible !important;
  color: #344a31;
  filter: drop-shadow(0 7px 18px #17281744);
  animation: friends-popover-enter 180ms ease-out both;
}
#friendsRail.friends-open #friendsRailToggle {
  display: none !important;
}
#friendsRail.friends-open #friendsRailBody {
  display: flex !important;
  width: 100% !important;
  max-height: min(74dvh, 560px) !important;
  padding: 10px;
  overflow: auto;
  border: 1px solid #a5c47e;
  border-radius: 9px;
  background: linear-gradient(145deg, #f5f9e9, #e4efd2);
  box-shadow: inset 0 1px #fff, 0 3px 9px #263d1c22;
}
.friends-popover-heading {
  position: sticky;
  top: -10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin: -10px -10px 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #c7d9ad;
  border-radius: 9px 9px 0 0;
  background: #edf5df;
}
.friends-popover-heading > div {
  display: grid;
  gap: 2px;
}
.friends-popover-heading b {
  color: #395b2c;
  font: bold 16px Georgia, serif;
}
.friends-popover-heading small {
  color: #738767;
  font: 11px Arial, sans-serif;
}
.friends-popover-heading > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #c1d4a8;
  border-radius: 6px;
  background: #fff9;
  color: #587541;
  font: 22px/1 Arial, sans-serif;
}
.friends-popover-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
  padding: 3px;
  border: 1px solid #cfddb9;
  border-radius: 7px;
  background: #dfeacb;
}
.friends-popover-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #60734f;
  font: bold 12px Arial, sans-serif;
}
.friends-popover-tabs button.selected {
  background: #fff;
  color: #426334;
  box-shadow: 0 1px 3px #30402022;
}
.friends-popover-pane {
  min-width: 0;
}
.friends-popover-pane[hidden] {
  display: none !important;
}
.friends-popover-pane h3 {
  margin: 10px 2px 5px;
  color: #657a52;
  font: bold 11px Arial, sans-serif;
}
.friend-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.friend-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #d5e1c4;
  border-radius: 6px;
  background: #fff;
}
.friend-row > img {
  width: 34px;
  height: 34px;
  border: 1px solid #d2dfc3;
  border-radius: 5px;
  object-fit: cover;
}
.friend-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.friend-row > div > b {
  overflow: hidden;
  color: #405536;
  font: bold 12px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row > div > small,
.friend-row > span {
  color: #79866c;
  font: 10px Arial, sans-serif;
}
.friend-row button {
  min-height: 27px;
  padding: 4px 7px;
  border: 1px solid #b8cf9a;
  border-radius: 5px;
  background: #f3f8e9;
  color: #4d7038;
  font: bold 10px Arial, sans-serif;
  white-space: nowrap;
}
.friend-row button:disabled {
  opacity: 0.55;
}
.friends-list-tools {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 7px;
  border: 1px solid #cfddb9;
  border-radius: 7px;
  background: #eaf2dc;
}
.friend-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 34px;
  padding: 2px 3px 2px 9px;
  border: 1px solid #c5d7ae;
  border-radius: 18px;
  background: #fff;
}
.friend-filter input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #405536;
  font: 12px Arial, sans-serif;
}
.friend-filter input::placeholder {
  color: #a2ae95;
}
.friend-filter button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 1px solid #5b9b41;
  border-radius: 50%;
  background: linear-gradient(#8bcf62, #55a83b);
  color: #fff;
  font: 23px/1 Arial, sans-serif;
  text-shadow: 0 1px #397b2e;
}
.friends-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.friends-sort button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 29px;
  padding: 3px 5px;
  border: 1px solid #c9d8b5;
  border-radius: 5px;
  background: #f8faef;
  color: #718064;
  font: bold 10px Arial, sans-serif;
}
.friends-sort button.selected {
  border-color: #9bbd78;
  background: #d9ebc5;
  color: #46653a;
  box-shadow: inset 0 1px #fff;
}
.friends-sort img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.friend-row-ranked {
  grid-template-columns: 25px 34px minmax(0, 1fr) 42px auto;
  gap: 5px;
  min-height: 43px;
  padding: 4px 5px;
  border-color: #d6e1c7;
  background: #fdfefb;
}
.friend-row-ranked:hover,
.friend-row-ranked:focus-within {
  border-color: #9fc978;
  background: #f0f8e8;
}
.friend-row-ranked[hidden] {
  display: none !important;
}
.friend-row-ranked > .friend-row-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #bfd09f;
  border-radius: 50%;
  background: #e8f1d8;
  color: #627c4a;
  font: bold 11px Arial, sans-serif;
  box-shadow: inset 0 1px #fff;
}
.friend-row-ranked:nth-child(1) > .friend-row-rank {
  border-color: #e49a65;
  background: #f38a50;
  color: #fff;
}
.friend-row-ranked:nth-child(2) > .friend-row-rank {
  border-color: #e2c35e;
  background: #e8c840;
  color: #fff;
}
.friend-row-ranked:nth-child(3) > .friend-row-rank {
  border-color: #83b995;
  background: #54ae78;
  color: #fff;
}
.friend-row-ranked > img {
  width: 33px;
  height: 33px;
  border-radius: 4px;
}
.friend-row-ranked > .friend-row-info {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.friend-row-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
  overflow: hidden;
}
.friend-row-nickname {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: #405536;
  font: bold 11px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row-farm {
  grid-column: 1 / -1;
  grid-row: 2;
  overflow: hidden;
  color: #87917d;
  font: 9px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row-copy > .friend-rail-bot {
  grid-column: 2;
  grid-row: 1;
}
.friend-row-copy > .friend-row-vip {
  grid-column: 3;
  grid-row: 1;
}
.friend-row-ranked .friend-row-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1px;
}
.friend-row-stats > span {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 19px;
}
.friend-row-stats > span > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.friend-row-stats > span > b {
  position: relative;
  color: #fff;
  font: bold 8px Arial, sans-serif;
  text-shadow: 0 1px 2px #263d3d;
}
.friend-row-stats > i,
.friend-row-vip {
  padding: 2px 4px;
  border: 1px solid #e4c36c;
  border-radius: 4px;
  background: #fff3c8;
  color: #957121;
  font: bold 8px Arial, sans-serif;
  font-style: normal;
}
.friend-row-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.friend-row-ranked .friend-row-actions button {
  display: grid;
  place-items: center;
  min-width: 25px;
  min-height: 25px;
  padding: 3px 5px;
  border: 1px solid #bed3a3;
  border-radius: 5px;
  background: #f3f8e9;
  color: #527340;
  font: bold 9px Arial, sans-serif;
}
.friend-row-ranked .friend-row-actions .friend-visit-action {
  min-width: 44px;
  background: #e2efd3;
}
.friend-row-ranked .friend-row-actions .friend-icon-action {
  width: 26px;
  padding: 2px;
}
.friend-icon-action img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}
.friend-row-ranked .friend-row-actions .friend-remove-action {
  width: 25px;
  min-width: 25px;
  min-height: 25px;
  padding: 2px;
  border-color: #cbd8bc;
  background: #fff;
  color: #617753;
  font: 16px/1 Arial, sans-serif;
}
.friend-actions-inline {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #a9c28e;
  border-radius: 6px;
  background: #f8fbf1;
  color: #435638;
  font: 12px Arial, sans-serif;
}
.friend-actions-inline > b {
  flex: 1 1 100%;
}
.friend-actions-inline button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #cbd8bc;
  border-radius: 5px;
  background: #fff;
  color: #617753;
  font: bold 11px Arial, sans-serif;
}
.friend-actions-inline .friend-actions-remove {
  border-color: #d7b6a8;
  background: #fff5f0;
  color: #9a503b;
}
.friend-actions-inline .friend-actions-cancel {
  margin-left: auto;
}
.friend-actions-inline form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #526a43;
  font: bold 12px Arial, sans-serif;
}
.friend-actions-dialog form button {
  border: 0;
  background: transparent;
  color: #698259;
  font: 21px/1 Arial, sans-serif;
}
.friend-actions-dialog .friend-actions-remove {
  min-height: 34px;
  border: 1px solid #d7b6a8;
  border-radius: 5px;
  background: #fff5f0;
  color: #9a503b;
  font: bold 11px Arial, sans-serif;
}
.friend-confirm-dialog:not([open]) {
  display: none;
}
.friend-confirm-dialog[open] {
  position: fixed;
  inset: 0;
  display: block;
  width: min(360px, calc(100vw - 32px));
  height: max-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0 15px 14px;
  overflow: auto;
  border: 2px solid #9ebd7c;
  border-radius: 9px;
  background: #f8fbf1;
  color: #435638;
  box-shadow: 0 10px 35px #17281766;
}
.friend-confirm-dialog::backdrop {
  background: #17251688;
}
.friend-confirm-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin: 0 -15px 12px;
  padding: 0 12px;
  border-bottom: 1px solid #d6e2c6;
  background: #eaf2dc;
}
.friend-confirm-dialog h2 {
  margin: 0;
  font: bold 16px Georgia, serif;
}
.friend-confirm-dialog [data-close] {
  border: 0;
  background: transparent;
  color: #698259;
  font: 24px Arial, sans-serif;
}
.friend-confirm-dialog > p {
  margin: 8px 0;
  font: 13px/1.4 Arial, sans-serif;
}
.friend-confirm-dialog > small {
  color: #7a876e;
  font: 11px/1.4 Arial, sans-serif;
}
.friend-confirm-dialog .friend-confirm-status {
  color: #a34937;
}
.friend-confirm-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 12px;
}
.friend-confirm-dialog > footer button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #bdcfa9;
  border-radius: 5px;
  background: #fff;
  color: #526a43;
  font: bold 11px Arial, sans-serif;
}
.friend-confirm-dialog > footer .confirm-remove {
  border-color: #b97158;
  background: #aa654d;
  color: #fff;
}
@media (max-width: 700px) {
  .friend-actions-dialog[open] {
    inset: auto 12px 12px 12px;
    width: auto;
    max-width: none;
  }
}
.friend-list-empty {
  padding: 14px 8px;
  border: 1px dashed #cfddb9;
  border-radius: 6px;
  color: #7a876c;
  font: 12px/1.4 Arial, sans-serif;
  text-align: center;
}
.friend-search {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  color: #536747;
  font: bold 11px Arial, sans-serif;
}
.friend-search > div {
  display: flex;
  gap: 5px;
}
.friend-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #c6d6af;
  border-radius: 5px;
  background: #fff;
  color: #344a31;
  font: 12px Arial, sans-serif;
}
.friend-search button {
  padding: 0 10px;
  border: 1px solid #8fb270;
  border-radius: 5px;
  background: #6e9a4c;
  color: #fff;
  font: bold 11px Arial, sans-serif;
}
@keyframes friends-popover-enter {
  from {
    opacity: 0;
    translate: 0 -6px;
    scale: 0.98;
    transform-origin: top right;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transform-origin: top right;
  }
}

/* Give recipient search and quantity distinct, compact controls. */
#giftWindow {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 24px));
  height: min(590px, calc(100dvh - 32px));
  min-height: min(590px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  border-color: #d9e9c6;
  border-radius: 9px;
  background: #f7faef;
  box-shadow: 0 0 0 2px #80aa45, 0 10px 30px #17281755;
}
#giftWindow:not([open]) {
  display: none;
}
#giftWindow[open] {
  display: flex;
}
#giftWindow .title {
  box-sizing: border-box;
  flex: 0 0 48px;
  height: 48px;
  background: linear-gradient(#f5f9e9, #e6efd5);
  color: #405b32;
}
#giftWindowBody {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 12px;
  overflow: auto;
  background: #fbfcf7;
}
.gift-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 40px;
  gap: 4px;
  margin: 0 0 8px;
}
.gift-tabs button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 7px 12px;
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid #cbdab7;
  border-radius: 5px 5px 0 0;
  background: #e7eddc;
  color: #68765b;
}
.gift-tabs button.selected {
  border-color: #a8c38b;
  background: #fff;
  color: #456237;
}
.gift-flower-grid {
  display: grid;
  flex: 0 0 154px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(2, 72px);
  grid-auto-rows: 72px;
  grid-auto-flow: row;
  align-content: start;
  height: 154px;
  min-height: 154px;
  max-height: 154px;
  overflow: hidden;
  padding: 2px 0;
}
.gift-flower {
  min-height: 70px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.gift-flower-empty {
  visibility: hidden;
}
.gift-flower:hover,
.gift-flower.selected {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gift-flower.selected img {
  filter: drop-shadow(0 2px 3px #6b994b66);
}
.gift-flower.selected span {
  color: #52763b;
  font-weight: bold;
}
.gift-send-form {
  width: min(100%, 560px);
  margin: auto auto 0;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px 12px;
  max-width: 560px;
  padding-top: 5px;
}
.gift-send-heading {
  min-height: 54px;
  gap: 9px;
  border-color: #dce7cf;
  padding: 0 2px 6px;
}
.gift-send-heading > img {
  width: 50px;
  height: 50px;
}
.gift-send-heading p {
  gap: 3px;
}
.gift-send-heading p > b {
  color: #405b32;
}
.gift-send-heading span {
  color: #728067;
}
.gift-send-form .gift-recipient-label,
.gift-send-form .gift-quantity-label {
  gap: 5px;
  color: #536747;
  font-size: 11px;
}
.gift-recipient-control {
  position: relative;
}
.gift-recipient-control > input,
.gift-send-form .gift-quantity-label input {
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #c4d5ae;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: #344a31;
  font: 13px Arial, sans-serif;
  box-shadow: inset 0 1px 2px #263d1c0d;
}
.gift-recipient-control > input:focus,
.gift-send-form .gift-quantity-label input:focus {
  border-color: #79a755;
  box-shadow: 0 0 0 3px #8eb96830;
}
.gift-recipient-control > input {
  padding-right: 34px;
}
.gift-recipient-control > span {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #7b9d5d;
  font: 19px Arial, sans-serif;
  pointer-events: none;
}
.gift-send-form .gift-quantity-label input {
  width: 100%;
}
.gift-send-form footer {
  justify-content: center !important;
  align-items: center;
}
.gift-send-form footer button {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 5px;
}
.gift-send-form #giftMessageStatus {
  min-height: 14px;
}
@media (max-width: 700px) {
  #friendsRail.friends-open {
    width: min(352px, calc(100vw - 16px)) !important;
    max-height: min(72dvh, 520px) !important;
  }
  #friendsRail.friends-open #friendsRailBody {
    max-height: min(72dvh, 520px) !important;
  }
  #giftWindow {
    width: calc(100vw - 16px);
    height: min(78dvh, 620px);
    min-height: min(78dvh, 620px);
    max-height: calc(100dvh - 20px);
  }
  #giftWindowBody {
    max-height: none;
    padding: 9px;
  }
  #giftWindowBody .gift-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 40px !important;
  }
  #giftWindowBody .gift-tabs button {
    box-sizing: border-box;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .gift-send-form {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 7px;
  }
  #giftWindowBody .gift-flower-grid {
    display: grid;
    flex-basis: 122px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(2, 58px);
    grid-auto-rows: 58px;
    height: 122px;
    min-height: 122px;
    max-height: 122px;
    padding: 2px 0;
    overflow: hidden;
  }
  #giftWindowBody .gift-flower {
    min-height: 56px;
    font-size: 9px;
  }
  #giftWindowBody .gift-flower img {
    width: 30px;
    height: 30px;
  }
  .gift-send-form footer {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Compact, left-aligned inventory slots: seven columns and two visible rows. */
#window#window[data-kind="bag"] {
  width: min(700px, calc(100vw - 32px)) !important;
  height: min(215px, calc(100dvh - 120px)) !important;
  min-height: min(215px, calc(100dvh - 120px)) !important;
  max-height: min(260px, calc(100dvh - 120px)) !important;
}
#window#window[data-kind="bag"] #windowBody {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
#window#window[data-kind="bag"] #bagContent {
  min-height: 0 !important;
  overflow: auto !important;
}
#window#window[data-kind="bag"] .bag-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: 66px !important;
  gap: 3px !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: 135px;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  justify-content: start;
}
#window#window[data-kind="bag"] .bag-grid .inventory-icon {
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center;
  width: 100%;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#window#window[data-kind="bag"] .bag-grid .inventory-icon > img {
  width: 56px !important;
  height: 56px !important;
}
#window#window[data-kind="bag"] .bag-grid .inventory-quantity {
  right: 9px;
  bottom: 4px;
  left: auto;
  min-width: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  color: #666;
  font: 12px Arial, sans-serif;
}
#window#window[data-kind="bag"] .bag-grid .bag-empty-slot {
  visibility: hidden;
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 700px), (max-height: 600px) {
  #window#window[data-kind="bag"] {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #window#window[data-kind="bag"] .bag-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: 58px !important;
    gap: 2px !important;
    width: 100%;
    max-height: 118px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #window#window[data-kind="bag"] .bag-grid .inventory-icon {
    width: 100%;
    height: 58px !important;
    min-height: 58px !important;
  }
  #window#window[data-kind="bag"] .bag-grid .inventory-icon > img {
    width: 42px !important;
    height: 42px !important;
  }
  #window#window[data-kind="bag"] .bag-grid .inventory-quantity {
    right: 0;
    bottom: 1px;
    font-size: 10px;
  }
}