.page-header { position: relative; }
#auth-slot {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 100000;
}
.auth-user {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #cfcfcf;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auth-btn {
font-family: inherit;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.55);
padding: 7px 14px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.auth-btn:hover {
background: #fff;
color: #000;
border-color: #fff;
}
/* ============================================================
   Frosted-glass login overlay
   Layer 1: .auth-modal-overlay — cover background image, centered,
   overflow-hidden so the blur can't spill past the edges.
   Layer 2: ::before — backdrop blur + translucent dark tint.
   Layer 3: .auth-modal — solid card lifted above the frosted backdrop.
   ============================================================ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
  background: url('/assets/visualizer-bg.png') center/cover no-repeat;
}
/* Layer 2 — the frosting: blur what's behind + dark tint over it. */
.auth-modal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(6, 6, 8, 0.7);
  pointer-events: none;
}
.auth-modal-overlay[hidden] { display: none; }

/* Layer 3 — the solid card */
.auth-modal {
  position: relative;
  z-index: 2;
  width: 380px;
  max-width: 92vw;
  background: #f7f8fa;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  animation: auth-pop-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* 3px brand accent bar across the top of the card. */
.auth-modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #c00000;
}
@keyframes auth-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #9a9aa2;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.auth-close:hover { color: #333; }
.auth-title {
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14151a;
  text-align: center;
  margin-bottom: 4px;
}
.auth-error {
  font-size: 12px;
  line-height: 1.4;
  color: #b00020;
  background: rgba(176, 0, 32, 0.07);
  border: 1px solid rgba(176, 0, 32, 0.28);
  padding: 8px 10px;
  border-radius: 4px;
}
.auth-input {
  font-family: inherit;
  font-size: 14px;
  color: #14151a;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 11px 12px;
  outline: none;
}
.auth-input:focus { border-color: #c00000; box-shadow: 0 0 0 2px rgba(192, 0, 0, 0.12); }
.auth-input::placeholder { color: #9a9aa2; letter-spacing: 0.03em; }
.auth-primary {
  width: 100%;
  padding: 12px;
  margin-top: 2px;
  border-radius: 5px;
  background: #c00000;
  border: 1px solid #c00000;
  color: #fff;
  font-weight: 600;
}
.auth-primary:hover { background: #a00000; border-color: #a00000; }
.auth-switch {
  font-size: 12px;
  color: #6a6a72;
  text-align: center;
}
.auth-link {
  background: none;
  border: none;
  color: #c00000;
  text-decoration: underline;
  cursor: pointer;
font-size: 12px;
padding: 0;
}
.auth-divider {
display: flex;
align-items: center;
gap: 10px;
color: #666;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 4px 0 2px;
}
.auth-divider::before, .auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.15);
}
.auth-oauth { width: 100%; padding: 10px; }
.auth-google:hover { background: #fff; color: #000; }
.auth-discord { border-color: rgba(114, 137, 218, 0.8); }
.auth-discord:hover { background: #5865f2; color: #fff; border-color: #5865f2; }
.player-progress { max-width: 100%; }
.player-end-group {
display: inline-flex;
align-items: center;
gap: 16px;
}
.player-end-group > .volume-control {
display: flex !important;
align-items: center;
height: 100%;
padding: 0;
}
.track-stats {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: inherit;
white-space: nowrap;
}
.track-stats[hidden] { display: none; }
.stat-plays {
display: inline-flex;
align-items: center;
gap: 5px;
color: #b8b8b8;
font-size: 12px;
letter-spacing: 0.03em;
}
.stat-ico { font-size: 10px; opacity: 0.85; }
.stat-num { font-variant-numeric: tabular-nums; }
.like-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
line-height: 1;
padding: 2px 4px;
color: #b8b8b8;
}
.like-btn .like-fire {
font-size: 22px;
filter: grayscale(1) brightness(0.7);
opacity: 0.65;
transition: filter 0.15s ease, opacity 0.15s ease;
}
.like-btn .stat-num { font-size: 12px; }
.like-btn:hover .like-fire { opacity: 0.95; }
.like-btn[hidden] { display: none; }
.like-btn.is-liked .like-fire {
filter: none;
opacity: 1;
text-shadow: 0 0 8px rgba(255, 120, 0, 0.8), 0 0 16px rgba(255, 60, 0, 0.5);
}
.like-btn.like-pop .like-fire { animation: like-pop 0.35s ease-out; }
@keyframes like-pop {
0%   { transform: scale(1); }
40%  { transform: scale(1.5); }
100% { transform: scale(1); }
}
.comment-btn {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: none; cursor: pointer;
color: #b8b8b8; line-height: 1; padding: 2px 4px;
}
.comment-btn .cmt-ico { font-size: 15px; opacity: 0.85; }
.comment-btn .stat-num { font-size: 12px; }
/* ============================================================
 * PROFILE AVATARS
 * ============================================================ */
/* Header avatar button */
.auth-avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-right: 0; background: none; border: none; cursor: pointer;
  vertical-align: middle;
}
.auth-avatar {
  display: block; width: 44px; height: 44px; border-radius: 50%;
  background-color: #2a2a2a; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.25);
}
.auth-avatar.has-image { border-color: rgba(255,255,255,0.5); }

/* Logged-in header: avatar + name sit tight together, menu drops below. */
.auth-userwrap { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.auth-userwrap .auth-user {
  background: none; border: none; cursor: pointer; padding: 2px 2px;
  font-family: inherit; font-size: 18px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #cfcfcf; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-userwrap .auth-user:hover { color: #fff; }
.auth-menu {
  position: fixed; min-width: 180px;
  background: #111; border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 30px rgba(0,0,0,0.7); z-index: 100001; padding: 6px 0;
}
.auth-menu[hidden] { display: none; }
.auth-menu-head {
  padding: 6px 14px 8px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7a7a7a;
  border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 9px 14px; font-family: inherit; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #d8d8d8;
}
.auth-menu-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.auth-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.auth-menu-danger { color: #e0554f; }
.auth-menu-danger:hover { background: rgba(192,0,0,0.18); color: #ff6b63; }

/* Profile modal avatar row */
.profile-avatar-row {
  display: flex; align-items: center; gap: 18px; margin: 8px 0 18px;
}
.profile-avatar-preview {
  display: block; width: 88px; height: 88px; border-radius: 50%;
  background-color: #1a1a1a; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.3); flex-shrink: 0;
}
.profile-avatar-preview.has-image { border-color: rgba(255,255,255,0.6); }
.profile-avatar-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.profile-username { color: #b00000; font-weight: 600; font-size: 15px; }

/* Comment avatar (left of username) */
.cmt-line-top { display: flex; align-items: center; gap: 8px; }
.cmt-avatar {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  background-color: #2a2a2a; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0;
}
.cmt-avatar.has-image { border-color: rgba(255,255,255,0.4); }

/* ============================================================
 * MOBILE TRACK-ROW STATS (plays + likes)
 * ============================================================ */
/* Hidden by default; only shown in the mobile track section. */
.track-stats-mobile { display: none; }
.track-stat { display: inline-flex; align-items: center; gap: 3px; }
.track-stat-ico { font-size: 10px; line-height: 1; }
.track-stat-plays { color: #8a8680; }
.track-stat-likes { color: #8a8680; }
.track-stat-plays:empty { display: none; }

@media (max-width: 900px) {
  /* Show plays + likes under each track's title/artist. */
  .track-stats-mobile {
    display: flex; align-items: center; gap: 14px;
    margin-top: 3px; font-size: 11px;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  }
  .track-stat-likes .track-stat-ico { filter: grayscale(1) brightness(0.85); }

  /* Fire button shows ONLY the flame on mobile — no number beneath it. */
  .like-btn .stat-num { display: none; }
}

/* ============================================================
 * COMMENT TICKER (SoundCloud-style) — lives inline in the player bar
 * ============================================================ */

/* Defensive: the old dock/compose markup is gone, but null out any
   stragglers so nothing renders if a cached page still has them. */
.cmt-dock, .cmt-bar-compose { display: none !important; }

/* Ticker group lives inside the player bar's .player-meta column, on a
   compact line beneath the title/progress. plays + ticker + a compose
   button (the compose form itself is a popup, so it doesn't consume
   horizontal space in the bar). */
.cmt-bar-group{
  display:flex; align-items:center; gap:10px;
  min-width:0; width:100%; margin-top:5px;
}
/* The fixed desktop bar is only 64px tall; adding the ticker line makes
   three stacked rows in .player-meta. Tighten the title margin and the
   progress bar's vertical padding so the stack fits inside 64px without
   changing the bar's height (many layout offsets depend on 64px). */
.desktop-player-bar-host .player-title{ margin-bottom:5px; }
.desktop-player-bar-host .player-progress{ padding:6px 0; }
.desktop-player-bar-host .cmt-bar-group{ margin-top:6px; }

/* Plays count */
.cmt-bar-plays{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  color:#9a9a9a; font-size:18px; font-variant-numeric:tabular-nums;
}
.cmt-bar-plays-ico{ color:#c00000; font-size:16px; line-height:1; }
.cmt-bar-plays-num:empty{ display:none; }

/* Ticker readout */
.cmt-ticker{
  flex:1 1 auto; min-width:0; overflow:hidden;
  height:26px; display:flex; align-items:center;
  border-left:1px solid rgba(255,255,255,0.10);
  border-right:1px solid rgba(255,255,255,0.10);
  padding:0 10px;
}
.cmt-ticker-line{
  width:100%; min-width:0; white-space:nowrap; overflow:visible;
  display:flex; align-items:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* When comment(s) surface they shrink-wrap so the block can be pinned
   above the comment's spot on the progress bar (JS sets translateX).
   Empty state fills the line normally. */
.cmt-ticker-line.is-synced{ display:inline-flex; gap:14px; width:auto; animation:cmtSurface .3s ease-out; }
.cmt-ticker-line.is-synced .cmt-tk{ display:inline-flex; width:auto; }
/* A cluster of comments at the same spot: cap each body so several sit
   comfortably side by side. */
.cmt-ticker-line.is-multi .cmt-tk-body{ max-width:150px; }
.cmt-ticker-line.is-empty{ transform:none !important; overflow:hidden; }
@keyframes cmtSurface{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; } }
.cmt-ticker-empty{ color:#5a5a5a; font-style:italic; font-size:12px; overflow:hidden; text-overflow:ellipsis; }

.cmt-tk{ display:flex; align-items:center; gap:8px; min-width:0; width:100%; }
.cmt-tk-av{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:#2a2a2a center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.2);
}
.cmt-tk-at{
  flex:0 0 auto; color:#c00000; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cmt-tk-user{ flex:0 0 auto; color:#e8e8e8; font-size:12px; font-weight:600; }
.cmt-tk-body{
  flex:1 1 auto; min-width:0; color:#cfcfcf; font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmt-tk-when{ flex:0 0 auto; color:#6a6a6a; font-size:10px; }
.cmt-ticker-line.is-idle .cmt-tk-at{ color:#8a8a8a; }

/* The compose box occupies the bottom-right of the desktop bar, where
   the redundant "View on SoundCloud" CTA sat (the same link is already
   present on the left as the profile link), so hide that CTA on desktop
   to give the compose room aligned under the merch panel. */
.desktop-player-bar-host > .soundcloud-cta{ display:none; }
/* Reserve the right 240px (compose box zone, under merch) so the bar's
   own controls (time, volume, like) stop before the compose input and
   don't overlap it. */
.desktop-player-bar-host{ padding-right:264px !important; }

/* Compose trigger box — fixed bottom-right under merch. Clicking opens
   the compose panel. */
.cmt-compose{
  position:fixed; right:0; bottom:27px; z-index:7;
  width:240px; box-sizing:border-box; padding:0 12px;
  display:flex; align-items:center;
}
.cmt-compose-input{
  flex:1 1 auto; min-width:0; cursor:pointer;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:4px; color:#eee; font-size:12px; padding:6px 8px; outline:none;
}
.cmt-compose-input::placeholder{ color:#666; }
.cmt-compose-input:focus{ border-color:rgba(192,0,0,0.6); background:rgba(255,255,255,0.09); }

/* ---- Compose PANEL ---- */
.cmt-panel{
  position:fixed; z-index:99999; width:320px; max-width:86vw;
  background:#111; border:1px solid rgba(255,255,255,0.16);
  border-radius:10px; padding:12px; box-shadow:0 10px 34px rgba(0,0,0,0.8);
}
.cmt-panel[hidden]{ display:none; }
.cmt-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cmt-panel-title{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#cfcfcf; }
.cmt-panel-close{ background:none; border:none; color:#888; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.cmt-panel-close:hover{ color:#ff5a5a; }
.cmt-panel-input{
  width:100%; box-sizing:border-box; resize:none;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:6px; color:#eee; font-size:13px; line-height:1.4; padding:8px; outline:none;
  font-family:inherit;
}
.cmt-panel-input::placeholder{ color:#666; }
.cmt-panel-input:focus{ border-color:rgba(192,0,0,0.55); background:rgba(255,255,255,0.09); }

.cmt-panel-place{ display:flex; align-items:center; gap:8px; margin:10px 0 4px; }
.cmt-panel-place-label{ flex:0 0 auto; color:#8a8a8a; font-size:11px; letter-spacing:0.04em; }
.cmt-panel-time{
  flex:0 0 auto; width:52px; text-align:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(192,0,0,0.4);
  border-radius:4px; color:#e8e8e8; font-size:12px; font-variant-numeric:tabular-nums;
  padding:4px 4px; outline:none;
}
.cmt-panel-time:focus{ border-color:rgba(192,0,0,0.7); }
.cmt-panel-track{
  flex:1 1 auto; position:relative; height:22px; cursor:pointer;
  display:flex; align-items:center;
}
.cmt-panel-track::before{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px; background:rgba(255,255,255,0.14);
}
.cmt-panel-track-fill{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px; background:#c00000; width:0;
}
.cmt-panel-track-handle{
  position:absolute; top:50%; left:0; width:12px; height:12px; margin-left:-6px;
  transform:translateY(-50%); border-radius:50%; background:#fff;
  border:2px solid #c00000; box-shadow:0 0 4px rgba(0,0,0,0.6);
}
.cmt-panel-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.cmt-panel-now{
  background:none; border:1px solid rgba(255,255,255,0.16); border-radius:4px;
  color:#aaa; font-size:11px; letter-spacing:0.03em; padding:5px 8px; cursor:pointer;
}
.cmt-panel-now:hover{ color:#fff; border-color:rgba(255,255,255,0.3); }
.cmt-panel-send{
  background:rgba(192,0,0,0.35); border:1px solid rgba(192,0,0,0.6); border-radius:4px;
  color:#fff; font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  padding:6px 16px; cursor:pointer;
}
.cmt-panel-send:hover{ background:rgba(192,0,0,0.55); }
.cmt-panel-send:disabled{ opacity:0.5; cursor:default; }

.cmt-panel-mine{ margin-top:10px; }
.cmt-panel-mine:empty{ display:none; }
.cmt-panel-mine-label{ color:#6a6a6a; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:4px; }
.cmt-mine-row{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.cmt-mine-at{ flex:0 0 auto; color:#c00000; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.cmt-mine-body{ flex:1 1 auto; min-width:0; color:#cfcfcf; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmt-mine-del{ flex:0 0 auto; background:none; border:none; color:#777; font-size:14px; line-height:1; cursor:pointer; padding:0 2px; }
.cmt-mine-del:hover{ color:#ff5a5a; }

/* Scrubber markers */
.cmt-markers{
  position:absolute; left:0; top:0; right:0; bottom:0;
  pointer-events:none; z-index:4;
}
.cmt-marker{
  position:absolute; top:50%; width:9px; height:9px; margin-left:-4.5px;
  transform:translateY(-50%); border-radius:50%;
  background:#c00000; border:1.5px solid #fff;
  box-shadow:0 0 4px rgba(0,0,0,0.6); cursor:pointer; pointer-events:auto;
  transition:transform .12s ease;
}
.cmt-marker:hover{ transform:translateY(-50%) scale(1.35); }

/* Popover shown on marker hover/tap */
.cmt-popover{
  position:fixed; z-index:99999; width:240px; max-width:74vw;
  background:#111; border:1px solid rgba(255,255,255,0.16);
  border-radius:0; padding:10px 12px; box-shadow:0 8px 26px rgba(0,0,0,0.7);
  pointer-events:auto;
}
.cmt-pop-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cmt-pop-av{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:#2a2a2a center/cover no-repeat; border:1px solid rgba(255,255,255,0.25);
}
.cmt-pop-user{ color:#e8e8e8; font-size:13px; font-weight:600; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmt-pop-at{ color:#c00000; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.cmt-pop-del{
  flex:0 0 auto; background:none; border:none; color:#777; cursor:pointer;
  font-size:15px; line-height:1; padding:0 2px;
}
.cmt-pop-del:hover{ color:#ff5a5a; }
.cmt-pop-body{ color:#dcdcdc; font-size:13px; line-height:1.45; word-wrap:break-word; }
.cmt-pop-when{ color:#6a6a6a; font-size:10px; margin-top:6px; }

@media (max-width: 900px){
  /* On mobile the desktop player bar isn't the comment home; keep the
     ticker and compose out of the way. */
  .cmt-bar-group{ display:none; }
  .cmt-compose{ display:none !important; }
  .cmt-panel{ display:none !important; }
}

/* ============================================================
 * SMOKE-IN-VISUALIZER COMMENTS (toggle mode)
 * A comment blooms from a puff of smoke, the smoke dissipates to
 * reveal the text, which holds then fades. Clouds avoid the logos
 * (placement handled in JS). A dark scrim keeps text legible.
 * ============================================================ */
.cmt-smoke-layer{
  position:fixed; z-index:7;
  pointer-events:none; overflow:hidden;
}
.cmt-smoke{
  position:absolute; max-width:min(52%, 440px);
  opacity:0;
}
.cmt-smoke.is-live{ animation:cmtSmokeLife 11s ease-out forwards; }
@keyframes cmtSmokeLife{
  0%   { opacity:0; }
  4%   { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0; }
}

/* --- the smoke puff: several soft blobs that scale up and dissolve --- */
.cmt-smoke-puff{
  position:absolute; left:50%; top:50%;
  width:260px; height:170px; transform:translate(-50%,-50%);
  pointer-events:none;
}
.cmt-smoke-puff span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(210,210,214,0.85), rgba(150,150,156,0.45) 45%, rgba(120,120,126,0) 72%);
  filter:blur(7px);
  opacity:0;
}
.cmt-smoke-puff span:nth-child(1){ width:120px; height:120px; left:10%;  top:6%;  }
.cmt-smoke-puff span:nth-child(2){ width:150px; height:150px; left:40%;  top:-6%; }
.cmt-smoke-puff span:nth-child(3){ width:110px; height:110px; left:62%;  top:18%; }
.cmt-smoke-puff span:nth-child(4){ width:130px; height:130px; left:26%;  top:26%; }
.cmt-smoke.is-live .cmt-smoke-puff span{ animation:cmtPuff 1.9s ease-out forwards; }
.cmt-smoke.is-live .cmt-smoke-puff span:nth-child(2){ animation-delay:.08s; }
.cmt-smoke.is-live .cmt-smoke-puff span:nth-child(3){ animation-delay:.15s; }
.cmt-smoke.is-live .cmt-smoke-puff span:nth-child(4){ animation-delay:.05s; }
@keyframes cmtPuff{
  0%   { opacity:0;    transform:scale(0.35) translateY(6px); }
  25%  { opacity:0.9;  }
  60%  { opacity:0.65; transform:scale(1.15) translateY(-8px); }
  100% { opacity:0;    transform:scale(1.7)  translateY(-22px); }
}

/* --- the revealed comment text (fades in as smoke clears, then out) --- */
.cmt-smoke-text{
  position:relative; z-index:2;
  padding:14px 18px; border-radius:2px;
  background:rgba(8,8,10,0.66);
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
  backdrop-filter:blur(2px);
  opacity:0;
}
.cmt-smoke.is-live .cmt-smoke-text{ animation:cmtSmokeText 11s ease-out forwards; }
@keyframes cmtSmokeText{
  0%   { opacity:0; transform:translateY(6px) scale(0.98); filter:blur(0); }
  10%  { opacity:0; filter:blur(0); }
  17%  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  88%  { opacity:1; filter:blur(0); }          /* stays crisp the whole hold */
  100% { opacity:0; transform:translateY(-6px); filter:blur(4px); } /* blur only as it fades */
}
.cmt-smoke-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.cmt-smoke-av{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  background:#2a2a2a center/cover no-repeat; border:1px solid rgba(255,255,255,0.25);
}
.cmt-smoke-user{ color:#fff; font-size:15px; font-weight:600; letter-spacing:0.02em; }
.cmt-smoke-at{ color:#e0403a; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto; }
.cmt-smoke-body{ color:#f0f0f0; font-size:17px; line-height:1.45; word-wrap:break-word; }

/* --- the toggle button in the player bar --- */
.cmt-mode-toggle{
  flex:0 0 auto; width:30px; height:30px; margin-right:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:4px; color:#9a9a9a; cursor:pointer; line-height:1;
}
.cmt-mode-toggle:hover{ color:#ddd; border-color:rgba(255,255,255,0.28); }
.cmt-mode-toggle.is-on{
  color:#fff; background:rgba(192,0,0,0.32); border-color:rgba(192,0,0,0.6);
}
@media (max-width: 900px){
  .cmt-smoke-layer{ display:none !important; }
  .cmt-mode-toggle{ display:none !important; }
}

/* Profile modal: field labels, bio, success message */
.profile-field-label {
  display: block; margin: 12px 0 5px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a8a8a;
}
.profile-bio { resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.4; }
.auth-ok {
  margin: 4px 0 2px; padding: 8px 10px; font-size: 12px;
  color: #7fd18a; background: rgba(60,160,80,0.12);
  border: 1px solid rgba(90,190,110,0.4);
}
.auth-ok[hidden] { display: none; }

/* Transient toast message (liked tracks feedback, etc.) */
.auth-toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(10px);
  background: #111; color: #eee; border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 18px; font-size: 13px; letter-spacing: 0.03em; z-index: 100002;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 26px rgba(0,0,0,0.7);
}
.auth-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hide the old GATEKEEPER wordmark (deathspin-wordmark.png) in the header */
.site-title-logo { display: none !important; }
/* Block the page-wide VHS scanline overlay from showing inside the
   header. The header is solid black; this opaque layer sits above the
   scanlines (z-index 50) but below the header's own content, hiding the
   drifting scanline animation in the header area only. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 51;                 /* above .vhs-scanlines (z-index 50) */
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 52; }  /* keep header content above the mask */

/* Also hide the native label-panel logo that renders in the header center,
   so it doesn't duplicate our injected logos. */
.label-panel-logo { display: none !important; }

/* DEATHSPIN logo — in the header, top strip above the artist nav.
   Clickable link back to the listen (home) page. */
.ds-header-wordmark {
  position: fixed;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  height: 104px;
  width: auto;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
  z-index: 200;
  display: block;
}
.ds-header-wordmark img { height: 100%; width: auto; object-fit: contain; display: block; }
/* Nav positioning (bottom of header) is handled in the bundle CSS at the
   required specificity; see .label-panel-artists there. */
/* The label-panel-center only held the label logo (now moved to the
   tracklist). Collapse it so it doesn't reserve vertical space. */
.label-panel-center { display: none !important; }
@media (max-width: 900px) {
  .ds-header-wordmark {
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    height: 34px;
  }
}

/* Gatekeeper label logo — a cap in the tracklist row, just to the LEFT
   of the merch ad (which is right:0, width:240px). Solid black
   background; the horizontally-scrolling tracks pass BEHIND it. Matches
   the merch/cap vertical bounds (fixed, bottom:88px, tall as the SC
   section). Injected on <body>, so fixed-positioned. */
.ds-tracklist-label {
  position: fixed;
  right: 240px;                /* immediately left of the 240px merch ad */
  left: auto;
  bottom: 88px;
  width: 200px;
  height: var(--sc-section-height, 280px);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 6;                  /* above the tracks and caps, clickable */
  pointer-events: auto;
  cursor: pointer;
}
.ds-tracklist-label img {
  display: block;
  max-width: 82%;
  max-height: 66%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .ds-tracklist-label { display: none; }  /* hidden on mobile */
}

/* Hide the "NOW PLAYING" label in the player bar */
.now-playing-label { display: none !important; }

/* ============================================================
   Energy-reactive white-noise static (real element injected into
   main.visualizer by auth.js). Simple + continuous:
     - The louder it gets, the MORE static (opacity scales with energy).
     - The louder it gets, the FASTER/more the static shakes; on slow,
       quiet parts the static drifts slowly.
   No blackout, no tint — just the static over the background image.
   ============================================================ */
.energy-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  /* More static the louder it gets. */
  opacity: calc(var(--audio-energy, 0) * 0.92);
  /* Shake speed scales with energy: the bundle sets --noise-shift-dur
     (short when loud → fast jitter, long when quiet → slow drift). */
  animation: energy-noise-shift var(--noise-shift-dur, 0.5s) steps(6) infinite;
}

@keyframes energy-noise-shift {
  0%   { background-position: 0 0; }
  25%  { background-position: -80px 40px; }
  50%  { background-position: 120px -60px; }
  75%  { background-position: -40px 100px; }
  100% { background-position: 0 0; }
}

/* The blackout layer (if still injected) is fully disabled. */
.energy-blackout { display: none !important; }

/* At rest (audio stopped) the logos are fully white — no inversion. */
html.audio-at-rest main.visualizer .visualizer-artist-logo,
html.audio-at-rest main.visualizer #visualizer-artist-logo,
html.audio-at-rest main.visualizer .visualizer-artist-collab-img {
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55)) invert(0) !important;
}