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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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