/* ========================================
   場面8 けんかを裁く人を、作る（53.9秒・11の字幕）
   ----------------------------------------
     cue-0  信長のあとをついだのが、豊臣秀吉   → 秀吉
     cue-1  朝廷から関白という役目            → 菊の印から秀吉へ線（天皇を絵に必ず置く）
     cue-2  次々と命令を送ります              → 命令の札が1枚ずつ、争う大名のペアへ
     cue-3  勝手に戦ってはいけない            → 引用1
     cue-4  土地のあらそいは、わたしが決める    → 引用2
     cue-5  100年ぶりに、審判を置いた          → 審判
     cue-7  1590年、小田原の北条氏が降参し…    → 地図。四国→九州→関東→東北の順
     cue-8  一晩で建てたのではありません        → 石垣山。骨組み→実線→木が消える
     cue-9  80日ほどかけて建てておいて         → 日数の帯
   🚨 一度の宣言で全国が止まったように描かない（札は1枚ずつ）
   🚨 小田原（関東）で止めない。東北まで塗ってから「ひとつにまとまった」
   ======================================== */

.scene-08 {
  padding: 26px 48px 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

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

.scene-08 .stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.scene-08 .step { grid-area: 1 / 1; }

/* ── ① 審判を置く ───────────────────────── */

.scene-08 .s-judge {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  animation:
    fade 0.5s ease var(--cue-0) both,
    fade-out 0.6s ease var(--cue-7) forwards;
}
.scene-08 .judge {
  width: 100%;
  height: 100%;
  max-height: 400px;
}
.scene-08 .hide use { color: var(--hideyoshi); }
.scene-08 .who {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 30px;
  font-weight: 900;
}
.scene-08 .role {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 700;
}
.scene-08 .tag {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 800;
}
.scene-08 .court {
  opacity: 0;
  animation: fade 0.6s ease var(--cue-1) both;
}
.scene-08 .tie {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.8s ease calc(var(--cue-1) + 0.5s) forwards;
}

.scene-08 .pair use { color: var(--ink-soft); }
.scene-08 .pair {
  opacity: 0;
  animation: fade 0.5s ease var(--cue-2) both;
}
.scene-08 .pr-2 { animation-delay: calc(var(--cue-2) + 0.3s); }
.scene-08 .x {
  fill: none;
  stroke: var(--war);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.scene-08 .pr-1 .x { animation: draw 0.5s ease calc(var(--cue-3) + 0.6s) forwards; }
.scene-08 .pr-2 .x { animation: draw 0.5s ease calc(var(--cue-4) + 0.6s) forwards; }

/* 命令の札は1枚ずつ飛ばす（一度の宣言で全国が止まったように見せない） */
.scene-08 .fuda {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  opacity: 0;
}
.scene-08 .fuda-t {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 800;
  opacity: 0;
}
.scene-08 .f-1, .scene-08 .t-1 { animation: fly 1.5s var(--ease-out) var(--cue-3) both; }
.scene-08 .f-2, .scene-08 .t-2 { animation: fly 1.5s var(--ease-out) var(--cue-4) both; }
@keyframes fly {
  0% { opacity: 0; translate: -70px 0; }
  25% { opacity: 1; translate: 0 0; }
  100% { opacity: 1; translate: 180px 0; }
}

.scene-08 .says {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  font-size: 23px;
  font-weight: 700;
}
.scene-08 .s1 { animation: rise 0.5s var(--ease-out) var(--cue-3) both; }
.scene-08 .s2 { animation: rise 0.5s var(--ease-out) var(--cue-4) both; }
.scene-08 .ref {
  justify-self: end;
  padding: 8px 20px;
  background: var(--hideyoshi-soft);
  font-size: 28px;
  border: 3px solid var(--hideyoshi);
  border-radius: 999px;
  animation: pop 0.6s var(--ease-pop) var(--cue-5) both;
}

/* ── ② 日本がひとつにまとまる ───────────── */

.scene-08 .s-unify {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  animation:
    fade 0.7s ease var(--cue-7) both,
    fade-out 0.6s ease var(--cue-8) forwards;
}
.scene-08 .umap {
  width: 330px;
  height: 340px;
}
.scene-08 .s-unify .jp {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  animation: to-hide 0.6s ease both;
}
/* 塗る順：四国 → 九州 → 関東 → 東北南 → 東北北。すでに秀吉の側だった中央は先に */
.scene-08 .jp-kinki,
.scene-08 .jp-tokai,
.scene-08 .jp-chubu,
.scene-08 .jp-chugoku-e,
.scene-08 .jp-chugoku-w { animation-delay: var(--cue-7); }
.scene-08 .jp-shikoku { animation-delay: calc(var(--cue-7) + 0.5s); }
.scene-08 .jp-kyushu { animation-delay: calc(var(--cue-7) + 1s); }
.scene-08 .jp-kanto { animation-delay: calc(var(--cue-7) + 1.6s); }
.scene-08 .jp-tohoku-s { animation-delay: calc(var(--cue-7) + 2.4s); }
.scene-08 .jp-tohoku-n { animation-delay: calc(var(--cue-7) + 2.9s); }
@keyframes to-hide {
  from { fill: var(--paper-deep); }
  to { fill: var(--hideyoshi-soft); }
}

.scene-08 .unify-side {
  display: grid;
  gap: 12px;
  justify-items: start;
  font-size: 26px;
  font-weight: 700;
}
.scene-08 .year { animation: pop 0.6s var(--ease-pop) var(--cue-7) both; }
.scene-08 .u1 { animation: rise 0.5s var(--ease-out) calc(var(--cue-7) + 0.9s) both; }
.scene-08 .u2 { animation: rise 0.5s var(--ease-out) calc(var(--cue-7) + 2.3s) both; }
.scene-08 .u3 {
  padding: 10px 20px;
  background: var(--hideyoshi-soft);
  font-size: 30px;
  border-radius: 12px;
  animation: rise 0.6s var(--ease-pop) calc(var(--cue-7) + 3.4s) both;
}

/* ── ③ 石垣山（一晩ではない） ───────────── */

.scene-08 .s-castle {
  display: grid;
  grid-template-columns: 700px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 36px;
  animation: fade 0.7s ease var(--cue-8) both;
}
.scene-08 .while {
  grid-column: 1 / -1;
  font-size: 23px;
  font-weight: 700;
  animation: fade 0.5s ease var(--cue-8) both;
}
.scene-08 .while em {
  padding: 2px 12px;
  background: var(--war);
  color: #fff;
  font-style: normal;
  border-radius: 999px;
}
.scene-08 .ishigaki {
  width: 700px;
  height: 340px;
}
.scene-08 .tree {
  fill: #6f8f43;
  animation: fade-out 0.8s ease both;
}
.scene-08 .w1 { animation-delay: calc(var(--cue-9) + 2.4s); }
.scene-08 .w2 { animation-delay: calc(var(--cue-9) + 2.5s); }
.scene-08 .w3 { animation-delay: calc(var(--cue-9) + 2.6s); }
.scene-08 .w4 { animation-delay: calc(var(--cue-9) + 2.7s); }
.scene-08 .w5 { animation-delay: calc(var(--cue-9) + 2.5s); }
.scene-08 .w6 { animation-delay: calc(var(--cue-9) + 2.6s); }
.scene-08 .dash {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 4;
  stroke-dasharray: 10 8;
  opacity: 0;
  animation:
    fade 0.6s ease calc(var(--cue-8) + 0.6s) both,
    fade-out 0.6s ease calc(var(--cue-9) + 2.2s) forwards;
}
.scene-08 .real-castle {
  color: var(--hideyoshi);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pop 0.7s var(--ease-pop) calc(var(--cue-9) + 2.6s) both;
}

.scene-08 .days {
  display: grid;
  gap: 10px;
}
.scene-08 .d-label {
  font-size: 30px;
  font-weight: 700;
  animation: fade 0.5s ease var(--cue-9) both;
}
.scene-08 .d-label em {
  color: var(--hideyoshi);
  font-family: var(--font-en);
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
}
.scene-08 .d-rail {
  height: 18px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.scene-08 .d-rail i {
  height: 100%;
  display: block;
  background: var(--hideyoshi);
  scale: 0 1;
  transform-origin: left;
  animation: draw-x 2.4s var(--ease-out) var(--cue-9) forwards;
}
.scene-08 .d-note {
  font-size: 24px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) calc(var(--cue-9) + 2.8s) both;
}
.scene-08 .d-note span {
  display: block;
  color: var(--ink-soft);
  font-size: 19px;
  animation: fade 0.5s ease var(--cue-10) both;
}