/* ============================================================
   player.css v3 — TOMHP Music Player — Collapsible + Responsive
   ============================================================ */

/* ════ Section ════ */
#musique { background:var(--dark); position:relative; overflow:hidden; }
#musique::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(201,168,76,.07) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(201,168,76,.04) 0%,transparent 50%); pointer-events:none; }

/* ════ Tracklist collapsible ════ */
.tracklist-toggle {
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.8rem;
  border:none;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.18);
  color:var(--warm-gray);
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.tracklist-toggle:hover { color:var(--cream); background:rgba(255,255,255,.03); }
.tracklist-toggle-icon { display:flex; align-items:center; transition:transform .25s; color:var(--gold); }
.tracklist-toggle[aria-expanded="false"] .tracklist-toggle-icon { transform:rotate(-90deg); }

.tracklist-collapsible { overflow:hidden; max-height:0; transition:max-height 0.3s ease-in-out; }
.tracklist-collapsible.open { max-height:420px; }

/* ════ Layout ════ */
.player-wrap {
  display:grid; grid-template-columns:300px 1fr; gap:2.2rem; align-items:start;
  padding-top:2rem;
}

/* ════ Album sidebar ════ */
.album-sidebar { position:sticky; top:5rem; }
.album-list { display:flex; flex-direction:column; gap:.6rem; }
.album-card {
  display:flex; gap:.9rem; align-items:center; padding:.85rem .95rem;
  border:1px solid rgba(201,168,76,.1); border-radius:var(--radius-lg);
  cursor:pointer; background:rgba(255,255,255,.02);
  transition:border-color .24s,background .24s,transform .2s;
}
.album-card:hover { border-color:rgba(201,168,76,.28); background:rgba(201,168,76,.04); }
.album-card.active { border-color:var(--gold); background:rgba(201,168,76,.08); }
.album-card.active .album-card-title { color:var(--gold); }
.album-cover { width:48px; height:48px; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.album-cover img { width:100%; height:100%; object-fit:cover; }
.album-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
.album-spinning { animation:spin 8s linear infinite; }
.album-card-info { flex:1; min-width:0; }
.album-card-title { font-family:var(--font-title,serif); font-size:.92rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .24s; }
.album-card-meta { font-size:.72rem; color:var(--warm-gray); margin-top:.18rem; font-family:var(--font-body); }
.album-card-playing { display:none; align-items:center; gap:2px; flex-shrink:0; }
.album-card.active .album-card-playing { display:flex; }
.playing-bar { width:3px; border-radius:2px; background:var(--gold); animation:barBounce 1s ease-in-out infinite; }
.playing-bar:nth-child(1){height:7px;animation-delay:0s} .playing-bar:nth-child(2){height:13px;animation-delay:.2s} .playing-bar:nth-child(3){height:9px;animation-delay:.4s}

/* ════ Platform links ════ */
.platform-links { margin-top:1.4rem; }
.platform-links-label { font-family:var(--font-body); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:.72rem; }
.platform-btns { display:flex; flex-wrap:wrap; gap:.45rem; }
.platform-btn { display:inline-flex; align-items:center; gap:.42rem; padding:.42rem .88rem; border-radius:18px; font-family:var(--font-body); font-size:.76rem; font-weight:600; border:none; cursor:pointer; transition:transform .15s,filter .2s; }
.platform-btn:hover { transform:translateY(-2px); filter:brightness(1.14); }
.btn-spotify{background:#1DB954;color:#000} .btn-apple{background:#fc3c44;color:#fff} .btn-deezer{background:#EF5466;color:#fff}
.btn-youtube{background:#FF0000;color:#fff} .btn-soundcloud{background:#FF5500;color:#fff} .btn-bandcamp{background:#1da0c3;color:#fff} .btn-tidal{background:#000;color:#fff;border:1px solid rgba(255,255,255,.2)}

/* ════ Player panel ════ */
.player-panel { background:var(--card-bg, var(--dark3)); border:1px solid var(--card-border, rgba(201,168,76,.12)); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 18px 70px rgba(0,0,0,.22); }

/* Now Playing */
.now-playing { display:flex; align-items:center; gap:1.4rem; padding:1.4rem 1.8rem; background:linear-gradient(135deg,rgba(201,168,76,.09),rgba(0,0,0,.3)); border-bottom:1px solid rgba(201,168,76,.09); }
.np-cover { width:76px; height:76px; border-radius:var(--radius); overflow:hidden; flex-shrink:0; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.np-cover img { width:100%; height:100%; object-fit:cover; }
.np-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1c1812,#2a2218); font-size:2.1rem; }
.np-info { flex:1; min-width:0; }
.np-album-name { font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); opacity:.82; margin-bottom:.22rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-track-title { font-family:var(--font-title,serif); font-size:1.28rem; font-weight:700; margin-bottom:.22rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-composer { font-family:var(--font-body); font-size:.8rem; color:var(--cream-dim); font-style:italic; }
.np-ext-link { display:flex; align-items:center; gap:.38rem; font-family:var(--font-body); font-size:.76rem; color:var(--gold); opacity:.72; transition:opacity .22s; margin-top:.45rem; }
.np-ext-link:hover { opacity:1; }

/* Controls */
.player-controls { display:flex; flex-direction:column; gap:.9rem; padding:1.35rem 1.8rem; border-bottom:1px solid rgba(255,255,255,.05); }
.ctrl-buttons { display:flex; align-items:center; justify-content:center; gap:1.4rem; }
.ctrl-btn { color:var(--warm-gray); background:none; border:none; cursor:pointer; transition:color .2s,transform .15s; display:flex; align-items:center; justify-content:center; border-radius:50%; padding:.38rem; }
.ctrl-btn:hover { color:var(--cream); transform:scale(1.1); }
.ctrl-btn.active { color:var(--gold); }
.ctrl-btn-play { width:50px; height:50px; background:var(--gold); color:var(--dark)!important; border-radius:50%; padding:0; box-shadow:0 4px 20px rgba(201,168,76,.35); transition:background .22s,transform .15s,box-shadow .22s; }
.ctrl-btn-play:hover { background:var(--gold-light); transform:scale(1.07); box-shadow:0 6px 28px rgba(201,168,76,.5); }
.ctrl-btn-loading { animation:spin 1s linear infinite; pointer-events:none; opacity:.7; }

/* Progress */
.progress-wrap { display:flex; align-items:center; gap:.75rem; }
.time-label { font-family:var(--font-body); font-size:.72rem; color:var(--warm-gray); min-width:34px; font-variant-numeric:tabular-nums; }
.time-label.right { text-align:right; }
.progress-bar-outer { flex:1; height:4px; background:rgba(255,255,255,.16); border-radius:2px; cursor:pointer; position:relative; }
.progress-bar-outer.disabled { cursor:not-allowed; opacity:.55; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:2px; width:0%; transition:width .5s linear; position:relative; }
.progress-bar-fill::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:10px; height:10px; background:var(--gold); border-radius:50%; box-shadow:0 0 6px rgba(201,168,76,.6); opacity:0; transition:opacity .2s; }
.progress-bar-outer:hover .progress-bar-fill::after { opacity:1; }

/* Waveform */
.waveform { display:flex; align-items:center; gap:2px; height:22px; overflow:hidden; }
.waveform-bar { width:3px; border-radius:2px; background:rgba(201,168,76,.28); flex-shrink:0; transition:background .28s; }
.waveform-bar.active { background:rgba(201,168,76,.8); }
.waveform-bar.passed { background:rgba(201,168,76,.48); }

/* Volume */
.volume-wrap { display:flex; align-items:center; gap:.75rem; }
.volume-icon { color:var(--warm-gray); padding:0; }
.volume-slider { flex:1; max-width:110px; -webkit-appearance:none; appearance:none; height:4px; background:rgba(255,255,255,.1); border-radius:2px; outline:none; cursor:pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--gold); cursor:pointer; }

/* Tracklist */
.tracklist { padding:.4rem 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.25) transparent; max-height:420px; }
.track-row { display:flex; align-items:center; gap:.9rem; padding:.7rem 1.8rem; cursor:pointer; transition:background .2s; position:relative; }
.track-row:hover { background:rgba(255,255,255,.04); }
.track-row.active { background:rgba(201,168,76,.07); }
.track-row.active .track-num { display:none; }
.track-row.active .track-playing-icon { display:flex; }
.track-num { font-family:var(--font-display,sans-serif); font-size:.95rem; color:var(--warm-gray); width:22px; text-align:right; flex-shrink:0; }
.track-playing-icon { display:none; width:22px; align-items:center; justify-content:flex-end; flex-shrink:0; }
.track-playing-icon svg { color:var(--gold); }
.track-info { flex:1; min-width:0; }
.track-title { font-family:var(--font-body); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.track-row.active .track-title { color:var(--gold); font-weight:600; }
.track-composer { font-family:var(--font-body); font-size:.73rem; font-style:italic; color:var(--warm-gray); margin-top:.1rem; }
.track-type-badge { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--warm-gray); border:1px solid rgba(255,255,255,.1); border-radius:3px; padding:.1rem .33rem; flex-shrink:0; font-family:var(--font-body); }
.track-type-badge.ext { color:var(--gold); border-color:rgba(201,168,76,.2); }
.track-duration { font-family:var(--font-body); font-size:.78rem; color:var(--warm-gray); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }

/* Embed */
.embed-wrap { padding:0 1.8rem 1.4rem; border-top:1px solid rgba(255,255,255,.05); }
.embed-wrap iframe { width:100%; border:none; border-radius:var(--radius); display:block; }
#np-yt { width:100%; }
#np-yt iframe { width:100% !important; height:200px !important; border:none; border-radius:var(--radius); display:block; }
.embed-label { font-family:var(--font-body); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:.55rem; margin-top:1rem; }
.embed-hidden { display:none; }
.player-notice { display:flex; align-items:center; gap:.6rem; padding:.65rem 1.5rem; background:rgba(245,158,11,.05); border-top:1px solid rgba(245,158,11,.12); font-family:var(--font-body); font-size:.76rem; color:rgba(245,158,11,.75); }
.no-music { text-align:center; padding:4rem 2rem; color:var(--warm-gray); }

/* ════ RESPONSIVE ════ */
@media (max-width:1024px) {
  .player-wrap { grid-template-columns:260px 1fr; gap:1.8rem; }
}
@media (max-width:768px) {
  .player-wrap { grid-template-columns:1fr; }
  .album-sidebar { position:static; }
  .album-list { 
    flex-direction:row; overflow-x:auto; padding-bottom:.5rem; 
    scrollbar-width:none; 
    -webkit-overflow-scrolling: touch; /* Momentum scrolling */
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;
    will-change: transform;
  }
  .album-list::-webkit-scrollbar { display:none; }
  .album-card { 
    min-width:185px; 
    scroll-snap-align: center;
    flex-shrink: 0;
  }
  .platform-btns { justify-content:center; }
  .now-playing { padding:1.1rem; gap:1rem; }
  .np-cover { width:60px; height:60px; }
  .np-track-title { font-size:1.05rem; }
  .player-controls { padding:1.1rem; gap:.8rem; }
  .track-row { padding:.65rem 1.1rem; }
  .embed-wrap { padding:0 1.1rem 1.1rem; }
  .tracklist { max-height:280px; }
  .tracklist-collapsible.open { max-height:300px; }
}
@media (max-width:480px) {
  .ctrl-buttons { gap:1rem; }
  .ctrl-btn-play { width:44px; height:44px; }
  .volume-slider { max-width:80px; }
  .album-card { min-width:160px; }
}

.hp2{
  width:min(860px, 100%);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.95rem, 3vw, 1.5rem);
  justify-items:center;
}

.hero-player-v2{
  --hp2-art-size: clamp(120px, 18vw, 220px);
  --hp2-cover-size: clamp(64px, 10vw, 160px);
}

@media (min-width:900px){
  .hero-player-v2 .hp2{
    height:100%;
    grid-template-rows:1fr auto;
    align-content:stretch;
  }
  .hero-player-v2 .hp2-art{ align-self:center; }
  .hero-player-v2 .hp2-card{ align-self:end; }
}
.hp2-art{
  position:relative;
  width:var(--hp2-art-size, min(340px, 72vw));
  height:var(--hp2-art-size, min(340px, 72vw));
  margin:0 auto;
  display:grid;
  place-items:center;
}
.hp2-art::before,
.hp2-art::after{
  content:'';
  position:absolute;
  inset:-10%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.55;
  pointer-events:none;
}
.hp2-art::after{
  inset:-18%;
  border-color:rgba(var(--hp-tint-rgb, 201,168,76), .18);
  opacity:.45;
}
.hp2-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  opacity:.96;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
  overflow:visible;
}
.hp2-ring-aura{
  fill:none;
  stroke:rgba(255,255,255,.10);
  stroke-width:1.5;
  opacity:.9;
}
.hp2-ring-aura-1{
  stroke:url(#hp2Grad1);
  stroke-width:2.2;
  opacity:.85;
}
.hp2-ring-aura-2{
  stroke:url(#hp2Grad2);
  stroke-width:1.7;
  opacity:.55;
}
.hp2-ring-track{
  fill:none;
  stroke:rgba(255,255,255,.14);
  stroke-width:6;
}
.hp2-ring-fill{
  fill:none;
  stroke:rgba(var(--hp-tint-rgb, 201,168,76), .92);
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:327;
  stroke-dashoffset:calc(327px - (327px * var(--hp2-pct, 0)));
  transition:stroke-dashoffset .35s linear, stroke .25s ease;
}
.hp2-cover{
  width:var(--hp2-cover-size, min(280px, 60vw));
  height:var(--hp2-cover-size, min(280px, 60vw));
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.hp2-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}
.hp2-cover-ph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1.1rem, 3vw, 1.75rem);
  background:linear-gradient(135deg, rgba(201,168,76,.18), rgba(0,0,0,.28));
}
.hp2.is-playing .hp2-cover img{
  animation:spin 10s linear infinite;
}

