/* style.css 2026-04-04 02:50:24 */
/* ================================
 RESET & VARIABLES
================================ */
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
:root {
 --bg: #0a0a0a;
 --panel: #111111;
 --border: #222222;
 --text: #ffffff;
 --muted: #aaaaaa;
 --c64: #f2f540;
 --a500: #0094ff;
 --dos: #ff66ff;
 --win: #66c656;
 --ringtone: #00818e;
 --notification: #fd7801;
}
/* ================================
 BASE LAYOUT
================================ */
body {
 font-family: "IBM Plex Mono", monospace;
 background: var(--bg);
 color: var(--text);
 min-height: 100vh;
}
.site-header,
.site-footer {
 text-align: center;
 padding: 20px;
}
.site-main {
 max-width: 700px;
 margin: 0 auto;
 padding: 20px;
}
.site-main > * + * {
 margin-top: 16px;
}
/* ================================
 LOGOS
================================ */
.logo {
 width: 100%;
 max-width: 360px;
 height: auto;
 display: block;
 margin: 0 auto;
}
.qr {
 width: 100%;
 max-width: 225px;
 height: auto;
 display: block;
 margin: 10px auto 0;
}
.footer-link {
 display: inline-block;
}
/* ================================
 HEADERS
================================ */
h1 {
 font-size: 24px;
 font-weight: 600;
 text-align: center;
}
.platform-line {
 font-size: 18px;
 text-align: center;
}
.subtitle {
 font-size: 12px;
 color: var(--muted);
}
.subtitle.platform-line {
 font-size: 13px;
}
.results-info {
 font-size: 14px;
 color: #ffffff;
 text-align: center;
}
.footer-cta,
.footer-tagline {
 font-size: 13px;
 color: var(--muted);
 text-align: center;
}
/* ================================
 SEARCH
================================ */
.search-wrapper {
 position: relative;
}
#search {
 width: 100%;
 padding: 12px 34px 12px 12px;
 border-radius: 10px;
 background: #101010;
 border: 1px solid #333;
 color: #fff;
 font-family: "Segoe UI", system-ui, sans-serif;
}
.search-clear {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 border: none;
 background: transparent;
 color: #777;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 18px;
 cursor: pointer;
 line-height: 1;
}
.hidden {
 display: none;
}
/* ================================
 FILTERS
================================ */
.filters-row {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 12px;
}
.filters-sep {
 width: 1px;
 height: 28px;
 background: #222;
 opacity: 0.9;
}
.filters {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
}
.filters button {
 background: #0e0e0e;
 border: 1px solid #444444;
 color: #ffffff;
 padding: 10px 12px;
 border-radius: 10px;
 cursor: pointer;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 13px;
 font-weight: 400;
 text-transform: uppercase;
}
.filters button.active {
 border-color: #ffffff;
}
.filters-platform button[data-filter="all"].active { color: #ffffff; border-color: #ffffff; }
.filters-platform button[data-filter="c64"].active { color: var(--c64); border-color: var(--c64); }
.filters-platform button[data-filter="a500"].active { color: var(--a500); border-color: var(--a500); }
.filters-platform button[data-filter="dos"].active { color: var(--dos); border-color: var(--dos); }
.filters-platform button[data-filter="win"].active { color: var(--win); border-color: var(--win); }
.filters-type button[data-type-filter="all"].active { color: #ffffff; border-color: #ffffff; }
.filters-type button[data-type-filter="Ringtone"].active {
 color: var(--ringtone);
 border-color: var(--ringtone);
}
.filters-type button[data-type-filter="Notification"].active {
 color: var(--notification);
 border-color: var(--notification);
}
/* ================================
 SORT ROW
================================ */
.sort-row {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
 align-items: center;
}
.sort-label {
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 color: var(--muted);
 text-transform: uppercase;
}
.sort-buttons {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
}
.sort-buttons button {
 background: #0e0e0e;
 border: 1px solid #444;
 color: #f5f5f5;
 padding: 6px 10px;
 border-radius: 8px;
 cursor: pointer;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 font-weight: 400;
 text-transform: uppercase;
}
.sort-buttons button.active {
 border-color: #fff;
}
/* ================================
 TRACK LIST & CARD
================================ */
#tracklist {
 margin-top: 4px;
 text-align: left;
}
.track {
 position: relative;
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px;
 margin-bottom: 16px;
}
.track.c64:hover { border-color: var(--c64); }
.track.a500:hover { border-color: var(--a500); }
.track.dos:hover { border-color: var(--dos); }
.track.win:hover { border-color: var(--win); }
.track-title {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
}
.track-title-main {
 font-size: 16px;
 font-weight: 600;
}
.track-inline-meta {
 display: flex;
 gap: 6px;
 margin-left: 10px;
}
.inline-box {
 border: 1px solid currentColor;
 border-radius: 6px;
 padding: 1px 6px;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 font-weight: 400;
}
.track-platform-logo {
 position: absolute;
 top: 8px;
 right: 8px;
 width: 26px;
 height: auto;
 opacity: 0.85;
 pointer-events: none;
}
.track-line {
 font-size: 13px;
 color: #bbbbbb;
 margin-top: 6px;
}
audio {
 width: 100%;
 margin-top: 10px;
}
.track-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 10px;
 padding: 3px 8px;
 border-radius: 8px;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 font-weight: 400;
 text-transform: uppercase;
}
.track-type.ringtone {
 color: var(--ringtone);
 border-color: var(--ringtone);
}
.track-type.notification {
 color: var(--notification);
 border-color: var(--notification);
}
/* ================================
 MOBILE: center all 14 boxes (5 platform + 3 type + 6 sort)
================================ */
@media (max-width: 700px) {
 .filters-row {
  flex-direction: column;
 }
 .filters-sep {
  width: 40px;
  height: 1px;
 }
 .filters,
 .sort-buttons {
  justify-content: center;
 }
}
.actions-left {
 display: flex;
 align-items: center;
 gap: 8px;
}
.download-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 10px;
 border-radius: 8px;
 background: #101010;
 border: 1px solid #444;
 color: #ddd;
 text-decoration: none;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 12px;
}
.download-btn img {
 width: 14px;
 height: 14px;
}
.ios-hint {
 display: block;
 font-size: 9px;
 opacity: 0.5;
 margin-top: 2px;
}
.track-type {
 border: 1px solid;
 padding: 3px 8px;
 border-radius: 8px;
 font-family: "Segoe UI", system-ui, sans-serif;
 font-size: 11px;
 font-weight: 400;
 text-transform: uppercase;
}
.track-type.ringtone {
 color: var(--ringtone);
 border-color: var(--ringtone);
}
.track-type.notification {
 color: var(--notification);
 border-color: var(--notification);
}
/* ================================
 MOBILE: center all 14 boxes (5 platform + 3 type + 6 sort)
================================ */
@media (max-width: 700px) {
 .filters-row {
  flex-direction: column;
 }
 .filters-sep {
  width: 40px;
  height: 1px;
 }
 .filters,
 .sort-buttons {
  justify-content: center;
 }
}