/*
 * Album art cover. The frame holds a design's stage, the picture that brings
 * the art back, and the cover itself. Every length is in cqw of the frame, so
 * the cover scales with the player.
 */

.dsp-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dsp-frame > .dsp-stage {
  border-radius: 0;
  transform-origin: 50% 50%;
}

.dsp-frame *,
.dsp-frame *::before,
.dsp-frame *::after {
  box-sizing: border-box;
}

/* ---- the cover -------------------------------------------------------- */

.dsp-cover {
  /* Material of the controls. Each design sets its own further down. */
  --cv-face: linear-gradient(160deg, #fafaf9, #d6d3d1);
  --cv-ring: #292524;
  --cv-rim: rgba(255, 255, 255, 0.45);
  --cv-glyph: #1c1917;
  --cv-halo: rgba(255, 255, 255, 0.85);
  --cv-focus: #ffd58a;
  --cv-radius: 50%;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.dsp-cover-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(12, 9, 7, 0.5), rgba(8, 6, 5, 0.82));
  opacity: 0;
  will-change: opacity;
}

.dsp-cover-fly {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  cursor: pointer;
  will-change: transform, opacity;
}

.dsp-cover-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1c1917;
}

.dsp-cover-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* A sheet of light over the art. Each design adds the marks of its own object. */
.dsp-cover-dress {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.26) 100%);
  box-shadow: inset 0 0 0 max(1px, 0.14cqw) rgba(255, 255, 255, 0.14);
}

.dsp-cover[data-state="closed"] .dsp-cover-fly,
.dsp-cover[data-state="peek"] .dsp-cover-fly {
  pointer-events: auto;
}

.dsp-cover[data-state="open"] .dsp-cover-fly {
  visibility: hidden;
}

/* The art casts a shadow on the scene only while it travels. */
.dsp-cover[data-state="opening"] .dsp-cover-fly,
.dsp-cover[data-state="closing"] .dsp-cover-fly {
  filter: drop-shadow(1.4cqw 2cqw 2.6cqw rgba(0, 0, 0, 0.55));
}

/* In a scene the art lies on the ground, so it casts a shadow at rest too, and the veil dims the whole band. */
.dsp-scene .dsp-cover-veil {
  inset: -30cqw -150cqw;
}

.dsp-scene .dsp-cover[data-state="closed"] .dsp-cover-fly,
.dsp-scene .dsp-cover[data-state="peek"] .dsp-cover-fly {
  filter: drop-shadow(0.5cqw 0.9cqw 1.4cqw rgba(0, 0, 0, 0.5));
}

.dsp-scene .dsp-cover-art {
  border-radius: 0.5cqw;
}

/* ---- controls on the cover -------------------------------------------- */

.dsp-cover-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--cv-radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease-out, visibility 0s linear 0.22s, transform 0.22s ease-out;
}

.dsp-cover-btn:focus {
  outline: none;
}

.dsp-cover-btn:focus-visible {
  outline: max(2px, 0.6cqw) solid var(--cv-focus);
  outline-offset: max(3px, 0.9cqw);
}

.dsp-cover-cap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--cv-face);
  box-shadow:
    0 0 0 max(1.5px, 0.42cqw) var(--cv-ring),
    0 0 0 max(2px, 0.62cqw) var(--cv-rim),
    0.5cqw 1.5cqw 3.2cqw rgba(0, 0, 0, 0.55),
    0.2cqw 0.45cqw 0.8cqw rgba(0, 0, 0, 0.5),
    inset 0 max(1px, 0.2cqw) 0 rgba(255, 255, 255, 0.55),
    inset 0 max(-1px, -0.3cqw) 0.6cqw rgba(0, 0, 0, 0.28);
  transition: transform 90ms ease-out;
}

.dsp-cover-cap svg {
  display: block;
  width: 46%;
  height: 46%;
  fill: var(--cv-glyph);
  filter: drop-shadow(0 max(0.5px, 0.12cqw) 0 rgba(255, 255, 255, 0.35));
}

.dsp-cover-btn:active .dsp-cover-cap {
  transform: translateY(0.25cqw) scale(0.97);
}

/* Play and pause share the lower right corner, out of the way of the art.
   The whole art is the tap target; this control is the sign that says so. */
