/* Vibe Check web player — the v4 face from the plugins, on the web.
   Palette mirrors SharedUI.h: near-black window, soft raised surfaces, one electric blue. */

@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900; font-display: swap;
}

:root {
  --window:#0e0e12; --raised:#17171d; --raised-hi:#1d1d25; --inset:#07070a;
  --screen:#060608; --screen-rim:#1c1c22; --border:#26262c;
  --blue:#4d6bff; --amber:#ffb02e;
  --text-hi:#f2f2f5; --text-mid:#b8b8c0; --text-dim:#9a9aa2; --micro:#6e6e76; --disabled:#55555e;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body {
  background:var(--window);
  color:var(--text-hi);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh; padding:24px;
}

.face {
  width:100%; max-width:520px;
  display:flex; flex-direction:column; gap:18px;
}

/* lockup */
.lockup { text-align:center; margin-top:4px; }
.wordmark {
  font-family:'Archivo Black',sans-serif; font-weight:900;
  font-size:34px; letter-spacing:1px; line-height:1; color:var(--text-hi);
}
.kicker {
  margin-top:8px; color:var(--blue);
  font-size:13px; font-weight:600; letter-spacing:.42em; padding-left:.42em;
}

/* raised surface helper */
.raised {
  background:linear-gradient(180deg,var(--raised-hi),var(--raised));
  border-radius:14px;
  box-shadow: 6px 6px 18px rgba(0,0,0,.55), -3px -3px 10px rgba(255,255,255,.04),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* waveform screen */
.screen {
  position:relative; height:128px; border-radius:14px;
  background:var(--screen);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.8), 0 0 0 1px var(--screen-rim);
  overflow:hidden;
}
#scope { width:100%; height:100%; display:block; }
.chip {
  position:absolute; left:12px; bottom:10px;
  font-size:11.5px; color:var(--micro);
  background:rgba(23,23,29,.85); border-radius:11px;
  padding:5px 11px; backdrop-filter:blur(2px);
}
.chip.live { color:var(--text-hi); }

/* transport row */
.transport { display:flex; align-items:center; gap:12px; }
.listen {
  flex:0 0 auto; min-width:128px; height:48px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,var(--raised-hi),var(--raised));
  border:none; border-radius:14px; cursor:pointer;
  color:var(--blue); font-family:'Inter'; font-size:13px; font-weight:700; letter-spacing:.12em;
  box-shadow: 6px 6px 18px rgba(0,0,0,.55), -3px -3px 10px rgba(255,255,255,.04),
              inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .08s ease, color .15s ease;
}
.listen:not(:disabled):active { transform:translateY(1px); }
.listen:disabled { color:var(--disabled); cursor:default; }
.listen.on { color:var(--text-hi); }
.listen .dot { width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.85; }

.status {
  flex:1 1 auto; height:42px; display:flex; align-items:center; gap:10px;
  padding:0 16px; border-radius:14px;
  background:var(--raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 2px rgba(0,0,0,.4);
  color:var(--text-dim); font-size:13px;
}
.status .sdot { width:8px; height:8px; border-radius:50%; background:var(--disabled); transition:background .2s; }
.status.playing .sdot { background:var(--blue); box-shadow:0 0 10px var(--blue); animation:pulse 2.2s ease-in-out infinite; }
.status.buffering .sdot { background:var(--blue); opacity:.5; }
.status.noaudio .sdot { background:var(--amber); }
.status.playing, .status.buffering { color:var(--text-hi); }
@keyframes pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

.rate {
  flex:0 0 auto; height:42px; display:flex; align-items:center; padding:0 14px;
  border-radius:14px; background:var(--raised); color:var(--text-mid); font-size:12.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* code entry */
.entry { display:flex; gap:10px; }
.entry input {
  flex:1 1 auto; height:44px; padding:0 14px; border-radius:12px;
  background:var(--inset); border:1px solid var(--border); color:var(--text-hi);
  font-family:'Inter'; font-size:13px; outline:none;
}
.entry input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(77,107,255,.25); }
.entry input::placeholder { color:var(--micro); }
.entry button {
  flex:0 0 auto; width:64px; border:none; border-radius:12px; cursor:pointer;
  background:var(--blue); color:#fff; font-family:'Inter'; font-weight:700; letter-spacing:.1em; font-size:12px;
}
.entry button:active { transform:translateY(1px); }

/* meters */
.meters { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.mrow { display:flex; align-items:center; gap:12px; }
.mrow span { width:14px; color:var(--micro); font-size:11px; }
.track {
  flex:1 1 auto; height:7px; border-radius:4px; background:var(--inset);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.75); overflow:hidden;
}
.track i {
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue), #7d92ff);
  border-radius:4px; transition:width .06s linear;
}

/* talkback */
.talkrow { margin-top:2px; }
.talk {
  width:100%; height:46px; display:flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:14px; cursor:pointer; user-select:none; -webkit-user-select:none;
  background:linear-gradient(180deg,var(--raised-hi),var(--raised));
  color:var(--text-mid); font-family:'Inter'; font-size:13px; font-weight:700; letter-spacing:.12em;
  box-shadow: 6px 6px 18px rgba(0,0,0,.55), -3px -3px 10px rgba(255,255,255,.04),
              inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .08s ease, color .15s ease, box-shadow .15s ease;
  touch-action:none;
}
.talk:disabled { color:var(--disabled); cursor:default; }
.talk.live {
  color:#eafff4; transform:translateY(1px);
  background:linear-gradient(180deg, rgba(47,224,138,.20), rgba(47,224,138,.10));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 0 0 1px #2fe08a, 0 0 20px rgba(47,224,138,.45);
}
.talk .micdot { width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.7; }
.talk.live .micdot { opacity:1; background:#2fe08a; box-shadow:0 0 10px #2fe08a; animation:pulse 1s ease-in-out infinite; }

.foot { text-align:center; color:var(--micro); font-size:11.5px; margin-top:2px; }
.foot.warn { color:var(--amber); }