/* Everfield world, farming and production screens. */

.world-screen-r2,
.world-screen-r2 * {
  box-sizing: border-box;
}

.world-screen-r2 {
  align-items: center;
  padding: clamp(3px, 1vw, 8px);
}

.world-screen-r2 .world-card-r2 {
  width: min(96vw, 1120px);
  height: min(100%, 730px);
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: clamp(7px, 1.2vw, 12px);
}

.world-topbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.world-topbar > div:first-child {
  min-width: 0;
}

.world-topbar .scene-title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1;
}

.world-topbar .scene-subtitle {
  margin: 2px 0 0;
  font-size: clamp(.65rem, 1.1vw, .8rem);
  line-height: 1.15;
}

.world-kpis {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(66px, auto);
  gap: 5px;
}

.world-kpis span {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 4px 7px;
  border: 1px solid rgba(111, 65, 35, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .48);
}

.world-kpis small {
  font-size: .55rem;
  font-weight: 800;
  opacity: .62;
}

.world-kpis strong {
  font-size: .74rem;
  line-height: 1;
}

.world-main-tabs {
  margin: 0;
  gap: 5px;
}

.world-main-tabs .screen-tab {
  min-height: 36px;
  padding: 4px 8px;
  font-size: .75rem;
}

.world-main-tabs .screen-tab small {
  font-size: .58rem;
}

.world-main-tabs .screen-tab-refresh {
  max-width: 42px;
}

.world-context-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid rgba(111, 65, 35, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .44);
  font-size: .63rem;
  font-weight: 750;
  line-height: 1.2;
  color: rgba(67, 45, 29, .8);
}

.world-stage,
.production-workspace {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.world-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.world-focus-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.field-focus-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-purchase-tab {
  border-style: dashed;
  background: rgba(244, 239, 220, .78);
}

.field-purchase-tab.is-locked {
  opacity: .62;
  cursor: default;
}

.field-purchase-icon {
  width: 34px;
  height: 34px;
  display: grid !important;
  place-items: center;
  overflow: visible !important;
  border-radius: 50%;
  background: rgba(92, 139, 67, .14);
  color: #507238;
  font-size: 1.25rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.world-focus-tab {
  position: relative;
  min-width: 0;
  min-height: 43px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(111, 65, 35, .22);
  border-radius: 11px;
  background: rgba(255, 255, 255, .62);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.world-focus-tab img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.world-focus-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 900;
}

.world-focus-tab small {
  display: block;
  font-size: .54rem;
  font-weight: 800;
  opacity: .65;
}

.world-focus-tab > b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #5e963f;
  color: #fff;
  font-size: .6rem;
}

.world-focus-tab.is-active {
  border-color: #c39239;
  background: rgba(255, 246, 210, .96);
  box-shadow: inset 0 0 0 1px rgba(195, 146, 57, .16);
}

.world-focus-tab.has-ready:not(.is-active) {
  border-color: rgba(84, 145, 59, .48);
  background: rgba(239, 250, 229, .92);
}

.world-focus-tab.has-ready > b {
  background: #5e963f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}

.production-locked-panel {
  display: grid;
  place-items: center;
  padding: 12px;
}

.production-unlock-message {
  width: min(100%, 420px);
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(179, 126, 50, .24);
  background: rgba(255, 248, 224, .8);
}

.production-unlock-message h3,
.production-unlock-message p { margin: 0; }
.production-unlock-message p { font-size: .7rem; line-height: 1.25; }
.production-unlock-message .ef-button { width: min(180px, 100%); }

.world-focus-tab.is-busy::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d38d2f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}

.field-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(240px, .78fr);
  gap: 7px;
  overflow: hidden;
}

.field-plot-panel,
.field-plan-panel,
.building-workspace,
.production-building-card,
.production-recipes {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(111, 65, 35, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 2px 7px rgba(79, 50, 27, .05);
}

.field-plot-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: 8px;
}

.field-focus-head,
.field-plan-title,
.production-recipe-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.field-focus-head h3,
.field-plan-title h3,
.production-recipe-head h3,
.building-info h3,
.production-building-copy h3,
.recipe-detail h3 {
  margin: 0;
  font-size: .96rem;
  line-height: 1.05;
}

.field-focus-head p,
.field-identity-note,
.building-info p,
.production-building-copy p {
  margin: 2px 0 0;
  font-size: .63rem;
  line-height: 1.22;
  color: rgba(66, 45, 30, .73);
}

.eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #99633b;
}

.field-ready-kpi {
  flex: 0 0 auto;
  min-width: 56px;
  display: grid;
  place-items: center;
  padding: 4px 7px;
  border-radius: 10px;
  background: rgba(87, 145, 63, .12);
  color: #486d34;
}

.field-ready-kpi strong {
  font-size: 1.05rem;
  line-height: 1;
}

.field-ready-kpi small {
  font-size: .52rem;
  font-weight: 800;
}

.farm-grid {
  width: min(100%, 40dvh, 360px);
  max-height: 100%;
  aspect-ratio: 1 / 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, .8vw, 7px);
  padding: 6px;
  border: 2px solid rgba(106, 72, 39, .26);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .02)),
    #8a633d;
  box-shadow: inset 0 0 18px rgba(65, 37, 18, .18);
}

.farm-plot {
  --growth: 10%;
  position: relative;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(75, 46, 25, .4);
  border-radius: 10px;
  background: #7e5938;
  color: #fff;
  padding: 0;
  cursor: pointer;
  isolation: isolate;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.farm-plot:disabled {
  opacity: 1;
  cursor: default;
}

.farm-soil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(12deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 8px),
    linear-gradient(#9b7149, #6c482d);
}

.farm-plot::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--growth);
  background: linear-gradient(rgba(126, 178, 75, .18), rgba(75, 129, 48, .36));
  transition: height .6s linear;
}

.farm-growth {
  position: absolute;
  inset: 13% 10% 18%;
  display: grid;
  place-items: center;
  transform: scale(var(--growth-scale, .6));
  transform-origin: center bottom;
  transition: transform .5s linear, filter .2s ease;
}

.farm-growth img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.82) brightness(.9);
}

.farm-plot.is-ready {
  border-color: #dfbe51;
  box-shadow: 0 0 0 2px rgba(255, 223, 98, .2), inset 0 0 16px rgba(238, 216, 80, .16);
  animation: world-ready-pulse 1.8s ease-in-out infinite;
}

