/* ===================================================================
   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-dungeon-attack
   -------------------------------------------------------------------
   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-dungeon-attack .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

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

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

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

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

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

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

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

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

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

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

.game-guide-screen-dungeon-attack .game-guide-frame-start,
.game-guide-screen-dungeon-attack .game-guide-window-start {
  left: 35.370%;
  top: 78.490%;
  width: 29.444%;
  height: 8.802%;
}
.game-guide-screen-dungeon-attack .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-dungeon-attack .game-guide-callout-party {
  top: 18.750%;
  left: 38.519%;
  width: 52%;
}
.game-guide-screen-dungeon-attack .game-guide-callout-goalfloor {
  bottom: 61.198%;
  left: 10.648%;
  width: 78.426%;
  text-align: center;
}
.game-guide-screen-dungeon-attack .game-guide-callout-blessing {
  top: 49.271%;
  right: 24.074%;
  width: max-content;
  max-width: 70%;
  text-align: right;
}
.game-guide-screen-dungeon-attack .game-guide-callout-difficulty {
  top: 56.510%;
  right: 4.630%;
  width: max-content;
  max-width: 74%;
  text-align: right;
}
.game-guide-screen-dungeon-attack .game-guide-callout-checks {
  top: 61.719%;
  left: 23.148%;
  width: 48%;
}
.game-guide-screen-dungeon-attack .game-guide-callout-start {
  top: 88.542%;
  left: 16.204%;
  width: 66%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-dungeon-attack .game-guide-line-party-tabs {
  left: 80.648%;
  top: 16.823%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.927%;
}
.game-guide-screen-dungeon-attack .game-guide-line-party-formation {
  left: 83.796%;
  top: 21.667%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.260%;
}
.game-guide-screen-dungeon-attack .game-guide-line-goalfloor-minus {
  left: 10.648%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeon-attack .game-guide-line-goalfloor-slider {
  left: 23.241%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeon-attack .game-guide-line-goalfloor-plus {
  left: 88.333%;
  top: 38.802%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.292%;
}
.game-guide-screen-dungeon-attack .game-guide-line-blessing {
  left: 75.926%;
  top: 51.771%;
  width: 5.370%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeon-attack .game-guide-line-difficulty {
  left: 84.074%;
  top: 59.427%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.083%;
}
.game-guide-screen-dungeon-attack .game-guide-line-checks-limitation {
  left: 18.611%;
  top: 64.271%;
  width: 4.537%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeon-attack .game-guide-line-checks-autorepeat {
  left: 18.611%;
  top: 70.417%;
  width: 6.667%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-guide-screen-dungeon-attack .game-guide-line-checks-rail {
  left: 24.630%;
  top: 64.635%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.938%;
}
.game-guide-screen-dungeon-attack .game-guide-line-checks-skip {
  left: 52.037%;
  top: 64.635%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-dungeon-attack .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-level-up
   -------------------------------------------------------------------
   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-level-up .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

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

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

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

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

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

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

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-level-up .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-level-up .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-level-up .game-guide-callout-unlock {
  top: 23.490%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-level-up .game-guide-callout-log {
  bottom: 60.938%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-level-up .game-guide-callout-exp {
  bottom: 29.167%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}
.game-guide-screen-level-up .game-guide-callout-feature {
  top: 93.229%;
  left: 9.444%;
  width: 83%;
  text-align: center;
}

/* --- connectors --------------------------------------------------- */
.game-guide-screen-level-up .game-guide-line-log {
  left: 63.009%;
  top: 39.063%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-level-up .game-guide-line-exp-maxhp {
  left: 40.324%;
  top: 70.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-level-up .game-guide-line-exp-def {
  left: 89.954%;
  top: 70.833%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.917%;
}
.game-guide-screen-level-up .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-skill-enhance
   -------------------------------------------------------------------
   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-skill-enhance {
  background: #060609;
}
.game-guide-screen-skill-enhance .game-guide-background {
  top: -10.313%;
}
.game-guide-screen-skill-enhance .game-guide-dim {
  background: rgba(3, 2, 8, 0.76);
}
.game-guide-screen-skill-enhance .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-skill-enhance .game-guide-text-warn {
  color: #ffe07a;
}

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

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

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

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

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

/* --- copy blocks -------------------------------------------------- */
.game-guide-screen-skill-enhance .game-guide-text-skills {
  bottom: 80.313%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-skill-enhance .game-guide-text-rate {
  bottom: 57.865%;
  left: 10.741%;
  width: 78%;
  text-align: center;
}
.game-guide-screen-skill-enhance .game-guide-text-swap {
  top: 43.385%;
  left: 2.778%;
  width: 45%;
}
.game-guide-screen-skill-enhance .game-guide-text-protect {
  top: 56.875%;
  left: 2.500%;
  width: 95%;
  text-align: center;
}
.game-guide-screen-skill-enhance .game-guide-text-keepauto {
  top: 73.385%;
  left: 2.500%;
  width: 45%;
}
.game-guide-screen-skill-enhance .game-guide-text-captap {
  top: 73.385%;
  left: 49.074%;
  width: 47%;
}
.game-guide-screen-skill-enhance .game-guide-text-pack {
  top: 82.917%;
  left: 2.500%;
  width: 95%;
  text-align: center;
}
.game-guide-screen-skill-enhance .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-skill-enhance .game-guide-line-skills-1 {
  left: 24.398%;
  top: 19.688%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}
.game-guide-screen-skill-enhance .game-guide-line-skills-2 {
  left: 73.935%;
  top: 19.688%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}
.game-guide-screen-skill-enhance .game-guide-line-rate {
  left: 74.769%;
  top: 42.135%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.865%;
}
.game-guide-screen-skill-enhance .game-guide-line-swap {
  left: 45.787%;
  top: 46.302%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.000%;
}
.game-guide-screen-skill-enhance .game-guide-line-protect-1 {
  left: 4.213%;
  top: 55.052%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.823%;
}
.game-guide-screen-skill-enhance .game-guide-line-protect-2 {
  left: 54.120%;
  top: 55.052%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.823%;
}
.game-guide-screen-skill-enhance .game-guide-line-keepauto {
  left: 4.213%;
  top: 69.583%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.802%;
}
.game-guide-screen-skill-enhance .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-limit-break
   -------------------------------------------------------------------
   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-limit-break .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-limit-break .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

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

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

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

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

/* --- connectors --------------------------------------------------- */
.game-guide-screen-limit-break .game-guide-line-effect {
  left: 74.213%;
  top: 28.073%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 5.313%;
}
.game-guide-screen-limit-break .game-guide-line-heart {
  left: 74.213%;
  top: 70.104%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.250%;
}
.game-guide-screen-limit-break .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);
}


/* ===================================================================
   H011 imported screen geometry: Return
   =================================================================== */
.game-guide-screen-return .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-return .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.407cqw;
}

/* --- cut-out: the whole Return Artifact dialog (no highlight frame) - */
.game-guide-screen-return .game-guide-window-dialog {
  left: 10.463%;
  top: 28.177%;
  width: 78.981%;
  height: 40.781%;
}
.game-guide-screen-return .game-guide-window-dialog > span {
  width: 126.612%;
  height: 245.211%;
  left: -13.247%;
  top: -69.093%;
}

/* --- cut-out + frame: the row-level Return button ------------------- */
.game-guide-screen-return .game-guide-frame-tab,
.game-guide-screen-return .game-guide-window-tab {
  left: 60.741%;
  top: 78.073%;
  width: 12.037%;
  height: 3.125%;
}
.game-guide-screen-return .game-guide-window-tab > span {
  width: 830.769%;
  height: 3200%;
  left: -504.615%;
  top: -2498.333%;
}

/* --- callouts ----------------------------------------------------- */
.game-guide-screen-return .game-guide-callout-what {
  top: 13.906%;
  left: 3.704%;
  width: 93%;
}
/* bottom-anchored: grows upward, connector length is constant */
.game-guide-screen-return .game-guide-callout-tab {
  bottom: 24.505%;
  left: 21.815%;
  width: 55.602%;
  text-align: center;
}
.game-guide-screen-return .game-guide-callout-cost {
  top: 84.938%;
  left: 3.704%;
  width: 93%;
}

/* --- connectors --------------------------------------------------- */
/* callout bottom edge y1449.5 -> frame top edge y1499 */
.game-guide-screen-return .game-guide-line-tab {
  left: 66.389%;
  top: 75.495%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.578%;
}


/* ===================================================================
   H012 imported screen geometry: Summon
   =================================================================== */
.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%; }


/* ===================================================================
   H013 imported screen geometry: Summon Result
   =================================================================== */
.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%;
}


/* ===================================================================
   H014 imported screen geometry: Limitation
   =================================================================== */
.game-guide-screen-limitation {
  background: #272c30;
}

