/* 新しいライブコール（2026-10-30新設・リニューアル第3〜5段階。js/liveCallScreen.js）の見た目。
   ・押せる部品は高さ 44px 以上、文字は 13px 以上
   ・コール表の本体は css/callText.css（コール表エディターの完成プレビューと同じ）。ここでは文字の大きさの倍率だけを足す
   ・演出（.cx-*）はデモ tools/call-effects-demo-2026-10-30 のデザイン C だけを、.lc-stage の中に限って移したもの。
     CSS の @keyframes は使わない（動きは js/callEffects.js が時刻から計算して transform・opacity に入れる） */

.lc-root {
  --lc-call: #e0262d;
  --lc-call-strong: #a50f17; /* 光っている間の文字（明るい板の上でも読める濃い赤。#fff2bf の上でコントラスト 7 以上） */
  --lc-pink: #ff6fa8;
  --lc-pink-dark: #d6246e; /* 白地の文字にも使うピンク（コントラスト 4.5 以上） */
  --lc-accent-soft: #fff2bf;
  --lc-name-text: #2b1a26;
  --lc-text: #4a2e42;
  --lc-muted: #6b5563; /* 白地でコントラスト 4.5 以上の薄い文字 */
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
  color: var(--lc-text);
}

.lc-root button,
.lc-root select,
.lc-root input {
  font-family: inherit;
}

