/* ============================================
   舞台と操作まわり（紙もの版・毎回変えない）
   540×960 の基準キャンバスを、置き場所の幅に合わせて丸ごと拡縮する。
   ============================================ */

.shell {
  position: relative;
  overflow: hidden;
  /* 確認しやすいよう、画面の高さに収まる幅で止める（縦型は 幅×16/9 の高さになる） */
  width: min(100%, 372px);
  margin: 0 auto;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 26px 70px rgba(70, 55, 30, .26);
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 540px;
  height: 960px;
  overflow: hidden;
  color: var(--ink);
  background: var(--grain), var(--paper);
  transform-origin: 0 0;
}

/* ── 紙のかざり（全場面で出しっぱなし。場面の中身より後ろ） ──
   右上に日ざし、左下に葉。どちらも枠から少しはみ出させて、
   「切り取った紙の一部」に見せる。 */
.deco {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 太陽は tools/make-deco.mjs が作った1枚の SVG（丸＋まわり全部の光）。
   🚨 **丸ごと置いて、右上へ見切れさせる。** 見えているぶんだけを CSS で組み立てない
   （2026-09-20、丸と棒を1本ずつ手で置いて4回とも外した。角度も間隔も目分量になるため）。
   大きさと食い出し量だけをここで決める。中身は素材を差し替えれば変わる。 */
.deco-sun {
  position: absolute;
  right: -70px;      /* 右へどれだけ見切れさせるか */
  top: -74px;        /* 上へどれだけ見切れさせるか */
  width: 160px;
  height: 160px;
  /* 🚨 素材は <img> で置かない。<img> の中の SVG は別の書類なので currentColor を拾えず、
     置く側から色を変えられない（2026-09-20 に一度やって、何も出なかった）。
     1色の素材は**マスクで抜いて、色は背景で決める**。これなら1枚の素材を何色でも使える。 */
  background: var(--yellow);
  -webkit-mask: url(../assets/deco/sun.svg) center / contain no-repeat;
  mask: url(../assets/deco/sun.svg) center / contain no-repeat;
  opacity: .92;
}

/* 葉も1枚の素材（tools/make-deco.mjs）。こちらは3色あるのでマスクにできない。
   多色の素材は色を焼き込んで <img> で置く。置く側で決めるのは場所と大きさだけ。 */
.deco-leaves {
  position: absolute;
  left: -34px;
  bottom: 84px;
  width: 210px;
  height: 158px;
}

/* ── 上の帯（シリーズの顔・全場面で出る） ── */
.hud-top {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 20px 26px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;

  b {
    padding: 6px 15px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 0 2px 0 rgba(120, 90, 20, .18);
  }

  span {
    padding: 6px 13px;
    border-radius: 999px;
    color: var(--ink);
    background: #e6dfd0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
}

/* ── 場面 ── */
.scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}

.bk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 86px 30px 186px;
}

.motion { will-change: opacity, translate, scale; }

/* ── 見出し（場面の題。珊瑚の下線と黄の印がつく） ── */
.hd {
  position: relative;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.035em;

  &::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 26px;
    bottom: -13px;
    height: 7px;
    border-radius: 999px;
    background: var(--coral);
    rotate: -.5deg;
  }

  i {
    position: absolute;
    right: 0;
    bottom: -20px;
    width: 8px;
    height: 20px;
    border-radius: 999px;
    background: var(--yellow-deep);
    rotate: 24deg;

    &:nth-of-type(2) { right: 14px; bottom: -6px; height: 15px; rotate: 40deg }
  }
}

/* ── 字幕（下の黄色い帯） ── */
.cap {
  position: absolute;
  z-index: 7;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 112px;
  padding: 16px 26px 20px;
  background: var(--grain), var(--yellow);
  border-radius: 46% 54% 0 0 / 22px 26px 0 0;
  pointer-events: none;

  p {
    position: relative;
    margin: 0;
    padding-bottom: 9px;
    color: var(--ink);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: -.02em;
    text-align: center;

    /* 文字の幅ぶんだけ珊瑚の線を引く（空のときは出さない） */
    &:not(:empty)::after {
      content: "";
      position: absolute;
      left: 4%;
      right: 4%;
      bottom: 0;
      height: 4px;
      border-radius: 999px;
      background: var(--coral);
      opacity: .82;
    }
  }
}

.bar {
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: rgba(70, 55, 30, .14);

  i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--coral);
  }
}

/* ── 再生ボタン ── */
.start {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  gap: 10px;
  place-content: center;
  justify-items: center;
  width: 100%;
  border: 0;
  color: var(--ink);
  background: var(--grain), rgba(247, 241, 227, .94);
  font-family: inherit;
  cursor: pointer;
  transition: .3s;

  &.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  i {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding-left: 5px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 0 0 0 12px rgba(245, 201, 69, .26), 0 8px 0 rgba(120, 90, 20, .18);
    font-size: 25px;
    font-style: normal;
  }

  strong { font-size: 27px; font-weight: 900 }
  small { color: var(--ink-mid); font-size: 13px }
}

/* ── 操作バー ── */
.ctrl {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 14px;

  button {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #ded2ba;
    border-radius: 10px;
    color: var(--ink);
    background: #fffdf7;
    font: inherit;
    font-size: 13px;
    cursor: pointer;

    &:hover { background: #f7f0e0; }
  }

  input[type="range"] { width: 100%; accent-color: var(--coral); }

  output {
    color: var(--ink-mid);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (width < 520px) {
    grid-template-columns: repeat(3, auto);
    justify-content: start;

    input[type="range"] { grid-column: 1 / -1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion { transition: none !important; }
}