/*
 * FP(FunPhotos) スタイル 2/4 ―― 購入モーダル
 *
 * prototype-otanoshimi.css（7,586行）を4つに割ったうちの 2つめ
 * （2026-08-26 のリファクタリング。**中身は1文字も変えていない** ――
 * 4つをこの順に連結すると、割る前のファイルと一致する）。
 *
 * **読み込み順が意味を持つ。** 後ろの規則が前を上書きしている箇所が
 * 実在するので、hs_fp_head() は必ずこの順で4つの <link> を出す:
 *   1. fp-base.css    …… 土台。box-sizing の一覧・帯・撮影一覧・お試し
 *   2. fp-shop.css    …… 購入モーダル（従来と v2 の枠）
 *   3. fp-screens.css …… TOP反映・撮影開始/再生中/現像の演出・ご注意
 *   4. fp-late.css    …… あとから重ねた調整と上書き。**必ず最後**
 * 順を変えたいときは、先に該当の規則を1ファイルへ寄せてから。
 */
/* =========================================================
   購入モーダル v2（利用者の指示・2026-08-25）
   設定 fp_shop_layout = 'v2' のときだけ当たる。従来の見せ方には
   一切かからないよう、**すべて .is-v2 / .fp-plan-v2 の下に置く**。
   ========================================================= */

/* 残数の帯。アイコンを添えて、枠のある1行に置き直す。 */
.fp-shop-balance.is-v2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  opacity: 1;
}
.fp-shop-balance.is-v2 .fp-shop-balance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fp-shop-balance.is-v2 .fp-balance-label { font-size: 13px; opacity: .9; }
.fp-shop-balance.is-v2 .fp-balance-unit  { font-size: 12px; opacity: .8; }

/* カードは**縦に積む**。1枚あたりを横長にして、
   「撮影できる回数」と「獲得できる写真」を左右に並べるため
   （3列に詰めると、獲得枚数を大きく見せる余地が無くなる）。 */
.fp-plans.is-v2 {
  grid-template-columns: 1fr;
  gap: 12px;
}

.fp-plan-v2 {
  position: relative;
  display: block;
  align-items: stretch;
  gap: 0;
  padding: 14px 18px 16px;
  text-align: left;
}

.fp-plan-v2 .fp-p2-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fp-plan-v2 .fp-p2-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fp-plan-v2 .fp-p2-price {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* 2項目を左右に。**間は縦罫で切る** ―― 余白だけだと
   「撮影できる回数 3回 獲得できる写真 1枚」が一続きに読める。 */
.fp-plan-v2 .fp-p2-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.fp-plan-v2 .fp-p2-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fp-plan-v2 .fp-p2-gets {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 16px;
}
.fp-plan-v2 .fp-p2-col { min-width: 0; }
.fp-plan-v2 .fp-p2-label {
  display: block;
  font-size: 11px;
  opacity: .72;
  white-space: nowrap;
  line-height: 1.6;
}

/* 数字は**行の余りを殺してから**上下の余白をそろえる（利用者の標準ルール）。 */
.fp-plan-v2 .fp-p2-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding-top: 3px;
}
.fp-plan-v2 .fp-p2-big {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  padding-top: 2px;
  white-space: nowrap;
}
.fp-plan-v2 .fp-p2-unit {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  margin-left: 2px;
}
.fp-plan-v2 .fp-p2-get {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-left: 4px;
}
.fp-plan-v2 .fp-p2-spark {
  font-size: 12px;
  margin-left: 4px;
  line-height: 1;
  align-self: flex-start;
  padding-top: 2px;
}
.fp-plan-v2 .fp-p2-spark span { font-size: 9px; margin-left: 1px; }

/* アイコンは丸い座に乗せる。段ごとに色が変わるのはここ。 */
.fp-plan-v2 .fp-p2-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* 段の色。**並び順で当てる**（キー名では当てない）。
   獲得枚数と座だけを染めて、他は白のまま ―― 全体を染めると
   おすすめの金枠が埋もれる。 */
