/* ════════════════════════════════════════════════════════════
   DECK — the audio player, drawn as an instrument panel
   ════════════════════════════════════════════════════════════ */

.deck {
  --btn: 2.9rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 1.6rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--bg);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
  -webkit-user-select: none;
  user-select: none;
}

.deck:has(.deck-art) { grid-template-columns: clamp(7rem, 15vw, 11rem) minmax(0, 1fr); }
.deck:has(.deck-art) > :not(.deck-art) { grid-column: 2; }

/* ── cover ── */

.deck-art {
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--ink) 7%, transparent) 6px 7px),
    var(--surface-soft);
  border: 1px solid var(--ink);
  overflow: hidden;
}

.deck-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-expo);
}

.deck-art img[hidden] { display: none; }
.deck.is-playing .deck-art img { transform: scale(1.04); }

.deck-art-num {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
}

.deck-art-num:empty { display: none; }

/* ── what is playing ── */

.deck-head {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
}

.deck-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
}

.deck-state { color: var(--accent); font-weight: 600; }
.deck-state::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: currentColor;
  vertical-align: 0.02em;
}
.deck.is-playing .deck-state::before { animation: deck-live 1.4s ease-in-out infinite; }
.deck[data-status="error"] .deck-state { color: var(--ink-soft); }

@keyframes deck-live { 50% { opacity: 0.25; } }

.deck-sub { color: var(--ink-faint); }

.deck-title {
  grid-column: 1;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

html[lang="zh"] .deck-title { font-stretch: 100%; line-height: 1.15; }

/* on an episode page the title is already set large above the deck */
.deck-podcast .deck-title { display: none; }

/* a level meter, for the sense of sound; it does not read the audio */
.deck-meter {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2.2rem;
}

.deck-meter i {
  width: 3px;
  height: 100%;
  background: var(--accent);
  transform-origin: bottom;
  transform: scaleY(0.1);
  transition: transform 0.6s var(--ease-expo);
}

.deck.is-playing .deck-meter i { animation: deck-level 0.9s ease-in-out infinite alternate; }
.deck-meter i:nth-child(1) { animation-delay: -0.1s; }
.deck-meter i:nth-child(2) { animation-delay: -0.55s; }
.deck-meter i:nth-child(3) { animation-delay: -0.3s; }
.deck-meter i:nth-child(4) { animation-delay: -0.8s; }
.deck-meter i:nth-child(5) { animation-delay: -0.2s; }
.deck-meter i:nth-child(6) { animation-delay: -0.65s; }
.deck-meter i:nth-child(7) { animation-delay: -0.4s; }
.deck-meter i:nth-child(8) { animation-delay: -0.9s; }
.deck-meter i:nth-child(9) { animation-delay: -0.15s; }
.deck-meter i:nth-child(10) { animation-delay: -0.7s; }
.deck-meter i:nth-child(11) { animation-delay: -0.35s; }
.deck-meter i:nth-child(12) { animation-delay: -0.85s; }
.deck-meter i:nth-child(13) { animation-delay: -0.5s; }
.deck-meter i:nth-child(14) { animation-delay: -0.25s; }

@keyframes deck-level {
  0% { transform: scaleY(0.15); }
  35% { transform: scaleY(0.95); }
  60% { transform: scaleY(0.4); }
  100% { transform: scaleY(0.7); }
}

/* ── buttons ── */

.deck-row {
  align-items: center;
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.deck-buttons { display: flex; flex-shrink: 0; }

.deck-btn {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: var(--btn);
  justify-content: center;
  margin-left: -1px;
  position: relative;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  width: var(--btn);
}

.deck-btn:first-child { margin-left: 0; }
.deck-btn[hidden] { display: none; }

.deck-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.deck-btn svg .o { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }

/* the seconds sit inside the turning arrow */
.deck-btn small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 700;
  padding-top: 0.08rem;
}

.deck-back svg,
.deck-fwd svg { width: 1.5rem; height: 1.5rem; }

@media (hover: hover) {
  .deck-btn:hover { background: var(--ink); color: var(--bg); z-index: 1; }
}

.deck-btn:active { transform: translateY(1px); }
.deck-btn:focus-visible { z-index: 2; }

.deck-play {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
  width: calc(var(--btn) * 1.55);
  z-index: 1;
}

.deck-play svg { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
  .deck-play:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
}

/* loading: a bar runs along the foot of the play button */
.deck-spin {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35%;
  height: 3px;
  background: currentColor;
  opacity: 0;
}

[data-status="loading"] .deck-play .deck-spin {
  opacity: 1;
  animation: deck-run 0.9s var(--ease-expo) infinite;
}

@keyframes deck-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(290%); }
}

.deck.is-error .deck-play { background: var(--surface-soft); border-color: var(--ink); color: var(--ink-faint); }

/* ── the scrubber: a ruler you can drag ── */

.deck-scrub {
  flex: 1;
  min-width: 0;
  height: var(--btn);
  position: relative;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.deck-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.1rem;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 10%),
    var(--surface-soft);
  overflow: hidden;
  transition: height 0.3s var(--ease-expo);
}

