/* ill.swap - Web 1.0 edition. Tiled starfield background (dots recolored
   to match the warm oranges/yellows in the banner photo), beveled
   "Windows 95 button" borders instead of rounded corners/shadows, and
   classic blue/purple hyperlinks - on purpose! */

html {
  /* Safety net: nothing on this page should ever need to scroll
     sideways. Without this, one unconstrained-width element (there was
     one - see .category-nav below) can make mobile browsers quietly
     widen their whole layout viewport and zoom the entire page out to
     fit it, instead of just wrapping or scrolling that one element. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: #000033;
  background-image: url('stars-tile.svg');
  background-repeat: repeat;
  color: #000000;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  overflow-x: hidden;
}

a {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink {
  animation: blink 1s steps(1) infinite;
}

.site-header {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 1rem;
  padding-bottom: 3.5rem;
  /* Matches banner.jpg's real 1800x771 proportions, so the box is
     naturally the same shape as the photo - background-size: contain
     below then shows the whole image with little to no letterboxing,
     instead of "cover" cropping the edges off to fill the box. On
     narrow screens min-height below wins over the ratio's natural
     height, and without an explicit width here, that used height gets
     fed back through the ratio to size the width too (607px+ wide on a
     375px phone!) instead of just filling the viewport like a normal
     block element. */
  aspect-ratio: 1800 / 771;
  min-height: 260px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a0800 url('banner.jpg') center / contain no-repeat;
  border-bottom: 4px ridge #000080;
}

/* A dark scrim between the photo and the text on top of it, so the
   title stays readable no matter how bright/dark the photo is. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.65));
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.site-header h1 {
  margin: 0;
  font-family: 'League Gothic', 'Arial Narrow', sans-serif;
  font-size: 4rem;
  color: #f88379;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  letter-spacing: 2px;
}

/* The "ILL SWAP" title links back to the listings page on every page -
   overrides .site-header a's blue link color so it stays looking like
   plain title text, not a hyperlink. */
.site-header h1 a {
  color: inherit;
  text-decoration: none;
}