.fp-plan-v2.is-tone1 .fp-p2-ic { background: rgba(255, 255, 255, 0.16); }
.fp-plan-v2.is-tone2 .fp-p2-ic { background: #c8912a; }
.fp-plan-v2.is-tone3 .fp-p2-ic { background: #7a4dd6; }
.fp-plan-v2.is-tone2 .fp-p2-big,
.fp-plan-v2.is-tone2 .fp-p2-get,
.fp-plan-v2.is-tone2 .fp-p2-spark { color: #f5c451; }
.fp-plan-v2.is-tone3 .fp-p2-big,
.fp-plan-v2.is-tone3 .fp-p2-get,
.fp-plan-v2.is-tone3 .fp-p2-spark { color: #a98cf0; }

/* おすすめのバッジは左上の角に掛ける（従来は中央寄せ）。 */
.fp-plan-v2 .fp-plan-badge {
  position: absolute;
  top: -10px;
  left: 12px;
}

/* 撮り直しの決まり。プランの下に小さく2行。 */
.fp-shop-rules {
  margin: 14px 0 0;
  padding: 12px 14px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 11.5px;
  line-height: 1.75;
  opacity: .92;
}
.fp-shop-rules li {
  position: relative;
  padding-left: 22px;
  text-align: left;
}
.fp-shop-rules li + li { margin-top: 6px; }
.fp-shop-rules li::before {
  content: "i";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 9px;
  font-style: italic;
  line-height: 13px;
  text-align: center;
  opacity: .8;
}
.fp-shop-rules b { color: #f5c451; font-weight: 700; }

/* 狭い画面。2項目の左右は保つ（縦に積むと1枚の背が高くなり、
   3つのプランを見比べられなくなる）。数字だけ少し落とす。 */
@media (max-width: 430px) {
  .fp-plan-v2 { padding: 13px 14px 14px; }
  .fp-plan-v2 .fp-p2-name  { font-size: 15px; }
  .fp-plan-v2 .fp-p2-price { font-size: 17px; }
  .fp-plan-v2 .fp-p2-ic    { width: 32px; height: 32px; }
  .fp-plan-v2 .fp-p2-ic svg { width: 17px; height: 17px; }
  .fp-plan-v2 .fp-p2-big   { font-size: 25px; }
  .fp-plan-v2 .fp-p2-get   { font-size: 13px; }
  .fp-plan-v2 .fp-p2-cell  { gap: 8px; }
  .fp-plan-v2 .fp-p2-gets  { padding-left: 12px; }
}

.fp-shop-note {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: center;
  opacity: .5;
}

/* 買わずに試す道（利用者の指示・2026-08-19）。プランの比較から目をそらさないよう、
   パネルの右下に**小さく**置く。プランのボタンより弱い見た目にするのがねらいで、
   塗りではなく細い枠だけにしてある。
   文字の上下余白は line-height:1 ＋ 上下同値の padding でそろえる
   （行ボックスの余りが上に溜まって非対称に見えるのを防ぐ）。 */
#fp-shop-modal .fp-shop-foot {
  margin: 14px 0 0;
  text-align: right;
}
#fp-shop-modal .fp-shop-trial {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: "M PLUS 2", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#fp-shop-modal .fp-shop-trial:hover { background: rgba(255, 255, 255, 0.14); }

/* 決済スキップ中のプラン選択画面。実課金されないことが一目で分かるよう、
   一覧の直下に黄色・太字で出す。 */
#fp-shop-modal .fp-shop-test-note {
  margin: 14px 0 0;
  /* 公開側の共通配色は color だけでなく text-fill-color も上書きするため、
     両方を明示して常に黄色で表示する。 */
  color: #ffe14d !important;
  -webkit-text-fill-color: #ffe14d !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

/* 「買っていない撮影済みは初期化される」注記（設定で出す・2026-08-20）。
   買う前に必ず読ませたいので、テスト注記と同じ場所・同じ大きさに置く。
   ただし警告の黄色にはしない ―― 決済が走らないという注意とは別の話で、
   同じ色にすると異常事態のように見える。白の落ち着いた注記にする。 */
#fp-shop-modal .fp-shop-recapture-note {
  margin: 12px 0 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  opacity: .9;
}
#fp-shop-modal .fp-shop-recapture-note b {
  color: #ffe14d !important;
  -webkit-text-fill-color: #ffe14d !important;
}
/* 「シャッター回数のこり◯回」「🎁 商品プレゼントのこり◯個」は、それぞれを
   ひとまとまりとして扱う。折り返しは2つの間だけで起き、アイコンや数字が
   文言から切り離されて行末に取り残されない。 */
.fp-shop-balance .fp-shop-balance-item {
  display: inline-block;
  white-space: nowrap;
}
/* スマホでは横に「/」で並べると窮屈で、どこまでが1項目か読み取りにくい。
   2項目を上下に積み、区切りは「/」ではなく水平の罫線にする。 */
@media (max-width: 768px) {
  /* 枠ぜんぶで1つのグリッドにして、2段が「ラベル / 数字 / 単位」の
     同じ3列を共有するようにする。行ごとに中央寄せすると、ラベルの
     文字数の違いで数字の位置がずれて見えるため。 */
  .fp-shop-balance {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: center;
    align-items: baseline;
    column-gap: 6px;
    padding: 10px 14px;
  }
  /* 行そのものは器を持たず、中の3つを直接グリッドへ流し込む */
  .fp-shop-balance .fp-shop-balance-item { display: contents; }
  .fp-shop-balance .fp-balance-label { text-align: right; }
  .fp-shop-balance .fp-balance-unit  { text-align: left; }
  /* 数字を下へずらすと、その段だけ下側が広く見える。基準線に戻す。
     後ろにある .fp-shop-balance b（vertical-align:-2px）に勝つよう、
     項目クラスを挟んで詳細度を上げている。 */
  .fp-shop-balance .fp-shop-balance-item b {
    vertical-align: baseline;
    text-align: center;
  }
}

/* 商品サンプル本体。購入モーダル(2147482900)の上に重ねる。
   プラン選択は閉じずに残し、×か背景で戻れるようにする。 */
#fp-goods-sample {
  position: fixed;
  inset: 0;
  z-index: 2147482950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, .82);
}
#fp-goods-sample .fp-goods-sample-panel {
  position: relative;
  width: min(100%, 820px);
  height: min(86vh, 900px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
#fp-goods-sample iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* ×はパネルの角に重ねる（PC）。スマホでは画面内に収まるよう内側へ寄せる。 */
#fp-goods-sample .fp-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  z-index: 1;
}
@media (max-width: 768px) {
  #fp-goods-sample { padding: 14px; }
  #fp-goods-sample .fp-modal-close { top: 10px; right: 10px; }
}

