/* ═══════════════════════════════════════════════════════════
   MATTHEWXMURPHY AUDIO — audiobook player
   Skinned in his mxm-grunge editorial brand:
   black / white / signature red (#ed102c)
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#090909;
  --panel:#101010;
  --panel2:#161616;
  --edge:#353535;
  --txt:#f7f7f4;
  --dim:#c1c1bd;
  --brand:#ed102c;
  --brand-hover:#ff2441;
  --brand-deep:#a80b1f;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --display:Impact,"Arial Narrow","Liberation Sans Narrow","Helvetica Neue",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' opacity='.28' d='M0 0h220v220H0z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  min-height:100vh;
  display:flex;justify-content:center;
  padding:12px;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.06;
}
.mono{font-family:var(--mono)}
.dot{opacity:.4;margin:0 .5em}
::selection{color:#fff;background:#c20d25}

/* ── app frame ─────────────────────────────── */
.winamp{
  position:relative;z-index:1;
  width:100%;max-width:1060px;
  background:var(--panel);
  border:1px solid var(--edge);
  border-top:3px solid var(--brand);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.75);
  align-self:flex-start;
}

/* ── title bar ─────────────────────────────── */
.titlebar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:#080808;
  border-bottom:1px solid var(--edge);
  user-select:none;
}
.titlebar-left{display:flex;align-items:center;gap:12px}
.titlebar-logo{
  color:var(--brand);font-size:18px;line-height:1;
}
.titlebar-title{
  font-family:var(--display);
  font-size:20px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:400;color:var(--txt);
}
.titlebar-title .amp{color:var(--brand)}
.titlebar-btns{display:flex;gap:6px}
.tbtn{
  width:22px;height:18px;display:grid;place-items:center;
  font-size:11px;color:#8a8a86;
  background:transparent;
  border:1px solid var(--edge);border-radius:2px;cursor:default;
}
.tbtn.close{color:var(--brand)}

/* ── now playing ───────────────────────────── */
.nowplaying{
  padding:20px;border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#101010 0%,#0b0b0b 100%);
}
.np-main{display:flex;gap:18px;align-items:stretch}
.cover-wrap{position:relative;flex:0 0 148px}
.cover{
  width:148px;height:148px;object-fit:cover;border-radius:4px;
  border:1px solid var(--edge);background:#141414;display:block;
}
.cover-glow{
  position:absolute;inset:0;border-radius:4px;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(237,16,44,.14);
}
.np-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

/* ticker — scrolling readout */
.ticker{
  background:#050505;border:1px solid var(--edge);border-radius:3px;
  overflow:hidden;white-space:nowrap;
  padding:9px 12px;
  font-family:var(--mono);font-size:14px;color:var(--brand);
  text-shadow:0 0 8px rgba(237,16,44,.5);
  letter-spacing:.5px;
}
.ticker span{display:inline-block;padding-left:100%;animation:tick 14s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker.paused span{animation-play-state:paused}

.np-meta{font-size:13px;color:var(--dim)}
.np-meta #npBook{color:var(--txt);font-weight:600}
.viz{
  width:100%;height:56px;display:block;
  background:#050505;border:1px solid var(--edge);border-radius:3px;
}

.time-row{display:flex;align-items:center;gap:10px}
.time{font-size:12px;color:var(--dim);min-width:44px;text-align:center}

/* range inputs — modern red accent sliders */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:22px}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#1f1f1f;border:1px solid #111}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;
  background:var(--brand);border:2px solid #0a0a0a;
  box-shadow:0 0 8px rgba(237,16,44,.6);
}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#1f1f1f;border:1px solid #111}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid #0a0a0a}
.seek{flex:1}