.hp2-card{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 110px rgba(0,0,0,.42);
  padding:clamp(1rem, 2.6vw, 1.35rem);
  width:100%;
  position:relative;
}
.hp2-meta{ min-width:0; }
.hp2-album{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(240,232,213,.82);
  opacity:.9;
}
.hp2-title{
  margin-top:.45rem;
  font-family:var(--font-title, serif);
  font-size:clamp(1.05rem, 2.4vw, 1.55rem);
  font-weight:700;
  color:rgba(255,255,255,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hp2-composer{
  margin-top:.22rem;
  font-family:var(--font-body);
  font-size:.85rem;
  color:rgba(240,232,213,.72);
  font-style:italic;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hp2-progress{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-top:1rem;
}
.hp2-time{
  font-family:var(--font-body);
  font-size:.75rem;
  color:rgba(240,232,213,.74);
  min-width:42px;
  font-variant-numeric:tabular-nums;
}
.hp2-time-right{ text-align:right; }
.hp2-progressbar{
  flex:1;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
  cursor:pointer;
}
.hp2-progressbar.disabled{
  cursor:not-allowed;
  opacity:.6;
}
.hp2-progressfill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--hp-tint-rgb, 201,168,76), .98), rgba(255,255,255,.55));
  transition:width .5s linear;
}
.hp2-controls{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:1.05rem;
  flex-wrap:wrap;
}
.hp2-ctrl{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.20);
  color:rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s, border-color .25s, background .25s, color .25s;
}
.hp2-ctrl:hover{
  transform:translateY(-2px);
  border-color:rgba(201,168,76,.3);
  color:#fff;
  background:rgba(0,0,0,.26);
}
.hp2-ctrl:active{ transform:translateY(0) scale(.98); }
.hp2-ctrl:focus-visible{ outline:2px solid rgba(201,168,76,.85); outline-offset:3px; }
.hp2-ctrl-primary{
  background:linear-gradient(135deg, rgba(201,168,76,.96), rgba(201,168,76,.62));
  border-color:rgba(201,168,76,.55);
  color:rgba(10,8,4,.95);
}
.hp2-ctrl-primary:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(201,168,76,.75));
  border-color:rgba(255,255,255,.22);
  color:rgba(10,8,4,.95);
}
.hp2-openlist{
  margin-left:auto;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(240,232,213,.9);
  border-bottom:1px solid rgba(201,168,76,.32);
  padding:.15rem 0;
  opacity:.86;
  transition:opacity .2s, border-color .2s, color .2s;
}
.hp2-openlist:hover{
  opacity:1;
  color:#fff;
  border-color:rgba(201,168,76,.75);
}
.hp2-close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s, border-color .25s, background .25s, color .25s;
}
.hp2-close:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  background:rgba(0,0,0,.22);
  color:#fff;
}
.hp2-close:active{ transform:translateY(0) scale(.98); }
.hp2-close:focus-visible{ outline:2px solid rgba(201,168,76,.85); outline-offset:3px; }

