/* ライブ配信 LP 再現 - style.css（サイト画面のみ）
   元スクショのサイト領域 942×1581px を幅430pxに換算して実測配置。
   .stage を container にし、全寸法を cqw（stage幅の1%）で指定することで
   幅が変わっても配置・大きさの比率が崩れないようにしている。
   基準値（430px幅換算）:
     アイコン  : 左16px / 上19px / φ48px
     いいね    : 右17px / 上29px / 高さ34px
     タグ      : 左17px / 上80px / 高さ25px
     見出し    : 上247px（34.2%）
     いいえ/はい: 左93〜338px / 上343px / 高さ50px / 間隔16px
     黒ボタン  : 幅209px / 上408px / 高さ43px
     コメント群: 左14px / 幅305px / 下端まで約22px
*/
:root {
  --pink: #ff4f9a;
  --blue: #2f7df6;
  --text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
  background: #000;
}

/* ---------- メインステージ（画面サイズに自動でフィット） ---------- */
.stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* モバイルのアドレスバー有無にも追従 */
  overflow: hidden;
  isolation: isolate;
  background: #d8c7a8;
}
.stage__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.stage__bg--fallback { z-index: -3; }
.stage--stopped .stage__bg { filter: brightness(.92); }
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), transparent 22%),
    linear-gradient(to top, rgba(0,0,0,.38), transparent 42%);
  pointer-events: none;
}

/* 上部：配信者情報（上 2.6% / 左右 3.8cqw） */
.stage__top {
  position: absolute;
  top: 2.6%;
  left: 3.8cqw;
  right: 3.8cqw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.streamer { display: flex; align-items: center; gap: 2.3cqw; }
.streamer__avatar {
  width: 11.3cqw; height: 11.3cqw;
  border-radius: 50%;
  object-fit: cover;
  border: .7cqw solid var(--pink);
  background: #ddd;
}
.streamer__name {
  color: #fff;
  font-size: 4.1cqw;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: var(--text-shadow);
}
.streamer__live {
  color: #fff;
  font-size: 2.9cqw;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: .7cqw;
  display: flex; align-items: center; gap: 1.4cqw;
  text-shadow: var(--text-shadow);
}
.live-dot {
  width: 2cqw; height: 2cqw;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 0 .7cqw rgba(255, 45, 85, .25);
}
/* いいねピル（高さ 7.9cqw ≒ 34px） */
.likes {
  color: #fff;
  font-size: 3.6cqw;
  font-weight: 700;
  background: rgba(60, 55, 50, .55);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  height: 7.9cqw;
  padding: 0 3.5cqw;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-top: 2.3cqw;
}

/* タグ（上 11.1% / 高さ 5.9cqw ≒ 25px） */
.tags {
  position: absolute;
  top: 11.1%;
  left: 3.9cqw;
  display: flex;
  gap: 1.9cqw;
}
.tag {
  color: #fff;
  font-size: 2.85cqw;
  font-weight: 800;
  border-radius: 999px;
  height: 5.9cqw;
  padding: 0 2.7cqw;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.tag--pink { background: #f43f6e; }
.tag--blue { background: var(--blue); }

/* 中央：アプリ誘導ポップアップ（停止後に暗幕＋カードでポップイン） */
.cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 12, .55);
  z-index: 5;
  transition: opacity .35s ease, visibility .35s;
}
.cta--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cta__card {
  width: 82%;
  background: #fff;
  border-radius: 4.5cqw;
  padding: 6.5cqw 5.5cqw 5.5cqw;
  text-align: center;
  box-shadow: 0 6cqw 16cqw rgba(0, 0, 0, .45);
}
.cta:not(.cta--hidden) .cta__card { animation: pop-in .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.9) translateY(3cqw); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cta__title {
  color: #141318;
  font-size: 4.9cqw;
  font-weight: 900;
  line-height: 1.35;
}
.cta__note {
  margin: 3cqw auto 0;
  color: #5a5860;
  font-size: 3.3cqw;
  line-height: 1.6;
}
/* いいえ/はい（カード内いっぱい / 高さ 11.6cqw / 間隔 3.7cqw） */
.cta__choices {
  margin: 4.5cqw auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.7cqw;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
}
.cta__choices .btn {
  height: 11.6cqw;
  font-size: 3.8cqw;
  border-radius: 3cqw;
}
.btn--ghost {
  color: #3c3a42;
  border: .35cqw solid #d8d6de;
  background: #f2f1f5;
}
.btn--pink { color: #fff; background: var(--pink); }
/* 黒ボタン（カード内いっぱい / 高さ 10.5cqw） */
.btn--black {
  width: 100%;
  height: 10.5cqw;
  margin: 3.3cqw auto 0;
  color: #fff;
  background: #0b0b0d;
  font-size: 3.7cqw;
  border-radius: 999px;
}

/* 下部：コメント（左 3.3cqw / 幅 71% / 下 3%） */
.comments {
  position: absolute;
  left: 3.3cqw;
  bottom: 3%;
  width: 71%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
}
.comment {
  align-self: flex-start;
  max-width: 100%;
  background: rgba(35, 33, 38, .62);
  backdrop-filter: blur(3px);
  border-radius: 3cqw;
  padding: 1.9cqw 3.2cqw;
  font-size: 3.2cqw;
  line-height: 1.35;
  color: #e8e8ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size .45s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1), background .45s ease, opacity .3s ease, height .32s cubic-bezier(.16,1,.3,1);
}
.comment__user { color: #6fc3ff; font-weight: 600; margin-right: 1.9cqw; }
.comment--faded { opacity: .45; }
@keyframes comment-in {
  from { opacity: 0; transform: translateY(3.5cqw); }
  to   { opacity: 1; transform: translateY(0); }
}
.comment--enter { animation: comment-in .55s cubic-bezier(.16,1,.3,1) backwards; }
.comment--exit { opacity: 0; }
/* 規定位置（下から highlightPosition 番目）に来たコメントは大きくピンクに */
.comment--highlight {
  align-self: stretch;
  background: linear-gradient(90deg, #e83e8c, #a24fd6);
  color: #fff;
  font-size: 4cqw;
  font-weight: 700;
  padding: 2.6cqw 3.4cqw;
}
.comment--highlight .comment__user { color: #bfe3ff; }