.farm-plot.is-ready .farm-growth {
  transform: scale(1);
}

.farm-plot.is-ready .farm-growth img {
  filter: saturate(1.13) brightness(1.07);
}

.farm-plot.is-empty .farm-growth {
  opacity: .18;
  transform: scale(.42);
}

.farm-plot.is-empty::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: rgba(255, 241, 190, .85);
}

.farm-plot.is-pressed {
  transform: scale(.94);
}

.farm-plot-number,
.farm-plot-state {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: rgba(45, 31, 22, .66);
  color: #fff;
  font-weight: 900;
  line-height: 1;
}

.farm-plot-number {
  top: 4px;
  left: 4px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  font-size: .48rem;
}

.farm-plot-state {
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 5px;
  font-size: .48rem;
}

.farm-plot.is-ready .farm-plot-state {
  background: rgba(76, 128, 49, .93);
}

.crop-grid-carrots .farm-plot:nth-child(2n) .farm-growth,
.crop-grid-carrots .farm-plot:nth-child(2n + 1) .farm-growth {
  transform-origin: center 78%;
}

.crop-grid-strawberries .farm-plot:nth-child(3n) .farm-soil {
  filter: brightness(1.06);
}

.crop-grid-tomatoes .farm-plot .farm-growth {
  inset: 8% 6% 18%;
}

.world-harvest-burst {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 48%;
  max-width: 90%;
  transform: translate(-50%, -50%);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(69, 111, 45, .94);
  color: #fff;
  box-shadow: 0 5px 15px rgba(48, 76, 33, .25);
  font-size: .7rem;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: world-harvest-pop 1.15s ease forwards;
}

@keyframes world-harvest-pop {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.82); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  72% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -88%) scale(.96); }
}

.field-action-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.field-state-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: .61rem;
  font-weight: 800;
  color: rgba(64, 43, 29, .74);
}

.world-purpose,
.recipe-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(88, 119, 151, .12);
  color: #315d7d;
  font-size: .53rem;
  font-weight: 900;
}

.world-purpose.is-order,
.recipe-tags .is-order {
  background: rgba(208, 157, 50, .17);
  color: #805619;
}

.harvest-ready-button {
  flex: 0 0 auto;
  min-width: 142px;
  min-height: 38px;
}

.field-plan-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: 7px;
  padding: 9px;
}

.field-upgrade-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(111,65,35,.14);
  border-radius: 10px;
  background: rgba(255,248,224,.72);
}

.field-upgrade-card > div { min-width: 0; }
.field-upgrade-card strong { display: block; font-size: .66rem; }
.field-upgrade-card small { display: block; margin-top: 1px; font-size: .53rem; line-height: 1.13; color: rgba(65,45,31,.7); }
.field-upgrade-button {
  width: 102px;
  max-width: 102px;
  aspect-ratio: 373 / 235;
  padding: 6px 10px 8px 24px;
  font-size: .53rem;
}

.field-identity-note {
  padding: 6px 7px;
  border-radius: 9px;
  background: rgba(154, 107, 38, .08);
}

.world-help {
  position: relative;
  flex: 0 0 auto;
}

.world-help summary {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  list-style: none;
  border: 1px solid rgba(111, 65, 35, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .76);
  color: #73502f;
  font-weight: 950;
  cursor: pointer;
}

.world-help summary::-webkit-details-marker {
  display: none;
}

.world-help p {
  position: absolute;
  z-index: 10;
  top: 34px;
  right: 0;
  width: min(260px, 76vw);
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(111, 65, 35, .2);
  border-radius: 10px;
  background: #fff7df;
  box-shadow: 0 8px 20px rgba(75, 47, 25, .2);
  font-size: .63rem;
  line-height: 1.28;
  color: var(--ink);
}

.crop-choice-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
}

.crop-choice {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid rgba(111, 65, 35, .2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.crop-choice img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.crop-choice > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.crop-choice strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
}

.crop-choice small {
  font-size: .52rem;
  line-height: 1.08;
  opacity: .66;
}

.crop-choice > b {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(205, 153, 48, .9);
  color: #fff;
  font-size: .42rem;
}

.crop-choice.is-active {
  border-color: #84a95d;
  background: rgba(235, 249, 222, .9);
}

.crop-choice.is-active:disabled {
  opacity: 1;
}

.building-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 10px;
  overflow: hidden;
}

.building-hero {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(221, 203, 161, .27);
}

.building-hero img {
  width: min(92%, 260px);
  height: min(92%, 260px);
  object-fit: contain;
}

.building-hero > span,
.production-building-visual > span {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(62, 42, 28, .78);
  color: #fff;
  font-size: .55rem;
  font-weight: 900;
}

.building-info {
  min-width: 0;
  align-self: center;
  display: grid;
  gap: 7px;
}

.building-info h3 {
  font-size: 1.12rem;
}

.building-live,
.world-completion,
.production-job {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(214, 151, 55, .11);
  border: 1px solid rgba(179, 116, 36, .16);
}

.building-live.is-ready,
.world-completion {
  background: rgba(91, 157, 73, .11);
  border-color: rgba(91, 157, 73, .18);
}

.building-live strong,
.world-completion strong,
.production-job strong {
  font-size: .7rem;
}

.building-live small,
.world-completion span,
.production-job small,
.production-job em {
  font-size: .58rem;
  font-style: normal;
  line-height: 1.15;
  opacity: .76;
}

.building-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.building-decision > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.building-decision > div strong {
  font-size: .66rem;
  line-height: 1.15;
}

.building-decision > div small {
  font-size: .54rem;
  line-height: 1.15;
  opacity: .65;
}

.world-stock-strip {
  min-width: 0;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid rgba(111, 65, 35, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .46);
}

.world-stock-label {
  flex: 0 0 auto;
  font-size: .58rem;
  font-weight: 950;
}

.world-stock-items {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.world-stock-item {
  min-width: 0;
  flex: 1 1 0;
  max-width: 112px;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 3px;
}

.world-stock-item img {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.world-stock-item strong {
  font-size: .65rem;
  line-height: 1;
}

.world-stock-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .46rem;
  line-height: 1;
  opacity: .63;
}

.production-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 7px;
}

.production-building-card {
  display: grid;
  grid-template-rows: minmax(90px, .75fr) auto auto;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
}

.production-building-visual {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(221, 203, 161, .25);
}