.dsp-cover-play,
.dsp-cover-pause {
  right: max(10px, 3.6cqw);
  bottom: max(10px, 3.6cqw);
  width: max(36px, 10cqw);
  height: max(36px, 10cqw);
  transform: translateY(1.2cqw);
}

.dsp-cover-play .dsp-cover-cap svg {
  width: 44%;
  height: 44%;
  margin-left: 5%;
}

/* A soft pool of shade, so the control reads on bright art. */
.dsp-cover-play::before {
  content: "";
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0));
  pointer-events: none;
}

.dsp-cover-halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: max(1.5px, 0.4cqw) solid var(--cv-halo);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: dsp-cover-ring 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

@keyframes dsp-cover-ring {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  70%,
  100% {
    transform: scale(1.46);
    opacity: 0;
  }
}

/* The control that puts the art away has the lower left corner, when the keyboard calls for it. */
.dsp-cover-back {
  left: max(10px, 3.6cqw);
  bottom: max(10px, 3.6cqw);
  width: max(38px, 10cqw);
  height: max(38px, 10cqw);
  transform: translateY(1.2cqw);
}

/* Which controls show: play when the song is at rest, pause and back once the art is brought back. */
.dsp-cover[data-state="closed"] .dsp-cover-play,
.dsp-cover[data-state="peek"][data-playing="false"] .dsp-cover-play,
.dsp-cover[data-state="peek"][data-playing="true"] .dsp-cover-pause,
.dsp-cover[data-state="peek"] .dsp-cover-back {
  /* See-through at rest, so the art shows through; solid under the pointer or the keyboard. */
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.3s ease-out 0.05s, visibility 0s, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) 0.05s;
}

.dsp-cover .dsp-cover-btn:hover,
.dsp-cover .dsp-cover-btn:focus-visible {
  opacity: 1;
}

/* A tap on the art already puts it away, so this control is for the keyboard
   alone: it stays out of sight, and out of the pointer's way, until focused. */
.dsp-cover[data-state="peek"] .dsp-cover-back {
  opacity: 0;
  pointer-events: none;
}

.dsp-cover[data-state="peek"] .dsp-cover-back:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- the picture that brings the art back ------------------------------ */

.dsp-cover-token {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.6cqw;
  cursor: zoom-in;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* Material of the small corner mark, set per design further down. */
  --cv-face: linear-gradient(160deg, #fafaf9, #d6d3d1);
  --cv-ring: #292524;
  --cv-rim: rgba(255, 255, 255, 0.45);
  --cv-glyph: #1c1917;
  --cv-focus: #ffd58a;
  --cv-radius: 50%;
  --cv-badge: max(17px, 4.6cqw);
  --cv-badge-x: calc(100% - var(--cv-badge) * 0.72);
  --cv-badge-y: calc(100% - var(--cv-badge) * 0.72);
}

.dsp-frame[data-cover="open"] > .dsp-cover-token,
.dsp-frame[data-cover="opening"] > .dsp-cover-token,
.dsp-frame[data-cover="closing"] > .dsp-cover-token {
  visibility: visible;
}

.dsp-frame[data-cover="open"] > .dsp-cover-token {
  pointer-events: auto;
}

.dsp-cover-token:focus {
  outline: none;
}

.dsp-cover-token:focus-visible {
  outline: max(2px, 0.55cqw) solid var(--cv-focus);
  outline-offset: 0.5cqw;
}

.dsp-cover-badge {
  position: absolute;
  left: var(--cv-badge-x);
  top: var(--cv-badge-y);
  width: var(--cv-badge);
  height: var(--cv-badge);
  border-radius: var(--cv-radius);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.dsp-cover-badge .dsp-cover-cap {
  box-shadow:
    0 0 0 max(1px, 0.2cqw) var(--cv-ring),
    0.2cqw 0.5cqw 1cqw rgba(0, 0, 0, 0.55),
    inset 0 max(0.5px, 0.12cqw) 0 rgba(255, 255, 255, 0.55);
}

.dsp-cover-badge .dsp-cover-cap svg {
  width: 62%;
  height: 62%;
  filter: none;
}

.dsp-cover-token:hover .dsp-cover-badge,
.dsp-cover-token:focus-visible .dsp-cover-badge {
  transform: scale(1.16);
}

.dsp-cover-token:active .dsp-cover-badge {
  transform: scale(0.94);
}

/* The mark beckons twice when the player first appears, then rests. */
.dsp-frame[data-cover="open"] > .dsp-cover-token .dsp-cover-badge {
  animation: dsp-cover-beckon 0.9s cubic-bezier(0.3, 0, 0.3, 1) 0.5s 2;
}

@keyframes dsp-cover-beckon {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.3);
  }
}

