/* холст, на котором Rough.js рисует рамку */
#highlightCanvas{
  position:fixed;
  inset:0;
  pointer-events:none;   /* клики проходят сквозь */
  z-index:9999;
}

/* всплывающий блок */
#infoBox{
  position:absolute;
  max-width:240px;
  background:#fff;
  color:#222;
  padding:12px 14px 14px;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  font-size:0.95rem;
  line-height:1.4;
  z-index:9999;
  animation:fadeIn .25s ease-out;
}
#infoBox button{
  display:block;
  margin:8px auto 0;
  padding:4px 14px;

  border:none;
  border-radius:6px;

  /* ───── главный цвет и градиент ───── */
  background-color:#212529;                                           /* bg-dark */
  background-image:linear-gradient(180deg,
                     rgba(255,255,255,.15),                           /* +15 % света сверху */
                     rgba(255,255,255,0) 100%);                      /* полностью прозрачно снизу */
  background-repeat:no-repeat;
  background-size:cover;

  color:#fff;
  cursor:pointer;

  /* небольшая тень как у bootstrap-кнопок */
  box-shadow:0 .125rem .25rem rgba(0,0,0,.15);
  transition:opacity .15s, transform .15s;
}

#infoBox button:active{
  transform:translateY(1px);          /* лёгкий “press”-эффект */
  box-shadow:0 .05rem .15rem rgba(0,0,0,.25);
}
#infoBox button:hover{opacity:.9}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1}
}