.gpp-player-root *,
.gpp-player-root *::before,
.gpp-player-root *::after {
    box-sizing: border-box;
}

.gpp-player-root { max-width: 900px; margin: 1.5em auto; }
.gpp-player {
  position: relative; border-radius: 0; border: 1px solid #ccc; background:#fff; padding:0.5rem 0.75rem 0.75rem; max-width: 650px; margin: 0 auto;}

.gpp-header { display:flex; padding:0.25rem 0.75rem 0.75rem; gap:0.75rem; align-items:center; }
.gpp-cover-img { width:250px; height:auto; border-radius:4px; object-fit:cover; }
.gpp-header-text .gpp-track-title { font-weight:600; font-size:1.1rem; }

.gpp-bar {
  background: #111;
  color: #fff;
  padding: 0.5rem 1rem 0.3rem;
  margin-bottom: 0.75rem;
}

.gpp-bar-main {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.gpp-bar-actions { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:flex-start; padding-bottom:0.6rem; }

.gpp-icon-btn {
  border:none;
  background:none;
  color:#fff;
  cursor:pointer;
  min-width:44px;
  min-height:32px;
  padding:0.2rem 0.6rem;
  border-radius:4px;
  font-size:0.9rem;
}
.gpp-text-btn {
  border:1px solid rgba(255,255,255,0.7);
  background:none;
  color:#fff;
  cursor:pointer;
  min-width:44px;
  min-height:32px;
  padding:0.2rem 0.6rem;
  border-radius:4px;
  font-size:0.9rem;
}
.gpp-icon-btn:hover, .gpp-text-btn:hover { background:rgba(255,255,255,0.12); }

.gpp-time { font-size:0.8rem; }

.gpp-seek-wrap { position:relative; width:100%; height:8px; }
#gpp-seek { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.gpp-seek-track { position:absolute; inset:0; background:#444; border-radius:0; pointer-events:none; }
.gpp-seek-played { position:absolute; inset:0; width:0%; background:#42a5f5; border-radius:0; pointer-events:none; }

.gpp-volume { display:flex; align-items:center; gap:0.35rem; }
#gpp-volume {
  width: 80px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, #fff 100%, #666 100%);
}
#gpp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
}
#gpp-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
}

.gpp-track-list { border-top:1px solid #ddd; }
.gpp-track-row {
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:nowrap;
  width:100%;
  padding:0.4rem 0.75rem;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-size:0.9rem;
  border-bottom:1px solid #eee;
}
.gpp-track-row.is-current { font-weight:600; background:#f5f5f5; }
.gpp-track-num { width:2.5em; }
.gpp-track-duration {
  white-space:nowrap; text-align:right; font-feature-settings:'tnum' 1; }

.gpp-track-more { display:block; width:100%; border:none; background:#fafafa; padding:0.35rem 0.75rem; text-align:center; cursor:pointer; font-size:0.85rem; }


/* --- ここからスマホ用レイアウト（置き換え） --- */
@media (max-width: 600px) {
  .gpp-header {
    flex-direction: column;
    padding:0.25rem 0.5rem 0.5rem;
  }

  /* 1段目: 再生ボタン + 音量
     2段目: 時間 + シークバー */
  .gpp-bar-main {
    display:grid;
    grid-template-columns:auto 1fr auto; /* [play][空き/シーク関連][volume] */
    grid-template-rows:auto auto;
    row-gap:0.35rem;
    align-items:center;
    gap:0.5rem;
  }

  /* 左の時間表示を2段目左へ */
  .gpp-bar-main .gpp-time:first-of-type {
    grid-row:2;
    grid-column:1;
  }

  /* シークバーを2段目中央〜右へ */
  .gpp-bar-main .gpp-seek-wrap {
    grid-row:2;
    grid-column:2 / span 2;
  }

  /* 右側の時間表示だけ隠す */
  .gpp-bar-main .gpp-time:last-of-type {
    display:none;
  }

  /* 音量バーを1段目右端に配置 */
  .gpp-bar-main .gpp-volume {
    display:flex;           /* スマホでも表示する */
    grid-row:1;
    grid-column:3;
    justify-self:end;
    width:min(140px, 40vw); /* スマホで邪魔にならない程度の長さに調整 */
  }

  .gpp-bar-actions {
    justify-content:space-between;
  }
}

/* ④ スマホ時：音量ボタン・バーを右寄せ、2行レイアウト */
@media (max-width: 600px) {
  .gpp-bar-main {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    margin-bottom: 1.2rem;
  }
  /* 1行目: play / seekwrap / mute+volume右寄せ */
  #gpp-play-btn    { grid-row: 1; grid-column: 1; }
  #gpp-mute-btn    { grid-row: 1; grid-column: 2; justify-self: end; }
  #gpp-volume      { grid-row: 1; grid-column: 3; justify-self: end; width: min(100px, 30vw); }
  /* 2行目: current / (空) / duration+volume右寄せ */
  #gpp-current     { grid-row: 2; grid-column: 1; }
  .gpp-seek-wrap   { grid-row: 2; grid-column: 2; }
  #gpp-duration    { grid-row: 2; grid-column: 3; justify-self: start; }
}

/* --- ここまでスマホ用レイアウト（置き換え） --- */

.gpp-text-btn.gpp-btn-active {
  background: rgba(255,255,255,0.24);
  border-color: #fff;
  font-weight: 600;
}

.gpp-track-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }

.gpp-track-row { color: #111111; }
.gpp-track-name { color: inherit; }

/* アクティブトラック */
.gpp-track-active {
  background: #f0f7ff;
  font-weight: 600;
}

/* さらに開く / 閉じる ボタン */
.gpp-expand-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid #eee;
}
.gpp-expand-btn:hover {
  background: #f5f5f5;
}

#gpp-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
#gpp-play-btn svg {
  display: block;
  flex-shrink: 0;
}