.lc-primary-button,
.lc-mode-open,
.lc-resume-button {
  min-height: 48px;
  padding: 10px 18px;
  border: none;
  border-radius: 14px;
  background: var(--lc-pink-dark);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.lc-mode-open:disabled {
  background: #d9cbd3;
  color: #4a3a44;
  cursor: not-allowed;
}

.lc-link-button {
  min-height: 44px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--lc-pink-dark);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.lc-icon-button {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid #f3b6cd;
  border-radius: 12px;
  background: #fff;
  color: var(--lc-text);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
}
.lc-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lc-chip {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid #f3b6cd;
  border-radius: 999px;
  background: #fff;
  color: var(--lc-text);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.lc-chip.is-selected {
  border-color: var(--lc-pink-dark);
  background: #ffe1ee;
  color: #8a1546;
}

.lc-select-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 700;
}
.lc-select {
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid #f3b6cd;
  border-radius: 10px;
  background: #fff;
  color: var(--lc-text);
  font-size: 0.9375rem;
}

/* ===== はじめに ===== */
.lc-notice {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  line-height: 1.7;
}
.lc-notice-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.lc-notice-list {
  margin: 0 0 12px;
  padding-left: 1.2em;
  font-size: 0.9375rem;
}
.lc-notice-list li + li {
  margin-top: 6px;
}
.lc-notice-version {
  margin: 0 0 12px;
  color: var(--lc-muted);
  font-size: 0.8125rem;
}

/* ===== 曲一覧 ===== */
.lc-list {
  display: grid;
  gap: 10px;
}
.lc-list-top {
  display: flex;
  justify-content: flex-end;
}
/* 【2026-10-30 fix-live】ホームの3つの入口から来たとき、一覧の一番上に「そのモードが何か」を1行で */
.lc-mode-lead {
  order: -1;
  margin: 0;
  color: var(--lc-text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* 【2026-10-30追加・ホーム案F】ホームで遊び方を選んで来たときの案内（一覧の上） */
.lc-preferred-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 6px 12px;
  border-radius: 14px;
  background: #fff1f6;
  border: 1px solid #f3b6cd;
}
.lc-preferred-mode-text {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
.lc-search {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid #f3b6cd;
  border-radius: 14px;
  background: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}
.lc-list-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lc-count {
  margin: 0;
  color: var(--lc-muted);
  font-size: 0.875rem;
  font-weight: 700;
}
.lc-song-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lc-song-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid #f6d3e0;
  border-radius: 14px;
  background: #fff;
  color: var(--lc-text);
  text-align: left;
  cursor: pointer;
}
.lc-song-title {
  flex: 1 1 10em;
  font-size: 1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.lc-song-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lc-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.lc-badge.is-sheet {
  background: #ffe1ee;
  color: #8a1546;
}
.lc-badge.is-nosheet {
  background: #f1edf0;
  color: #5b4a55;
}
.lc-badge.is-missing {
  background: #fff4d6;
  color: #6b4b00;
}
.lc-empty,
.lc-loading {
  padding: 12px;
  color: var(--lc-muted);
  font-size: 0.9375rem;
}

/* ===== 曲のページ ===== */
.lc-song-page {
  display: grid;
  gap: 12px;
}
.lc-song-page-title {
  margin: 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.lc-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  font-size: 0.9375rem;
}
.lc-status dt {
  font-weight: 800;
}
.lc-status dd {
  margin: 0;
}
.lc-status dd.is-ng {
  color: #8a4b00;
}
.lc-status-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.lc-status-message.is-warning {
  background: #fff4d6;
  color: #5c3f00;
}
.lc-mode-cards {
  display: grid;
  gap: 10px;
}
.lc-mode-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #f6d3e0;
  border-radius: 18px;
  background: #fff;
}
@media (min-width: 480px) {
  .lc-mode-card {
    grid-template-columns: 140px minmax(0, 1fr);
  }
}
.lc-mode-card.is-unavailable .lc-mode-preview {
  opacity: 0.45;
}
/* 【2026-10-30 第2版】見本は本物の画面を撮った画像（文字はダミー）。角丸・細い枠・やわらかい影 */
.lc-mode-preview {
  align-self: start;
}
.lc-mode-preview-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  border: 1px solid #f3c6d8;
  border-radius: 12px;
  background: #fff8fb;
  box-shadow: 0 3px 10px -4px rgba(150, 30, 90, 0.28);
}
/* 幅の狭い画面（320px など）：見本を上、説明を下にして、説明の文字が細切れにならないように */
@media (max-width: 359px) {
  .lc-mode-card {
    grid-template-columns: 1fr;
  }
  .lc-mode-preview {
    width: min(100%, 168px);
  }
}
.lc-mode-body {
  display: grid;
  gap: 6px;
  align-content: start;
}
.lc-mode-title {
  margin: 0;
  font-size: 1.05rem;
}
.lc-mode-description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.lc-mode-reason {
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff4d6;
  color: #5c3f00;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ===== コール表・ライブコール ===== */
.lc-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 4px;
  background: rgba(255, 247, 250, 0.96);
}
.lc-toolbar.is-live {
  position: static;
}
/* 【2026-10-30 fix-live】ライブコールの上の部分：1行目に［ライブコール］の札と［表示の設定］。説明と設定は折りたためる（再生を始めたら自動で1回たたむ） */
.lc-toolbar-head {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lc-toolbar-controls {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.lc-toolbar.is-collapsed .lc-toolbar-controls {
  display: none;
}
.lc-settings-toggle {
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid #f3b6cd;
  border-radius: 999px;
  background: #fff;
  color: #8a1546;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.lc-settings-toggle::after {
  content: " ▴";
}
.lc-toolbar.is-collapsed .lc-settings-toggle::after {
  content: " ▾";
}
.lc-toolbar-note {
  flex: 1 1 100%;
  margin: 0;
  color: var(--lc-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.lc-mode-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--lc-pink-dark);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
}
.lc-font-controls {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.lc-font-label {
  font-size: 0.875rem;
  font-weight: 700;
}

/* 文字の大きさ：倍率 1 のときは css/callText.css（完成プレビュー）と同じ大きさ */
.lc-stage .call-text-line,
.lc-stage .call-text-extra {
  font-size: calc(1.02rem * var(--lc-font, 1));
}
.lc-stage .call-text-calls {
  font-size: calc(0.98rem * var(--lc-font, 1));
}
.lc-stage .call-text-block-label {
  font-size: max(13px, calc(0.78rem * var(--lc-font, 1)));
}

.lc-stage.is-live {
  position: relative;
  height: min(62vh, 640px);
  height: min(62dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.lc-stage.is-live .call-text-view {
  padding-bottom: 45vh; /* 最後の行も、読む位置まで送れるように */
}
.lc-stage.is-live .call-text-call {
  cursor: pointer;
}

/* 今歌っている行（歌詞の時刻が信頼できる行だけ） */
.lc-stage .call-text-line.is-now {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
  box-shadow: inset 3px 0 0 #555;
}

/* いま／つぎ のパネル（小さく。スマホではさらに小さく） */
.lc-now-panel {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 6px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(255, 111, 168, 0.18);
  font-size: 0.875rem;
  line-height: 1.5;
}
.lc-now-row,
.lc-next-row {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}
.lc-now-label {
  flex: none;
  padding: 0 6px;
  border-radius: 6px;
  background: #ffe1ee;
  color: #8a1546;
  font-size: 0.8125rem;
  font-weight: 800;
}
.lc-now-text {
  overflow: hidden;
  color: var(--lc-call-strong);
  font-weight: 800;
  text-overflow: ellipsis;
}
.lc-next-text {
  overflow: hidden;
  color: var(--lc-muted);
  text-overflow: ellipsis;
}
/* 【2026-10-30 夜】次のコールまでの残り時間：コールの文字と分けて右端に小さく。3秒を切ったら（is-soon）文字だけ少し濃く
   （点滅・動きはなし。色だけでなく「まもなく」の言葉でも伝える） */
.lc-next-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lc-next-wait {
  flex: none;
  margin-left: auto;
  color: var(--lc-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.lc-next-row.is-soon .lc-next-text {
  color: var(--lc-call-strong);
  font-weight: 700;
}
.lc-next-row.is-soon .lc-next-wait {
  color: #8a1546;
  font-weight: 800;
}
.lc-now-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(224, 38, 45, 0.14);
}
.lc-now-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lc-pink), #ff9f43);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* 【2026-10-30 夜】背の高い画面（iPad の縦など）：640px で止めると下が大きく空いていたので、画面の高さに合わせて広げる */
@media (min-height: 1000px) {
  .lc-stage.is-live {
    height: min(64vh, 960px);
    height: min(64dvh, 960px);
  }
}
/* 背の低い画面（iPhone SE など）：コール表の箱を少し低くして、再生の操作まで1画面に近づける */
@media (max-height: 700px) {
  .lc-stage.is-live {
    height: 50vh;
    height: 50dvh;
  }
}
@media (max-width: 400px) {
  .lc-player {
    gap: 6px;
  }
  .lc-play-button {
    min-width: 84px;
  }
  .lc-time {
    font-size: 13px;
  }
  .lc-now-panel {
    min-height: 48px;
    padding: 4px 8px;
    font-size: 0.8125rem;
  }
}

.lc-resume-button {
  justify-self: center;
  min-height: 44px;
  margin-top: -4px;
  font-size: 0.9375rem;
}

/* 再生の操作（画面の下に固定） */
.lc-player {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -2px 12px rgba(74, 46, 66, 0.12);
}
.lc-play-button {
  min-width: 96px;
  min-height: 48px;
  padding: 6px 14px;
  border: none;
  border-radius: 14px;
  background: var(--lc-pink-dark);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.lc-seek {
  flex: 1 1 140px;
  min-height: 44px;
  accent-color: var(--lc-pink-dark);
}
.lc-time {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* カラオケ：同期歌詞の部品（js/lyricsSync.js）はそのまま。ここでは箱の高さと文字の大きさだけを、読みやすく変える
   （収録曲一覧の試聴の小さなパネル 150px・0.72rem は変えない） */
.synced-lyrics-panel.lc-karaoke-panel {
  max-height: none;
  height: min(60vh, 600px);
  height: min(60dvh, 600px);
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
}
.lc-karaoke-panel .lyrics-mode-toggle-button {
  min-height: 44px;
  font-size: 13px;
}
.lc-karaoke-panel .synced-lyrics-line {
  padding: 6px 8px;
  font-size: 1.05rem;
  line-height: 1.7;
}
@media (max-height: 700px) {
  .synced-lyrics-panel.lc-karaoke-panel {
    height: 52vh;
    height: 52dvh;
  }
}

/* ===== 演出（デザイン C）。コール表の赤文字の部品（.call-text-call）に .cx-call を足して使う ===== */
.lc-stage .cx-call {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0 0.22em;
  vertical-align: baseline;
}
/* 終わったコール：少し落ち着いた色に（以前は opacity 0.78 で、白地のコントラストが約 3.6 まで下がっていた。
   【2026-10-30 第2版】薄くせず、くすんだ赤 #b0585e（白地で約 4.8）にして 4.5 以上を保つ） */
.lc-stage .cx-call.is-done .cx-text {
  color: #b0585e;
}
.lc-stage .cx-text {
  position: relative;
  display: inline-block;
  max-width: 100%;
  transform-origin: 50% 70%;
}
/* 本人が改行・空白を入れたコール（is-pre）は、改行をそのまま見せる */
.lc-stage .call-text-call.is-pre .cx-text {
  white-space: pre-wrap;
}
.lc-stage .cx-call.is-on .cx-text {
  color: var(--lc-call-strong);
}
.lc-stage .cx-plate,
.lc-stage .cx-ring {
  position: absolute;
  inset: -1px -2px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
}
.lc-stage .cx-plate {
  background: var(--lc-accent-soft);
  box-shadow: inset 0 0 0 2px #ffc24d;
}
.lc-stage .cx-build {
  position: absolute;
  inset: -1px -2px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 111, 168, 0.13);
  box-shadow: inset 0 0 0 2px var(--lc-pink);
}
.lc-stage .cx-ring {
  inset: -4px;
  border: 2px solid var(--lc-pink);
  border-radius: 10px;
}
.lc-stage .cx-call.is-long,
.lc-stage .cx-t-mix {
  padding-bottom: 7px;
}
.lc-stage .cx-bar {
  position: absolute;
  left: 0.3em;
  right: 0.3em;
  bottom: 1px;
  height: 4px;
  border-radius: 2px;
  background: rgba(224, 38, 45, 0.14);
  opacity: 0;
  transform-origin: 50% 100%;
}
.lc-stage .cx-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lc-pink), #ff9f43);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.lc-stage .cx-wave {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  opacity: 0;
}
.lc-stage .cx-wave::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #ffd93d 45%, rgba(255, 217, 61, 0) 72%);
}
/* MIX：掛け声を1つずつ */
.lc-stage .cx-t-mix {
  display: block;
  padding-top: 1.35em;
}
.lc-stage .cx-t-mix .cx-text {
  display: block;
  white-space: pre-wrap;
}
.lc-stage .cx-seg {
  display: inline-block;
  border-radius: 4px;
  transform-origin: 50% 70%;
}
.lc-stage .cx-call.is-on .cx-seg.is-past {
  opacity: 0.5;
}
.lc-stage .cx-call.is-on .cx-seg.is-now {
  color: #fff;
  background: var(--lc-call);
  box-shadow: 0 0 0 2px var(--lc-call);
}
.lc-stage .cx-badge {
  position: absolute;
  top: 0.1em;
  left: 0.25em;
  padding: 0 0.45em;
  border-radius: 4px;
  background: #fff2bf;
  color: #6b4b00;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  opacity: 0.85;
}
.lc-stage .cx-call.is-pre .cx-badge,
.lc-stage .cx-call.is-on .cx-badge {
  opacity: 1;
}
/* 名前コール・超絶かわいい：メンバーカラー（名前の明示データがあるときだけ） */
.lc-stage .cx-name {
  position: relative;
  display: inline-block;
  padding: 0 0.2em;
  border-radius: 6px;
  transform-origin: 0 70%;
}
.lc-stage .cx-t-name .cx-plate {
  display: none;
}
.lc-stage .cx-name-text {
  position: relative;
}
.lc-stage .cx-name-plate {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--member-bg, var(--member, #ffb3d1));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  opacity: 0;
}
.lc-stage .cx-call.is-on .cx-name-text {
  color: var(--lc-name-text);
}
.lc-stage .cx-prefix {
  position: relative;
  display: inline-block;
  transform-origin: 100% 70%;
}
.lc-stage .cx-prefix-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--lc-pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.lc-stage .cx-t-cute {
  padding-right: 1.2em;
}
.lc-stage .cx-hearts {
  position: absolute;
  right: 0.1em;
  top: 0;
  bottom: 0;
  width: 1em;
  pointer-events: none;
}
.lc-stage .cx-hearts i {
  position: absolute;
  bottom: 0.15em;
  font-style: normal;
  font-size: 0.66em;
  line-height: 1;
  color: var(--lc-pink-dark);
  opacity: 0;
}
.lc-stage .cx-hearts i:nth-child(1) {
  left: 0.1em;
}
.lc-stage .cx-hearts i:nth-child(2) {
  left: 0.75em;
  bottom: 0.35em;
}
.lc-stage .cx-hearts i:nth-child(3) {
  left: 0.4em;
  bottom: 0.05em;
}
/* 短い掛け声 */
.lc-stage .cx-t-shout {
  padding: 0 0.42em;
}
.lc-stage .cx-t-shout .cx-text {
  transform-origin: 50% 60%;
}
.lc-stage .cx-sweep {
  position: absolute;
  left: 0.42em;
  right: 0.42em;
  bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--lc-call);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.lc-stage .cx-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lc-stage .cx-ticks i {
  position: absolute;
  width: 7px;
  height: 2.5px;
  border-radius: 2px;
  background: #ff2d7a;
  opacity: 0;
  transform-origin: 0 50%;
}
.lc-stage .cx-ticks i:nth-child(1) {
  left: calc(50% - 1px);
  top: 1px;
}
.lc-stage .cx-ticks i:nth-child(2) {
  right: 0.15em;
  top: 3px;
}
.lc-stage .cx-ticks i:nth-child(3) {
  left: 0.3em;
  top: 3px;
}
.lc-stage .cx-t-mix ~ .cx-call {
  margin-top: 8px;
}
/* 演出オフ：飾り（輪・ハート・波・集中線）を出さない。光る板と文字の色だけ */
.lc-stage.intensity-off .cx-ring,
.lc-stage.intensity-off .cx-hearts,
.lc-stage.intensity-off .cx-wave,
.lc-stage.intensity-off .cx-ticks {
  display: none;
}

/* データ管理：完成版コールデータ */
.call-release-undo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f6d3e0;
  font-size: 0.875rem;
}
.call-release-undo-button {
  min-height: 44px;
}
#call-release-import-result,
#call-release-version {
  font-size: max(13px, 0.8125rem);
  line-height: 1.6;
}
#call-release-import-result p {
  margin: 0 0 4px;
}
#call-release-rollback-panel {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff4d6;
  color: #5c3f00;
  font-size: 0.875rem;
}
#call-release-rollback-panel[hidden] {
  display: none;
}

