/* audio.php — recent panel, CD animations, featured */

@font-face {
  font-family: 'Iosevka';
  src: url('/fonts/IosevkaNerdFont-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}

.audio-featured-top { background: url("/assets/audio/layout04/featured_top.gif") no-repeat; width: 300px; height: 12px; }
.audio-featured-bot { background: url("/assets/audio/layout04/featured_bot.gif") no-repeat; width: 300px; height: 12px; }
.audio-featured-body { display: flex; }
.audio-featured-l { width: 12px; background: url("/assets/audio/layout04/featured_left.gif") no-repeat; }
.audio-featured-r { width: 6px;  background: url("/assets/audio/layout04/featured_right.gif") no-repeat; }
.audio-featured-bg {
  flex: 1;
  background: url("/assets/audio/layout04/featured_bg.gif") repeat-x;
  background-color: #1a1a1a;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.audio-featured-label { display: flex; align-items: center; gap: 6px; font-family: 'Iosevka', Arial, monospace; font-size: 10px; }

.audio-recent-top { background: url("/assets/audio/layout04/t_recent_top.gif") no-repeat; width: 341px; height: 32px; }
.audio-recent-bot { background: url("/assets/audio/layout04/t_recent_bot.gif") no-repeat; width: 341px; height: 22px; }
.audio-recent-bg  { width: 341px; background: url("/assets/audio/layout04/t_recent_bg.gif") repeat-y; background-color: #1a1a1a; }
.audio-recent-table { width: 100%; border-collapse: collapse; font-family: 'Iosevka', Arial, monospace; font-size: 10px; }
.audio-recent-table td { padding: 2px 4px; }
.audio-recent-table tr:nth-child(even) td { background-color: #24272B; }
.audio-recent-table .col-title { color: #FFCC00; font-weight: bold; font-style: italic; }
.audio-recent-table .col-cat   { color: #FFCC00; font-weight: bold; font-style: italic; white-space: nowrap; }
.audio-bar-break { background: url("/assets/audio/layout04/main_bar_break.gif") repeat-x; height: 7px; }

.audio-new-panel { width: 100%; margin-bottom: 10px; }
.audio-new-header {
  background: linear-gradient(to bottom, #2a4a00, #1a3000);
  border: 1px solid #3a6000; border-bottom: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; height: 28px;
}
.audio-new-header-title {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Iosevka', Arial, monospace; font-size: 13px; color: #CCEE44;
}
.audio-new-more {
  font-family: 'Iosevka', Arial, monospace; font-size: 10px; font-weight: bold; color: #CCEE44;
  background: #2a5000; border: 1px solid #4a8000;
  padding: 2px 8px; text-decoration: none; white-space: nowrap;
}
.audio-new-more:hover { background: #3a6a00; color: #EEFF66; }
.audio-new-body { border: 1px solid #3a6000; border-top: none; }
.audio-new-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; min-height: 44px;
  border-bottom: 1px solid #1a2a00;
}
.audio-new-row:last-child { border-bottom: none; }
.audio-new-row:nth-child(odd)  { background: #0d1800; }
.audio-new-row:nth-child(even) { background: #111f00; }

.audio-cd-wrap { flex-shrink: 0; width: 40px; height: 40px; }
@keyframes audio-cd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.audio-cd-spin {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  animation: audio-cd-spin 5s linear infinite;
  display: block;
}
.audio-cd-default {
  width: 40px; height: 40px; border-radius: 50%;
  background: url('/assets/audio/icon-audio-smaller.png') center/cover no-repeat;
  animation: audio-cd-spin 5s linear infinite;
  flex-shrink: 0;
}
.audio-new-title { font-family: 'Iosevka', Arial, monospace; font-size: 11px; font-weight: bold; color: #CCEE44; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.audio-new-title span { display: inline-block; padding-left: 100%; animation: audio-marquee 12s linear infinite; }
.audio-new-title:hover span { animation-play-state: paused; }
@keyframes audio-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.audio-new-title:hover { color: #EEFF88; }
.audio-new-cat    { font-family: 'Iosevka', Arial, monospace; font-size: 10px; color: #99AA66; white-space: nowrap; flex-shrink: 0; min-width: 110px; }
.audio-new-avatar { width: 32px; height: 32px; border-radius: 0; object-fit: cover; flex-shrink: 0; }
.audio-new-author { font-family: 'Iosevka', Arial, monospace; font-size: 10px; font-weight: bold; color: #CCEE44; white-space: nowrap; flex-shrink: 0; min-width: 80px; }
.audio-new-author:hover { color: #EEFF88; }