.production-building-visual img {
  width: min(92%, 180px);
  height: min(100%, 160px);
  object-fit: contain;
}

.production-building-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.production-job {
  margin-top: 2px;
}

.production-job.is-idle {
  background: rgba(91, 157, 73, .1);
  border-color: rgba(91, 157, 73, .18);
}

.production-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(74, 49, 30, .12);
}

.production-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #6c9c4f;
  transition: width .6s linear;
}

.production-building-actions {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.production-building-actions > small {
  font-size: .53rem;
  line-height: 1.16;
  opacity: .72;
}

.production-building-actions .ef-button {
  width: 100%;
  min-height: 36px;
}

.production-recipes {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  overflow: hidden;
}

.recipe-selector {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.recipe-select {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid rgba(111, 65, 35, .17);
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.recipe-select img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.recipe-select > span {
  min-width: 0;
  display: grid;
}

.recipe-select strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .59rem;
}

.recipe-select small {
  font-size: .5rem;
  opacity: .65;
}

.recipe-select.is-active {
  border-color: #c39239;
  background: rgba(255, 247, 216, .98);
  box-shadow: inset 0 0 0 1px rgba(195, 146, 57, .14);
}

.recipe-select.is-available:not(.is-active)::after {
  content: '';
  justify-self: end;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #659b4a;
}

.recipe-detail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(111, 65, 35, .13);
  border-radius: 12px;
  background: rgba(250, 245, 228, .62);
}

.recipe-detail.is-ready {
  border-color: rgba(91, 157, 73, .24);
}

.recipe-detail-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.recipe-detail-image {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
}

.recipe-detail-image img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.recipe-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.recipe-tags .is-chain {
  background: rgba(93, 125, 160, .13);
  color: #315d7d;
}

.recipe-flow {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.recipe-flow > div {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
}

.recipe-flow > div > small {
  font-size: .53rem;
  font-weight: 900;
  opacity: .63;
}

.recipe-flow > b {
  color: #a47632;
  font-size: 1.1rem;
}

.recipe-resources {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.recipe-resources > em {
  font-size: .58rem;
  font-style: normal;
  opacity: .62;
}

.recipe-resource {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid rgba(111, 65, 35, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .74);
}

.recipe-resource img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.recipe-resource > span {
  min-width: 0;
  display: grid;
}

.recipe-resource strong {
  font-size: .59rem;
  line-height: 1;
}

.recipe-resource small {
  min-width: 0;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .45rem;
  opacity: .65;
}

.recipe-resource.is-ok {
  border-color: rgba(91, 157, 73, .28);
  background: rgba(236, 249, 229, .78);
}

.recipe-resource.is-missing {
  border-color: rgba(176, 87, 70, .26);
  background: rgba(255, 235, 229, .72);
}

.recipe-resource.is-output {
  border-color: rgba(73, 122, 166, .25);
  background: rgba(232, 243, 252, .78);
}

.recipe-start {
  width: 100%;
  min-height: 40px;
}

.world-refresh-button {
  flex: 0 0 auto;
  min-height: 36px;
}

@keyframes world-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 223, 98, .18), inset 0 0 16px rgba(238, 216, 80, .14); }
  50% { box-shadow: 0 0 0 4px rgba(255, 223, 98, .28), inset 0 0 20px rgba(238, 216, 80, .23); }
}

@media (max-width: 720px) {
  .world-screen-r2 .world-card-r2 {
    width: 98vw;
    padding: 6px;
    gap: 4px;
  }

  .world-topbar .scene-subtitle {
    display: none;
  }

  .world-kpis {
    grid-auto-columns: minmax(54px, auto);
    gap: 3px;
  }

  .world-kpis span {
    padding: 3px 5px;
  }

  .world-main-tabs .screen-tab {
    min-height: 32px;
  }

  .world-context-line {
    padding: 3px 6px;
    font-size: .56rem;
  }

  .world-focus-tab {
    min-height: 40px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 3px;
    padding: 3px 5px;
  }

  .world-focus-tab img {
    width: 29px;
    height: 29px;
  }

  .world-focus-tab span {
    font-size: .62rem;
  }

  .world-focus-tab small {
    font-size: .47rem;
  }

  .field-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px;
  }

  .field-plot-panel {
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 6px;
    padding: 6px;
  }

  .field-focus-head {
    grid-column: 1 / -1;
  }

  .field-focus-head p {
    font-size: .55rem;
  }

  .farm-grid {
    grid-column: 1;
    width: min(100%, 33dvh, 232px);
    padding: 4px;
    gap: 4px;
  }

  .field-action-row {
    grid-column: 2;
    min-width: 0;
    display: grid;
    align-content: center;
  }

  .field-state-copy {
    display: none;
  }

  .harvest-ready-button {
    min-width: 0;
    width: 100%;
    min-height: 54px;
    padding: 5px;
    font-size: .6rem;
    line-height: 1.05;
  }

  .field-plan-panel {
    padding: 5px;
    display: block;
  }

  .field-plan-title,
  .field-identity-note {
    display: none;
  }

  .crop-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .crop-choice {
    min-height: 49px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
  }

  .crop-choice img {
    width: 27px;
    height: 27px;
  }

  .crop-choice strong {
    font-size: .53rem;
  }

  .crop-choice small {
    font-size: .42rem;
  }

  .crop-choice > b {
    display: none;
  }

  .building-workspace {
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
    gap: 7px;
    padding: 7px;
  }

  .building-hero img {
    width: min(96%, 150px);
    height: min(96%, 150px);
  }

  .building-info {
    gap: 5px;
  }

  .building-info h3 {
    font-size: .95rem;
  }

  .building-decision {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .world-stock-strip {
    min-height: 39px;
    padding: 3px 5px;
  }

  .world-stock-label {
    display: none;
  }

  .world-stock-item {
    grid-template-columns: 24px auto;
  }

  .world-stock-item img {
    width: 24px;
    height: 24px;
  }

  .world-stock-item small {
    display: none;
  }

  .production-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
  }

  .production-building-card {
    grid-template-columns: 62px minmax(0, 1fr) minmax(92px, 116px);
    grid-template-rows: auto;
    align-items: center;
    gap: 5px;
    padding: 5px;
  }

  .production-building-visual {
    width: 62px;
    height: 62px;
  }

  .production-building-visual img {
    width: 58px;
    height: 58px;
  }

  .production-building-visual > span {
    top: 2px;
    left: 2px;
    padding: 2px 4px;
    font-size: .44rem;
  }

  .production-building-copy {
    gap: 2px;
  }

  .production-building-copy .eyebrow,
  .production-building-copy > p {
    display: none;
  }

  .production-building-copy h3 {
    font-size: .76rem;
  }

  .production-job,
  .world-completion {
    padding: 4px 5px;
  }

  .production-job em {
    display: none;
  }

  .production-building-actions > small {
    display: none;
  }

  .production-building-actions .ef-button {
    min-height: 42px;
    padding: 4px 5px;
    font-size: .57rem;
  }

  .production-recipes {
    padding: 5px;
    gap: 4px;
  }

  .production-recipe-head {
    display: none;
  }

  .recipe-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }

  .recipe-select {
    min-height: 40px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 2px 3px;
    border-radius: 8px;
  }

  .recipe-select img {
    width: 27px;
    height: 27px;
  }

  .recipe-select strong {
    font-size: .5rem;
  }

  .recipe-select small {
    font-size: .43rem;
  }

  .recipe-detail {
    gap: 4px;
    padding: 5px;
  }

  .recipe-detail-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px;
  }

  .recipe-detail-image {
    width: 40px;
    height: 40px;
  }

  .recipe-detail-image img {
    width: 37px;
    height: 37px;
  }

  .recipe-detail h3 {
    font-size: .73rem;
  }

  .recipe-detail .eyebrow {
    font-size: .43rem;
  }

  .recipe-tags {
    margin-top: 2px;
    gap: 2px;
  }

  .recipe-tags span {
    min-height: 16px;
    padding: 2px 4px;
    font-size: .43rem;
  }

  .recipe-flow {
    gap: 3px;
  }

  .recipe-flow > div {
    padding: 3px;
    gap: 2px;
  }

  .recipe-flow > div > small {
    font-size: .45rem;
  }

  .recipe-resource {
    grid-template-columns: 24px auto;
    padding: 2px 3px;
  }

  .recipe-resource img {
    width: 23px;
    height: 23px;
  }

  .recipe-resource small {
    display: none;
  }

  .recipe-start {
    min-height: 38px;
    font-size: .65rem;
  }
}