/* プランカードの「商品プレゼント N個」 */
.fp-plan .fp-plan-gift {
  display: block;
  /* 上の余白と太字は外した（利用者の指示・2026-08-13）。
     3行（シャッター・現像・商品決定）は**等間隔・同じ太さ**で並べる。
     余白や太字で3行目だけ持ち上げると、別の情報のように見えていた。
     数字の強調は3行共通の .fp-plan-row-value が持つ。 */
  font-size: 11px;
  line-height: 1.5;
  color: #f2c14e !important;
  /* スマホの狭い幅だと「商品プレゼント」が文字の途中で折り返されるため、
     改行してよいのは<br>の位置だけにする（単語の途中では折り返さない）。 */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* プランごとに当たる商品が違うことを、名前と写真で伝える。

   画像は**常に1枚だけ**を大きく見せ、候補が複数あるときは重ねて
   クロスフェードする（切り替えは JS の startPlanGoodsFade）。
   以前は商品の数だけ横に並べていたが、カード幅が狭い（3列）ため
   1枚30pxまで縮んで何の商品か分からず、さらに3件のときは2行に
   折り返して、そのぶん商品名の開始位置がカードごとにずれていた。 */
.fp-plan .fp-plan-goods-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* 数字の3行と商品画像がくっつかないように、ひと呼吸あける
     （利用者の指示・2026-08-13）。スマホの縦積みは罫線＋余白を
     モバイル用ブロックが別に持つ。 */
  margin-top: 14px;
}
/* 枠は**候補の数にも画像の有無にもよらず同じ大きさ**。
   これがそろっているから、下に続く商品名の上端が3枚のカードでそろう。 */
/* --- プランカードの3行（シャッター／現像／商品決定）を同じ見え方にそろえる ---
   1行目 = アイコン＋ラベル、2行目 = 数字＋単位。
   3つとも同じ字の大きさ・同じ行間にする。以前は 12px / 12px / 11px と
   ばらばらで、現像だけ数字が先、商品決定だけ絵文字付きだった。 */
/* ラベルと数字は**左右に並べる**。縦に積むとカードが間延びし、
   3行ぶんで6行になって、下の商品名まで押し下げていた。 */
