/* ===================================================================
   SCREEN: food-production-1
   screen class = .game-guide-screen-food-production-1
   -------------------------------------------------------------------
   Annotation screen over the Food Production / Market tab. One image:
     --guide-bg   /assets/help/<lang>/food-production-1.webp

   Master and English screenshot are both 1080x1920 and share the
   market-row layout: the Workbench price pill measures x503-767 /
   y1141-1195 in English, inside the master's x491-777 / y1130-1204
   frame with 12/10/11/9 margins. The frame therefore keeps the
   master's rect.

   Three .game-guide-callout boxes. The first two are wider than their
   master text runs and start further left, because the English
   sentences need the width - see the limits at the end.
   =================================================================== */

.game-guide-screen-food-production-1 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-food-production-1 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-guide-screen-food-production-1 .game-guide-li {
  display: block;
}

/* --- frame + cut-out ---------------------------------------------- */
.game-guide-screen-food-production-1 .game-guide-frame-price,
.game-guide-screen-food-production-1 .game-guide-window-price {
  left: 45.463%;
  top: 58.854%;
  width: 26.574%;
  height: 3.906%;
}
.game-guide-screen-food-production-1 .game-guide-window-price > span {
  width: 376.307%;
  height: 2560%;
  left: -171.080%;
  top: -1506.667%;
}

/* --- callout boxes ------------------------------------------------ */
.game-guide-screen-food-production-1 .game-guide-callout-cost {
  left: 8.333%;
  top: 49.427%;
  width: 83.333%;
}
/* raised 45px above the master's line: the English sentence needs two
   lines and would otherwise run into the limits list below */
.game-guide-screen-food-production-1 .game-guide-callout-limit {
  left: 10.741%;
  top: 68.750%;
  width: 75%;
}
.game-guide-screen-food-production-1 .game-guide-callout-list {
  left: 10.648%;
  top: 76.146%;
  width: 76.944%;
}

/* --- connector ---------------------------------------------------- */
/* cost box bottom y1061 -> price frame top y1130 */
.game-guide-screen-food-production-1 .game-guide-line-price {
  left: 58.889%;
  top: 55.245%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.609%;
}

/* the master's "tap to close" footer is deliberately NOT reproduced:
   this runs as a web page, where there is nothing to tap to close.
   (Any "Tap to close" baked into the screenshot itself is left alone.) */

/* ===================================================================
   SCREEN: food-production-3
   screen class = .game-guide-screen-food-production-3
   -------------------------------------------------------------------
   Annotation screen over the Buildable Facilities dialog. One image:
     --guide-bg   /assets/help/<lang>/food-production-3.webp

   Master and English screenshot are both 1080x1920 and land on the
   same stops: the Workbench tile's artwork measures x202-360 /
   y412-505 in BOTH, and the research-point flask starts at x301 in
   both. Both frames therefore keep the master's rect.

   Three .game-guide-callout boxes, placed so their TEXT lands on the
   master's line (master position less the box's 11px padding+border).
   =================================================================== */

.game-guide-screen-food-production-3 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-food-production-3 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
.game-guide-screen-food-production-3 .game-guide-frame-points,
.game-guide-screen-food-production-3 .game-guide-window-points {
  left: 26.111%;
  top: 1.354%;
  width: 25%;
  height: 5.573%;
}
.game-guide-screen-food-production-3 .game-guide-window-points > span {
  width: 400%;
  height: 1794.393%;
  left: -104.444%;
  top: -24.299%;
}

.game-guide-screen-food-production-3 .game-guide-frame-workbench,
.game-guide-screen-food-production-3 .game-guide-window-workbench {
  left: 15.556%;
  top: 18.438%;
  width: 21.111%;
  height: 12.396%;
}
.game-guide-screen-food-production-3 .game-guide-window-workbench > span {
  width: 473.684%;
  height: 806.723%;
  left: -73.684%;
  top: -148.739%;
}

/* --- callout boxes ------------------------------------------------ */
/* narrower than the master's text run (940 against 1027): at the
   master's width the box's border would sit 18px from the canvas edge
   and read as clipped. 940 still holds the sentence in two lines. */
.game-guide-screen-food-production-3 .game-guide-callout-points {
  left: 3.241%;
  top: 9.948%;
  width: 87.037%;
}
.game-guide-screen-food-production-3 .game-guide-callout-source {
  left: 5.463%;
  top: 35.208%;
  width: 79.537%;
}
.game-guide-screen-food-production-3 .game-guide-callout-buy {
  left: 11.019%;
  top: 58.698%;
  width: 77.870%;
}

