/* 背面canvas */
#darknessCanvas, #vizCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#vizCanvas{ z-index: 1; }
#darknessCanvas{ z-index: 0; }
#contentWrapper{ position: relative; z-index: 2; }

/* トラックリスト：枠だけ */
.tracklist{
  position: fixed;
  right: 12px;
  top: 18vh;
  width: min(360px, 78vw);
  max-height: 58vh;
  overflow: hidden;

  border: 1px solid rgba(163,2,0,0.30);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  z-index: 10;

  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;

  transition: opacity 220ms ease, transform 220ms ease;
}

/* 消える状態 */
.tracklist.is-hidden{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none !important;
}

.tl-head{
    font-family: serif;
      font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.12em;

  color: #a30200;
  text-shadow:
    0 0 8px rgba(163,2,0,0.35),
    0 0 18px rgba(163,2,0,0.15);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tl-list{
  padding: 10px 10px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(58vh - 86px);
  overflow: auto;
}

.track{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);

  cursor: pointer;
  user-select: none;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.track:hover{
  border-color: rgba(163,2,0,0.40);
}

.track .name{
  font-family: serif;
  color: rgba(255,255,255,0.84);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.track .tag{
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.08em;
  display: none;

}

.track.is-active{
  border-color: rgba(163,2,0,0.70);
  box-shadow: 0 0 22px rgba(163,2,0,0.10);
}
.track.is-active .name{
  color: rgba(255,255,255,0.95);
}

.tl-hint{
  padding: 8px 12px 12px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.08em;
  display: none;

}

/* スマホ：少し下へ */
@media (max-width: 860px){
  .tracklist{
    right: 10px;
    top: 22vh;
    width: min(360px, 86vw);
  }
}

/* ============================
   ADD: tracklist center
   （今の right/top を上書きして中央へ）
============================ */
.tracklist{
  left: 50%;
  top: 50%;
  right: auto;                 /* 既存の right を無効化 */
  transform: translate(-50%, -50%); /* 中央固定 */
}

/* 消える状態も中央基準のままにする（既存のtranslateYを上書き） */
.tracklist.is-hidden{
  transform: translate(-50%, -50%) scale(0.985);
}

/* スマホでも中央固定（既存@mediaのright/top上書きを無効化） */
@media (max-width: 860px){
  .tracklist{
    left: 50%;
    right: auto;
    width: min(360px, 86vw);
    transform: translate(-50%, -50%);
  }
}

/* ============================
   Image: fade + flash-invert (img only)
============================ */
#contentWrapper img{
  transition: opacity 420ms ease, filter 120ms ease;
  will-change: opacity, filter;
}

/* 再生中は薄く */
body.is-playing #contentWrapper img{
  opacity: 0.02;          /* 好みで 0〜0.4 */
}

/* フラッシュ瞬間だけネガ反転（imgのみ） */
#contentWrapper img.is-flash-invert{
  filter: invert(1) hue-rotate(180deg);
}

/* ============================
   Footer (sync with tracklist)
============================ */
/* Footer: tracklistと同期して消す */


.ui-footer.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}



/* DAZED赤を少しだけ効かせる（任意） */
.ui-footer a{
  color: #a30200;
  text-decoration: none;
}

/* 再生中：ロゴを薄く */
.is-dimmed-img{
  opacity: 0.18;
  transition: opacity 420ms ease;
}





#contentWrapper img{
  transition: opacity 260ms ease, filter 260ms ease;
  opacity: 1;
}

#contentWrapper img.is-dimmed-img{
  opacity: 0.18;              /* 薄さ */
  filter: contrast(1.1);
}


body.is-flash-invert-dom{
  filter: invert(1) hue-rotate(180deg);
}