.dip-empty {
  width: 100%;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.dip-empty:hover {
  border-color: #e9a381;
  background: radial-gradient(circle at center, #e4a4841e, transparent 60%), #1d1e28;
  transform: translateY(-2px);
}
.dip-empty:disabled { cursor: wait; }
.dip-empty[hidden] { display: none; }
.dip-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.dip-grid .dip-card, .dip-grid .dip-card:nth-child(4) { grid-column: auto; }
.dip-card-art { position: relative; }
.dip-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.dip-card-play {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  text-shadow: 0 3px 18px #000, 0 0 35px #000;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.dip-card-play:hover, .dip-card-play:focus-visible, .dip-card.is-playing .dip-card-play {
  background: #1119;
  opacity: 1;
}
.dip-card-foot button:hover { color: #fff; }
.dip-card.is-playing { border-color: #e9a381; box-shadow: 0 0 0 1px #e9a38165; }
.dip-card-foot button {
  border: 0;
  background: none;
  color: #f0b695;
  padding: 0;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.dip-card-foot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px 5px;
}
.dip-card-foot .dip-card-stats { grid-column: 1 / -1; }
.dip-card-foot .dip-card-like {
  justify-self: start;
  color: #aca8b1;
  border: 1px solid #ffffff25;
  border-radius: 99px;
  padding: 4px 7px;
  background: #ffffff08;
}
.dip-card-foot .dip-card-like.is-liked { color: #f1aa91; border-color: #e9a3819c; background: #e9a3811d; }
.dip-card-foot .dip-card-like:disabled { opacity: .55; }
.dip-card-foot a { color: #aaa6b0; font-size: 10px; }
.dip-top-deck { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dip-top-kicker { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); color: #efb394; font-size: 10px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; }
.dip-deck-loading { color: #cbb9b7; font-size: 12px; }
.dip-top-card {
  position: relative;
  display: block;
  width: min(31%, 165px);
  aspect-ratio: .8;
  flex: none;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border: 1px solid #e8b09389;
  border-radius: 11px;
  background: #252330;
  box-shadow: 0 20px 35px #0008;
  transition: transform .2s, border-color .2s;
}
.dip-top-card:first-of-type { transform: rotate(-7deg) translateY(8px); }
.dip-top-card:last-of-type { transform: rotate(7deg) translateY(8px); }
.dip-top-card:hover, .dip-top-card:focus-visible { transform: translateY(-10px) scale(1.04); border-color: #ffd1b4; z-index: 2; }
.dip-top-card img, .dip-top-fallback { display: block; width: 100%; height: 100%; object-fit: contain; background: #171820; }
.dip-top-fallback { display: grid; place-items: center; font: italic 72px Georgia,serif; color: #efc5a7; }
.dip-top-card-label { position: absolute; inset: auto 0 0; display: grid; gap: 3px; padding: 25px 8px 9px; background: linear-gradient(transparent,#101018ed 42%); }
.dip-top-card-label b { color: #f1b49b; font-size: 10px; }
.dip-top-card-label strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dip-top-card-label small { font-size: 9px; color: #ddd4d5; }
.dip-has-player .dip-shell { padding-bottom: 95px; }
.dip-player[hidden] { display: none; }
.dip-player {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 12px max(4.4vw, 20px);
  border-top: 1px solid #ffffff30;
  background: #191a24f5;
  backdrop-filter: blur(18px);
  box-shadow: 0 -15px 50px #0008;
}
.dip-player-cover {
  height: 55px;
  width: 55px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: #695a6a;
  display: grid;
  place-items: center;
  color: #ffe0c3;
  font: italic 26px Georgia, serif;
}
.dip-player-cover img { width: 100%; height: 100%; object-fit: contain; }
.dip-player-track { display: grid; gap: 5px; width: min(230px, 22vw); min-width: 100px; }
.dip-player-track strong, .dip-player-track span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dip-player-track strong { font-size: 12px; color: #fff; }
.dip-player-track span { font-size: 10px; color: #aaa6b0; }
.dip-player-controls { display: flex; align-items: center; gap: 10px; }
.dip-player-controls button, .dip-player-close { border: 0; background: none; color: #c8c0c6; }
.dip-player-controls button { font-size: 17px; padding: 5px; }
.dip-player-controls button:disabled { opacity: .35; cursor: default; }
.dip-player-controls .dip-player-main {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #efb397;
  color: #24191d;
  font-size: 13px;
}
.dip-player-progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dip-player-progress span { color: #aaa5b0; font-size: 10px; white-space: nowrap; }
.dip-player-progress input { width: 100%; min-width: 70px; accent-color: #eba889; }
.dip-player-close { font-size: 26px; padding: 5px 0 5px 10px; }
@media (max-width: 800px) {
  .dip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .dip-grid .dip-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 430px);
    justify-self: center;
  }
}
@media (max-width: 700px) {
  .dip-top-card { width: min(30%, 150px); }
  .dip-player { flex-wrap: wrap; gap: 7px 12px; padding: 9px 16px; }
  .dip-player-cover { width: 40px; height: 40px; }
  .dip-player-track { width: calc(100% - 110px); flex: 1; }
  .dip-player-controls { order: 2; }
  .dip-player-progress { order: 3; flex: 1; }
  .dip-player-close { margin-left: auto; }
}
@media (max-width: 520px) {
  .dip-grid { grid-template-columns: 1fr; gap: 18px; }
  .dip-grid .dip-card, .dip-grid .dip-card:nth-child(4), .dip-grid .dip-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
  .dip-card-foot { display: grid; }
  .dip-card-foot button, .dip-card-foot a { margin-top: 6px; }
  .dip-player-progress span { display: none; }
}