/* ============================================================
   okojochords-player.css — Okojo Chords 再生専用プレイヤー（ブログ埋め込み用）
   サイト本体（site-chrome.css）の紙っぽい配色トークンに合わせ、post-body内で
   浮かないようにする。JSON未添付時の静的な案内文（.chord-embed-placeholder）と
   トーンを揃えつつ、実際に再生できる状態は枠線を実線にして区別する。
   ============================================================ */
.okojo-chords-embed.ocp-loading{
  border:2px dashed var(--mustard-deep,#875c14); border-radius:var(--r-m,22px);
  padding:.9em 1.1em; margin:1.2em 0; background:var(--mustard-soft,#f4e4bd);
  color:var(--mustard-deep,#875c14); font-weight:700;
}
.okojo-chords-embed.ocp-error{
  border:2px dashed var(--rose-deep,#a45a4f); border-radius:var(--r-m,22px);
  padding:.9em 1.1em; margin:1.2em 0; background:var(--rose-soft,#f6e0db);
  color:var(--rose-deep,#a45a4f); font-weight:700;
}

.okojo-chords-embed.ocp-ready{
  border:2px solid var(--mustard-deep,#875c14); border-radius:var(--r-m,22px);
  padding:1em 1.2em; margin:1.2em 0; background:var(--mustard-soft,#f4e4bd);
  box-shadow:3px 4px 0 var(--pop,rgba(58,36,21,.2));
  display:flex; flex-direction:column; gap:.7em;
}
.ocp-title{
  font-weight:900; color:var(--mustard-deep,#875c14); font-size:.95em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ocp-row{ display:flex; align-items:center; gap:.9em; }

.ocp-play{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--mustard-deep,#875c14); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; box-shadow:2px 3px 0 var(--pop,rgba(58,36,21,.2));
  transition:transform .15s ease, box-shadow .15s ease;
}
.ocp-play:hover{ transform:translate(-1px,-1px); box-shadow:3px 4px 0 var(--pop,rgba(58,36,21,.2)); }
.ocp-play:active{ transform:translate(0,0); box-shadow:1px 1px 0 var(--pop,rgba(58,36,21,.2)); }
.ocp-play-icon{ line-height:1; display:inline-block; transform:translateX(1px); }
.okojo-chords-embed.ocp-playing .ocp-play-icon{ transform:none; }

.ocp-time{
  flex:1 1 auto; font-family:'Courier New',monospace; font-size:.78em;
  color:var(--mustard-deep,#875c14); text-align:right;
}

/* ---- コード名レーン＋メロディレーン（この帯全体がシークバーを兼ねる） ---- */
.ocp-lanes-wrap{
  position:relative; width:100%; border-radius:var(--r-s,10px); overflow:hidden;
  background:#fff; border:2px solid var(--mustard-deep,#875c14);
  cursor:pointer; touch-action:none; user-select:none;
}
.ocp-lanes-wrap:focus-visible{ outline:2px solid var(--mustard-deep,#875c14); outline-offset:2px; }

.ocp-chordlane{
  position:relative; height:36px; border-bottom:1px solid rgba(135,92,20,.25);
}
.ocp-chord-block{
  position:absolute; top:2px; bottom:2px; border-radius:4px;
  background:var(--rcolor,#d9a53f); overflow:hidden;
  border-right:1px solid rgba(255,255,255,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 2px; box-sizing:border-box; pointer-events:none;
}
.ocp-chord-roman{
  font-size:.6em; font-weight:700; color:rgba(58,36,21,.7); line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.ocp-chord-name{
  font-size:.72em; font-weight:800; color:#3a2415; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.ocp-lane-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.75em; color:rgba(58,36,21,.4); pointer-events:none;
}

.ocp-melodylane{
  position:relative; height:44px; background:#fffdf8;
}
.ocp-note-dot{
  position:absolute; height:3px; min-width:2px; border-radius:2px;
  background:var(--mustard-deep,#875c14); opacity:.8; transform:translateY(-50%);
  pointer-events:none;
}

.ocp-playhead{
  position:absolute; top:0; bottom:0; left:0%; width:2px;
  background:#3a2415; box-shadow:0 0 0 1px rgba(255,255,255,.65);
  pointer-events:none; z-index:5;
}

@media (max-width:480px){
  .ocp-title{ white-space:normal; }
  .ocp-row{ flex-wrap:wrap; }
  .ocp-time{ font-size:.72em; }
  .ocp-chordlane{ height:32px; }
  .ocp-chord-roman{ display:none; } /* 幅が狭い時はコード名だけに絞る */
  .ocp-melodylane{ height:34px; }
}