/* A sleeve of its own, for a scene that shows no picture. */
.dsp-cover-sleeve {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 0.25cqw;
  box-shadow:
    0.5cqw 0.7cqw 1cqw rgba(0, 0, 0, 0.5),
    0.12cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* The edge of the record, a sliver out of the sleeve's mouth. */
.dsp-cover-sleeve::before {
  content: "";
  position: absolute;
  left: 15%;
  top: 4%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #0c0c0d 0, #1d1d20 62%, #0a0a0b 64%, #232327 82%, #09090a 100%);
  box-shadow: 0.2cqw 0.3cqw 0.5cqw rgba(0, 0, 0, 0.45);
}

.dsp-cover-sleeve img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
  -webkit-user-drag: none;
  pointer-events: none;
}

.dsp-cover-sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 42%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow: inset 0 0 0 max(0.5px, 0.08cqw) rgba(255, 255, 255, 0.28);
}

.dsp-cover-token.is-own:hover .dsp-cover-sleeve,
.dsp-cover-token.is-own:focus-visible .dsp-cover-sleeve {
  transform: translateY(-0.35cqw) scale(1.05);
}

/* ---- hi-fi turntable: an LP sleeve, brushed aluminium, amber lamp ------- */

.dsp-cover-hifi-turntable,
.dsp-cover-token-hifi-turntable {
  --cv-face: conic-gradient(
    from 0deg,
    #a7aaaf 0deg,
    #74777c 48deg,
    #b9bcc1 108deg,
    #f2f3f5 135deg,
    #b3b6bb 162deg,
    #70737a 228deg,
    #b4b7bc 288deg,
    #ffffff 315deg,
    #bcbfc4 342deg,
    #a7aaaf 360deg
  );
  --cv-ring: #17181b;
  --cv-rim: rgba(255, 255, 255, 0.3);
  --cv-glyph: #17181b;
  --cv-halo: rgba(255, 186, 92, 0.9);
  --cv-focus: #ffd58a;
}

/* Ring wear from the record inside, and the shaded mouth of the sleeve. */
.dsp-cover-hifi-turntable .dsp-cover-dress {
  background:
    radial-gradient(
      circle closest-side at 49% 50%,
      rgba(255, 255, 255, 0) 92%,
      rgba(255, 255, 255, 0.035) 93%,
      rgba(0, 0, 0, 0.03) 94.4%,
      rgba(0, 0, 0, 0) 95.6%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 96.8%,
      rgba(0, 0, 0, 0.3) 98.7%,
      rgba(255, 255, 255, 0.2) 99.2%,
      rgba(0, 0, 0, 0.42) 100%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.24) 100%);
}

.dsp-cover-token-hifi-turntable {
  --cv-badge: max(14px, 3.7cqw);
  --cv-badge-x: calc(100% - var(--cv-badge) * 0.55);
  --cv-badge-y: calc(100% - var(--cv-badge) * 0.55);
}

/* ---- suitcase portable: a snapshot in photo corners, cherry red key ----- */

.dsp-cover-suitcase-portable,
.dsp-cover-token-suitcase-portable {
  --cv-face: radial-gradient(circle at 34% 26%, #ff9d8c 0, #e8402f 30%, #c0241a 66%, #8f150f 100%);
  --cv-ring: #dfe6e8;
  --cv-rim: #56686b;
  --cv-glyph: #fff6e2;
  --cv-halo: rgba(255, 246, 226, 0.92);
  --cv-focus: #8fe3d8;
}

.dsp-cover-suitcase-portable .dsp-cover-cap svg,
.dsp-cover-token-suitcase-portable .dsp-cover-cap svg {
  filter: drop-shadow(0 max(0.5px, 0.14cqw) 0 rgba(90, 10, 6, 0.6));
}

/* The cream border of a photo print, and the gloss of its paper. */
.dsp-cover-suitcase-portable .dsp-cover-dress {
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(40, 20, 0, 0.18) 100%);
  box-shadow:
    inset 0 0 0 max(4px, 1.5cqw) #f8f3e7,
    inset 0 0 0 calc(max(4px, 1.5cqw) + max(0.5px, 0.12cqw)) rgba(58, 42, 20, 0.45),
    inset 0 0 0.6cqw max(4px, 1.5cqw) rgba(0, 0, 0, 0.18);
}