.fp-plan .fp-plan-shots,
.fp-plan .fp-plan-develops,
.fp-plan .fp-plan-downloads,
.fp-plan .fp-plan-gift {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.fp-plan .fp-plan-row-label,
.fp-plan .fp-plan-row-value {
  white-space: nowrap;
}
.fp-plan .fp-plan-shots,
.fp-plan .fp-plan-develops,
.fp-plan .fp-plan-downloads,
.fp-plan .fp-plan-gift {
  font-size: 12px;
  line-height: 1.55;
}
/* 数字は少し強めに出す（プランを比べる決め手になるため） */
.fp-plan .fp-plan-row-value {
  font-weight: 800;
}
@media (min-width: 900px) {
  .fp-plan .fp-plan-shots,
  .fp-plan .fp-plan-develops,
  .fp-plan .fp-plan-downloads,
  .fp-plan .fp-plan-gift {
    font-size: 13px;
  }
}

.fp-plan .fp-plan-goods-stage {
  position: relative;
  display: block;
  /* 商品が何かを見て分かる大きさにする（元の 64px では判別できなかった）。
     ただしスマホでは3枚が横に並ぶのでカードが狭く、96px では枠が
     カードいっぱいになって窮屈だった。広い画面だけ大きくする（下の @media）。 */
  width: 76px;
  aspect-ratio: 1 / 1;
  flex: none;
  /* **白で塗る。** 商品画像は背景が透過（PNG）のものがあり、半透明の枠だと
       後ろのモーダルの濃い地色が透けて商品が沈む。白い台紙に載せる
       （ラインナップの扇形カードと同じ扱い）。 */
  background: #fff;
  border-radius: var(--hs-radius-surface, 16px);
  overflow: hidden;
}
/* 重ねて置き、is-on の1枚だけを見せる。
   商品によって円形・縦長・横長とばらばらなので contain で枠に収める。 */
.fp-plan .fp-plan-goods-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
}
.fp-plan .fp-plan-goods-img.is-on { opacity: 1; }
.fp-plan .fp-plan-goods-names {
  /* 「もう少し大きく」の指示（2026-08-13）で 9px → 11px。
     当たる商品はプランを選ぶ決め手なので、読ませる大きさにする。 */
  /* 画像と文字の間にひと呼吸（利用者の指示・2026-08-13） */
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  /* プランカードは白地なので、商品名も白背景で確実に読める黒に固定する。 */
  color: #000 !important;
  /* PCでは太字にしない（利用者の指示・2026-08-13）。数字の行と強弱を
     分ける。スマホの縦積みでは下のモバイル用ブロックが太字を戻す。 */
  font-weight: 400;
  text-align: center;
  /* 名前は折り返してよい。枠と違って文章として読ませたいため */
  word-break: break-word;
}
/* 商品ごとに1行。区切り文字の途中で折り返らないようにするため、
   「／」の連結ではなく1件ずつのブロックにしてある（JS側と対）。 */
.fp-plan .fp-plan-goods-names .fp-plan-goods-name {
  display: block;
}
@media (min-width: 900px) {
  .fp-plan .fp-plan-goods-stage { width: 116px; }
  .fp-plan .fp-plan-goods-names { font-size: 12px; }
}
/* 動きを減らす設定では、切り替えは残しつつフェードだけ止める
   （切り替え自体を止めると、2枚目以降の商品が見られなくなる）。 */
@media (prefers-reduced-motion: reduce) {
  .fp-plan .fp-plan-goods-img { transition: none; }
}

/* ---------------- 撮り切ったあとの導線 ---------------- */

#fp-refill {
  position: fixed;
  left: 50%;
  top: 50%;                       /* 画面中央に置く（シャッターボタンと重ならない） */
  bottom: auto;
  transform: translate(-50%, -50%);
  /* 少し遅れて、ズームインしながらふわっと出す（利用者の指示・2026-08-13）。
     撮り切った直後は最後のフラッシュの余韻があるので、一呼吸おいてから。
     拡大は scale プロパティで行う ―― transform は中央合わせの translate が
     使っているので、そこには触らない。 */
  animation: fp-refill-in .45s ease-out .6s both;
  z-index: 9400;
  width: min(88vw, 380px);
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--hs-radius-surface, 16px);
  background: rgba(14, 15, 52, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  text-align: center;
}

.fp-refill-t { font-size: 13px; opacity: .85; }

.fp-refill-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff0055, #ff8400);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fp-refill-btn[disabled] { opacity: .55; cursor: default; }

/* ---------------- 端末が横向き（プレイヤーが強制回転）のとき ---------------- */

/* プレイヤーは #base を -90deg 回して横向き表示にする。
   body 直下のオーバーレイは回らないので、同じだけ回して向きを揃える。 */

