/* LEDトラック プレイヤー — 起動画面（#launch）スタイル */

/* ============================================================
   起動画面（プレイリスト選択ランチャー）
   ============================================================ */
#launch {
  position: fixed;
  inset: 0;
  z-index: 70;               /* #setup(60) より前面 */
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#launch.hidden {
  display: none;
}

/* ヘッダー */
.lnch-head {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 16px 24px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.lnch-logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--copper);
  letter-spacing: -.5px;
}
.lnch-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.lnch-stat {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}
.lnch-player-badge {
  font-size: 13px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 12px;
  white-space: nowrap;
}
.lnch-player-badge b { color: var(--text); }

/* スクロール本体 */
.lnch-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* セクション見出し */
.lnch-section-head {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: 14px;
}
.lnch-section-head h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.lnch-section-head .cnt {
  font-size: 12px;
  color: var(--text-muted);
}

/* プレイリストグリッド */
.lnch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--launch-col-min), 1fr));
  gap: var(--gap-md);
  margin-bottom: 28px;
}

/* プレイリストカード */
.lnch-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--anim-fast), box-shadow var(--anim-fast);
  cursor: default;
}
.lnch-card:hover {
  border-color: var(--copper);
  box-shadow: 0 2px 12px rgba(160, 78, 34, 0.12);
}

/* カード上部：プレイボタン（全幅クリック） */
.lnch-card-play {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  min-height: 120px;
}
.lnch-card-play:hover .lnch-play-icon {
  background: var(--copper);
  color: #fff;
  transform: scale(1.08);
}
.lnch-play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  color: var(--copper);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--anim-fast), transform var(--anim-fast);
}
.lnch-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  word-break: break-all;
}
.lnch-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.lnch-card-meta .tag-v {
  background: #eef2ff;
  color: #4455bb;
  border-radius: 4px;
  padding: 1px 6px;
}
.lnch-card-meta .tag-p {
  background: #f5e9d0;
  color: var(--copper);
  border-radius: 4px;
  padding: 1px 6px;
}

/* カード下部：アクションバー */
.lnch-card-actions {
  display: flex;
  border-top: 1px solid var(--border-lite);
}
.lnch-card-actions button {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--text-sub);
  transition: background var(--anim-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lnch-card-actions button:not(:first-child) {
  border-left: 1px solid var(--border-lite);
}
.lnch-card-actions button:hover {
  background: var(--bg-muted);
}
.lnch-card-actions .del-btn:hover {
  background: #fff0f0;
  color: var(--text-warn);
}

/* iMovie風「新規作成」カード（グリッド先頭・空きカード） */
.lnch-create-card {
  border: 2px dashed #e2cf9f;
  background: #f5e9d0;
  border-radius: 14px;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color var(--anim-fast), background var(--anim-fast),
              box-shadow var(--anim-fast), transform var(--anim-fast);
}
.lnch-create-card:hover {
  border-color: var(--copper);
  background: #f5e9d0;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(160, 78, 34, 0.18);
}
.lcc-plus {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 300;
  line-height: 0;
  box-shadow: 0 4px 12px rgba(160, 78, 34, 0.35);
  transition: background var(--anim-fast), transform var(--anim-fast);
}
.lnch-create-card:hover .lcc-plus {
  background: var(--copper-dark);
  transform: scale(1.06);
}
.lcc-label { font-size: 14px; font-weight: 800; color: var(--copper-dark); }
.lcc-hint  { font-size: 12px; color: var(--text-muted); }

/* プレイリストが1つも無いときは主役として横いっぱい・大きく */
.lnch-create-card.is-only {
  grid-column: 1 / -1;
  min-height: 220px;
  gap: 16px;
}
.lnch-create-card.is-only .lcc-plus { width: 72px; height: 72px; font-size: 46px; }
.lnch-create-card.is-only .lcc-label { font-size: 18px; }

/* プレーヤー起動ボタン（ヘッダー右） */
.lnch-open-player-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #2c2114;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--anim-fast);
}
.lnch-open-player-btn:hover { background: #453619; }

.lnch-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-sub);
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--anim-fast);
}
.lnch-setup-btn:hover { background: var(--bg-muted); }

/* ============================================================
   終了時刻モーダル（プレイリスト再生開始前）
   ============================================================ */
#endTimeModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#endTimeModal.hidden { display: none; }

.modal-box {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.modal-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.modal-box .modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.modal-pl-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--copper);
  background: #f5e9d0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 20px;
}
.modal-time-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.modal-time-row label {
  font-size: 13px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-time-row input[type="time"] {
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--bg-card);
}
.modal-time-row .clear-time {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  color: var(--text-sub);
}
.modal-time-row .clear-time:hover { background: var(--bg-muted); }

.modal-actions {
  display: flex;
  gap: var(--gap-sm);
  justify-content: flex-end;
}
.modal-cancel {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: none;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-sub);
}
.modal-cancel:hover { background: var(--bg-muted); }
.modal-play {
  padding: 10px 24px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--copper);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.modal-play:hover { background: var(--copper-dark); }

/* ============================================================
   セットアップ画面 — 「← 一覧に戻る」ボタン
   ============================================================ */
.su-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
  transition: background var(--anim-fast);
}
.su-back-btn:hover { background: var(--bg-muted); }

/* サーバー配信モードのカード（ローカル方式と区別する青系アクセント） */
.lnch-server-card {
  border-color: #7aa7d9;
  background: #f3f8fe;
}
.lnch-server-card:hover {
  border-color: #3d7cc9;
  box-shadow: 0 2px 12px rgba(61, 124, 201, 0.18);
}
.lnch-server-card .lnch-play-icon {
  border-color: #3d7cc9;
  color: #3d7cc9;
}
.lnch-server-card .lnch-card-play:hover .lnch-play-icon {
  background: #3d7cc9;
  color: #fff;
}

/* 終了時刻ラベル：自動セット時はボタン風チップ＋ホバーで由来（街宣場所名）ポップアップ */
.end-time-chip { position: relative; display: inline-flex; align-items: center; }
.end-time-chip.suggested {
  background: #f5e9d0;
  border: 1px solid #e2cf9f;
  color: var(--copper-dark);
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 700;
  cursor: help;
  transition: background var(--anim-fast), border-color var(--anim-fast);
}
.end-time-chip.suggested:hover { background: #f5e9d0; border-color: var(--copper); }
.end-time-pop {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 90;
  background: #2c2114;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  pointer-events: none;
}
.end-time-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 18px;
  border: 6px solid transparent;
  border-top-color: #2c2114;
}
.end-time-chip.suggested:hover .end-time-pop:not(:empty) { display: block; }

/* サーバーカード：セット選択（複数セットがあるとき） */
.lnch-server-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px dashed #c9dcf2;
  font-size: 12px;
  color: var(--text-sub);
}
.lnch-server-picker select {
  flex: 1;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #7aa7d9;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

/* サーバーセットカード：本日の既定バッジ */
.srv-default-badge {
  background: #1d9e75;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
}

/* 本日の割当（ツアーの街宣ポイントで指定されたセット）バッジ */
.srv-assigned-badge {
  background: var(--copper);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
}