/* ========================================
   場面11 二度ともどらないための、決まり（53.4秒・13の字幕）
   ----------------------------------------
     cue-0  大坂城はせめ落とされ、豊臣の一族はほろびました → 地図のカケラが元の位置へ戻り始める
     cue-1  長い戦いの時代が、やっと終わります            → 1枚につながる（第1場面の逆再生）＋旗が1色に
     cue-3  大名が持ってよい城は、一つだけ                → 城が5つ→1つ
     cue-5  城を直すときも、縁組みするときも…             → 巻物に2行
     cue-7  大名を三つのなかまに分けました                 → 3色の点（名前は出さない）
     cue-9  キリスト教は、この戦いより前から禁止されていて  → 巻物の外に、時間を少し戻す印つきで
     cue-10 戦いは、止まりました。／cue-11 そのかわり…    → 下に2行
   🚨 「一つの国に一つ」と書かない（子どもは『国＝日本』と読む）
   🚨 4段ピラミッド（士農工商）は描かない／こわがらせる演出はしない
   🚨 ことばで結論を言わず、地図が1枚に戻る「画面の状態」を答えにする
   ======================================== */

.scene-11 {
  padding: 18px 46px 14px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 32px;
}

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

/* ── 左：1枚に戻る地図 ───────────────────── */

.scene-11 .map-side {
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.scene-11 .jmap {
  width: 300px;
  height: 292px;
}
.scene-11 .jp {
  fill: var(--paper-deep);
  stroke: #fff;
  stroke-width: 3;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  /* 第1場面で外へ開いた位置から、元へ戻る。線の色も白 → 墨へ */
  animation: come-back 3.4s var(--ease-out) var(--cue-0) both;
}
.scene-11 .jp-kyushu { --ax: -5px; --ay: 4px; }
.scene-11 .jp-shikoku { --ax: -2px; --ay: 5px; }
.scene-11 .jp-chugoku-w { --ax: -5px; --ay: -1px; }
.scene-11 .jp-chugoku-e { --ax: -3px; --ay: -2px; }
.scene-11 .jp-kinki { --ax: 0px; --ay: 3px; }
.scene-11 .jp-tokai { --ax: 2px; --ay: -2px; }
.scene-11 .jp-chubu { --ax: 3px; --ay: -3px; }
.scene-11 .jp-kanto { --ax: 5px; --ay: 0px; }
.scene-11 .jp-tohoku-s { --ax: 4px; --ay: -4px; }
.scene-11 .jp-tohoku-n { --ax: 3px; --ay: -6px; }
@keyframes come-back {
  from { translate: var(--ax, 0) var(--ay, 0); stroke: #fff; }
  to { translate: 0 0; stroke: var(--ink); }
}

/* 城は減る。旗（大名）は減らさない ＝ 層の差で見せる */
.scene-11 .cs {
  color: var(--ieyasu);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: fade-out 0.8s ease both;
}
.scene-11 .c1 { animation-delay: calc(var(--cue-4) + 0.2s); }
.scene-11 .c2 { animation-delay: calc(var(--cue-4) + 0.5s); }
.scene-11 .c3 { animation-delay: calc(var(--cue-4) + 0.8s); }
.scene-11 .c4 { animation-delay: calc(var(--cue-4) + 1.1s); }
.scene-11 .cs.keep {
  animation: pop 0.6s var(--ease-pop) var(--cue-3) both;
}
/* 線が消えきる瞬間に、第1場面で色ちがいだった旗を1色へ寄せる */
.scene-11 .fg {
  color: var(--nobunaga);
  animation: to-one-color 1.6s ease calc(var(--cue-1) + 0.6s) both;
}
@keyframes to-one-color {
  from { color: #7b4f9d; }
  to { color: var(--ieyasu); }
}
.scene-11 .gp {
  opacity: 0;
  animation: pop 0.5s var(--ease-pop) both, shuffle 6s ease-in-out calc(var(--cue-7) + 1s) infinite;
}
.scene-11 .gp.a { fill: var(--nobunaga); animation-delay: var(--cue-7), calc(var(--cue-7) + 1s); }
.scene-11 .gp.b { fill: var(--peace); animation-delay: calc(var(--cue-7) + 0.3s), calc(var(--cue-7) + 1.4s); }
.scene-11 .gp.c { fill: var(--hideyoshi); animation-delay: calc(var(--cue-7) + 0.6s), calc(var(--cue-7) + 1.8s); }
/* 長い年月をかけて置き場所を入れかえた、を小さな動きで */
@keyframes shuffle {
  0%, 100% { translate: 0 0; }
  33% { translate: 14px -10px; }
  66% { translate: -10px 8px; }
}
.scene-11 .one-castle {
  font-size: 25px;
  font-weight: 700;
  animation: rise 0.5s var(--ease-out) var(--cue-3) both;
}

/* ── 右：幕府の決まり ───────────────────── */

.scene-11 .rule-side {
  grid-row: 2;
  display: grid;
  gap: 12px;
}
.scene-11 .scroll-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
}
.scene-11 .scroll-wrap > * { grid-area: 1 / 1; }
.scene-11 .scroll {
  width: 470px;
  height: 234px;
  color: var(--ink);
  transform-origin: center;
  animation: open-scroll 0.9s var(--ease-out) var(--cue-2) both;
}
@keyframes open-scroll {
  from { opacity: 0; scale: 0.3 1; }
  to { opacity: 1; scale: 1 1; }
}
.scene-11 .lines {
  display: grid;
  gap: 14px;
  width: 330px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5em;
}
.scene-11 .lines li { animation: write 0.8s ease both; }
.scene-11 .lines li:nth-child(1) { animation-delay: var(--cue-3); }
.scene-11 .lines li:nth-child(2) { animation-delay: var(--cue-5); }
@keyframes write {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.scene-11 .kinkyo {
  padding: 8px 14px;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5em;
  border-left: 4px solid var(--line);
  animation: fade 0.6s ease var(--cue-9) both;
}
.scene-11 .kinkyo .back {
  margin-right: 8px;
  padding: 2px 10px;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 15px;
  border-radius: 999px;
}
.scene-11 .three-g {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6em;
  animation: fade 0.6s ease var(--cue-7) both;
}
.scene-11 .three-g em {
  padding: 2px 10px;
  background: var(--paper-deep);
  font-style: normal;
  border-radius: 999px;
}

/* ── 下：止まった／そのかわり ───────────── */

.scene-11 .sums {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  font-weight: 700;
}
.scene-11 .s1 {
  padding: 8px 20px;
  background: var(--peace);
  color: #fff;
  font-size: 23px;
  border-radius: 999px;
  animation: rise 0.6s var(--ease-pop) var(--cue-10) both;
}
.scene-11 .s2 {
  font-size: 21px;
  animation: rise 0.6s var(--ease-out) var(--cue-11) both;
}