/* --- connectors --------------------------------------------------- */
/* points frame bottom y133 -> points box top y191 */
.game-guide-screen-food-production-3 .game-guide-line-points {
  left: 37.593%;
  top: 6.927%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.021%;
}
/* workbench frame bottom y592 -> source box top y676 */
.game-guide-screen-food-production-3 .game-guide-line-workbench {
  left: 25.694%;
  top: 30.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.375%;
}

/* the master's "tap to close" footer is deliberately NOT reproduced:
   this runs as a web page, where there is nothing to tap to close.
   (Any "Tap to close" baked into the screenshot itself is left alone.) */

/* ===================================================================
   SCREEN: food-production-5
   screen class = .game-guide-screen-food-production-5
   -------------------------------------------------------------------
   Annotation screen over the Barrel Lv.1 cooking dialog. One image:
     --guide-bg   /assets/help/<lang>/food-production-5.webp

   Master and English screenshot are both 1080x1920 and the dialog
   sits pixel-identically in both (verified by brightness profile
   across the ingredient card and the Cook pot), so both frames keep
   the master's rect with no re-centring.
   =================================================================== */

.game-guide-screen-food-production-5 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-food-production-5 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
/* ingredient card: master 160,580,254x178 */
.game-guide-screen-food-production-5 .game-guide-frame-material,
.game-guide-screen-food-production-5 .game-guide-window-material {
  left: 14.815%;
  top: 30.208%;
  width: 23.519%;
  height: 9.271%;
}
.game-guide-screen-food-production-5 .game-guide-window-material > span {
  width: 425.197%;
  height: 1078.652%;
  left: -62.992%;
  top: -325.843%;
}

/* Cook pot button: master 383,1267,318x228 */
.game-guide-screen-food-production-5 .game-guide-frame-cook,
.game-guide-screen-food-production-5 .game-guide-window-cook {
  left: 35.463%;
  top: 65.990%;
  width: 29.444%;
  height: 11.875%;
}
.game-guide-screen-food-production-5 .game-guide-window-cook > span {
  width: 339.623%;
  height: 842.105%;
  left: -120.440%;
  top: -555.702%;
}

/* --- callout boxes ------------------------------------------------ */
/* master line 1 top y840, left x182 */
.game-guide-screen-food-production-5 .game-guide-callout-material {
  left: 15.185%;
  top: 42.760%;
  width: 70.370%;
}
/* master line 1 top y1565, left x147 */
.game-guide-screen-food-production-5 .game-guide-callout-stamina {
  left: 11.944%;
  top: 80.521%;
  width: 76.852%;
}

/* --- connectors --------------------------------------------------- */
/* card frame bottom y758 -> material box top y821, on the master's
   arrow centre x283.5 */
.game-guide-screen-food-production-5 .game-guide-line-material {
  left: 25.787%;
  top: 39.479%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.281%;
}
/* pot frame bottom y1495 -> stamina box top y1546, on the master's
   arrow centre x540.5 */
.game-guide-screen-food-production-5 .game-guide-line-cook {
  left: 49.583%;
  top: 77.865%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.656%;
}

/* the master's "tap to close" footer is deliberately NOT reproduced:
   this runs as a web page, where there is nothing to tap to close.
   (Any "Tap to close" baked into the screenshot itself is left alone.) */

/* ===================================================================
   SCREEN: food-production-7
   screen class = .game-guide-screen-food-production-7
   -------------------------------------------------------------------
   Annotation screen over the food MENU / selection sheet. One image:
     --guide-bg   /assets/help/<lang>/food-production-7.webp

   Master and English screenshot are both 1080x1920 and the sheet sits
   pixel-identically in both (verified by brightness profile across
   the counter badge, the Nutrition cell, Clear & Back, Confirm and
   the Selected-list tile), so all five frames keep the master's rect.

   Two of the boxes are anchored by their BOTTOM edge, because their
   connectors leave the bottom and the empty menu paper above them is
   where a longer translation has to grow.
   =================================================================== */

.game-guide-screen-food-production-7 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-food-production-7 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
/* counter badge: master 551,235,93x88 */
.game-guide-screen-food-production-7 .game-guide-frame-count,
.game-guide-screen-food-production-7 .game-guide-window-count {
  left: 51.019%;
  top: 12.240%;
  width: 8.611%;
  height: 4.583%;
}
.game-guide-screen-food-production-7 .game-guide-window-count > span {
  width: 1161.290%;
  height: 2181.818%;
  left: -592.473%;
  top: -267.045%;
}

