/* 公開体験版だけの絞り込み。色は style.css の既存変数だけを使う。 */
/* 窓と使い方案内は、どちらの形でも出さない（ロックの対象は窓を開く前のボタン）。
   ★設定、小道具の種類、画像・印刷はv0.3.5で体験版にも開ける（本人指示 2026-09-10）。 */
body.is-public .stage-modal:not(#stage-prefs-modal):not(#stage-kind):not(#stage-export-modal),
body.is-public .stage-modal-backdrop:not(#stage-prefs-backdrop):not(#stage-kind-backdrop):not(#stage-export-backdrop),
body.is-public #stage-tour {
  display: none !important;
}

/* 左右の列を畳むのは埋め込み（LPの帯）だけ。
   体験版そのものは製品版と同じ画面を見せ、使えないところへ錠を出す。 */
body.is-public-embed #stage-col-left,
body.is-public-embed #stage-col-right {
  display: none !important;
}

body.is-public-embed .stage-sketch-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board";
}

body.is-public-embed #stage-col-center {
  width: 100%;
  max-width: none;
}

body.is-public-embed [data-stage-tool]:not([data-stage-tool="select"]),
body.is-public-embed .stage-tool-split {
  display: none !important;
}

.stage-public-venue-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  padding: 7px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  overflow-x: auto;
}

.stage-public-venue-bar button,
.stage-public-motion-button,
.stage-public-phone-notice button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 5px 11px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font: 11px var(--sans);
}

.stage-public-venue-bar button[aria-pressed="true"] {
  border-color: var(--brass);
  color: var(--paper);
}

.stage-public-selection-status {
  min-width: 0;
  margin-left: auto;
  color: var(--brass);
  font: 11px var(--sans);
  white-space: nowrap;
}

.stage-public-phone-notice {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.stage-public-phone-notice p {
  max-width: 30em;
  margin: 0;
  font: 600 18px/1.7 var(--sans);
}

/* もう一方の言語。読めるが、主にはしない */
.stage-public-phone-notice-sub {
  font: 400 14px/1.7 var(--sans) !important;
  color: var(--ink-soft);
}

.stage-public-phone-notice button {
  justify-self: center;
  min-width: 120px;
  border-color: var(--rust);
  color: var(--ink);
}

.stage-public-motion-button {
  display: block;
  margin: 0 auto 10px;
  border-color: var(--brass);
  color: var(--paper);
}

body.is-public.is-public-embed #view-stage {
  padding: 6px !important;
}

body.is-public.is-public-embed .stage-sketch-head {
  display: none;
}

html.stage-phone-viewer body.is-public.is-public-embed .stage-public-venue-bar {
  position: fixed;
  z-index: 32;
  top: max(0px, env(safe-area-inset-top));
  right: max(0px, env(safe-area-inset-right));
  left: max(0px, env(safe-area-inset-left));
  width: auto;
  margin: 0;
}

html.stage-phone-viewer body.is-public.is-public-embed .stage-public-selection-status {
  display: none;
}

/* 会場の帯を画面上端へ固定するのは埋め込み（LP）だけ。その分の余白もここだけ。
   ★体験版の本体は帯を廃したのに余白54pxが残り、「＋人」の行と正面図の間が
     空いていた（2026-09-03 本人指摘・実測で判明）。 */
html.stage-phone-viewer body.is-public.is-public-embed .stage-canvas-stack {
  padding-top: 48px;
}

@media (max-width: 600px) {
  .stage-public-venue-bar button { min-height: 44px; }
}

/* ---- ここから 2026-09-03 追記（実画面で確認して足した分） ----
   体験版に残すのは「二つの図」「正面/平面/両方」「一つ戻す・やり直す」
   「会場切替（この CSS の下方で定義した自前の帯）」だけ。 */

/* シーン機能は出さない（体験版はショーを作る場所ではない） */
body.is-public-embed #stage-scene-bar,
body.is-public-embed .stage-scene-desc-label { display: none !important; }

/* 保存・書き出し・プレゼン・設定 */
body.is-public-embed #stage-export,
body.is-public-embed #stage-present-btn,
body.is-public-embed #stage-prefs-btn { display: none !important; }

