/* Small landscape viewports: retain the farm's 16:9 world and make controls fit the phone. */
@media (orientation: landscape) and (max-width: 1000px),
  (orientation: landscape) and (max-height: 600px),
  (orientation: landscape) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  #game {
    width: min(100vw, 177.7778dvh);
    height: min(100dvh, 56.25vw);
    top: 50%;
    margin: 0 auto;
    transform: translateY(-50%);
    overflow: hidden;
  }
  #hud {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    top: max(4px, env(safe-area-inset-top));
    width: auto !important;
    min-height: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
    transform: none !important;
    overflow: visible;
  }
  #hud .classic-profile {
    flex: 0 0 420px;
    width: 420px;
    transform: scale(0.67) !important;
    transform-origin: top left;
    margin: 0 -139px -33px 0 !important;
  }
  #hudActions {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0 0 0 auto;
    padding: 2px;
    gap: 1px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #hudActions::-webkit-scrollbar {
    display: none;
  }
  #hudActions > button,
  #hudActions > a {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 2px 1px;
    border-radius: 5px;
    font:
      700 8px/1 Arial,
      sans-serif;
    white-space: normal;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #hudActions > button img {
    width: 21px;
    height: 21px;
    margin: 0 auto 1px;
  }
  #hudActions #hudCollapse {
    flex-basis: 30px;
    width: 30px;
    min-width: 30px;
    height: 42px;
    min-height: 42px;
    font: 21px/1 Arial;
  }
  #hudActions.collapsed {
    flex: 0 0 34px;
    min-width: 34px;
    overflow: visible;
  }
  #hudActions.collapsed #hudCollapse {
    width: 34px;
    min-width: 34px;
  }
  #mobileMenuToggle {
    position: absolute;
    display: grid;
    place-items: center;
    right: max(5px, env(safe-area-inset-right));
    top: calc(50px + env(safe-area-inset-top));
    z-index: 11;
    width: 42px;
    height: 42px;
    border: 1px solid #d9edb8;
    border-radius: 50%;
    background: #e5f4cbef;
    color: #456b32;
    box-shadow: 0 2px 7px #172b1670;
    font: 700 19px Arial;
    touch-action: manipulation;
  }
  #mobileMenuPanel {
    position: absolute;
    right: max(5px, env(safe-area-inset-right));
    top: calc(98px + env(safe-area-inset-top));
    z-index: 11;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 5px;
    width: min(230px, calc(100vw - 16px));
    padding: 7px;
    border: 1px solid #d3e2b8;
    border-radius: 8px;
    background: #edf5def5;
    box-shadow: 0 4px 14px #182b1870;
    backdrop-filter: none;
  }
  #mobileMenuPanel[hidden] {
    display: none !important;
  }
  #mobileMenuPanel button {
    min-height: 42px;
    padding: 6px;
    border: 1px solid #b6c995;
    border-radius: 6px;
    background: #fbfbe9;
    color: #425b35;
    font: 700 11px Arial;
    touch-action: manipulation;
  }
  #toolbar {
    left: 50%;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: min(540px, calc(100% - 156px));
    height: 62px;
    min-height: 52px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    transform: translateX(-50%) !important;
    transform-origin: bottom center !important;
    border-radius: 10px;
  }
  #toolbar button {
    flex: 1 1 0;
    width: auto;
    min-width: 44px;
    min-height: 48px;
    height: 100%;
    padding: 2px;
    border-radius: 7px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #toolbar img {
    width: min(100%, 38px);
    height: min(100%, 38px);
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
  }
  #cameraControls {
    display: flex !important;
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 8;
    transform: none !important;
    padding: 2px;
  }
  #cameraControls button {
    width: 36px;
    height: 36px;
    min-width: 40px;
    min-height: 40px;
    font-size: 20px;
    touch-action: manipulation;
  }
  #cameraControls #zoomValue {
    width: 52px;
    font-size: 12px;
  }
  #toolHint {
    left: 25%;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 50%;
    font-size: 11px;
  }
  #status {
    top: 50%;
    max-width: min(76%, 520px);
    padding: 6px 14px;
    font-size: 12px;
    transform: translate(-50%, -50%);
  }
  #friendsRail {
    left: max(3px, env(safe-area-inset-left));
    top: 68px;
    max-height: calc(100% - 145px);
  }
  #friendsRailBody {
    max-height: calc(100dvh - 150px);
  }
  #friendsRailList {
    max-height: calc(100dvh - 202px);
  }
  #serverChat {
    left: max(5px, env(safe-area-inset-left));
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 10;
  }
  .server-chat-panel {
    width: min(280px, 42vw);
    height: min(300px, 68dvh);
    min-height: 170px;
  }
  .server-chat-toggle {
    min-width: 70px;
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }
  #visitBanner {
    top: max(5px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    left: auto;
    max-width: 35%;
    padding: 3px 6px;
    transform: none;
    z-index: 9;
  }
  #visitName {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #window {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(92vw, 760px, calc(177.7778dvh - 16px));
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 16px);
    margin: 0;
    transform: translate(-50%, -50%);
    overflow: auto;
  }
  #window .title {
    height: 48px;
    min-height: 48px;
    padding: 7px 48px;
    font-size: 20px;
  }
  #window .title button {
    top: 6px;
    right: 8px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 24px;
    line-height: 1;
  }
  #windowBody {
    height: auto;
    max-height: calc(100dvh - 72px);
    padding: 10px 14px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  #window:has(.shop-grid),
  #window:has(.bag-grid),
  #window:has(#sellAll) {
    width: min(92vw, 760px, calc(177.7778dvh - 16px)) !important;
    height: min(86dvh, 520px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden;
  }
  #window:has(.shop-grid) #windowBody,
  #window:has(.bag-grid) #windowBody,
  #window:has(#sellAll) #windowBody {
    height: calc(100% - 48px) !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
  #window .tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  #window .tabs button {
    min-height: 40px;
    touch-action: manipulation;
  }
  #window .friend-row button,
  #window .friend-search button,
  #window .classic-button {
    min-height: 40px;
    touch-action: manipulation;
  }
  #purchaseBox {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 16px);
    overflow: auto;
  }
  #tooltip {
    max-width: min(300px, calc(100vw - 20px));
    font-size: 12px;
  }
  .mail-reward-dialog {
    max-height: calc(100dvh - 20px);
  }
  .mail-reward-header button {
    min-width: 38px;
    min-height: 38px;
    touch-action: manipulation;
  }
  .mail-reward-frame #mailRewardClaim {
    min-height: 38px;
    min-width: 58px;
    touch-action: manipulation;
  }
  .auth-screen {
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
  }
  .auth-card {
    width: min(420px, 92vw);
    max-height: calc(100dvh - 16px);
    overflow: auto;
    padding: 12px 20px;
    border-width: 3px;
    border-radius: 12px;
  }
  .auth-logo {
    font-size: 27px;
    margin-bottom: 8px;
  }
  .auth-card h2 {
    font-size: 17px;
    margin: 8px 0;
  }
  .auth-tabs button {
    min-height: 38px;
    padding: 6px 9px;
    font-size: 14px;
  }
  .auth-card label {
    margin: 7px 0 3px;
    font-size: 12px;
  }
  .auth-card input {
    padding: 8px;
    font-size: 14px;
  }
  .auth-card .classic-button {
    min-height: 40px;
    padding: 8px;
    font-size: 14px;
  }
  #rotatePrompt {
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}