@media (max-width:720px){
  .hp2-openlist{ margin-left:0; }
  .hp2-controls{ justify-content:center; }
  .hp2-close{
    position:absolute;
    top:.75rem;
    right:.75rem;
    transform:none;
    width:38px;
    height:38px;
    z-index:2;
  }
  .hp2-controls{ padding-right:44px; }
  .hero-player-v2{ --hp2-art-size: clamp(120px, 44vw, 200px); --hp2-cover-size: clamp(64px, 30vw, 140px); }
}

@media (min-width:1100px){
  .hp2{
    width:min(1600px, 100%);
    gap:1.2rem;
  }
  .hero-player-v2{ --hp2-art-size: clamp(160px, 18vw, 260px); --hp2-cover-size: clamp(84px, 10vw, 180px); }
  .hp2-card{
    width:100%;
    padding:.78rem 1rem;
    border-radius:16px;
    display:grid;
    grid-template-columns:minmax(280px, 1.1fr) minmax(320px, 1fr) auto;
    gap:1rem;
    align-items:center;
  }
  .hp2-title{ font-size:1.08rem; }
  .hp2-composer{ font-size:.78rem; }
  .hp2-progress{ margin-top:0; }
  .hp2-controls{
    margin-top:0;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:.6rem;
  }
  .hp2-openlist{ margin-left:.4rem; }
  .hp2-time{ min-width:46px; }
  .hp2-ctrl{ width:40px; height:40px; }
  .hp2-close{ width:38px; height:38px; }
}

