/*
 * Animation Lab のステージ
 *
 * 原本の見た目をそのまま持ってくる層。数値は原本の style 属性にあったもの
 * （CSP が `style-src 'self'` なので、属性のままでは持ち込めない）。
 *
 * **12px を下回る指定を作らない。** 原本には 11.5px が3か所あったが、
 * LP の下限は 12px（Phase 5C で一度踏んでいる）。その3か所だけ 12px へ上げ、
 * ほかは原本のまま。**縮小して合わせない。**
 *
 * 場所の約束
 *   Desktop：**すべてが1つのアートボード**（原本と同じ 1041x468.45）。
 *   Tablet / Mobile：横に並べる幅が無いので従来どおり縦へ積む。
 */

/* ── ステージ ＝ 一体アートボード ─────────────────────────
 *
 * **原本は1つの箱にすべてを置いている**（背景・床・家具・人物・吹き出し・
 * 書類チップ・CRM画面・時計・演出・YURAI窓）。その箱は原本のページ構造から
 * 機械抽出した **1041 x 468.45px**（tools/extract_animation_lab.py の artboard()）。
 *
 * LP でも同じ箱をそのまま作り、**箱ごと1つの transform: scale() で伸縮**する。
 * 部品ごとに別の倍率を当てない。だから
 *   - どの画面幅でも構図の密度が変わらない
 *   - 大きい画面では人物も案内窓も同じだけ大きくなる
 *   - 書類チップの収束先（62%, 11%）が案内窓の入口に重なったままになる
 *
 * 倍率 `--yl-k` は player-lab.js が使える幅から決め、ステージの高さを
 * 「拡大縮小後のアートボードの高さ」に合わせる。**固定 min-height を持たせない。**
 * 持たせると、小さい絵が大きな箱の下に残って上が空白になる（実際にそうなった）。
 * ─────────────────────────────────────────── */

.yu-stage.yl-stage,
.yu-player .yu-stage.yl-stage {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  min-height: 0;
  /* **JavaScript が動かなくても高さが決まる。**
     倍率 = 幅 / 1041 なので、高さ = 468.45 x 倍率 = 幅 / 2.2222 …
     つまりアートボードと同じ比率を持たせておけば、JS 無しでも
     「拡大縮小後のアートボードの高さ」と一致する。
     JS が動くときは player-lab.js が実寸の height を上書きする
     （倍率が上下限で止まったときはこの比率とずれるため）。 */
  aspect-ratio: 1041 / 468.45;
  background: linear-gradient(180deg, #fdfdfb 0%, #f5f4ef 100%);
}

.yl-artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 1041px;
  height: 468.45px;
  transform-origin: top left;
  /* 実際の倍率は player-lab.js が `--yl-k` に入れる。
     **JS が動かないときは幅帯ごとの近似値で代用する**（下の @media）。
     何も無ければ 1（原寸）。 */
  transform: scale(var(--yl-k, var(--yl-k-css, 1)));
}

/* JavaScript 無効時のフォールバック倍率。
   JS があるときの実測値に合わせてある（1280→0.91 / 1440→1.07 / 1920→1.22）。 */
@media (min-width: 1100px) { .yl-artboard { --yl-k-css: .91; } }
@media (min-width: 1500px) { .yl-artboard { --yl-k-css: 1.07; } }
@media (min-width: 1800px) { .yl-artboard { --yl-k-css: 1.22; } }

/* アートボードの中は原本と同じ座標系。SVG は箱いっぱい（比率が一致するので
   letterbox は発生しない：1041/468.45 = 800/360）。 */