.site-header p {
  margin: 0.4rem 0 0;
  color: #000080;
  font-weight: bold;
  background: #ffffff;
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 2px solid #000080;
  /* Flex items default to min-width: auto, which means "never shrink
     smaller than my unwrapped content" - exactly wrong for a long
     sentence in a flex column with align-items: center. That's what was
     forcing this (and everything else in the header) wider than the
     screen on mobile. min-width: 0 lets it actually wrap. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.site-tagline {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

.site-header a {
  color: #0000ee;
}

/* Just the "Give feedback" button lives here now - the actual portal
   icons (add a listing / seller dashboard) moved to .footer-icons below,
   tucked into the footer's bottom-left corner instead of the header, since
   a tester flagged this header spot as too visible/inviting a target.
   .portal-icons/.portal-icon are still shared class names between both
   spots, since the visual language (understated black icon buttons) is
   the same either way. */
.site-header .portal-icons {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.portal-icon {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 2px outset #c0c0c0;
  border-radius: 0;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

.portal-icon:active {
  border-style: inset;
}

/* The "Give feedback" button - same understated black Win95-button look
   as the portal icons beside it, just with a text label instead of a
   single symbol, so it needs its own smaller, readable font rather than
   the icons' 1.2rem symbol size. */
.feedback-button {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
}

/* The category nav is pinned to the bottom edge of the header photo,
   regardless of where the title/subtitle land in the flex-centered
   block above it. */
.site-header .category-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  border-top: 2px solid #000;
}

.category-button {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  padding: 0.4rem 0.8rem;
}

.category-button:active {
  border-style: inset;
}

.category-button.active {
  border-style: inset;
  background: #f88379;
}

.category-heading {
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 1rem;
  color: #000080;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 1rem;
}

main {
  /* Just a cap, not a fixed width - main has no explicit width of its own,
     so it already fills whatever's narrower than this (shrinking right
     down to mobile widths). Raising the cap is what lets .listings-grid's
     existing auto-fill below actually pack in more than 3 tiles per row
     on wide/high-res screens, instead of always being boxed in at 820px
     regardless of how much room is available. */
  max-width: 1800px;
  margin: 1rem auto 2rem;
  background: #ffe8e3;
  border: 4px ridge #808080;
  padding: 1rem 1.25rem;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.listing-card {
  background: #ffffff;
  border: 3px outset #c0c0c0;
  border-radius: 0;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.listing-photo {
  position: relative;
  font-size: 3rem;
  text-align: center;
  background: #ffffff;
  border: 2px dashed #808080;
  margin-bottom: 0.6rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.listing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-count-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.1rem 0.4rem;
  border-radius: 0;
}

.listing-category {
  display: inline-block;
  font-weight: bold;
  font-size: 0.75rem;
  color: #000;
  background: #ffb8ae;
  border: 1px solid #000;
  padding: 0.1rem 0.4rem;
  margin-bottom: 0.4rem;
}

.listing-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: #000080;
}

.listing-card p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: #000;
  flex-grow: 1;
}

.listing-seeking {
  font-size: 0.9rem;
  color: #000;
  margin-bottom: 0.75rem;
  border-top: 1px dotted #808080;
  padding-top: 0.4rem;
}

.listing-seeking strong {
  color: #cc0000;
}

.listing-date {
  font-size: 0.75rem;
  color: #808080;
  margin-bottom: 0.5rem;
}

/* Events reuse .listing-card/.listing-photo/.listings-grid wholesale
   (see public/events.js) - these two are the only event-specific classes
   needed on top of that shared look. */
.event-date {
  font-size: 0.8rem;
  font-weight: bold;
  color: #000080;
  margin-bottom: 0.4rem;
}

.event-ticket-link {
  display: inline-block;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  text-decoration: none;
  background: #f88379;
  color: #000;
  border: 2px outset #fff;
  padding: 0.3rem 0.7rem;
  margin-top: auto;
  align-self: flex-start;
  cursor: pointer;
}

.event-ticket-link:active {
  border-style: inset;
}

/* The Accept/Reject buttons on the bid-decision page (reached from a
   swapper's "new offer" email) - centered side by side, overriding the
   align-self: flex-start those buttons get by default for use inside a
   flex-column form. */
.bid-decision-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.bid-decision-actions button {
  align-self: unset;
}

/* Classic beveled "Windows" push button - the opposite of a modern flat
   pill button. outset = looks raised; inset (on :active) = looks pressed. */
.bid-button,
#bid-form button,
.page-form button,
.accept-button,
.reject-button {
  align-self: flex-start;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.bid-button:active,
#bid-form button:active,
.page-form button:active,
.accept-button:active,
.reject-button:active {
  border-style: inset;
}

.accept-button {
  color: #006600;
  font-weight: bold;
}

.reject-button {
  color: #cc0000;
  font-weight: bold;
}

/* Modal styled like a Windows 95 dialog box: gray chrome, a blue
   "titlebar" gradient, hard corners, no drop shadow. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 51, 0.7);
  display: flex;
  /* flex-start, not center: a modal taller than the viewport (e.g. the
     Post a Swap form once every field and photo preview is filled in)
     needs to be reachable top-to-bottom by scrolling. align-items: center
     on a fixed container clips whatever overflows with no way to reach
     it - and simply adding overflow-y: auto to a *centered* flex item
     isn't enough on its own either, since browsers then start it
     pre-scrolled with its own top edge (title bar, close button) already
     hidden above the fold. flex-start avoids both problems, at the cost
     of short modals sitting near the top of the screen instead of
     perfectly centered - see the padding below for spacing there. */
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem;
  overflow-y: auto;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #c0c0c0;
  border: 3px outset #fff;
  border-radius: 0;
  width: 100%;
  max-width: 420px;
  padding: 0 0.9rem 1rem;
}

.modal-content h2 {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  margin: 0 -0.9rem 0.9rem;
  padding: 0.4rem 0.6rem;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

.modal-close {
  float: right;
  margin-top: 0.5rem;
  border: 2px outset #fff;
  background: #c0c0c0;
  color: #000;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.modal-close:active {
  border-style: inset;
}

/* The larger photo-viewing dialog - same Win95 dialog chrome as other
   modals, just wider, with a dark "lightbox" area for the image itself. */
.photo-modal-content {
  max-width: 720px;
}

/* The "Post a Swap" form has more fields than the bid form (it's the
   public equivalent of the admin new-listing page), so it gets a bit more
   room than the default .modal-content width. */
.swap-modal-content {
  max-width: 480px;
}

.form-note {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.8rem;
  font-style: italic;
  color: #555;
  margin: 0.6rem 0 0;
}

/* Links to the how-it-works page, sitting right above the Post a Swap
   button so a first-time visitor sees it before the button itself. */
.how-it-works-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
}

.how-it-works-button {
  display: inline-block;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  background: #ffcc00;
  color: #000;
  border: 3px outset #fff;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

.how-it-works-button:active {
  border-style: inset;
}

/* The big cat-photo button that opens the swap form - deliberately loud
   and central, the opposite of the understated "secret door" portal icons
   in the header. */
.post-a-swap-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
}

.post-a-swap-button {
  width: 160px;
  height: 160px;
  padding: 0;
  border: 3px outset #fff;
  border-radius: 0;
  background: #c0c0c0;
  cursor: pointer;
  overflow: hidden;
}

.post-a-swap-button:active {
  border-style: inset;
}

.post-a-swap-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-viewer {
  background: #000;
  border: 2px inset #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.photo-viewer img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.photo-viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.photo-nav-button {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.photo-nav-button:active {
  border-style: inset;
}

.photo-counter {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #000080;
}

#bid-form,
.page-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#bid-form label,
.page-form label {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  margin-top: 0.4rem;
}

#bid-form textarea,
#bid-form input,
.page-form textarea,
.page-form input,
.page-form select {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.9rem;
  padding: 0.4rem;
  background: #fff;
  border: 2px inset #808080;
  border-radius: 0;
  resize: vertical;
}

#bid-form button,
.page-form button {
  margin-top: 0.6rem;
  align-self: flex-start;
}

.page-form {
  max-width: 480px;
  margin: 0 auto;
}

.photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.photo-preview-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px outset #fff;
  background: #fff;
}

.photo-preview-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.photo-preview-wrapper .photo-preview-thumb {
  width: 100%;
  height: 100%;
}

.photo-remove-button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  line-height: 16px;
  padding: 0;
  font-size: 0.85rem;
  font-weight: bold;
  border: 2px outset #fff;
  background: #ffb8ae;
  color: #fff;
  cursor: pointer;
}

