/* ─────────────────────────────────────────────────────────────
   Driftwood Archive  –  full stylesheet  (incl. new Filter UI)
───────────────────────────────────────────────────────────── */

/* existing global styles … (unchanged) */
html{-ms-overflow-style:none;scrollbar-width:none;}
html::-webkit-scrollbar{display:none;}
@font-face{font-family:'Source Code Pro';src:url('SourceCodePro-Regular.ttf') format('truetype');}
:root{--track-title-font:'Source Code Pro',monospace;}
.tag-button,.detail-box,.detail-title,.detail-tracklist,.detail-info,
.additional-info-btn, .filter-btn, .filter-card-header, .clear-filters-btn{font-family:'Source Code Pro',monospace;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#000;color:#fff;font-family:Arial,sans-serif;line-height:1.5;}
header{padding:20px;}
.logo-container{display:flex;align-items:center;}
.logo-square{width:40px;height:40px;background:#fff;margin-right:10px;}
.logo-text{font-size:1.5em;font-weight:bold;}
.main-content{display:flex;flex-direction:column;align-items:center;margin-bottom:110px;}

/* ▸ filter‑button wrapper – matches album grid width & padding */
.filter-btn-wrapper{width:100%;max-width:600px;margin:0 auto 15px;padding:0 20px;}

/* ▸ filter button */
.filter-btn{
  background:#333;border:1px solid #666;color:#fff;
  padding:6px 8px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.filter-btn:hover{background:#555;}
.filter-icon{flex:0 0 auto;}

/* ▸ backdrop + floating card ----------------------------------*/
.hidden{display:none;}
.filter-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);}
.filter-card{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:90%;max-width:420px;max-height:80vh;overflow-y:auto;
  background:#222;border:1px solid #666;border-radius:12px;
  padding:20px 20px 60px;z-index:91;
}
.filter-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.filter-card-title{font-size:1.1em;font-weight:bold;}
.filter-card-close{background:none;border:none;font-size:1.5em;color:#bbb;cursor:pointer;}
.filter-card-close:hover{color:#fff;}

/* ▸ tag cloud in card -----------------------------------------*/
.filter-tags-container{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}

/* ------------------------------------------------------------
   Tag button inside the filter card
   – numbers in a single accent colour + natural spacing
------------------------------------------------------------ */
.filter-tag-btn{
  display:inline-flex;             /* <— natural left‑to‑right flow  */
  align-items:center;
  gap:6px;                         /* <— space between label & number */
  background:#333;
  border:1px solid #666;
  color:#fff;
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  text-transform:capitalize;
  font-family:'Source Code Pro',monospace;
}
.filter-tag-btn:hover{background:#555;}
.filter-tag-btn.active{
  background:#fff;color:#000;border-color:#ccc;
}

/* accent colour for the album‑count (and for × when active) */
.filter-tag-btn .tag-count{
  color:#7dd3fc;                   /* nice cyan accent – pick any colour you like */
  font-weight:600;
}
/* clear‑all */
.clear-filters-btn{
  position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
  background:transparent;border:1px solid #888;color:#fff;
  padding:6px 16px;border-radius:6px;cursor:pointer;font-size:.85em;
}
.clear-filters-btn:hover{background:#333;border-color:#aaa;}

/* ── album grid, detail‑box, player … (unchanged) ───────────── */
.albums-section{width:100%;max-width:600px;margin:0 auto 40px;padding:0 20px;display:flex;flex-direction:column;}
.album-row{display:flex;gap:20px;margin:10px 0;justify-content:flex-start;}
.album-card{flex:0 0 calc((100% - 40px)/3);cursor:pointer;text-align:center;position:relative;transition:filter .5s,opacity .5s;}
.album-card img{width:100%;display:block;}
.album-card.dimmed{filter:grayscale(100%) blur(2px);opacity:.6;}

.detail-box{width:100%;max-width:600px;background:#222;color:#ddd;transition:height .5s,opacity .5s,transform .5s;overflow:hidden;}
.detail-box.closing{opacity:1;transform:translateY(0);}
.detail-content{padding:15px;}
.detail-title{font-size:.9em;margin-bottom:12px;font-weight:bold;}
.detail-tracklist{list-style:none;font-size:.9em;margin:0 0 10px;padding:5px 15px;}
.detail-tracklist li{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #555;cursor:pointer;}
.detail-tracklist li:hover{background:#555;}
.detail-tracklist li.active-track{background:rgba(255,255,255,.1);}
.detail-info{font-size:.9em;}
.track-duration{font-family:var(--track-title-font);font-size:.9em;color:#bbb;}

.grid-fade{position:fixed;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.6) 70%,rgba(0,0,0,0));}

.music-player{position:fixed;bottom:0;width:100%;height:100px;background:transparent;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}
.player-controls{display:flex;align-items:center;justify-content:center;gap:20px;}
.player-progress-row{display:flex;align-items:center;justify-content:center;width:100%;max-width:500px;gap:10px;}
.player-info-row{width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-info-line{font-family:var(--track-title-font);}
.player-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;padding:0 8px;}
.player-btn:hover{color:#fff;}
.play-circle{border:2px solid #fff;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;}
.play-circle svg{width:20px;height:20px;}
#playIcon{transform:translateX(2px);}
.time-display{font-size:.75em;color:#b3b3b3;margin:0 10px;width:40px;text-align:center;}
.progress-container{position:relative;flex-grow:1;height:4px;background:#404040;border-radius:2px;cursor:pointer;}
.progress{position:absolute;height:100%;width:0;background:#fff;border-radius:2px;}

@media(max-width:768px){
  .albums-section{padding:0 20px;}
  .album-row{flex-wrap:nowrap;}
}

.record-id{font-size:.8em;color:#aaa;margin-bottom:16px;}
.description{line-height: 1;margin-bottom:16px;}
.credits{font-size:.85em;color:#aaa;line-height:1;margin-bottom:16px;font-style:italic;}
.additional-info-btn{background:transparent;border:1px solid #aaa;color:#fff;padding:4px;font-size:.8em;border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s;}
.additional-info-btn:hover{background:#333;border-color:#aaa;}

.detail-header{position:relative;display:flex;align-items:center;}
.detail-close-btn{position:absolute;top:0;right:0;background:none;border:none;font-size:1.25em;color:#bbb;cursor:pointer;line-height:1;}
.detail-close-btn:hover{color:#fff;}