/* 3Dカメラ・道具の並び・道具のヒント・名前の表示切替・図の入替 */
body.is-public-embed #stage-freecam-open,
body.is-public-embed .stage-tool-grid,
body.is-public-embed .stage-hint-help,
body.is-public-embed #stage-tool-hint,
body.is-public-embed .stage-name-toggle,
body.is-public-embed #stage-swap-center { display: none !important; }

/* 図の上に乗っている道具・客席位置・拡大縮小も出さない。
   体験版に残す操作は「駒を動かす」「会場を変える」「正面/平面/両方」だけ。 */
body.is-public-embed .stage-canvas-tools,
body.is-public-embed .stage-seat-list,
body.is-public-embed .stage-zoom-fab,
body.is-public-embed .stage-light-intent,
body.is-public-embed .stage-light-intent-compare { display: none !important; }

/* 画面に収める。LPへ iframe で置くとき、縦に伸びると帯からはみ出す。
   高さは実測して決めた（2026-09-03）。 */
body.is-public-embed #view-stage { padding-top: 8px; }
body.is-public .stage-canvas-wrap { min-height: 0; }

/* ★体験版の核は「二つの図が同時に動く」こと。本体は中央列が狭いため図を縦に積むが、
   それだと片方しか見えず、核が伝わらない（2026-09-03 実測: 図が690px×2で縦1400px）。
   左右の列を隠して幅が空いた分、公開版では横に並べる。
   高さは canvas が幅から決まるので、列を半分にすれば自然に収まる。 */
@media (min-width: 900px) {
  body.is-public-embed .stage-canvas-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
  }
}

/* スマホ下部のシーンのメモ欄。体験版はシーンを持たないので出さない。 */
body.is-public-embed .stage-phone-info { display: none !important; }

/* ---- 錠（体験版で使えない機能）2026-09-03 ----
   製品版と同じ画面を見せたうえで、使えないところに錠を出す。
   隠すのではなく「ある。ただしいまは開かない」と伝えるための表示。 */
body.is-public [data-public-lock] {
  position: relative;
  opacity: 0.42;
  cursor: not-allowed;
  filter: saturate(0.4);
}

/* ★欄の見出しは暗くしない。
   ①錠が掛かっていても畳めるボタンなので、押せると分かる必要がある（本人指示）
   ②欄の名前が読めることで「製品版には何があるか」が伝わる。隠すのが目的ではない */
body.is-public [data-public-lock="panel"] {
  opacity: 1;
  filter: none;
}

body.is-public [data-public-lock="panel"] > .stage-panel-body {
  opacity: 0.42;
  filter: saturate(0.4);
  cursor: not-allowed;
}

body.is-public [data-public-lock="panel"] > .stage-panel-head {
  cursor: pointer;
}

/* 錠のしるし。絵文字は使わない（言語・端末で字形が変わるため）。
   線画のSVGを背景に置く。色は --brass。 */
body.is-public [data-public-lock]::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 15px;
  margin: -7px 0 0 -6px;
  opacity: 0.92;
  pointer-events: none;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 15"><path d="M3 6V4.2A3.5 3.5 0 0 1 10 4.2V6" fill="none" stroke="%239c823f" stroke-width="1.6"/><rect x="1" y="6" width="11" height="8" rx="1.4" fill="%239c823f"/></svg>');
}

/* 大きな入れ物（パネルごと錠を掛けたとき）は、しるしを右上へ寄せる */
body.is-public [data-public-lock="panel"]::after {
  top: 9px;
  left: auto;
  right: 9px;
  margin: 0;
}

/* 錠の説明。画面下に短く出て、しばらくすると消える */
.stage-public-locked-note {
  position: fixed;
  z-index: 320;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 34em;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--brass);
  border-radius: 8px;
  background: var(--desk-2);
  color: var(--paper);
  font: 14px/1.7 var(--sans);
  text-align: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.stage-public-locked-note b { color: var(--rust-ink); }

/* 帯の外に単独で出す「いま選んでいる人」の表示（スマホのタップ操作用） */
.stage-public-selection-solo {
  margin: 0 0 6px;
  padding: 0 4px;
  color: var(--brass);
  font: 12px var(--sans);
  min-height: 1.2em;
}

