/* One edge-to-edge phone shell for every route. Scene art keeps its own proportions. */
body, body[data-screen] {
  --app-width: min(100vw, 520px);
  --farm-width: var(--app-width);
  --tap-width: var(--app-width);
  --reference-width: var(--app-width);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  margin: 0;
  background-color: #f6ebd7;
}

#app {
  --header-height: clamp(54px, 13.67cqw, 71px);
  --help-size: clamp(34px, 8.7cqw, 45px);
  --nav-height: clamp(68px, 19.05cqw, 99px);
  --page-height: calc(100dvh - var(--safe-top) - var(--header-height) - var(--nav-height) - var(--safe-bottom));
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding-top: var(--safe-top);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f6ebd7;
  overflow: clip;
}
#app::after { display: none; }
#app #screen { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#app #screen > :is(.page, .welcome, .auth-page) { flex: 1; min-width: 0; }
#app #screen > :is(.welcome, .auth-page) { min-height: 0; }
#app #screen > .page:not(.world-collection, .world-profile, .clicker-page) { padding-bottom: 24px; }

/* Tall phones gain space between controls, without stretching the chick, eggs
   or wooden panels. The cabinet crops only its decorative outer scenery. */
#app #clicker-root[data-section=tap] {
  --tap-extra: max(0px, calc(var(--page-height) - 147.34cqw));
  width: 100%;
  max-width: 100%;
  min-height: var(--page-height);
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#app #clicker-root[data-section=tap]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 147.34cqw;
  background: url('/assets/living-farm/tap-reference/garden-no-sign.webp') center top / 100% 100% no-repeat;
  mask-image: linear-gradient(#000 calc(100% - 15cqw), transparent);
  pointer-events: none;
}
#app #clicker-root[data-section=tap] .tap-arena { top: 19.82cqw; height: 59.5cqw; }
#app #clicker-root[data-section=tap] .world-energy { top: 76.47cqw; height: 12.37cqw; }
#app #clicker-root[data-section=tap] .world-tap-actions { top: calc(91.5cqw + var(--tap-extra) * .5); height: 19.38cqw; }
#app #clicker-root[data-section=tap] .world-growth { top: calc(112.79cqw + var(--tap-extra)); height: 30.65cqw; }
#app .world-collection[data-collection=eggs] { display: flex; flex-direction: column; align-items: center; overflow: clip; }
#app .reference-egg-cabinet {
  --cabinet-width: min(133.33cqw, max(100cqw, calc(var(--page-height) * 790 / 1164)));
  container-type: inline-size;
  flex: none;
  width: var(--cabinet-width);
  max-width: none;
  background-position: 0 calc(var(--cabinet-width) * .0766), 0 0;
}
#app .world-profile { display: flex; flex-direction: column; justify-content: space-between; background-size: cover; }
#app .world-profile > * { flex-shrink: 0; }

/* Brand, language and help no longer change size when switching tabs. */
#app .language-picker {
  flex: none;
  height: var(--header-height);
  min-height: 0;
  padding: 6px calc(clamp(44px, 13cqw, 68px) + var(--safe-right)) 6px max(3.4cqw, var(--safe-left));
  gap: clamp(5px, 1.4cqw, 8px);
  border-radius: 0;
  background: linear-gradient(115deg, #fff5e4, #f4e6d0);
  box-shadow: inset 0 1px #fff9ed, 0 2px 4px #745a2c40;
}
#app .language-brand { gap: clamp(4px, 1.7cqw, 9px); }
#app .language-brand > img { width: clamp(26px, 8.1cqw, 42px); height: clamp(30px, 9.2cqw, 48px); }
#app .language-brand strong { font-size: clamp(19px, 6.05cqw, 31px); letter-spacing: -.038em; font-weight: 1000; }
#app .language-picker summary {
  height: clamp(32px, 7.9cqw, 41px);
  min-height: 0;
  padding: 3px clamp(5px, 1.5cqw, 8px);
  gap: clamp(4px, 1.5cqw, 8px);
  font-size: clamp(10px, 2.8cqw, 15px);
  border-radius: 11px;
  border-color: #cbb295;
  box-shadow: inset 0 1px #fffaf0;
}
#app .language-picker summary img { width: clamp(17px, 5.2cqw, 27px); height: clamp(13px, 4.1cqw, 21px); }
#app .language-picker summary > span:first-of-type { max-width: clamp(54px, 17cqw, 89px); }
#app .language-options { top: 100%; right: max(12px, var(--safe-right)); }
#app .language-picker + #screen .guide-entry {
  top: calc(var(--safe-top) + (var(--header-height) - var(--help-size)) / 2);
  right: calc(clamp(10px, 3.4cqw, 18px) + var(--safe-right));
}
#app .guide-entry button { width: var(--help-size); height: var(--help-size); min-height: 0; border-radius: 12px; box-shadow: inset 0 1px #fff9ed; }
#app .guide-entry span { width: clamp(20px, 5.2cqw, 27px); height: clamp(20px, 5.2cqw, 27px); font-size: clamp(16px, 4.1cqw, 21px); }

/* In-flow sticky navigation reserves space at the end of long pages and stays
   at the viewport bottom on short pages. Safe-area padding is extra, not taken
   out of the buttons' touch targets. */
#app .bottom-nav {
  --nav-width: 100cqw;
  position: sticky;
  flex: none;
  z-index: 40;
  top: auto;
  bottom: 0;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: none;
  height: calc(var(--nav-height) + var(--safe-bottom));
  min-height: 0;
  margin: 0;
  padding: 4px max(1.4cqw, var(--safe-right)) calc(6px + var(--safe-bottom)) max(1.4cqw, var(--safe-left));
  gap: clamp(2px, 1.2cqw, 6px);
  border: 0;
  border-top: 1px solid #d8c1a1;
  border-radius: 0;
  background: linear-gradient(115deg, #fff6e4, #f3e4cc);
  box-shadow: 0 -1px 6px #6c54271a;
}
#app .bottom-nav .nav-item {
  min-width: 0;
  min-height: 0;
  padding: 3px 0;
  gap: clamp(4px, 1cqw, 5px);
  font-size: clamp(9px, 2.8cqw, 15px);
  letter-spacing: -.02em;
  border-radius: clamp(10px, 3cqw, 16px);
}
#app .bottom-nav .nav-art { width: clamp(27px, 8.2cqw, 43px); height: clamp(27px, 8.2cqw, 43px); }

/* Inner wooden and linen panels retain the reference artwork. Only the outer
   page/dialog frame is square. Mobile dialogs occupy the available viewport. */
#sheet { border: 0; border-image: none; border-radius: 0; width: min(100%, 520px); max-width: 520px; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body, body[data-screen] { --app-width: 100vw; }
  #sheet {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: calc(60px + var(--safe-top)) max(20px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(20px, var(--safe-left));
    overscroll-behavior: contain;
  }
  #sheet .sheet-close {
    position: fixed;
    top: calc(12px + var(--safe-top));
    right: calc(12px + var(--safe-right));
    width: 40px;
    height: 40px;
    background: #fff5e0;
  }
}