/* ========================================
   場面12 そして、いまの町へ（75.6秒・19の字幕）
   ----------------------------------------
     cue-0  工事は、戦国のうちから始まっていました → 田んぼは最初から小さく置いてある（ゼロから生やさない）
     cue-1  戦がなくなると、いっきに広がります     → 横へ2倍に広がる
     cue-3  1200万人くらいから、3000万人をこえた  → ドットの列が 12 → 31（7章と同じ見せ方）
     cue-5  山の上から、平らな土地へおりてきていた → 城が山から下りる（平和になる前の出来事）
     cue-6  武士の家、お店、職人の仕事場が集まる   → まわりに町
     cue-7  これが、城下町です                   → 絵のあとに名前を出す
     cue-9  いま県庁がある町の多くは…            → 家がそのまま今のビルへ（位置を1pxも動かさない）
     cue-11 戦国は、どうして終わったのか          → 最後の問い
     cue-14 強い力と、仕組み。その両方            → 答え
     cue-17 きみの町は、どうだろう               → 第1場面の伏線を回収
   🚨 締めに三人を並べて線を引かない（声で否定した「強い人がぜんぶやっつけた」を絵で復活させない）
   🚨 「きみの町も、その線の上にある」と断定しない（城下町でない町に住む子がいる）
   ======================================== */

.scene-12 {
  padding: 14px 44px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 28px;
}

.scene-12 .head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.scene-12 .kicker { animation: rise 0.5s var(--ease-out) var(--cue-0) both; }
.scene-12 .title {
  font-size: 36px;
  animation: slide-right 0.6s var(--ease-out) var(--cue-0) both;
}

/* ── 田んぼと人の数 ───────────────────── */