/* 追加ショットの案内: 中央に置いて回す */
@keyframes fp-refill-in {
  from { opacity: 0; scale: .85; }
  to   { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #fp-refill { animation: none; }
}

body.fp-rotated #fp-refill {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(72vh, 380px);
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* トースト。
   回転中は映像としての「上」が画面の左になるので、right を広げるほど上に寄る。
   シャッターボタン（画面の右端）からも離れる。 */
body.fp-rotated #fp-toast {
  top: 50%;
  left: auto;
  right: 124px;
  bottom: auto;
  /* 回転中は文の長さが画面の高さ方向に伸びる。折り返さず1行で出す。
     画面の高さいっぱいまで使えるので、日本語1文なら収まる。 */
  max-width: 92vh;
  white-space: nowrap;
  transform: translate(50%, -50%) rotate(-90deg);
}

body.fp-rotated #fp-toast.is-visible {
  transform: translate(50%, -50%) rotate(-90deg);
}

/* 購入モーダル・当選演出は中身のパネルごと回す */
body.fp-rotated #fp-shop-modal .fp-modal-panel {
  width: min(86vh, 620px);
  max-height: 84vw;
  transform: rotate(-90deg);
}

/* 回したパネルは、開くときのズームで transform を奪われると向きが戻ってしまう。
   （@media はセレクタの後ろに書けない。以前そう書いてしまい規則ごと無効だった） */
body.fp-rotated #fp-shop-modal .fp-modal-panel { animation: none; }

/* 自動開始（TAP TO START を挟まない）の進行中は、タップ案内を一瞬も出さない。
   player.php が100ms間隔で inline の display を書き直すため、!important で上書きする。
   音あり再生が許可されなかったときは JS がこのクラスを外し、従来どおり表示される。 */
body.fp-autostarting #taptostart { display: none !important; }


/* ---------------- プレイヤー: シャッター残数バッジ ---------------- */

/* 直近に撮った写真を動画の上に出す白枠のサムネイル。
   ポラロイドモードでは現像するまで中身を見せない建て付けなので出さない。
   写真一覧への導線はヘッダーのフォトマークが担う。 */
body.hs-fp #buttonYourPhotos {
  display: none !important;
}
/* **出すことも選べる**（Design タブ →「撮影画面 → 演出を設定」／
   利用者の指示・2026-08-24「撮影プレビューの表示」）。
   印は JS が body に付ける（CFG.showPreview）。既定は付かない ――
   いまの画面が出していないので、設定が増えただけで現れないようにする。
   上の規則より強いセレクタで、!important 同士でも勝てるようにしてある。 */
body.hs-fp.fp-show-preview #buttonYourPhotos {
  display: block !important;
}
/* **絵の下に隙間を作らない**（利用者の報告・2026-08-24
   「スマホのみ、ライブプレビューの画像の下に隙間ができる」）。

   枠（#buttonYourPhotos）の高さは `aspect-ratio` で決めたいのに、
   `height:auto` の箱は**中身のほうが背が高ければそちらに合わせて伸びる**。
   中には写真マーク（#imagemark）が流れの中に残っていて、絵のほうは
   position:absolute で浮いている ―― 画面が狭いと枠の幅が縮む
   （.modeForcedRotate.horizontal で 70px）のにマークの背は変わらないので、
   枠だけが比率より高くなり、絵の下に余白が残っていた。

   **中身を枠に重ねて置き、枠の高さは比率だけで決める。**
   これで幅がいくら縮んでも、枠は必ず 16/9（縦のときは 9/16）になる。
   絵は元から絶対配置なので、置き方は変わらない。

   **body の印では絞らない**（2026-08-24）。プレビューを出す道は設定と
   モードで分かれており、印を条件にすると出ているのに当たらない場合がある。
   枠そのものを名指しすれば、どの道でも同じ形になる。 */
#buttonYourPhotos > a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* 絵が入っている間は写真マークを外す（絵の下に透けても意味が無い）。 */
#buttonYourPhotos > a:has(#buttonYourPhotosCurrentPhoto[src]:not([src=""])) #imagemark {
  display: none;
}

/* シャッターボタンは overflow:hidden（丸く切り抜くため）なので、
   そのままだと外に出したバッジがクリップされて消える。ここだけ解除する。
   ボタンの中身はCSSで描かれており、はみ出す要素は無いので影響はない。 */
body.hs-fp #buttonCapture {
  overflow: visible !important;
}