.deck-buffer,
.deck-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.deck-buffer { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.deck-fill { background: var(--accent); }

.deck-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 1.9rem;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.3s var(--ease-expo);
  pointer-events: none;
}

.deck-scrub:hover .deck-rail,
.deck-scrub.dragging .deck-rail { height: 1.35rem; }
.deck-scrub.dragging .deck-knob,
.deck-scrub:focus-visible .deck-knob { width: 5px; height: 2.3rem; }
.deck-scrub:focus-visible .deck-rail { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.deck-tip {
  position: absolute;
  bottom: calc(100% - 0.1rem);
  left: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.4rem;
  pointer-events: none;
  transform: translate(-50%, 4px);
  opacity: 0;
  transition: opacity 0.15s, transform 0.25s var(--ease-expo);
  white-space: nowrap;
}

.deck-scrub.tipping .deck-tip { opacity: 1; transform: translate(-50%, 0); }

/* ── times and tools ── */

.deck-foot {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  margin-top: -0.4rem;
}

.deck-time { color: var(--ink); min-width: 4.5rem; }

button.deck-time {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0.3rem 0;
  text-align: right;
}

button.deck-time:hover { color: var(--accent); }

.deck-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }

.deck-tool {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.66rem;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  position: relative;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.deck-tool[hidden] { display: none; }
.deck-tool svg { width: 0.9rem; height: 0.9rem; }
.deck-tool svg .o { fill: none; stroke: currentColor; stroke-width: 2; }
.deck-tool:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.deck-rate { min-width: 3.4rem; justify-content: center; font-weight: 600; color: var(--ink); }
.deck-rate.bump { animation: deck-bump 0.4s var(--ease-expo); }
@keyframes deck-bump { from { transform: translateY(-3px); } }

.deck-restart { color: var(--accent); border-color: var(--accent); }

/* a small receipt rises from the share button */
.deck-share::after {
  content: attr(data-toast);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s, transform 0.4s var(--ease-expo);
}

.deck-share.toasted::after { opacity: 1; transform: translate(-50%, 0); }

.deck-fallback {
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding-top: 0.8rem;
  text-transform: uppercase;
}

.deck-fallback[hidden] { display: none; }

.deck-fallback a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.deck-fallback a:hover { background: var(--accent); color: var(--accent-ink); }

.deck-keys {
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  margin-top: -0.5rem;
  text-transform: uppercase;
}

.deck-keys kbd {
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
  font-family: inherit;
  padding: 0 0.3rem;
}

.deck-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── the mini bar ── */

.deck-mini {
  position: fixed;
  right: var(--gutter);
  bottom: clamp(0.9rem, 2vw, 1.4rem);
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  width: min(27rem, calc(100vw - 2 * var(--gutter)));
  height: 3.4rem;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--ease-expo), opacity 0.3s;
}

.deck-mini.on { transform: none; opacity: 1; pointer-events: auto; }

.deck-mini-line {
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  top: -1.5px;
  height: 3px;
}

.deck-mini-line i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.deck-mini .deck-play {
  --btn: 3.4rem;
  height: calc(100% + 3px);
  margin: -1.5px 0 -1.5px -1.5px;
  width: 3.6rem;
}

.deck-mini-title {
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0 0.8rem;
  text-align: left;
}

.deck-mini-title small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.deck-mini-title b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--display);
  font-size: 0.95rem;
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

html[lang="zh"] .deck-mini-title b { font-stretch: 100%; font-size: 0.88rem; font-weight: 700; line-height: 1.2; }

.deck-mini-title:hover b { color: var(--accent); }

.deck-mini-tools { display: flex; align-self: stretch; }

.deck-mini-tool {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border-strong);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  position: relative;
  width: 2.6rem;
  transition: background 0.2s, color 0.2s;
}

.deck-mini-tool svg { width: 1rem; height: 1rem; fill: currentColor; }
.deck-mini-tool svg .o { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.deck-mini-tool:has(small) svg { width: 1.35rem; height: 1.35rem; }
.deck-mini-tool small { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 0.46rem; font-weight: 700; padding-top: 0.08rem; }
.deck-mini-tool:hover { background: var(--ink); color: var(--bg); }

.deck-mini-time {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  padding-right: 0.9rem;
  white-space: nowrap;
}

/* ── the queue, opened from the float ── */

.deck-mini-title { transition: transform 0.35s var(--ease-expo); touch-action: pan-y; }
.deck-mini-tool[hidden] { display: none; }
.deck-float.queue-open .deck-mini-list { background: var(--ink); color: var(--bg); }

.deck-queue {
  position: absolute;
  right: -1.5px;
  bottom: calc(100% + 0.6rem);
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(30rem, 60dvh);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transform: translateY(10px);
  transition: clip-path 0.45s var(--ease-expo), transform 0.45s var(--ease-expo), visibility 0s 0.45s;
}

.deck-float.queue-open .deck-queue {
  visibility: visible;
  clip-path: inset(-20px -20px 0 -20px);
  transform: none;
  transition: clip-path 0.5s var(--ease-expo), transform 0.5s var(--ease-expo), visibility 0s;
}

.deck-queue-head {
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  display: flex;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.75rem 0.9rem;
  text-transform: uppercase;
}

.deck-queue-head b { color: var(--ink); font-weight: 600; }
.deck-queue-head b::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  background: var(--accent);
}
.deck-queue-head span { color: var(--ink-faint); }

