/* Avakode Hub — scene «forge-suite» (assets/js/scenes/forge-suite.js): the forge on the left, the plate of twelve tools on the
   right (lane 1.3). Loaded by inc/scenes.php on the family page whose stage is this scene. Classes: .fs-* only; the common
   parts (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are scene.css.
   The file shows the FINAL frame (end of beat 3): the ingot dim, every sign in colour with its caption, the pool framed,
   the stamp down.
   The timeline hides what has not happened yet. The art is drawn in percentages of one box (.fs-art) so that the
   positions the scene measures (the point of the blow, the places of the tiles) follow the width. */

/* the height of the stage before the module arrives = the height it takes (e2e: ≤ 4px apart at 1440, 768, 390) */
.hub-scene[data-scene="forge-suite"] { --stage-h: 546px; --stage-h-narrow: 752px; }
/* the narrow stage grows with the window until the tiles reach their 114px cap (≈ 560px); the middle step is the window
   721–794px, where the stage is already one column but the rail is still on the left (measured with the scene playing: the caption row is 49px below ≈ 480px, 45px above) */
@media (min-width: 441px) and (max-width: 559px) { .hub-scene[data-scene="forge-suite"] { --stage-h-narrow: 817px; } }
@media (min-width: 560px) and (max-width: 720px) { .hub-scene[data-scene="forge-suite"] { --stage-h-narrow: 888px; } }
@media (min-width: 721px) and (max-width: 794px) { .hub-scene[data-scene="forge-suite"] { --stage-h: 848px; } }

.fs-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 24px; align-items: center; min-height: 460px; }

/* ---- the forge: anvil, ingot, hammer, the pips of the twelve blows ---- */
.fs-forge { min-width: 0; }
.fs-art { position: relative; width: min(100%, 300px); aspect-ratio: 300 / 260; margin: 0 auto; }
.fs-art img { display: block; max-width: none; }
.fs-anvil { position: absolute; left: 6.667%; bottom: 0; width: 66.667%; height: auto; }
.fs-ingot { position: absolute; left: 11.667%; top: 29.2%; width: 40%; aspect-ratio: 3 / 1; opacity: .3; transform-origin: 50% 100%; }
.fs-ingot img { width: 100%; height: 100%; }
.fs-glow { position: absolute; inset: 0; border-radius: 10%; opacity: 0; background: linear-gradient(180deg, var(--signal-hot), var(--signal)); pointer-events: none; }
.fs-hit { position: absolute; left: 45%; top: 27.7%; width: 0; height: 0; pointer-events: none; }
.fs-spark {
  position: absolute; left: calc(45% - 9px); top: calc(27.7% - 9px); width: 18px; height: 18px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0, var(--signal-hot) 38%, transparent 72%);
}
.fs-hammer { position: absolute; left: 56.27%; top: 6.08%; width: 20.8%; height: auto; transform-origin: 50% 97.4%; transform: rotate(28deg); }
.fs-blows {
  display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.fs-pips { display: inline-flex; gap: 5px; }
.fs-pip { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--signal); }

/* ---- the plate: two groups of tiles; the eight of the pool are framed, the four others are not ---- */
.fs-plate { position: relative; min-width: 0; padding: 14px 16px 16px; }
/* the pool (4 columns) and the others (2 columns) get tiles of the same size: the first column is (width − 92px) × 2/3 + 46px,
   where 92 = the gaps of the tiles (3 × 8 + 8) + the padding and border of both groups (4 × 11) + the gap of the groups (16) */
.fs-groups { display: grid; grid-template-columns: calc((100% - 92px) * 2 / 3 + 46px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fs-group { position: relative; min-width: 0; padding: 10px 10px 10px; border: 1px solid var(--line); border-radius: 6px; }
.fs-frame { position: absolute; inset: -1px; border: 1px solid var(--signal); border-radius: 6px; pointer-events: none; }
.fs-legend { display: block; margin: 2px 2px 10px; font-size: 10px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.fs-pool .fs-legend { color: var(--signal-hot); }
.fs-tiles { display: grid; gap: 8px; }
.fs-pool .fs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-rest .fs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a tile is a square: the sign takes what is left above the caption (it fits by its height, so a small tile never pushes
   the caption out), the caption is one line under it, the bar of the colour is the bottom edge */
.fs-tool {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 3px; justify-items: center; aspect-ratio: 1;
  padding: 9% 0 5px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.fs-sign { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* the caption: the smallest text size of the scene (as the legend); the mono face of the scene takes 6px a letter, «Inclusive» is 9 letters
   and the tile of a 360px window is 56px wide, so the letters are drawn 4% closer (50px, 2px to spare on each side); --fg-2 on the tile (--bg): 8.4:1 (8.1:1 on the card); the final frame has it, the timeline brings it in beat 3 */
.fs-name { display: block; max-width: 100%; font-size: 10px; line-height: 12px; letter-spacing: -.04em; text-align: center; white-space: nowrap; color: var(--fg-2); }
.fs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tool); transform-origin: 0 50%; }

/* the fragments that fly from the anvil to the places: invisible in the final frame */
.fs-chip { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--tool); opacity: 0; pointer-events: none; }

/* the plate is wide enough for two groups side by side from 900px of the stage; below, one above the other (the four
   outside the pool in a row) */
@container (max-width: 900px) {
  .fs-groups { grid-template-columns: minmax(0, 1fr); }
  .fs-rest .fs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-tiles { max-width: 408px; margin: 0 auto; } /* tiles of ≤ 96px: the plate stays within the 500px of the stage */
}

/* a narrow stage (by its own width, not the window's): the forge above the plate */
@container (max-width: 760px) {
  .fs-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; }
  .fs-art { width: min(100%, 240px); }
  .fs-tiles { max-width: 480px; } /* tiles of ≤ 114px: the height of the stage does not follow the window */
  .fs-plate { padding: 12px; }
}