/* スマホではシャッターボタンを少し下げる。
   フキダシをボタンの真上に置くので、上の余白を稼ぐ。 */
@media (max-width: 768px) {
  body.hs-fp #buttonCapture:not(.horizontal) {
    top: calc(100% - 80px);
  }
}

/* 強制回転モード（横向き動画をスマホの縦持ちで見る）。
   映像は #base ごと -90deg 回るが、シャッターボタンは回らず画面の右端に置かれる。
   つまり映像としての「下」＝画面の右端なので、そちらへもう少し寄せる。
   player-ui.js が left をインラインで書くため、!important で上書きする。
   兄弟の #buttonYourPhotos に付く .modeForcedRotate を目印にして、
   本当に横持ちしているとき（回転なし）には効かないようにしている。 */
body.hs-fp #buttonYourPhotos.modeForcedRotate ~ #buttonCapture {
  /* **safe-area のぶんを足す**（利用者の報告・2026-08-29「シャッターがみえない?」）。
     回転しているので、この left は画面の上端からの距離になる。仮想ページは
     viewport-fit=cover なので、素の 82px では丸がノッチ／ステータスバーの下に潜る。
     82px は**調整のつまみ**として残す（寄せ具合を変えるときはこの数字だけ）。 */
  left: calc(100% - 82px - env(safe-area-inset-top, 0px)) !important;
}

/* **フキダシ（残り回数）が出ているときは縦位置も決める**（利用者の指示・
   2026-08-15）。player-ui.js はインラインで top: calc(50% - 40px) と書く。
   あれはフキダシが無かった頃に、ボタンの高さのぶんだけ持ち上げていた値で、
   フキダシが付いたいまは上に寄って見える。

   0px は**調整のつまみ**として残す（動かすときはこの数字だけ変える）。
   インラインより強くないと効かないので !important が要る。
   目印の .fp-has-shots は mountShotBadge が付ける ―― :has() で書くと
   古いSafariで効かず、フキダシの有無で位置が変わらない。 */
body.hs-fp #buttonYourPhotos.modeForcedRotate ~ #buttonCapture.fp-has-shots {
  top: calc(50% - 0px) !important;
}

/* #buttonCapture の子として置くので、横向き回転時もボタンごと一緒に回る。 */
#fp-shots {
  position: absolute;
  bottom: calc(100% + 14px);
  /* スマホはボタンの真上・左右中央 */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 11px 6px;
  border-radius: 11px;
  background: #fff;
  color: #1b1c2e;
  font-family: "M PLUS 2", sans-serif;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;   /* シャッターの当たり判定を邪魔しない */
}

#fp-shots .fp-shots-label {
  display: block;
  font-size: 9px;
  opacity: 0.7;
}

#fp-shots .fp-shots-count {
  display: block;
  margin-top: 1px;
  font-size: 10px;
}

#fp-shots .fp-shots-count b {
  font-size: 17px;
  font-weight: 700;
  padding-left: 3px;
  vertical-align: -1px;
}

#fp-shots.is-empty { color: #c62742; }

/* 吹き出しの尻尾。スマホではボタンの真下を向く（PCは下の媒体クエリで左向きにする）。 */
#fp-shots::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  border-bottom-width: 0;
}

/* PCではボタンの右横に出す（尻尾は左向き）。
   スマホは画面が狭く右に置くと見切れるため、ボタンの真上のまま。 */
@media (min-width: 769px) {
  #fp-shots {
    bottom: auto;
    right: auto;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%);
  }

  /* 尻尾を左向きにする。基本ルールが border-bottom-width:0 にしているので、
     ここで上下の枠幅を戻さないと三角形が崩れて下向きに見える。 */
  #fp-shots::after {
    top: 50%;
    left: auto;
    right: 100%;
    bottom: auto;
    transform: translateY(-50%);
    border-style: solid;
    border-color: transparent;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 0;
    border-right-width: 7px;
    border-right-color: #fff;
    border-top-color: transparent;
  }
}

/* ---------------- 検証用パネル ---------------- */

#fp-devbar {
  white-space: nowrap;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9800;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--hs-radius-surface, 16px);
  background: rgba(0, 0, 0, 0.7);
  color: #9df;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

#fp-devbar button {
  padding: 3px 9px;
  border: 1px solid #567;
  border-radius: 5px;
  background: #1a1c30;
  color: #cfe;
  font-size: 11px;
  cursor: pointer;
}

#fp-devbar button:hover { background: #263054; }