@media (max-width: 700px) {
  #hud {
    left: 1%;
    right: 1%;
    gap: 4px;
    transform: scale(0.68);
    transform-origin: top left;
    width: 146%;
  }
  #hudActions {
    gap: 1px;
  }
  #hudActions > button,
  #hudActions > a {
    min-width: 38px;
    min-height: 38px;
    padding: 4px;
    font-size: 10px;
  }
  #hudActions > button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  #cameraControls button {
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
    touch-action: manipulation;
  }
  #friendsRail.collapsed #friendsRailToggle {
    min-height: 34px;
    width: 34px;
    height: 34px;
    touch-action: manipulation;
  }
  #toolbar button {
    touch-action: manipulation;
  }
}

/* Compact mobile bag, fixed single-row HUD and mobile-only installation. */
#hudActions {
  flex-wrap: nowrap;
  max-width: none;
  min-width: 0;
  white-space: nowrap;
  align-items: center;
}
#hudActions > button,
#hudActions > a {
  flex: none;
  white-space: nowrap;
}
#hudActions #hudCollapse {
  display: grid;
  place-items: center;
  width: 25px;
  min-width: 25px;
  height: 34px;
  padding: 0;
  font: 22px/1 Arial;
  transform: rotate(0deg);
}
#hudActions.collapsed > *:not(#hudCollapse) {
  display: none;
}
#hudActions.collapsed {
  min-width: 30px;
}
#installApp {
  display: none;
}
html.mobile-device #installApp:not([hidden]) {
  display: block;
}
#window[data-kind="shop"],
#window[data-kind="bag"],
#window[data-kind="warehouse"] {
  width: min(760px, 94vw);
  height: min(500px, 76dvh);
  min-height: min(360px, 76dvh);
  max-height: 76dvh;
}
#window[data-kind="shop"] #windowBody,
#window[data-kind="bag"] #windowBody,
#window[data-kind="warehouse"] #windowBody {
  height: calc(100% - 58px);
  max-height: none;
  min-height: 0;
  overflow: hidden;
}
#window[data-kind="bag"] #windowBody,
#window[data-kind="warehouse"] #windowBody {
  flex: 1;
  min-height: 0;
}
#window[data-kind="bag"] {
  height: min(500px, 76dvh);
  min-height: min(360px, 76dvh);
}
#window[data-kind="bag"] #windowBody {
  height: calc(100% - 58px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 16px;
}
#window[data-kind="bag"] .window-intro {
  display: none;
}
#window .bag-tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 9px;
  border-bottom: 1px solid #dce0cc;
  flex: none;
}
#window .bag-tabs button {
  border: 1px solid #d4dbc1;
  background: #eef0e1;
  border-radius: 7px;
  padding: 7px 13px;
  color: #64764b;
  font: bold 11px Arial;
}
#window .bag-tabs button.selected {
  background: #718f4c;
  color: #fffbe8;
  border-color: #627e40;
}
#window #bagContent {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#window #bagContent > h3 {
  font-size: 13px;
  margin: 8px 0;
}
#window .bag-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 4px;
  align-content: start;
}
#window .bag-grid .item {
  min-width: 0;
  min-height: 126px;
  padding: 8px 7px;
  border-radius: 8px;
}
#window .bag-grid .item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
#window .bag-grid .item p {
  font: bold 10px/1.25 Arial;
  margin: 5px 0;
  overflow-wrap: anywhere;
}
#window .bag-grid .item small {
  font: 9px/1.2 Arial;
  color: #7b8867;
}
#window .bag-grid .item button {
  margin: 3px auto 0;
  padding: 5px 9px;
  font-size: 10px;
}
#window .bag-grid .feed-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
}
#window .dog-protection {
  margin: 7px 0;
  padding: 7px 8px;
  background: #eff2e2;
  border: 1px solid #dce2ca;
  border-radius: 7px;
}
#window .dog-protection-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: bold 10px Arial;
  color: #64774a;
}
#window .bone-stock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.bone-stock img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
#window .protection-track {
  height: 7px;
  margin: 5px 0 3px;
  border-radius: 8px;
  background: linear-gradient(90deg, #c65e4f, #dec858 52%, #78a85a);
  overflow: hidden;
}
#window .protection-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #69a851;
  box-shadow: 0 0 4px #fff9;
  transition: width 0.25s;
}
#window .dog-protection > small {
  font: 9px Arial;
  color: #788565;
}
#window .dog-history {
  margin-top: 8px;
}
#window .dog-history h3 {
  font-size: 13px !important;
  margin: 8px 0 !important;
}
#window .history-visit {
  display: inline-block !important;
  font: 9px Arial !important;
  padding: 3px 5px !important;
  margin: 2px !important;
}
.window-toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 9px 13px;
  border: 1px solid #d0dba9;
  border-radius: 8px;
  background: #344a2eef;
  color: #fffde8;
  font: 12px/1.4 Arial;
  text-align: center;
  box-shadow: 0 4px 18px #1d301b55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.window-toast.visible {
  opacity: 1;
}
@media (max-width: 700px) {
  #window[data-kind="shop"],
  #window[data-kind="bag"],
  #window[data-kind="warehouse"] {
    width: 96vw;
    height: min(500px, 76dvh);
    min-height: min(360px, 76dvh);
    max-height: 76dvh;
  }
  #window[data-kind="bag"] #windowBody {
    padding: 8px;
  }
  #window[data-kind="warehouse"] #windowBody {
    overflow: auto;
  }
  #window .bag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #window .bag-grid .item {
    min-height: 108px;
    padding: 5px;
  }
  #window .bag-grid .item img {
    width: 42px;
    height: 42px;
  }
  #window .bag-grid .item p {
    font-size: 9px;
  }
  #window .bag-tabs button {
    flex: 1;
    padding: 7px 4px;
  }
  #hudActions #hudCollapse {
    width: 22px;
    min-width: 22px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  #window {
    width: min(94vw, 900px);
    max-height: 88dvh;
  }
  #window .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(92px, 1fr));
    grid-auto-rows: 92px;
    gap: 4px;
  }
  #window .seed {
    padding: 4px 3px;
  }
  #window .seed > img {
    height: 39px;
    width: 50px;
  }
  #window .seed > b {
    font-size: 9px;
    line-height: 1.1;
    margin: 1px 0;
  }
  #window .seed small {
    font-size: 7px;
    line-height: 1.1;
  }
  #window .seed-prices {
    height: 29px;
    gap: 2px;
  }
  #window .seed .buy-seed {
    height: 29px;
    min-height: 29px;
    padding: 2px 1px;
    gap: 0;
  }
  #window .seed .buy-seed img {
    width: 11px;
    height: 11px;
  }
  #window .seed .buy-seed span {
    font-size: 6px;
  }
  #window .seed .buy-seed strong {
    font-size: 8px;
  }
  #window .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  #window .tabs button {
    flex: none;
    min-height: 34px;
    padding: 6px 9px;
  }
  .shop-footer button {
    width: 38px;
    height: 34px;
  }
  #toolbar button {
    min-width: 46px;
    min-height: 46px;
    touch-action: manipulation;
  }
  #hudActions > button,
  #hudActions > a {
    min-height: 36px;
  }
}
#fullscreenToggle svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: auto;
}
#window[data-kind="shop"] {
  height: min(650px, 86dvh);
  min-height: min(500px, 86dvh);
}
#window[data-kind="shop"] #windowBody {
  height: calc(100% - 58px);
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#window[data-kind="shop"] .shop-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid #d6dac5;
}
#window[data-kind="shop"] .shop-intro .tabs {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}
#window[data-kind="shop"] .shop-intro .window-wallet {
  flex: none;
  margin: 0;
}
#window[data-kind="shop"] .shop-grid {
  flex: 1;
  min-height: 0;
  height: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden;
}
#window[data-kind="shop"] .seed {
  min-height: 0;
  padding: 6px 6px 5px;
}
#window[data-kind="shop"] .seed > img {
  height: 52px;
  width: 72px;
}
#window[data-kind="shop"] .seed > b {
  font-size: 12px;
  line-height: 1.15;
  margin: 3px 0;
  max-height: 2.3em;
}
#window[data-kind="shop"] .seed small {
  font-size: 9px;
  line-height: 1.25;
}
#window[data-kind="shop"] .seed-prices {
  height: 30px;
  flex: none;
  gap: 3px;
  margin-top: auto;
}
#window[data-kind="shop"] .seed .buy-seed {
  display: flex;
  flex: 1 1 0;
  width: auto;
  height: 30px;
  min-height: 30px;
  padding: 2px 5px;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  border-radius: 6px;
}
#window[data-kind="shop"] .seed .buy-seed img {
  width: 15px;
  height: 15px;
  flex: none;
}
#window[data-kind="shop"] .seed .buy-seed span,
#window[data-kind="shop"] .seed .buy-seed strong {
  font: 700 10px/1 Arial;
  white-space: nowrap;
}
#window[data-kind="shop"] .shop-footer {
  flex: none;
  min-height: 34px;
  padding-top: 7px;
}
#window[data-kind="other"][data-animal] {
  inset: auto;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(540px, 92vw);
  height: fit-content;
  min-height: 0;
  max-height: 78dvh;
}
#window[data-kind="other"][data-animal] #windowBody {
  height: auto;
  max-height: calc(78dvh - 58px);
  padding: 11px 15px;
  overflow: auto;
}
#window[data-kind="other"][data-animal] .window-intro {
  margin-bottom: 7px;
  padding-bottom: 7px;
}
#window[data-kind="other"][data-animal] .animal-profile {
  gap: 12px;
  padding: 8px;
  border-radius: 9px;
}
#window[data-kind="other"][data-animal] .animal-profile > img {
  width: 84px;
  height: 84px;
}
#window[data-kind="other"][data-animal] .animal-profile h3 {
  font-size: 15px !important;
  margin: 2px 0 5px !important;
}
#window[data-kind="other"][data-animal] .animal-profile p {
  font-size: 10px;
  line-height: 1.35;
  margin: 4px 0;
}
#window[data-kind="other"][data-animal] .animal-profile small {
  font-size: 9px;
}
#window[data-kind="other"][data-animal] .animal-actions {
  margin: 7px 0 0;
}
#window[data-kind="other"][data-animal] #dogBone {
  margin: 7px auto;
  padding: 6px 10px;
  font-size: 10px;
}
#window[data-kind="other"][data-animal] .gift-list {
  margin: 5px 0 0;
}
#window[data-kind="other"][data-animal] .gift-list li {
  padding: 4px 7px;
  font-size: 9px;
}
.purchase-summary small {
  display: flex;
  align-items: center;
  gap: 5px;
}
#purchaseBox .purchase-heading {
  margin-bottom: 12px;
}
#purchaseBox .purchase-summary {
  padding: 10px;
  margin-top: 10px;
  gap: 5px;
}
#purchaseBox .purchase-actions {
  margin-top: 12px;
}
#purchaseBox .purchase-actions button {
  min-width: 104px;
}
.feed-items .feed-item {
  width: 100%;
  min-width: 0;
  cursor: grab;
  text-align: center;
}
.feed-items .feed-item:active {
  cursor: grabbing;
}
.feed-items .feed-item img {
  width: 52px;
  height: 52px;
}
.feed-items .feed-item p {
  font-size: 12px;
}
.feed-items .feed-item small {
  font-size: 9px;
  color: #778563;
}
@media (max-width: 700px) {
  #window[data-kind="shop"] {
    height: 86dvh;
    min-height: 0;
    width: 96vw;
  }
  #window[data-kind="shop"] #windowBody {
    height: calc(100% - 58px);
    padding: 10px 9px;
  }
  #window[data-kind="shop"] .shop-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 7px;
    margin-bottom: 7px;
  }
  #window[data-kind="shop"] .shop-intro .tabs {
    width: 100%;
    flex: none;
    overflow-x: auto;
  }
  #window[data-kind="shop"] .shop-intro .window-wallet {
    align-self: flex-end;
  }
  #window[data-kind="shop"] .shop-grid {
    gap: 4px;
  }
  #window[data-kind="shop"] .seed {
    padding: 4px 3px;
  }
  #window[data-kind="shop"] .seed > img {
    width: 38px;
    height: 26px;
  }
  #window[data-kind="shop"] .seed > b {
    font-size: 8px;
    line-height: 9px;
    margin: 1px 0;
    max-height: 18px;
  }
  #window[data-kind="shop"] .seed small {
    display: none;
  }
  #window[data-kind="shop"] .seed-prices {
    height: 24px;
    gap: 2px;
  }
  #window[data-kind="shop"] .seed .buy-seed {
    height: 24px;
    min-height: 24px;
    padding: 1px 2px;
    gap: 2px;
  }
  #window[data-kind="shop"] .seed .buy-seed img {
    width: 11px;
    height: 11px;
  }
  #window[data-kind="shop"] .seed .buy-seed span,
  #window[data-kind="shop"] .seed .buy-seed strong {
    font-size: 7px;
  }
  #window[data-kind="other"][data-animal] {
    width: 92vw;
    max-height: 82dvh;
  }
  #window[data-kind="other"][data-animal] #windowBody {
    max-height: calc(82dvh - 58px);
    padding: 9px;
  }
  #window[data-kind="other"][data-animal] .animal-profile > img {
    width: 66px;
    height: 70px;
  }
  #window[data-kind="other"][data-animal] .animal-profile h3 {
    font-size: 12px !important;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  #window[data-kind="shop"] {
    height: 76dvh;
    min-height: 0;
    max-height: 76dvh;
  }
  #window[data-kind="shop"] #windowBody {
    height: calc(100% - 58px);
  }
  #window[data-kind="shop"] .shop-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  #window[data-kind="shop"] .seed {
    padding: 5px 5px 4px;
  }
  #window[data-kind="shop"] .seed > img {
    height: 30px;
    width: 48px;
  }
  #window[data-kind="shop"] .seed > b {
    font-size: 10px;
    line-height: 1.1;
    margin: 2px 0;
    max-height: 2.2em;
    flex: none;
  }
  #window[data-kind="shop"] .seed small {
    display: none;
  }
  #window[data-kind="shop"] .seed-prices {
    height: 27px;
  }
  #window[data-kind="shop"] .seed .buy-seed {
    height: 27px;
    min-height: 27px;
    padding: 1px 2px;
  }
  #window[data-kind="shop"] .seed .buy-seed img {
    width: 12px;
    height: 12px;
  }
  #window[data-kind="shop"] .seed .buy-seed span,
  #window[data-kind="shop"] .seed .buy-seed strong {
    font-size: 8px;
  }
}

/* Keep the three main storage/catalog windows aligned after responsive overrides. */
#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(760px, 94vw) !important;
  height: fit-content !important;
  min-height: 0 !important;
  max-height: 76dvh !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(76dvh - 58px) !important;
  overflow: auto !important;
}
#window[data-kind="shop"] .shop-grid,
#window:has(.shop-grid) .shop-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(120px, auto)) !important;
  grid-auto-rows: minmax(120px, auto) !important;
  flex: none !important;
  overflow: visible !important;
}
@media (max-width: 700px) {
  #window[data-kind="shop"],
  #window:has(.shop-grid),
  #window[data-kind="bag"],
  #window:has(.bag-tabs),
  #window[data-kind="warehouse"],
  #window:has(#sellAll) {
    width: 96vw !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: 76dvh !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(76dvh - 58px) !important;
  }
}