@media (orientation: landscape) and (max-width: 740px),
  (orientation: landscape) and (max-height: 430px) {
  #hud .classic-profile {
    flex-basis: 420px;
    transform: scale(0.58) !important;
    margin-right: -176px !important;
    margin-bottom: -42px !important;
  }
  #hudActions > button,
  #hudActions > a {
    flex-basis: 37px;
    width: 37px;
    min-width: 37px;
  }
  #hudActions #hudCollapse {
    flex-basis: 28px;
    width: 28px;
    min-width: 28px;
  }
  #toolbar {
    width: min(490px, calc(100% - 136px));
    height: 56px;
    min-height: 48px;
  }
  #toolbar button {
    min-width: 42px;
    min-height: 44px;
  }
  #cameraControls {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
  #toolHint {
    bottom: calc(63px + env(safe-area-inset-bottom));
    font-size: 10px;
  }
  #friendsRailBody {
    width: min(190px, 34vw);
  }
  .server-chat-panel {
    width: min(250px, 45vw);
    height: min(255px, 66dvh);
    min-height: 150px;
  }
  #window:has(.shop-grid),
  #window:has(.bag-grid),
  #window:has(#sellAll) {
    width: min(92vw, 760px, calc(177.7778dvh - 16px)) !important;
    height: min(88dvh, 470px) !important;
  }
  .auth-card {
    padding: 8px 16px;
  }
  .auth-logo {
    font-size: 23px;
    margin-bottom: 5px;
  }
  .auth-card h2 {
    margin: 5px 0;
    font-size: 15px;
  }
  .auth-card small {
    margin-top: 6px;
    font-size: 10px;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  #game > *:not(#rotatePrompt) {
    visibility: visible !important;
  }
  #authScreen {
    visibility: visible !important;
  }
  #game {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    top: 0;
    margin: 0;
    transform: none;
    overflow: hidden;
  }
  #farm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #243e16;
    touch-action: none;
  }
  #hud {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    top: max(4px, env(safe-area-inset-top));
    align-items: flex-start;
    gap: 4px;
    overflow: visible;
  }
  #hud .classic-profile {
    flex: 0 0 260px;
    width: 260px;
    transform: scale(0.66) !important;
    transform-origin: top left;
    margin: 0 -88px -30px 0 !important;
  }
  #hudActions {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0 0 0 auto;
    padding: 2px;
    gap: 2px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #hudActions::-webkit-scrollbar {
    display: none;
  }
  #hudActions > button,
  #hudActions > a {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 2px 1px;
    border-radius: 5px;
    font:
      700 8px/1 Arial,
      sans-serif;
    white-space: normal;
    touch-action: manipulation;
  }
  #hudActions > button img {
    width: 21px;
    height: 21px;
    margin: 0 auto 1px;
  }
  #hudActions #hudCollapse {
    flex-basis: 30px;
    width: 30px;
    min-width: 30px;
    height: 42px;
    min-height: 42px;
    font: 21px/1 Arial;
  }
  #hudActions.collapsed {
    flex: 0 0 34px;
    min-width: 34px;
    overflow: visible;
  }
  #toolbar {
    left: 50%;
    bottom: max(7px, env(safe-area-inset-bottom));
    width: min(620px, calc(100% - 12px));
    height: 62px;
    min-height: 54px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    transform: translateX(-50%) !important;
    transform-origin: bottom center !important;
    border-radius: 10px;
    z-index: 9;
  }
  #toolbar button {
    flex: 1 1 0;
    width: auto;
    min-width: 40px;
    min-height: 48px;
    height: 100%;
    padding: 2px;
    border-radius: 7px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #toolbar img {
    width: min(100%, 38px);
    height: min(100%, 38px);
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
  }
  #cameraControls {
    display: flex !important;
    right: max(6px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 9;
    transform: none !important;
    padding: 2px;
  }
  #cameraControls button {
    width: 38px;
    height: 38px;
    min-width: 40px;
    min-height: 40px;
    font-size: 20px;
    touch-action: manipulation;
  }
  #cameraControls #zoomValue {
    width: 48px;
    font-size: 11px;
  }
  #toolHint {
    left: 4%;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 70%;
    font-size: 11px;
    text-align: left;
  }
  #status {
    top: 50%;
    max-width: 84%;
    padding: 6px 12px;
    font-size: 12px;
    transform: translate(-50%, -50%);
  }
  #friendsRail {
    left: max(3px, env(safe-area-inset-left));
    top: 55px;
    max-height: calc(100% - 145px);
  }
  #friendsRailBody {
    max-height: calc(100dvh - 160px);
    width: min(190px, 58vw);
  }
  #friendsRailList {
    max-height: calc(100dvh - 215px);
  }
  #serverChat {
    left: max(5px, env(safe-area-inset-left));
    bottom: max(7px, env(safe-area-inset-bottom));
    z-index: 10;
  }
  .server-chat-panel {
    width: min(300px, 82vw);
    height: min(340px, 56dvh);
    min-height: 170px;
  }
  .server-chat-toggle {
    min-width: 66px;
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }
  #visitBanner {
    top: max(5px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    left: auto;
    max-width: 45%;
    padding: 3px 6px;
    transform: none;
    z-index: 9;
  }
  #window {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(94vw, 620px);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 20px);
    margin: 0;
    transform: translate(-50%, -50%);
    overflow: auto;
  }
  #window .title {
    height: 46px;
    min-height: 46px;
    padding: 7px 45px;
    font-size: 19px;
  }
  #window .title button {
    top: 5px;
    right: 7px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 24px;
    line-height: 1;
  }
  #windowBody {
    height: auto;
    max-height: calc(100dvh - 68px);
    padding: 9px 10px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  #window:has(.shop-grid),
  #window:has(.bag-grid),
  #window:has(#sellAll) {
    width: 96vw !important;
    height: min(76dvh, 620px) !important;
    min-height: min(330px, 76dvh) !important;
    max-height: 76dvh !important;
    overflow: hidden;
  }
  #window:has(.shop-grid) #windowBody,
  #window:has(.bag-grid) #windowBody,
  #window:has(#sellAll) #windowBody {
    height: calc(100% - 46px) !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
  #window .tabs {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  #window .tabs button,
  #window .friend-row button,
  #window .friend-search button,
  #window .classic-button {
    min-height: 42px;
    touch-action: manipulation;
  }
  #purchaseBox {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 18px);
    overflow: auto;
  }
  #tooltip {
    max-width: min(290px, calc(100vw - 16px));
    font-size: 12px;
  }
  .mail-reward-dialog {
    max-height: calc(100dvh - 20px);
  }
  .mail-reward-header button,
  .mail-reward-frame #mailRewardClaim {
    min-height: 42px;
    min-width: 54px;
    touch-action: manipulation;
  }
  .auth-screen {
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
  }
  .auth-card {
    width: min(420px, 92vw);
    max-height: calc(100dvh - 16px);
    overflow: auto;
    padding: 12px 20px;
    border-width: 3px;
    border-radius: 12px;
  }
  .auth-logo {
    font-size: 27px;
    margin-bottom: 8px;
  }
  .auth-card h2 {
    font-size: 17px;
    margin: 8px 0;
  }
  .auth-tabs button {
    min-height: 42px;
    padding: 6px 9px;
    font-size: 14px;
  }
  .auth-card label {
    margin: 7px 0 3px;
    font-size: 12px;
  }
  .auth-card input {
    padding: 10px;
    font-size: 16px;
  }
  .auth-card .classic-button {
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
  }
  #helpOpen {
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 8;
  }
  #mobileMenuToggle {
    top: calc(54px + env(safe-area-inset-top));
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  #mobileMenuPanel {
    top: calc(104px + env(safe-area-inset-top));
    width: min(250px, calc(100vw - 20px));
    padding: 8px;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    border-radius: 9px;
  }
  #mobileMenuPanel button {
    min-height: 46px;
    padding: 7px;
    font-size: 12px;
  }
  #mobileMenuPanel button:active,
  #toolbar button:active,
  #cameraControls button:active {
    filter: brightness(0.92);
    transform: scale(0.96);
  }
  #friendsRail.collapsed #friendsRailToggle {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  #friendsRail:not(.collapsed) {
    top: 58px;
    max-height: calc(100dvh - 180px);
  }
  #serverChat:not(.collapsed) .server-chat-panel {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(48px + env(safe-area-inset-bottom));
    width: auto;
    height: min(48dvh, 390px);
    max-height: calc(100dvh - 120px);
  }
  #serverChat:not(.collapsed) .server-chat-form input {
    min-height: 44px;
    font-size: 16px;
  }
  dialog {
    overscroll-behavior: contain;
  }
  #window:has(input:focus),
  #window:has(textarea:focus) {
    top: max(8px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    max-height: calc(100dvh - 16px);
  }
  .auth-card input,
  #serverChatInput,
  #friendQuery,
  #giftQuantity,
  #editName {
    font-size: 16px !important;
  }
}

@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
  html.mobile-device #game > *:not(#rotatePrompt) {
    visibility: visible !important;
  }
  html.mobile-device #authScreen {
    visibility: visible !important;
  }
  html.mobile-device #game {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    top: 0;
    margin: 0;
    transform: none;
  }
  html.mobile-device #farm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #243e16;
  }
  html.mobile-device #hud {
    left: 8px;
    right: 8px;
    top: max(8px, env(safe-area-inset-top));
  }
  html.mobile-device #hud .classic-profile {
    transform: scale(0.82) !important;
    margin-right: -48px !important;
  }
  html.mobile-device #toolbar {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(620px, calc(100% - 24px));
    height: 68px;
    min-height: 60px;
  }
  html.mobile-device #toolbar button {
    min-width: 54px;
    min-height: 56px;
  }
  html.mobile-device #cameraControls {
    display: flex !important;
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
  html.mobile-device #window {
    width: min(92vw, 700px);
    max-height: calc(100dvh - 24px);
  }
}

@media (hover: none) {
  #toolbar button:hover,
  #hudActions > button:hover,
  #hudActions > a:hover,
  #cameraControls button:hover {
    filter: none;
    transform: none;
  }
  #window .seed:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #game *,
  #rotatePrompt * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}