/* ========================================
   場面3 自分の土地は、自分で守るしかない（57.0秒・15の字幕）
   ----------------------------------------
     cue-0  将軍は、まだいました              → 右上に薄い将軍（最後まで消さない）
     cue-2  上の人から土地をまかされ           → 「この土地をまかせる／将軍から」の札
     cue-3  自分の力でおさめるようになります    → 札が消え、城が持ち上がる
     cue-5  下剋上                           → 上と下が入れかわる
     cue-7  自分の土地の中だけの決まり         → 巻物が開き、3行が書かれる
     cue-10 作ったのは一部の大名だけ           → 地図の4枚にだけ巻物が立つ
     cue-11 守らせる人は、もういません         → 大きな巻物を描ききってから、中身が空のまま灰色へ
     cue-13 一つめは…／cue-14 二つめは…      → 下に2行残す
   🚨 将軍を消さない／巻物は4枚だけ／大きな巻物は途中で線を消さず、描ききってから灰色にする
   ======================================== */

.scene-03 {
  padding: 30px 56px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
}

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

/* 🚨 力を失った将軍。薄いまま、場面のあいだじゅう残す */
.scene-03 .boss-ghost {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: fade 0.6s ease var(--cue-0) both;
}
.scene-03 .boss-ghost svg {
  width: 82px;
  height: 82px;
}
.scene-03 .boss-ghost .core {
  fill: var(--hideyoshi);
  opacity: 0.4;
}
.scene-03 .boss-ghost .core-text {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 900;
  opacity: 0.75;
}
.scene-03 .boss-ghost span {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
}

/* ── 中央：4つの段を同じ場所で入れかえる ───────────── */

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

/* ① 取り出した1枚 */
.scene-03 .s-land {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  animation:
    pop 0.7s var(--ease-pop) var(--cue-0) both,
    fade-out 0.6s ease var(--cue-5) forwards;
}
.scene-03 .land-map {
  width: 470px;
  height: 330px;
}
.scene-03 .land {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.scene-03 .lm-castle {
  color: var(--ieyasu);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: lift-up 1s var(--ease-out) var(--cue-3) both;
}
@keyframes lift-up {
  from { translate: 0 0; scale: 1; }
  to { translate: 0 -14px; scale: 1.08; }
}
.scene-03 .s-land use[href="#house"] { color: var(--hideyoshi); }
.scene-03 .pe { color: var(--peace); }
.scene-03 .ri {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rice-sway 4s ease-in-out var(--d, 0s) infinite;
}
@keyframes rice-sway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}

/* 役目の札。🚨「将軍から」を必ず入れる（だれがあずけた役目か、絵から分かるように） */
.scene-03 .fuda {
  padding: 16px 22px;
  display: grid;
  justify-items: center;
  gap: 6px;
  background: var(--paper);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  border: 3px solid var(--ink);
  border-radius: 12px;
  animation:
    pop 0.6s var(--ease-pop) var(--cue-2) both,
    fade-out 0.7s ease var(--cue-3) forwards;
}
.scene-03 .fuda em {
  padding: 3px 12px;
  background: var(--hideyoshi-soft);
  color: var(--ink-soft);
  font-size: 17px;
  font-style: normal;
  border-radius: 999px;
}
.scene-03 .own {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 16px 24px;
  background: var(--ieyasu-soft);
  color: var(--ieyasu);
  font-size: 30px;
  font-weight: 700;
  border: 3px solid var(--ieyasu);
  border-radius: 12px;
  animation: rise 0.6s var(--ease-pop) calc(var(--cue-3) + 0.5s) both;
}

/* ② 下剋上 */
.scene-03 .s-geko {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  animation:
    fade 0.6s ease var(--cue-5) both,
    fade-out 0.6s ease var(--cue-7) forwards;
}
.scene-03 .swap {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.scene-03 .who {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 18px;
  font-weight: 700;
}
.scene-03 .who svg {
  width: 96px;
  height: 111px;
}
.scene-03 .who.up {
  color: var(--nobunaga);
  animation: go-down 1.3s var(--ease-out) calc(var(--cue-5) + 0.6s) both;
}
.scene-03 .who.down {
  color: var(--ieyasu);
  animation: go-up 1.3s var(--ease-out) calc(var(--cue-5) + 0.6s) both;
}
@keyframes go-down {
  from { translate: 0 0; scale: 1; }
  to { translate: 0 146px; scale: 0.78; }
}
@keyframes go-up {
  from { translate: 0 0; scale: 0.78; }
  to { translate: 0 -146px; scale: 1; }
}
.scene-03 .word {
  font-family: var(--font-mincho);
  font-size: 66px;
  font-weight: 900;
  line-height: 1.2em;
  animation: rise 0.6s var(--ease-out) var(--cue-5) both;
}
.scene-03 .word small {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
}
.scene-03 .mean {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 12px;
  font-size: 28px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) calc(var(--cue-5) + 0.3s) both;
}

