/* Adam font family (Light / Medium / Bold) */
@font-face{
  font-family:"Adam";
  src:url("assets/fonts/Adam-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Adam";
  src:url("assets/fonts/Adam-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Adam";
  src:url("assets/fonts/Adam-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Force Adam everywhere */
html, body, button, input, textarea, select {
  font-family: "Adam", system-ui, -apple-system, sans-serif;
}

/* Canonical WH0MST teaser player build:
   - Fonts live in assets/fonts/
   - Service links live in script.js (serviceLinks)
   - Dot-matrix visualizer lives in #viz
*/

/* WH0MST splash - single-file stable layout */
/* Fonts */
:root{
  --acid: #b3e601;
  --ink: #000;
  --glass: rgba(255,255,255,.14);
  --border: rgba(0,0,0,.18);
  --border-strong: rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--acid);
  color: var(--ink);
  font-family: "Adam", "Adam Medium", "Adam Bold", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow:hidden;
}

/* Background word art */
.bg-left{
  position:fixed;
  top:0; left:0;
  height:100vh;
  opacity:.18;
  pointer-events:none;
}
.bg-right{
  position:fixed;
  bottom:0; right:0;
  height:100vh;
  opacity:.18;
  pointer-events:none;
}

/* Center glass panel */
.panel{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, 94vw);
  height:min(640px, 86vh);
  display:flex;
  gap:0;
  padding:0;
  border-radius:26px;
  background: var(--glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 70px rgba(0,0,0,.22);
  outline: 1px solid var(--border);
}

/* Left cover */
.left{
  flex: 0 0 42%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px;
}
.cover{
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}

/* Right column */
.right{
  flex: 1;
  padding: 34px 34px 26px 34px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  justify-content: flex-start;
}

.meta .track{
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.meta .tag{
  font-size: 14px;
  letter-spacing: .08em;
  text-transform:none;
}
.meta .ep{
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .9;
}

/* Custom player */
.player{
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  outline: 1px solid var(--border);
  padding: 16px 16px 12px 16px;
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 6px 14px;
  align-items:center;
}

.playBtn{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.88);
  color: var(--acid);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  user-select:none;
}
.playBtn:focus{outline: 2px solid rgba(0,0,0,.45); outline-offset: 2px}
.playIcon,.pauseIcon{
  font-size: 12px;
  width: 16px;
  display:inline-block;
  text-align:center;
}
.pauseIcon{display:none}
.playBtn.isPlaying .playIcon{display:none}
.playBtn.isPlaying .pauseIcon{display:inline-block}

.timeline{
  position:relative;
  height: 20px;
  cursor:pointer;
  border-radius: 999px;
}
.barBg{
  position:absolute;
  inset: 8px 0 8px 0;
  border-radius:999px;
  background: rgba(0,0,0,.25);
}
.barFill{
  position:absolute;
  left:0;
  top:8px;
  height:4px;
  width:0%;
  border-radius:999px;
  background: rgba(0,0,0,.90);
}
.knob{
  position:absolute;
  top: 4px;
  left:0%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--acid);
  border: 1px solid rgba(0,0,0,.90);
  transform: translateX(-50%);
}

.timeRow{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  letter-spacing: .10em;
  opacity:.9;
}

/* Services */
.services{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.svc{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  height: 64px;
  background: rgba(255,255,255,.08);
  outline: 1px solid var(--border);
  text-decoration:none;
  transition: box-shadow .12s ease, outline-color .12s ease;
}
.svc img{
  height: 38px;   /* bigger + readable */
  width: auto;
  filter: none;
}
.svc:hover{
  /* thicker-on-hover without layout shift (no wobble) */
  outline-color: var(--border-strong);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55);
}
.svc:active{
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.65);
}
.svc:focus{outline: 2px solid rgba(0,0,0,.45); outline-offset: 2px}

/* More line */
.moreLine{
  font-size: 12px;
  letter-spacing: .06em;
  text-align:center;
  white-space: nowrap;
}
.moreLine a{
  color: var(--ink);
  text-decoration: underline;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 860px){
  body{overflow:auto}
  .panel{
    position:relative;
    top:auto; left:auto; transform:none;
    margin: 22px auto;
    height:auto;
    flex-direction:column;
  }
  .left{flex:0 0 auto; padding: 22px}
  .right{padding: 22px}
  .services{grid-template-columns: repeat(2, minmax(0,1fr));}
  .moreLine{white-space: normal;}
}


/* === BIGGER STREAMING LOGOS FIX === */
.services img {
    height: 72px !important;
    width: auto;
}

.service-btn {
    padding: 18px 28px !important;
}

/* Make sure everything uses the custom font (falls back cleanly) */
body, button {
  font-family: "Adam", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.vizWrap{
  width: 100%;
  height: 92px;
  margin: 12px 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.viz{
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.status{
  display: none;
  margin-top: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* When there’s an audio error (or any status message), show it without reserving dead space */
.status.isError{
  display: block;
  opacity: 1;
}