.scene-12 .grow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}
.scene-12 .cap {
  font-size: 20px;
  font-weight: 700;
}
.scene-12 .cap em {
  color: var(--peace);
  font-style: normal;
  font-size: 25px;
}
.scene-12 .cap small {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.scene-12 .paddy svg {
  width: 330px;
  height: 92px;
}
.scene-12 .paddy rect {
  fill: var(--peace);
  opacity: 0.85;
}
/* 🚨 ゼロから生やさない。小さいものが最初からあって、横へ広がる */
.scene-12 .paddy .old { animation: fade 0.6s ease var(--cue-0) both; }
.scene-12 .paddy .new {
  transform-box: fill-box;
  transform-origin: left center;
  animation: spread 2.2s var(--ease-out) var(--cue-1) both;
}
@keyframes spread {
  from { opacity: 0; scale: 0 1; }
  to { opacity: 0.85; scale: 1 1; }
}

.scene-12 .people {
  display: grid;
  gap: 4px;
}
.scene-12 .cols {
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  align-items: end;
  gap: 3px;
  height: 68px;
}
.scene-12 .col {
  height: 100%;
  background: var(--ieyasu);
  border-radius: 3px 3px 0 0;
}
.scene-12 .col.old { animation: fade 0.5s ease var(--cue-3) both; }
.scene-12 .col.new {
  transform-origin: bottom;
  animation: rise-col 0.5s var(--ease-out) both;
}
.scene-12 .col.new:nth-child(13) { animation-delay: calc(var(--cue-3) + 0.6s); }
.scene-12 .col.new:nth-child(14) { animation-delay: calc(var(--cue-3) + 0.65s); }
.scene-12 .col.new:nth-child(15) { animation-delay: calc(var(--cue-3) + 0.70s); }
.scene-12 .col.new:nth-child(16) { animation-delay: calc(var(--cue-3) + 0.75s); }
.scene-12 .col.new:nth-child(17) { animation-delay: calc(var(--cue-3) + 0.80s); }
.scene-12 .col.new:nth-child(18) { animation-delay: calc(var(--cue-3) + 0.85s); }
.scene-12 .col.new:nth-child(19) { animation-delay: calc(var(--cue-3) + 0.90s); }
.scene-12 .col.new:nth-child(20) { animation-delay: calc(var(--cue-3) + 0.95s); }
.scene-12 .col.new:nth-child(21) { animation-delay: calc(var(--cue-3) + 1.00s); }
.scene-12 .col.new:nth-child(22) { animation-delay: calc(var(--cue-3) + 1.05s); }
.scene-12 .col.new:nth-child(23) { animation-delay: calc(var(--cue-3) + 1.10s); }
.scene-12 .col.new:nth-child(24) { animation-delay: calc(var(--cue-3) + 1.15s); }
.scene-12 .col.new:nth-child(25) { animation-delay: calc(var(--cue-3) + 1.20s); }
.scene-12 .col.new:nth-child(26) { animation-delay: calc(var(--cue-3) + 1.25s); }
.scene-12 .col.new:nth-child(27) { animation-delay: calc(var(--cue-3) + 1.30s); }
.scene-12 .col.new:nth-child(28) { animation-delay: calc(var(--cue-3) + 1.35s); }
.scene-12 .col.new:nth-child(29) { animation-delay: calc(var(--cue-3) + 1.40s); }
.scene-12 .col.new:nth-child(30) { animation-delay: calc(var(--cue-3) + 1.45s); }
.scene-12 .col.new:nth-child(31) { animation-delay: calc(var(--cue-3) + 1.50s); }
@keyframes rise-col {
  from { opacity: 0; scale: 1 0.1; }
  to { opacity: 1; scale: 1 1; }
}

/* ── 城下町 → いまの町 ───────────────── */

.scene-12 .town {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 2px;
}
.scene-12 .town-svg {
  width: 100%;
  max-width: 1060px;
  height: 220px;
}
.scene-12 .mt { opacity: 0; animation: fade 0.6s ease var(--cue-5) both; }
/* 🚨 城は、山の上から平地へ下りてくる（平和になってから町ができたように描かない） */
.scene-12 .moving-castle {
  color: var(--ieyasu);
  animation: come-down 2.6s var(--ease-out) calc(var(--cue-5) + 0.6s) both;
}
@keyframes come-down {
  from { translate: 0 0; }
  to { translate: 386px 106px; }
}
.scene-12 .road {
  fill: none;
  stroke: var(--line);
  stroke-width: 9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s ease var(--cue-6) forwards;
}
.scene-12 .ht {
  color: var(--hideyoshi);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation:
    pop 0.5s var(--ease-pop) both,
    /* 🚨 位置を1pxも動かさずに、いまのビルへ入れかわる */
    fade-out 1.6s ease var(--cue-9) forwards;
}
.scene-12 .h1 { animation-delay: calc(var(--cue-6) + 0.2s), var(--cue-9); }
.scene-12 .h2 { animation-delay: calc(var(--cue-6) + 0.4s), var(--cue-9); }
.scene-12 .h3 { animation-delay: calc(var(--cue-6) + 0.6s), var(--cue-9); }
.scene-12 .h4 { animation-delay: calc(var(--cue-6) + 0.8s), var(--cue-9); }
.scene-12 .h5 { animation-delay: calc(var(--cue-6) + 1s), var(--cue-9); }
.scene-12 .bd {
  opacity: 0;
  animation: fade 1.6s ease var(--cue-9) both;
}
.scene-12 .jokamachi {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 32px;
  font-weight: 900;
  opacity: 0;
  animation: fade 0.6s ease var(--cue-7) both;
}
.scene-12 .now {
  font-size: 21px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-9) both;
}

/* ── 最後の問いと答え ───────────────────── */

.scene-12 .answer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
}
.scene-12 .q {
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 900;
  animation: rise 0.5s var(--ease-out) var(--cue-11) both;
}
.scene-12 .nots {
  display: grid;
  gap: 2px;
  font-size: 18px;
  font-weight: 700;
}
.scene-12 .not em {
  color: var(--war);
  font-style: normal;
}
.scene-12 .n1 { animation: fade 0.5s ease var(--cue-12) both; }
.scene-12 .n2 { animation: fade 0.5s ease var(--cue-13) both; }
.scene-12 .both {
  padding: 10px 22px;
  display: grid;
  justify-items: center;
  gap: 2px;
  background: var(--ieyasu-soft);
  font-size: 19px;
  font-weight: 700;
  border: 3px solid var(--ieyasu);
  border-radius: 12px;
  animation: rise 0.6s var(--ease-pop) var(--cue-14) both;
}
.scene-12 .both span {
  padding: 1px 10px;
  background: #fff;
  border-radius: 999px;
}
.scene-12 .both em {
  color: var(--ieyasu);
  font-size: 23px;
  font-style: normal;
  animation: fade 0.5s ease var(--cue-15) both;
}

.scene-12 .final {
  grid-column: 1 / -1;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 2px;
  font-family: var(--font-mincho);
  font-size: 35px;
  font-weight: 900;
  animation: rise 0.8s var(--ease-pop) var(--cue-17) both;
}
.scene-12 .final small {
  color: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-18) both;
}