/* === PHASES ROW CLEAN VERSION === */
#phaseList {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;      /* 横スクロール有効 */
  overflow-y: hidden;
  padding: 16px 0;
  scroll-behavior: smooth;
}

/* 各カード */
#phaseList > .phaseItem {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(12, 12, 20, 0.9);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

/* カード画像 */
#phaseList .phaseItem > img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
  background: rgba(255,255,255,0.06);
}

/* メタ情報部（タイトル＋ステータス） */
#phaseList .phaseItem .meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(10,10,12,0.88);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 14px 16px 12px;
  color: #fff;
  min-height: 100px;
}

/* タイトル：常に1行で切り捨て */
#phaseList .phaseItem .meta .title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

/* 下段3要素ラッパー */
#phaseList .phaseItem .meta .status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 左側：180s + CLEARED */
#phaseList .phaseItem .meta .status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* 右側：Play ボタンを右端に固定 */
#phaseList .phaseItem .meta .status-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* ピル・ボタン共通デザイン */
#phaseList .phaseItem .meta .status-left > *,
#phaseList .phaseItem .meta .status-right > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
}

/* Playだけ少し目立たせる */
#phaseList .phaseItem .meta .status-right .play {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
#phaseList .phaseItem .meta .status-right .play:hover {
  background: rgba(255,255,255,0.3);
  color: #000;
}

/* 中身のないピル／ボタンは表示しない（空文字・全角/半角空白のみも非表示） */
#phaseList .phaseItem .meta .status-left > *:empty,
#phaseList .phaseItem .meta .status-right > *:empty {
  display: none !important;
}
#phaseList .phaseItem .meta .status-left > * ,
#phaseList .phaseItem .meta .status-right > * {
  /* 文字が空白だけのときも非表示にする（CSSだけの簡易判定） */
  /* 空白のみのケースは :empty では拾えないことがあるためガード */
  unicode-bidi: plaintext;
}
/* クリア状態リセットボタン */
.reset-clear-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .02s;
}
.reset-clear-btn:hover{ background: rgba(255,255,255,.22); }
.reset-clear-btn:active{ transform: translateY(1px); }
/* 1行ラッパーの堅牢化（折り返し・段落落ち防止） */
#phaseList .phaseItem .meta .status-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#phaseList .phaseItem .meta .status-left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
#phaseList .phaseItem .meta .status-right{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  flex-shrink:0 !important;
}

/* ピル／ボタンは粒サイズ固定 */
#phaseList .phaseItem .meta .status-left > *,
#phaseList .phaseItem .meta .status-right > *{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:28px !important;
  line-height:28px !important;
  padding:0 12px !important;
  border-radius:14px !important;
  white-space:nowrap !important;
}

/* 中身が空のピルは非表示（余計な小箱を消す） */
#phaseList .phaseItem .meta .status-left > *:empty,
#phaseList .phaseItem .meta .status-right > *:empty{
  display:none !important;
}