/* LEDトラック プレイヤー — 再生中 操作パネル（Phase 4）
   ・コントローラ側ウィンドウいっぱいの「ショートカット早見表」
   ・キーキャップを主役にし、クリックでも操作可能（フォールバック）
   ・clamp() でウィンドウサイズに自動追従（自由にリサイズ可）
*/

/* ============================================================
   操作パネル本体 — ブラウザ全面のショートカット早見表
   ・コントローラ側ウィンドウいっぱいに表示
   ・物理キーボードのキーキャップを主役に（おじさんスタッフが
     「一時停止＝Space」「小音＝V」と一目で分かる早見表）
   ・最悪マウスクリックでも操作できるフォールバック
   ・ウィンドウサイズは clamp() で自動スケール（自由にリサイズ可）
   ============================================================ */
#floatPanel {
  position: fixed;
  inset: 0;
  z-index: 40;

  background: var(--bg-page, #efe4cc);

  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vh, 32px);
  padding: clamp(14px, 3.5vh, 40px) clamp(16px, 4vw, 64px) clamp(12px, 3vh, 32px);

  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: auto;
}
#floatPanel.fade-out {
  opacity: 0;
  pointer-events: none;
}
#floatPanel.hidden {
  display: none;
}

/* ===== ステータス行（タイトル・現在の項目・音量状態） ===== */
.fp-status {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  flex: 0 0 auto;
}
.fp-status-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(15px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bronze-text, #7a5c22);
}
.fp-status-title small {
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  color: #5f4a26;
  letter-spacing: 0;
}
.fp-status .fp-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-size: clamp(12px, 1.4vw, 17px);
  color: #3d2f1c;
}
.fp-status .fp-badge {
  background: #f1e7cf;
  border: 1px solid var(--border, #d8c7a4);
  color: #4a3a22;
  border-radius: 999px;
  padding: clamp(3px,.6vh,7px) clamp(10px,1.2vw,18px);
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 700;
  white-space: nowrap;
}
.fp-status .fp-badge.muted  { background: rgba(228,0,127,.45); color: #fff; }
.fp-status .fp-badge.lowvol { background: rgba(240,181,58,.3); color: #854f0b; }

/* ============================================================
   コントロールグリッド — 残り高さいっぱいに広げる（3段）
   1段目: 前へ / 一時停止 / 次へ
   2段目: 即時停止 / 終わりで停止
   3段目: ループ / ミュート / 小音
   ============================================================ */
.fp-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 2vh, 22px);
  min-height: 0;
}
.fp-row {
  display: grid;
  gap: clamp(10px, 1.6vw, 24px);
  min-height: 0;
}
.fp-row-3 { grid-template-columns: repeat(3, 1fr); }
.fp-row-2 { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   ボタン共通 — キーキャップを主役にした大型タイル
   ============================================================ */
.fp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vh, 12px);
  padding: clamp(8px, 1.5vh, 20px);
  border-radius: clamp(12px, 1.6vw, 22px);
  border: 1px solid var(--deck-border, #2c2114);
  background: var(--deck-bg, linear-gradient(#71592f, #4b3a1e));
  color: #f3e7cd;
  box-shadow: var(--deck-shadow, inset 0 1px 0 rgba(255,222,160,.35), 0 3px 0 #2c2114, 0 4px 7px rgba(0,0,0,.3));
  cursor: pointer;
  font: inherit;
  min-height: 0;
  transition: background 0.1s ease, transform 0.08s ease, box-shadow 0.1s ease, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.fp-btn:hover  { background: linear-gradient(#80663a, #564428); }
.fp-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,222,160,.35), 0 0 0 var(--deck-border, #2c2114); }

/* キーキャップ（早見表の主役） */
.fp-btn .fp-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 800;
  font-size: clamp(18px, 3vw, 44px);
  line-height: 1;
  min-width: clamp(44px, 6vw, 96px);
  padding: clamp(6px,1.2vh,14px) clamp(10px,1.4vw,20px);
  color: #241b10;
  background: linear-gradient(#faf4e6, #e2d5b4);
  border: 1px solid rgba(58,45,24,.5);
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 clamp(3px,.6vh,6px) 0 rgba(0,0,0,.45), inset 0 1px 0 #fff8e8;
  text-align: center;
}
.fp-btn .fp-ic  { font-size: clamp(20px, 2.6vw, 40px); line-height: 1; }
.fp-btn .fp-lb  {
  font-size: clamp(12px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 再生ボタン（大・銅） */
.fp-btn.play-btn {
  background: linear-gradient(135deg, var(--copper), var(--copper-dark));
  border-color: var(--copper-deep);
  box-shadow: 0 4px 20px rgba(201,111,59,.5);
}
.fp-btn.play-btn:hover  { background: linear-gradient(135deg, #d87e48, var(--copper)); }
.fp-btn.play-btn:active { box-shadow: 0 1px 6px rgba(201,111,59,.35); }
.fp-btn.play-btn .fp-ic { font-size: clamp(28px, 4vw, 64px); }
.fp-btn.play-btn .fp-lb { font-size: clamp(14px, 1.8vw, 28px); }

/* 即時停止ボタン（赤・記号は白でしっかり見せる） */
.fp-btn.stop-btn {
  background: linear-gradient(#a04434, #7c2f22);
  border-color: #4e1c12;
}
.fp-btn.stop-btn:hover { background: linear-gradient(#b04c3a, #8a3527); }
.fp-btn.stop-btn .fp-ic-stop {
  color: #fff;
  font-size: clamp(16px, 2vw, 30px);
}

/* ============================================================
   トグルボタン（終わりで停止・ループ・ミュート・小音）
   状態は「光るトグルスイッチ」で表現（ボタン全体は黄色くしない）
   ============================================================ */
.fp-btn.fp-tgl.on {
  background: var(--deck-bg, linear-gradient(#71592f, #4b3a1e));
  border-color: rgba(240,181,58,.6);
  color: #f3e7cd;
  box-shadow: none;
}
.fp-btn.fp-tgl.on:hover { background: linear-gradient(#80663a, #564428); }

/* スイッチを早見表サイズへ拡大（既存 .switch を流用・knob位置は track 幅基準で算出） */
.fp-tgl .switch {
  --kb: clamp(16px, 1.8vw, 24px);
  font-size: clamp(12px, 1.2vw, 16px);
  gap: clamp(6px, .8vw, 10px);
  margin-top: clamp(2px, .6vh, 6px);
}
.fp-tgl .switch .track {
  width: clamp(40px, 4vw, 58px);
  height: calc(var(--kb) + 6px);
  border-radius: 999px;
}
.fp-tgl .switch .knob {
  width: var(--kb);
  height: var(--kb);
  top: 3px;
  left: 3px;
}
.fp-tgl.on .switch .knob { left: calc(100% - var(--kb) - 3px); }

/* ============================================================
   フッター（追加キーヒント・編成画面へ戻る）
   ============================================================ */

/* ===== 音量ミキサー（右側の縦フェーダー柱・編成画面とmixL/mixR状態を共有） =====
   ベースの .fader/.fv/.flb は index.html のインラインstyle定義。ここは
   ダーク背景向けの上書き（#floatPanel で詳細度を上げて後勝ちにする） */
.fp-main {
  flex: 1 1 auto;
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  min-height: 0;
}
.fp-main .fp-grid { flex: 1 1 auto; }
.fp-mixer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  padding: clamp(10px, 2vh, 18px) clamp(12px, 1.6vw, 26px);
  border: 1px solid var(--border, #d8c7a4);
  border-radius: 16px;
  background: var(--bg-card, #f8f1e2);
}
.fp-mixer-title {
  font-size: clamp(12px, 1.4vw, 17px);
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--bronze-text, #7a5c22);
  white-space: nowrap;
}
.fp-faders { display: flex; gap: clamp(12px, 1.8vw, 24px); flex: 1 1 auto; min-height: 0; }
.fp-faders .fader { height: 100%; }
#floatPanel .fader input[type=range] {
  flex: 1 1 auto;
  height: auto;
  min-height: 110px;
  width: clamp(34px, 3vw, 46px);
}
#floatPanel .fp-faders .fader.master {
  border-left: 1px solid var(--border, #d8c7a4);
  padding-left: clamp(12px, 1.8vw, 24px);
}
#floatPanel .fader .fv  { font-size: clamp(11px, 1.3vw, 15px); }

/* ワンタッチ小音/ミュート（ミキサー柱の最上部/最下部・高さは通常ボタンの半分） */
.fp-mix-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(4px, .9vh, 10px);
  border-radius: 10px;
  border: 1px solid var(--deck-border, #2c2114);
  background: var(--deck-bg, linear-gradient(#71592f, #4b3a1e));
  color: #f3e7cd;
  font: inherit;
  font-weight: 800;
  font-size: clamp(12px, 1.3vw, 16px);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--deck-shadow, inset 0 1px 0 rgba(255,222,160,.35), 0 3px 0 #2c2114, 0 4px 7px rgba(0,0,0,.3));
  transition: background 0.1s ease, transform 0.08s ease, box-shadow 0.1s ease, border-color 0.1s;
}
.fp-mix-btn:hover  { background: linear-gradient(#80663a, #564428); }
.fp-mix-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,222,160,.35), 0 0 0 var(--deck-border, #2c2114); }
.fp-mix-btn.on {
  border-color: rgba(240,181,58,.75);
  background: linear-gradient(#8a6d2a, #5f4a1c);
}
.fp-mix-btn kbd {
  background: rgba(250,244,230,.92);
  border: 1px solid rgba(58,45,24,.5);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .85em;
  color: #241b10;
}

/* フェーダー領域＋作動中に被さる幕（小音=上から/ミュート=下から ふわっと降りる） */
.fp-faders-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.fp-shade {
  position: absolute;
  left: -6px;
  right: -6px;
  height: 0;
  overflow: hidden;
  z-index: 2;
  background: rgba(36,27,16,.9);
  color: #f0b53a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  transition: height .5s cubic-bezier(.22,1,.36,1);
}
.fp-shade-top { top: -4px;    border-radius: 0 0 12px 12px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.fp-shade-btm { bottom: -4px; border-radius: 12px 12px 0 0; box-shadow: 0 -3px 8px rgba(0,0,0,.35); }
.fp-shade.show { height: 26%; }
#floatPanel .fader input[type=range]:disabled { cursor: default; opacity: .55; }

#floatPanel .fader .flb { font-size: clamp(11px, 1.2vw, 14px); color: #4a3a22; }

.fp-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.fp-foot-hints {
  font-size: clamp(11px, 1.2vw, 15px);
  color: #4a3a22;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* フッター中央：再生中ファイル名＋残り時間（timeSync で毎秒更新） */
.fp-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.fp-now-name {
  font-size: clamp(11px, 1.2vw, 15px);
  color: #4a3a22;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-now-time {
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #33291a);
  padding: 1px 10px;
  border-radius: 8px;
}
/* 「終わりで停止」中：残り時間＝停止までの時間 → 太字＋黄色背景＋点滅で目立たせる */
.fp-now-time.armed {
  font-weight: 900;
  color: #241b10;
  background: var(--yellow);
  box-shadow: 0 0 0 2px #8a5f10;
  animation: fpArmedBlink 1s step-end infinite;
}
@keyframes fpArmedBlink {
  50% { background: #241b10; color: var(--yellow); box-shadow: 0 0 0 2px #241b10; }
}
.fp-foot kbd,
.fp-foot-hints kbd {
  background: rgba(250,244,230,.92);
  border: 1px solid rgba(58,45,24,.5);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  color: #241b10;
}
.fp-setup-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #f8f1e2);
  border: 1px solid #b7a377;
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  color: #4a3a22;
  padding: clamp(6px,1vh,10px) clamp(12px,1.4vw,20px);
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}
.fp-setup-link:hover { color: var(--text, #33291a); background: #f1e5c9; }

/* 横長で低いウィンドウでは縦詰めを抑える（早見表の可読性優先） */
@media (max-height: 420px) {
  #floatPanel { gap: 8px; padding: 10px clamp(14px,3vw,40px); }
  .fp-btn .fp-key { font-size: clamp(16px, 4.5vh, 30px); }
}

/* ============================================================
   セットアップ画面の再生コントロールデッキ改善
   （既存 .deck のタッチ対応化）
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* タッチデバイスでボタンを大きく */
  .deck-btn { min-height: 56px; font-size: 13px; }
  .deck-btn .ic { font-size: 26px; }
  .deck-btn .lb { font-size: 12px; }
  .deck-btn kbd { display: none; }   /* タッチでは kbd 表示不要 */
  .cell-tgl { min-height: 48px; }
}

/* ============================================================
   再生中のキーヒント（フローティングパネルが消えた後も右下に残す）
   ============================================================ */
#playHint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 38;
  font-size: 11px;
  color: rgba(255,255,255,.25);
  pointer-events: none;
  transition: opacity 0.5s;
  text-align: right;
  line-height: 1.7;
}
#playHint.hidden { opacity: 0; }

/* フッター中央の2段目：残り時間＋次項目を横並び */
.fp-now-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-now-next {
  font-size: clamp(11px, 1.2vw, 15px);
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* 締めトグルチップ（ヘッダー行）。ON=赤系点灯 / OFF=消灯 */
.fp-closing-chip {
  font: inherit;
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 700;
  color: #fff;
  background: rgba(220,60,60,.35);
  border: 1px solid rgba(220,60,60,.7);
  border-radius: 999px;
  padding: clamp(3px,.6vh,7px) clamp(10px,1.2vw,18px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.fp-closing-chip:hover { background: rgba(220,60,60,.5); }
.fp-closing-chip.off {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.55);
}
.fp-closing-chip kbd {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  padding: 0 5px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85em;
}