/* 【2026-10-29 修正】再生の操作が画面の下に貼り付かず、ページの一番下まで行かないと見えなかった
   （まわりの要素の overflow などで sticky が効かない場合がある）→ 画面の下に固定（fixed）し、その分の余白を下に取る */
#live-call-root .lc-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: min(100% - 16px, 720px);
  margin: 0 auto;
  box-shadow: 0 -6px 18px -10px rgba(120, 20, 70, 0.35);
}
#live-call-root:has(.lc-player) {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
/* 外側の枠（.game-frame）の backdrop-filter・overflow:hidden があると、固定（fixed / sticky）が画面ではなく枠に対して効いてしまう。
   ライブコールの画面を開いている間だけ外す */
body[data-screen="liveCall"] .game-frame {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
}

/* 【2026-10-29 修正】改行のある長いコール（has-break）は、元の CSS で display:inline になり、光る枠が1行目の左端だけに出ていた
   → ライブコールでは塊（block）として扱い、コール全体を枠で囲む */
.lc-stage .call-text-calls .cx-call.has-break,
.lc-stage .cx-call.has-break {
  display: block;
}

/* 【2026-10-30 第2版】新しいライブコールの光り方（js/callEffects.js の visualStateAt・js/callEffectsRenderer.js の applyVisualState）。
   動きは transform・opacity だけ（毎フレーム、値が変わったときだけ JS が書く）。@keyframes・無限アニメーションは使わない。
   ・今ここ：黄色い板＋外側のピンク・金の光（.cx-glow）。文字は濃い赤（板の上でコントラスト 7 以上）
   ・次の知らせ：始まる 1.5 秒前から、うっすらピンクの枠（.cx-cue。濃さは最大 0.4。中は塗らない）
   ・長いコール：全体が光る＋下に細い進み具合のバー1本（区切り・1語ずつの光り方はしない） */