/* --- banner ------------------------------------------------------- */
/* The artwork reaches OUTSIDE the banner frame - the left character's
   hair ornament sits above it and both characters overhang the sides -
   so the crop is the full art extent (x42-744 / y104-267) and this
   element is that crop, not the frame. Height is fixed so the artwork
   cannot stretch; the frame still lands on the master's rect. The
   title is nudged down 4px because the frame's centre sits 1.5% below
   the crop's centre. */
.game-guide-screen-limitation .game-guide-banner-title {
  left: 5.306%;
  top: 7.385%;
  width: 88.759%;
  height: 11.646%;
  border: 0;
  border-radius: 0;
  padding: 14px 130px 10px;
  padding: 2.2cqw 12cqw 1.5cqw;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 34% 9% at 50% 48%,
      rgba(255, 138, 52, 0.58), rgba(255, 138, 52, 0) 80%),
    var(--guide-banner);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  color: #efe4dd;
  font-size: 71px;
  font-size: 6.574cqw;
  -webkit-text-stroke: 3px rgba(92, 58, 52, 0.95);
  -webkit-text-stroke: 0.25cqw rgba(92, 58, 52, 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255, 150, 90, 0.45);
  text-shadow: 0 0 1.111cqw rgba(255, 150, 90, 0.45);
}

/* --- copy above and below the tables ------------------------------ */
/* two steps down from the shared size so a longer translation has a
   whole spare line before it reaches the Reward List box */
.game-guide-screen-limitation .game-guide-text-intro,
.game-guide-screen-limitation .game-guide-text-outro {
  font-size: 20px;
  font-size: 3cqw;
}
.game-guide-screen-limitation .game-guide-text-intro {
  left: 7.824%;
  top: 22.870%;
  width: 84.222%;
}
.game-guide-screen-limitation .game-guide-text-outro {
  left: 7.574%;
  top: 88.849%;
  width: 82.500%;
}

/* --- "Reward List" heading box ------------------------------------ */
.game-guide-screen-limitation .game-guide-heading {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 20px;
  padding: 1.204cqw 1.852cqw;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  border-radius: 1.204cqw;
  background: #272727;
  color: #f2f2f2;
  font-weight: 700;
  font-size: 30px;
  font-size: 4.6cqw;
  line-height: 1.25;
  text-wrap: balance;
}
.game-guide-screen-limitation .game-guide-heading-rewards {
  left: 19.315%;
  top: 30.542%;
  width: 61.361%;
  min-height: 5.823%;
}

/* --- the two table panels ----------------------------------------- */
.game-guide-screen-limitation .game-guide-panel {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  border-radius: 1.204cqw;
  background: #272727;
}
.game-guide-screen-limitation .game-guide-panel-difficulty {
  left: 6.435%;
  top: 38.568%;
  width: 26.769%;
  height: 46.948%;
}
.game-guide-screen-limitation .game-guide-panel-reward {
  left: 39.648%;
  top: 38.568%;
  width: 52.880%;
  height: 46.948%;
}

/* --- panel headers: centred in the band above the rule ------------ */
.game-guide-screen-limitation .game-guide-phead {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  padding: 0 1.204cqw;
  height: 7.031%;
  color: #f2f2f2;
  font-weight: 700;
  font-size: 24px;
  font-size: 3.6cqw;
  line-height: 1.22;
  text-wrap: balance;
}
.game-guide-screen-limitation .game-guide-phead-difficulty {
  left: 6.435%;
  top: 38.568%;
  width: 26.769%;
}
.game-guide-screen-limitation .game-guide-phead-reward {
  left: 39.648%;
  top: 38.568%;
  width: 52.880%;
}

/* --- rules under the panel headers -------------------------------- */
.game-guide-screen-limitation .game-guide-rule {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.53);
  height: 2px;
  height: max(1px, 0.185cqw);
}
.game-guide-screen-limitation .game-guide-rule-difficulty {
  left: 8.583%;
  top: 45.599%;
  width: 20.833%;
}
.game-guide-screen-limitation .game-guide-rule-reward {
  left: 42.676%;
  top: 45.599%;
  width: 47.093%;
}

/* --- table rows --------------------------------------------------- */
/* Six rows, master pitch 88.6 at 792 -> 120.8 at 1080. Each row is a
   flex/grid strip the height of the crystal icon, so its contents stay
   vertically centred however the text wraps. */
.game-guide-screen-limitation .game-guide-row {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  height: 101px;
  height: 9.343cqw;
  color: #e0e0e0;
  font-weight: 700;
  line-height: 1.2;
}
.game-guide-screen-limitation .game-guide-row-difficulty {
  left: 9.972%;
  width: 21.400%;
  display: flex;
  align-items: center;
  font-size: 28px;
  font-size: 4.3cqw;
  letter-spacing: 0.01em;
}
.game-guide-screen-limitation .game-guide-row-reward {
  left: 43.185%;
  width: 47.463%;
  display: grid;
  grid-template-columns: 9.343cqw 1fr 9cqw;
  align-items: center;
  gap: 22px;
  gap: 2cqw;
}
.game-guide-screen-limitation .game-guide-row-1 { top: 46.807%; }
.game-guide-screen-limitation .game-guide-row-2 { top: 53.098%; }
.game-guide-screen-limitation .game-guide-row-3 { top: 59.391%; }
.game-guide-screen-limitation .game-guide-row-4 { top: 65.677%; }
.game-guide-screen-limitation .game-guide-row-5 { top: 71.969%; }
.game-guide-screen-limitation .game-guide-row-6 { top: 78.260%; }

.game-guide-screen-limitation .game-guide-icon {
  width: 101px;
  width: 9.343cqw;
  height: 101px;
  height: 9.343cqw;
  background-image: var(--guide-icon);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.game-guide-screen-limitation .game-guide-rlabel {
  font-size: 21px;
  font-size: 3.1cqw;
  overflow-wrap: break-word;
}
.game-guide-screen-limitation .game-guide-rnum {
  font-size: 26px;
  font-size: 4cqw;
  white-space: nowrap;
}


/* ===================================================================
   H015 imported screen geometry: Difficulty Settings
   =================================================================== */
.game-guide-screen-difficulty-settings .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-difficulty-settings .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.9cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
.game-guide-screen-difficulty-settings .game-guide-frame-tab,
.game-guide-screen-difficulty-settings .game-guide-window-tab {
  left: 49.537%;
  top: 7.917%;
  width: 48.333%;
  height: 5.781%;
}
.game-guide-screen-difficulty-settings .game-guide-window-tab > span {
  width: 206.897%;
  height: 1729.730%;
  left: -102.490%;
  top: -136.937%;
}

.game-guide-screen-difficulty-settings .game-guide-frame-banner,
.game-guide-screen-difficulty-settings .game-guide-window-banner {
  left: 6.852%;
  top: 16.198%;
  width: 86.204%;
  height: 10.208%;
}
.game-guide-screen-difficulty-settings .game-guide-window-banner > span {
  width: 116.004%;
  height: 979.592%;
  left: -7.948%;
  top: -158.673%;
}

.game-guide-screen-difficulty-settings .game-guide-frame-arrowl,
.game-guide-screen-difficulty-settings .game-guide-window-arrowl {
  left: 8.796%;
  top: 28.125%;
  width: 7.870%;
  height: 5.729%;
}
.game-guide-screen-difficulty-settings .game-guide-window-arrowl > span {
  width: 1270.588%;
  height: 1745.455%;
  left: -111.765%;
  top: -490.909%;
}

.game-guide-screen-difficulty-settings .game-guide-frame-arrowr,
.game-guide-screen-difficulty-settings .game-guide-window-arrowr {
  left: 83.611%;
  top: 28.125%;
  width: 7.870%;
  height: 5.729%;
}
.game-guide-screen-difficulty-settings .game-guide-window-arrowr > span {
  width: 1270.588%;
  height: 1745.455%;
  left: -1062.353%;
  top: -490.909%;
}

.game-guide-screen-difficulty-settings .game-guide-frame-total,
.game-guide-screen-difficulty-settings .game-guide-window-total {
  left: 34.074%;
  top: 81.198%;
  width: 32.222%;
  height: 7.813%;
}
.game-guide-screen-difficulty-settings .game-guide-window-total > span {
  width: 310.345%;
  height: 1280%;
  left: -105.747%;
  top: -1039.333%;
}

/* --- callout boxes ------------------------------------------------ */
/* Each box is placed so its TEXT lands on the master's line, i.e. the
   master position less the box's own padding + border (11px). Right
   edges are held clear of the row arrows the boxes sit beside. */
.game-guide-screen-difficulty-settings .game-guide-callout-tab {
  left: 38.231%;
  top: 1.557%;
  width: 59.259%;
}
/* right edge x890, clear of the right arrow frame at x903 */
.game-guide-screen-difficulty-settings .game-guide-callout-claim {
  left: 30.741%;
  top: 29.328%;
  width: 51.667%;
}
/* stretched between the two arrow frames so both connectors land on
   its top corners, the way the master's two arrows flank the line;
   right edge x915, clear of the next row's arrow at x923 */
.game-guide-screen-difficulty-settings .game-guide-callout-change {
  left: 15.741%;
  top: 37.552%;
  width: 68.981%;
  text-align: center;
}
.game-guide-screen-difficulty-settings .game-guide-callout-total {
  left: 18.028%;
  top: 74.354%;
  width: 71.333%;
}

/* --- connectors --------------------------------------------------- */
/* tab box bottom y95.5 -> tab frame top y152 */
.game-guide-screen-difficulty-settings .game-guide-line-tab {
  left: 72.167%;
  top: 4.974%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.943%;
}
/* banner frame bottom y507 -> claim box top y563 */
.game-guide-screen-difficulty-settings .game-guide-line-claim {
  left: 75.574%;
  top: 26.406%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.922%;
}
/* both arrow frames bottom y650 -> change box top y721 */
.game-guide-screen-difficulty-settings .game-guide-line-arrowl {
  left: 15.833%;
  top: 33.854%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.698%;
}
.game-guide-screen-difficulty-settings .game-guide-line-arrowr {
  left: 83.889%;
  top: 33.854%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.698%;
}
/* total box bottom y1493 -> total frame top y1559 */
.game-guide-screen-difficulty-settings .game-guide-line-total {
  left: 49.315%;
  top: 77.766%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.432%;
}


/* ===================================================================
   H016 imported screen geometry: How to Apply
   =================================================================== */
.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%;
}


