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

/* The replacement screenshot shows SIX damage-log lines where the
   first one showed two, and the log fills downward from y823 to
   y1002. The master's 794x67 frame marks the log's first two lines,
   so it is re-centred on those (English lines 1-2 run y823..878,
   centre 850.5 -> frame y817..884) and keeps the master's size. It is
   not stretched over all six lines, because that would run it under
   the "current floor" callout at y952. */
.game-guide-screen-battle .game-guide-frame-log,
.game-guide-screen-battle .game-guide-window-log {
  left: 25.741%;
  top: 42.552%;
  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: -1219.403%;
}

.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: 1.406%;
}
.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%;
}