/* ---- 「体験版」の明示（2026-09-03） ----
   既定の「β版」の札を置き換えたもの。招待制のβと取り違えないよう、
   同じ位置でより強く出す。 */
body.is-public .stage-public-badge {
  padding: 2px 8px;
  border: 1px solid var(--rust-ink);
  border-radius: 3px;
  color: var(--rust-ink);
  letter-spacing: 0.12em;
}

/* 体験版では保存できないことが操作の前提になる。既存の注意欄を使い、
   文字だけは通常の注意書きより明るくして読み落としを防ぐ。 */
body.is-public .stage-storage-caution {
  color: var(--paper-line);
  font-size: 12px;
}

/* 埋め込みの帯に置く小さな札 */
.stage-public-badge-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--rust-ink);
  border-radius: 3px;
  color: var(--rust-ink);
  font: 600 11px var(--sans);
  letter-spacing: 0.1em;
}

/* 製品版ベータへの問い合わせ（画面のいちばん上・別ページへ） */
/* 外向きの口（問い合わせ・紹介ページ）は、題（舞台スケッチ／体験版）のすぐ右へ置く
   （本人指示 2026-09-04）。横いっぱいの帯にすると、画面の頭が「宣伝」で埋まって
   本題の図が下がる。
   ★margin-right:auto で余った幅を右へ逃がし、題へ寄せる。見出しの帯は
     justify-content: space-between なので、何もしないと真ん中で浮いて散らばる。
   ★帯は既定で折り返さない。幅が足りないと操作の列ごと画面の外へ出るので、
     体験版だけ折り返しを許す（実測: 1180px以下で操作の列が二行目へ落ちる）。 */
.stage-public-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 auto 0 0;
}

/* スマホの告知の中の「紹介ページを見る」。「続ける」より控えめにする。 */
.stage-public-phone-notice-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--ink-soft);
  font: 500 13px/1.6 var(--sans);
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 231, 214, 0.28);
}
.stage-public-phone-notice-link:hover,
.stage-public-phone-notice-link:focus-visible {
  color: var(--milk);
  border-bottom-color: var(--brass);
}

/* 紹介ページ（LP）へ戻る口。問い合わせの箱より控えめにして、
   どちらが本命の一手かを取り違えないようにする。 */
.stage-public-lp-link {
  color: var(--ink-soft);
  font: 500 13px/1.6 var(--sans);
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 231, 214, 0.28);
  padding-bottom: 1px;
  white-space: nowrap;
}
.stage-public-lp-link:hover,
.stage-public-lp-link:focus-visible {
  color: var(--milk);
  border-bottom-color: var(--brass);
}

.stage-public-beta-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--rust);
  border-radius: 6px;
  background: rgba(168, 75, 38, 0.14);
  color: var(--rust-ink);
  font: 600 14px/1.6 var(--sans);
  text-decoration: none;
}

body.is-public:not(.is-public-embed) .stage-sketch-head { flex-wrap: wrap; row-gap: 8px; }

.stage-public-beta-link::after { content: " →"; }
.stage-public-beta-link:hover,
.stage-public-beta-link:focus-visible {
  background: rgba(168, 75, 38, 0.26);
  color: var(--paper);
}

/* ---- スマホの姿勢の帯は上へ（2026-09-03 本人指摘） ----
   本体は正面図の下端（舞台の立ち上がり）へ重ねるが、スマホでは演者が立つ床を
   丸ごと隠してしまい、選んだ人の後ろが見えない。上端へ移し、札も少し低くする。
   βのスマホは閲覧専用で帯が出ないので、この上書きは体験版だけに効く。 */
html.stage-phone-viewer body.is-public .stage-pose-strip {
  top: 0;
  bottom: auto;
  border-top: 0;
  border-bottom: 1px solid rgba(239, 231, 214, 0.18);
  padding: 4px 6px;
}
html.stage-phone-viewer body.is-public .stage-pose-strip-tile { width: 50px; }
html.stage-phone-viewer body.is-public .stage-pose-strip-tile canvas { height: 40px; }

