/* ========================================
   場面10 それでも、すぐには終わらなかった（67.5秒・17の字幕）
   ----------------------------------------
     cue-2  秀吉は二度、朝鮮へ軍を送ります    → 船が出る
     cue-4  朝鮮の人たちに大きな被害を出し     → 半島の側の点と、日本の大名の点、両方の色が落ちる
     cue-6  つぎの大きな戦いの種になります     → 注記
     cue-7  関ヶ原で、たった一日でぶつかった   → 東西の旗
     cue-8  勝ったのは、徳川家康の東軍        → 西軍の色が抜ける
     cue-9  このあと260年間                  → 時間の帯
     cue-10 1603年、征夷大将軍                → 家康と菊の印
     cue-13 ここで終わり、ではありません       → 1615 が点滅し続ける
   🚨 戦闘・上陸・武器は描かない／相手の国の被害を絵から消さない
   🚨 帯は 1600 を起点に、1603→1615 を 1600→1603 の4倍の長さで描く（「15年」と書かない）
   ======================================== */

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

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

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

/* ── ① 朝鮮へ ───────────────────────────── */

.scene-10 .s-korea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 24px;
  animation:
    fade 0.6s ease var(--cue-2) both,
    fade-out 0.6s ease var(--cue-7) forwards;
}
.scene-10 .kmap {
  width: 100%;
  height: 340px;
  color: var(--ink);
}
.scene-10 .tag {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 800;
}
.scene-10 .seaway {
  fill: none;
  stroke: #9cc3dd;
  stroke-width: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.4s ease var(--cue-2) forwards;
}
/* 出ていって、色を落として戻る（2隻 → 1隻） */
.scene-10 .sh { color: var(--ink); }
.scene-10 .s-go1 { animation: go-come 9s var(--ease-out) var(--cue-2) both; }
.scene-10 .s-go2 { animation: go-come-lost 9s var(--ease-out) calc(var(--cue-2) + 0.4s) both; }
@keyframes go-come {
  0% { translate: 340px 0; opacity: 1; }
  40% { translate: 0 0; opacity: 1; }
  60% { translate: 0 0; }
  100% { translate: 330px 0; opacity: 0.45; filter: grayscale(1); }
}
@keyframes go-come-lost {
  0% { translate: 260px 0; opacity: 1; }
  40% { translate: 0 0; opacity: 1; }
  70% { translate: 0 0; opacity: 0.5; }
  100% { translate: 40px 0; opacity: 0; }
}
.scene-10 .kp {
  fill: var(--peace);
  animation: lose-color 1.4s ease var(--cue-4) forwards;
}
.scene-10 .jl {
  fill: var(--hideyoshi);
  animation: lose-color 1.4s ease calc(var(--cue-4) + 1.2s) forwards;
}
.scene-10 .jl:nth-child(2) { animation-delay: calc(var(--cue-4) + 1.5s); }
.scene-10 .jl:nth-child(3) { animation-delay: calc(var(--cue-4) + 1.8s); }
.scene-10 .jl:nth-child(4) { animation-delay: calc(var(--cue-4) + 2.1s); }
.scene-10 .jl:nth-child(5) { animation-delay: calc(var(--cue-4) + 2.4s); }
@keyframes lose-color {
  from { fill: currentColor; opacity: 1; }
  to { fill: #9e958a; opacity: 0.5; }
}
.scene-10 .k-notes {
  display: grid;
  gap: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6em;
}
.scene-10 .kn1 {
  justify-self: start;
  padding: 6px 16px;
  background: var(--paper-deep);
  font-family: var(--font-en);
  font-size: 24px;
  border-radius: 999px;
  animation: fade 0.5s ease var(--cue-2) both;
}
.scene-10 .kn2 { animation: fade 0.5s ease var(--cue-4) both; }
.scene-10 .kn3 {
  padding: 12px 18px;
  background: var(--war);
  color: #fff;
  font-size: 24px;
  border-radius: 12px;
  animation: rise 0.6s var(--ease-out) var(--cue-6) both;
}

/* ── ② 関ヶ原 ───────────────────────────── */

.scene-10 .s-seki {
  display: grid;
  justify-items: center;
  gap: 10px;
  animation:
    fade 0.6s ease var(--cue-7) both,
    fade-out 0.6s ease var(--cue-9) forwards;
}
.scene-10 .seki {
  width: 900px;
  height: 300px;
}
.scene-10 .east use { color: var(--ieyasu); }
.scene-10 .west use { color: var(--hideyoshi); }
/* 🚨 勝ち負けは「片方の色が抜ける」だけで表す */
.scene-10 .west { animation: lose 1.6s ease var(--cue-8) forwards; }
@keyframes lose {
  from { opacity: 1; filter: none; }
  to { opacity: 0.3; filter: grayscale(1); }
}
.scene-10 .side {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 900;
}
.scene-10 .place {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 40px;
  font-weight: 900;
  opacity: 0;
  animation: fade 0.5s ease var(--cue-7) both;
}
.scene-10 .one-day {
  fill: var(--war);
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-7) + 1.6s) both;
}
.scene-10 .tiny {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-8) + 1.4s) both;
}
.scene-10 .win {
  font-size: 30px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) var(--cue-8) both;
}
.scene-10 .win em {
  color: var(--ieyasu);
  font-style: normal;
}