/* ---- cassette: a clear case, orange key --------------------------------- */

.dsp-cover-cassette,
.dsp-cover-token-cassette {
  --cv-face: linear-gradient(165deg, #ff9d5c 0, #ee6c26 42%, #cf5416 100%);
  --cv-ring: #1d1d1f;
  --cv-rim: #c9ccd0;
  --cv-glyph: #ffffff;
  --cv-halo: rgba(255, 164, 102, 0.95);
  --cv-focus: #ffd0a8;
  --cv-radius: 20%;
}

.dsp-cover-cassette .dsp-cover-cap svg,
.dsp-cover-token-cassette .dsp-cover-cap svg {
  filter: drop-shadow(0 max(0.5px, 0.14cqw) 0 rgba(120, 44, 6, 0.55));
}

/* Glare across the clear lid, and the two hinge ridges down its spine. */
.dsp-cover-cassette .dsp-cover-dress {
  background:
    linear-gradient(
      114deg,
      rgba(255, 255, 255, 0) 0 27%,
      rgba(255, 255, 255, 0.15) 27.3% 33.5%,
      rgba(255, 255, 255, 0) 33.8% 38.4%,
      rgba(255, 255, 255, 0.08) 38.7% 41.4%,
      rgba(255, 255, 255, 0) 41.7%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.3) 0,
      rgba(255, 255, 255, 0.3) 0.5%,
      rgba(0, 0, 0, 0.26) 0.6%,
      rgba(0, 0, 0, 0) 1.6%,
      rgba(0, 0, 0, 0) 5.4%,
      rgba(0, 0, 0, 0.24) 5.6%,
      rgba(255, 255, 255, 0.2) 6.1%,
      rgba(255, 255, 255, 0) 6.6%
    ),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.22) 100%);
  box-shadow:
    inset 0 0 0 max(1px, 0.22cqw) rgba(255, 255, 255, 0.34),
    inset 0 0 0 max(2px, 0.5cqw) rgba(0, 0, 0, 0.16);
}

/* The mark sits on the door's black surround, clear of the tape. */
.dsp-cover-token-cassette {
  --cv-badge: max(16px, 4cqw);
  --cv-badge-x: calc(100% + 0.6cqw);
  --cv-badge-y: 1.2cqw;
  border-radius: 1.4cqw;
}

/* ---- music box: an inlaid line of gold, a brass medallion ---------------- */

.dsp-cover-music-box,
.dsp-cover-token-music-box {
  --cv-face: conic-gradient(
    from 24deg,
    #f8e7ab 0deg,
    #c0932f 58deg,
    #f3dc92 118deg,
    #8f6a1c 188deg,
    #ecd283 248deg,
    #ab812a 306deg,
    #f8e7ab 360deg
  );
  --cv-ring: #5a3f0e;
  --cv-rim: #e8cf85;
  --cv-glyph: #173a2a;
  --cv-halo: rgba(246, 222, 150, 0.95);
  --cv-focus: #f6de96;
}

.dsp-cover-music-box .dsp-cover-dress {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(20, 10, 0, 0.3) 100%);
  box-shadow: inset 0 0 0 max(1px, 0.16cqw) rgba(30, 18, 4, 0.5);
}

.dsp-cover-music-box .dsp-cover-dress::before,
.dsp-cover-music-box .dsp-cover-dress::after {
  content: "";
  position: absolute;
  border-radius: 0.3cqw;
}

.dsp-cover-music-box .dsp-cover-dress::before {
  inset: 2.4cqw;
  box-shadow:
    inset 0 0 0 max(1px, 0.3cqw) rgba(238, 208, 128, 0.88),
    0 0 0 max(0.5px, 0.08cqw) rgba(60, 38, 6, 0.5),
    inset 0 0 0 calc(max(1px, 0.3cqw) + max(0.5px, 0.08cqw)) rgba(60, 38, 6, 0.35);
}