/* Nutrition cell: master 176,665,102x78 */
.game-guide-screen-food-production-7 .game-guide-frame-nutrition,
.game-guide-screen-food-production-7 .game-guide-window-nutrition {
  left: 16.296%;
  top: 34.635%;
  width: 9.444%;
  height: 4.063%;
}
.game-guide-screen-food-production-7 .game-guide-window-nutrition > span {
  width: 1058.824%;
  height: 2461.538%;
  left: -172.549%;
  top: -852.564%;
}

/* Clear & Back: master 683,1550,320x98 */
.game-guide-screen-food-production-7 .game-guide-frame-clear,
.game-guide-screen-food-production-7 .game-guide-window-clear {
  left: 63.241%;
  top: 80.729%;
  width: 29.630%;
  height: 5.104%;
}
.game-guide-screen-food-production-7 .game-guide-window-clear > span {
  width: 337.500%;
  height: 1959.184%;
  left: -213.438%;
  top: -1581.633%;
}

/* Confirm: master 695,1668,297x177 */
.game-guide-screen-food-production-7 .game-guide-frame-confirm,
.game-guide-screen-food-production-7 .game-guide-window-confirm {
  left: 64.352%;
  top: 86.875%;
  width: 27.500%;
  height: 9.219%;
}
.game-guide-screen-food-production-7 .game-guide-window-confirm > span {
  width: 363.636%;
  height: 1084.746%;
  left: -234.007%;
  top: -942.373%;
}

/* Selected-list tile: master 147,1606,109x120 */
.game-guide-screen-food-production-7 .game-guide-frame-selected,
.game-guide-screen-food-production-7 .game-guide-window-selected {
  left: 13.611%;
  top: 83.646%;
  width: 10.093%;
  height: 6.250%;
}
.game-guide-screen-food-production-7 .game-guide-window-selected > span {
  width: 990.826%;
  height: 1600%;
  left: -134.862%;
  top: -1338.333%;
}

/* --- callout boxes ------------------------------------------------ */
/* master line 1 top y396, left x129 */
.game-guide-screen-food-production-7 .game-guide-callout-count {
  left: 10.278%;
  top: 19.635%;
  width: 78.426%;
}
/* master line 1 top y812, left x222 */
.game-guide-screen-food-production-7 .game-guide-callout-nutrition {
  left: 18.889%;
  top: 41.302%;
  width: 71.296%;
}
/* bottom-anchored: connector leaves the bottom edge at y1579 */
.game-guide-screen-food-production-7 .game-guide-callout-table {
  left: 12.037%;
  bottom: 17.760%;
  width: 47.222%;
}
/* bottom-anchored: connector leaves the bottom edge at y1507 */
.game-guide-screen-food-production-7 .game-guide-callout-clear {
  left: 60.741%;
  bottom: 21.510%;
  width: 35.185%;
}
/* master line top y1750, left x126 (no connector in the master) */
.game-guide-screen-food-production-7 .game-guide-callout-deselect {
  left: 10%;
  top: 90.313%;
  width: 43.519%;
}

/* --- connectors --------------------------------------------------- */
/* badge frame bottom y323 -> count box top y377, master arrow x599 */
.game-guide-screen-food-production-7 .game-guide-line-count {
  left: 55.231%;
  top: 16.823%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.813%;
}
/* Nutrition frame bottom y742 -> nutrition box top y793, arrow x270 */
.game-guide-screen-food-production-7 .game-guide-line-nutrition {
  left: 24.769%;
  top: 38.646%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.656%;
}
/* clear box bottom y1507 -> Clear & Back frame top y1550, arrow x844 */
.game-guide-screen-food-production-7 .game-guide-line-clear {
  left: 77.917%;
  top: 78.490%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.240%;
}
/* elbow: table box bottom y1579 -> down x597 -> right to the Confirm
   frame's left edge x695 at y1694 (the master's own elbow) */
.game-guide-screen-food-production-7 .game-guide-line-table-v {
  left: 55.046%;
  top: 82.240%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 6.250%;
}
.game-guide-screen-food-production-7 .game-guide-line-table-h {
  left: 55.046%;
  top: 88.229%;
  width: 9.306%;
  height: 5px;
  height: max(2px, 0.741cqw);
}

/* the master's "tap to close" footer is deliberately NOT reproduced:
   this runs as a web page, where there is nothing to tap to close.
   (Any "Tap to close" baked into the screenshot itself is left alone.) */