/* ===================================================================
   guide.css — in-game help overlay (1080 x 1920 reference design)
   Plain CSS only. No JS, no webfonts, no external resources.
   All class names are prefixed with "game-guide-".

   All positions are % of the 1080x1920 reference frame, so the
   overlay stays aligned with the background screenshot at any width.
   Sizes that must scale with the frame use cqw (1cqw = 1% of the
   canvas width), with a px floor so text stays legible on narrow
   phones.

   Every cqw / clamp() / max() declaration is preceded by a plain px
   declaration. Browsers that do not understand container query units
   ignore the second line and fall back to the px value, which is
   tuned for a ~640px wide canvas. Nothing here requires a polyfill.

   All selectors are prefixed .game-guide- and there are no element,
   html or body selectors, so this file can be concatenated into an
   existing site stylesheet as-is.

   STRUCTURE
     Part 1  shared look - applies to every help screen.
     Part 2+ one block per screen, every rule scoped to that screen's
             class (.game-guide-screen-<key>). Screen keys are supplied
             separately by the user; do not invent one.
   =================================================================== */

/* ===================================================================
   PART 1 - shared look (all screens)
   =================================================================== */

.game-guide-canvas {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Noto Sans KR", "Malgun Gothic", "Microsoft JhengHei",
    "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- background screenshot (decorative; swapped per language) ------ */
/* The image URL is declared ONCE, as --guide-bg on .game-guide-canvas.
   This layer and all six cut-out windows read it from there. */
.game-guide-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-image: var(--guide-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

/* --- dim layer ---------------------------------------------------- */
.game-guide-dim {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 8, 0.6);
  z-index: 1;
}

/* --- undimmed cut-outs -------------------------------------------- */
/* Each window re-shows the background at full brightness inside a
   highlight frame. The inner <span> is scaled to 1080x1920 and offset
   so the correct crop shows through. */
.game-guide-window {
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.game-guide-window > span {
  position: absolute;
  display: block;
  background-image: var(--guide-window-src, var(--guide-bg));
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- white highlight frames --------------------------------------- */
/* Position and size are identical to the Japanese master artwork
   (measured at 792x1407 and scaled to 1080x1920). */
.game-guide-frame {
  position: absolute;
  border: 2px solid #fff;
  border: max(1px, 0.278cqw) solid #fff;
  box-sizing: border-box;
  z-index: 3;
}

/* --- white connector lines ---------------------------------------- */
.game-guide-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 max(1px, 0.56cqw) rgba(0, 0, 0, 0.8);
  z-index: 4;
}

/* --- translucent callout boxes ------------------------------------ */
/* Height is never fixed: padding + line-height + min-height let a
   translation grow by a line or two without clipping. */
.game-guide-callout {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  min-height: 42px;
  min-height: 6.5cqw;
  padding: 8px 13px;
  padding: 1.296cqw 2.037cqw;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  border-radius: 1.111cqw;
  background: rgba(6, 5, 14, 0.86);
  color: #fff;
  font-weight: 700;
  font-size: 20px; /* fallback for browsers without container queries */
  font-size: clamp(10px, 3.148cqw, 34px);
  line-height: 1.38;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* --- plain help text (no box) -------------------------------------- */
.game-guide-text {
  position: absolute;
  z-index: 5;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-size: clamp(10px, 3.148cqw, 34px);
  line-height: 1.45;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* --- page banner ---------------------------------------------------- */
.game-guide-banner {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  padding: 1.852cqw 2.963cqw;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  border-radius: 1.296cqw;
  background: rgba(10, 8, 16, 0.82);
  color: #f5e3b8;
  font-weight: 800;
  font-size: 37px;
  font-size: clamp(16px, 5.833cqw, 63px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* --- second paragraph inside a text block --------------------------- */
.game-guide-para {
  display: block;
  margin-top: 1em;
}

/* --- secondary line inside a callout -------------------------------- */
.game-guide-sub {
  display: block;
  margin-top: 0.5em;
  font-size: 0.82em;
  opacity: 0.9;
}

/* ===================================================================
   SCREEN: home        screen class = .game-guide-screen-home
   -------------------------------------------------------------------
   Everything below is geometry for ONE help screen and is scoped to
   that screen's class. Never define screen geometry on a bare
   .game-guide-* selector - it would leak into every other screen.

   To add a screen, copy this whole block and rename the screen class.
   The screen key is supplied separately by the user; do not invent one.

   Anchored so that longer translations grow into empty space:
   the two top-right boxes grow downward, the character and scarecrow
   boxes are pinned by their bottom edge and grow upward.
   =================================================================== */

/* 1. Mail button (top right) */
.game-guide-screen-home .game-guide-frame-mail,
.game-guide-screen-home .game-guide-window-mail {
  left: 75.093%;
  top: 1.510%;
  width: 11.481%;
  height: 6.042%;
}
.game-guide-screen-home .game-guide-window-mail > span {
  width: 870.968%;
  height: 1655.172%;
  left: -654.032%;
  top: -25%;
}
.game-guide-screen-home .game-guide-callout-mail {
  top: 7.813%;
  right: 25.463%;
  width: max-content;
  max-width: 74%;
  text-align: right;
}
.game-guide-screen-home .game-guide-line-mail-v {
  left: 80.463%;
  top: 7.552%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.396%;
}
.game-guide-screen-home .game-guide-line-mail-h {
  left: 74.537%;
  top: 9.531%;
  width: 6.667%;
  height: 5px;
  height: max(2px, 0.741cqw);
}

/* 2. Trophy / mission button (top right) */
.game-guide-screen-home .game-guide-frame-mission,
.game-guide-screen-home .game-guide-window-mission {
  left: 86.574%;
  top: 1.510%;
  width: 11.574%;
  height: 6.042%;
}
.game-guide-screen-home .game-guide-window-mission > span {
  width: 864%;
  height: 1655.172%;
  left: -748%;
  top: -25%;
}
.game-guide-screen-home .game-guide-callout-mission {
  top: 16.458%;
  right: 25.463%;
  width: max-content;
  max-width: 74%;
  text-align: right;
}
.game-guide-screen-home .game-guide-line-mission-v {
  left: 91.944%;
  top: 7.552%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 10.885%;
}
.game-guide-screen-home .game-guide-line-mission-h {
  left: 74.537%;
  top: 18.021%;
  width: 18.148%;
  height: 5px;
  height: max(2px, 0.741cqw);
}

/* 3. Character-change button (left) */
.game-guide-screen-home .game-guide-frame-character,
.game-guide-screen-home .game-guide-window-character {
  left: 5.556%;
  top: 40.417%;
  width: 11.481%;
  height: 6.042%;
}
.game-guide-screen-home .game-guide-window-character > span {
  width: 870.968%;
  height: 1655.172%;
  left: -48.387%;
  top: -668.966%;
}
.game-guide-screen-home .game-guide-callout-character {
  bottom: 55.313%;
  left: 22.037%;
  width: 61%;
}
.game-guide-screen-home .game-guide-line-character-h {
  left: 17.037%;
  top: 43.229%;
  width: 5.370%;
  height: 5px;
  height: max(2px, 0.741cqw);
}

/* 4. Scarecrow slots (three frames, one shared callout) */
.game-guide-screen-home .game-guide-frame-scarecrow-1,
.game-guide-screen-home .game-guide-window-scarecrow-1 {
  left: 30.185%;
  top: 61.979%;
  width: 11.852%;
  height: 8.073%;
}
.game-guide-screen-home .game-guide-window-scarecrow-1 > span {
  width: 843.750%;
  height: 1238.710%;
  left: -254.688%;
  top: -767.742%;
}
.game-guide-screen-home .game-guide-frame-scarecrow-2,
.game-guide-screen-home .game-guide-window-scarecrow-2 {
  left: 48.611%;
  top: 61.979%;
  width: 12.037%;
  height: 8.073%;
}
.game-guide-screen-home .game-guide-window-scarecrow-2 > span {
  width: 830.769%;
  height: 1238.710%;
  left: -403.846%;
  top: -767.742%;
}
.game-guide-screen-home .game-guide-frame-scarecrow-3,
.game-guide-screen-home .game-guide-window-scarecrow-3 {
  left: 67.037%;
  top: 61.979%;
  width: 12.037%;
  height: 8.073%;
}
.game-guide-screen-home .game-guide-window-scarecrow-3 > span {
  width: 830.769%;
  height: 1238.710%;
  left: -556.923%;
  top: -767.742%;
}
.game-guide-screen-home .game-guide-callout-scarecrow {
  bottom: 41.146%;
  left: 19.491%;
  width: 61%;
  text-align: center;
}
.game-guide-screen-home .game-guide-line-scarecrow-1 {
  left: 35.741%;
  top: 58.854%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
.game-guide-screen-home .game-guide-line-scarecrow-2 {
  left: 54.259%;
  top: 58.854%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
.game-guide-screen-home .game-guide-line-scarecrow-3 {
  left: 72.685%;
  top: 58.854%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}


/* ===================================================================
   SCREEN: scarecrow enhancement
   screen class = .game-guide-screen-scarecrow-enhancement
   -------------------------------------------------------------------
   Composite page. Three images, each declared once on the canvas:
     --guide-bg        the Home screen (shows the scarecrow slots)
     --guide-dialog-a  the "Upgrade" dialog screenshot
     --guide-dialog-b  the "To Shop" dialog screenshot
   Geometry measured from the Japanese master (792x1407) x 1080/792.
   Growth directions: banner down, body text up, note up.
   =================================================================== */

.game-guide-screen-scarecrow-enhancement .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}

/* banner */
.game-guide-screen-scarecrow-enhancement .game-guide-banner-title {
  left: 6.944%;
  top: 10.104%;
  width: 86.111%;
  min-height: 10.729%;
}

/* intro copy */
.game-guide-screen-scarecrow-enhancement .game-guide-text-intro {
  left: 11.111%;
  top: 23.438%;
  width: 78.5%;
}

/* the two dialog panels (cropped from their own screenshots) */
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-a,
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-b {
  top: 42.656%;
  width: 43.796%;
  height: 16.042%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-a {
  left: 3.519%;
  --guide-window-src: var(--guide-dialog-a);
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-b {
  left: 52.315%;
  --guide-window-src: var(--guide-dialog-b);
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-a > span,
.game-guide-screen-scarecrow-enhancement .game-guide-window-dialog-b > span {
  width: 116.004%;
  height: 316.832%;
  left: -8.056%;
  top: -119.967%;
}

/* arrows down to the first two scarecrow slots */
.game-guide-screen-scarecrow-enhancement .game-guide-line-scarecrow-1,
.game-guide-screen-scarecrow-enhancement .game-guide-line-scarecrow-2 {
  top: 58.958%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.021%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-line-scarecrow-1 { left: 35.741%; }
.game-guide-screen-scarecrow-enhancement .game-guide-line-scarecrow-2 { left: 54.259%; }

/* the three scarecrow slots (same coordinates as the Home screen) */
.game-guide-screen-scarecrow-enhancement .game-guide-frame-scarecrow-1,
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-1 {
  left: 30.185%;
  top: 61.979%;
  width: 11.852%;
  height: 8.073%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-1 > span {
  width: 843.750%;
  height: 1238.710%;
  left: -254.688%;
  top: -767.742%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-frame-scarecrow-2,
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-2 {
  left: 48.611%;
  top: 61.979%;
  width: 12.037%;
  height: 8.073%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-2 > span {
  width: 830.769%;
  height: 1238.710%;
  left: -403.846%;
  top: -767.742%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-frame-scarecrow-3,
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-3 {
  left: 67.037%;
  top: 61.979%;
  width: 12.037%;
  height: 8.073%;
}
.game-guide-screen-scarecrow-enhancement .game-guide-window-scarecrow-3 > span {
  width: 830.769%;
  height: 1238.710%;
  left: -556.923%;
  top: -767.742%;
}

/* closing note */
.game-guide-screen-scarecrow-enhancement .game-guide-callout-note {
  left: 1.771%;
  bottom: 9.583%;
  width: 96.463%;
  text-align: center;
}


/* ===================================================================
   SCREEN: dungeon
   screen class = .game-guide-screen-dungeon
   -------------------------------------------------------------------
   Flat dark page (no game background). One image, declared once:
     --guide-bg   the Dungeon screen screenshot, cropped by CSS to the
                  "Goal Floor" panel.
   Geometry measured from the Japanese master (792x1407) x 1080/792.
   Growth directions: banner down, both text blocks down.
   =================================================================== */

.game-guide-screen-dungeon {
  background: #272c30;
}

/* banner - the artwork (characters + light streak) comes from
   --guide-banner; the bloom behind the title is recreated in CSS so the
   title itself stays HTML text. The artwork has no text baked in, so
   one file serves every language. */
.game-guide-screen-dungeon .game-guide-banner-title {
  left: 6.667%;
  top: 9.323%;
  width: 87.037%;
  min-height: 12.292%;
  border: 0;
  border-radius: 0;
  padding: 10px 150px;
  padding: 1.5cqw 14cqw;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 26% 34% at 50% 50%,
      rgba(255, 146, 62, 0.62), rgba(255, 146, 62, 0) 72%),
    var(--guide-banner);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  color: #f4efe6;
  -webkit-text-stroke: 3px rgba(86, 45, 20, 0.95);
  -webkit-text-stroke: 0.56cqw rgba(86, 45, 20, 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 14px rgba(255, 150, 70, 0.75);
  text-shadow: 0 0 2.2cqw rgba(255, 150, 70, 0.75);
}

/* copy above the panel */
.game-guide-screen-dungeon .game-guide-text-intro {
  left: 9.444%;
  top: 24.479%;
  width: 81.315%;
}

/* the Goal Floor panel, cropped from the screenshot */
.game-guide-screen-dungeon .game-guide-window-goal {
  left: 4.815%;
  top: 45.729%;
  width: 90.370%;
  height: 25.990%;
}
.game-guide-screen-dungeon .game-guide-window-goal > span {
  width: 110.092%;
  height: 383.234%;
  left: -5.199%;
  top: -119.361%;
}

/* copy below the panel */
.game-guide-screen-dungeon .game-guide-text-outro {
  left: 8.426%;
  top: 76.146%;
  width: 83.241%;
}


/* ===================================================================
   SCREEN: dungeonAttack        (adventure preparation)
   screen class = .game-guide-screen-dungeonAttack
   -------------------------------------------------------------------
   Annotation screen over the Dungeon setup screenshot. One image:
     --guide-bg   /assets/help/<lang>/dungeonAttack.webp
   Frames measured from the Japanese master (792x1407) x 1080/792.
   The slider-handle frame keeps the master's size but is re-centred on
   the English handle (master centre x322, English x255).
   This screen carries six callouts, so its text is set two steps
   smaller than the shared size and the boxes are kept wide.
   =================================================================== */

.game-guide-screen-dungeonAttack .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

.game-guide-screen-dungeonAttack .game-guide-frame-tabs,
.game-guide-screen-dungeonAttack .game-guide-window-tabs {
  left: 66.019%;
  top: 10.729%;
  width: 29.167%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-tabs > span {
  width: 342.857%;
  height: 1641.026%;
  left: -226.349%;
  top: -176.068%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-formation,
.game-guide-screen-dungeonAttack .game-guide-window-formation {
  left: 75.648%;
  top: 26.927%;
  width: 17.037%;
  height: 3.646%;
}
.game-guide-screen-dungeonAttack .game-guide-window-formation > span {
  width: 586.957%;
  height: 2742.857%;
  left: -444.022%;
  top: -738.571%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-minus,
.game-guide-screen-dungeonAttack .game-guide-window-minus {
  left: 5.278%;
  top: 41.094%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-minus > span {
  width: 857.143%;
  height: 1641.026%;
  left: -45.238%;
  top: -674.359%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-slider,
.game-guide-screen-dungeonAttack .game-guide-window-slider {
  left: 17.778%;
  top: 41.094%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-slider > span {
  width: 857.143%;
  height: 1641.026%;
  left: -152.381%;
  top: -674.359%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-plus,
.game-guide-screen-dungeonAttack .game-guide-window-plus {
  left: 82.870%;
  top: 41.094%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-plus > span {
  width: 857.143%;
  height: 1641.026%;
  left: -710.317%;
  top: -674.359%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-blessing,
.game-guide-screen-dungeonAttack .game-guide-window-blessing {
  left: 81.296%;
  top: 48.906%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-blessing > span {
  width: 857.143%;
  height: 1641.026%;
  left: -696.825%;
  top: -802.564%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-limitation,
.game-guide-screen-dungeonAttack .game-guide-window-limitation {
  left: 6.944%;
  top: 61.510%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-limitation > span {
  width: 857.143%;
  height: 1641.026%;
  left: -59.524%;
  top: -1009.402%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-difficulty,
.game-guide-screen-dungeonAttack .game-guide-window-difficulty {
  left: 74.907%;
  top: 61.510%;
  width: 19.167%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-difficulty > span {
  width: 521.739%;
  height: 1641.026%;
  left: -390.821%;
  top: -1009.402%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-autorepeat,
.game-guide-screen-dungeonAttack .game-guide-window-autorepeat {
  left: 6.944%;
  top: 67.552%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-autorepeat > span {
  width: 857.143%;
  height: 1641.026%;
  left: -59.524%;
  top: -1108.547%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-skip,
.game-guide-screen-dungeonAttack .game-guide-window-skip {
  left: 46.574%;
  top: 67.552%;
  width: 11.667%;
  height: 6.094%;
}
.game-guide-screen-dungeonAttack .game-guide-window-skip > span {
  width: 857.143%;
  height: 1641.026%;
  left: -399.206%;
  top: -1108.547%;
}

.game-guide-screen-dungeonAttack .game-guide-frame-start,
.game-guide-screen-dungeonAttack .game-guide-window-start {
  left: 35.370%;
  top: 78.490%;
  width: 29.444%;
  height: 8.802%;
}
.game-guide-screen-dungeonAttack .game-guide-window-start > span {
  width: 339.623%;
  height: 1136.095%;
  left: -120.126%;
  top: -891.716%;
}

/* --- callouts ----------------------------------------------------- */
/* Each box is anchored on the side its connector arrives from, so a
   longer translation always grows away from its own connector and into
   free space. Line budgets are in README.txt. */

.game-guide-screen-dungeonAttack .game-guide-callout-party {
  top: 18.750%;
  left: 38.519%;
  width: 52%;
}
.game-guide-screen-dungeonAttack .game-guide-callout-goalfloor {
  bottom: 61.198%;
  left: 10.648%;
  width: 78.426%;
  text-align: center;
}
.game-guide-screen-dungeonAttack .game-guide-callout-blessing {
  top: 49.271%;
  right: 24.074%;
  width: max-content;
  max-width: 70%;
  text-align: right;
}
.game-guide-screen-dungeonAttack .game-guide-callout-difficulty {
  top: 56.510%;
  right: 4.630%;
  width: max-content;
  max-width: 74%;
  text-align: right;
}
.game-guide-screen-dungeonAttack .game-guide-callout-checks {
  top: 61.719%;
  left: 23.148%;
  width: 48%;
}
.game-guide-screen-dungeonAttack .game-guide-callout-start {
  top: 88.542%;
  left: 16.204%;
  width: 66%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-dungeonAttack .game-guide-line-party-tabs {
  left: 80.648%;
  top: 16.823%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.927%;
}
.game-guide-screen-dungeonAttack .game-guide-line-party-formation {
  left: 83.796%;
  top: 21.667%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.260%;
}
.game-guide-screen-dungeonAttack .game-guide-line-goalfloor-minus {
  left: 10.648%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeonAttack .game-guide-line-goalfloor-slider {
  left: 23.241%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeonAttack .game-guide-line-goalfloor-plus {
  left: 88.333%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeonAttack .game-guide-line-blessing {
  left: 75.926%;
  top: 51.771%;
  width: 5.370%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeonAttack .game-guide-line-difficulty {
  left: 84.074%;
  top: 59.427%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.083%;
}
.game-guide-screen-dungeonAttack .game-guide-line-checks-limitation {
  left: 18.611%;
  top: 64.271%;
  width: 4.537%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeonAttack .game-guide-line-checks-autorepeat {
  left: 18.611%;
  top: 70.417%;
  width: 6.667%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeonAttack .game-guide-line-checks-rail {
  left: 24.630%;
  top: 64.635%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.938%;
}
.game-guide-screen-dungeonAttack .game-guide-line-checks-skip {
  left: 52.037%;
  top: 64.635%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-dungeonAttack .game-guide-line-start {
  left: 49.722%;
  top: 87.292%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.250%;
}


/* ===================================================================
   SCREEN: battle
   screen class = .game-guide-screen-battle
   -------------------------------------------------------------------
   Annotation screen over the battle screenshot. One image:
     --guide-bg   /assets/help/<lang>/battle.webp
   Frames measured from the Japanese master (792x1407) x 1080/792.
   Seven callouts, so the text is set smaller than the shared size
   (2.407cqw, no clamp floor, so the layout stays proportional).
   Every connector touches both its frame and its callout box.
   =================================================================== */

.game-guide-screen-battle .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

.game-guide-screen-battle .game-guide-frame-battery,
.game-guide-screen-battle .game-guide-window-battery {
  left: 75.370%;
  top: 2.135%;
  width: 12.407%;
  height: 4.531%;
}
.game-guide-screen-battle .game-guide-window-battery > span {
  width: 805.970%;
  height: 2206.897%;
  left: -607.463%;
  top: -47.126%;
}

.game-guide-screen-battle .game-guide-frame-gear,
.game-guide-screen-battle .game-guide-window-gear {
  left: 87.778%;
  top: 2.135%;
  width: 10.648%;
  height: 4.531%;
}
.game-guide-screen-battle .game-guide-window-gear > span {
  width: 939.130%;
  height: 2206.897%;
  left: -824.348%;
  top: -47.126%;
}

.game-guide-screen-battle .game-guide-frame-log,
.game-guide-screen-battle .game-guide-window-log {
  left: 25.741%;
  top: 43.958%;
  width: 73.519%;
  height: 3.490%;
}
.game-guide-screen-battle .game-guide-window-log > span {
  width: 136.020%;
  height: 2865.672%;
  left: -35.013%;
  top: -1259.701%;
}

.game-guide-screen-battle .game-guide-frame-floor,
.game-guide-screen-battle .game-guide-window-floor {
  left: 0.000%;
  top: 48.594%;
  width: 29.444%;
  height: 4.948%;
}
.game-guide-screen-battle .game-guide-window-floor > span {
  width: 339.623%;
  height: 2021.053%;
  left: -0.000%;
  top: -982.105%;
}

.game-guide-screen-battle .game-guide-frame-lvup,
.game-guide-screen-battle .game-guide-window-lvup {
  left: 60.741%;
  top: 68.802%;
  width: 17.685%;
  height: 3.125%;
}
.game-guide-screen-battle .game-guide-window-lvup > span {
  width: 565.445%;
  height: 3200.000%;
  left: -343.455%;
  top: -2201.667%;
}

.game-guide-screen-battle .game-guide-frame-maxhp,
.game-guide-screen-battle .game-guide-window-maxhp {
  left: 13.519%;
  top: 75.729%;
  width: 17.685%;
  height: 3.281%;
}
.game-guide-screen-battle .game-guide-window-maxhp > span {
  width: 565.445%;
  height: 3047.619%;
  left: -76.440%;
  top: -2307.937%;
}

.game-guide-screen-battle .game-guide-frame-speed,
.game-guide-screen-battle .game-guide-window-speed {
  left: 2.407%;
  top: 92.917%;
  width: 40.185%;
  height: 6.094%;
}
.game-guide-screen-battle .game-guide-window-speed > span {
  width: 248.848%;
  height: 1641.026%;
  left: -5.991%;
  top: -1524.786%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-battle .game-guide-callout-dim {
  top: 2.969%;
  right: 27.778%;
  width: max-content;
  max-width: 68%;
  text-align: right;
}
.game-guide-screen-battle .game-guide-callout-retreat {
  top: 9.375%;
  right: 1.574%;
  width: max-content;
  max-width: 92%;
  text-align: right;
}
.game-guide-screen-battle .game-guide-callout-blessing {
  bottom: 58.854%;
  left: 18.519%;
  width: 75%;
}
.game-guide-screen-battle .game-guide-callout-floor {
  top: 49.583%;
  left: 33.333%;
  width: 50%;
}
.game-guide-screen-battle .game-guide-callout-lvup {
  bottom: 34.115%;
  right: 1.574%;
  width: max-content;
  max-width: 60%;
  text-align: right;
}
.game-guide-screen-battle .game-guide-callout-stat {
  top: 80.573%;
  left: 2.407%;
  width: 70%;
}
.game-guide-screen-battle .game-guide-callout-speed {
  bottom: 8.646%;
  left: 2.407%;
  width: 70%;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-battle .game-guide-line-dim {
  left: 72.222%;
  top: 4.219%;
  width: 3.148%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-battle .game-guide-line-retreat {
  left: 92.639%;
  top: 6.667%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.708%;
}
.game-guide-screen-battle .game-guide-line-blessing {
  left: 62.176%;
  top: 41.146%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.813%;
}
.game-guide-screen-battle .game-guide-line-floor {
  left: 29.444%;
  top: 50.885%;
  width: 3.889%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-battle .game-guide-line-lvup {
  left: 69.306%;
  top: 65.885%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-battle .game-guide-line-stat {
  left: 22.083%;
  top: 79.010%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.563%;
}
.game-guide-screen-battle .game-guide-line-speed {
  left: 22.269%;
  top: 91.354%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.563%;
}


/* ===================================================================
   SCREEN: LevelUp
   screen class = .game-guide-screen-LevelUp
   -------------------------------------------------------------------
   Annotation screen over the battle screenshot with the stat panel.
   One image:
     --guide-bg   /assets/help/<lang>/LevelUp.webp
   Frames measured from the Japanese master (791x1406) x 1080/791.
   The Feature-icon frame keeps the master's size but is re-centred on
   the English icon (the master shows two Feature icons and frames the
   second; the English build has one).
   Six callouts, so the text is set to 2.407cqw with no clamp floor.
   =================================================================== */

.game-guide-screen-LevelUp .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

.game-guide-screen-LevelUp .game-guide-frame-log,
.game-guide-screen-LevelUp .game-guide-window-log {
  left: 35.370%;
  top: 41.979%;
  width: 64.630%;
  height: 10.729%;
}
.game-guide-screen-LevelUp .game-guide-window-log > span {
  width: 154.728%;
  height: 932.039%;
  left: -54.728%;
  top: -391.262%;
}

.game-guide-screen-LevelUp .game-guide-frame-maxhpLu,
.game-guide-screen-LevelUp .game-guide-window-maxhpLu {
  left: 31.759%;
  top: 73.750%;
  width: 17.593%;
  height: 4.271%;
}
.game-guide-screen-LevelUp .game-guide-window-maxhpLu > span {
  width: 568.421%;
  height: 2341.463%;
  left: -180.526%;
  top: -1726.829%;
}

.game-guide-screen-LevelUp .game-guide-frame-defLu,
.game-guide-screen-LevelUp .game-guide-window-defLu {
  left: 81.389%;
  top: 73.750%;
  width: 17.593%;
  height: 4.271%;
}
.game-guide-screen-LevelUp .game-guide-window-defLu > span {
  width: 568.421%;
  height: 2341.463%;
  left: -462.632%;
  top: -1726.829%;
}

.game-guide-screen-LevelUp .game-guide-frame-patkLu,
.game-guide-screen-LevelUp .game-guide-window-patkLu {
  left: 31.759%;
  top: 80.313%;
  width: 17.593%;
  height: 4.219%;
}
.game-guide-screen-LevelUp .game-guide-window-patkLu > span {
  width: 568.421%;
  height: 2370.370%;
  left: -180.526%;
  top: -1903.704%;
}

.game-guide-screen-LevelUp .game-guide-frame-critLu,
.game-guide-screen-LevelUp .game-guide-window-critLu {
  left: 81.389%;
  top: 80.313%;
  width: 17.593%;
  height: 4.219%;
}
.game-guide-screen-LevelUp .game-guide-window-critLu > span {
  width: 568.421%;
  height: 2370.370%;
  left: -462.632%;
  top: -1903.704%;
}

.game-guide-screen-LevelUp .game-guide-frame-feature,
.game-guide-screen-LevelUp .game-guide-window-feature {
  left: 11.111%;
  top: 86.354%;
  width: 8.704%;
  height: 4.896%;
}
.game-guide-screen-LevelUp .game-guide-window-feature > span {
  width: 1148.936%;
  height: 2042.553%;
  left: -127.660%;
  top: -1763.830%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-LevelUp .game-guide-callout-cap {
  top: 6.771%;
  left: 9.444%;
  width: 81.7%;
  text-align: center;
}
/* the rarity table is a bordered box with no fill, as in the master */
.game-guide-screen-LevelUp .game-guide-callout-caps {
  top: 13.958%;
  left: 5.185%;
  width: 90.370%;
  min-height: 4.688%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 2, 8, 0.35);
  border: 2px solid #fff;
  border: max(1px, 0.185cqw) solid #fff;
  border-radius: 0;
  text-align: center;
}
.game-guide-screen-LevelUp .game-guide-callout-unlock {
  top: 23.490%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-LevelUp .game-guide-callout-log {
  bottom: 60.938%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-LevelUp .game-guide-callout-exp {
  bottom: 29.167%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-LevelUp .game-guide-callout-feature {
  top: 93.229%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-LevelUp .game-guide-line-log {
  left: 63.009%;
  top: 39.063%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-LevelUp .game-guide-line-exp-maxhp {
  left: 40.324%;
  top: 70.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-LevelUp .game-guide-line-exp-def {
  left: 89.954%;
  top: 70.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-LevelUp .game-guide-line-feature {
  left: 15.231%;
  top: 91.250%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.979%;
}


/* ===================================================================
   SCREEN: skillEnhance
   screen class = .game-guide-screen-skillEnhance
   -------------------------------------------------------------------
   Text-heavy screen. As in the Japanese master, the screenshot is
   shifted UP by 198 reference px to free space at the bottom for the
   closing note; the canvas colour shows through below it.
   One image:
     --guide-bg   /assets/help/<lang>/skillEnhance.webp
   Because of that shift, each cut-out window samples the source at
   canvas-y + 198.
   Frames come from the Japanese master (791x1407) x 1080/791, then
   each one is CENTRED on the English element it points at - the
   English rows and labels sit a few px differently from the master's.
   =================================================================== */

.game-guide-screen-skillEnhance {
  background: #060609;
}
.game-guide-screen-skillEnhance .game-guide-background {
  top: -10.313%;
}
.game-guide-screen-skillEnhance .game-guide-dim {
  background: rgba(3, 2, 8, 0.76);
}
.game-guide-screen-skillEnhance .game-guide-text {
  box-sizing: border-box;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  border-radius: 1.111cqw;
  background: rgba(6, 5, 14, 0.86);
  text-shadow: none;
  font-size: 20px;
  font-size: 2.407cqw;
  line-height: 1.4;
}
.game-guide-screen-skillEnhance .game-guide-text-warn {
  color: #ffe07a;
}

.game-guide-screen-skillEnhance .game-guide-frame-skill1,
.game-guide-screen-skillEnhance .game-guide-window-skill1 {
  left: 4.259%;
  top: 23.281%;
  width: 40.741%;
  height: 4.219%;
}
.game-guide-screen-skillEnhance .game-guide-window-skill1 > span {
  width: 245.455%;
  height: 2370.370%;
  left: -10.455%;
  top: -796.296%;
}

.game-guide-screen-skillEnhance .game-guide-frame-skill2,
.game-guide-screen-skillEnhance .game-guide-window-skill2 {
  left: 53.796%;
  top: 23.281%;
  width: 40.741%;
  height: 4.219%;
}
.game-guide-screen-skillEnhance .game-guide-window-skill2 > span {
  width: 245.455%;
  height: 2370.370%;
  left: -132.045%;
  top: -796.296%;
}

.game-guide-screen-skillEnhance .game-guide-frame-rate,
.game-guide-screen-skillEnhance .game-guide-window-rate {
  left: 59.074%;
  top: 45.000%;
  width: 31.852%;
  height: 4.219%;
}
.game-guide-screen-skillEnhance .game-guide-window-rate > span {
  width: 313.953%;
  height: 2370.370%;
  left: -185.465%;
  top: -1311.111%;
}

.game-guide-screen-skillEnhance .game-guide-frame-protect,
.game-guide-screen-skillEnhance .game-guide-window-protect {
  left: 0.370%;
  top: 51.302%;
  width: 99.630%;
  height: 3.750%;
}
.game-guide-screen-skillEnhance .game-guide-window-protect > span {
  width: 100.372%;
  height: 2666.667%;
  left: -0.372%;
  top: -1643.056%;
}

.game-guide-screen-skillEnhance .game-guide-frame-auto,
.game-guide-screen-skillEnhance .game-guide-window-auto {
  left: 0.370%;
  top: 64.792%;
  width: 99.630%;
  height: 4.792%;
}
.game-guide-screen-skillEnhance .game-guide-window-auto > span {
  width: 100.372%;
  height: 2086.957%;
  left: -0.372%;
  top: -1567.391%;
}

/* --- copy blocks -------------------------------------------------- */
.game-guide-screen-skillEnhance .game-guide-text-skills {
  bottom: 80.313%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-skillEnhance .game-guide-text-rate {
  bottom: 57.865%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-skillEnhance .game-guide-text-swap {
  top: 43.385%;
  left: 2.778%;
  width: 45%;
}
.game-guide-screen-skillEnhance .game-guide-text-protect {
  top: 56.875%;
  left: 2.500%;
  width: 95%;
  text-align: center;
}
.game-guide-screen-skillEnhance .game-guide-text-keepauto {
  top: 73.385%;
  left: 2.500%;
  width: 45%;
}
.game-guide-screen-skillEnhance .game-guide-text-captap {
  top: 73.385%;
  left: 49.074%;
  width: 47%;
}
.game-guide-screen-skillEnhance .game-guide-text-pack {
  top: 82.917%;
  left: 2.500%;
  width: 95%;
  text-align: center;
}
.game-guide-screen-skillEnhance .game-guide-text-warn {
  top: 88.854%;
  left: 2.500%;
  width: 95%;
  text-align: center;
}

/* --- connectors (each spans text-block edge -> frame edge) --------- */
.game-guide-screen-skillEnhance .game-guide-line-skills-1 {
  left: 24.398%;
  top: 19.688%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}
.game-guide-screen-skillEnhance .game-guide-line-skills-2 {
  left: 73.935%;
  top: 19.688%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}
.game-guide-screen-skillEnhance .game-guide-line-rate {
  left: 74.769%;
  top: 42.135%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.865%;
}
.game-guide-screen-skillEnhance .game-guide-line-swap {
  left: 45.787%;
  top: 46.302%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.000%;
}
.game-guide-screen-skillEnhance .game-guide-line-protect-1 {
  left: 4.213%;
  top: 55.052%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.823%;
}
.game-guide-screen-skillEnhance .game-guide-line-protect-2 {
  left: 54.120%;
  top: 55.052%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.823%;
}
.game-guide-screen-skillEnhance .game-guide-line-keepauto {
  left: 4.213%;
  top: 69.583%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.802%;
}
.game-guide-screen-skillEnhance .game-guide-line-captap {
  left: 73.472%;
  top: 69.583%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.802%;
}


/* ===================================================================
   SCREEN: limitbreak
   screen class = .game-guide-screen-limitbreak
   -------------------------------------------------------------------
   Composite page, as in the Japanese master: the character STAT screen
   is the background (it carries the Skill Enhance / Limit Break
   buttons), and the two Limit Break dialog panels are composited in
   from the Limit Break screenshot.
     --guide-bg      /assets/help/<lang>/limitbreak.webp        (stat screen)
     --guide-panel   /assets/help/<lang>/limitbreak-panel.webp  (dialog)
   Frame positions come from the master (792x1407 x 1080/792). The two
   composited panels keep their source aspect ratio, so they are a
   little wider than the master's boxes; each is re-centred on the
   master's box centre. Every frame's right edge stays inside 1080 so
   its border is never clipped by the canvas.
   =================================================================== */

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

.game-guide-screen-limitbreak .game-guide-frame-effect,
.game-guide-screen-limitbreak .game-guide-window-effect {
  left: 50.093%;
  top: 33.385%;
  width: 49.352%;
  height: 21.719%;
}
.game-guide-screen-limitbreak .game-guide-window-effect {
  --guide-window-src: var(--guide-panel);
}
.game-guide-screen-limitbreak .game-guide-window-effect > span {
  width: 203.774%;
  height: 462.651%;
  left: -102.830%;
  top: -155.422%;
}

.game-guide-screen-limitbreak .game-guide-frame-held,
.game-guide-screen-limitbreak .game-guide-window-held {
  left: 59.074%;
  top: 56.875%;
  width: 31.019%;
  height: 13.229%;
}
.game-guide-screen-limitbreak .game-guide-window-held {
  --guide-window-src: var(--guide-panel);
}
.game-guide-screen-limitbreak .game-guide-window-held > span {
  width: 348.387%;
  height: 817.021%;
  left: -211.290%;
  top: -468.085%;
}

.game-guide-screen-limitbreak .game-guide-frame-buttons,
.game-guide-screen-limitbreak .game-guide-window-buttons {
  left: 50.000%;
  top: 86.458%;
  width: 50.000%;
  height: 4.896%;
}
.game-guide-screen-limitbreak .game-guide-window-buttons > span {
  width: 200.000%;
  height: 2042.553%;
  left: -100.000%;
  top: -1765.957%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-limitbreak .game-guide-callout-effect {
  bottom: 71.927%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-limitbreak .game-guide-callout-heart {
  top: 71.354%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-limitbreak .game-guide-callout-open {
  top: 93.750%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-limitbreak .game-guide-line-effect {
  left: 74.213%;
  top: 28.073%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.313%;
}
.game-guide-screen-limitbreak .game-guide-line-heart {
  left: 74.213%;
  top: 70.104%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.250%;
}
.game-guide-screen-limitbreak .game-guide-line-open {
  left: 74.213%;
  top: 91.354%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.396%;
}


/* ===================================================================
   SCREEN: party
   screen class = .game-guide-screen-party
   -------------------------------------------------------------------
   Annotation screen over the Party screenshot. One image:
     --guide-bg   /assets/help/<lang>/party.webp
   Frame sizes come from the master (791x1408 x 1080/791); each frame is
   centred on the English element. Six callouts, so the text is set to
   2.407cqw with no clamp floor.
   =================================================================== */

.game-guide-screen-party .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

.game-guide-screen-party .game-guide-frame-tabs,
.game-guide-screen-party .game-guide-window-tabs {
  left: 74.537%;
  top: 2.708%;
  width: 25.000%;
  height: 4.427%;
}
.game-guide-screen-party .game-guide-window-tabs > span {
  width: 400.000%;
  height: 2258.824%;
  left: -298.148%;
  top: -61.176%;
}

.game-guide-screen-party .game-guide-frame-row,
.game-guide-screen-party .game-guide-window-row {
  left: 0.000%;
  top: 7.396%;
  width: 100.000%;
  height: 15.729%;
}
.game-guide-screen-party .game-guide-window-row > span {
  width: 100.000%;
  height: 635.762%;
  left: -0.000%;
  top: -47.020%;
}

.game-guide-screen-party .game-guide-frame-sortbar,
.game-guide-screen-party .game-guide-window-sortbar {
  left: 12.222%;
  top: 47.604%;
  width: 79.259%;
  height: 4.740%;
}
.game-guide-screen-party .game-guide-window-sortbar > span {
  width: 126.168%;
  height: 2109.890%;
  left: -15.421%;
  top: -1004.396%;
}

.game-guide-screen-party .game-guide-frame-icon,
.game-guide-screen-party .game-guide-window-icon {
  left: 7.037%;
  top: 65.208%;
  width: 15.556%;
  height: 9.531%;
}
.game-guide-screen-party .game-guide-window-icon > span {
  width: 642.857%;
  height: 1049.180%;
  left: -45.238%;
  top: -684.153%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-party .game-guide-callout-save {
  top: 3.490%;
  right: 29.630%;
  width: max-content;
  max-width: 66%;
  text-align: right;
}
.game-guide-screen-party .game-guide-callout-left {
  top: 24.896%;
  left: 2.500%;
  width: 95%;
}
.game-guide-screen-party .game-guide-callout-sort {
  top: 55.417%;
  left: 2.500%;
  width: 95%;
}
.game-guide-screen-party .game-guide-callout-detail {
  top: 67.813%;
  left: 26.852%;
  width: 68%;
}
.game-guide-screen-party .game-guide-callout-place {
  top: 77.865%;
  left: 2.500%;
  width: 95%;
}
.game-guide-screen-party .game-guide-callout-deselect {
  top: 89.167%;
  left: 2.500%;
  width: 95%;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-party .game-guide-line-save {
  left: 70.370%;
  top: 4.792%;
  width: 4.167%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-party .game-guide-line-left {
  left: 6.435%;
  top: 23.125%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.771%;
}
.game-guide-screen-party .game-guide-line-sort {
  left: 51.574%;
  top: 52.344%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.073%;
}
.game-guide-screen-party .game-guide-line-detail {
  left: 22.593%;
  top: 69.271%;
  width: 4.259%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-party .game-guide-line-place {
  left: 14.583%;
  top: 74.740%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}


/* ===================================================================
   SCREEN: artifact
   screen class = .game-guide-screen-artifact
   -------------------------------------------------------------------
   Annotation screen over the Rum's Spring / artifact list screenshot.
   One image:
     --guide-bg   /assets/help/<lang>/artifact.webp
   Frame sizes come from the master (791x1406 x 1080/791); each frame is
   centred on the English element. The effect-description frame is
   widened and its left edge held clear of the artifact icon's ornate
   border. Six callouts, text at 2.407cqw with no clamp floor.
   =================================================================== */

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

.game-guide-screen-artifact .game-guide-frame-counter,
.game-guide-screen-artifact .game-guide-window-counter {
  left: 42.685%;
  top: 43.594%;
  width: 12.037%;
  height: 3.073%;
}
.game-guide-screen-artifact .game-guide-window-counter > span {
  width: 830.769%;
  height: 3254.237%;
  left: -354.615%;
  top: -1418.644%;
}

.game-guide-screen-artifact .game-guide-frame-statpair,
.game-guide-screen-artifact .game-guide-window-statpair {
  left: 26.759%;
  top: 51.563%;
  width: 19.444%;
  height: 2.656%;
}
.game-guide-screen-artifact .game-guide-window-statpair > span {
  width: 514.286%;
  height: 3764.706%;
  left: -137.619%;
  top: -1941.176%;
}

.game-guide-screen-artifact .game-guide-frame-desc,
.game-guide-screen-artifact .game-guide-window-desc {
  left: 17.593%;
  top: 63.854%;
  width: 53.241%;
  height: 2.760%;
}
.game-guide-screen-artifact .game-guide-window-desc > span {
  width: 187.826%;
  height: 3622.642%;
  left: -33.043%;
  top: -2313.208%;
}

.game-guide-screen-artifact .game-guide-frame-upgrade,
.game-guide-screen-artifact .game-guide-window-upgrade {
  left: 73.241%;
  top: 78.281%;
  width: 25.278%;
  height: 6.563%;
}
.game-guide-screen-artifact .game-guide-window-upgrade > span {
  width: 395.604%;
  height: 1523.810%;
  left: -289.744%;
  top: -1192.857%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-artifact .game-guide-callout-offer {
  top: 7.813%;
  left: 3.704%;
  width: 93%;
}
.game-guide-screen-artifact .game-guide-callout-total {
  bottom: 59.479%;
  left: 3.704%;
  width: 93%;
  text-align: center;
}
/* hugs its text; positioned so the connector lands on the ">" between
   the two stat boxes (x394) */
.game-guide-screen-artifact .game-guide-callout-stat {
  top: 57.604%;
  left: 6.481%;
  width: max-content;
  max-width: 80%;
}
.game-guide-screen-artifact .game-guide-callout-droprate {
  top: 70.052%;
  left: 6.481%;
  width: 88%;
}
.game-guide-screen-artifact .game-guide-callout-rank {
  top: 80.104%;
  right: 30.741%;
  width: max-content;
  max-width: 66%;
  text-align: right;
}
.game-guide-screen-artifact .game-guide-callout-stones {
  top: 91.406%;
  left: 3.704%;
  width: 93%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-artifact .game-guide-line-total {
  left: 49.491%;
  top: 40.521%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.073%;
}
.game-guide-screen-artifact .game-guide-line-stat {
  left: 36.250%;
  top: 54.219%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.385%;
}
.game-guide-screen-artifact .game-guide-line-droprate {
  left: 36.250%;
  top: 66.615%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.438%;
}
.game-guide-screen-artifact .game-guide-line-rank {
  left: 69.259%;
  top: 81.406%;
  width: 3.981%;
  height: 5px;
  height: max(2px, 0.741cqw);
}


/* ===================================================================
   SCREEN: summon
   screen class = .game-guide-screen-summon
   -------------------------------------------------------------------
   Annotation screen over the Summon screen screenshot.
   One image:
     --guide-bg   /assets/help/<lang>/summon.webp
   Master: JA summon 791x1405, scale 1080/791 = 1.36536.
   Master frames (791-space -> 1080-space):
     tabs    x0..540    y98..204    ->  w737 h145
     star5   x24..645   y979..1085  ->  w848 h145
     arrowL  x4..74     y1138..1244 ->  w96  h145
     arrowR  x718..788  y1138..1244 ->  w96  h145
   The English build has THREE summon tabs (JA has two) and SIX star-5
   icons (JA has five), so those two frames are widened to hug the wider
   English elements with the master's 8-13px margin; the master HEIGHT
   (145) is kept on all four frames. The two arrow frames keep the
   master size and are held symmetrical about the canvas centre.
   Measured English element extents (1080x1920):
     tab strip    x16..1061   y146..269    centre y 207.5
     star5 row    x47..1032   y1342..1474  centre y 1408
     left arrow   x32..79     y1584..1677  centre 55.5 / 1630.5
     right arrow  x1005..1052 y1584..1677  centre 1028.5 / 1630.5
   The English bottom nav sits ~75px higher than the Japanese one, so
   the arrow callout is anchored by its TOP just under the arrow frames
   and grows downward into the free strip at the foot of the screen.
   =================================================================== */

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

/* 1. summon type tabs (3px clear of both canvas edges, as in the master) */
.game-guide-screen-summon .game-guide-frame-tabs,
.game-guide-screen-summon .game-guide-window-tabs {
  left: 0.278%;
  top: 7.031%;
  width: 99.444%;
  height: 7.552%;
}
.game-guide-screen-summon .game-guide-window-tabs > span {
  width: 100.559%;
  height: 1324.138%;
  left: -0.279%;
  top: -93.103%;
}

/* 2. star-5 character list */
.game-guide-screen-summon .game-guide-frame-star5,
.game-guide-screen-summon .game-guide-window-star5 {
  left: 3.611%;
  top: 69.583%;
  width: 92.685%;
  height: 7.552%;
}
.game-guide-screen-summon .game-guide-window-star5 > span {
  width: 107.892%;
  height: 1324.138%;
  left: -3.896%;
  top: -921.379%;
}

/* 3. left / right banner arrows (paired, symmetrical) */
.game-guide-screen-summon .game-guide-frame-arrow-l,
.game-guide-screen-summon .game-guide-window-arrow-l,
.game-guide-screen-summon .game-guide-frame-arrow-r,
.game-guide-screen-summon .game-guide-window-arrow-r {
  top: 81.146%;
  width: 8.889%;
  height: 7.552%;
}
.game-guide-screen-summon .game-guide-frame-arrow-l,
.game-guide-screen-summon .game-guide-window-arrow-l {
  left: 0.556%;
}
.game-guide-screen-summon .game-guide-frame-arrow-r,
.game-guide-screen-summon .game-guide-window-arrow-r {
  left: 90.556%;
}
.game-guide-screen-summon .game-guide-window-arrow-l > span {
  width: 1125%;
  height: 1324.138%;
  left: -6.250%;
  top: -1074.483%;
}
.game-guide-screen-summon .game-guide-window-arrow-r > span {
  width: 1125%;
  height: 1324.138%;
  left: -1018.750%;
  top: -1074.483%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-summon .game-guide-callout-tabs {
  top: 18.229%;
  left: 3.704%;
  width: 93%;
}
/* anchored by its BOTTOM so extra translated lines grow up into the
   dimmed artwork, never down onto the star-5 frame */
.game-guide-screen-summon .game-guide-callout-star5 {
  bottom: 34.271%;
  left: 3.704%;
  width: 93%;
}
/* anchored by its TOP: the free strip below the arrow frames */
.game-guide-screen-summon .game-guide-callout-arrows {
  top: 91.042%;
  left: 3.704%;
  width: 93%;
}

/* --- connectors --------------------------------------------------- */
/* tabs: frame bottom 280 -> callout top 350 */
.game-guide-screen-summon .game-guide-line-tabs {
  left: 49.630%;
  top: 14.583%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.646%;
}
/* star5: callout bottom 1262 -> frame top 1336 */
.game-guide-screen-summon .game-guide-line-star5 {
  left: 49.630%;
  top: 65.729%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.854%;
}
/* arrows: frame bottom 1703 -> callout top 1748, one per frame centre */
.game-guide-screen-summon .game-guide-line-arrow-l,
.game-guide-screen-summon .game-guide-line-arrow-r {
  top: 88.698%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.344%;
}
.game-guide-screen-summon .game-guide-line-arrow-l { left: 4.630%; }
.game-guide-screen-summon .game-guide-line-arrow-r { left: 94.630%; }


/* ===================================================================
   SCREEN: summon-result
   screen class = .game-guide-screen-summon-result
   -------------------------------------------------------------------
   Annotation screen over the Summon Result screenshot.
   One image:
     --guide-bg   /assets/help/<lang>/summon-result.webp
   Master: JA summon result 792x1407, scale 1080/792 = 1.363636.
   Master frames (792-space -> 1080-space):
     skip row    x588..782  y25..90     ->  266 x 89
     auto row    x588..782  y90..154    ->  266 x 87
     heart count x277..510  y1093..1160 ->  319 x 93
   The two checkbox rows are one bordered box with a divider at y90 in
   the master, so they are drawn as two stacked frames sharing an edge
   over ONE cut-out window; the shared edge is the divider.
   Measured English element extents (1080x1920):
     Skip row         x828..967   y49..105    centre y 77
     Auto Summon row  x828..1061  y138..194   centre y 166
     both rows        x828..1061  y49..194    centre y 121.5
   The English "Auto Summon" label ends 19px from the canvas edge, so the
   checkbox frame cannot both keep the master's 14px canvas clearance and
   sit centred on the element. It keeps the master WIDTH (266) and is
   placed at x808..1074: 6px canvas clearance, interior margins 20 left /
   13 right.
     heart counter    x385..696   y1496..1572 centre 540.5 / 1534
   =================================================================== */

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

/* 1. Skip / Auto Summon checkboxes - one window, two frames */
.game-guide-screen-summon-result .game-guide-window-checks {
  left: 74.815%;
  top: 1.771%;
  width: 24.630%;
  height: 9.167%;
}
.game-guide-screen-summon-result .game-guide-window-checks > span {
  width: 406.015%;
  height: 1090.909%;
  left: -303.759%;
  top: -19.318%;
}
.game-guide-screen-summon-result .game-guide-frame-skip {
  left: 74.815%;
  top: 1.771%;
  width: 24.630%;
  height: 4.635%;
}
.game-guide-screen-summon-result .game-guide-frame-auto {
  left: 74.815%;
  top: 6.406%;
  width: 24.630%;
  height: 4.531%;
}

/* 2. heart (limit break material) counter */
.game-guide-screen-summon-result .game-guide-frame-heart,
.game-guide-screen-summon-result .game-guide-window-heart {
  left: 35.278%;
  top: 77.500%;
  width: 29.537%;
  height: 4.844%;
}
.game-guide-screen-summon-result .game-guide-window-heart > span {
  width: 338.558%;
  height: 2064.516%;
  left: -119.436%;
  top: -1600%;
}

/* --- callouts ----------------------------------------------------- */
/* sits to the LEFT of the checkbox box, as in the master, with a
   horizontal connector instead of the master's inline arrow glyph */
.game-guide-screen-summon-result .game-guide-callout-skip {
  top: 2.552%;
  right: 29.259%;
  width: 40%;
  text-align: right;
}
.game-guide-screen-summon-result .game-guide-callout-auto {
  top: 15.781%;
  left: 9.444%;
  width: 83.333%;
}
/* anchored by its BOTTOM so extra translated lines grow up into the
   dimmed result grid, never down onto the heart counter frame */
.game-guide-screen-summon-result .game-guide-callout-heart {
  bottom: 24.323%;
  left: 9.444%;
  width: 78.889%;
}
.game-guide-screen-summon-result .game-guide-callout-total {
  top: 87.396%;
  left: 9.444%;
  width: 77.685%;
}

/* --- connectors --------------------------------------------------- */
/* skip: callout right 764 -> frame left 808, at the skip row centre */
.game-guide-screen-summon-result .game-guide-line-skip {
  left: 70.741%;
  top: 3.880%;
  width: 4.074%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* auto: frame bottom 210 -> callout top 303 */
.game-guide-screen-summon-result .game-guide-line-auto {
  left: 86.759%;
  top: 10.938%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.844%;
}
/* heart: callout bottom 1453 -> frame top 1488 */
.game-guide-screen-summon-result .game-guide-line-heart {
  left: 49.722%;
  top: 75.677%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.823%;
}
/* total: frame bottom 1581 -> callout top 1678 */
.game-guide-screen-summon-result .game-guide-line-total {
  left: 49.722%;
  top: 82.344%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.052%;
}


/* ===================================================================
   SCREEN: how-to-apply
   screen class = .game-guide-screen-how-to-apply
   -------------------------------------------------------------------
   Annotation screen over the adventure-preparation Settings row.
   One image:
     --guide-bg   /assets/help/<lang>/how-to-apply.webp
   Master: JA how to apply 792x1407, scale 1080/792 = 1.363636.
   In the master this is ONE bordered box, x58..749 y866..951, with a
   vertical divider at x569: the left cell holds the Apply Limitation
   checkbox + Total Difficulty, the right cell the Difficulty Settings
   button. It is reproduced as two side-by-side frames sharing an edge
   over a single cut-out window, so the shared edge draws the divider
   and the cut-out has no seam.
   Master, scaled:  outer 942 x 116,  divider at 74.0% of the width
   Measured English element extents (1080x1920):
     checkbox           x107..169
     Apply Limitation   x184..497
     Total Difficulty   x562..663
     difficulty value   x732..745
     Difficulty btn     x816..998   y1209..1275
     whole row          x107..998   y1209..1275   centre 552.5 / 1242
   =================================================================== */

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

/* the Settings row - one window, two frames sharing the divider edge */
.game-guide-screen-how-to-apply .game-guide-window-row {
  left: 7.593%;
  top: 61.667%;
  width: 87.222%;
  height: 6.042%;
}
.game-guide-screen-how-to-apply .game-guide-window-row > span {
  width: 114.650%;
  height: 1655.172%;
  left: -8.705%;
  top: -1020.690%;
}
.game-guide-screen-how-to-apply .game-guide-frame-apply {
  left: 7.593%;
  top: 61.667%;
  width: 64.630%;
  height: 6.042%;
}
.game-guide-screen-how-to-apply .game-guide-frame-difficulty {
  left: 72.222%;
  top: 61.667%;
  width: 22.593%;
  height: 6.042%;
}

/* --- callouts ----------------------------------------------------- */
/* anchored by its BOTTOM so extra translated lines grow up into the
   dimmed Blessing block, never down onto the frame */
.game-guide-screen-how-to-apply .game-guide-callout-apply {
  bottom: 41.771%;
  left: 6.296%;
  width: 70.741%;
}
.game-guide-screen-how-to-apply .game-guide-callout-difficulty {
  top: 73.125%;
  left: 6.296%;
  width: 88.426%;
}

/* --- connectors --------------------------------------------------- */
/* apply: callout bottom 1118 -> frame top 1184, on the checkbox centre */
.game-guide-screen-how-to-apply .game-guide-line-apply {
  left: 12.407%;
  top: 58.229%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.438%;
}
/* difficulty: frame bottom 1300 -> callout top 1404, on the button centre */
.game-guide-screen-how-to-apply .game-guide-line-difficulty {
  left: 83.611%;
  top: 67.708%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.417%;
}


/* ===================================================================
   SCREEN: difficulty-details
   screen class = .game-guide-screen-difficulty-details
   -------------------------------------------------------------------
   Annotation screen over the Limitation difficulty detail screen.
   One image:
     --guide-bg   /assets/help/<lang>/difficulty-details.webp
   Master: JA 791x1406, scale 1080/791 = 1.365360.
   Master frames (791-space -> 1080-space):
     boss          x122..252 y330..384   ->  179 x 75
     reward 1      x569..714 y330..384   ->  199 x 75
     reward 2      x569..714 y486..540   ->  199 x 75
     carryover bar x54..737  y1026..1085 ->  934 x 82
   Measured English element extents (1080x1920):
     Defeat the boss   x186..400   y479..499   centre 293 / 489
     crystal x 300     x794..941   y466..513   centre 867.5 / 489.5
     stone x 2         x794..904   y685..727   centre 849 / 706
     carryover boxes   x124..955   y1410..1472 centre 539.5 / 1441
   This screen carries the most text of the set, so its callouts are set
   at 2.315cqw (25px) rather than the usual 28px.
   =================================================================== */

.game-guide-screen-difficulty-details .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-guide-screen-difficulty-details .game-guide-callout {
  min-height: 0;
  padding: 9px 15px;
  padding: 0.833cqw 1.389cqw;
  font-size: 18px;
  font-size: 2.315cqw;
}

/* 1. Clear Condition row - WIDENED: "Defeat the boss" is 215px against
      the master's 179px frame */
.game-guide-screen-difficulty-details .game-guide-frame-boss,
.game-guide-screen-difficulty-details .game-guide-window-boss {
  left: 14.630%;
  top: 23.542%;
  width: 25%;
  height: 3.906%;
}
.game-guide-screen-difficulty-details .game-guide-window-boss > span {
  width: 400%;
  height: 2560%;
  left: -58.519%;
  top: -602.667%;
}

/* 2 + 3. the two reward chips. The master gives both the SAME rect, so
   they are kept identical here too even though "x 2" is shorter. */
.game-guide-screen-difficulty-details .game-guide-frame-reward-1,
.game-guide-screen-difficulty-details .game-guide-window-reward-1,
.game-guide-screen-difficulty-details .game-guide-frame-reward-2,
.game-guide-screen-difficulty-details .game-guide-window-reward-2 {
  left: 71.111%;
  width: 18.426%;
  height: 3.906%;
}
.game-guide-screen-difficulty-details .game-guide-frame-reward-1,
.game-guide-screen-difficulty-details .game-guide-window-reward-1 {
  top: 23.542%;
}
.game-guide-screen-difficulty-details .game-guide-frame-reward-2,
.game-guide-screen-difficulty-details .game-guide-window-reward-2 {
  top: 34.844%;
}
.game-guide-screen-difficulty-details .game-guide-window-reward-1 > span {
  width: 542.714%;
  height: 2560%;
  left: -385.930%;
  top: -602.667%;
}
.game-guide-screen-difficulty-details .game-guide-window-reward-2 > span {
  width: 542.714%;
  height: 2560%;
  left: -385.930%;
  top: -892%;
}

/* 4. carryover bar */
.game-guide-screen-difficulty-details .game-guide-frame-carryover,
.game-guide-screen-difficulty-details .game-guide-window-carryover {
  left: 6.759%;
  top: 72.917%;
  width: 86.481%;
  height: 4.271%;
}
.game-guide-screen-difficulty-details .game-guide-window-carryover > span {
  width: 115.632%;
  height: 2341.463%;
  left: -7.816%;
  top: -1707.317%;
}

/* --- callouts ----------------------------------------------------- */
/* anchored by its BOTTOM so extra translated lines grow up into the
   dimmed header area */
.game-guide-screen-difficulty-details .game-guide-callout-clear {
  bottom: 81.875%;
  left: 8.611%;
  width: 67.222%;
}
/* the master puts this text in the 142px gap between the two reward
   chips, with an arrow to each. It is centred on that gap so extra
   translated lines grow symmetrically into it (room for 3 lines). */
.game-guide-screen-difficulty-details .game-guide-callout-reward {
  top: 31.146%;
  transform: translateY(-50%);
  left: 3.704%;
  width: 70.370%;
}
/* anchored by its BOTTOM so extra lines grow up into the dimmed
   Details list, never down onto the carryover frame */
.game-guide-screen-difficulty-details .game-guide-callout-carryover {
  bottom: 31.354%;
  left: 6.944%;
  width: 90.370%;
}

/* --- connectors --------------------------------------------------- */
/* clear: callout bottom 348 -> frame top 452, on the frame centre */
.game-guide-screen-difficulty-details .game-guide-line-clear {
  left: 26.759%;
  top: 18.125%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.417%;
}
/* reward: ONE vertical line down the reward column, touching the bottom
   of chip 1 (527) and the top of chip 2 (669), plus a horizontal stub
   from the callout's right edge (800) into it */
.game-guide-screen-difficulty-details .game-guide-line-reward-v {
  left: 79.954%;
  top: 27.448%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 7.396%;
}
.game-guide-screen-difficulty-details .game-guide-line-reward-h {
  left: 74.074%;
  top: 30.938%;
  width: 6.620%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* carryover: callout bottom 1318 -> frame top 1400, on the frame centre */
.game-guide-screen-difficulty-details .game-guide-line-carryover {
  left: 49.630%;
  top: 68.646%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.271%;
}


/* ===================================================================
   SCREEN: world-map
   screen class = .game-guide-screen-world-map
   -------------------------------------------------------------------
   Annotation screen over the Foray world map.
   One image:
     --guide-bg   /assets/help/<lang>/world-map.webp
   Master: JA world map 791x1406, scale 1080/791 = 1.365360.
   Master frames (791-space -> 1080-space):
     day counter  x290..498 y22..95     ->  285 x 101
     icon legend  x585..790 y121..620   ->  281 x 683
     current hex  x249..418 y938..1086  ->  232 x 203
     AP counter   x294..498 y1328..1392 ->  280 x 89
   Measured English element extents (1080x1920):
     Day 0 box      x402..680    y34..129     centre 541 / 81.5
     legend scroll  x783..1080   y163..845    (runs off the right edge)
     centre hex     x331..577.5  y1281..1482.5 centre 454 / 1382
     AP 5 box       x408..676    y1815..1894  centre 542 / 1854.5
   =================================================================== */

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

/* 1. day counter */
.game-guide-screen-world-map .game-guide-frame-day,
.game-guide-screen-world-map .game-guide-window-day {
  left: 36.944%;
  top: 1.615%;
  width: 26.389%;
  height: 5.260%;
}
.game-guide-screen-world-map .game-guide-window-day > span {
  width: 378.947%;
  height: 1900.990%;
  left: -140%;
  top: -30.693%;
}

/* 2. icon legend scroll - WIDENED (281 -> 298): the English scroll is
      297px wide with its rollers. Right edge flush with the canvas,
      exactly as the master's is flush with its own. */
.game-guide-screen-world-map .game-guide-frame-legend,
.game-guide-screen-world-map .game-guide-window-legend {
  left: 72.315%;
  top: 8.438%;
  width: 27.593%;
  height: 35.573%;
}
.game-guide-screen-world-map .game-guide-window-legend > span {
  width: 362.416%;
  height: 281.113%;
  left: -262.081%;
  top: -23.719%;
}

/* 3. the current hex - WIDENED (232 -> 251): the English hex is 246.5px
      across against the master's 232. The master hugs its hex, so the
      same 2px hug is kept here. */
.game-guide-screen-world-map .game-guide-frame-hex,
.game-guide-screen-world-map .game-guide-window-hex {
  left: 30.463%;
  top: 66.667%;
  width: 23.241%;
  height: 10.573%;
}
.game-guide-screen-world-map .game-guide-window-hex > span {
  width: 430.279%;
  height: 945.813%;
  left: -131.076%;
  top: -630.542%;
}

/* 4. AP counter */
.game-guide-screen-world-map .game-guide-frame-ap,
.game-guide-screen-world-map .game-guide-window-ap {
  left: 37.222%;
  top: 94.271%;
  width: 25.926%;
  height: 4.635%;
}
.game-guide-screen-world-map .game-guide-window-ap > span {
  width: 385.714%;
  height: 2157.303%;
  left: -143.571%;
  top: -2033.708%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-world-map .game-guide-callout-day {
  top: 10.677%;
  left: 12.685%;
  width: 50.556%;
}
.game-guide-screen-world-map .game-guide-callout-legend {
  top: 45.365%;
  left: 47.037%;
  width: 51.574%;
}
/* anchored by its BOTTOM so extra translated lines grow up into the
   empty map, never down onto the hex frame */
.game-guide-screen-world-map .game-guide-callout-hex {
  bottom: 37.083%;
  left: 6.944%;
  width: 67.037%;
}
/* same, above the AP counter */
.game-guide-screen-world-map .game-guide-callout-ap {
  bottom: 9.323%;
  left: 2.500%;
  width: 95.463%;
}

/* --- connectors --------------------------------------------------- */
/* day: frame bottom 132 -> callout top 205, on the frame centre */
.game-guide-screen-world-map .game-guide-line-day {
  left: 49.815%;
  top: 6.875%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.802%;
}
/* legend: frame bottom 845 -> callout top 871, at the master's 41% */
.game-guide-screen-world-map .game-guide-line-legend {
  left: 83.241%;
  top: 44.010%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.354%;
}
/* hex: callout bottom 1208 -> frame top 1280, on the frame centre */
.game-guide-screen-world-map .game-guide-line-hex {
  left: 41.759%;
  top: 62.917%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.750%;
}
/* ap: callout bottom 1741 -> frame top 1810, on the frame centre */
.game-guide-screen-world-map .game-guide-line-ap {
  left: 49.815%;
  top: 90.677%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}


/* ===================================================================
   SCREEN: foray-battle-1
   screen class = .game-guide-screen-foray-battle-1
   -------------------------------------------------------------------
   Annotation screen over the foray battle screen (part 1).
   One image:
     --guide-bg   /assets/help/<lang>/foray-battle-1.webp
   Master: JA battle 1, 791x1406, scale 1080/791 = 1.365360.
   Master frames (791-space -> 1080-space):
     HP readout    x6..270   y22..95     ->  362 x 101
     wagon (lane)  x6..270   y391..718   ->  362 x 448
     character 1   x166..284 y1111..1321 ->  162 x 288
     cost bar      x185..477 y1340..1398 ->  400 x 81
   Measured English element extents (1080x1920):
     HP readout     x15..371   y36..124      centre 193 / 80
     wagon in lane  x0..350    lane y522..976
     character 1    x224..386.5 y1519..1780  (card + cost badge)
     cost bar       x237..649  y1814..1914   centre 443 / 1864
   =================================================================== */

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

/* 1. HP readout */
.game-guide-screen-foray-battle-1 .game-guide-frame-hp,
.game-guide-screen-foray-battle-1 .game-guide-window-hp {
  left: 1.111%;
  top: 1.563%;
  width: 33.519%;
  height: 5.260%;
}
.game-guide-screen-foray-battle-1 .game-guide-window-hp > span {
  width: 298.343%;
  height: 1900.990%;
  left: -3.315%;
  top: -29.703%;
}

/* 2. the wagon at the left of the active battle lane */
.game-guide-screen-foray-battle-1 .game-guide-frame-wagon,
.game-guide-screen-foray-battle-1 .game-guide-window-wagon {
  left: 0.741%;
  top: 27.344%;
  width: 33.519%;
  height: 23.333%;
}
.game-guide-screen-foray-battle-1 .game-guide-window-wagon > span {
  width: 298.343%;
  height: 428.571%;
  left: -2.210%;
  top: -117.188%;
}

/* 3. first character card - WIDENED (162 -> 169): the English card is
      163px wide, 1px over the master, so the master's 3px hug is kept */
.game-guide-screen-foray-battle-1 .game-guide-frame-char,
.game-guide-screen-foray-battle-1 .game-guide-window-char {
  left: 20.463%;
  top: 78.438%;
  width: 15.648%;
  height: 15%;
}
.game-guide-screen-foray-battle-1 .game-guide-window-char > span {
  width: 639.053%;
  height: 666.667%;
  left: -130.769%;
  top: -522.917%;
}

/* 4. cost bar - WIDENED (400x81 -> 418x106): the English bar is
      412 x 100, larger than the master in both directions */
.game-guide-screen-foray-battle-1 .game-guide-frame-cost,
.game-guide-screen-foray-battle-1 .game-guide-window-cost {
  left: 21.667%;
  top: 94.323%;
  width: 38.704%;
  height: 5.521%;
}
.game-guide-screen-foray-battle-1 .game-guide-window-cost > span {
  width: 258.373%;
  height: 1811.321%;
  left: -55.981%;
  top: -1708.491%;
}

/* --- callouts ----------------------------------------------------- */
/* the master gives this text an arrow UP to the HP readout and an arrow
   DOWN to the wagon. It is centred between the two frames so added
   translated lines grow symmetrically (room for 5 lines). */
.game-guide-screen-foray-battle-1 .game-guide-callout-hp {
  top: 17.083%;
  transform: translateY(-50%);
  left: 4.444%;
  width: 44.444%;
}
/* the master leaves this one unconnected - it is a general note */
.game-guide-screen-foray-battle-1 .game-guide-callout-deploy {
  top: 56.875%;
  left: 9.815%;
  width: 78.704%;
}
/* anchored by its BOTTOM so extra lines grow up, never down onto the
   character card frame */
.game-guide-screen-foray-battle-1 .game-guide-callout-tap {
  bottom: 25%;
  left: 18.981%;
  width: 77.130%;
}
/* left edge held at x410 so the box contains the connector at x443
   (the cost-bar centre); the master's right edge x986 is kept */
.game-guide-screen-foray-battle-1 .game-guide-callout-cost {
  bottom: 8.385%;
  left: 38%;
  width: 53.333%;
}

/* --- connectors --------------------------------------------------- */
/* hp: ONE line from the HP readout's bottom (131) to the wagon frame's
   top (525). The callout sits on it, so the visible halves read as the
   master's two arrows and stay correct when the box grows. */
.game-guide-screen-foray-battle-1 .game-guide-line-hp {
  left: 17.130%;
  top: 6.823%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 20.521%;
}
/* tap: callout bottom 1440 -> frame top 1506, on the card centre */
.game-guide-screen-foray-battle-1 .game-guide-line-tap {
  left: 27.963%;
  top: 75%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.438%;
}
/* cost: callout bottom 1759 -> frame top 1811, on the bar centre */
.game-guide-screen-foray-battle-1 .game-guide-line-cost {
  left: 40.648%;
  top: 91.615%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.708%;
}


/* ===================================================================
   SCREEN: base
   screen class = .game-guide-screen-base
   -------------------------------------------------------------------
   Annotation screen over the base (camp) screen.
   One image:
     --guide-bg   /assets/help/<lang>/base.webp
   Master: JA base 791x1407, scale 1080/791 = 1.365360.
   Master frames (791-space -> 1080-space):
     Laboratory   x487..758 y244..474   ->  371 x 315
     material     x18..202  y606..841   ->  253 x 322
     Ancient Cave x117..300 y918..1089  ->  251 x 235
   Measured English element extents (1080x1920):
     Laboratory + label + tree  x695..980  y365..631   centre 837.5 / 498
     winged plant               x11..272   y854..1122  centre 141.5 / 988
     cave arch + name plate     x184..390  y1274..1475 centre 287 / 1374.5
   =================================================================== */

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

/* 1. Laboratory building - master size, centred on the building group.
      Its bottom lands on the lane's inner bottom edge (y655), as the
      master's does. */
.game-guide-screen-base .game-guide-frame-lab,
.game-guide-screen-base .game-guide-window-lab {
  left: 60.370%;
  top: 17.708%;
  width: 34.352%;
  height: 16.406%;
}
.game-guide-screen-base .game-guide-window-lab > span {
  width: 291.105%;
  height: 609.524%;
  left: -175.741%;
  top: -107.937%;
}

/* 2. gatherable material. The master HUGS its plant with a 4px margin;
      the English plant is wider (262 vs 253) and shorter (269 vs 322),
      and the master height would push the frame through the lane's
      bottom border, so the same 4px hug is applied instead. */
.game-guide-screen-base .game-guide-frame-material,
.game-guide-screen-base .game-guide-window-material {
  left: 0.648%;
  top: 44.271%;
  width: 25%;
  height: 14.427%;
}
.game-guide-screen-base .game-guide-window-material > span {
  width: 400%;
  height: 693.141%;
  left: -2.593%;
  top: -306.859%;
}

/* 3. locked map entry (Ancient Cave) - master size, centred */
.game-guide-screen-base .game-guide-frame-cave,
.game-guide-screen-base .game-guide-window-cave {
  left: 15%;
  top: 65.469%;
  width: 23.241%;
  height: 12.240%;
}
.game-guide-screen-base .game-guide-window-cave > span {
  width: 430.279%;
  height: 817.021%;
  left: -64.542%;
  top: -534.894%;
}

/* --- callouts ----------------------------------------------------- */
/* anchored by its BOTTOM so extra translated lines grow up into the
   dimmed sky, never down onto the Laboratory frame */
.game-guide-screen-base .game-guide-callout-build {
  bottom: 85.885%;
  left: 8.241%;
  width: 87.222%;
}
.game-guide-screen-base .game-guide-callout-tap {
  top: 44.792%;
  left: 30.556%;
  width: 51.574%;
}
/* the master leaves this one unconnected - it is a general note */
.game-guide-screen-base .game-guide-callout-orb {
  top: 55.104%;
  left: 35.185%;
  width: 59.907%;
}
.game-guide-screen-base .game-guide-callout-map {
  top: 81.042%;
  left: 18.981%;
  width: 61.944%;
}

/* --- connectors --------------------------------------------------- */
/* build: callout bottom 271 -> frame top 340, at the master's 58.5% */
.game-guide-screen-base .game-guide-line-build {
  left: 80.093%;
  top: 14.115%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}
/* tap: horizontal, frame right edge 277 -> callout left edge 330.
   The master draws this one as an inline arrow at the head of the
   text; it is rebuilt as a line so it needs no translating. */
.game-guide-screen-base .game-guide-line-tap {
  left: 25.648%;
  top: 46.146%;
  width: 4.907%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* map: frame bottom 1492 -> callout top 1556, on the frame centre */
.game-guide-screen-base .game-guide-line-map {
  left: 26.296%;
  top: 77.708%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.333%;
}


/* ===================================================================
   SCREEN: exchange
   screen class = .game-guide-screen-exchange
   -------------------------------------------------------------------
   Annotation screen over the material Exchange dialog.
   One image:
     --guide-bg   /assets/help/<lang>/exchange.webp
   Master: JA base 3, 791x1407, scale 1080/791 = 1.365360.
   Master frame (791-space -> 1080-space):
     lower-tier checkbox row  x104..686 y747..837  ->  796 x 124
   Measured English element extent (1080x1920):
     checkbox + label   x230..842  y1050..1104  centre 536 / 1077
   One frame, four callouts; only one of them is connected, exactly as
   in the master.
   =================================================================== */

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

/* the "use all lower-tier materials" checkbox row */
.game-guide-screen-exchange .game-guide-frame-lowertier,
.game-guide-screen-exchange .game-guide-window-lowertier {
  left: 12.778%;
  top: 52.865%;
  width: 73.704%;
  height: 6.458%;
}
.game-guide-screen-exchange .game-guide-window-lowertier > span {
  width: 135.678%;
  height: 1548.387%;
  left: -17.337%;
  top: -818.548%;
}

/* --- callouts ----------------------------------------------------- */
/* all four boxes share one width and are centred on the canvas
   (x87..993, centre 540) */
.game-guide-screen-exchange .game-guide-callout-rarer,
.game-guide-screen-exchange .game-guide-callout-bulk,
.game-guide-screen-exchange .game-guide-callout-lowertier,
.game-guide-screen-exchange .game-guide-callout-sell {
  left: 8.056%;
  width: 83.889%;
}
.game-guide-screen-exchange .game-guide-callout-rarer     { top: 9.948%; }
.game-guide-screen-exchange .game-guide-callout-bulk      { top: 30.573%; }
.game-guide-screen-exchange .game-guide-callout-lowertier { top: 63.281%; }
.game-guide-screen-exchange .game-guide-callout-sell      { top: 88.177%; }

/* --- connectors --------------------------------------------------- */
/* lowertier: frame bottom 1139 -> callout top 1215, on the frame centre */
.game-guide-screen-exchange .game-guide-line-lowertier {
  left: 49.259%;
  top: 59.323%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.958%;
}


/* ===================================================================
   SCREEN: difficulty-select
   screen class = .game-guide-screen-difficulty-select
   -------------------------------------------------------------------
   Annotation screen over the Difficulty Select list.
   One image:
     --guide-bg   /assets/help/<lang>/difficulty-select.webp
   Master: JA 791x1406, scale 1080/791 = 1.365360.
   Master frames (791-space -> 1080-space):
     level cap block  x135..287 y253..327   ->  209 x 102
     CLEAR mark       x514..662 y653..728   ->  203 x 104
     scroll lock      x454..748 y1097..1195 ->  403 x 135
   Measured English element extents (1080x1920):
     Level cap / All stats Lv10   x205..392   y371..421    centre 298.5 / 396
     CLEAR + sparkle (Hard III)   x751..855   y895..954    centre 803 / 924.5
     Lock 3-row battle scroll     x634..1007  y1522..1613  centre 820.5 / 1567.5
   =================================================================== */

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

/* 1. level cap block on the first row */
.game-guide-screen-difficulty-select .game-guide-frame-levelcap,
.game-guide-screen-difficulty-select .game-guide-window-levelcap {
  left: 17.963%;
  top: 17.969%;
  width: 19.352%;
  height: 5.313%;
}
.game-guide-screen-difficulty-select .game-guide-window-levelcap > span {
  width: 516.746%;
  height: 1882.353%;
  left: -92.823%;
  top: -338.235%;
}

/* 2. CLEAR mark - the master frames the one on the Hard III row */
.game-guide-screen-difficulty-select .game-guide-frame-clear,
.game-guide-screen-difficulty-select .game-guide-window-clear {
  left: 65%;
  top: 45.417%;
  width: 18.796%;
  height: 5.417%;
}
.game-guide-screen-difficulty-select .game-guide-window-clear > span {
  width: 532.020%;
  height: 1846.154%;
  left: -345.813%;
  top: -838.462%;
}

/* 3. battle scroll lock toggle */
.game-guide-screen-difficulty-select .game-guide-frame-scroll,
.game-guide-screen-difficulty-select .game-guide-window-scroll {
  left: 57.315%;
  top: 78.125%;
  width: 37.315%;
  height: 7.031%;
}
.game-guide-screen-difficulty-select .game-guide-window-scroll > span {
  width: 267.990%;
  height: 1422.222%;
  left: -153.598%;
  top: -1111.111%;
}

/* --- callouts ----------------------------------------------------- */
/* all three share one width and are centred on the canvas
   (x52..1028, centre 540), as the master's are */
.game-guide-screen-difficulty-select .game-guide-callout-levelcap,
.game-guide-screen-difficulty-select .game-guide-callout-clear,
.game-guide-screen-difficulty-select .game-guide-callout-scroll {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-difficulty-select .game-guide-callout-levelcap { top: 27.396%; }
.game-guide-screen-difficulty-select .game-guide-callout-clear    { top: 55.833%; }
.game-guide-screen-difficulty-select .game-guide-callout-scroll   { top: 89.271%; }

/* --- connectors --------------------------------------------------- */
/* levelcap: frame bottom 447 -> callout top 526, on the frame centre */
.game-guide-screen-difficulty-select .game-guide-line-levelcap {
  left: 27.315%;
  top: 23.281%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.115%;
}
/* clear: frame bottom 976 -> callout top 1072, on the frame centre */
.game-guide-screen-difficulty-select .game-guide-line-clear {
  left: 74.074%;
  top: 50.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5%;
}
/* scroll: frame bottom 1635 -> callout top 1714, on the frame centre */
.game-guide-screen-difficulty-select .game-guide-line-scroll {
  left: 75.648%;
  top: 85.156%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.115%;
}


/* ===================================================================
   SCREEN: unlock-potential-2
   screen class = .game-guide-screen-unlock-potential-2
   -------------------------------------------------------------------
   Annotation screen over the Unlock Potential / Awakening tab.
   One image:
     --guide-bg   /assets/help/<lang>/unlock-potential-2.webp
   NOTE: this master was supplied at 1080x1920, not 791x1406, so the
   scale factor is 1.0 - master pixels ARE canvas pixels here.
   Master frames:
     Awakening button   x47..334  y780..887   ->  288 x 108
     success rate row   x576..828 y1010..1093 ->  253 x 84
   Measured element extents (1080x1920):
     JA Awakening button   x49..330  y787..880   centre 189.5 / 833.5
     EN Awakening button   x48..325  y768..861   centre 186.5 / 814.5
     EN success rate text  x525..888 y1038..1065 centre 706.5 / 1051.5
   The English left-hand button column sits 19px higher than the
   Japanese one, so the Awakening frame is re-centred rather than copied
   at the master's y.
   =================================================================== */

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

/* 1. Awakening tab button - master size, re-centred */
.game-guide-screen-unlock-potential-2 .game-guide-frame-awakening,
.game-guide-screen-unlock-potential-2 .game-guide-window-awakening {
  left: 3.981%;
  top: 39.583%;
  width: 26.667%;
  height: 5.625%;
}
.game-guide-screen-unlock-potential-2 .game-guide-window-awakening > span {
  width: 375%;
  height: 1777.778%;
  left: -14.931%;
  top: -703.704%;
}

/* 2. success rate row - WIDENED (253 -> 428): "Awakening Success
      Rate 95%" is 364px against the master's 187px string. The
      master's 32px side margin and its 84px HEIGHT are both kept. */
.game-guide-screen-unlock-potential-2 .game-guide-frame-rate,
.game-guide-screen-unlock-potential-2 .game-guide-window-rate {
  left: 45.648%;
  top: 52.552%;
  width: 39.630%;
  height: 4.375%;
}
.game-guide-screen-unlock-potential-2 .game-guide-window-rate > span {
  width: 252.336%;
  height: 2285.714%;
  left: -115.187%;
  top: -1201.190%;
}

/* --- callouts ----------------------------------------------------- */
/* all three share one width and are centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-unlock-potential-2 .game-guide-callout-awakening,
.game-guide-screen-unlock-potential-2 .game-guide-callout-rate,
.game-guide-screen-unlock-potential-2 .game-guide-callout-slots {
  left: 4.815%;
  width: 90.370%;
}
/* anchored by its BOTTOM so extra lines grow up into the dimmed
   header, never down onto the Awakening frame */
.game-guide-screen-unlock-potential-2 .game-guide-callout-awakening {
  bottom: 62.917%;
}
.game-guide-screen-unlock-potential-2 .game-guide-callout-rate  { top: 60.677%; }
.game-guide-screen-unlock-potential-2 .game-guide-callout-slots { top: 76.979%; }

/* --- connectors --------------------------------------------------- */
/* awakening: callout bottom 712 -> frame top 760, on the frame centre */
.game-guide-screen-unlock-potential-2 .game-guide-line-awakening {
  left: 16.944%;
  top: 37.083%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.500%;
}
/* rate: frame bottom 1093 -> callout top 1165, on the frame centre */
.game-guide-screen-unlock-potential-2 .game-guide-line-rate {
  left: 65.093%;
  top: 56.927%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.750%;
}


/* ===================================================================
   SCREEN: unlock-potential-4
   screen class = .game-guide-screen-unlock-potential-4
   -------------------------------------------------------------------
   Annotation screen over the Unlock Potential / Level Cap Release tab.
   One image:
     --guide-bg   /assets/help/<lang>/unlock-potential-4.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frames:
     description block  x384..1015 y888..1208  ->  632 x 321
     level cap tab      x42..337   y1101..1208 ->  296 x 108
   Measured element extents (1080x1920):
     JA/EN level cap tab   x48..325   y1105..1198  (identical position)
     JA description text   x407..988  y924..1175
     EN description text   x386..1023 y928..1172   centre 704.5 / 1050
   No connectors: the master draws neither text block with an arrow.
   =================================================================== */

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

/* 1. reincarnation description block - WIDENED (632 -> 662): the
      English parenthetical "(No Level Cap Release is needed after
      reincarnating)" is 638px wide, just over the master's 632px
      frame. Master HEIGHT (321) kept. */
.game-guide-screen-unlock-potential-4 .game-guide-frame-desc,
.game-guide-screen-unlock-potential-4 .game-guide-window-desc {
  left: 34.630%;
  top: 46.302%;
  width: 61.296%;
  height: 16.719%;
}
.game-guide-screen-unlock-potential-4 .game-guide-window-desc > span {
  width: 163.142%;
  height: 598.131%;
  left: -56.495%;
  top: -276.947%;
}

/* 2. Level Cap Release / Reincarnation tab. The English button sits at
      exactly the master's coordinates (x48..325 y1105..1198), so the
      master rect is copied verbatim. */
.game-guide-screen-unlock-potential-4 .game-guide-frame-tab,
.game-guide-screen-unlock-potential-4 .game-guide-window-tab {
  left: 3.889%;
  top: 57.344%;
  width: 27.407%;
  height: 5.625%;
}
.game-guide-screen-unlock-potential-4 .game-guide-window-tab > span {
  width: 364.865%;
  height: 1777.778%;
  left: -14.189%;
  top: -1019.444%;
}

/* --- callouts ----------------------------------------------------- */
/* both share one width and are centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-unlock-potential-4 .game-guide-callout-release,
.game-guide-screen-unlock-potential-4 .game-guide-callout-reincarnate {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-unlock-potential-4 .game-guide-callout-release     { top: 18.906%; }
.game-guide-screen-unlock-potential-4 .game-guide-callout-reincarnate { top: 72.656%; }


/* ===================================================================
   SCREEN: unlock-potential-5
   screen class = .game-guide-screen-unlock-potential-5
   -------------------------------------------------------------------
   Annotation screen over the Unlock Potential / Level Reset tab.
   One image:
     --guide-bg   /assets/help/<lang>/unlock-potential-5.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frames:
     currency toggle  x956..1031 y996..1070   ->  76 x 75
     level reset tab  x42..337   y1211..1318  ->  296 x 108
   Measured element extents (1080x1920):
     JA level reset tab  x50..325   y1217..1310
     EN level reset tab  x48..325   y1217..1310  (identical)
     EN toggle icon      x971..1017 y1011..1057  centre 994 / 1034
     JA frame centre     993.5 / 1033            (same spot)
   Both master rects are copied verbatim - the English controls sit
   exactly where the Japanese ones do.
   =================================================================== */

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

/* 1. Rainbow Crystal / Oblivion Mushroom toggle */
.game-guide-screen-unlock-potential-5 .game-guide-frame-toggle,
.game-guide-screen-unlock-potential-5 .game-guide-window-toggle {
  left: 88.519%;
  top: 51.875%;
  width: 7.037%;
  height: 3.906%;
}
.game-guide-screen-unlock-potential-5 .game-guide-window-toggle > span {
  width: 1421.053%;
  height: 2560%;
  left: -1257.895%;
  top: -1328%;
}

/* 2. Level Reset tab */
.game-guide-screen-unlock-potential-5 .game-guide-frame-tab,
.game-guide-screen-unlock-potential-5 .game-guide-window-tab {
  left: 3.889%;
  top: 63.073%;
  width: 27.407%;
  height: 5.625%;
}
.game-guide-screen-unlock-potential-5 .game-guide-window-tab > span {
  width: 364.865%;
  height: 1777.778%;
  left: -14.189%;
  top: -1121.296%;
}

/* --- callouts ----------------------------------------------------- */
/* the two unconnected notes share one width and are centred on the
   canvas (x52..1028, centre 540) */
.game-guide-screen-unlock-potential-5 .game-guide-callout-reset,
.game-guide-screen-unlock-potential-5 .game-guide-callout-reincarnation {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-unlock-potential-5 .game-guide-callout-reset         { top: 29.427%; }
.game-guide-screen-unlock-potential-5 .game-guide-callout-reincarnation { top: 77.865%; }
/* this one stays narrow and on the right, as in the master: a
   full-width box here would run onto the Level Reset tab frame */
.game-guide-screen-unlock-potential-5 .game-guide-callout-switch {
  top: 59.375%;
  left: 54.167%;
  width: 43.056%;
}

/* --- connectors --------------------------------------------------- */
/* switch: frame bottom 1071 -> callout top 1140, on the frame centre */
.game-guide-screen-unlock-potential-5 .game-guide-line-switch {
  left: 91.667%;
  top: 55.781%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}


/* ===================================================================
   SCREEN: equipment-2
   screen class = .game-guide-screen-equipment-2
   -------------------------------------------------------------------
   Annotation screen over the Return Equipment dialog at Rum's Spring.
   One image:
     --guide-bg   /assets/help/<lang>/equipment-2.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frame:
     Return button  x688..817 y1497..1556  ->  130 x 60
   Measured English element extent (1080x1920):
     Return button (3rd visible row)  x698..814 y1502..1549
                                      centre 756 / 1525.5
   =================================================================== */

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

/* the Return Equipment dialog itself is NOT dimmed - the master shows
   it at full brightness, with no white highlight frame (it has its own
   red border). Cut-out window only, no .game-guide-frame. */
.game-guide-screen-equipment-2 .game-guide-window-dialog {
  left: 10.463%;
  top: 28.125%;
  width: 79.074%;
  height: 40.885%;
}
.game-guide-screen-equipment-2 .game-guide-window-dialog > span {
  width: 126.464%;
  height: 244.586%;
  left: -13.232%;
  top: -68.790%;
}

/* the Return button on the third visible equipment row */
.game-guide-screen-equipment-2 .game-guide-frame-return,
.game-guide-screen-equipment-2 .game-guide-window-return {
  left: 63.981%;
  top: 77.865%;
  width: 12.037%;
  height: 3.125%;
}
.game-guide-screen-equipment-2 .game-guide-window-return > span {
  width: 830.769%;
  height: 3200%;
  left: -531.538%;
  top: -2491.667%;
}

/* --- callouts ----------------------------------------------------- */
/* the two long notes share one width and are centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-equipment-2 .game-guide-callout-return,
.game-guide-screen-equipment-2 .game-guide-callout-item {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-equipment-2 .game-guide-callout-return { top: 14.323%; }
.game-guide-screen-equipment-2 .game-guide-callout-item   { top: 82.813%; }
/* one short line, kept to the master's narrower width but re-centred
   on the canvas; anchored by its BOTTOM so extra lines grow up */
.game-guide-screen-equipment-2 .game-guide-callout-button {
  bottom: 24.583%;
  left: 21.065%;
  width: 57.870%;
}

/* --- connectors --------------------------------------------------- */
/* button: callout bottom 1448 -> frame top 1495, on the frame centre */
.game-guide-screen-equipment-2 .game-guide-line-button {
  left: 69.630%;
  top: 75.417%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.448%;
}


/* ===================================================================
   SCREEN: equipment-4
   screen class = .game-guide-screen-equipment-4
   -------------------------------------------------------------------
   Annotation screen over the Unlock Equipment Slot dialog.
   One image:
     --guide-bg   /assets/help/<lang>/equipment-4.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frame:
     Unlock Cost row  x218..870 y1092..1184  ->  653 x 93
   Measured element extents (1080x1920):
     JA cost row  x233..846 y1103..1165
     EN cost row  x231..858 y1101..1163
   The rows sit in the same place (2px vertically); the English one is
   12px wider on the right ("14.8M" vs "1.23億") and still fits, so the
   master rect is copied verbatim.
   No connectors: the master draws all four notes without arrows.
   =================================================================== */

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

/* the Unlock Cost row */
.game-guide-screen-equipment-4 .game-guide-frame-cost,
.game-guide-screen-equipment-4 .game-guide-window-cost {
  left: 20.185%;
  top: 56.875%;
  width: 60.463%;
  height: 4.844%;
}
.game-guide-screen-equipment-4 .game-guide-window-cost > span {
  width: 165.391%;
  height: 2064.516%;
  left: -33.384%;
  top: -1174.194%;
}

/* --- callouts ----------------------------------------------------- */
/* all four share one width and are centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-equipment-4 .game-guide-callout-slot,
.game-guide-screen-equipment-4 .game-guide-callout-types,
.game-guide-screen-equipment-4 .game-guide-callout-order,
.game-guide-screen-equipment-4 .game-guide-callout-rarity {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-equipment-4 .game-guide-callout-slot   { top: 12.760%; }
/* 30px below the master's y so the first note has two lines of room
   rather than one; this box has 14 lines of its own */
.game-guide-screen-equipment-4 .game-guide-callout-types  { top: 21.875%; }
.game-guide-screen-equipment-4 .game-guide-callout-order  { top: 64.844%; }
.game-guide-screen-equipment-4 .game-guide-callout-rarity { top: 77.604%; }


/* ===================================================================
   SCREEN: gems-1
   screen class = .game-guide-screen-gems-1
   -------------------------------------------------------------------
   Annotation screen over the Gems (forge) screen.
   One image:
     --guide-bg   /assets/help/<lang>/gems-1.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frames:
     Gems header   x256..823 y525..634   ->  568 x 110
     Attack tab    x18..376  y864..952   ->  359 x 89
     Forge Lv pill x395..560 y1597..1655 ->  166 x 59
     Drop Rates    x51..209  y1731..1797 ->  159 x 67
   Measured English element extents (1080x1920):
     Gems icon + label  x448..652  y556..602    centre 550 / 579
     Attack Gem tab     x24..374   y866..949    centre 199 / 907.5
     Forge Lv pill      x395..564  y1599..1649  centre 479.5 / 1624
     Drop Rates button  x51..214   y1727..1795  centre 132.5 / 1761
   =================================================================== */

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

/* 1. Gems header toggle - master rect verbatim. The master frames the
      header BAND, not the label, and its centre is the canvas centre. */
.game-guide-screen-gems-1 .game-guide-frame-gems,
.game-guide-screen-gems-1 .game-guide-window-gems {
  left: 23.704%;
  top: 27.344%;
  width: 52.593%;
  height: 5.729%;
}
.game-guide-screen-gems-1 .game-guide-window-gems > span {
  width: 190.141%;
  height: 1745.455%;
  left: -45.070%;
  top: -477.273%;
}

/* 2. Attack Gem tab - master rect verbatim (the English tab sits
      within 2px of the Japanese one) */
.game-guide-screen-gems-1 .game-guide-frame-tab,
.game-guide-screen-gems-1 .game-guide-window-tab {
  left: 1.667%;
  top: 45%;
  width: 33.241%;
  height: 4.635%;
}
.game-guide-screen-gems-1 .game-guide-window-tab > span {
  width: 300.836%;
  height: 2157.303%;
  left: -5.014%;
  top: -970.787%;
}

/* 3. Forge Lv pill - WIDENED (166 -> 176): the English pill is 170px
      wide, 4px over the master. Master HEIGHT (59) kept. */
.game-guide-screen-gems-1 .game-guide-frame-forgelv,
.game-guide-screen-gems-1 .game-guide-window-forgelv {
  left: 36.296%;
  top: 83.021%;
  width: 16.296%;
  height: 3.073%;
}
.game-guide-screen-gems-1 .game-guide-window-forgelv > span {
  width: 613.636%;
  height: 3254.237%;
  left: -222.727%;
  top: -2701.695%;
}

/* 4. Drop Rates button - ENLARGED (159x67 -> 170x75): the English
      button is 164x69, over the master in both directions */
.game-guide-screen-gems-1 .game-guide-frame-rates,
.game-guide-screen-gems-1 .game-guide-window-rates {
  left: 4.444%;
  top: 89.740%;
  width: 15.741%;
  height: 3.906%;
}
.game-guide-screen-gems-1 .game-guide-window-rates > span {
  width: 635.294%;
  height: 2560%;
  left: -28.235%;
  top: -2297.333%;
}

/* --- callouts ----------------------------------------------------- */
/* the two wide notes are centred on the canvas (x52..1028) */
.game-guide-screen-gems-1 .game-guide-callout-source,
.game-guide-screen-gems-1 .game-guide-callout-forgelv {
  left: 4.815%;
  width: 90.370%;
}
.game-guide-screen-gems-1 .game-guide-callout-source  { top: 6.146%; }
/* anchored by BOTTOM so extra lines grow up, never onto their frames */
.game-guide-screen-gems-1 .game-guide-callout-forgelv { bottom: 21.354%; }
/* centred on the canvas at the master's narrower width */
.game-guide-screen-gems-1 .game-guide-callout-switch {
  bottom: 75.781%;
  left: 18.750%;
  width: 62.500%;
}
/* left-hand, as the master places it - its connector is at x197 */
.game-guide-screen-gems-1 .game-guide-callout-tabs {
  bottom: 58.333%;
  left: 3.704%;
  width: 51.852%;
}
/* right of the Drop Rates button, as the master places it */
.game-guide-screen-gems-1 .game-guide-callout-rates {
  top: 88.542%;
  left: 25.741%;
  width: 67.778%;
}

/* --- connectors --------------------------------------------------- */
/* switch: callout bottom 465 -> frame top 525, on the frame centre */
.game-guide-screen-gems-1 .game-guide-line-switch {
  left: 49.630%;
  top: 24.219%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
/* tabs: callout bottom 800 -> frame top 864, on the frame centre */
.game-guide-screen-gems-1 .game-guide-line-tabs {
  left: 17.963%;
  top: 41.667%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.333%;
}
/* forgelv: callout bottom 1510 -> frame top 1594, on the frame centre */
.game-guide-screen-gems-1 .game-guide-line-forgelv {
  left: 44.074%;
  top: 78.646%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.375%;
}
/* rates: horizontal, frame right edge 218 -> callout left edge 278.
   The master draws this one as an inline left arrow in the text. */
.game-guide-screen-gems-1 .game-guide-line-rates {
  left: 20.185%;
  top: 90.885%;
  width: 5.556%;
  height: 5px;
  height: max(2px, 0.741cqw);
}


/* ===================================================================
   SCREEN: gems-3
   screen class = .game-guide-screen-gems-3
   -------------------------------------------------------------------
   Annotation screen over the Gems / Equip tab.
   One image:
     --guide-bg   /assets/help/<lang>/gems-3.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frames:
     slot row + tabs  x25..1058  y651..959   ->  1034 x 309
     count pair       x835..1013 y1188..1259 ->   179 x 72
   Measured English element extents (1080x1920):
     three gem orbs   centres x196 / x540 / x884
     tab row bottom   y953
     count pair       x842..1011 y1207..1244  centre 926.5 / 1225.5
     "0" glyph centre x884,  "7" glyph centre x967
   Both master rects are copied verbatim.
   =================================================================== */

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

/* 1. the three gem slots together with the three type tabs */
.game-guide-screen-gems-3 .game-guide-frame-slots,
.game-guide-screen-gems-3 .game-guide-window-slots {
  left: 2.315%;
  top: 33.906%;
  width: 95.741%;
  height: 16.094%;
}
.game-guide-screen-gems-3 .game-guide-window-slots > span {
  width: 104.449%;
  height: 621.359%;
  left: -2.418%;
  top: -210.680%;
}

/* 2. the equipped / owned counter pair on the second row */
.game-guide-screen-gems-3 .game-guide-frame-count,
.game-guide-screen-gems-3 .game-guide-window-count {
  left: 77.315%;
  top: 61.875%;
  width: 16.574%;
  height: 3.750%;
}
.game-guide-screen-gems-3 .game-guide-window-count > span {
  width: 603.352%;
  height: 2666.667%;
  left: -466.480%;
  top: -1650%;
}

/* --- callouts ----------------------------------------------------- */
/* anchored by its BOTTOM so extra lines grow up into the dimmed party
   row, never down onto the slot frame */
.game-guide-screen-gems-3 .game-guide-callout-slots {
  bottom: 69.271%;
  left: 4.815%;
  width: 90.370%;
}
/* one line carrying BOTH labels, right-aligned so "Owned" lands under
   the right connector and the longer label spans the left one - the
   master does the same with one line and two arrows */
.game-guide-screen-gems-3 .game-guide-callout-count {
  top: 68.750%;
  left: 35.185%;
  width: 60.185%;
  text-align: right;
}

/* --- connectors --------------------------------------------------- */
/* slots: callout bottom 590 -> frame top 651, one per orb centre */
.game-guide-screen-gems-3 .game-guide-line-slot-1,
.game-guide-screen-gems-3 .game-guide-line-slot-2,
.game-guide-screen-gems-3 .game-guide-line-slot-3 {
  top: 30.729%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.177%;
}
.game-guide-screen-gems-3 .game-guide-line-slot-1 { left: 17.778%; }
.game-guide-screen-gems-3 .game-guide-line-slot-2 { left: 49.630%; }
.game-guide-screen-gems-3 .game-guide-line-slot-3 { left: 81.481%; }

/* count: frame bottom 1260 -> callout top 1320, one per counter half */
.game-guide-screen-gems-3 .game-guide-line-equipped,
.game-guide-screen-gems-3 .game-guide-line-owned {
  top: 65.625%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
.game-guide-screen-gems-3 .game-guide-line-equipped { left: 81.481%; }
.game-guide-screen-gems-3 .game-guide-line-owned    { left: 89.167%; }


/* ===================================================================
   SCREEN: food-production-2
   screen class = .game-guide-screen-food-production-2
   -------------------------------------------------------------------
   Annotation screen over the Food Production land view.
   One image:
     --guide-bg   /assets/help/<lang>/food-production-2.webp
   NOTE: this master was supplied at 1080x1920, so the scale factor is
   1.0 - master pixels ARE canvas pixels here.
   Master frames:
     Buildable plot  x686..967  y234..442   ->  282 x 209
     left arrow      x16..98    y491..638   ->   83 x 148
     right arrow     x981..1063 y491..638   ->   83 x 148
     stamina bar     x619..1055 y1769..1873 ->  437 x 105
   Measured English element extents (1080x1920):
     Buildable box   x696..953  y246..430    centre 824.5 / 338
     stamina bar     x636..1045 y1800..1856
   All four master rects are copied verbatim.
   =================================================================== */

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

/* 1. the Buildable plot */
.game-guide-screen-food-production-2 .game-guide-frame-buildable,
.game-guide-screen-food-production-2 .game-guide-window-buildable {
  left: 63.519%;
  top: 12.188%;
  width: 26.111%;
  height: 10.885%;
}
.game-guide-screen-food-production-2 .game-guide-window-buildable > span {
  width: 382.979%;
  height: 918.660%;
  left: -243.262%;
  top: -111.962%;
}

/* 2 + 3. the two land-scroll arrows (paired, symmetrical) */
.game-guide-screen-food-production-2 .game-guide-frame-arrow-l,
.game-guide-screen-food-production-2 .game-guide-window-arrow-l,
.game-guide-screen-food-production-2 .game-guide-frame-arrow-r,
.game-guide-screen-food-production-2 .game-guide-window-arrow-r {
  top: 25.573%;
  width: 7.685%;
  height: 7.708%;
}
.game-guide-screen-food-production-2 .game-guide-frame-arrow-l,
.game-guide-screen-food-production-2 .game-guide-window-arrow-l {
  left: 1.481%;
}
.game-guide-screen-food-production-2 .game-guide-frame-arrow-r,
.game-guide-screen-food-production-2 .game-guide-window-arrow-r {
  left: 90.833%;
}
.game-guide-screen-food-production-2 .game-guide-window-arrow-l > span {
  width: 1301.205%;
  height: 1297.297%;
  left: -19.277%;
  top: -331.757%;
}
.game-guide-screen-food-production-2 .game-guide-window-arrow-r > span {
  width: 1301.205%;
  height: 1297.297%;
  left: -1181.928%;
  top: -331.757%;
}

/* 4. the stamina bar */
.game-guide-screen-food-production-2 .game-guide-frame-stamina,
.game-guide-screen-food-production-2 .game-guide-window-stamina {
  left: 57.315%;
  top: 92.135%;
  width: 40.463%;
  height: 5.469%;
}
.game-guide-screen-food-production-2 .game-guide-window-stamina > span {
  width: 247.140%;
  height: 1828.571%;
  left: -141.648%;
  top: -1684.762%;
}

/* --- callouts ----------------------------------------------------- */
/* the two wide notes are centred on the canvas (x52..1028) */
.game-guide-screen-food-production-2 .game-guide-callout-clear,
.game-guide-screen-food-production-2 .game-guide-callout-stamina {
  left: 4.815%;
  width: 90.370%;
}
/* top-anchored: it is already at the top of the canvas, so it grows
   DOWN into the 58px gap above the Buildable frame */
.game-guide-screen-food-production-2 .game-guide-callout-clear { top: 2.083%; }
/* anchored by its BOTTOM so extra lines grow up into the dimmed list */
.game-guide-screen-food-production-2 .game-guide-callout-stamina { bottom: 9.375%; }
/* left-hand note, master placement */
.game-guide-screen-food-production-2 .game-guide-callout-points {
  top: 15.104%;
  left: 4.630%;
  width: 54.630%;
}
/* between the two arrow frames, centred on the canvas (x185..895) so
   the two horizontal stubs come out equal at 86px each */
.game-guide-screen-food-production-2 .game-guide-callout-move {
  top: 29.948%;
  left: 17.130%;
  width: 65.741%;
}

/* --- connectors --------------------------------------------------- */
/* clear: callout bottom 176 -> frame top 234, on the frame centre */
.game-guide-screen-food-production-2 .game-guide-line-clear {
  left: 76.204%;
  top: 9.167%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.021%;
}
/* move: horizontal on both sides, frame edge -> callout edge.
   The master draws these two as inline arrows in the text. */
.game-guide-screen-food-production-2 .game-guide-line-move-l,
.game-guide-screen-food-production-2 .game-guide-line-move-r {
  top: 32.292%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-food-production-2 .game-guide-line-move-l {
  left: 9.167%;
  width: 7.963%;
}
.game-guide-screen-food-production-2 .game-guide-line-move-r {
  left: 82.870%;
  width: 7.963%;
}
/* stamina: callout bottom 1740 -> frame top 1769, on the heart icon */
.game-guide-screen-food-production-2 .game-guide-line-stamina {
  left: 62.130%;
  top: 90.625%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.510%;
}


/* ===================================================================
   SCREEN: food-production-4
   screen class = .game-guide-screen-food-production-4
   -------------------------------------------------------------------
   Annotation screen over the Farm Lv.1 facility dialog.
   One image:
     --guide-bg   /assets/help/<lang>/food-production-4.webp
   Master supplied at 1080x1920, so scale = 1.0 (master px = canvas px).
   Master frames:
     demolish button   x75..174  y288..384    100 x 97
     left arrow        x101..226 y494..594    126 x 101
     right arrow       x858..983 y494..594    126 x 101
     plantable box     x441..643 y918..981    203 x 64
     instant harvest   x159..361 y1155..1253  203 x 99
     upgrade panel     x111..969 y1296..1470  859 x 175
   The English dialog is laid out identically to the Japanese one -
   left arrow, right arrow and the Instant Harvest button all measure
   to the same pixels - so every frame is the master's rect unchanged.
   =================================================================== */

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

/* 1. demolish (hammer) button */
.game-guide-screen-food-production-4 .game-guide-frame-demolish,
.game-guide-screen-food-production-4 .game-guide-window-demolish {
  left: 6.944%;
  top: 15%;
  width: 9.259%;
  height: 5.052%;
}
.game-guide-screen-food-production-4 .game-guide-window-demolish > span {
  width: 1080%;
  height: 1979.381%;
  left: -75%;
  top: -296.907%;
}

/* 2. left / right seed arrows */
.game-guide-screen-food-production-4 .game-guide-frame-arrow-l,
.game-guide-screen-food-production-4 .game-guide-window-arrow-l,
.game-guide-screen-food-production-4 .game-guide-frame-arrow-r,
.game-guide-screen-food-production-4 .game-guide-window-arrow-r {
  top: 25.729%;
  width: 11.667%;
  height: 5.260%;
}
.game-guide-screen-food-production-4 .game-guide-frame-arrow-l,
.game-guide-screen-food-production-4 .game-guide-window-arrow-l { left: 9.352%; }
.game-guide-screen-food-production-4 .game-guide-frame-arrow-r,
.game-guide-screen-food-production-4 .game-guide-window-arrow-r { left: 79.444%; }

.game-guide-screen-food-production-4 .game-guide-window-arrow-l > span {
  width: 857.143%;
  height: 1900.990%;
  left: -80.159%;
  top: -489.109%;
}
.game-guide-screen-food-production-4 .game-guide-window-arrow-r > span {
  width: 857.143%;
  height: 1900.990%;
  left: -680.952%;
  top: -489.109%;
}

/* 3. plantable count box */
.game-guide-screen-food-production-4 .game-guide-frame-plantable,
.game-guide-screen-food-production-4 .game-guide-window-plantable {
  left: 40.833%;
  top: 47.813%;
  width: 18.796%;
  height: 3.333%;
}
.game-guide-screen-food-production-4 .game-guide-window-plantable > span {
  width: 532.020%;
  height: 3000%;
  left: -217.241%;
  top: -1434.375%;
}

/* 4. Instant Harvest button */
.game-guide-screen-food-production-4 .game-guide-frame-harvest,
.game-guide-screen-food-production-4 .game-guide-window-harvest {
  left: 14.722%;
  top: 60.156%;
  width: 18.796%;
  height: 5.156%;
}
.game-guide-screen-food-production-4 .game-guide-window-harvest > span {
  width: 532.020%;
  height: 1939.394%;
  left: -78.325%;
  top: -1166.667%;
}

/* 5. upgrade panel */
.game-guide-screen-food-production-4 .game-guide-frame-upgrade,
.game-guide-screen-food-production-4 .game-guide-window-upgrade {
  left: 10.278%;
  top: 67.500%;
  width: 79.537%;
  height: 9.115%;
}
.game-guide-screen-food-production-4 .game-guide-window-upgrade > span {
  width: 125.727%;
  height: 1097.143%;
  left: -12.922%;
  top: -740.571%;
}

/* --- callouts ----------------------------------------------------- */
/* the four full-width boxes share one width, centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-food-production-4 .game-guide-callout-demolish,
.game-guide-screen-food-production-4 .game-guide-callout-seeds,
.game-guide-screen-food-production-4 .game-guide-callout-upgrade {
  left: 4.815%;
  width: 90.370%;
}
/* anchored by its BOTTOM so extra lines grow up into the dimmed
   header, never down onto the demolish frame */
.game-guide-screen-food-production-4 .game-guide-callout-demolish {
  bottom: 89.010%;
}
/* anchored by its BOTTOM so it grows up into the dimmed banner area,
   never down onto the plantable frame */
.game-guide-screen-food-production-4 .game-guide-callout-seeds {
  bottom: 54.167%;
}
.game-guide-screen-food-production-4 .game-guide-callout-upgrade {
  top: 79.688%;
}
/* between the two arrows - it cannot be full width, so it is centred
   on the canvas and on the arrows' own centre line (546) */
.game-guide-screen-food-production-4 .game-guide-callout-switch {
  left: 27.778%;
  width: 44.444%;
  top: 28.438%;
  transform: translateY(-50%);
  text-align: center;
}
/* right of the Instant Harvest button, anchored by its BOTTOM so extra
   lines grow up, never down onto the upgrade frame */
.game-guide-screen-food-production-4 .game-guide-callout-harvest {
  left: 37.963%;
  width: 57.222%;
  bottom: 32.917%;
}

/* --- connectors --------------------------------------------------- */
/* demolish: callout bottom 211 -> frame top 288, on the frame centre */
.game-guide-screen-food-production-4 .game-guide-line-demolish {
  left: 11.343%;
  top: 10.990%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.010%;
}
/* switch: one stub each side, callout edge -> arrow frame edge,
   on the arrows' centre line (546) */
.game-guide-screen-food-production-4 .game-guide-line-switch-l,
.game-guide-screen-food-production-4 .game-guide-line-switch-r {
  top: 28.307%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* frame right 227 -> callout left 300 = 73px */
.game-guide-screen-food-production-4 .game-guide-line-switch-l {
  left: 21.019%;
  width: 6.759%;
}
/* callout right 780 -> frame left 858 = 78px */
.game-guide-screen-food-production-4 .game-guide-line-switch-r {
  left: 72.222%;
  width: 7.222%;
}
/* seeds: callout bottom 880 -> frame top 918, on the frame centre */
.game-guide-screen-food-production-4 .game-guide-line-seeds {
  left: 50.046%;
  top: 45.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.979%;
}
/* harvest: frame right 362 -> callout left 410, on the button centre */
.game-guide-screen-food-production-4 .game-guide-line-harvest {
  left: 33.519%;
  top: 62.539%;
  width: 4.444%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* upgrade: frame bottom 1470 -> callout top 1530, on the frame centre */
.game-guide-screen-food-production-4 .game-guide-line-upgrade {
  left: 49.815%;
  top: 76.563%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}


/* ===================================================================
   SCREEN: food-production-6
   screen class = .game-guide-screen-food-production-6
   -------------------------------------------------------------------
   Annotation screen over the Meals tab of the base.
   One image:
     --guide-bg   /assets/help/<lang>/food-production-6.webp
   Master supplied at 1080x1920, so scale = 1.0 (master px = canvas px).
   Master frames:
     dining table       x355..730 y420..691    376 x 272
     character card 1   x74..245  y1137..1374  172 x 238
     Meal Lv chip       x265..434 y1295..1374  170 x 80
   Measured English element extents (1080x1920):
     Select Dishes table   x375..717  y432..~700
     card 1 (gold border)  x78..242   y1139..1366  centre 160 / 1252.5
     card 2 fullness+meal  x267..431  y1304..1366  centre 349 / 1335
   Every frame is the master's rect unchanged.
   =================================================================== */

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

/* 1. the dining table */
.game-guide-screen-food-production-6 .game-guide-frame-table,
.game-guide-screen-food-production-6 .game-guide-window-table {
  left: 32.870%;
  top: 21.875%;
  width: 34.815%;
  height: 14.167%;
}
.game-guide-screen-food-production-6 .game-guide-window-table > span {
  width: 287.234%;
  height: 705.882%;
  left: -94.415%;
  top: -154.412%;
}

/* 2. the first character card */
.game-guide-screen-food-production-6 .game-guide-frame-card,
.game-guide-screen-food-production-6 .game-guide-window-card {
  left: 6.852%;
  top: 59.219%;
  width: 15.926%;
  height: 12.396%;
}
.game-guide-screen-food-production-6 .game-guide-window-card > span {
  width: 627.907%;
  height: 806.723%;
  left: -43.023%;
  top: -477.731%;
}

/* 3. the Fullness bar + Meal Lv chip on the second card */
.game-guide-screen-food-production-6 .game-guide-frame-meal,
.game-guide-screen-food-production-6 .game-guide-window-meal {
  left: 24.537%;
  top: 67.448%;
  width: 15.741%;
  height: 4.167%;
}
.game-guide-screen-food-production-6 .game-guide-window-meal > span {
  width: 635.294%;
  height: 2400%;
  left: -155.882%;
  top: -1618.750%;
}

/* --- callouts ----------------------------------------------------- */
/* three of the four share one width, centred on the canvas
   (x52..1028, centre 540) */
.game-guide-screen-food-production-6 .game-guide-callout-table,
.game-guide-screen-food-production-6 .game-guide-callout-chairs,
.game-guide-screen-food-production-6 .game-guide-callout-meallv {
  left: 4.815%;
  width: 90.370%;
}
/* anchored by its BOTTOM so extra lines grow up into the dimmed wall,
   never down onto the table frame */
.game-guide-screen-food-production-6 .game-guide-callout-table {
  bottom: 82.292%;
}
/* anchored by its BOTTOM so extra lines grow up towards the table,
   never down onto the fullness callout */
.game-guide-screen-food-production-6 .game-guide-callout-chairs {
  bottom: 50%;
}
/* right of the long card connector; anchored by its BOTTOM so extra
   lines grow up, never down onto the Meal Lv frame */
.game-guide-screen-food-production-6 .game-guide-callout-fullness {
  left: 25.463%;
  width: 69.722%;
  bottom: 35.417%;
}
.game-guide-screen-food-production-6 .game-guide-callout-meallv {
  top: 74.740%;
}

/* --- connectors --------------------------------------------------- */
/* table: callout bottom 340 -> frame top 420, on the frame centre */
.game-guide-screen-food-production-6 .game-guide-line-table {
  left: 50%;
  top: 17.708%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.167%;
}
/* chairs: callout bottom 960 -> card frame top 1137, on the card centre.
   The master draws this one long too - it reaches past the tab bar. */
.game-guide-screen-food-production-6 .game-guide-line-chairs {
  left: 14.537%;
  top: 50%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 9.219%;
}
/* fullness: callout bottom 1240 -> frame top 1295, on the frame centre */
.game-guide-screen-food-production-6 .game-guide-line-fullness {
  left: 32.130%;
  top: 64.583%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.865%;
}
/* meallv: frame bottom 1374 -> callout top 1435, on the frame centre */
.game-guide-screen-food-production-6 .game-guide-line-meallv {
  left: 32.130%;
  top: 71.563%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.177%;
}