@media (prefers-reduced-motion: reduce){
  .hp2-ring-fill,
  .hp2-progressfill,
  .hp2-ctrl,
  .hp2-openlist,
  .hp2-close{
    transition:none;
  }
  .hp2.is-playing .hp2-cover img{ animation:none; }
}

.hp2-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity calc(var(--hp-trans-ms, 320) * 1ms) ease;
}
.hp2-modal[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.hp2-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity calc(var(--hp-trans-ms, 320) * 1ms) ease;
}
.hp2-modal[aria-hidden="false"] .hp2-modal-overlay{ opacity:1; }
.hp2-modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-46%) scale(.985);
  opacity:0;
  width:min(720px, calc(100vw - 2rem));
  max-height:min(720px, calc(100vh - 2rem));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 140px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform calc(var(--hp-trans-ms, 320) * 1ms) ease, opacity calc(var(--hp-trans-ms, 320) * 1ms) ease;
}
.hp2-modal[aria-hidden="false"] .hp2-modal-panel{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}
.hp2-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hp2-modal-title{
  font-family:var(--font-body);
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(240,232,213,.88);
}
.hp2-modal-close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s, background .2s, border-color .2s, color .2s;
}
.hp2-modal-close:hover{
  transform:translateY(-2px);
  background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.hp2-modal-close:active{ transform:translateY(0) scale(.98); }
.hp2-modal-close:focus-visible{ outline:2px solid rgba(201,168,76,.85); outline-offset:3px; }
.hp2-modal-controls{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hp2-modal-label{
  font-family:var(--font-body);
  font-size:.72rem;
  color:rgba(240,232,213,.74);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hp2-modal-select{
  flex:1;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:.65rem .75rem;
  color:rgba(255,255,255,.92);
  font-family:var(--font-body);
  outline:none;
}
.hp2-modal-select:focus-visible{ outline:2px solid rgba(201,168,76,.85); outline-offset:2px; }
.hp2-modal-list{
  padding:.25rem 0;
  overflow:auto;
}
.hp2-modal-list .track-row{
  padding:.8rem 1.1rem;
}

@media (max-width:640px){
  .hp2-modal-panel{
    left:0;
    top:0;
    transform:translateY(10px);
    width:100vw;
    height:100vh;
    max-height:none;
    border-radius:0;
  }
  .hp2-modal[aria-hidden="false"] .hp2-modal-panel{
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .hp2-modal,
  .hp2-modal-overlay,
  .hp2-modal-panel,
  .hp2-modal-close{ transition:none; }
}