.dsp-cover-music-box .dsp-cover-dress::after {
  inset: 3.5cqw;
  box-shadow: inset 0 0 0 max(0.5px, 0.1cqw) rgba(238, 208, 128, 0.6);
}

/* ---- valve radio: gilt corners, an ivory key ----------------------------- */

.dsp-cover-valve-radio,
.dsp-cover-token-valve-radio {
  --cv-face: radial-gradient(circle at 36% 26%, #fffef6 0, #f4ead0 46%, #dccba2 82%, #c4b085 100%);
  --cv-ring: #b48a32;
  --cv-rim: #4f340f;
  --cv-glyph: #a3271b;
  --cv-halo: rgba(255, 206, 128, 0.95);
  --cv-focus: #ffd58a;
}

.dsp-cover-valve-radio .dsp-cover-cap svg,
.dsp-cover-token-valve-radio .dsp-cover-cap svg {
  filter: drop-shadow(0 max(0.5px, 0.12cqw) 0 rgba(255, 255, 255, 0.7));
}

/* Stepped corners in gilt line, and the warm light of the valves behind. */
.dsp-cover-valve-radio .dsp-cover-dress {
  --line: rgba(236, 204, 124, 0.9);
  --w: max(1px, 0.3cqw);
  background:
    linear-gradient(var(--line), var(--line)) left 2.6cqw top 2.6cqw / 10cqw var(--w) no-repeat,
    linear-gradient(var(--line), var(--line)) left 2.6cqw top 2.6cqw / var(--w) 10cqw no-repeat,
    linear-gradient(var(--line), var(--line)) right 2.6cqw top 2.6cqw / 10cqw var(--w) no-repeat,
    linear-gradient(var(--line), var(--line)) right 2.6cqw top 2.6cqw / var(--w) 10cqw no-repeat,
    linear-gradient(var(--line), var(--line)) left 2.6cqw bottom 2.6cqw / 10cqw var(--w) no-repeat,
    linear-gradient(var(--line), var(--line)) left 2.6cqw bottom 2.6cqw / var(--w) 10cqw no-repeat,
    linear-gradient(var(--line), var(--line)) right 2.6cqw bottom 2.6cqw / 10cqw var(--w) no-repeat,
    linear-gradient(var(--line), var(--line)) right 2.6cqw bottom 2.6cqw / var(--w) 10cqw no-repeat,
    linear-gradient(var(--line), var(--line)) left 3.9cqw top 3.9cqw / 5cqw max(0.5px, 0.14cqw) no-repeat,
    linear-gradient(var(--line), var(--line)) left 3.9cqw top 3.9cqw / max(0.5px, 0.14cqw) 5cqw no-repeat,
    linear-gradient(var(--line), var(--line)) right 3.9cqw top 3.9cqw / 5cqw max(0.5px, 0.14cqw) no-repeat,
    linear-gradient(var(--line), var(--line)) right 3.9cqw top 3.9cqw / max(0.5px, 0.14cqw) 5cqw no-repeat,
    linear-gradient(var(--line), var(--line)) left 3.9cqw bottom 3.9cqw / 5cqw max(0.5px, 0.14cqw) no-repeat,
    linear-gradient(var(--line), var(--line)) left 3.9cqw bottom 3.9cqw / max(0.5px, 0.14cqw) 5cqw no-repeat,
    linear-gradient(var(--line), var(--line)) right 3.9cqw bottom 3.9cqw / 5cqw max(0.5px, 0.14cqw) no-repeat,
    linear-gradient(var(--line), var(--line)) right 3.9cqw bottom 3.9cqw / max(0.5px, 0.14cqw) 5cqw no-repeat,
    radial-gradient(circle at 50% 50%, rgba(255, 190, 96, 0.1) 0, rgba(255, 190, 96, 0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(26, 10, 0, 0.34) 100%);
  box-shadow: inset 0 0 0 max(1px, 0.16cqw) rgba(30, 16, 4, 0.5);
}

.dsp-cover-token-valve-radio {
  --cv-badge: max(15px, 4.2cqw);
}

/* ---- calm motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dsp-cover-halo,
  .dsp-frame[data-cover="open"] > .dsp-cover-token .dsp-cover-badge {
    animation: none;
  }
  .dsp-cover-btn,
  .dsp-cover-cap,
  .dsp-cover-badge,
  .dsp-cover-sleeve {
    transition-duration: 0.01s;
  }
}