/* ── ③ 時間の帯 ───────────────────────── */

.scene-10 .s-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  animation: fade 0.7s ease var(--cue-9) both;
}
.scene-10 .band {
  width: 100%;
  height: 300px;
}
.scene-10 .rail {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.4s ease var(--cue-9) forwards;
}
.scene-10 .mk circle {
  fill: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 0.5s var(--ease-pop) both;
}
.scene-10 .mk text {
  fill: var(--ink);
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.4s ease both;
}
.scene-10 .m-1 circle, .scene-10 .m-1 text { animation-delay: calc(var(--cue-9) + 0.3s); }
.scene-10 .m-2 circle, .scene-10 .m-2 text { animation-delay: var(--cue-10); }
.scene-10 .m-3 circle { animation: pop 0.5s var(--ease-pop) var(--cue-13) both, blink 1.6s ease-in-out calc(var(--cue-13) + 0.5s) infinite; fill: var(--war); }
.scene-10 .m-3 text { animation-delay: var(--cue-13); }
.scene-10 .span {
  fill: none;
  stroke: var(--war);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s ease var(--cue-15) forwards;
}
.scene-10 .span-t {
  fill: var(--war);
  font-family: var(--font-jp);
  font-size: 30px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-15) + 1.2s) both;
}
.scene-10 .under {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  opacity: 0;
  animation: fade 0.5s ease var(--cue-9) both;
}

.scene-10 .ieyasu-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  animation: rise 0.6s var(--ease-out) var(--cue-10) both;
}
.scene-10 .iey {
  width: 130px;
  height: 124px;
  color: var(--ieyasu);
}
.scene-10 .iey .tie {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease calc(var(--cue-10) + 0.6s) forwards;
}
.scene-10 .iey-txt { display: grid; gap: 2px; }
.scene-10 .t1 {
  font-family: var(--font-mincho);
  font-size: 30px;
  font-weight: 900;
}
.scene-10 .t2 {
  font-size: 26px;
  font-weight: 700;
}
.scene-10 .t2 em {
  color: var(--ieyasu);
  font-style: normal;
}
.scene-10 .t2 small {
  margin-left: 6px;
  color: var(--ink-soft);
  font-size: 15px;
}
.scene-10 .t3 {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6em;
  animation: fade 0.5s ease var(--cue-11) both;
}
.scene-10 .not-yet {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 10px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  border-radius: 12px;
  animation: rise 0.6s var(--ease-pop) var(--cue-13) both;
}
.scene-10 .not-yet span {
  display: block;
  color: var(--marker);
  font-size: 20px;
  animation: fade 0.5s ease var(--cue-14) both;
}