/* ③ うちの土地だけの決まり */
.scene-03 .s-rule {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  animation:
    fade 0.6s ease var(--cue-7) both,
    fade-out 0.6s ease var(--cue-10) forwards;
}
.scene-03 .scroll {
  grid-area: 1 / 1;
  width: 540px;
  height: 328px;
  color: var(--ink);
  transform-origin: center;
  animation: open-scroll 0.9s var(--ease-out) var(--cue-7) both;
}
@keyframes open-scroll {
  from { opacity: 0; scale: 0.3 1; }
  to { opacity: 1; scale: 1 1; }
}
.scene-03 .lines {
  grid-area: 1 / 1;
  justify-self: center;
  padding-left: 18px;
  display: grid;
  gap: 12px;
  width: 320px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4em;
}
.scene-03 .lines li {
  animation: write 0.7s ease both;
}
.scene-03 .lines li:nth-child(1) { animation-delay: calc(var(--cue-7) + 0.7s); }
.scene-03 .lines li:nth-child(2) { animation-delay: var(--cue-8); }
.scene-03 .lines li:nth-child(3) { animation-delay: var(--cue-9); }
@keyframes write {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.scene-03 .only {
  grid-column: 2;
  justify-self: center;
  padding: 18px 22px;
  background: var(--paper);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  border: 3px dashed var(--ink-soft);
  border-radius: 12px;
  animation: rise 0.6s var(--ease-out) calc(var(--cue-9) + 0.9s) both;
}

/* ④ 日本ぜんたいの決まりは、守らせる人がいない */
.scene-03 .s-empty {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  animation: fade 0.7s ease var(--cue-10) both;
}
.scene-03 .wide {
  width: 330px;
  height: 340px;
}
.scene-03 .s-empty .jp {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
/* 🚨 巻物が立つのは4枚だけ（この手の決まりを作ったのは一部の大名） */
.scene-03 .four use {
  color: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pop 0.5s var(--ease-pop) both;
}
.scene-03 .four use:nth-child(1) { animation-delay: calc(var(--cue-10) + 0.2s); }
.scene-03 .four use:nth-child(2) { animation-delay: calc(var(--cue-10) + 0.35s); }
.scene-03 .four use:nth-child(3) { animation-delay: calc(var(--cue-10) + 0.5s); }
.scene-03 .four use:nth-child(4) { animation-delay: calc(var(--cue-10) + 0.65s); }

.scene-03 .big-rule {
  display: grid;
  justify-items: center;
  gap: 8px;
  /* 🚨 線を描ききってから、中身が空のまま灰色へ落とす（途中で消さない） */
  animation: gray-out 1.6s ease calc(var(--cue-11) + 2.4s) forwards;
}
@keyframes gray-out {
  from { filter: none; opacity: 1; }
  to { filter: grayscale(1); opacity: 0.4; }
}
.scene-03 .big-label {
  font-size: 26px;
  font-weight: 700;
  animation: fade 0.5s ease var(--cue-11) both;
}
.scene-03 .big-scroll {
  width: 340px;
  height: 200px;
}
.scene-03 .big-scroll .edge {
  stroke-width: 5;
  stroke-dashoffset: 1;
  animation: draw 2.2s ease calc(var(--cue-11) + 0.2s) forwards;
}
.scene-03 .no-one {
  padding: 8px 18px;
  background: var(--war);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-radius: 999px;
  animation: rise 0.6s var(--ease-out) calc(var(--cue-11) + 2.6s) both;
}

/* ── 下：戦いが止まらない2つの理由 ───────────────── */

.scene-03 .sums {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.scene-03 .sum {
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 36px auto;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  font-size: 23px;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 10px;
}
.scene-03 .sum .no {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 800;
  border-radius: 50%;
}
.scene-03 .sum-1 { animation: rise 0.6s var(--ease-pop) var(--cue-13) both; }
.scene-03 .sum-2 { animation: rise 0.6s var(--ease-pop) var(--cue-14) both; }