/* ===================================================================
   H017 imported screen geometry: Foray
   =================================================================== */
.game-guide-screen-foray {
  background: #272c30;
}

/* --- banner ------------------------------------------------------- */
/* The frame's centre sits at 49.5% / 61.1% of the crop, not 50/50, so
   the title is pushed down with asymmetric padding. Height is fixed so
   the artwork cannot stretch. */
.game-guide-screen-foray .game-guide-banner-title {
  left: 1.011%;
  top: 4.409%;
  width: 98.991%;
  height: 14.719%;
  border: 0;
  border-radius: 0;
  padding: 73px 130px 10px;
  padding: 6.74cqw 12cqw 0.93cqw;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 24% 9% at 49.5% 61%,
      rgba(255, 138, 52, 0.58), rgba(255, 138, 52, 0) 80%),
    var(--guide-banner);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  color: #efe4dd;
  font-size: 71px;
  font-size: 6.574cqw;
  -webkit-text-stroke: 3px rgba(92, 58, 52, 0.95);
  -webkit-text-stroke: 0.25cqw rgba(92, 58, 52, 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255, 150, 90, 0.45);
  text-shadow: 0 0 1.111cqw rgba(255, 150, 90, 0.45);
}

/* --- the four copy blocks ----------------------------------------- */
.game-guide-screen-foray .game-guide-text {
  left: 5.750%;
  width: 89.500%;
  font-size: 20px;
  font-size: 3cqw;
}
.game-guide-screen-foray .game-guide-text-unlock  { top: 23.536%; }
.game-guide-screen-foray .game-guide-text-rewards { top: 34.917%; }
.game-guide-screen-foray .game-guide-text-blessing{ top: 70.615%; }
.game-guide-screen-foray .game-guide-text-prepare { top: 87.823%; }

/* --- carry-over reward plate (artwork) ---------------------------- */
.game-guide-screen-foray .game-guide-plate {
  position: absolute;
  z-index: 2;
  left: 19.722%;
  top: 49.776%;
  width: 60.685%;
  height: 15.432%;
  background-image: var(--guide-plate);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* the EXP row, left-aligned on the master's x170 */
.game-guide-screen-foray .game-guide-plate-exp {
  position: absolute;
  z-index: 5;
  left: 21.491%;
  top: 49.990%;
  height: 3.130%;
  display: flex;
  align-items: center;
  gap: 8px;
  gap: 0.741cqw;
  color: #e0dfdf;
  font-weight: 700;
  font-size: 21px;
  font-size: 3.1cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-guide-screen-foray .game-guide-exp-unit {
  color: #ffff70;
}

/* the three card labels, centred on their card and sized so a longer
   translation can take a second line inside the strip */
.game-guide-screen-foray .game-guide-plate-label {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  top: 62.443%;
  height: 2.276%;
  padding: 0 4px;
  padding: 0 0.37cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-size: 1.8cqw;
  line-height: 1.15;
  text-wrap: balance;
}
.game-guide-screen-foray .game-guide-plate-label-silver {
  left: 19.722%;
  width: 19.213%;
}
.game-guide-screen-foray .game-guide-plate-label-treasure {
  left: 40.454%;
  width: 19.093%;
}
.game-guide-screen-foray .game-guide-plate-label-ap {
  left: 61.056%;
  width: 19.250%;
}


/* ===================================================================
   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
   The master's fourth frame (the Auto Foray panel) could not be
   measured from the master file in this session, so that one frame is
   taken from the English panel's own border - x338..579 / y1502..1657 -
   plus a uniform 12px margin, which is the tight hug the master gives
   that panel.
   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%;
}

/* 4. Auto Foray panel */
.game-guide-screen-difficulty-select .game-guide-frame-autoforay,
.game-guide-screen-difficulty-select .game-guide-window-autoforay {
  left: 30.185%;
  top: 77.604%;
  width: 24.537%;
  height: 9.323%;
}
.game-guide-screen-difficulty-select .game-guide-window-autoforay > span {
  width: 407.547%;
  height: 1072.626%;
  left: -123.019%;
  top: -832.402%;
}

/* --- 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%; }

/* the Auto Foray box is the one box on this screen whose connector
   leaves its BOTTOM edge, so it is anchored by the bottom: a longer
   translation grows upward into the empty panel above and the
   connector stays attached. It stops short of the scroll frame
   (x619) so the two never meet. */
.game-guide-screen-difficulty-select .game-guide-callout-autoforay {
  left: 4.815%;
  bottom: 25%;
  width: 50%;
}

/* --- 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%;
}
/* autoforay: callout bottom 1440 -> frame top 1490, on the frame centre */
.game-guide-screen-difficulty-select .game-guide-line-autoforay {
  left: 42.083%;
  top: 75%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.604%;
}
/* 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%;
}

/* ===================================================================
   H019 imported screen geometry: Difficulty Details
   =================================================================== */
.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%;
}


/* ===================================================================
   H020 imported screen geometry: World Map
   =================================================================== */
.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%;
}


/* ===================================================================
   H021 imported screen geometry: Battle ①
   =================================================================== */
.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%;
}


/* ===================================================================
   H022 imported screen geometry: Battle ②
   =================================================================== */