#current-photos-section {
  margin-top: 0.6rem;
}

.form-message {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  min-height: 1.2em;
  font-weight: bold;
}

.form-message.success {
  color: #006600;
}

.form-message.error {
  color: #cc0000;
}

/* Seller dashboard */
.bids-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bid-row {
  background: #fff;
  border: 3px outset #c0c0c0;
  border-radius: 0;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bid-row-info {
  flex: 1;
  min-width: 200px;
}

.bid-row-listing {
  font-weight: bold;
  color: #000080;
}

.bid-row-offer {
  font-size: 0.9rem;
  color: #000;
  margin: 0.15rem 0;
}

.bid-row-email {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #333;
}

.bid-status {
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #000;
  text-transform: uppercase;
}

.bid-status.pending {
  background: #ffff00;
  color: #7a5c00;
}

.bid-status.accepted {
  background: #90ee90;
  color: #006600;
}

.bid-status.rejected {
  background: #ff9999;
  color: #cc0000;
}

.bid-actions {
  display: flex;
  gap: 0.5rem;
}

/* "Manage Listings" section of the seller dashboard - same card-row
   look as the bids list above it. */
.listings-manage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.listing-manage-row {
  background: #fff;
  border: 3px outset #c0c0c0;
  border-radius: 0;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.listing-manage-info {
  flex: 1;
  min-width: 180px;
}

.listing-manage-title {
  font-weight: bold;
  color: #000080;
}

.listing-manage-meta {
  font-size: 0.85rem;
  color: #444;
}

.listing-visibility {
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #000;
  text-transform: uppercase;
}

.listing-visibility.visible-status {
  background: #90ee90;
  color: #006600;
}

.listing-visibility.hidden-status {
  background: #d0d0d0;
  color: #444;
}

/* Same yellow/amber as .bid-status.pending - "waiting on someone", not
   yet a finished good/bad state, so it gets its own color rather than
   reusing hidden's gray or visible's green. */
.listing-visibility.unverified-status {
  background: #ffff00;
  color: #7a5c00;
}

.listing-manage-actions {
  display: flex;
  gap: 0.5rem;
}

.edit-button,
.hide-button,
.unhide-button,
.delete-button {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  background: #c0c0c0;
  border: 2px outset #fff;
  border-radius: 0;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.edit-button {
  display: inline-block;
  text-decoration: none;
  color: #004a99;
}

.edit-button:active,
.hide-button:active,
.unhide-button:active,
.delete-button:active {
  border-style: inset;
}

.hide-button {
  color: #7a5c00;
}

.unhide-button {
  color: #006600;
}

.delete-button {
  color: #cc0000;
}

.empty-state {
  font-weight: bold;
  color: #cc0000;
  text-align: center;
  padding: 2rem 0;
}

/* The inline "Edit" form a Manage Songs row turns into - kept to the two
   fields that actually matter (name, artist link) instead of navigating
   to a whole separate page like listings' Edit does. */
.song-edit-row {
  align-items: stretch;
}

.song-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.song-edit-form label {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
}

.song-edit-form input {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.9rem;
  padding: 0.4rem;
  background: #fff;
  border: 2px inset #808080;
  border-radius: 0;
}

.song-edit-form .listing-manage-actions {
  margin-top: 0.3rem;
}

.retro-footer {
  position: relative;
  max-width: 820px;
  margin: 0 auto 2rem;
  /* Extra bottom padding reserves room for .footer-icons below, so the
     tucked-away admin icons never sit directly under (or overlap) the
     centered footer text above them. */
  padding-bottom: 2.2rem;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.8rem;
  color: #ffffff;
}

/* The "secret door" into the private portal (add a listing / seller
   dashboard) - deliberately understated, meant to blend into the corner
   rather than advertise itself. Same idea as the old header placement
   (see the .portal-icon rule below, still shared by both), just moved to
   the footer's bottom-left corner instead, since it's a quieter part of
   the page. */
.footer-icons {
  position: absolute;
  bottom: 0;
  left: 0.4rem;
  display: flex;
  gap: 0.4rem;
}

.hit-counter span {
  display: inline-block;
  background: #000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 0.2rem 0.5rem;
  border: 2px inset #808080;
}

.hidden {
  display: none;
}

/* The PIN pad - same LCD-digital look as the hit counter for the
   display, and beveled Win95 buttons for the number keys. */
.pin-pad-page {
  max-width: 260px;
  margin: 0 auto;
}

.pin-display {
  background: #000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  letter-spacing: 0.6rem;
  text-align: center;
  padding: 0.5rem;
  border: 2px inset #808080;
  margin-bottom: 0.75rem;
}

.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.pin-key {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  border-radius: 0;
  padding: 0.6rem 0;
  cursor: pointer;
}

.pin-key:active {
  border-style: inset;
}

/* The WinAmp-style player - fixed to the corner so it stays put and
   playable no matter how far down the page you've scrolled, or which
   modal is open. */
.winamp-player {
  position: fixed;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 5;
  width: 230px;
  background: #3a3a3a;
  border: 2px outset #888;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.winamp-titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.4rem;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.winamp-shade-toggle {
  background: #c0c0c0;
  border: 1px outset #fff;
  color: #000;
  font-size: 0.7rem;
  font-weight: bold;
  line-height: 1;
  width: 16px;
  height: 14px;
  padding: 0;
  cursor: pointer;
}

.winamp-shade-toggle:active {
  border-style: inset;
}

.winamp-player.shaded .winamp-body {
  display: none;
}

.winamp-body {
  padding: 0.4rem;
}

.winamp-lcd {
  background: #000;
  border: 1px inset #808080;
  padding: 0.3rem 0.4rem;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

/* The window the scrolling track name plays out in - fixed height,
   clips anything outside it. See setTrackName() in player.js for why
   this isn't a native <marquee> anymore: modern browsers no longer give
   that element real layout at all (it was rendering at 0x0), which is
   why the track name wasn't showing up, scrolling or not. */
.winamp-track-name {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  height: 1.2em;
}

.winamp-track-name-track {
  display: inline-flex;
  white-space: nowrap;
}

/* Only added by setTrackName() when the title actually overflows its
   window - --marquee-distance is set inline per-track, to exactly the
   width of one copy of the text plus the gap below, so the loop back to
   0 lines up seamlessly with the second (identical) copy already there. */
.winamp-track-name-track.scrolling {
  animation-name: winamp-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.winamp-track-name-gap {
  display: inline-block;
  width: 2.5em;
  flex: 0 0 auto;
}

@keyframes winamp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
  }
}

.winamp-time {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  text-align: right;
}

/* Links to whatever URL is in the current track's ID3 comment tag (see
   GET /api/songs/:filename/link) - the same coral pink as the ILL SWAP
   header and the active category button, so it stands out from the
   player's grey Win95 chrome instead of blending into it. Hidden (see
   .hidden) whenever the current track has no such link. */
.winamp-artist-link {
  display: block;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  text-decoration: none;
  background: #f88379;
  color: #000;
  border: 2px outset #fff;
  padding: 0.3rem 0.4rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.winamp-artist-link:active {
  border-style: inset;
}

/* Higher specificity than the bare .hidden rule (which .winamp-artist-link's
   own "display: block" above would otherwise win over on source order) -
   needed so JS can actually hide this button for tracks with no link. */
.winamp-artist-link.hidden {
  display: none;
}

.winamp-seek {
  width: 100%;
  margin-bottom: 0.4rem;
}

.winamp-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

.winamp-btn {
  flex: 0 0 auto;
  background: #c0c0c0;
  border: 2px outset #fff;
  color: #000;
  font-size: 0.75rem;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

.winamp-btn:active {
  border-style: inset;
}

.winamp-volume {
  /* <input type="range"> has a sizable default intrinsic width in most
     browsers, which flex:1 alone doesn't override - min-width:0 lets it
     actually shrink, and the fixed width keeps it well inside the
     player's frame instead of pushing past the edge. */
  flex: 0 0 auto;
  width: 60px;
  min-width: 0;
  margin-left: 0.4rem;
}

.winamp-playlist {
  /* Exactly 4 rows tall (4 x the fixed 1.6rem row height below) - any
     more songs than that scroll instead of growing the player. */
  max-height: 6.4rem;
  overflow-y: auto;
  background: #000;
  border: 1px inset #808080;
}

.winamp-track {
  height: 1.6rem;
  line-height: 1.6rem;
  box-sizing: border-box;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winamp-track:hover {
  background: #1a1a1a;
}

.winamp-track.playing {
  background: #003300;
  color: #fff;
  font-weight: bold;
}

.winamp-empty {
  color: #888;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  padding: 0.5rem;
  text-align: center;
}

.winamp-submit-note {
  margin-top: 0.4rem;
  padding: 0.3rem 0.4rem;
  background: #000;
  border: 1px inset #808080;
  color: #f88379;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
}

.winamp-submit-note a {
  color: #66aaff;
}

/* Mobile layout. The header's height above is normally driven by
   banner.jpg's aspect-ratio, which works fine on desktop where the
   title/tagline/nav fit on a couple of short lines - but on a narrow
   phone screen that same content wraps across several lines and needs
   more room than the photo's own proportions allow, so the fixed
   aspect-ratio has to give way to a content-driven height instead. */
@media (max-width: 600px) {
  .site-header {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    /* The WinAmp player floats fixed over this corner regardless of
       where the header's own content flows, so the only way to
       guarantee the title never ends up hidden behind it is to push all
       the header's content down below the player's height. */
    padding-top: 11.5rem;
    padding-bottom: 1rem;
  }

  .site-header h1 {
    font-size: 2.5rem;
  }

  /* Letting the nav flow normally (instead of overlaying the bottom of
     the header) is what lets the header grow tall enough to fit
     everything without anything overlapping. */
  .site-header .category-nav {
    position: static;
    width: auto;
    margin: 0.75rem -1rem -1rem;
  }

  .winamp-player {
    width: 170px;
  }

  .winamp-titlebar {
    font-size: 0.6rem;
  }

  .winamp-track-name,
  .winamp-track {
    font-size: 0.65rem;
  }

  /* At 170px wide there's no room for the volume slider next to all 4
     transport buttons on the same line - wrapping it onto its own row
     (instead of squeezing/clipping it) keeps it fully usable. */
  .winamp-controls {
    flex-wrap: wrap;
  }

  .winamp-volume {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 0.3rem;
  }
}