@media (max-width: 380px) {
  .world-screen-r2 .world-card-r2 {
    width: 99vw;
    padding: 4px;
  }

  .world-topbar .scene-title {
    font-size: .98rem;
  }

  .world-kpis {
    grid-auto-columns: minmax(48px, auto);
  }

  .world-kpis span {
    padding: 2px 4px;
  }

  .world-kpis small {
    font-size: .47rem;
  }

  .world-kpis strong {
    font-size: .63rem;
  }

  .world-focus-tab {
    grid-template-columns: 27px minmax(0, 1fr) auto;
    padding-inline: 3px;
  }

  .world-focus-tab img {
    width: 26px;
    height: 26px;
  }

  .world-focus-tab span {
    font-size: .56rem;
  }

  .world-focus-tab small {
    display: none;
  }

  .field-plot-panel {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .farm-grid {
    width: min(100%, 31dvh, 205px);
  }

  .farm-plot-state {
    font-size: .42rem;
  }

  .crop-choice {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .crop-choice img {
    width: 23px;
    height: 23px;
  }

  .crop-choice small {
    display: none;
  }

  .recipe-select {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .recipe-select img {
    width: 24px;
    height: 24px;
  }
}

@media (max-height: 680px) {
  .world-screen-r2 .world-card-r2 {
    gap: 3px;
    padding-block: 4px;
  }

  .world-context-line {
    display: none;
  }

  .world-screen-r2 .world-card-r2 {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .world-stage {
    gap: 3px;
  }

  .world-focus-tab {
    min-height: 36px;
  }

  .field-plot-panel,
  .field-plan-panel,
  .production-building-card,
  .production-recipes {
    border-radius: 11px;
  }

  .world-stock-strip {
    min-height: 35px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .world-screen-r2 {
    padding: 2px;
  }

  .world-screen-r2 .world-card-r2 {
    width: 98vw;
    height: 100%;
    padding: 4px 6px;
  }

  .world-topbar .scene-subtitle,
  .world-context-line {
    display: none;
  }

  .world-topbar .scene-title {
    font-size: 1rem;
  }

  .world-kpis span {
    padding-block: 2px;
  }

  .world-main-tabs .screen-tab {
    min-height: 28px;
  }

  .world-focus-tab {
    min-height: 32px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    padding-block: 2px;
  }

  .world-focus-tab img {
    width: 26px;
    height: 26px;
  }

  .world-focus-tab small {
    display: none;
  }

  .field-workspace {
    grid-template-columns: minmax(0, 1.05fr) minmax(230px, .95fr);
    grid-template-rows: 1fr;
  }

  .field-plot-panel {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 5px;
  }

  .field-focus-head {
    grid-column: 1 / -1;
  }

  .farm-grid {
    grid-column: 1;
    width: min(100%, 42dvh, 190px);
  }

  .field-action-row {
    grid-column: 2;
    display: grid;
    align-content: center;
  }

  .field-state-copy {
    display: none;
  }

  .field-plan-panel {
    display: grid;
    padding: 5px;
  }

  .field-plan-title {
    display: flex;
  }

  .field-identity-note {
    display: none;
  }

  .crop-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crop-choice {
    min-height: 44px;
  }

  .world-stock-strip {
    min-height: 30px;
    padding-block: 1px;
  }

  .world-stock-item img {
    width: 22px;
    height: 22px;
  }

  .production-workspace {
    grid-template-columns: minmax(205px, 245px) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .production-building-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 5px;
  }

  .production-building-visual {
    width: 72px;
    height: 100%;
    min-height: 72px;
  }

  .production-building-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .production-building-actions > small {
    display: block;
  }

  .production-recipes {
    padding: 5px;
  }

  .production-recipe-head {
    display: none;
  }

  .recipe-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .recipe-select {
    min-height: 36px;
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .recipe-select img {
    width: 24px;
    height: 24px;
  }

  .recipe-select strong {
    font-size: .45rem;
  }

  .recipe-select small {
    display: none;
  }

  .recipe-detail {
    grid-template-columns: minmax(130px, .8fr) minmax(0, 1.25fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
  }

  .recipe-detail-head {
    grid-column: 1;
    grid-row: 1;
  }

  .recipe-flow {
    grid-column: 2;
    grid-row: 1;
  }

  .recipe-start {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .farm-plot,
  .farm-growth,
  .production-progress i {
    transition: none;
  }
  .farm-plot.is-ready {
    animation: none;
  }
}

/* Keep farm feedback visible without a permanent animated shadow on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .farm-plot.is-ready {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255, 223, 98, .2), inset 0 0 10px rgba(238, 216, 80, .14);
  }

  .farm-growth {
    transition: transform .35s linear;
  }

  .farm-growth img,
  .farm-plot.is-ready .farm-growth img {
    filter: none;
  }
}

/* Field seed chooser: help stays in the section header; stock is shown only in the persistent storage strip. */
.crop-action-line {
  margin-top: 2px;
  color: #557147;
  font-weight: 850;
  opacity: .9 !important;
}

@media (max-width: 720px) {
  .field-plan-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 4px;
  }

  .field-plan-title .field-help summary {
    width: 28px;
    height: 28px;
  }

  .field-plan-title .field-help p {
    position: fixed;
    z-index: 80;
    left: 50%;
    right: auto;
    top: 50%;
    width: min(88vw, 360px);
    transform: translate(-50%, -50%);
    padding: 13px 14px;
    border-radius: 16px;
    font-size: .72rem;
    line-height: 1.38;
    box-shadow: 0 14px 36px rgba(48, 32, 20, .3);
  }

  .crop-choice small:not(.crop-action-line) {
    display: none;
  }

  .crop-action-line {
    display: block !important;
    font-size: .46rem !important;
    white-space: normal;
  }

  .world-stock-strip {
    min-height: 45px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
  }

  .world-stock-label {
    display: block;
    max-width: 72px;
    font-size: .48rem;
    line-height: 1.05;
  }

  .world-stock-items {
    min-width: 0;
    gap: 3px;
  }

  .world-stock-item {
    grid-template-columns: 22px auto;
    grid-template-rows: auto auto;
    gap: 0 2px;
  }

  .world-stock-item img {
    width: 22px;
    height: 22px;
    grid-row: 1 / 3;
  }

  .world-stock-item strong {
    align-self: end;
    font-size: .54rem;
  }

  .world-stock-item small {
    display: block;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .38rem;
    line-height: 1;
    opacity: .68;
  }

}

@media (max-width: 380px) {
  .world-stock-label {
    max-width: 60px;
    font-size: .44rem;
  }

  .world-stock-item small {
    max-width: 44px;
    font-size: .35rem;
  }

}


/* Content foundation: building selectors scale to larger catalogs without page scroll. */
.building-focus-tabs {
  display: flex;
  grid-template-columns: none;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 3px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.building-focus-tabs .world-focus-tab {
  flex: 0 0 clamp(132px, 22%, 184px);
  scroll-snap-align: start;
}

@media (max-width: 620px) {
  .building-focus-tabs .world-focus-tab {
    flex-basis: 122px;
  }
}

/* Content foundation: stock rows can grow without squeezing labels or the page. */
.world-stock-items {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.world-stock-item {
  flex: 0 0 92px;
}

@media (max-width: 620px) {
  .world-stock-item {
    flex-basis: 72px;
  }
}

/* Content expansion beta.15 */
.world-building-navigation {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.building-group-tabs {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px;
  scrollbar-width: thin;
}

.building-group-tab {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(111, 65, 35, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  color: var(--ink);
  font: inherit;
  font-size: .62rem;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.building-group-tab.is-active {
  border-color: rgba(179, 122, 42, .55);
  background: rgba(255, 240, 187, .94);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46);
}

.building-effect {
  padding: 5px 7px;
  border-radius: 9px;
  background: rgba(241, 226, 171, .42);
}

.livestock-cycle-panel {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 7px;
}

.livestock-cycle-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(96px,.34fr) minmax(0,1fr);
  grid-template-areas:
    "animal flow"
    "animal storage"
    "actions actions";
  align-items: center;
  gap: 7px;
}

.livestock-animal {
  grid-area: animal;
  min-width: 0;
  min-height: 150px;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto auto;
  place-items: center;
  padding: 7px;
  border-radius: 13px;
  background: rgba(245, 236, 205, .62);
  text-align: center;
}

.livestock-animal img {
  width: min(100%, 132px);
  height: min(18dvh, 132px);
  object-fit: contain;
}

.livestock-animal strong {
  font-size: .82rem;
}

.livestock-animal small {
  font-size: .58rem;
  opacity: .7;
}

.livestock-flow {
  grid-area: flow;
}

.livestock-storage {
  grid-area: storage;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.52);
}

.livestock-storage > span:first-child {
  flex: 0 0 auto;
  min-width: 58px;
  display: grid;
  place-items: center;
}

.livestock-storage small,
.livestock-storage strong {
  display: block;
}

.livestock-storage .world-stock-item {
  flex-basis: 76px;
}

.livestock-actions {
  grid-area: actions;
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 720px) {
  .building-group-tab {
    min-height: 25px;
    padding: 3px 8px;
    font-size: .58rem;
  }

  .livestock-cycle-body {
    grid-template-columns: 84px minmax(0,1fr);
    gap: 5px;
  }

  .livestock-animal {
    min-height: 116px;
    padding: 5px;
  }

  .livestock-animal img {
    width: 78px;
    height: 78px;
  }

  .livestock-actions {
    gap: 5px;
  }

  .livestock-actions .ef-button {
    min-height: 38px;
    width: auto;
    max-width: 56%;
    padding-inline: 10px;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .livestock-cycle-body {
    grid-template-columns: 72px minmax(0,1fr);
  }

  .livestock-animal {
    min-height: 102px;
  }

  .livestock-animal img {
    width: 64px;
    height: 64px;
  }

  .livestock-actions .ef-button {
    font-size: .66rem;
  }
}

/* Release button sizing. Keep source artwork proportions intact on every viewport. */
.recipe-start {
  width: min(66%, 210px);
  max-width: 210px;
  height: auto;
  min-height: 0;
  aspect-ratio: 414 / 162;
  padding: 8px 20px 10px;
  justify-self: center;
  margin-inline: auto;
  font-size: .72rem;
  line-height: 1.08;
}

.production-upgrade-button {
  width: min(132px, 42vw);
  max-width: 132px;
  height: auto;
  min-height: 0;
  aspect-ratio: 373 / 235;
  padding: 8px 12px 10px 32px;
  font-size: .68rem;
}

.building-upgrade-goods {
  display: grid;
  gap: 4px;
  margin-top: 5px;
}
.building-upgrade-goods > small { font-weight: 800; opacity: .72; }
.building-upgrade-goods > div { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 720px) {
  .recipe-start {
    width: min(55%, 165px);
    max-width: 165px;
    height: auto;
    min-height: 0;
    aspect-ratio: 414 / 162;
    padding: 6px 14px 8px;
    font-size: .58rem;
  }
  .production-building-actions .production-upgrade-button,
  .production-upgrade-button {
    width: min(112px, 36vw);
    max-width: 112px;
    height: auto;
    min-height: 0;
    aspect-ratio: 373 / 235;
    padding: 7px 11px 9px 29px;
    font-size: .54rem;
  }
}


/* 1.0.3 field expansion and mobile text-safety overrides. */
@media (max-width: 700px) {
  .field-plan-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .production-locked-panel {
    min-height: 0;
    padding: 5px;
  }

  .production-unlock-message {
    width: 100%;
    gap: 4px;
    padding: 8px;
  }

  .production-unlock-message h3 { font-size: .76rem; }
  .production-unlock-message p { font-size: .56rem; line-height: 1.15; }
  .production-unlock-message .ef-button { width: 128px; min-height: 32px; font-size: .54rem; }

  .field-focus-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 1px 3px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .field-focus-tabs::-webkit-scrollbar { display: none; }

  .field-focus-tabs .world-focus-tab {
    flex: 0 0 96px;
    min-width: 96px;
    min-height: 38px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 3px;
    padding: 2px 4px;
    scroll-snap-align: start;
  }

  .field-focus-tabs .world-focus-tab img,
  .field-focus-tabs .field-purchase-icon {
    width: 23px;
    height: 23px;
  }

  .field-focus-tabs .world-focus-tab span:not(.field-purchase-icon) {
    font-size: .52rem;
    line-height: 1.02;
  }

  .field-focus-tabs .world-focus-tab small {
    display: block;
    margin-top: 1px;
    font-size: .39rem;
    line-height: 1;
    white-space: normal;
  }

  .field-focus-tabs .world-focus-tab > b {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    width: 15px;
    height: 15px;
    font-size: .42rem;
  }

  .field-purchase-icon { font-size: .95rem !important; }

  .field-upgrade-card {
    gap: 4px;
    padding: 4px 5px;
  }

  .field-upgrade-card strong { font-size: .57rem; }
  .field-upgrade-card small { font-size: .45rem; line-height: 1.05; }
  .field-upgrade-button {
    width: 88px;
    max-width: 88px;
    padding: 5px 8px 7px 22px;
    font-size: .45rem;
  }

  .harvest-ready-button {
    width: 80px;
    max-width: 80px;
    min-width: 0;
    min-height: 42px;
    justify-self: center;
    padding: 4px 5px;
    font-size: .5rem;
    line-height: 1.02;
  }
}

@media (max-width: 360px) {
  .field-focus-tabs .world-focus-tab {
    flex-basis: 88px;
    min-width: 88px;
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 36px;
    padding-inline: 3px;
  }
  .field-focus-tabs .world-focus-tab img,
  .field-focus-tabs .field-purchase-icon { width: 20px; height: 20px; }
  .field-focus-tabs .world-focus-tab span:not(.field-purchase-icon) { font-size: .47rem; }
  .field-focus-tabs .world-focus-tab small { font-size: .35rem; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .field-focus-tabs .world-focus-tab small {
    display: block;
    font-size: .4rem;
    line-height: 1;
  }
  .field-focus-tabs .world-focus-tab > b {
    min-width: 16px;
    width: 16px;
    height: 16px;
    font-size: .43rem;
  }
}

/* 1.0.6 compact mobile production and field-height safeguards. */
@media (max-width: 720px) {
  .recipe-detail .recipe-start,
  .livestock-actions .recipe-start {
    width: min(44%, 136px);
    max-width: 136px;
    min-width: 112px;
    min-height: 0;
    justify-self: end;
    margin-left: auto;
    margin-right: 0;
    padding: 5px 11px 7px;
    font-size: .53rem;
    line-height: 1.04;
    text-wrap: balance;
  }

  /* A constrained square grid must be allowed to shrink its cells as well. */
  .farm-plot {
    min-height: 0;
  }

  .farm-grid {
    width: min(100%, 29dvh, 210px);
    gap: 3px;
    padding: 4px;
  }

  .harvest-ready-button {
    width: 72px;
    max-width: 72px;
    min-height: 38px;
    padding: 3px 4px;
    font-size: .46rem;
  }
}

@media (max-width: 720px) and (max-height: 820px) and (orientation: portrait) {
  body[data-game-screen="city"] .world-card-r2 {
    gap: 3px;
    padding-block: 4px;
  }

  body[data-game-screen="city"] .world-topbar .scene-title {
    font-size: .94rem;
  }

  body[data-game-screen="city"] .world-kpis span {
    padding: 2px 4px;
  }

  body[data-game-screen="city"] .world-main-tabs .screen-tab {
    min-height: 28px;
    padding-block: 2px;
  }

  body[data-game-screen="city"] .world-context-line {
    display: none;
  }

  body[data-game-screen="city"] .world-card-r2 {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  /* Scroll only inside the field stage when the physical viewport is too short. */
  body[data-game-screen="city"] .world-stage {
    grid-template-rows: auto auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }

  body[data-game-screen="city"] .field-focus-tabs .world-focus-tab {
    flex-basis: 84px;
    min-width: 84px;
    min-height: 33px;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 1px 3px;
  }

  body[data-game-screen="city"] .field-focus-tabs .world-focus-tab img,
  body[data-game-screen="city"] .field-focus-tabs .field-purchase-icon {
    width: 20px;
    height: 20px;
  }

  body[data-game-screen="city"] .field-focus-tabs .world-focus-tab span:not(.field-purchase-icon) {
    font-size: .46rem;
  }

  body[data-game-screen="city"] .field-focus-tabs .world-focus-tab small {
    font-size: .34rem;
  }

  body[data-game-screen="city"] .field-workspace {
    min-height: auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }

  body[data-game-screen="city"] .field-plot-panel {
    min-height: 236px;
    grid-template-columns: minmax(0, 1fr) 70px;
    grid-template-rows: auto 190px;
    column-gap: 4px;
    gap: 3px 4px;
    padding: 4px;
  }

  body[data-game-screen="city"] .field-focus-head p {
    display: none;
  }

  body[data-game-screen="city"] .field-focus-head h3 {
    font-size: .8rem;
  }

  body[data-game-screen="city"] .field-ready-kpi {
    min-width: 45px;
    padding: 3px 5px;
  }

  body[data-game-screen="city"] .field-ready-kpi strong {
    font-size: .82rem;
  }

  body[data-game-screen="city"] .field-ready-kpi small {
    font-size: .42rem;
  }

  body[data-game-screen="city"] .farm-grid {
    width: min(100%, 184px);
    max-height: 184px;
    align-self: start;
    gap: 3px;
    padding: 3px;
  }

  body[data-game-screen="city"] .farm-plot-number {
    top: 2px;
    left: 2px;
    min-width: 15px;
    height: 15px;
    font-size: .42rem;
  }

  body[data-game-screen="city"] .farm-plot-state {
    right: 2px;
    bottom: 2px;
    padding: 2px 4px;
    font-size: .4rem;
  }

  body[data-game-screen="city"] .field-action-row {
    align-content: center;
    justify-items: center;
  }

  body[data-game-screen="city"] .harvest-ready-button {
    width: 66px;
    max-width: 66px;
    min-height: 36px;
    padding: 3px;
    font-size: .43rem;
  }

  body[data-game-screen="city"] .field-plan-panel {
    min-height: 0;
    gap: 3px;
    padding: 4px;
  }

  body[data-game-screen="city"] .field-upgrade-card {
    min-height: 47px;
    padding: 3px 4px;
  }

  body[data-game-screen="city"] .field-upgrade-card small {
    font-size: .41rem;
  }

  body[data-game-screen="city"] .crop-choice-grid {
    gap: 3px;
  }

  body[data-game-screen="city"] .crop-choice {
    min-height: 42px;
    grid-template-columns: 23px minmax(0, 1fr);
    padding: 2px;
  }

  body[data-game-screen="city"] .crop-choice img {
    width: 22px;
    height: 22px;
  }

  body[data-game-screen="city"] .crop-choice strong {
    font-size: .48rem;
  }

  body[data-game-screen="city"] .world-stock-strip {
    min-height: 30px;
    padding-block: 1px;
  }
}

@media (max-width: 720px) and (max-height: 720px) and (orientation: portrait) {
  .recipe-detail .recipe-start,
  .livestock-actions .recipe-start {
    width: 118px;
    min-width: 108px;
    max-width: 118px;
    padding: 4px 9px 6px;
    font-size: .49rem;
  }

  body[data-game-screen="city"] .field-plot-panel {
    min-height: 220px;
    grid-template-rows: auto 174px;
  }

  body[data-game-screen="city"] .farm-grid {
    width: min(100%, 168px);
    max-height: 168px;
  }
}

/* 1.0.7 production navigation states and mobile discoverability. */
.building-focus-strip {
  position: relative;
  min-width: 0;
}

.building-focus-tabs {
  scrollbar-width: auto;
  scrollbar-color: rgba(176, 126, 46, .82) rgba(112, 82, 54, .12);
}

.building-focus-tabs::-webkit-scrollbar { height: 5px; }
.building-focus-tabs::-webkit-scrollbar-track {
  background: rgba(112, 82, 54, .10);
  border-radius: 999px;
}
.building-focus-tabs::-webkit-scrollbar-thumb {
  background: rgba(176, 126, 46, .78);
  border-radius: 999px;
}

.building-focus-tabs .world-focus-tab {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.building-focus-tabs .world-focus-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.building-focus-tabs .world-focus-copy > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  line-height: 1.05;
}

.building-focus-tabs .world-focus-copy > small {
  display: block;
  justify-self: end;
  text-align: right;
  font-size: .52rem;
  line-height: 1;
  opacity: .66;
}

.building-focus-tabs .world-focus-tab.has-complete:not(.is-active) {
  border-color: rgba(65, 145, 67, .62);
  background: rgba(235, 249, 226, .96);
}

.building-focus-tabs .focus-indicator {
  position: static;
  flex: 0 0 auto;
}

.building-focus-tabs .focus-indicator.is-ready {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: #5e963f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76), 0 0 5px rgba(80,145,60,.35);
}

.building-focus-tabs .focus-indicator.is-complete {
  min-width: 19px;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 50%;
  background: #5e963f;
  color: #fff;
  font-size: .61rem;
  line-height: 19px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76);
}

.building-scroll-hint {
  display: none;
}

@media (max-width: 620px) {
  .building-focus-strip.has-overflow .building-focus-tabs {
    padding-right: 34px;
    padding-bottom: 6px;
  }

  .building-scroll-hint {
    position: absolute;
    right: 1px;
    bottom: 5px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 18px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(255, 247, 220, .96);
    border: 1px solid rgba(160, 111, 45, .30);
    box-shadow: 0 1px 4px rgba(54, 37, 24, .14);
    color: rgba(91, 62, 35, .82);
    font-size: .4rem;
    font-weight: 900;
    pointer-events: none;
  }

  .building-focus-tabs .world-focus-tab {
    flex-basis: 108px;
    min-height: 39px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 3px;
    padding: 3px 4px;
  }

  .building-focus-tabs .world-focus-tab img {
    width: 27px;
    height: 27px;
  }

  .building-focus-tabs .world-focus-copy > strong {
    font-size: .58rem;
  }

  .building-focus-tabs .world-focus-copy > small {
    display: block;
    font-size: .43rem;
  }
}

@media (max-width: 430px) {
  .building-focus-tabs .world-focus-tab {
    flex-basis: 98px;
    min-height: 37px;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    padding: 2px 3px;
  }

  .building-focus-tabs .world-focus-tab img {
    width: 24px;
    height: 24px;
  }

  .building-focus-tabs .world-focus-copy > strong { font-size: .54rem; }
  .building-focus-tabs .world-focus-copy > small { font-size: .4rem; }
}

/* 1.0.8 compact production status, persistent building scroll cue, and centered mobile field controls. */
.building-focus-tabs {
  scrollbar-width: none;
  padding-bottom: 2px;
}
.building-focus-tabs::-webkit-scrollbar { display: none; }

.building-focus-tabs .world-focus-tab.is-busy::after { display: none; }

.building-focus-tabs .focus-indicator.is-busy,
.building-focus-tabs .focus-indicator.is-ready,
.building-focus-tabs .focus-indicator.is-complete {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76), 0 0 5px rgba(80,145,60,.28);
  line-height: 1;
}

.building-focus-tabs .focus-indicator.is-busy {
  background: #d38d2f;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76), 0 0 5px rgba(190,122,38,.25);
}

.building-focus-tabs .focus-indicator.is-ready {
  background: #5e963f;
}

.building-focus-tabs .focus-indicator.is-complete {
  background: #5e963f;
  color: #fff;
  font-size: 6px;
  font-weight: 950;
  line-height: 9px;
}

.building-scroll-hint { display: none !important; }

.building-scrollbar {
  position: relative;
  display: block;
  width: calc(100% - 4px);
  height: 4px;
  margin: 2px 2px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(112,82,54,.16);
  pointer-events: none;
}

.building-scrollbar > i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-width: 24px;
  border-radius: inherit;
  background: rgba(176,126,46,.88);
  transform: translateX(0);
  transition: transform .08s linear, width .08s linear;
}

.building-scrollbar.is-static { opacity: .35; }

.field-plot-panel .field-focus-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.field-plot-panel .field-focus-head > div:first-child { min-width: 0; }
.field-plot-panel .harvest-ready-button {
  min-width: 118px;
  min-height: 34px;
  padding: 5px 12px;
  font-size: .62rem;
}
.field-plot-panel .field-action-row { justify-content: flex-start; }

@media (max-width: 720px) {
  .field-plot-panel {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
    gap: 4px;
  }

  .field-plot-panel .field-focus-head {
    grid-column: 1;
    grid-template-columns: minmax(0,1fr) 82px auto;
    gap: 5px;
    min-height: 44px;
  }

  .field-plot-panel .field-focus-head > div:first-child {
    max-width: 100%;
  }

  .field-plot-panel .field-focus-head p {
    margin-top: 1px;
    font-size: .5rem;
    line-height: 1.05;
  }

  .field-plot-panel .harvest-ready-button {
    width: 82px;
    max-width: 82px;
    min-width: 82px;
    min-height: 32px;
    padding: 4px 6px;
    justify-self: center;
    font-size: .48rem;
    line-height: 1.02;
  }

  .field-plot-panel .field-ready-kpi {
    min-width: 48px;
    padding: 3px 5px;
  }

  .field-plot-panel .farm-grid {
    grid-column: 1;
    width: min(100%, 33dvh, 224px);
    max-height: 224px;
    align-self: center;
    justify-self: center;
  }

  .field-plot-panel .field-action-row { display: none; }

  .building-focus-strip.has-overflow .building-focus-tabs {
    padding-right: 2px;
    padding-bottom: 2px;
  }
}

@media (max-width: 380px) {
  .field-plot-panel .field-focus-head {
    grid-template-columns: minmax(0,1fr) 74px auto;
    gap: 4px;
  }

  .field-plot-panel .harvest-ready-button {
    width: 74px;
    max-width: 74px;
    min-width: 74px;
    min-height: 30px;
    padding: 3px 4px;
    font-size: .44rem;
  }

  .field-plot-panel .farm-grid {
    width: min(100%, 31dvh, 208px);
    max-height: 208px;
  }
}

@media (max-width: 720px) and (max-height: 820px) and (orientation: portrait) {
  body[data-game-screen="city"] .field-plot-panel {
    min-height: 0;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto 184px;
    gap: 3px;
  }

  body[data-game-screen="city"] .field-plot-panel .field-focus-head {
    grid-column: 1;
    grid-template-columns: minmax(0,1fr) 72px auto;
    min-height: 38px;
  }

  body[data-game-screen="city"] .field-plot-panel .field-focus-head p { display: none; }

  body[data-game-screen="city"] .field-plot-panel .harvest-ready-button {
    width: 72px;
    max-width: 72px;
    min-width: 72px;
    min-height: 29px;
    padding: 3px 4px;
    font-size: .43rem;
  }

  body[data-game-screen="city"] .field-plot-panel .farm-grid {
    grid-column: 1;
    width: min(100%, 184px);
    max-height: 184px;
    align-self: center;
    justify-self: center;
  }

  body[data-game-screen="city"] .field-plot-panel .field-action-row { display: none; }
}

@media (max-width: 720px) and (max-height: 720px) and (orientation: portrait) {
  body[data-game-screen="city"] .field-plot-panel {
    grid-template-rows: auto 168px;
  }

  body[data-game-screen="city"] .field-plot-panel .farm-grid {
    width: min(100%, 168px);
    max-height: 168px;
  }
}


/* 1.0.9 production status placement: compact dots return to the card corner. */
.building-focus-tabs .world-focus-tab {
  position: relative;
}

.building-focus-tabs .world-focus-copy {
  padding-right: 8px;
}

.building-focus-tabs .focus-indicator,
.building-focus-tabs .focus-indicator.is-busy,
.building-focus-tabs .focus-indicator.is-ready,
.building-focus-tabs .focus-indicator.is-complete {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  line-height: 9px;
  z-index: 2;
}

.building-focus-tabs .focus-indicator.is-complete {
  font-size: 5px;
  font-weight: 950;
}

@media (max-width: 620px) {
  .building-focus-tabs .focus-indicator,
  .building-focus-tabs .focus-indicator.is-busy,
  .building-focus-tabs .focus-indicator.is-ready,
  .building-focus-tabs .focus-indicator.is-complete {
    top: 4px;
    right: 4px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
  }
  .building-focus-tabs .focus-indicator.is-complete { font-size: 4.5px; }
  .building-focus-tabs .world-focus-copy { padding-right: 7px; }
}


/* 1.0.11: keep harvest status and action together on the right on mobile. */
@media (max-width: 720px) {
  .field-plot-panel .field-focus-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    column-gap: 5px;
  }

  .field-plot-panel .field-focus-head > div:first-child {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  .field-plot-panel .field-ready-kpi {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
  }

  .field-plot-panel .harvest-ready-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
}

@media (max-width: 380px) {
  .field-plot-panel .field-focus-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 4px;
  }

  .field-plot-panel .field-ready-kpi {
    min-width: 42px;
    padding-inline: 4px;
  }

  .field-plot-panel .harvest-ready-button {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
  }
}