.lc-stage .cx-call {
  transform-origin: 50% 60%;
}
.lc-stage .cx-call.is-active,
.lc-stage .cx-call.is-post {
  z-index: 1;
}
.lc-stage .cx-glow,
.lc-stage .cx-cue {
  position: absolute;
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
}
.lc-stage .cx-glow {
  inset: -2px -3px;
  box-shadow:
    0 0 0 2px #ffc24d,
    0 0 12px 3px rgba(255, 111, 168, 0.5),
    0 0 22px 6px rgba(255, 194, 77, 0.25);
}
.lc-stage .cx-cue {
  inset: -1px -2px;
  box-shadow: inset 0 0 0 2px var(--lc-pink);
}
/* 【2026-10-30 fix-live】終わったコール：本人の終了時刻で板（黄色の地）・光の枠・バーを外す（js/callEffects.js は終了で 0 にする）。
   消え方だけ、短いフェード（0.3 秒）でなめらかに。一時停止中でもフェードは最後まで進み、「今光っている」ようには残らない。
   光り始め（is-active）には transition を付けない（始まりが遅れて見えないように） */
.lc-stage .cx-call.is-post .cx-plate,
.lc-stage .cx-call.is-post .cx-glow,
.lc-stage .cx-call.is-post .cx-bar,
.lc-stage .cx-call.is-post {
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}
.lc-stage .cx-call.is-post .cx-text {
  transition: color 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lc-stage .cx-call.is-post .cx-plate,
  .lc-stage .cx-call.is-post .cx-glow,
  .lc-stage .cx-call.is-post .cx-bar,
  .lc-stage .cx-call.is-post,
  .lc-stage .cx-call.is-post .cx-text {
    transition: none;
  }
}
.lc-stage .cx-call.cx-v-long {
  padding-bottom: 7px;
}
.lc-stage .cx-v-long .cx-bar {
  height: 3px;
}
/* 位置を測るときだけ、拡大・浮きを外す（js/liveCallScreen.js の remeasure） */
.lc-stage.is-measuring .cx-call {
  transform: none !important;
}
/* 舞台の背景の光（ふちだけ。文字の上には色を重ねない） */
.lc-stage-frame {
  position: relative;
}
.lc-stage-ambient {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 18px 2px rgba(255, 111, 168, 0.32),
    inset 0 0 0 2px rgba(255, 111, 168, 0.28);
}
.lc-stage.intensity-off .cx-glow,
.lc-stage.intensity-off .cx-cue,
.lc-stage-frame:has(.intensity-off) .lc-stage-ambient {
  display: none;
}