.game-guide-screen-foray-battle-2 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-foray-battle-2 .game-guide-text {
  font-size: 20px;
  font-size: 2.9cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
.game-guide-screen-foray-battle-2 .game-guide-frame-counter,
.game-guide-screen-foray-battle-2 .game-guide-window-counter {
  left: 36.852%;
  top: 1.615%;
  width: 25.926%;
  height: 5.208%;
}
.game-guide-screen-foray-battle-2 .game-guide-window-counter > span {
  width: 385.714%;
  height: 1920%;
  left: -142.143%;
  top: -3100%;
}

.game-guide-screen-foray-battle-2 .game-guide-frame-glow,
.game-guide-screen-foray-battle-2 .game-guide-window-glow {
  left: 0%;
  top: 25.833%;
  width: 13.241%;
  height: 26.406%;
}
.game-guide-screen-foray-battle-2 .game-guide-window-glow > span {
  width: 755.245%;
  height: 378.698%;
  left: 0%;
  top: -97.830%;
}

.game-guide-screen-foray-battle-2 .game-guide-frame-spawn,
.game-guide-screen-foray-battle-2 .game-guide-window-spawn {
  left: 75.185%;
  top: 35.208%;
  width: 20.370%;
  height: 15.990%;
}
.game-guide-screen-foray-battle-2 .game-guide-window-spawn > span {
  width: 490.909%;
  height: 625.407%;
  left: -369.091%;
  top: -220.195%;
}

.game-guide-screen-foray-battle-2 .game-guide-frame-lanes,
.game-guide-screen-foray-battle-2 .game-guide-window-lanes {
  left: 3.241%;
  top: 75.885%;
  width: 16.667%;
  height: 12.917%;
}
.game-guide-screen-foray-battle-2 .game-guide-window-lanes > span {
  width: 600%;
  height: 774.194%;
  left: -19.444%;
  top: -587.500%;
}

.game-guide-screen-foray-battle-2 .game-guide-frame-rank,
.game-guide-screen-foray-battle-2 .game-guide-window-rank {
  left: 3.241%;
  top: 88.802%;
  width: 16.667%;
  height: 11.198%;
}
.game-guide-screen-foray-battle-2 .game-guide-window-rank > span {
  width: 600%;
  height: 893.023%;
  left: -19.444%;
  top: -793.023%;
}

/* --- text blocks -------------------------------------------------- */
.game-guide-screen-foray-battle-2 .game-guide-text-victory {
  left: 42.472%;
  top: 14.865%;
  width: 50.463%;
}
.game-guide-screen-foray-battle-2 .game-guide-text-deploy {
  left: 17.694%;
  top: 37.260%;
  width: 57.870%;
}
.game-guide-screen-foray-battle-2 .game-guide-text-paths {
  left: 4.176%;
  top: 61.016%;
  width: 93.333%;
}
.game-guide-screen-foray-battle-2 .game-guide-text-rejoin {
  left: 24.528%;
  top: 76.802%;
  width: 68.056%;
}
.game-guide-screen-foray-battle-2 .game-guide-text-cost {
  left: 24.019%;
  top: 90.958%;
  width: 70.648%;
}

/* --- connectors --------------------------------------------------- */
/* counter frame bottom y131 -> victory text top y285 */
.game-guide-screen-foray-battle-2 .game-guide-line-counter {
  left: 49.491%;
  top: 6.823%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 8.042%;
}
/* victory text bottom y422 -> spawn frame top y676 */
.game-guide-screen-foray-battle-2 .game-guide-line-spawn {
  left: 79.593%;
  top: 21.958%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 13.250%;
}
/* glow frame right x143 -> deploy text left x191 */
.game-guide-screen-foray-battle-2 .game-guide-line-deploy {
  left: 13.241%;
  top: 39.969%;
  width: 4.454%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
/* paths text bottom y1308 -> lanes frame top y1457 */
.game-guide-screen-foray-battle-2 .game-guide-line-lanes {
  left: 11.204%;
  top: 68.109%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 7.776%;
}
/* rank frame right x215 -> cost text left x259 */
.game-guide-screen-foray-battle-2 .game-guide-line-rank {
  left: 19.907%;
  top: 94.193%;
  width: 4.111%;
  height: 5px;
  height: max(2px, 0.741cqw);
}


/* ===================================================================
   H023 imported screen geometry: Base
   =================================================================== */
.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%;
}


/* ===================================================================
   H024 imported screen geometry: Building
   =================================================================== */
.game-guide-screen-building .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-guide-screen-building .game-guide-text {
  font-size: 20px;
  font-size: 2.7cqw;
}

/* --- frames + cut-outs -------------------------------------------- */
.game-guide-screen-building .game-guide-frame-title,
.game-guide-screen-building .game-guide-window-title {
  left: 21.852%;
  top: 18.906%;
  width: 55.556%;
  height: 5.625%;
}
.game-guide-screen-building .game-guide-window-title > span {
  width: 180%;
  height: 1777.778%;
  left: -39.333%;
  top: -336.111%;
}

.game-guide-screen-building .game-guide-frame-materials,
.game-guide-screen-building .game-guide-window-materials {
  left: 6.481%;
  top: 55.208%;
  width: 42.315%;
  height: 19.792%;
}
.game-guide-screen-building .game-guide-window-materials > span {
  width: 236.324%;
  height: 505.263%;
  left: -15.317%;
  top: -278.947%;
}

/* --- the Rapid Gathering button, inlined in the sentence ---------- */
.game-guide-screen-building .game-guide-chip {
  display: inline-block;
  vertical-align: middle;
  width: 163px;
  width: 15.093cqw;
  height: 75px;
  height: 6.944cqw;
  margin: 0 6px;
  margin: 0 0.556cqw;
  background-image: var(--guide-chip);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- text blocks -------------------------------------------------- */
.game-guide-screen-building .game-guide-text-upgrade {
  left: 21.241%;
  top: 10.453%;
  width: 59.167%;
}
.game-guide-screen-building .game-guide-text-maxlevel {
  left: 13.657%;
  top: 26.667%;
  width: 77.963%;
}
.game-guide-screen-building .game-guide-text-unlock {
  left: 8.093%;
  top: 36.615%;
  width: 88.333%;
}
/* moved 40px below the master's y so the chip line, which cannot wrap,
   keeps 1.6 spare lines instead of 0.6 */
.game-guide-screen-building .game-guide-text-rapid {
  left: 8.093%;
  top: 44.036%;
  width: 88.333%;
}
.game-guide-screen-building .game-guide-text-short {
  left: 7.204%;
  top: 78.224%;
  width: 81.389%;
}
.game-guide-screen-building .game-guide-text-orb {
  left: 17.824%;
  top: 90.682%;
  width: 64.352%;
}

/* --- connectors --------------------------------------------------- */
/* upgrade text bottom y285 -> title frame top y363 */
.game-guide-screen-building .game-guide-line-title {
  left: 49.259%;
  top: 14.859%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.047%;
}
/* materials frame bottom y1440 -> short text top y1502 */
.game-guide-screen-building .game-guide-line-materials {
  left: 27.269%;
  top: 75%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.224%;
}


/* ===================================================================
   H025 imported screen geometry: Exchange
   =================================================================== */
.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%;
}


/* v26 Additional Help articles */
.game-help-part {
  scroll-margin-top: 24px;
}
.game-help-part + .game-help-part {
  margin-top: 28px;
  margin-top: clamp(28px, 4vw, 56px);
}


/* v26 Help screen: total-war-1 */
.game-help-screen-total-war-1 {
  background: #272c30;
}
.game-help-screen-total-war-1 .game-guide-banner-title {
  left: 6.852%;
  top: 5.208%;
  width: 86.389%;
  height: 11.979%;
  border: 0;
  border-radius: 0;
  padding: 25px 150px 10px;
  padding: 2.315cqw 14cqw 0.926cqw;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 25% 11% at 49.8% 51.3%,
      rgba(255, 138, 52, 0.55), rgba(255, 138, 52, 0) 80%),
    var(--guide-banner);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  color: #efe4dd;
  font-size: 73px;
  font-size: 6.759cqw;
  -webkit-text-stroke: 3px rgba(92, 58, 52, 0.95);
  -webkit-text-stroke: 0.25cqw rgba(92, 58, 52, 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255, 150, 90, 0.45);
  text-shadow: 0 0 1.111cqw rgba(255, 150, 90, 0.45);
}
.game-help-screen-total-war-1 .game-guide-text {
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-total-war-1 .game-guide-text-limit {
  left: 4.167%;
  top: 22.292%;
  width: 93.704%;
}
.game-help-screen-total-war-1 .game-guide-text-protect {
  left: 4.259%;
  top: 33.646%;
  width: 75.093%;
}
.game-help-screen-total-war-1 .game-guide-text-healing {
  left: 6.759%;
  top: 72.135%;
  width: 86.204%;
}
.game-help-screen-total-war-1 .game-guide-text-debuff {
  left: 6.759%;
  top: 89.219%;
  width: 86.204%;
}
.game-help-screen-total-war-1 .game-guide-illust {
  position: absolute;
  z-index: 2;
  left: 25.926%;
  top: 41.250%;
  width: 53.704%;
  height: 28.646%;
  background-image: var(--guide-illust);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.game-help-screen-total-war-1 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.365%;
  text-align: center;
  color: #7e7874;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.87cqw;
  line-height: 1.3;
}

/* v26 Help screen: total-war-2 */
.game-help-screen-total-war-2 {
  background: #272c30;
}
.game-help-screen-total-war-2 .game-guide-text {
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-total-war-2 .game-guide-text-kinds {
  left: 12.500%;
  top: 7.188%;
  width: 75.093%;
}
.game-help-screen-total-war-2 .game-guide-text-materials {
  left: 8.704%;
  top: 50.677%;
  width: 82.500%;
}
.game-help-screen-total-war-2 .game-guide-plate {
  position: absolute;
  z-index: 2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.game-help-screen-total-war-2 .game-guide-plate-rewards {
  left: 8.889%;
  top: 22.188%;
  width: 82.130%;
  height: 24.531%;
  background-image: var(--guide-rewards);
}
.game-help-screen-total-war-2 .game-guide-plate-result {
  left: 12.315%;
  top: 68.073%;
  width: 75.463%;
  height: 24.792%;
  background-image: var(--guide-result);
}
.game-help-screen-total-war-2 .game-guide-listrow {
  position: absolute;
  z-index: 5;
  left: 27.778%;
  width: 52.315%;
  height: 1.979%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  gap: 1.111cqw;
  font-weight: 700;
  font-size: 13px;
  font-size: 1.852cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-help-screen-total-war-2 .game-guide-listrow-1 {
  top: 22.188%;
  color: rgba(255, 255, 255, 0.20);
}
.game-help-screen-total-war-2 .game-guide-listrow-2 {
  top: 27.135%;
  color: rgba(255, 255, 255, 0.82);
}
.game-help-screen-total-war-2 .game-guide-listrow-3 {
  top: 32.552%;
  color: rgba(255, 255, 255, 0.34);
}
.game-help-screen-total-war-2 .game-guide-claim-name {
  position: absolute;
  z-index: 5;
  left: 30.648%;
  top: 37.083%;
  width: 34.167%;
  height: 1.875%;
  display: flex;
  align-items: center;
  color: #f2eae4;
  font-weight: 700;
  font-size: 17px;
  font-size: 2.407cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-help-screen-total-war-2 .game-guide-claim-rank {
  position: absolute;
  z-index: 5;
  left: 30.648%;
  top: 39.271%;
  width: 34.444%;
  height: 2.604%;
  display: flex;
  align-items: center;
  color: #e8913c;
  font-weight: 700;
  font-size: 16px;
  font-size: 2.130cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-help-screen-total-war-2 .game-guide-claim-button {
  position: absolute;
  z-index: 5;
  left: 65.185%;
  top: 38.802%;
  width: 17.037%;
  height: 1.875%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-size: 2.778cqw;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(120, 40, 0, 0.7);
}
.game-help-screen-total-war-2 .game-guide-result-title {
  position: absolute;
  z-index: 5;
  left: 35.185%;
  top: 70.469%;
  width: 29.630%;
  height: 1.875%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e2da;
  font-weight: 700;
  font-size: 23px;
  font-size: 3.148cqw;
  line-height: 1.2;
}
.game-help-screen-total-war-2 .game-guide-result-rank {
  position: absolute;
  z-index: 5;
  left: 26.389%;
  top: 75.208%;
  width: 45.926%;
  height: 1.875%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e2e0;
  font-weight: 700;
  font-size: 20px;
  font-size: 2.778cqw;
  line-height: 1.2;
}
.game-help-screen-total-war-2 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.365%;
  text-align: center;
  color: #7e7874;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.87cqw;
  line-height: 1.3;
}

/* v26 Help screen: unlock-potential-1 */
.game-help-screen-unlock-potential-1 {
  background: #272c30;
}
.game-help-screen-unlock-potential-1 .game-guide-banner-title {
  left: 1.296%;
  top: 0;
  width: 91.944%;
  height: 16.667%;
  border: 0;
  border-radius: 0;
  
  padding: 115px 130px 10px 197px;
  padding: 10.648cqw 12cqw 0.926cqw 18.204cqw;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 30% 10% at 53.5% 66.3%,
      rgba(255, 138, 52, 0.62), rgba(255, 138, 52, 0) 78%),
    var(--guide-banner);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  color: #efe4dd;
  font-size: 63px;
  font-size: 5.8cqw;
  -webkit-text-stroke: 3px rgba(92, 58, 52, 0.95);
  -webkit-text-stroke: 0.25cqw rgba(92, 58, 52, 0.95);
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255, 150, 90, 0.45);
  text-shadow: 0 0 1.111cqw rgba(255, 150, 90, 0.45);
}
.game-help-screen-unlock-potential-1 .game-guide-text {
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-unlock-potential-1 .game-guide-text-cost {
  left: 11.389%;
  top: 19.479%;
  width: 77.222%;
}
.game-help-screen-unlock-potential-1 .game-guide-text-modes {
  left: 4.259%;
  top: 26.719%;
  width: 91.574%;
}
.game-help-screen-unlock-potential-1 .game-guide-text-count {
  left: 9%;
  top: 39.479%;
  width: 82%;
  text-align: center;
}
.game-help-screen-unlock-potential-1 .game-guide-text-note {
  left: 6.204%;
  top: 88.542%;
  width: 83.333%;
  font-size: 19px;
  font-size: 2.8cqw;
}
.game-help-screen-unlock-potential-1 .game-guide-note-2 {
  display: block;
  padding-left: 4%;
}
.game-help-screen-unlock-potential-1 .game-guide-inline-icon {
  display: inline-block;
  vertical-align: -0.22em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.game-help-screen-unlock-potential-1 .game-guide-inline-orb {
  width: 46px;
  width: 4.259cqw;
  height: 47px;
  height: 4.352cqw;
  background-image: var(--guide-orb);
}
.game-help-screen-unlock-potential-1 .game-guide-inline-gold {
  width: 62px;
  width: 5.741cqw;
  height: 39px;
  height: 3.611cqw;
  background-image: var(--guide-gold);
}
.game-help-screen-unlock-potential-1 .game-guide-heading {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  left: 23.704%;
  top: 43.594%;
  width: 52.778%;
  min-height: 5.052%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 20px;
  padding: 1.204cqw 1.852cqw;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  border-radius: 1.204cqw;
  background: #272727;
  color: #f2f2f2;
  font-weight: 700;
  font-size: 25px;
  font-size: 3.5cqw;
  line-height: 1.25;
  text-wrap: balance;
}
.game-help-screen-unlock-potential-1 .game-guide-panel {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  left: 10.093%;
  top: 50.573%;
  width: 79.815%;
  height: 35.469%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border: max(1px, 0.093cqw) solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  border-radius: 1.204cqw;
  background: #272727;
}
.game-help-screen-unlock-potential-1 .game-guide-rule-h {
  position: absolute;
  z-index: 5;
  left: 12.685%;
  top: 55.990%;
  width: 74.352%;
  height: 2px;
  height: max(1px, 0.185cqw);
  background: rgba(255, 255, 255, 0.45);
}
.game-help-screen-unlock-potential-1 .game-guide-rule-v {
  position: absolute;
  z-index: 5;
  left: 27.870%;
  top: 52.083%;
  width: 2px;
  width: max(1px, 0.185cqw);
  height: 33.333%;
  background: rgba(255, 255, 255, 0.45);
}
.game-help-screen-unlock-potential-1 .game-guide-th {
  position: absolute;
  z-index: 5;
  top: 52.813%;
  height: 1.979%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #efefef;
  font-weight: 700;
  font-size: 21px;
  font-size: 2.778cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-help-screen-unlock-potential-1 .game-guide-th-min { left: 18.333%; width: 9.259%; }
.game-help-screen-unlock-potential-1 .game-guide-th-max { left: 59.630%; width: 9.259%; }
.game-help-screen-unlock-potential-1 .game-guide-th-rate { left: 72.685%; width: 15.741%; }
.game-help-screen-unlock-potential-1 .game-guide-tr {
  position: absolute;
  z-index: 5;
  left: 12.685%;
  width: 75.741%;
  height: 1.979%;
  display: grid;
  grid-template-columns:
    15.185cqw 5.185cqw 7.222cqw 3.241cqw 6.944cqw
    2.778cqw 5.741cqw 0.648cqw 7.315cqw 5.741cqw 15.741cqw;
  align-items: center;
  color: #efefef;
  font-weight: 700;
  font-size: 23px;
  font-size: 3.148cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.game-help-screen-unlock-potential-1 .game-guide-tr > .name { grid-column: 1; font-size: 2.4cqw; }
.game-help-screen-unlock-potential-1 .game-guide-tr > .v1 { grid-column: 3; }
.game-help-screen-unlock-potential-1 .game-guide-tr > .v2 { grid-column: 5; }
.game-help-screen-unlock-potential-1 .game-guide-tr > .dots { grid-column: 7; text-align: center; letter-spacing: 0.1em; }
.game-help-screen-unlock-potential-1 .game-guide-tr > .vmax { grid-column: 9; text-align: right; }
.game-help-screen-unlock-potential-1 .game-guide-tr > .vrate { grid-column: 11; text-align: center; }
.game-help-screen-unlock-potential-1 .game-guide-tr-1 { top: 57.917%; }
.game-help-screen-unlock-potential-1 .game-guide-tr-2 { top: 62.750%; }
.game-help-screen-unlock-potential-1 .game-guide-tr-3 { top: 67.583%; }
.game-help-screen-unlock-potential-1 .game-guide-tr-4 { top: 72.417%; }
.game-help-screen-unlock-potential-1 .game-guide-tr-5 { top: 77.250%; }
.game-help-screen-unlock-potential-1 .game-guide-tr-6 { top: 82.083%; }
.game-help-screen-unlock-potential-1 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.365%;
  text-align: center;
  color: #7e7874;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.87cqw;
  line-height: 1.3;
}

/* v26 Help screen: unlock-potential-2 */
.game-help-screen-unlock-potential-2 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-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;
}
.game-help-screen-unlock-potential-2 .game-guide-frame-awakening,
.game-help-screen-unlock-potential-2 .game-guide-window-awakening {
  left: 3.981%;
  top: 39.583%;
  width: 26.667%;
  height: 5.625%;
}
.game-help-screen-unlock-potential-2 .game-guide-window-awakening > span {
  width: 375%;
  height: 1777.778%;
  left: -14.931%;
  top: -703.704%;
}
.game-help-screen-unlock-potential-2 .game-guide-frame-rate,
.game-help-screen-unlock-potential-2 .game-guide-window-rate {
  left: 45.648%;
  top: 52.552%;
  width: 39.630%;
  height: 4.375%;
}
.game-help-screen-unlock-potential-2 .game-guide-window-rate > span {
  width: 252.336%;
  height: 2285.714%;
  left: -115.187%;
  top: -1201.190%;
}
.game-help-screen-unlock-potential-2 .game-guide-callout-awakening,
.game-help-screen-unlock-potential-2 .game-guide-callout-rate,
.game-help-screen-unlock-potential-2 .game-guide-callout-slots {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-unlock-potential-2 .game-guide-callout-awakening {
  bottom: 62.917%;
}
.game-help-screen-unlock-potential-2 .game-guide-callout-rate { top: 60.677%; }
.game-help-screen-unlock-potential-2 .game-guide-callout-slots { top: 76.979%; }
.game-help-screen-unlock-potential-2 .game-guide-line-awakening {
  left: 16.944%;
  top: 37.083%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.500%;
}
.game-help-screen-unlock-potential-2 .game-guide-line-rate {
  left: 65.093%;
  top: 56.927%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.750%;
}

/* v26 Help screen: unlock-potential-3 */
.game-help-screen-unlock-potential-3 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-help-screen-unlock-potential-3 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-unlock-potential-3 .game-guide-frame-lock,
.game-help-screen-unlock-potential-3 .game-guide-window-lock {
  left: 34.630%;
  top: 45.208%;
  width: 9.074%;
  height: 4.948%;
}
.game-help-screen-unlock-potential-3 .game-guide-window-lock > span {
  width: 1102.041%;
  height: 2021.053%;
  left: -381.633%;
  top: -913.684%;
}
.game-help-screen-unlock-potential-3 .game-guide-frame-row,
.game-help-screen-unlock-potential-3 .game-guide-window-row {
  left: 34.630%;
  top: 50.677%;
  width: 30.833%;
  height: 4.375%;
}
.game-help-screen-unlock-potential-3 .game-guide-window-row > span {
  width: 324.324%;
  height: 2285.714%;
  left: -112.312%;
  top: -1158.333%;
}
.game-help-screen-unlock-potential-3 .game-guide-callout-lock {
  left: 8.611%;
  top: 31.042%;
  width: 68.148%;
}
.game-help-screen-unlock-potential-3 .game-guide-callout-maxvalue {
  left: 8.981%;
  top: 59.583%;
  width: 83.056%;
}
.game-help-screen-unlock-potential-3 .game-guide-callout-random {
  left: 8.981%;
  top: 73.698%;
  width: 83.056%;
}
.game-help-screen-unlock-potential-3 .game-guide-callout-equal {
  left: 9.074%;
  top: 81.198%;
  width: 83.056%;
}
.game-help-screen-unlock-potential-3 .game-guide-line-lock {
  left: 38.750%;
  top: 41.521%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.688%;
}
.game-help-screen-unlock-potential-3 .game-guide-line-row {
  left: 49.213%;
  top: 55.052%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.531%;
}
.game-help-screen-unlock-potential-3 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.365%;
  text-align: center;
  color: #7e7874;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.87cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* v26 Help screen: unlock-potential-4 */
.game-help-screen-unlock-potential-4 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-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;
}
.game-help-screen-unlock-potential-4 .game-guide-frame-desc,
.game-help-screen-unlock-potential-4 .game-guide-window-desc {
  left: 34.630%;
  top: 46.302%;
  width: 61.296%;
  height: 16.719%;
}
.game-help-screen-unlock-potential-4 .game-guide-window-desc > span {
  width: 163.142%;
  height: 598.131%;
  left: -56.495%;
  top: -276.947%;
}
.game-help-screen-unlock-potential-4 .game-guide-frame-tab,
.game-help-screen-unlock-potential-4 .game-guide-window-tab {
  left: 3.889%;
  top: 57.344%;
  width: 27.407%;
  height: 5.625%;
}
.game-help-screen-unlock-potential-4 .game-guide-window-tab > span {
  width: 364.865%;
  height: 1777.778%;
  left: -14.189%;
  top: -1019.444%;
}
.game-help-screen-unlock-potential-4 .game-guide-callout-release,
.game-help-screen-unlock-potential-4 .game-guide-callout-reincarnate {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-unlock-potential-4 .game-guide-callout-release { top: 18.906%; }
.game-help-screen-unlock-potential-4 .game-guide-callout-reincarnate { top: 72.656%; }

/* v26 Help screen: unlock-potential-5 */
.game-help-screen-unlock-potential-5 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-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;
}
.game-help-screen-unlock-potential-5 .game-guide-frame-toggle,
.game-help-screen-unlock-potential-5 .game-guide-window-toggle {
  left: 88.519%;
  top: 51.875%;
  width: 7.037%;
  height: 3.906%;
}
.game-help-screen-unlock-potential-5 .game-guide-window-toggle > span {
  width: 1421.053%;
  height: 2560%;
  left: -1257.895%;
  top: -1328%;
}
.game-help-screen-unlock-potential-5 .game-guide-frame-tab,
.game-help-screen-unlock-potential-5 .game-guide-window-tab {
  left: 3.889%;
  top: 63.073%;
  width: 27.407%;
  height: 5.625%;
}
.game-help-screen-unlock-potential-5 .game-guide-window-tab > span {
  width: 364.865%;
  height: 1777.778%;
  left: -14.189%;
  top: -1121.296%;
}
.game-help-screen-unlock-potential-5 .game-guide-callout-reset,
.game-help-screen-unlock-potential-5 .game-guide-callout-reincarnation {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-unlock-potential-5 .game-guide-callout-reset { top: 29.427%; }
.game-help-screen-unlock-potential-5 .game-guide-callout-reincarnation { top: 77.865%; }
.game-help-screen-unlock-potential-5 .game-guide-callout-switch {
  top: 59.375%;
  left: 54.167%;
  width: 43.056%;
}
.game-help-screen-unlock-potential-5 .game-guide-line-switch {
  left: 91.667%;
  top: 55.781%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.594%;
}

/* v26 Help screen: gems-1 */
.game-help-screen-gems-1 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-screen-gems-1 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.593cqw;
}
.game-help-screen-gems-1 .game-guide-frame-gems,
.game-help-screen-gems-1 .game-guide-window-gems {
  left: 23.704%;
  top: 27.344%;
  width: 52.593%;
  height: 5.729%;
}
.game-help-screen-gems-1 .game-guide-window-gems > span {
  width: 190.141%;
  height: 1745.455%;
  left: -45.070%;
  top: -477.273%;
}
.game-help-screen-gems-1 .game-guide-frame-tab,
.game-help-screen-gems-1 .game-guide-window-tab {
  left: 1.667%;
  top: 45%;
  width: 33.241%;
  height: 4.635%;
}
.game-help-screen-gems-1 .game-guide-window-tab > span {
  width: 300.836%;
  height: 2157.303%;
  left: -5.014%;
  top: -970.787%;
}
.game-help-screen-gems-1 .game-guide-frame-forgelv,
.game-help-screen-gems-1 .game-guide-window-forgelv {
  left: 36.296%;
  top: 83.021%;
  width: 16.296%;
  height: 3.073%;
}
.game-help-screen-gems-1 .game-guide-window-forgelv > span {
  width: 613.636%;
  height: 3254.237%;
  left: -222.727%;
  top: -2701.695%;
}
.game-help-screen-gems-1 .game-guide-frame-rates,
.game-help-screen-gems-1 .game-guide-window-rates {
  left: 4.444%;
  top: 89.740%;
  width: 15.741%;
  height: 3.906%;
}
.game-help-screen-gems-1 .game-guide-window-rates > span {
  width: 635.294%;
  height: 2560%;
  left: -28.235%;
  top: -2297.333%;
}
.game-help-screen-gems-1 .game-guide-callout-source,
.game-help-screen-gems-1 .game-guide-callout-forgelv {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-gems-1 .game-guide-callout-source { top: 6.146%; }
.game-help-screen-gems-1 .game-guide-callout-forgelv { bottom: 21.354%; }
.game-help-screen-gems-1 .game-guide-callout-switch {
  bottom: 75.781%;
  left: 18.750%;
  width: 62.500%;
}
.game-help-screen-gems-1 .game-guide-callout-tabs {
  bottom: 58.333%;
  left: 3.704%;
  width: 51.852%;
}
.game-help-screen-gems-1 .game-guide-callout-rates {
  top: 88.542%;
  left: 25.741%;
  width: 67.778%;
}
.game-help-screen-gems-1 .game-guide-line-switch {
  left: 49.630%;
  top: 24.219%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
.game-help-screen-gems-1 .game-guide-line-tabs {
  left: 17.963%;
  top: 41.667%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.333%;
}
.game-help-screen-gems-1 .game-guide-line-forgelv {
  left: 44.074%;
  top: 78.646%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 4.375%;
}
.game-help-screen-gems-1 .game-guide-line-rates {
  left: 20.185%;
  top: 90.885%;
  width: 5.556%;
  height: 5px;
  height: max(2px, 0.741cqw);
}

/* v26 Help screen: gems-2 */
.game-help-screen-gems-2 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-help-screen-gems-2 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-gems-2 .game-guide-frame-tab,
.game-help-screen-gems-2 .game-guide-window-tab {
  left: 1.667%;
  top: 45%;
  width: 33.241%;
  height: 4.635%;
}
.game-help-screen-gems-2 .game-guide-window-tab > span {
  width: 300.836%;
  height: 2157.303%;
  left: -5.014%;
  top: -970.787%;
}
.game-help-screen-gems-2 .game-guide-frame-arrow,
.game-help-screen-gems-2 .game-guide-window-arrow {
  left: 79.537%;
  top: 53.750%;
  width: 11.852%;
  height: 7.813%;
}
.game-help-screen-gems-2 .game-guide-window-arrow > span {
  width: 843.750%;
  height: 1280%;
  left: -671.094%;
  top: -688%;
}
.game-help-screen-gems-2 .game-guide-frame-chips,
.game-help-screen-gems-2 .game-guide-window-chips {
  left: 3.889%;
  top: 82.344%;
  width: 17.037%;
  height: 13.438%;
}
.game-help-screen-gems-2 .game-guide-window-chips > span {
  width: 586.957%;
  height: 744.186%;
  left: -22.826%;
  top: -612.791%;
}
.game-help-screen-gems-2 .game-guide-callout-tabs {
  left: 1.667%;
  top: 36.563%;
  width: 54.167%;
}
.game-help-screen-gems-2 .game-guide-callout-rank {
  left: 35.833%;
  top: 46.094%;
  width: 61.389%;
}
.game-help-screen-gems-2 .game-guide-callout-owned1,
.game-help-screen-gems-2 .game-guide-callout-owned2 {
  left: 25.648%;
  width: 24.074%;
}
.game-help-screen-gems-2 .game-guide-callout-fusable {
  left: 25.648%;
  top: 87.552%;
  width: 68.519%;
}
.game-help-screen-gems-2 .game-guide-callout-owned1 { top: 83.073%; }
.game-help-screen-gems-2 .game-guide-callout-owned2 { top: 92.031%; }
.game-help-screen-gems-2 .game-guide-line-tab {
  left: 19.074%;
  top: 42.385%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.615%;
}
.game-help-screen-gems-2 .game-guide-line-arrow {
  left: 84.352%;
  top: 51.917%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.833%;
}
.game-help-screen-gems-2 .game-guide-line-owned1,
.game-help-screen-gems-2 .game-guide-line-fusable,
.game-help-screen-gems-2 .game-guide-line-owned2 {
  left: 20.926%;
  width: 4.722%;
  height: 5px;
  height: max(2px, 0.741cqw);
}
.game-help-screen-gems-2 .game-guide-line-owned1 { top: 84.661%; }
.game-help-screen-gems-2 .game-guide-line-fusable { top: 89.141%; }
.game-help-screen-gems-2 .game-guide-line-owned2 { top: 93.620%; }
.game-help-screen-gems-2 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.729%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* v26 Help screen: gems-3 */
.game-help-screen-gems-3 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-screen-gems-3 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.593cqw;
}
.game-help-screen-gems-3 .game-guide-frame-slots,
.game-help-screen-gems-3 .game-guide-window-slots {
  left: 2.315%;
  top: 33.906%;
  width: 95.741%;
  height: 16.094%;
}
.game-help-screen-gems-3 .game-guide-window-slots > span {
  width: 104.449%;
  height: 621.359%;
  left: -2.418%;
  top: -210.680%;
}
.game-help-screen-gems-3 .game-guide-frame-count,
.game-help-screen-gems-3 .game-guide-window-count {
  left: 77.315%;
  top: 61.875%;
  width: 16.574%;
  height: 3.750%;
}
.game-help-screen-gems-3 .game-guide-window-count > span {
  width: 603.352%;
  height: 2666.667%;
  left: -466.480%;
  top: -1650%;
}
.game-help-screen-gems-3 .game-guide-callout-slots {
  bottom: 69.271%;
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-gems-3 .game-guide-callout-count {
  top: 68.750%;
  left: 35.185%;
  width: 60.185%;
  text-align: right;
}
.game-help-screen-gems-3 .game-guide-line-slot-1,
.game-help-screen-gems-3 .game-guide-line-slot-2,
.game-help-screen-gems-3 .game-guide-line-slot-3 {
  top: 30.729%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.177%;
}
.game-help-screen-gems-3 .game-guide-line-slot-1 { left: 17.778%; }
.game-help-screen-gems-3 .game-guide-line-slot-2 { left: 49.630%; }
.game-help-screen-gems-3 .game-guide-line-slot-3 { left: 81.481%; }
.game-help-screen-gems-3 .game-guide-line-equipped,
.game-help-screen-gems-3 .game-guide-line-owned {
  top: 65.625%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.125%;
}
.game-help-screen-gems-3 .game-guide-line-equipped { left: 81.481%; }
.game-help-screen-gems-3 .game-guide-line-owned { left: 89.167%; }

/* v26 Help screen: gems-4 */
.game-help-screen-gems-4 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-help-screen-gems-4 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-gems-4 .game-guide-frame-gem,
.game-help-screen-gems-4 .game-guide-window-gem {
  left: 10.278%;
  top: 34.323%;
  width: 15.926%;
  height: 8.854%;
}
.game-help-screen-gems-4 .game-guide-window-gem > span {
  width: 627.907%;
  height: 1129.412%;
  left: -64.535%;
  top: -387.647%;
}
.game-help-screen-gems-4 .game-guide-frame-portrait,
.game-help-screen-gems-4 .game-guide-window-portrait {
  left: 24.074%;
  top: 69.479%;
  width: 16.667%;
  height: 10.313%;
}
.game-help-screen-gems-4 .game-guide-window-portrait > span {
  width: 600%;
  height: 969.697%;
  left: -144.444%;
  top: -673.737%;
}
.game-help-screen-gems-4 .game-guide-callout-shortage {
  left: 10.833%;
  top: 18.281%;
  width: 81.667%;
}
.game-help-screen-gems-4 .game-guide-callout-auto {
  left: 11.019%;
  top: 45.833%;
  width: 67.407%;
}
.game-help-screen-gems-4 .game-guide-callout-tapchar {
  left: 8.426%;
  top: 60.625%;
  width: 83.056%;
}
.game-help-screen-gems-4 .game-guide-callout-switch {
  left: 17.778%;
  top: 83.490%;
  width: 64.537%;
}
.game-help-screen-gems-4 .game-guide-line-gem {
  left: 17.269%;
  top: 43.177%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.656%;
}
.game-help-screen-gems-4 .game-guide-line-portrait {
  left: 32.963%;
  top: 66.443%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.036%;
}
.game-help-screen-gems-4 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.729%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* v26 Help screen: equipment-1 */
.game-help-screen-equipment-1 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-help-screen-equipment-1 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-equipment-1 .game-guide-frame-flip,
.game-help-screen-equipment-1 .game-guide-window-flip {
  left: 75.278%;
  top: 2.083%;
  width: 21.389%;
  height: 4.844%;
}
.game-help-screen-equipment-1 .game-guide-window-flip > span {
  width: 467.532%;
  height: 2064.516%;
  left: -351.948%;
  top: -43.011%;
}
.game-help-screen-equipment-1 .game-guide-frame-count,
.game-help-screen-equipment-1 .game-guide-window-count {
  left: 31.296%;
  top: 43.438%;
  width: 13.704%;
  height: 3.542%;
}
.game-help-screen-equipment-1 .game-guide-window-count > span {
  width: 729.730%;
  height: 2823.529%;
  left: -228.378%;
  top: -1226.471%;
}
.game-help-screen-equipment-1 .game-guide-frame-stat,
.game-help-screen-equipment-1 .game-guide-window-stat {
  left: 26.019%;
  top: 51.667%;
  width: 25.556%;
  height: 2.760%;
}
.game-help-screen-equipment-1 .game-guide-window-stat > span {
  width: 391.304%;
  height: 3622.642%;
  left: -101.812%;
  top: -1871.698%;
}
.game-help-screen-equipment-1 .game-guide-frame-upgrade,
.game-help-screen-equipment-1 .game-guide-window-upgrade {
  left: 76.852%;
  top: 77.604%;
  width: 22.037%;
  height: 8.073%;
}
.game-help-screen-equipment-1 .game-guide-window-upgrade > span {
  width: 453.782%;
  height: 1238.710%;
  left: -348.739%;
  top: -961.290%;
}
.game-help-screen-equipment-1 .game-guide-callout-obtain {
  left: 7.870%;
  top: 10.469%;
  width: 81.019%;
}
.game-help-screen-equipment-1 .game-guide-callout-nodupe {
  left: 7.870%;
  top: 25.313%;
  width: 84.630%;
}
.game-help-screen-equipment-1 .game-guide-callout-more {
  left: 7.870%;
  top: 38.021%;
  width: 79.444%;
}
.game-help-screen-equipment-1 .game-guide-callout-statpair {
  left: 8.148%;
  top: 56.823%;
  width: 81.481%;
}
.game-help-screen-equipment-1 .game-guide-callout-cost {
  left: 20.926%;
  top: 86.927%;
  width: 76.111%;
}
.game-help-screen-equipment-1 .game-guide-line-flip {
  left: 86.898%;
  top: 6.927%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.542%;
}
.game-help-screen-equipment-1 .game-guide-line-count {
  left: 37.778%;
  top: 41.510%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.927%;
}
.game-help-screen-equipment-1 .game-guide-line-stat {
  left: 38.194%;
  top: 54.427%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.396%;
}
.game-help-screen-equipment-1 .game-guide-line-upgrade {
  left: 88.009%;
  top: 85.677%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 1.250%;
}
.game-help-screen-equipment-1 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 94.792%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* v26 Help screen: equipment-2 */
.game-help-screen-equipment-2 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-screen-equipment-2 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.593cqw;
}
.game-help-screen-equipment-2 .game-guide-window-dialog {
  left: 10.463%;
  top: 28.125%;
  width: 79.074%;
  height: 40.885%;
}
.game-help-screen-equipment-2 .game-guide-window-dialog > span {
  width: 126.464%;
  height: 244.586%;
  left: -13.232%;
  top: -68.790%;
}
.game-help-screen-equipment-2 .game-guide-frame-return,
.game-help-screen-equipment-2 .game-guide-window-return {
  left: 63.981%;
  top: 77.865%;
  width: 12.037%;
  height: 3.125%;
}
.game-help-screen-equipment-2 .game-guide-window-return > span {
  width: 830.769%;
  height: 3200%;
  left: -531.538%;
  top: -2491.667%;
}
.game-help-screen-equipment-2 .game-guide-callout-return,
.game-help-screen-equipment-2 .game-guide-callout-item {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-equipment-2 .game-guide-callout-return { top: 14.323%; }
.game-help-screen-equipment-2 .game-guide-callout-item { top: 82.813%; }
.game-help-screen-equipment-2 .game-guide-callout-button {
  bottom: 24.583%;
  left: 21.065%;
  width: 57.870%;
}
.game-help-screen-equipment-2 .game-guide-line-button {
  left: 69.630%;
  top: 75.417%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.448%;
}

/* v26 Help screen: equipment-3 */
.game-help-screen-equipment-3 .game-guide-dim {
  background: rgba(3, 2, 8, 0.72);
}
.game-help-screen-equipment-3 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 3cqw;
}
.game-help-screen-equipment-3 .game-guide-frame-toggle,
.game-help-screen-equipment-3 .game-guide-window-toggle {
  left: 30.787%;
  top: 27.344%;
  width: 52.593%;
  height: 5.729%;
}
.game-help-screen-equipment-3 .game-guide-window-toggle > span {
  width: 190.141%;
  height: 1745.455%;
  left: -58.539%;
  top: -477.273%;
}
.game-help-screen-equipment-3 .game-guide-frame-slot,
.game-help-screen-equipment-3 .game-guide-window-slot {
  left: 4.630%;
  top: 34.271%;
  width: 14.815%;
  height: 8.750%;
}
.game-help-screen-equipment-3 .game-guide-window-slot > span {
  width: 675%;
  height: 1142.857%;
  left: -31.250%;
  top: -391.667%;
}
.game-help-screen-equipment-3 .game-guide-frame-tab,
.game-help-screen-equipment-3 .game-guide-window-tab {
  left: 77.407%;
  top: 45%;
  width: 21.204%;
  height: 4.948%;
}
.game-help-screen-equipment-3 .game-guide-window-tab > span {
  width: 471.616%;
  height: 2021.053%;
  left: -365.066%;
  top: -909.474%;
}
.game-help-screen-equipment-3 .game-guide-frame-equipped,
.game-help-screen-equipment-3 .game-guide-window-equipped {
  left: 61.944%;
  top: 60.833%;
  width: 11.296%;
  height: 8.698%;
}
.game-help-screen-equipment-3 .game-guide-window-equipped > span {
  width: 885.246%;
  height: 1149.701%;
  left: -548.361%;
  top: -699.401%;
}
.game-help-screen-equipment-3 .game-guide-callout-toggle {
  left: 17.685%;
  top: 21.406%;
  width: 75%;
}
.game-help-screen-equipment-3 .game-guide-callout-slot {
  left: 3.241%;
  top: 45.990%;
  width: 73.241%;
}
.game-help-screen-equipment-3 .game-guide-callout-filter {
  left: 41.296%;
  top: 53.021%;
  width: 51.852%;
}
.game-help-screen-equipment-3 .game-guide-callout-onetap {
  left: 3.148%;
  top: 72.240%;
  width: 91.944%;
}
.game-help-screen-equipment-3 .game-guide-callout-noshare {
  left: 3.241%;
  top: 82.292%;
  width: 91.944%;
}
.game-help-screen-equipment-3 .game-guide-line-toggle {
  left: 56.713%;
  top: 24.896%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.448%;
}
.game-help-screen-equipment-3 .game-guide-line-slot {
  left: 12.083%;
  top: 43.021%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.969%;
}
.game-help-screen-equipment-3 .game-guide-line-tab {
  left: 81.065%;
  top: 49.948%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 3.073%;
}
.game-help-screen-equipment-3 .game-guide-line-equipped {
  left: 67.454%;
  top: 69.531%;
  width: 5px;
  width: max(2px, 0.741cqw);
  height: 2.708%;
}
.game-help-screen-equipment-3 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.729%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* v26 Help screen: equipment-4 */
.game-help-screen-equipment-4 .game-guide-dim {
  background: rgba(3, 2, 8, 0.74);
}
.game-help-screen-equipment-4 .game-guide-callout {
  min-height: 0;
  padding: 10px 17px;
  padding: 0.926cqw 1.574cqw;
  font-size: 20px;
  font-size: 2.593cqw;
}
.game-help-screen-equipment-4 .game-guide-frame-cost,
.game-help-screen-equipment-4 .game-guide-window-cost {
  left: 20.185%;
  top: 56.875%;
  width: 60.463%;
  height: 4.844%;
}
.game-help-screen-equipment-4 .game-guide-window-cost > span {
  width: 165.391%;
  height: 2064.516%;
  left: -33.384%;
  top: -1174.194%;
}
.game-help-screen-equipment-4 .game-guide-callout-slot,
.game-help-screen-equipment-4 .game-guide-callout-types,
.game-help-screen-equipment-4 .game-guide-callout-order,
.game-help-screen-equipment-4 .game-guide-callout-rarity {
  left: 4.815%;
  width: 90.370%;
}
.game-help-screen-equipment-4 .game-guide-callout-slot { top: 12.760%; }
.game-help-screen-equipment-4 .game-guide-callout-types { top: 21.875%; }
.game-help-screen-equipment-4 .game-guide-callout-order { top: 64.844%; }
.game-help-screen-equipment-4 .game-guide-callout-rarity { top: 77.604%; }


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

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

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

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

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

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

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

/* --- "tap to close" footer ---------------------------------------- */
.game-guide-screen-food-production-1 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.729%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}


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

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

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

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

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

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

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

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

/* --- "tap to close" footer ---------------------------------------- */
.game-guide-screen-food-production-3 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.729%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}


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

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

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

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

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

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

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

/* --- "tap to close" footer ---------------------------------------- */
.game-guide-screen-food-production-5 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 94.479%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}


/* ===================================================================
   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%;
}


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

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

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

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

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

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

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

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

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

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

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

/* --- "tap to close" footer ---------------------------------------- */
.game-guide-screen-food-production-7 .game-guide-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 95.417%;
  text-align: center;
  color: #8a8480;
  font-weight: 700;
  font-size: 19px;
  font-size: 2.7cqw;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}