/* transport */
.transport{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.tport{
  font-family:var(--mono);
  background:#1a1a1a;
  border:1px solid var(--edge);border-radius:4px;color:var(--txt);
  min-width:54px;height:50px;font-size:20px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.tport:hover{background:#242424;border-color:#4a4a4a}
.tport:active{transform:translateY(1px)}
.tport.big{
  min-width:76px;font-size:26px;
  background:var(--brand);border-color:var(--brand-deep);color:#fff;
  box-shadow:0 4px 16px rgba(237,16,44,.35);
}
.tport.big:hover{background:var(--brand-hover);border-color:var(--brand)}
.tport.small{min-width:44px;height:42px;font-size:16px}
.vol-wrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.vol{width:110px}

/* speed */
.speed-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.speed-label{
  font-family:var(--display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);
}
.speed-btns{display:flex;gap:6px;flex-wrap:wrap}
.speed-btns button{
  font-family:var(--mono);font-size:12px;
  background:#141414;color:var(--dim);
  border:1px solid var(--edge);border-radius:3px;
  padding:7px 11px;cursor:pointer;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
.speed-btns button:hover{color:var(--txt);border-color:#555}
.speed-btns button.active{color:#fff;background:var(--brand);border-color:var(--brand);font-weight:700}

.upnext{margin-top:10px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upnext b{color:var(--brand);font-weight:600}

/* ── playlist ──────────────────────────────── */
.playlist-panel{background:var(--panel)}
.pl-titlebar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;
  background:#0b0b0b;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.pl-titlebar span:first-child{
  font-family:var(--display);font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt);
}
.pl-count{font-size:11px;color:var(--dim);letter-spacing:1px}
.shelf-tabs{display:flex;gap:0;border-bottom:1px solid var(--edge)}
.shelf-tab{
  flex:1;padding:11px 6px;background:transparent;border:none;
  color:var(--dim);
  font-family:var(--display);font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;
  border-bottom:2px solid transparent;
}
.shelf-tab:hover{color:var(--txt)}
.shelf-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

.book-list{max-height:520px;overflow-y:auto}
.book{border-bottom:1px solid var(--edge)}
.book-head{
  display:flex;gap:12px;align-items:center;width:100%;
  background:var(--panel2);border:none;color:var(--txt);
  padding:13px 14px;text-align:left;cursor:pointer;font-family:inherit;
  transition:background .12s ease;
}
.book-head:hover{background:#1e1e1e}
.book-thumb{width:52px;height:52px;object-fit:cover;border-radius:3px;border:1px solid var(--edge);flex:0 0 52px;background:#141414}
.book-titles{flex:1;min-width:0}
.book-title{font-size:15px;font-weight:700}
.book-sub{font-size:12px;color:var(--dim);margin-top:2px}
.book-chev{color:var(--dim);font-size:14px;transition:transform .15s}
.book.open .book-chev{transform:rotate(90deg);color:var(--brand)}
.tracks{display:none;background:#0a0a0a}
.book.open .tracks{display:block}
.track{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px 10px 20px;background:transparent;border:none;
  color:var(--dim);font-family:var(--mono);font-size:13px;
  cursor:pointer;text-align:left;border-top:1px solid #161616;
  transition:background .12s ease,color .12s ease;
}
.track:hover{background:#151515;color:var(--txt)}
.track .n{color:#6a6a66;min-width:26px;text-align:right}
.track .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track .d{color:#6a6a66;font-size:12px}
.track .resume{font-size:10px;color:var(--brand);border:1px solid var(--brand);border-radius:3px;padding:1px 5px;letter-spacing:1px}
.track.playing{background:#1c0d10;color:var(--brand)}
.track.playing .n,.track.playing .d{color:var(--brand)}
.track.playing .t::before{content:"▸ ";color:var(--brand)}

.pl-footer{padding:10px 14px;font-size:11px;color:#6a6a66;border-top:1px solid var(--edge)}
.app-footer{
  display:flex;justify-content:center;gap:4px;
  padding:14px;font-size:11px;color:#6a6a66;letter-spacing:1px;
}

/* loading / error */
.notice{padding:24px;text-align:center;color:var(--dim);font-family:var(--mono);font-size:13px}

/* focus visibility (matches his theme) */
button:focus-visible,input:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ── responsive ────────────────────────────── */
@media (max-width:640px){
  body{padding:8px}
  .nowplaying{padding:14px}
  .np-main{flex-direction:row}
  .cover-wrap{flex:0 0 104px}
  .cover{width:104px;height:104px}
  .ticker{font-size:12px}
  .viz{height:44px}
  .tport{min-width:56px;height:54px;font-size:22px}
  .tport.big{min-width:78px;font-size:28px}
  .vol{width:90px}
  .book-list{max-height:none}
  .titlebar-title{font-size:17px}
  .pl-footer{display:none}
}
@media (min-width:900px){
  .winamp{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"title title" "player playlist" "footer footer"}
  .titlebar{grid-area:title}
  .nowplaying{grid-area:player;border-bottom:none;border-right:1px solid var(--edge)}
  .playlist-panel{grid-area:playlist;display:flex;flex-direction:column;min-height:0}
  .book-list{max-height:640px}
  .app-footer{grid-area:footer}
}