/* 【2026-10-30 夜】名前コールのメンバーカラー（js/liveCallScreen.js の memberColorForCallText。メンバー名と確かに一致したときだけ .cx-member）。
   文字の色・板の色は変えず、光の輪郭と、光っている間の下線だけをメンバーカラーにする（白・黄色のメンバーカラーでも文字は読める） */
.lc-stage .cx-call.cx-member .cx-glow {
  box-shadow:
    0 0 0 2px var(--cx-member, #ffc24d),
    0 0 12px 3px rgba(255, 111, 168, 0.4);
}
.lc-stage .cx-call.cx-member .cx-plate {
  box-shadow:
    inset 0 0 0 2px #ffc24d,
    inset 0 -4px 0 var(--cx-member, #ffc24d);
}

/* ===== 【2026-10-30 fix-live】iPad（幅 768px 以上）：ライブコール・新しいカラオケの列を広げ、文字を少し大きく =====
   枠（.game-frame）の幅を広げるのは、この2つの画面を開いている間だけ（body[data-screen]）。ホーム・ほかの画面は変えない。
   カラオケの画面は前の「カラオケ同期」と共通なので、新しいカラオケ（.kx-on）のときだけ広げる（前の版の見た目は変えない） */
@media (min-width: 768px) {
  body[data-screen="liveCall"] .game-frame,
  body[data-screen="liveCallModeKaraoke"]:has(#live-call-mode-karaoke-screen.kx-on) .game-frame {
    max-width: min(880px, 100%);
  }
  .lc-stage .call-text-line,
  .lc-stage .call-text-extra {
    font-size: calc(1.14rem * var(--lc-font, 1));
  }
  .lc-stage .call-text-calls {
    font-size: calc(1.1rem * var(--lc-font, 1));
  }
  .lc-now-panel {
    font-size: 1rem;
  }
  /* 下の再生の操作：列（#live-call-root）と同じ幅・同じ位置にそろえる */
  #live-call-root .lc-player {
    /* 枠の幅（画面の幅 − 左右の余白 32px、最大 880px）から、画面の内側の余白・枠線（50px）を引いた幅＝列の幅 */
    width: calc(min(100% - 32px, 880px) - 50px);
  }
}