.yu-player .yl-stage .yu-stage__svg { position: absolute; inset: 0; }
.yu-player .yl-stage .yu-stage__svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 案内窓もアートボードの中。**原本と同じ位置**（右 2.5% / 上 4%）。 */
.yl-over {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── JavaScript が動かないとき ──
   空のステージにしない。既定の話の**最終の場面**（台詞と案内窓）を出す。
   JS が動いたら player-lab.js が消す。 */

.yl-fallback {
  position: absolute;
  inset: 0;
  padding: 4% 3%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.yl-fallback__say {
  max-width: 46%;
  background: #fff;
  border: 2.5px solid #22303f;
  border-radius: 18px;
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 4px 5px 0 rgba(34, 48, 63, .14);
}
.yl-fallback__say b { display: block; font-size: 12px; color: #8b939e; letter-spacing: .08em; }
.yl-fallback__win {
  position: absolute;
  right: 2.5%;
  top: 4%;
  width: min(360px, 34%);
  background: #12203a;
  border: 2.5px solid #22303f;
  border-radius: 13px;
  padding: 12px 14px 14px;
  box-shadow: 6px 8px 0 rgba(34, 48, 63, .18);
}
.yl-fallback__logo .yu-logo { font-size: 15px; color: #fff; }
.yl-fallback__logo .yu-logo i { color: #ff5a70; }
.yl-fallback__t { margin-top: 8px; font-size: 15px; font-weight: 800; color: #fff; line-height: 1.55; }
.yl-fallback__list { margin-top: 8px; display: grid; gap: 6px; }
.yl-fallback__list li {
  font-size: 13px; line-height: 1.55; color: #dbe3f0;
  background: rgba(255, 255, 255, .08);
  border-radius: 7px; padding: 7px 10px;
  list-style: none;
}
.yl-fallback__f { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #8fa0bd; }
.yl-fallback__note { margin-top: 8px; font-size: 12px; color: #8fa0bd; }

/* 書類チップと吹き出しの層。**アートボードとぴったり同じ。**
   原本の % はこの箱に対する値なので、ずらすと吹き出しが頭から離れる。 */
.yu-stage__hud.yl-hud {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: visible;
}

.yl-slot, .yl-docs { display: contents; }

/* ── 散らばる書類 ── */

.yl-doc {
  position: absolute;
  white-space: nowrap;
  font-weight: 700;
  color: #3d4a5a;
  background: #fff;
  border: 1.5px solid rgba(34, 48, 63, .28);
  border-radius: 5px;
  box-shadow: 2px 3px 0 rgba(34, 48, 63, .1);
}
.yl-doc--scatter { font-size: 13.5px; padding: 5px 10px; }
.yl-doc--gather { font-size: clamp(15px, 1.9vw, 21px); padding: 9px 15px; }
.yl-doc--gather.yl-doc--crowded { font-size: clamp(14px, 1.75vw, 19px); padding: 8px 13px; }

/* ── 吹き出し ── */

.yl-bubble {
  position: absolute;
  animation: labYuPop .4s cubic-bezier(.2, 1.3, .5, 1) both;
}
.yl-bubble__box {
  position: relative;
  background: #fff;
  border: 2.5px solid #22303f;
  border-radius: 18px;
  padding: 13px 17px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 4px 5px 0 rgba(34, 48, 63, .14);
}
.yl-bubble__who {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #8b939e;
  margin-bottom: 4px;
}
.yl-bubble__tail {
  position: absolute;
  bottom: -10px;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 2.5px solid #22303f;
  border-bottom: 2.5px solid #22303f;
  transform: rotate(38deg);
}

/* 別の人。主役より一段引いた見た目にする（誰の声かを取り違えないため）。 */
.yl-bubble--other .yl-bubble__box {
  border-color: #6b7684;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.55;
  color: #5b6675;
  box-shadow: none;
}
.yl-bubble--other .yl-bubble__tail {
  bottom: -9px;
  width: 16px; height: 16px;
  border-right-color: #6b7684;
  border-bottom-color: #6b7684;
}

/* ── YURAI 窓 ── */

/* **原本と同じ位置・同じ大きさ。** ここが書類チップの収束先になる。 */
.yl-win {
  position: absolute;
  right: 2.5%;
  top: 4%;
  width: min(360px, 34%);
  animation: labYuPop .45s cubic-bezier(.2, 1.25, .5, 1) both;
}
.yl-win__panel {
  background: #12203a;
  border: 2.5px solid #22303f;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 6px 8px 0 rgba(34, 48, 63, .18);
}
.yl-win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: #0d1a30;
}
.yl-win__dot { width: 8px; height: 8px; border-radius: 50%; background: #4a5c7a; }
.yl-win__logo {
  margin-left: 4px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .08em;
  color: #fff;
}
.yl-win__logo i { font-style: normal; color: #ff5a70; }

.yl-win__body { padding: 10px 13px 10px; }
.yl-win__title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.55; }

.yl-win__fields {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border-radius: 7px;
}
.yl-win__field {
  display: flex;
  gap: 9px;
  align-items: baseline;
  animation: labYuRow .4s ease both;
}
.yl-win__k { flex: none; width: 66px; font-size: 12px; font-weight: 700; color: #8fa0bd; }
.yl-win__v { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #dbe3f0; }
/* 人の確認が要る行だけ色を変える（原本の `fx` 第3要素が 0 のもの）。 */
.yl-win__v.is-check { color: #ffc2cb; }

.yl-win__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 6px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, .08);
  border-radius: 7px;
  animation: labYuRow .45s ease both;
}
.yl-win__bullet {
  flex: none;
  margin-top: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff5a70;
}
.yl-win__text { font-size: 14px; font-weight: 600; color: #dbe3f0; line-height: 1.55; }
.yl-win__foot { margin-top: 8px; font-size: 12px; color: #8fa0bd; line-height: 1.6; }

.yl-win__acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.yl-win__act {
  font-size: 12px;
  font-weight: 700;
  color: #a9b6cb;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  padding: 5px 9px;
}
.yl-win__act--go {
  font-weight: 800;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .14);
  color: #dbe3f0;
  border-color: rgba(255, 255, 255, .28);
  transition: all .3s ease;
}
/* 誰かが承認の姿勢に入ったときだけ前へ出る。**押せるボタンではない。** */
.yl-win__act--go.is-hot { background: #fff; color: #12203a; border-color: #fff; }

.yl-win__note { margin-top: 5px; font-size: 12px; color: #8fa0bd; }

/* ── Tablet / Mobile ──────────────────────────────
   1100px 未満は横に並べる幅が無い。**一体スケールを使わない。**
   アートボードは箱の幅に合わせて縮め（原本の比率のまま）、案内窓は
   ステージの下へ降ろす（player-lab.js）。従来の見え方を変えない。 */

@media (max-width: 1099px) {
  /* **アートボードを流し込みに戻す。** 幅に合わせて縮み、高さは比率で決まる。
     こうするとステージの高さがアートボードの高さそのものになり、
     HUD（inset:0）と描かれた絵が必ず一致する。

     ここを `width:100%; height:100%` の絶対配置にすると、プレイヤーの
     高さ指定で潰れた箱いっぱいに引き伸ばされ、**絵は letterbox・HUD は箱いっぱい**
     という食い違いが起きる（1024〜1099px で吹き出しが約70px ずれていた）。 */
  .yu-player { height: auto; }
  .yu-player .yu-stage.yl-stage {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: auto;
  }
  .yl-artboard {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1041 / 468.45;
    transform: none;
  }
  /* 中身は % 指定なので、箱が縮めばそのまま追従する。
     ただし px 指定の文字は縮まないので、狭い画面用の指定を下で当てる。 */
}

@media (max-width: 760px) {
  /* 吹き出しのための空（そら）。原本の狭い画面と同じ 800x560 相当を、
     ステージの上余白で作る（200/800 = 25%）。絵はその下に置かれる。 */
  .yu-player .yu-stage.yl-stage { display: block; padding-top: 25%; }

  .yl-fallback__say { max-width: 68%; font-size: 13.5px; }
  .yl-fallback__win { position: static; width: auto; margin-top: 10px; }

  .yl-doc--scatter { font-size: 12px; padding: 4px 8px; }
  .yl-doc--gather,
  .yl-doc--gather.yl-doc--crowded { font-size: 12.5px; padding: 6px 10px; }

  .yl-bubble__box { font-size: 14px; padding: 9px 12px; border-radius: 14px; }
  .yl-bubble--other .yl-bubble__box { font-size: 13px; padding: 8px 11px; }
  .yl-bubble__who { font-size: 12px; margin-bottom: 2px; }
}

/* 案内窓をステージの下へ出したとき（player-lab.js が付ける）。
   重ねないので幅いっぱいに使える。**文字は原本のまま縮めない。** */
.yl-over--below {
  position: static;
  inset: auto;
  padding: 10px 12px 12px;
  background: var(--yu-s2);
  border-top: 1px solid var(--yu-line-s);
}
.yl-over--below.is-empty { display: none; }
.yl-over--below .yl-win {
  position: static;
  width: auto;
}