.deck-queue-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.deck-queue-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1.5rem auto minmax(0, 1fr) auto;
  isolation: isolate;
  padding: 0.6rem 0.9rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.deck-queue-row:last-child { border-bottom: 0; }

.deck-queue-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s var(--ease-expo);
}

.deck-queue-row:hover::before,
.deck-queue-row:focus-visible::before { clip-path: inset(0 0 0 0); }
.deck-queue-row:hover,
.deck-queue-row:hover *,
.deck-queue-row:focus-visible,
.deck-queue-row:focus-visible * { color: var(--accent-ink) !important; }
.deck-queue-row:focus-visible { outline: none; }

.deck-queue-row.is-current { box-shadow: inset 3px 0 0 var(--accent); }
.deck-queue-row.is-out { opacity: 0.55; }

.deck-queue-num {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}

.deck-queue-num b { font-weight: 500; }
.deck-queue-bars { display: none; align-items: flex-end; gap: 2px; height: 0.8rem; }
.deck-queue-bars i { width: 3px; height: 100%; background: var(--accent); transform-origin: bottom; animation: deck-qbar 0.8s ease-in-out infinite alternate; }
.deck-queue-bars i:nth-child(2) { animation-delay: -0.35s; }
.deck-queue-bars i:nth-child(3) { animation-delay: -0.6s; }
.deck-queue-row.is-current .deck-queue-num b { display: none; }
.deck-queue-row.is-current .deck-queue-bars { display: inline-flex; }
.deck-queue-row.is-current:not(.is-playing) .deck-queue-bars i { animation-play-state: paused; }
.deck-queue-row:hover .deck-queue-bars i { background: var(--accent-ink); }
@keyframes deck-qbar { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

.deck-queue-art {
  width: 2.3rem;
  height: 2.3rem;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
}

.deck-queue-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.deck-queue-name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang="zh"] .deck-queue-name { font-stretch: 100%; font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.deck-queue-row.is-current .deck-queue-name { color: var(--accent); }

.deck-queue-sub,
.deck-queue-time {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  white-space: nowrap;
}

.deck-queue-sub { overflow: hidden; text-overflow: ellipsis; }

/* on a page that also has the switching dock, the mini player sits on top
   of it as one unit, and drops to the bottom when the dock steps aside */
html.has-sw-dock .deck-mini {
  width: min(25rem, calc(100vw - 2 * var(--gutter)));
  bottom: calc(var(--dock-gap) + var(--dock-h) - 1.5px);
  box-shadow: none;
  transition: transform 0.55s var(--ease-expo), opacity 0.3s, bottom 0.55s var(--ease-expo);
}

html.has-sw-dock.sw-dock-away .deck-mini { bottom: var(--dock-gap); }

/* ── small screens ── */

@media (max-width: 640px) {
  .deck { box-shadow: 5px 5px 0 var(--accent); gap: 1rem; }
  .deck:has(.deck-art) { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .deck:has(.deck-art) > .deck-row,
  .deck:has(.deck-art) > .deck-foot,
  .deck:has(.deck-art) > .deck-fallback { grid-column: 1 / -1; }
  .deck-art { grid-row: 1; }
  .deck-row { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .deck-buttons { justify-content: center; }
  .deck { --btn: 3.1rem; }
  .deck-foot { margin-top: -0.2rem; }
  .deck-time { min-width: 3.6rem; }
  .deck-meter { height: 1.6rem; }
  .deck-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  .deck-tool { min-height: 2.5rem; padding: 0.25rem 0.6rem; }
  .deck-keys { display: none; }

  .deck-mini {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-width: 1.5px 0 0;
    box-shadow: none;
  }

  .deck-mini .deck-play { height: 3.6rem; margin: 0; }
  .deck-mini-time { display: none; }
  .deck-mini-tool { width: 3rem; }
  .deck-queue { right: 0; width: 100vw; border-width: 1.5px 0; box-shadow: none; max-height: 58dvh; }
  .deck-queue-row { padding: 0.75rem var(--gutter); }
  html.has-sw-dock .deck-mini { width: auto; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) - 1.5px); height: 3.6rem; padding-bottom: 0; }
  html.has-sw-dock.sw-dock-away .deck-mini { bottom: 0; height: calc(3.6rem + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .deck-mini-line { left: 0; right: 0; }
  html.deck-mini-on .end-sheet ~ footer { padding-bottom: 5rem; }
}

@media (hover: none), (pointer: coarse) {
  .deck-keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deck.is-playing .deck-meter i,
  .deck.is-playing .deck-state::before,
  [data-status="loading"] .deck-play .deck-spin { animation: none; }
  .deck.is-playing .deck-meter i { transform: scaleY(0.55); }
  .deck-mini { transition: none; }
  .deck-queue, .deck-float.queue-open .deck-queue { transition: none; }
  .deck-queue-bars i { animation: none; transform: scaleY(0.6); }
}