/* ---- スマホ体験版の道具列（2026-09-03・作り直し） ----
   1列に「＋人」と客席の見え方の札。会場の種類の帯はスマホ本体では出さない。 */
.stage-public-phone-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  padding: 5px 6px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  overflow-x: auto;
  scrollbar-width: thin;
}
.stage-public-add-performer {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid var(--brass);
  color: var(--paper);
  font: 12px var(--sans);
}
.stage-public-seat-buttons { display: flex; gap: 5px; flex: 0 0 auto; }
.stage-public-seat-buttons button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px 9px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font: 11px var(--sans);
  white-space: nowrap;
}
.stage-public-seat-buttons button[aria-pressed="true"] { border-color: var(--brass); color: var(--paper); }
.stage-public-phone-tools .stage-public-selection-status { flex: 0 0 auto; margin-left: 4px; }

/* ---- スマホ本体はスクロールできるようにする（2026-09-03 本人指摘） ----
   本体のスマホ表示は body を固定して高さ100%に収める設計。体験版で足した行の分だけ
   下がはみ出て見えなくなった。固定を外し、普通に縦へ流す。
   実験で、題の帯は static のままで崩れないことを確認済み。 */
html.stage-phone-viewer body.is-public:not(.is-public-embed) {
  position: static;
  height: auto;
  min-height: 100%;
  overflow: auto;
}
html.stage-phone-viewer:has(body.is-public:not(.is-public-embed)) {
  height: auto;
  overflow: auto;
}

/* ---- スマホ設定パネル（2026-09-03 本人指示） ----
   「端末による違い」を外し、日本語 / English / ✕ を一列にする。
   本体は2桁のグリッドなので、体験版では横並びに組み替える。 */
html.stage-phone-viewer body.is-public .stage-phone-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
html.stage-phone-viewer body.is-public .stage-phone-settings strong { width: 100%; }
html.stage-phone-viewer body.is-public .stage-phone-settings .stage-public-lang { flex: 1 1 0; }
html.stage-phone-viewer body.is-public .stage-phone-settings .stage-public-close {
  flex: 0 0 auto;
  min-width: 48px;
  font-size: 15px;
}
body.is-public .stage-public-off { display: none !important; }

/* ---- スマホ横向き（2026-09-03 本人指摘: 上下が切れる → 右レールへ） ----
   本体は横向きで図を縦いっぱいに使う（題も隠す設計）。体験版で足した問い合わせ
   リンクと道具列を縦に入れると溢れ、下へ重ねると図の床を隠す。横向きでは
   リンクを出さず、道具列も隠し、右のレール（本体 .stage-phone-toolbar）に
   「＋人」「客席」「設定」を置く。客席と設定はタップで選択肢が出る。 */
.stage-public-rail { display: none; }

@media (orientation: landscape) {
  html.stage-phone-viewer body.is-public:not(.is-public-embed) .stage-public-links { display: none; }
  html.stage-phone-viewer body.is-public:not(.is-public-embed) .stage-public-phone-tools { display: none; }
  html.stage-phone-viewer body.is-public:not(.is-public-embed) .stage-public-rail {
    display: flex;
    flex-direction: column;
    flex: 3 1 0;
    min-height: 0;
  }
  html.stage-phone-viewer body.is-public:not(.is-public-embed) .stage-public-rail .stage-phone-button {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* 客席の選択肢。本体の横向きパネル（fixed・レール64pxを避ける）と同じ置き方。 */
.stage-public-popover {
  position: fixed;
  z-index: 33;
  top: calc(max(0px, env(safe-area-inset-top)) + 8px);
  right: calc(64px + max(8px, env(safe-area-inset-right)));
  max-width: min(420px, calc(100vw - 64px - 16px));
  padding: 8px 10px 10px;
  border: 1px solid var(--brass);
  background: var(--desk-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.stage-public-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--brass);
  font: 600 12px var(--sans);
}
.stage-public-popover-close {
  min-width: 40px;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  color: var(--paper);
  font: 14px var(--sans);
}
.stage-public-popover-list { flex-wrap: wrap; }